clean up hovering

src/Scene.js

@@ -7,8 +7,8 @@ import { Sketch } from './Sketch'
 import Stats from '../lib/stats.module.js';
 
 import { extrude } from './extrude'
-import { onHover, onPick, setHover } from './mouseEvents';
+import { onHover, onPick } from './mouseEvents';
-import { _vec2, _vec3, color, awaitSelection, ptObj } from './shared'
+import { _vec2, _vec3, color, awaitSelection, ptObj, setHover } from './shared'
 
 import { AxesHelper } from './axes'
 
@@ -70,9 +70,9 @@ export class Scene {
       freePt.visible = false
       freePt.depthTest = false
       freePt.userData.type = 'selpoint'
-
       helpersGroup.add(freePt);
     }
+    this.selpoints = this.obj3d.children[0].children
     this.fptIdx = 0;
     this.fptObj = {}
 
@@ -196,27 +196,20 @@ export class Scene {
   clearSelection() {
     for (let x = 0, obj; x < this.selected.length; x++) {
       obj = this.selected[x]
-      if (obj.userData.type == 'sketch') continue
+      if (obj.userData.type == 'selpoint') {
-
+        obj.visible = false
-      if (obj.userData.type == 'plane') {
-        obj.material.opacity = 0.05
-        obj.children[0].material.color.set(color['planeBorder'])
       } else {
-        obj.material.color.set(color[obj.userData.type])
+        setHover(obj, 0)
       }
-      if (obj.userData.type == 'selpoint') obj.visible = false
     }
     this.selected = []
 
     for (let x = 0; x < this.hovered.length; x++) {
+
       const obj = this.hovered[x]
-      obj.material.color.set(color[obj.userData.type])
+      setHover(obj, 0)
-      if (obj.userData.type == 'plane') {
+
-        obj.material.opacity = 0.05
+
-        obj.children[0].material.color.set(color['planeBorder'])
-      } else {
-        obj.material.color.set(color[obj.userData.type])
-      }
     }
 
   }
@@ -370,7 +363,7 @@ async function addSketch() {
 }
 
 window.sc = new Scene(store)
-// sc.loadState()
+sc.loadState()
 
 // sc.camera.layers.enable(1)
 // rc.layers.set(1)

src/Sketch.js

@@ -2,10 +2,10 @@
 
 import * as THREE from '../node_modules/three/src/Three';
 
-import { _vec2, _vec3, raycaster, awaitSelection, ptObj } from './shared'
+import { _vec2, _vec3, raycaster, awaitSelection, ptObj, setHover } from './shared'
 
 import { drawOnClick1, drawOnClick2, drawPreClick2, drawOnClick3, drawPreClick3, drawClear, drawPoint } from './drawEvents'
-import { onHover, onDrag, onPick, onRelease } from './mouseEvents'
+import { onHover, onDrag, onPick, onRelease} from './mouseEvents'
 import { setCoincident, setOrdinate, setTangent } from './constraintEvents'
 import { get3PtArc } from './drawArc'
 import { replacer, reviver } from './utils'
@@ -143,6 +143,7 @@ class Sketch {
     this.onRelease = onRelease.bind(this);
     this.onKeyPress = this.onKeyPress.bind(this);
 
+    this.setHover = setHover.bind(this);
 
   }
 

src/mouseEvents.js

@@ -1,5 +1,5 @@
 import * as THREE from '../node_modules/three/src/Three';
-import { raycaster, color, hoverColor } from './shared';
+import { raycaster, setHover } from './shared';
 import { onDimMoveEnd } from './drawDimension'
 
 let ptLoc
@@ -18,7 +18,7 @@ export function onHover(e) {
   let hoverPts;
 
   if (this.obj3d.userData.type != 'sketch') {
-    this.obj3d.children[0].children[0].visible = false // hide selpoint[0] before each redraw
+    this.selpoints[0].visible = false // hide selpoint[0] before each redraw
     raycaster.layers.set(1)
     hoverPts = raycaster.intersectObjects(this.obj3d.children, true)
   } else {
@@ -75,12 +75,10 @@ export function onHover(e) {
               3 * hoverPts[idx[x]].index,
               3 * hoverPts[idx[x]].index + 3
             )
-          // const pp = this.obj3d.children[0].children[this.fptIdx % 3]
+          this.selpoints[0].geometry.attributes.position.array.set(ptLoc)
-          const pp = this.obj3d.children[0].children[0]
+          this.selpoints[0].matrix = obj.parent.matrix
-          pp.geometry.attributes.position.array.set(ptLoc)
+          this.selpoints[0].geometry.attributes.position.needsUpdate = true
-          pp.matrix = obj.parent.matrix
+          this.selpoints[0].visible = true
-          pp.geometry.attributes.position.needsUpdate = true
-          pp.visible = true
 
           obj = hoverPts[idx[x]].index
         }
@@ -120,30 +118,49 @@ export function onPick(e) {
 
   if (this.hovered.length) {
     let obj = this.hovered[this.hovered.length - 1]
+    // if (sc.selected.includes(obj3d)) continue
+
+    if (typeof obj != 'object') {
+
+      const pp = this.selpoints[this.fptIdx % 3 + 1]
+      const p0 = this.selpoints[0]
+
+      pp.geometry.attributes.position.array.set(p0.geometry.attributes.position.array)
+      pp.matrix = p0.matrix
+      pp.geometry.attributes.position.needsUpdate = true
+      pp.visible = true
+
+      obj = pp
+      this.fptIdx++
 
 
-    if (this.obj3d.userData.type == 'sketch') {
+      const idx = this.selected.indexOf(obj)
-      this.selected.push(obj)
+      if (idx == -1) {
-    } else {
+        this.selected.push(
-      if (typeof obj == 'object') {
+          obj
-
+        )
-        setHover(obj, 1)
-
       } else {
-        const pp = this.obj3d.children[0].children[this.fptIdx % 3 + 1]
+        this.selected.splice(idx, 1, obj)
-        const p0 = this.obj3d.children[0].children[0]
-
-        pp.geometry.attributes.position.array.set(p0.geometry.attributes.position.array)
-        pp.matrix = p0.matrix
-        pp.geometry.attributes.position.needsUpdate = true
-        pp.visible = true
-
-        obj = pp
-        this.fptObj[obj] = this.fptIdx
-        this.fptIdx++
       }
-      this.obj3d.dispatchEvent({ type: 'change' })
+
-      this.selected.push(obj)
+    } else {
+
+      const idx = this.selected.indexOf(obj)
+      if (idx == -1) {
+        this.selected.push(
+          obj
+        )
+        this.setHover(obj, 1)
+      } else {
+        this.setHover(this.selected[idx], 0)
+        this.selected.splice(idx, 1)
+      }
+    }
+
+
+    this.obj3d.dispatchEvent({ type: 'change' })
+
+    if (this.obj3d.userData.type != 'sketch') {
       return;
     }
 
@@ -157,7 +174,6 @@ export function onPick(e) {
           )
           this.canvas.addEventListener('pointermove', this.onDragDim);
           this.canvas.addEventListener('pointerup', () => {
-            console.log('heree')
             onDimMoveEnd(this.obj3d.children[1].children[idx])
             this.onRelease()
           })
@@ -215,47 +231,7 @@ export function onDrag(e) {
 }
 
 
-export function setHover(obj, state, meshHover = true) {
-  let colObj, visible
-  if (state == 1) {
-    colObj = hoverColor
-    visible = true
-  } else {
-    colObj = color
-    visible = false
-  }
 
-  switch (obj.userData.type) {
-    case 'plane':
-      obj.material.opacity = colObj.opacity
-      obj.children[0].material.color.set(colObj['planeBorder'])
-      break;
-    case 'sketch':
-      obj.visible = visible
-      break;
-    case 'mesh':
-      if (meshHover) {
-        obj.material.emissive.set(colObj.emissive)
-      } else {
-        break
-      }
-    default:
-      obj.material.color.set(colObj[obj.userData.type])
-      break;
-  }
-
-
-  // if (obj.userData.type == 'plane') {
-  //   obj.material.opacity = colObj.opacity
-  //   obj.children[0].material.color.set(colObj['planeBorder'])
-  // } else if (obj.userData.type != 'mesh') {
-  //   obj.material.color.set(colObj[obj.userData.type])
-  // } else if (meshHover) {
-  //   obj.material.emissive.set(colObj.emissive)
-  //   obj.material.color.set(colObj[obj.userData.type])
-  // }
-
-}
 
 export function onRelease() {
   this.canvas.removeEventListener('pointermove', this.onDrag)

src/react/tree.jsx

@@ -54,6 +54,7 @@ const TreeEntry = ({ entId }) => {
         sketch.activate()
         sc.clearSelection()
         sc.activeSketch = sketch;
+        sc.render()
       }
 
     }}
@@ -63,18 +64,32 @@ const TreeEntry = ({ entId }) => {
       sc.render()
     }}
     onPointerLeave={() => {
-      if (visible & obj3d.userData.type == 'sketch') return
+      // if (visible & obj3d.userData.type == 'sketch') 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') {
+      // console.log(obj3d, sc.selected)
+      const idx = sc.selected.indexOf(obj3d)
+
+      if (idx == -1) {
         sc.selected.push(
           obj3d
         )
-        sc.render()
+        sc.setHover(obj3d, 1)
+      } else {
+        sc.setHover(sc.selected[idx], 0)
+        sc.selected.splice(idx, 1)
+      }
+
+      // sc.selected.push(
+      //   obj3d
+      // )
+
       // }
+      sc.render()
     }}
   >
     <Icon className='h-full w-auto p-1.5' />
@@ -97,7 +112,7 @@ const TreeEntry = ({ entId }) => {
             onClick={(e) => {
               e.stopPropagation()
               console.log('hide')
-              dispatch({ type: "set-entry-visibility", obj: {[entId]:false} })
+              dispatch({ type: "set-entry-visibility", obj: { [entId]: false } })
               obj3d.visible = false;
               if (obj3d.userData.type == 'mesh') {
                 obj3d.traverse((e) => e.layers.disable(1))
@@ -113,7 +128,7 @@ const TreeEntry = ({ entId }) => {
               e.stopPropagation()
               console.log('show')
               obj3d.visible = true;
-              dispatch({ type: "set-entry-visibility", obj: {[entId]:true} })
+              dispatch({ type: "set-entry-visibility", obj: { [entId]: true } })
               if (obj3d.userData.type == 'mesh') {
                 obj3d.traverse((e) => {
                   e.layers.enable(1)

src/shared.js

@@ -148,7 +148,38 @@ async function awaitSelection(...criteria) {
   return null
 }
 
+
+function setHover(obj, state, meshHover = true) {
+  let colObj = state == 1 ? hoverColor : color
+
+  switch (obj.userData.type) {
+    case 'plane':
+      obj.material.opacity = colObj.opacity
+      obj.children[0].material.color.set(colObj['planeBorder'])
+      break;
+    case 'sketch':
+      obj.traverse(ele => {
+        if (ele.userData.type == 'line') {
+          ele.material.color.set(colObj['line'])
+        }
+      })
+      break;
+    case 'mesh':
+      if (meshHover) {
+        obj.material.emissive.set(colObj.emissive)
+      } else {
+        break
+      }
+    default:
+      obj.material.color.set(colObj[obj.userData.type])
+      break;
+  }
+
+}
+
+
+
 window.rc = raycaster
 
 
-export { lineMaterial, pointMaterial, _vec2, _vec3, raycaster, color, hoverColor, ptObj, lineObj, awaitSelection }
+export { lineMaterial, pointMaterial, _vec2, _vec3, raycaster, color, hoverColor, ptObj, lineObj, awaitSelection, setHover }