Reactive state bugfixes

Author: Wakeful-Cloud

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Cloud CNC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-gcode-viewer",
   "version": "1.2.0",
-  "main": "dist/vue-gcode-viewer.js",
+  "main": "dist/vue-gcode-viewer.common.js",
   "scripts": {
     "serve": "vue-cli-service serve src/demo/main.js",
     "build": "vue-cli-service build --target lib --name vue-gcode-viewer src/main.js",
@@ -11,6 +11,25 @@
     "test:unit": "vue-cli-service test:unit",
     "lint": "vue-cli-service lint"
   },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Cloud-CNC/vue-gcode-viewer.git"
+  },
+  "keywords": [
+    "vue",
+    "gcode",
+    "gcode-viewer",
+    "vue-gcode-viewer",
+    "gcode-visualizer",
+    "gcode-parser",
+    "cloud-cnc"
+  ],
+  "author": "Cloud CNC",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/Cloud-CNC/vue-gcode-viewer/issues"
+  },
+  "homepage": "https://github.com/Cloud-CNC/vue-gcode-viewer#readme",
   "files": [
     "dist/*",
     "src/*"

src/assets/scene.js

@@ -24,6 +24,8 @@ const state = {
   canvas: null,
   controls: null,
   destroyed: false,
+  object: null,
+  plane: null,
   renderer: null,
   scene: null
 };
@@ -54,29 +56,32 @@ const resize = () =>
  */
 const setup = async (canvas, bed, theme, gcode, position, rotation, scale) =>
 {
+  //Canvas
+  state.canvas = canvas;
+
   //Renderer
   state.renderer = new WebGLRenderer({antialias: true});
   state.renderer.setPixelRatio(window.devicePixelRatio);
   state.renderer.setSize(
-    canvas.clientWidth,
-    canvas.clientHeight
+    state.canvas.clientWidth,
+    state.canvas.clientHeight
   );
   state.renderer.encoding = GammaEncoding;
   state.renderer.outputEncoding = GammaEncoding;
   state.renderer.shadowMap.enabled = true;
-  canvas.appendChild(state.renderer.domElement);
+  state.canvas.appendChild(state.renderer.domElement);
 
   //Camera
-  const camera = new PerspectiveCamera(
+  state.camera = new PerspectiveCamera(
     50,
-    canvas.clientWidth / canvas.clientHeight,
+    state.canvas.clientWidth / state.canvas.clientHeight,
     0.1,
     200
   );
-  camera.position.set(0, bed.X / 2, -bed.Y);
+  state.camera.position.set(0, bed.X / 2, -bed.Y);
 
   //Orbit controls
-  state.controls = new OrbitControls(camera, canvas);
+  state.controls = new OrbitControls(state.camera, state.canvas);
   state.controls.rotateSpeed = 0.7;
   state.controls.minDistance = 1;
   state.controls.maxDistance = 100;
@@ -93,21 +98,21 @@ const setup = async (canvas, bed, theme, gcode, position, rotation, scale) =>
   state.scene.background = new Color(theme.backgroundColor);
 
   //Plane
-  const plane = new Mesh(
+  state.plane = new Mesh(
     new PlaneBufferGeometry(),
     new MeshBasicMaterial({color: new Color(theme.bedColor)})
   );
-  plane.rotation.x = -Math.PI / 2;
-  plane.scale.set(bed.X, bed.Y, 1);
-  state.scene.add(plane);
+  state.plane.rotation.x = -Math.PI / 2;
+  state.plane.scale.set(bed.X, bed.Y, 1);
+  state.scene.add(state.plane);
 
   //GCODE
   if (gcode != null)
   {
-    const object = await utils.update.gcode(gcode, theme, state.scene);
-    utils.update.position(object, position);
-    utils.update.rotation(object, rotation);
-    utils.update.scale(object, scale);
+    await utils.update.gcode(gcode, theme, state.scene);
+    utils.update.position(position);
+    utils.update.rotation(rotation);
+    utils.update.scale(scale);
   }
 
   //Subscribe to resize event
@@ -120,7 +125,7 @@ const setup = async (canvas, bed, theme, gcode, position, rotation, scale) =>
     {
       state.controls.update();
       requestAnimationFrame(animate);
-      state.renderer.render(state.scene, camera);
+      state.renderer.render(state.scene, state.camera);
     }
   };
   animate();
@@ -169,4 +174,4 @@ const teardown = () =>
 };
 
 //Export
-export {setup, teardown};
+export {setup, teardown, state};

src/assets/utils.js

@@ -3,6 +3,7 @@
  */
 
 //Imports
+import {state} from '@/assets/scene';
 import GCodeParser from '@/assets/gcode-parser';
 
 /**
@@ -12,20 +13,19 @@ const update = {
   /**
    * @function Update bed
    */
-  bed: (plane, bed) =>
+  bed: bed =>
   {
     const {X, Y} = bed;
-    plane.scale.set(X, Y, 1);
+    state.plane.scale.set(X, Y, 1);
   },
 
   /**
    * @function Update GCODE
    * @param {String} raw Raw GCODE
    * @param {Object} theme Theme
-   * @param {Scene} scene ThreeJS scene
-   * @returns {Promise<Object>}
+   * @returns {Promise<void>}
    */
-  gcode: async (raw, theme, scene) =>
+  gcode: async (raw, theme) =>
   {
     const parser = new GCodeParser(
       theme.extrusionColor,
@@ -35,65 +35,64 @@ const update = {
     const object = await parser.parse(raw);
 
     //Add to scene
-    scene.add(object.extrusion);
-    scene.add(object.path);
+    state.scene.add(object.extrusion);
+    state.scene.add(object.path);
 
-    //Return for later manipulation
-    return object;
+    //Save for later manipulation
+    state.object = object;
+
+    window.test = () =>
+    {
+      return state;
+    };
   },
 
   /**
    * @function Update object position
-   * @param {Object} object Object
    * @param {Object} position Position
    */
-  position: (object, position) =>
+  position: position =>
   {
     const {X, Y, Z} = position;
-    object.extrusion.position.set(X, Y, Z);
-    object.path.position.set(X, Y, Z);
+    state.object.extrusion.position.set(X, Y, Z);
+    state.object.path.position.set(X, Y, Z);
   },
 
   /**
    * @function Update object rotation
-   * @param {Object} object Object
    * @param {Object} rotation Rotation
    */
-  rotation: (object, rotation) =>
+  rotation: rotation =>
   {
     let {X, Y, Z} = rotation;
     X *= Math.PI / 180;
     Y *= Math.PI / 180;
     Z *= Math.PI / 180;
-    object.extrusion.rotation.set(X, Y, Z);
-    object.path.rotation.set(X, Y, Z);
+    state.object.extrusion.rotation.set(X, Y, Z);
+    state.object.path.rotation.set(X, Y, Z);
   },
 
   /**
    * @function Update object scale
-   * @param {Object} object Object
    * @param {Object} scale Scale
    */
-  scale: (object, scale) =>
+  scale: scale =>
   {
     const {X, Y, Z} = scale;
-    object.extrusion.scale.set(Z, X, Y);
-    object.path.scale.set(Z, X, Y);
+    state.object.extrusion.scale.set(Z, X, Y);
+    state.object.path.scale.set(Z, X, Y);
   },
 
   /**
    * @function Update scene theme
-   * @param {Object} object Object
    * @param {Object} theme Theme
-   * @param {PlaneGeometry} plane ThreeJS plane
-   * @param {Scene} scene Scene
    */
-  theme: (object, theme, plane, scene) =>
+  theme: theme =>
   {
-    object.extrusion.material.color.set(theme.extrusionColor);
-    object.path.material.color.set(theme.pathColor);
-    plane.material.color.set(theme.bedColor);
-    scene.background.set(theme.backgroundColor);
+    state.object.extrusion.material.color.set(theme.extrusionColor);
+    state.object.path.material.color.set(theme.pathColor);
+    state.plane.material.color.set(theme.bedColor);
+    state.scene.background.set(theme.backgroundColor);
   }
 };
 

src/gcode-viewer.vue

@@ -53,65 +53,53 @@ export default {
       type: Object
     }
   },
-  data: () => ({
-    camera: null,
-    controls: null,
-    scene: null,
-    plane: null,
-    object: {
-      extrusion: null,
-      path: null
-    },
-    renderer: null,
-    destroyed: false
-  }),
   watch: {
     //Update plane
     bed: {
       deep: true,
       handler: function ()
       {
-        utils.update.bed(this.plane, this.bed);
+        utils.update.bed(this.bed);
       }
     },
     //Update model
-    gcode: function (raw)    
+    gcode: async function (raw)    
     {
-      utils.update.gcode(raw, this.theme, this.scene);
-      utils.update.position(this.object, this.position);
-      utils.update.rotation(this.object, this.rotation);
-      utils.update.scale(this.object, this.scale);
+      await utils.update.gcode(raw, this.theme);
+      utils.update.position(this.position);
+      utils.update.rotation(this.rotation);
+      utils.update.scale(this.scale);
     },
     //Update position
     position: {
       deep: true,
       handler: function (value)
       {
-        utils.update.position(this.object, value);
+        utils.update.position(value);
       }
     },
     //Update rotation
     rotation: {
       deep: true,
       handler: function (value)
       {
-        utils.update.rotation(this.object, value);
+        utils.update.rotation(value);
       }
     },
     //Update scale
     scale: {
       deep: true,
       handler: function (value)
       {
-        utils.update.scale(this.object, value);
+        utils.update.scale(value);
       }
     },
     //Update theme
     theme: {
       deep: true,
       handler: function (value)
       {
-        utils.update.theme(this.object, value, this.plane, this.scene);
+        utils.update.theme(value);
       }
     }
   },
@@ -130,7 +118,7 @@ export default {
 
 <style>
 #canvas {
-  position: fixed;
+  position: absolute;
   width: 100%;
   height: 100%;
 }