From 0b0df43626c33dd2e97e8d6de056749fe37e99d1 Mon Sep 17 00:00:00 2001 From: Samuel Zuk Date: Sun, 18 Apr 2021 23:06:30 -0400 Subject: [PATCH 1/7] Update CSS to properly space out VR/AR buttons --- src/css/App.css | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/src/css/App.css b/src/css/App.css index cf31d21b..e1e5f8df 100644 --- a/src/css/App.css +++ b/src/css/App.css @@ -320,12 +320,19 @@ div#reference-drawer>div { margin-right: 10px; } -/************************************ -********THIS IS THE VR BUTTON******** -************************************/ +/* Overwrites default A-Frame behavior for embedded + * buttons to behave as if scene was located within + * an iframe */ .a-enter-vr { - position: "relative"; - z-index: 1 !important; + position: absolute; + bottom:20px !important; + right:20px !important; +} + +.a-enter-ar { + position: absolute; + bottom:20px !important; + right:80px !important; } .geometry { From 1e1e182bd47eb8622bd40cce1e1da680c7b6225a Mon Sep 17 00:00:00 2001 From: jlu18 Date: Tue, 20 Apr 2021 19:08:48 -0400 Subject: [PATCH 2/7] Fixed colorshift bug and added test --- src/myr/Myr.js | 48 ++++---- src/tests/Myr.test.js | 273 +++++++++++++++++++++++++----------------- 2 files changed, 184 insertions(+), 137 deletions(-) diff --git a/src/myr/Myr.js b/src/myr/Myr.js index 8b231cf6..8b6daa47 100644 --- a/src/myr/Myr.js +++ b/src/myr/Myr.js @@ -1775,23 +1775,21 @@ class Myr { //if the element is light if(String(el.id).includes("lgt")){ let split = el.light.state.split(/\s|;/).filter(Boolean); - let colorIndex = split.indexOf("color:"); - let baseCol = split[colorIndex+1]; + let colorIndex = split.indexOf("color:")+1; + let baseCol = split[colorIndex]; if(this.colourNameToHex(baseCol)!==false){ baseCol = this.colourNameToHex(baseCol); } if(this.colourNameToHex(color) !== false){ color = this.colourNameToHex(color); } - let anim = ` - property: light.color; + let anim = `property: light.color; from: ${baseCol}; to: ${color}; dur: ${this.cursor.duration}; dir: alternate; loop: ${Boolean(this.cursor.loop)}; - type: color; - `; + type: color;`; el.animation__color = anim; return outerElId; } @@ -1801,31 +1799,29 @@ class Myr { let innerEl = el.els[i]; //innerEl.material.split(/\s|;/) returns an array of strings separated by " " and ";", //color is always its first attribute (after "color: ") - let anim = ` - property: components.material.material.color; - from: ${(innerEl.material.split(/\s|;/))[1]}; - to: ${color}; - dur: ${this.cursor.duration}; - dir: alternate; - loop: ${Boolean(this.cursor.loop)}; - isRawProperty: true; - type: color; - `; + let anim = `property: components.material.material.color; + from: ${(innerEl.material.split(/\s|;/))[1]}; + to: ${color}; + dur: ${this.cursor.duration}; + dir: alternate; + loop: ${Boolean(this.cursor.loop)}; + isRawProperty: true; + type: color;`; innerEl.animation__color = anim; } return outerElId; } - let anim = ` - property: components.material.material.color; - from: ${(el.material.split(/\s|;/))[2]}; - to: ${color}; - dur: ${this.cursor.duration}; - dir: alternate; - loop: ${Boolean(this.cursor.loop)}; - isRawProperty: true; - type: color; - `; + + const mat = el.material.split(/\s|;/); + let anim = `property: components.material.material.color; + from: ${mat[mat.indexOf("color:")+1]}; + to: ${color}; + dur: ${this.cursor.duration}; + dir: alternate; + loop: ${Boolean(this.cursor.loop)}; + isRawProperty: true; + type: color;`; el.animation__color = anim; return outerElId; } diff --git a/src/tests/Myr.test.js b/src/tests/Myr.test.js index d9f7378a..030f075d 100644 --- a/src/tests/Myr.test.js +++ b/src/tests/Myr.test.js @@ -389,8 +389,119 @@ describe("Component Renders", () => { }); }); +describe("MYR light functionality", () => { + it("ambientLight", ()=>{ + myr.reset(); + myr.els = []; + let id = myr.ambientLight({position: {x:1,y:1,z:1}}); + let ambientLight = myr.els[id]; + expect(ambientLight).toBeDefined(); + expect(ambientLight.light.state).toEqual(` + type: ambient; + color: red; + intensity: 1;`); + expect(ambientLight.position).toEqual({x:1,y:1,z:1}); + //light's scale sohuld not change + expect(ambientLight.scale).toEqual({x:1,y:1,z:1}); + }); + + it("directionalLight", ()=>{ + myr.els = []; + let id = myr.directionalLight({position: {x:1,y:1,z:1}}); + let directionalLight = myr.els[id]; + expect(directionalLight).toBeDefined(); + expect(directionalLight.light.state).toEqual(` + type: directional; + color: red; + intensity: 1;`); + expect(directionalLight.position).toEqual({x:1,y:1,z:1}); + expect(directionalLight.scale).toEqual({x:1,y:1,z:1}); + }); + + it("spotLight", ()=>{ + myr.els = []; + let id = myr.spotLight({position: {x:1,y:1,z:1}}); + let spotLight = myr.els[id]; + expect(spotLight).toBeDefined(); + expect(spotLight.light.state).toEqual(` + type: spot; + angle: 60; + decay: 1; + distance: 0; + intensity: 1; + penumbra: 0; + color: red;`); + expect(spotLight.position).toEqual({x:1,y:1,z:1}); + //light's scale sohuld not change + expect(spotLight.scale).toEqual({x:1,y:1,z:1}); + }); + + it("pointLight", ()=>{ + myr.els = []; + let id = myr.pointLight({position: {x:1,y:1,z:1}}); + let pointLight = myr.els[id]; + expect(pointLight).toBeDefined(); + expect(pointLight.light.state).toEqual(` + type: point; + angle: 60; + decay: 1; + distance: 0; + intensity: 1; + penumbra: 0; + color: red;`); + expect(pointLight.position).toEqual({x:1,y:1,z:1}); + //light's scale should not change + expect(pointLight.scale).toEqual({x:1,y:1,z:1}); + }); + + it("hemisphereLight", ()=>{ + myr.els = []; + let id = myr.hemisphereLight("blue",{position: {x:1,y:1,z:1}}); + let hemisphereLight = myr.els[id]; + expect(hemisphereLight).toBeDefined(); + expect(hemisphereLight.light.state).toEqual(` + type: hemisphere; + intensity: 1; + color: red; + groundColor: blue;`); + expect(hemisphereLight.position).toEqual({x:1,y:1,z:1}); + //light's scale should not change + expect(hemisphereLight.scale).toEqual({x:1,y:1,z:1}); + }); + + it("to Set Intensity", () => { + myr.setIntensity(5); + expect(myr.cursor.light.intensity).toEqual(5); + }); + + it("to Set BeamAngle", () => { + myr.setBeamAngle(30); + expect(myr.cursor.light.beamAngle).toEqual(30); + }); + + it("to Set Diffusion", () => { + myr.setDiffusion(1.25); + expect(myr.cursor.light.diffusion).toEqual(1.25); + }); + + it("to Set decay", () => { + myr.setDecay(1.87); + expect(myr.cursor.light.decay).toEqual(1.87); + }); + + it("to Set Distance", () => { + myr.setDistance(50); + expect(myr.cursor.light.distance).toEqual(50); + }); + + it("to Set Light Target", () => { + myr.setLightTarget(4,5,10); + expect(myr.cursor.light.target).toEqual({x:4, y: 5, z: 10}); + }); +}); + describe("Component Animations", () => { - it("Should add the animate animation", () => { + it("should add the animate animation", () => { myr.reset(); let bId = myr.box(); myr.animate(bId); @@ -412,7 +523,7 @@ describe("Component Animations", () => { `); }); - it("Should add the spin animation", () => { + it("should add the spin animation", () => { myr.reset(); let bId = myr.box(); myr.spin(bId); @@ -568,129 +679,69 @@ describe("Component Animations", () => { expect(el).toHaveProperty("animation__shrink"); }); - -}); - -describe("MYR light functionality", () => { - it("ambientLight", ()=>{ + it("should add the color_shift animation",()=>{ myr.reset(); - myr.els = []; - let id = myr.ambientLight({position: {x:1,y:1,z:1}}); - let ambientLight = myr.els[id]; - expect(ambientLight).toBeDefined(); - expect(ambientLight.light.state).toEqual(` - type: ambient; - color: red; - intensity: 1;`); - expect(ambientLight.position).toEqual({x:1,y:1,z:1}); - //light's scale sohuld not change - expect(ambientLight.scale).toEqual({x:1,y:1,z:1}); - }); - - it("directionalLight", ()=>{ - myr.els = []; - let id = myr.directionalLight({position: {x:1,y:1,z:1}}); - let directionalLight = myr.els[id]; - expect(directionalLight).toBeDefined(); - expect(directionalLight.light.state).toEqual(` - type: directional; - color: red; - intensity: 1;`); - expect(directionalLight.position).toEqual({x:1,y:1,z:1}); - expect(directionalLight.scale).toEqual({x:1,y:1,z:1}); - }); - - it("spotLight", ()=>{ - myr.els = []; - let id = myr.spotLight({position: {x:1,y:1,z:1}}); - let spotLight = myr.els[id]; - expect(spotLight).toBeDefined(); - expect(spotLight.light.state).toEqual(` - type: spot; - angle: 60; - decay: 1; - distance: 0; - intensity: 1; - penumbra: 0; - color: red;`); - expect(spotLight.position).toEqual({x:1,y:1,z:1}); - //light's scale sohuld not change - expect(spotLight.scale).toEqual({x:1,y:1,z:1}); - }); - - it("pointLight", ()=>{ - myr.els = []; - let id = myr.pointLight({position: {x:1,y:1,z:1}}); - let pointLight = myr.els[id]; - expect(pointLight).toBeDefined(); - expect(pointLight.light.state).toEqual(` - type: point; - angle: 60; - decay: 1; - distance: 0; - intensity: 1; - penumbra: 0; - color: red;`); - expect(pointLight.position).toEqual({x:1,y:1,z:1}); - //light's scale should not change - expect(pointLight.scale).toEqual({x:1,y:1,z:1}); - }); - - it("hemisphereLight", ()=>{ - myr.els = []; - let id = myr.hemisphereLight("blue",{position: {x:1,y:1,z:1}}); - let hemisphereLight = myr.els[id]; - expect(hemisphereLight).toBeDefined(); - expect(hemisphereLight.light.state).toEqual(` - type: hemisphere; - intensity: 1; - color: red; - groundColor: blue;`); - expect(hemisphereLight.position).toEqual({x:1,y:1,z:1}); - //light's scale should not change - expect(hemisphereLight.scale).toEqual({x:1,y:1,z:1}); - }); - - it("to Set Intensity", () => { - myr.setIntensity(5); - expect(myr.cursor.light.intensity).toEqual(5); - }); - - it("to Set BeamAngle", () => { - myr.setBeamAngle(30); - expect(myr.cursor.light.beamAngle).toEqual(30); - }); + let id = myr.box(); + myr.colorShift(id,"blue"); + let el = myr.getEl(id); + expect(el).toHaveProperty("animation__color"); - it("to Set Diffusion", () => { - myr.setDiffusion(1.25); - expect(myr.cursor.light.diffusion).toEqual(1.25); + expect(el.animation__color).toEqual(`property: components.material.material.color; + from: ${defaultCursor.color}; + to: blue; + dur: ${defaultCursor.duration}; + dir: alternate; + loop: ${defaultCursor.loop}; + isRawProperty: true; + type: color;`); }); - it("to Set decay", () => { - myr.setDecay(1.87); - expect(myr.cursor.light.decay).toEqual(1.87); - }); - - it("to Set Distance", () => { - myr.setDistance(50); - expect(myr.cursor.light.distance).toEqual(50); + it("should add the color_shift animation to the light",()=>{ + myr.reset(); + let id = myr.directionalLight(); + myr.colorShift(id,"green"); + let el = myr.getEl(id); + expect(el).toHaveProperty("animation__color"); + expect(el.animation__color).toEqual(`property: light.color; + from: #ff0000; + to: #008000; + dur: ${defaultCursor.duration}; + dir: alternate; + loop: ${defaultCursor.loop}; + type: color;`); }); - it("to Set Light Target", () => { - myr.setLightTarget(4,5,10); - expect(myr.cursor.light.target).toEqual({x:4, y: 5, z: 10}); + it("should add the color_shift animation to the group",()=>{ + myr.reset(); + let id = myr.group(); + id.add(myr.box()); + id.add(myr.box()); + id.add(myr.box()); + myr.colorShift(id,"purple"); + let el = myr.getEl(id); + el.els.forEach(e=>{ + expect(e).toHaveProperty("animation__color"); + expect(e.animation__color).toEqual(`property: components.material.material.color; + from: ${defaultCursor.color}; + to: purple; + dur: ${defaultCursor.duration}; + dir: alternate; + loop: ${Boolean(defaultCursor.loop)}; + isRawProperty: true; + type: color;`); + }); }); }); describe("Other Myr functionality", () => { - it("Should add a model", () => { + it("should add a model", () => { myr.reset(); myr.assets = []; myr.addCModel(); expect(myr.assets).toContainEqual({ id: "c-obj", src: "/img/c.obj" }); }); - it("Should drop", () => { + it("should drop", () => { myr.reset(); let el = myr.box({ material: "color: blue;", position: { x: 1, y: 1, z: 1 } }); myr.drop(el); @@ -1082,7 +1133,7 @@ describe("Other Myr functionality", () => { expect(response).toEqual({ "test1": 1, "test2": 3 }); }); - it("Should accept hex colors entered for setColor function", () => { + it("should accept hex colors entered for setColor function", () => { myr.setColor("#ff0000"); expect(myr.cursor.color).toEqual("#ff0000"); myr.setColor("#FF0000"); @@ -1094,7 +1145,7 @@ describe("Other Myr functionality", () => { }); // This is will test different variations of color - it("Should accept any caps or lowercase letters", () => { + it("should accept any caps or lowercase letters", () => { myr.setColor("Blue"); expect(myr.cursor.color).toEqual("blue"); myr.setColor("pURPle"); From 761b07d3f9375e9709f149c7ff2a056faef1f15d Mon Sep 17 00:00:00 2001 From: jlu18 Date: Wed, 21 Apr 2021 10:31:57 -0400 Subject: [PATCH 3/7] Modify the completer so when the function is completed, the cursor will be inside the parenthesis. --- src/components/editor/customCompleter.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/components/editor/customCompleter.js b/src/components/editor/customCompleter.js index 44f0a381..3b8ed185 100644 --- a/src/components/editor/customCompleter.js +++ b/src/components/editor/customCompleter.js @@ -213,10 +213,19 @@ export const customCompleter = { caption: word, value: word, meta: "MYR", - score: 2 + score: 2, + completer:{ + insertMatch: function(editor,data){ + editor.completer.insertMatch({value:data.value}); + let pos = editor.selection.getCursor(); + editor.gotoLine(pos.row+1,pos.column-1); + } + } }; })); + + callback(null, Colors.map(function (word) { return { caption: word, From df87a218f5fe6c8a46a22932527dade581e82782 Mon Sep 17 00:00:00 2001 From: jlu18 Date: Wed, 21 Apr 2021 15:00:48 -0400 Subject: [PATCH 4/7] Remove unecessary line --- src/components/editor/customCompleter.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/editor/customCompleter.js b/src/components/editor/customCompleter.js index 3b8ed185..438ad20f 100644 --- a/src/components/editor/customCompleter.js +++ b/src/components/editor/customCompleter.js @@ -224,8 +224,6 @@ export const customCompleter = { }; })); - - callback(null, Colors.map(function (word) { return { caption: word, From f72f3fde8873a207cdbe34c1ec9dac569f35edd4 Mon Sep 17 00:00:00 2001 From: jlu18 Date: Wed, 12 May 2021 14:49:45 -0400 Subject: [PATCH 5/7] Fixed makePushable --- src/components/structural/View.js | 2 +- src/utils/AFramePhysics.js | 10 ++++++---- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/structural/View.js b/src/components/structural/View.js index f14ea02b..9f47bbbf 100644 --- a/src/components/structural/View.js +++ b/src/components/structural/View.js @@ -139,7 +139,7 @@ class View extends Component { if (ent.tube) { return ; } - return ; + return ; } } //return elements that contains necessary configuration for light indicator based on light's type and properties diff --git a/src/utils/AFramePhysics.js b/src/utils/AFramePhysics.js index 5172cb3a..d9bb8782 100644 --- a/src/utils/AFramePhysics.js +++ b/src/utils/AFramePhysics.js @@ -3,7 +3,10 @@ const THREE = AFRAME.THREE; AFRAME.registerComponent("force-pushable", { schema: { - force: { default: 10 } + force: { + type: "number", + default: 10 + } }, init: function () { this.pStart = new THREE.Vector3(); @@ -13,12 +16,11 @@ AFRAME.registerComponent("force-pushable", { forcePush: function () { let force, el = this.el, - pStart = this.pStart.copy(this.sourceEl.getAttribute("position")); - + pStart = this.pStart.copy(this.sourceEl.children[0].getAttribute("position")); // Compute direction of force, normalize, then scale. force = el.body.position.vsub(pStart); force.normalize(); - force.scale(this.data.force, force); + force.scale(this.nextData.force, force); el.body.applyImpulse(force, el.body.position); } From 4413a94cecbc715d0a42bea74f5eabe81cc37f42 Mon Sep 17 00:00:00 2001 From: jlu18 Date: Mon, 7 Jun 2021 12:34:38 -0400 Subject: [PATCH 6/7] Fixed VR icon was always on top of the screen --- src/css/App.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/css/App.css b/src/css/App.css index e1e5f8df..4c4e7025 100644 --- a/src/css/App.css +++ b/src/css/App.css @@ -327,12 +327,14 @@ div#reference-drawer>div { position: absolute; bottom:20px !important; right:20px !important; + z-index: 1 !important; } .a-enter-ar { position: absolute; bottom:20px !important; right:80px !important; + z-index: 1 !important; } .geometry { From e4ca3975785b6c1aedc31a80d550f39c5304e367 Mon Sep 17 00:00:00 2001 From: Keith Valin Date: Wed, 9 Jun 2021 13:19:58 -0400 Subject: [PATCH 7/7] Updated README with 2.2.2 changes and upped patch version number --- README.md | 9 +++++---- package.json | 2 +- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 6b413e43..1f625a75 100644 --- a/README.md +++ b/README.md @@ -9,10 +9,11 @@ The Engaging Computing Group develops new technologies to enable learners—yout ## Status [![CircleCI](https://circleci.com/gh/engaging-computing/MYR.svg?style=shield)](https://circleci.com/gh/engaging-computing/MYR) -## Change Log - 2.1.1 -> 2.2.0 -- Adds Lighting features to MYR -- Adds Texture features to MYR -- Updates copyright in the footer to be in the form `2018 - ` +## Change Log - 2.2.0 -> 2.2.1 +- Updated VR/AR buttons to be spaced out +- Fixed bug where colorshift would always choose white for it's initial color +- Updated autocompelete to put cursor in between parenthesis instead of after +- Fixed a bug where a pushable entity would not be able to be pushed (`makePushable`) ## Acknowledgments diff --git a/package.json b/package.json index 671ef35e..3928de54 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "myr", - "version": "2.2.0", + "version": "2.2.1", "private": false, "engines": { "node": "12.18.2"