rename nid to id

src/Scene.js

@@ -27,7 +27,7 @@ const eq = (a1, a2) => {
 }
 
 window.loader = new THREE.ObjectLoader();
-window.nid = 0
+window.id = 0
 
 export class Scene {
   constructor(store) {
@@ -158,31 +158,34 @@ export class Scene {
   saveState() {
 
     localStorage.setItem(
-      'sv', JSON.stringify([nid, this.store.getState()])
+      'sv', JSON.stringify([id, this.store.getState()])
     )
 
   }
 
   loadState() {  //uglyyy
-    const [curNid, state] = JSON.parse(
+    const [curid, state] = JSON.parse(
       localStorage.getItem('sv')
     )
 
-    window.nid = curNid
+    window.id = curid
 
-    const entries = state.treeEntries.byNid
+    const entries = state.treeEntries.byId
+    console.log(entries)
     for (let k in entries) {
 
+      console.log(k)
       if (k[0] == 's') {
 
         entries[k].obj3d = loader.parse(entries[k].obj3d)
         this.obj3d.add(entries[k].obj3d)
-        entries[k] = new Sketch(this.camera, this.canvas, this.store, state.treeEntries.byNid[k])
+        entries[k] = new Sketch(this.camera, this.canvas, this.store, state.treeEntries.byId[k])
         entries[k].obj3d.addEventListener('change', this.render) // !! took 3 hours to realize
 
       } else if (k[0] == 'm') {
 
-        entries[k] = loader.parse(state.treeEntries.byNid[k])
+        entries[k] = loader.parse(state.treeEntries.byId[k])
+        console.log(entries[k])
         this.obj3d.add(entries[k])
 
       }
@@ -294,7 +297,7 @@ async function addSketch() {
 }
 
 window.sc = new Scene(store)
-// sc.loadState()
+sc.loadState()
 
 
 

src/Sketch.js

@@ -7,7 +7,7 @@ import { onHover, onDrag, onDragDim, onPick, onRelease } from './mouseEvents'
 import { addDimension, setCoincident } from './constraintEvents'
 import { get3PtArc } from './drawArc'
 import { _vec2, _vec3, raycaster, awaitPts } from './shared'
-import { replacer, reviver } from './mapJSONReplacer'
+import { replacer, reviver } from './utils'
 import { AxesHelper } from './sketchAxes'
 import { drawDimension, _onMoveDimension, setDimLines, updateDim } from './drawDimension';
 
@@ -36,7 +36,7 @@ class Sketch {
     if (preload === undefined) {
 
       this.obj3d = new THREE.Group()
-      this.obj3d.name = "s" + nid++
+      this.obj3d.name = "s" + id++
       this.obj3d.userData.type = "sketch"
       this.obj3d.matrixAutoUpdate = false;
 

src/drawDimension.js

@@ -32,7 +32,7 @@ export async function drawDimension() {
     pointMaterial.clone()
   )
 
-  line.userData.nids = pts.map(e => e.name)
+  line.userData.ids = pts.map(e => e.name)
 
 
 
@@ -111,7 +111,7 @@ export async function drawDimension() {
 const p1 = new THREE.Vector2()
 const p2 = new THREE.Vector2()
 const p3 = new THREE.Vector2()
-let dir, hyp, proj, perp, p1e, p2e, nids, _p1, _p2;
+let dir, hyp, proj, perp, p1e, p2e, ids, _p1, _p2;
 
 
 
@@ -142,10 +142,10 @@ export function updateDim(c_id) {
 
 export function _onMoveDimension(point, line) {
 
-  nids = line.userData.nids
+  ids = line.userData.ids
 
-  _p1 = this.obj3d.children[this.objIdx.get(nids[0])].geometry.attributes.position.array
-  _p2 = this.obj3d.children[this.objIdx.get(nids[1])].geometry.attributes.position.array
+  _p1 = this.obj3d.children[this.objIdx.get(ids[0])].geometry.attributes.position.array
+  _p2 = this.obj3d.children[this.objIdx.get(ids[1])].geometry.attributes.position.array
 
   p1.set(_p1[0], _p1[1])
   p2.set(_p2[0], _p2[1])
@@ -191,10 +191,10 @@ export function setDimLines() {
     }
 
 
-    nids = dims[i].userData.nids
+    ids = dims[i].userData.ids
 
-    _p1 = this.obj3d.children[this.objIdx.get(nids[0])].geometry.attributes.position.array
-    _p2 = this.obj3d.children[this.objIdx.get(nids[1])].geometry.attributes.position.array
+    _p1 = this.obj3d.children[this.objIdx.get(ids[0])].geometry.attributes.position.array
+    _p2 = this.obj3d.children[this.objIdx.get(ids[1])].geometry.attributes.position.array
 
     const offset = dims[i + 1].userData.offset
 

src/extrude.js

@@ -68,15 +68,21 @@ export function extrude(sketch) {
 
   const shape = new THREE.Shape(v2s);
   const extrudeSettings = { depth: 8, bevelEnabled: false };
+
+
+
+
+
+
+
+
   const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
-  const phong = new THREE.MeshPhongMaterial({
+  const material = new THREE.MeshPhongMaterial({
     color: color.mesh,
     emissive: color.emissive,
-    flatShading: true
   });
-  const mesh = new THREE.Mesh(geometry, phong)
-  // mesh.name = "Extrude"
-  mesh.name = 'm' + nid++
+  const mesh = new THREE.Mesh(geometry, material)
+  mesh.name = 'm' + id++
   mesh.userData.type = 'mesh'
 
   for (let i = 0; i < offSetPts.length; i += 2) {
@@ -95,6 +101,9 @@ export function extrude(sketch) {
   this.obj3d.add(mesh)
 
 
+
+
+
   this.render()
 
   // sketch.visible = false

src/index.jsx

@@ -95,16 +95,10 @@ const preloadedState = {
 
 
 
-
-
 window.store = createStore(reducer, preloadedState, applyMiddleware(logger))
 
 
-
-
 document.addEventListener('DOMContentLoaded', () => {
-  ReactDOM.render(
-    React.createElement(Root, { store: store }, null)
-    , document.getElementById('react')
-  );
+  ReactDOM.render(<Root store={store} />, document.getElementById('react'));
 });
+

src/mouseEvents.js

@@ -19,6 +19,7 @@ export function onHover(e) {
     hoverPts = raycaster.intersectObjects([...this.obj3d.children[1].children, ...this.obj3d.children])
 
     if (hoverPts.length) {
+
       let minDist = Infinity;
       for (let i = 0; i < hoverPts.length; i++) {
         if (!hoverPts[i].distanceToRay) continue;
@@ -29,6 +30,8 @@ export function onHover(e) {
           idx.push(i)
         }
       }
+
+
       // console.log(hoverPts, idx)
       if (!idx.length) idx.push(0)
     }
@@ -39,19 +42,37 @@ export function onHover(e) {
     hoverPts = raycaster.intersectObjects(this.obj3d.children, true)
 
     if (hoverPts.length) {
+
+      // for (let i = 0; i < hoverPts.length; i++) {
+      //   const obj = hoverPts[i].object
+      //   if (['point', 'plane'].includes(obj.userData.type)) {
+      //     idx.push(i)
+      //     break;
+      //   }
+      // }
+      // console.log(hoverPts)
+
+
+      let minDist = Infinity;
       for (let i = 0; i < hoverPts.length; i++) {
-        const obj = hoverPts[i].object
-        if (['point', 'plane'].includes(obj.userData.type)) {
+        if (!hoverPts[i].distanceToRay) continue;
+
+        if (hoverPts[i].distanceToRay < minDist - 0.0001) {
+          minDist = hoverPts[i].distanceToRay
+          idx = [i]
+        } else if (Math.abs(hoverPts[i].distanceToRay - minDist) < 0.0001) {
           idx.push(i)
-          break;
         }
       }
 
+
+
+
       if (!idx.length) {
         const obj = hoverPts[0].object
         if (obj.userData.type == "mesh" && obj.visible) {
           idx.push(0)
-        } else {
+        } else if (['point', 'plane'].includes(obj.userData.type)) {
           idx.push(0)
         }
       }

src/shared.js

@@ -55,7 +55,7 @@ const ptObj = (n) => {
     ),
     pointMaterial.clone()
   );
-  ret.name = "p" + nid++
+  ret.name = "p" + id++
   ret.userData.type = 'point'
   return ret
 }
@@ -67,7 +67,7 @@ const lineObj = (n = 1) => {
     ),
     lineMaterial.clone()
   );
-  ret.name = 'l' + nid++
+  ret.name = 'l' + id++
   ret.userData.type = 'line'
   return ret
 }

webpack.common.js

@@ -4,7 +4,7 @@ const tailwindcss = require('tailwindcss')
 
 module.exports = {
   entry: {
-    index: './src/index.js',
+    index: './src/index.jsx',
     scene: './src/Scene.js',
   },
   output: {