clean up

src/Scene.js

@@ -194,8 +194,10 @@ export class Scene {
   }
 
   clearSelection() {
-    for (let x = 0; x < this.selected.length; x++) {
+    for (let x = 0, obj; x < this.selected.length; x++) {
-      const obj = this.selected[x]
+      obj = this.selected[x]
+      if (obj.userData.type == 'sketch') continue
+
       if (obj.userData.type == 'plane') {
         obj.material.opacity = 0.05
         obj.children[0].material.color.set(color['planeBorder'])
@@ -217,81 +219,9 @@ export class Scene {
       }
     }
 
-    this.obj3d.dispatchEvent({ type: 'change' })
   }
 
 
-  hover(obj) {
-
-    if (typeof obj == 'object' && !this.selected.includes(obj)) {
-
-      if (obj.userData.type == 'plane') {
-        obj.material.opacity = 0.02
-        obj.children[0].material.color.set(color['planeBorder'])
-      } else {
-        if (obj.userData.type == 'mesh') {
-          obj.material.emissive.set(color.emissive)
-        }
-        obj.material.color.set(color[obj.userData.type])
-      }
-
-    }
-
-
-    if (typeof obj == 'object' && !this.selected.includes(obj)) {
-
-      if (obj.userData.type == 'plane') {
-        obj.material.opacity = 0.02
-        obj.children[0].material.color.set(color['planeBorder'])
-      } else {
-        if (obj.userData.type == 'mesh') {
-          obj.material.emissive.set(color.emissive)
-        }
-        obj.material.color.set(color[obj.userData.type])
-      }
-
-    }
-
-
-    obj.material.color.set(color[obj.userData.type])
-
-    if (obj.userData.type == 'mesh') {
-      obj.material.emissive.set(color.emissive)
-    } else if (obj.userData.type == 'plane') {
-      obj.material.opacity = 0.02
-      obj.children[0].material.color.set(color['planeBorder'])
-    }
-
-    if (obj.userData.type == 'selpoint') {
-      obj.visible = false
-    }
-
-
-
-
-
-    if (typeof obj == 'object') {
-
-      if (obj.userData.type == 'plane') {
-        obj.material.opacity = 0.06
-        obj.children[0].material.color.set(hoverColor['planeBorder'])
-      } else {
-        if (obj.userData.type == 'mesh') {
-          obj.material.emissive.set(hoverColor.emissive)
-        }
-        obj.material.color.set(hoverColor[obj.userData.type])
-      }
-
-    }
-
-
-
-
-
-
-
-  }
-
   subtract(m1, m2, op) {
     let bspA = CSG.fromMesh(m1)
     let bspB = CSG.fromMesh(m2)
@@ -432,7 +362,6 @@ async function addSketch() {
 
 
   sketch.obj3d.addEventListener('change', this.render);
-  console.log('render')
   this.store.dispatch({ type: 'rx-sketch', obj: sketch })
 
   sketch.activate()

src/Sketch.js

@@ -151,7 +151,7 @@ class Sketch {
     window.addEventListener('keydown', this.onKeyPress)
     this.canvas.addEventListener('pointerdown', this.onPick)
     this.canvas.addEventListener('pointermove', this.onHover)
-    this.store.dispatch({ type: 'set-active-sketch', sketch: this.obj3d.name })
+    this.store.dispatch({ type: 'set-active-sketch', activeSketchId: this.obj3d.name })
 
     this.setDimLines()
 
@@ -203,10 +203,14 @@ class Sketch {
 
 
   onKeyPress(e) {
-    switch (e.key) {
+    this.command(e.key)
+  }
+
+  command(key) {
+
+    switch (key) {
       case 'Escape':
         drawClear.call(this)
-        this.mode = ""
         document.activeElement.blur()
         break;
       case 'l':
@@ -214,22 +218,35 @@ class Sketch {
           drawClear.call(this)
         }
         this.mode = "line"
-        this.canvas.addEventListener('pointerdown', this.drawOnClick1, {once:true})
+        this.canvas.addEventListener('pointerdown', this.drawOnClick1, { once: true })
         break;
       case 'a':
         this.mode = "arc"
-        this.canvas.addEventListener('pointerdown', this.drawOnClick1, {once:true})
+        this.canvas.addEventListener('pointerdown', this.drawOnClick1, { once: true })
-        break;
-      case 'd':
-        if (this.mode != '') {
-          drawClear.call(this)
-        }
-        this.mode = ""
-        this.drawDimension()
         break;
       case 'p':
         this.mode = "point"
-        this.canvas.addEventListener('pointerdown', this.drawOnClick1, {once:true})
+        this.canvas.addEventListener('pointerdown', this.drawOnClick1, { once: true })
+        break;
+      case 'd':
+        drawClear.call(this)
+        this.drawDimension()
+        break;
+      case 'c':
+        drawClear.call(this)
+        setCoincident.call(this)
+        break;
+      case 'v':
+        drawClear.call(this)
+        setOrdinate.call(this, 0)
+        break;
+      case 'h':
+        drawClear.call(this)
+        setOrdinate.call(this, 1)
+        break;
+      case 't':
+        drawClear.call(this)
+        setTangent.call(this)
         break;
       case 'Delete':
         this.deleteSelected()
@@ -237,34 +254,6 @@ class Sketch {
       case 'Backspace':
         this.deleteSelected()
         break;
-      case 'c':
-        if (this.mode != '') {
-          drawClear.call(this)
-        }
-        setCoincident.call(this)
-        this.mode = ""
-        break;
-      case 'v':
-        if (this.mode != '') {
-          drawClear.call(this)
-        }
-        setOrdinate.call(this, 0)
-        this.mode = ""
-        break;
-      case 'h':
-        if (this.mode != '') {
-          drawClear.call(this)
-        }
-        setOrdinate.call(this, 1)
-        this.mode = ""
-        break;
-      case 't':
-        if (this.mode != '') {
-          drawClear.call(this)
-        }
-        setTangent.call(this)
-        this.mode = ""
-        break;
       case 'z':
         var string = JSON.stringify(this.toJSON());
         window.string = string;
@@ -298,7 +287,7 @@ class Sketch {
     this.updateOtherBuffers()
 
     this.selected = []
-    this.obj3d.dispatchEvent({ type: 'change' })
+    this.scene.render()
   }
 
   delete(obj) {

src/constraintEvents.js

@@ -36,7 +36,7 @@ export async function setCoincident() {
   }
 
   this.selected = []
-  this.obj3d.dispatchEvent({ type: 'change' })
+  this.scene.render()
 }
 
 
@@ -67,7 +67,7 @@ export async function setOrdinate(dir = 0) {
   this.updateBoundingSpheres()
 
   this.selected = []
-  this.obj3d.dispatchEvent({ type: 'change' })
+  this.scene.render()
 }
 
 export async function setTangent() {
@@ -104,7 +104,7 @@ export async function setTangent() {
   this.updateBoundingSpheres()
 
   this.selected = []
-  this.obj3d.dispatchEvent({ type: 'change' })
+  this.scene.render()
 }
 
 

src/drawEvents.js

@@ -127,19 +127,20 @@ export function drawClear() {
   if (this.mode == "") return
 
   if (['line', 'arc'].includes(this.mode)) {
-    this.canvas.removeEventListener('pointerdown', this.drawOnClick1)
-    this.canvas.removeEventListener('pointermove', this.drawPreClick2);
-    this.canvas.removeEventListener('pointerdown', this.drawOnClick2);
-    this.canvas.removeEventListener('pointermove', this.drawPreClick3);
-    this.canvas.removeEventListener('pointerdown', this.drawOnClick3);
-
     this.delete(this.obj3d.children[this.updatePoint])
-
-    this.obj3d.dispatchEvent({ type: 'change' })
-    this.subsequent = false
-    this.toPush = []
   }
 
+  this.canvas.removeEventListener('pointerdown', this.drawOnClick1)
+  this.canvas.removeEventListener('pointermove', this.drawPreClick2);
+  this.canvas.removeEventListener('pointerdown', this.drawOnClick2);
+  this.canvas.removeEventListener('pointermove', this.drawPreClick3);
+  this.canvas.removeEventListener('pointerdown', this.drawOnClick3);
+
+  this.scene.render()
+  this.subsequent = false
+  this.toPush = []
+
+  this.mode = ""
 }
 
 

src/react/navBar.jsx

@@ -8,12 +8,11 @@ import { FaCube, FaEdit } from 'react-icons/fa'
 import { BsBoxArrowUp } from 'react-icons/bs'
 import { MdDone, MdSave, MdFolder } from 'react-icons/md'
 import * as Icon from "./icons";
-import { setCoincident, setOrdinate, setTangent } from '../constraintEvents'
 
 
 export const NavBar = () => {
   const dispatch = useDispatch()
-  const treeEntries = useSelector(state => state.treeEntries)
+  const treeEntriesById = useSelector(state => state.treeEntries.byId)
   const activeSketchId = useSelector(state => state.treeEntries.activeSketchId)
 
 
@@ -26,8 +25,14 @@ export const NavBar = () => {
     forceUpdate()
   }
   const extrude = () => {
-    console.log(treeEntries.tree[activeSketchId])
+    // sc.extrude(treeEntriesById[activeSketchId])
-    sc.extrude(treeEntries.byId[activeSketchId])
+    sc.extrude(sc.activeSketch)
+  }
+
+  const addSketch = () => {
+    sc.addSketch()
+    console.log(!!sc.activeSketch,'state')
+    forceUpdate()
   }
 
   useEffect(() => {
@@ -41,29 +46,33 @@ export const NavBar = () => {
     }
   }, [activeSketchId])
 
+  useEffect(() => {
+    console.log(treeEntriesById)
+  }, [treeEntriesById])
+
 
   const btnz = [
     [MdDone, () => {
-      treeEntries.byId[activeSketchId].deactivate()
+      // treeEntriesById[activeSketchId].deactivate()
       // dispatch({ type: 'update-descendents', sketch})
-      sc.activeSketch = null
+      sc.activeSketch.deactivate()
       sc.render()
       forceUpdate()
       // sc.activeDim = this.activeSketch.obj3d.children[1].children
     }, 'Finish'],
     [Icon.Extrude, extrude, 'Extrude [e]'],
-    [Icon.Dimension, () => sc.activeSketch.drawDimension(), 'Dimension [d]'],
+    [Icon.Dimension, () => sc.activeSketch.command('d'), 'Dimension [d]'],
-    [Icon.Line, () => sc.extrude(treeEntries.byId[activeSketchId]), 'Line [l]'],
+    [Icon.Line, () => sc.activeSketch.command('l'), 'Line [l]'],
-    [Icon.Arc, () => sc.extrude(treeEntries.byId[activeSketchId]), 'Arc [a]'],
+    [Icon.Arc, () => sc.activeSketch.command('a'), 'Arc [a]'],
-    [Icon.Coincident, () => setCoincident.call(sc.activeSketch), 'Coincident [c]'],
+    [Icon.Coincident, () => sc.activeSketch.command('c'), 'Coincident [c]'],
-    [Icon.Vertical, () => setOrdinate.call(sc.activeSketch, 0), 'Vertical [v]'],
+    [Icon.Vertical, () => sc.activeSketch.command('v'), 'Vertical [v]'],
-    [Icon.Horizontal, () => setOrdinate.call(sc.activeSketch, 1), 'Horizontal [h]'],
+    [Icon.Horizontal, () => sc.activeSketch.command('h'), 'Horizontal [h]'],
-    [Icon.Tangent, () => setTangent.call(sc.activeSketch), 'Tangent [t]'],
+    [Icon.Tangent, () => sc.activeSketch.command('t'), 'Tangent [t]'],
   ]
 
 
   const btnz2 = [
-    [FaEdit, sc.addSketch, 'Sketch [s]']
+    [FaEdit, addSketch, 'Sketch [s]']
     ,
     [Icon.Extrude, extrude, 'Extrude [e]'],
     [Icon.Union, () => boolOp('u'), 'Union'],
@@ -78,7 +87,7 @@ export const NavBar = () => {
 
   return <div className='topNav flex justify-center items-center bg-gray-700'>
     {
-      activeSketchId ?
+      activeSketchId?
         btnz.map(([Icon, fcn, txt, shortcut], idx) => (
           <Icon className="btn w-auto h-full p-3.5" tooltip={txt}
             onClick={fcn} key={idx}

src/react/reducer.js

@@ -39,8 +39,8 @@ export function reducer(state = {}, action) {
     case 'set-active-sketch':
       return update(state, {
         treeEntries: {
-          visible: { [action.sketch]: { $set: true } },
+          visible: { [action.activeSketchId]: { $set: true } },
-          activeSketchId: { $set: action.sketch },
+          activeSketchId: { $set: action.activeSketchId },
         },
       })
     case 'exit-sketch':

src/react/tree.jsx

@@ -29,8 +29,6 @@ const TreeEntry = ({ entId }) => {
   const treeEntries = useSelector(state => state.treeEntries.byId)
   const dispatch = useDispatch()
 
-  const activeSketchId = useSelector(state => state.treeEntries.activeSketchId)
-  // const activeSketchId = treeEntries.activeSketchId
 
   const visible = useSelector(state => state.treeEntries.visible[entId])
 
@@ -52,7 +50,7 @@ const TreeEntry = ({ entId }) => {
 
     onDoubleClick={() => {
       if (obj3d.userData.type == 'sketch') {
-        activeSketchId && treeEntries[activeSketchId].deactivate()
+        sc.activeSketch && sc.activeSketch.deactivate()
         sketch.activate()
         sc.clearSelection()
         sc.activeSketch = sketch;
@@ -66,17 +64,17 @@ const TreeEntry = ({ entId }) => {
     }}
     onPointerLeave={() => {
       if (visible & obj3d.userData.type == 'sketch') return
-      if (sc.selected.includes(obj3d) || activeSketchId == obj3d.name) return
+      if (sc.selected.includes(obj3d) || sc.activeSketch && sc.activeSketch.name == obj3d.name) return
       sc.setHover(obj3d, 0)
       sc.render()
     }}
     onClick={() => {
-      if (obj3d.userData.type == 'mesh') {
+      // if (obj3d.userData.type == 'mesh') {
         sc.selected.push(
           obj3d
         )
         sc.render()
-      }
+      // }
     }}
   >
     <Icon className='h-full w-auto p-1.5' />