before refactor sketcher

src/Scene.js

@@ -1,7 +1,8 @@
 
 
 
-import * as THREE from 'three/src/Three';
+// import * as THREE from 'three/src/Three';
+import * as THREE from '../node_modules/three/src/Three';
 // import { OrbitControls } from './utils/OrbitControls'
 import { TrackballControls } from './utils/trackball'
 import { Sketcher } from './sketcher/Sketcher'
@@ -23,13 +24,13 @@ const eq = (a1, a2) => {
   return true
 }
 
+window.nid = 0
 
 export class Scene extends THREE.Scene {
   constructor(store) {
     super()
-    this.name = 'Scene'
-    this.store = store;
 
+    this.store = store;
     this.canvas = document.querySelector('#c');
     this.renderer = new THREE.WebGLRenderer({ canvas: this.canvas });
 
@@ -57,7 +58,7 @@ export class Scene extends THREE.Scene {
     const pxy = new THREE.Mesh(
       new THREE.PlaneGeometry(5, 5),
       new THREE.MeshBasicMaterial({
-        color: color.Plane,
+        color: color.d,
         opacity: 0.2,
         side: THREE.DoubleSide,
         transparent: true,
@@ -65,7 +66,8 @@ export class Scene extends THREE.Scene {
         toneMapped: false
       })
     );
-    pxy.name = "Plane"
+
+    pxy.name = 'd' + nid++
     helpersGroup.add(pxy);
 
     const pyz = pxy.clone().rotateY(Math.PI / 2);
@@ -94,7 +96,6 @@ export class Scene extends THREE.Scene {
 
 
     this.render = render.bind(this);
-    this.resizeCanvas = resizeCanvas.bind(this);
     this.addSketch = addSketch.bind(this);
     this.extrude = extrude.bind(this);
     this.onHover = onHover.bind(this);
@@ -116,6 +117,46 @@ export class Scene extends THREE.Scene {
 
     this.render();
   }
+
+  resizeCanvas(renderer) {
+    const canvas = renderer.domElement;
+    const width = canvas.clientWidth;
+    const height = canvas.clientHeight;
+    const needResize = canvas.width !== width || canvas.height !== height;
+    if (needResize) {
+      renderer.setSize(width, height, false);
+    }
+    return needResize;
+  }
+
+  saveState() {
+
+    localStorage.setItem(
+      'sv', JSON.stringify([id, this.store.getState(), this.children.slice(4)])
+    )
+
+  }
+
+  loadState() {
+
+    const [curId, state, treeItems] = JSON.parse(
+      localStorage.getItem('sv')
+    )
+
+    window.id = curId
+    this.store.dispatch({ type: 'restore-state', state })
+
+
+    for (let i = 0; i < treeItems.length; i++) {
+      const obj = loader.parse(treeItems[i])
+      console.log(obj)
+      sc.add(obj)
+      // obj.visible = false
+    }
+
+
+  }
+
 }
 
 function render() {
@@ -130,16 +171,6 @@ function render() {
   this.stats.end();
 }
 
-function resizeCanvas(renderer) {
-  const canvas = renderer.domElement;
-  const width = canvas.clientWidth;
-  const height = canvas.clientHeight;
-  const needResize = canvas.width !== width || canvas.height !== height;
-  if (needResize) {
-    renderer.setSize(width, height, false);
-  }
-  return needResize;
-}
 
 
 async function addSketch() {
@@ -154,9 +185,9 @@ async function addSketch() {
           window.addEventListener('keydown', (e) => rej(e), { once: true })
         })
 
-        if (pt.type == 'Points') {
+        if (pt.name[0] == 'p') {
           references.push(pt)
-        } else if (pt.name == 'Plane') {
+        } else if (pt.name[0] == 'd') {
           references = [pt]
           break;
         }
@@ -170,9 +201,9 @@ async function addSketch() {
     }
   }
 
-  const sketcher = new Sketcher(this.camera, this.canvas, this.store)
+  const sketcher = new Sketcher(this.camera, this.canvas, this.store, nid++)
 
-  if (references.length == 1 && references[0].name == 'Plane') {
+  if (references.length == 1 && references[0].name[0] == 'd') {
     this.add(sketcher)
     sketcher.matrix = references[0].matrix
     sketcher.plane.applyMatrix4(sketcher.matrix)
@@ -204,23 +235,16 @@ window.loader = new THREE.ObjectLoader();
 
 
 
-// const mm = []
-// for (let i = 1; i <= 3; i++) {
-//   const obj = loader.parse(JSON.parse(localStorage.getItem(i.toString())))
-//   mm.push(obj)
-//   sc.add(mm[mm.length - 1])
-//   obj.visible = false
-// }
 
 
 
 //  //Create a bsp tree from each of the meshes
- 
+
 // let bspA = CSG.fromMesh( mm[0] )                        
 // let bspB = CSG.fromMesh( mm[2] )
 
 // // Subtract one bsp from the other via .subtract... other supported modes are .union and .intersect
- 
+
 // let bspResult = bspA.subtract(bspB)
 
 // //Get the resulting mesh from the result bsp, and assign meshA.material to the resulting mesh

src/app.jsx

@@ -16,7 +16,7 @@ export const Root = ({ store }) => (
 
 function treeId2Obj(id) {
   // return sc.scene.getObjectById(parseInt(id.slice(1)))
-  return sc.getObjectById(parseInt(id.slice(1)))
+  return sc.getObjectByName(id)
 }
 
 const App = () => {
@@ -54,9 +54,10 @@ const App = () => {
     </div>
 
     <div className='feature-tree'>
-      {treeEntries.allIds.map((entId, idx) => (
+      {treeEntries.map((entId, idx) => (
         <div key={idx}
           onClick={() => {
+            console.log('here',treeId2Obj(entId))
             if (activeSketch) {
               treeId2Obj(activeSketch).deactivate()
             }

src/extrude.js

@@ -27,8 +27,11 @@ export function extrude(sketch) {
     offSetPts.push(arr[arr.length - 3], arr[arr.length - 2])
 
     for (let i = 0; i < 2; i++) {
-      // let d = linkedObj[1][i]
+      let d = children[
-      let d = children[objIdx.get(linkedObj[1][i])]
+        objIdx.get(
+          linkedObj[1][i]
+        )
+      ]
       if (d == -1 || d == node) continue;
       if (d == children[1]) {
         console.log('pair found')
@@ -64,12 +67,13 @@ export function extrude(sketch) {
   const extrudeSettings = { depth: 8, bevelEnabled: false };
   const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
   const phong = new THREE.MeshPhongMaterial({
-    color: color.Extrude,
+    color: color.m,
     emissive: color.emissive,
     flatShading: true
   });
   const mesh = new THREE.Mesh(geometry, phong)
-  mesh.name = "Extrude"
+  // mesh.name = "Extrude"
+  mesh.name = 'm' + nid++
 
   for (let i = 0; i < offSetPts.length; i += 2) {
     if (

src/index.js

@@ -10,39 +10,34 @@ import logger from 'redux-logger'
 let _entId = 0
 
 function reducer(state = {}, action) {
-  let id;
   switch (action.type) {
     case 'toggle':
       return { ...state, toggle: action.payload }
     case 'rx-sketch':
-      id = 's' + action.obj.id
       return {
-        ...state, treeEntries: {
+        ...state, treeEntries: [...state.treeEntries, action.obj.name]
-          byId: { ...state.treeEntries.byId, [id]: action.obj },
+        ,
-          allIds: [...state.treeEntries.allIds, id]
-        },
       }
     case 'set-active-sketch':
       return {
-        ...state, activeSketch:'s'+action.sketch.id
+        ...state, activeSketch: action.sketch.name
       }
     case 'exit-sketch':
       return {
-        ...state, activeSketch:''
+        ...state, activeSketch: ''
       }
     case 'rx-extrusion':
-      id = 'e' + action.mesh.id
       return {
         ...state,
-        treeEntries: {
+        treeEntries: [...state.treeEntries, action.mesh.name]
-          byId: { ...state.treeEntries.byId, [id]: action.mesh },
+        ,
-          allIds: [...state.treeEntries.allIds, id]
-        },
         mesh2sketch: {
           ...state.mesh2sketch,
-          ['s' + action.sketch.id]: id
+          [action.sketch.name]: action.mesh.name
         }
       }
+    case 'restore-state':
+      return action.state
     default:
       return state
   }
@@ -52,15 +47,10 @@ function reducer(state = {}, action) {
 
 
 const preloadedState = {
-  treeEntries: {
+  treeEntries: [
-    byId: {
+    // 's1','m1'
-      // "s1": obj,
+  ]
-      // "s1": obj2,
+  ,
-    },
-    allIds: [
-      // 's1','m1'
-    ]
-  },
 }
 
 

src/sketcher/Sketcher.js

@@ -7,6 +7,7 @@ import { onHover, onDrag, onPick, onRelease } from '../utils/mouseEvents'
 import { addDimension, setCoincident } from './constraintEvents'
 import { get3PtArc } from './sketchArc'
 import { _vec2, _vec3, raycaster } from '../utils/static'
+import { replacer, reviver } from '../utils/mapJSONReplacer'
 
 
 
@@ -14,9 +15,9 @@ import { _vec2, _vec3, raycaster } from '../utils/static'
 class Sketcher extends THREE.Group {
 
 
-  constructor(camera, canvas, store) {
+  constructor(camera, canvas, store, nid) {
     super()
-    this.name = "Sketch"
+    this.name = "s" + nid
     this.matrixAutoUpdate = false;
     this.camera = camera;
     this.canvas = canvas;
@@ -27,7 +28,7 @@ class Sketcher extends THREE.Group {
     const axesHelper = new THREE.AxesHelper(2);
     this.sub.add(axesHelper);
 
-    
+
 
     this.plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
 
@@ -239,7 +240,7 @@ class Sketcher extends THREE.Group {
   updatePointsBuffer(startingIdx = 0) {
     for (let i = startingIdx; i < this.children.length; i++) {
       const obj = this.children[i]
-      this.objIdx.set(obj.id, i)
+      this.objIdx.set(obj.name, i)
       if (obj.type == "Points") {
         this.ptsBuf.set(obj.geometry.attributes.position.array, 3 * i)
       }
@@ -327,6 +328,15 @@ class Sketcher extends THREE.Group {
     this.dispatchEvent({ type: 'change' })
   }
 
+  toJSON() {
+    this.userData = {
+      constraints: JSON.stringify(this.constraints, replacer),
+      linkedObjs: JSON.stringify(this.linkedObjs, replacer),
+      objIdx: JSON.stringify(this.objIdx, replacer)
+    }
+    return super.toJSON()
+  }
+
 }
 
 const _m1 = new THREE.Matrix4()

src/sketcher/constraintEvents.js

@@ -32,7 +32,7 @@ export function setCoincident() {
     this.constraints.set(++this.c_id,
       [
         'coincident', -1,
-        [toComb[i - 1].id, toComb[i].id, -1, -1]  ///////
+        [toComb[i - 1].name, toComb[i].name, -1, -1]  ///////
       ]
     )
     toComb[i].userData.constraints.push(this.c_id)

src/sketcher/drawEvents.js

@@ -16,7 +16,7 @@ export function drawOnClick1(e) {
   this.updatePoint = this.children.length
   this.add(...this.toPush)
 
-  this.linkedObjs.set(this.l_id, [this.mode, this.toPush.map(e=>e.id)])
+  this.linkedObjs.set(this.l_id, [this.mode, this.toPush.map(e=>e.name)])
   for (let obj of this.toPush) {
     obj.userData.l_id = this.l_id
   }

src/sketcher/sketchLine.js

@@ -26,12 +26,11 @@ export function sketchLine(mouseLoc) {
     this.constraints.set(++this.c_id,
       [
         'coincident', -1,
-        [this.children[this.children.length - 2].id, p1.id, -1, -1]
+        [this.children[this.children.length - 2].name, p1.name, -1, -1]
       ]
     )
 
     p1.userData.constraints.push(this.c_id)
-    console.log(this.children[this.children.length - 2].userData.constraints,'here')
     this.children[this.children.length - 2].userData.constraints.push(this.c_id)
 
   }

src/utils/mapJSONReplacer.js

@@ -0,0 +1,23 @@
+// https://stackoverflow.com/a/56150320
+
+function replacer(key, value) {
+  if (value instanceof Map) {
+    return {
+      dataType: 'Map',
+      value: Array.from(value.entries()), // or with spread: value: [...value]
+    };
+  } else {
+    return value;
+  }
+}
+
+function reviver(key, value) {
+  if (typeof value === 'object' && value !== null) {
+    if (value.dataType === 'Map') {
+      return new Map(value.value);
+    }
+  }
+  return value;
+}
+
+export {replacer, reviver}

src/utils/mouseEvents.js

@@ -13,10 +13,10 @@ export function onHover(e) {
   );
 
   let hoverPts;
-  if (this.name == 'Scene') {
+  if (this.name[0]=='s') {
-    hoverPts = raycaster.intersectObjects(this.children, true)
-  } else {
     hoverPts = raycaster.intersectObjects(this.children)
+  } else {
+    hoverPts = raycaster.intersectObjects(this.children, true)
   }
 
   let idx = []
@@ -40,7 +40,7 @@ export function onHover(e) {
       const obj = this.hovered[this.hovered.length - 1]
       if (obj && !this.selected.includes(obj)) {
         // obj.material.color.set(0x555555)
-        obj.material.color.set(color[obj.name])
+        obj.material.color.set(color[obj.name[0]])
       }
       this.hovered = []
 
@@ -58,7 +58,7 @@ export function onHover(e) {
 
       const obj = this.hovered[this.hovered.length - 1]
       if (obj && !this.selected.includes(obj)) {
-        obj.material.color.set(color[obj.name])
+        obj.material.color.set(color[obj.name[0]])
       }
       this.hovered = []
 
@@ -83,7 +83,7 @@ export function onPick(e) {
   } else {
     for (let obj of this.selected) {
       // obj.material.color.set(0x555555)
-      obj.material.color.set(color[obj.name])
+      obj.material.color.set(color[obj.name[0]])
     }
     this.dispatchEvent({ type: 'change' })
     this.selected = []
@@ -97,7 +97,7 @@ export function onDrag(e) {
     const obj = this.hovered[x]
     this.ptsBuf.set(
       mouseLoc,
-      this.objIdx.get(obj.id) * 3
+      this.objIdx.get(obj.name) * 3
     )
   }
 

src/utils/static.js

@@ -15,20 +15,20 @@ const color = {
   hover: 0x00ff00,
   lighting: 0xFFFFFF,
   emissive: 0x072534,
-  Plane: 0xf5bc42,
+  d: 0xf5bc42, //datums: planes
-  Line: 0x555555,
+  p: 0x555555, //points
-  Points: 0x555555,
+  l: 0x555555, //lines
-  Extrude: 0x156289,
+  m: 0x156289, //mesh: extrude
 }
 
 const lineMaterial = new THREE.LineBasicMaterial({
   linewidth: 2,
-  color: color.Line,
+  color: color.l,
 })
 
 
 const pointMaterial = new THREE.PointsMaterial({
-  color: color.Points,
+  color: color.p,
   size: 4,
 })
 
@@ -40,7 +40,7 @@ const ptObj = (n) => {
     ),
     pointMaterial.clone()
   );
-  ret.name = 'Points'
+  ret.name = 'p' + nid++
   return ret
 }
 
@@ -51,7 +51,7 @@ const lineObj = (n = 1) => {
     ),
     lineMaterial.clone()
   );
-  ret.name = 'Line'
+  ret.name = 'l' + nid++
   return ret
 }