non idea restore dim

src/Scene.js

@@ -194,6 +194,7 @@ function render() {
 
     for (idx = 1; idx < dims.length; idx += 2) {
       ele = dims[idx]
+      // if (!ele.label) continue;
 
       pos = _vec3.set(
         ...ele.geometry.attributes.position.array

src/app.jsx

@@ -60,10 +60,10 @@ const App = () => {
     [Icon.Arc, () => sc.extrude(treeEntries.byNid[activeSketchNid]), 'Arc'],
   ]
 
-  return <div className='absolute left-0 w-1/6 flex flex-col'>
+  return <div className='absolute left-0 w-40 flex flex-col'>
     {
       btnz.map(([Icon, fcn, txt], idx) => (
-        <div className="btn flex items-center justify-end p-1 text-lg w-36" key={idx}
+        <div className="btn flex items-center justify-end p-1 text-lg" key={idx}
           onClick={fcn}
         >
           <div>{txt}</div>
@@ -102,7 +102,7 @@ const TreeEntry = ({ entId }) => {
 
   const vis = obj3d.visible
 
-  return <div className='bg-gray-50 flex justify-between'>
+  return <div className='bg-gray-50 flex justify-between w-full'>
     <div className='btn'
       onClick={() => {
         activeSketchNid && treeEntries[activeSketchNid].deactivate()
@@ -146,7 +146,7 @@ const TreeEntry = ({ entId }) => {
       onPointerLeave={() => {
         const obj = entry
         if (entId[0] == 'm' && !sc.selected.includes(obj)) {
-          obj.material.color.set(color.m)
+          obj.material.color.set(color.mesh)
           sc.render()
         }
       }}

src/sketcher/Sketch.js

@@ -9,7 +9,7 @@ import { get3PtArc } from './drawArc'
 import { _vec2, _vec3, raycaster, awaitPts } from '../utils/shared'
 import { replacer, reviver } from '../utils/mapJSONReplacer'
 import { AxesHelper } from '../utils/axes'
-import { drawDimension, _onMoveDimension, updateDimLines } from './drawDimension';
+import { drawDimension, _onMoveDimension, setDimLines } from './drawDimension';
 
 
 
@@ -110,9 +110,10 @@ class Sketch {
     this.drawOnClick1 = drawOnClick1.bind(this);
     this.drawPreClick2 = drawPreClick2.bind(this);
     this.drawOnClick2 = drawOnClick2.bind(this);
+
     this.drawDimension = drawDimension.bind(this)
     this._onMoveDimension = _onMoveDimension.bind(this)
-    this.updateDimLines = updateDimLines.bind(this)
+    this.setDimLines = setDimLines.bind(this)
 
     this.awaitPts = awaitPts.bind(this);
 
@@ -132,6 +133,7 @@ class Sketch {
     this.canvas.addEventListener('pointermove', this.onHover)
     this.store.dispatch({ type: 'set-active-sketch', sketch: this.obj3d.name })
     
+    this.setDimLines()
 
     window.sketcher = this
   }
@@ -141,6 +143,7 @@ class Sketch {
     this.canvas.removeEventListener('pointerdown', this.onPick)
     this.canvas.removeEventListener('pointermove', this.onHover)
     this.store.dispatch({ type: 'exit-sketch' })
+    this.labelContainer.innerHTML = ""
   }
 
 
@@ -174,6 +177,7 @@ class Sketch {
       case 'Escape':
         drawClear.bind(this)()
         this.mode = ""
+        document.activeElement.blur()
         break;
       case 'l':
         if (this.mode == 'line') {
@@ -328,6 +332,18 @@ class Sketch {
     }
   }
 
+
+  updateBoundingSpheres() {
+    for (let x = 3; x < this.obj3d.children.length; x++) {
+      const obj = this.obj3d.children[x]
+      obj.geometry.computeBoundingSphere()
+    }
+  
+    for (let x = 0; x < this.obj3d.children[1].children.length; x++) {
+      const obj = this.obj3d.children[1].children[x]
+      obj.geometry.computeBoundingSphere()
+    }
+  }
   getLocation(e) {
     raycaster.setFromCamera(
       _vec2.set(
@@ -411,7 +427,7 @@ class Sketch {
     }
 
 
-    this.updateDimLines()
+    this.setDimLines()
 
     this.obj3d.dispatchEvent({ type: 'change' })
   }

src/sketcher/drawDimension.js

@@ -34,17 +34,23 @@ export async function drawDimension() {
 
   line.userData.nids = pts.map(e => e.name)
 
-  const groupLines = this.obj3d.children[1]
 
-  groupLines.add(line)
+
-  groupLines.add(point)
+  let dist = 0
+  for (let i = 0; i < 3; i++) {
+    dist += (pts[0].geometry.attributes.position.array[i] - pts[1].geometry.attributes.position.array[i]) ** 2
+  }
+  dist = Math.sqrt(dist)
+
+  this.obj3d.children[1].add(line).add(point)
 
   const onMove = this._onMoveDimension(point, line)
 
 
 
   point.label = document.createElement('div');
-  point.label.textContent = '10000';
+  point.label.textContent = dist.toFixed(3);
+  point.label.contentEditable = true;
   this.labelContainer.append(point.label)
 
 
@@ -67,7 +73,7 @@ export async function drawDimension() {
   if (add) {
     this.constraints.set(++this.c_id, //???
       [
-        'pt_pt_distance', 10,
+        'pt_pt_distance', dist,
         [pts[0].name, pts[1].name, -1, -1]
       ]
     )
@@ -81,16 +87,41 @@ export async function drawDimension() {
     point.name = this.c_id
     point.userData.type = 'dimension'
 
+    const updateDim = (c_id) => (ev_focus) => {
+      const value = ev_focus.target.textContent
+      console.log(value)
+      document.addEventListener('keydown', (e) => {
+        if (e.key == 'Enter') {
+          e.preventDefault()
+          const ent = this.constraints.get(c_id)
+          ent[1] = parseFloat(ev_focus.target.textContent)
+          this.constraints.set(c_id, ent)
+          this.updateOtherBuffers()
+          this.solve()
+          sc.render()
+          ev_focus.target.blur()
+          this.updateBoundingSpheres()
+        } else if (e.key == 'Escape') {
+          ev_focus.target.textContent = value
+          getSelection().empty()
+          ev_focus.target.blur()
+        }
+      })
+    }
+
+    point.label.addEventListener('focus', updateDim(this.c_id))
+
 
 
   } else {
 
-    groupLines.splice(groupLines.length - 2).forEach(
+    this.obj3d.children[1].children.splice(this.obj3d.children[1].length - 2, 2).forEach(
       e => {
         e.geometry.dispose()
         e.material.dispose()
       }
     )
+    this.labelContainer.removeChild(this.labelContainer.lastChild);
     sc.render()
   }
 
@@ -100,7 +131,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, _p3;
+let dir, hyp, proj, perp, p1e, p2e, nids, _p1, _p2;
 
 export function _onMoveDimension(point, line) {
 
@@ -131,19 +162,58 @@ export function _onMoveDimension(point, line) {
 }
 
 
-export function updateDimLines() {
+export function setDimLines() {
+  const updateDim = (c_id) => (ev_focus) => {
+    const value = ev_focus.target.textContent
+    console.log(value)
+    document.addEventListener('keydown', (e) => {
+      if (e.key == 'Enter') {
+        e.preventDefault()
+        const ent = this.constraints.get(c_id)
+        ent[1] = parseFloat(ev_focus.target.textContent)
+        this.constraints.set(c_id, ent)
+        this.updateOtherBuffers()
+        this.solve()
+        sc.render()
+        ev_focus.target.blur()
+        this.updateBoundingSpheres()
+      } else if (e.key == 'Escape') {
+        ev_focus.target.textContent = value
+        getSelection().empty()
+        ev_focus.target.blur()
+      }
+    })
+  }
+
+  const restoreLabels = this.labelContainer.childElementCount == 0;
+
+  const dims = this.obj3d.children[1].children
+
+  let point, dist;
+  for (let i = 0; i < dims.length; i += 2) {
 
 
-  const groupLines = this.obj3d.children[1].children
+    if (restoreLabels) {
+      point = dims[i + 1]  // point node is at i+1
+      dist = this.constraints.get(point.name)[1]
+      point.label = document.createElement('div');
+      point.label.textContent = dist.toFixed(3);
+      point.label.contentEditable = true;
+      this.labelContainer.append(point.label)
 
-  for (let i = 0; i < groupLines.length; i += 2) {
 
-    nids = groupLines[i].userData.nids
+  
+      point.label.addEventListener('focus', updateDim(this.c_id))
+
+    }
+
+
+    nids = dims[i].userData.nids
 
     _p1 = this.obj3d.children[sketcher.objIdx.get(nids[0])].geometry.attributes.position.array
     _p2 = this.obj3d.children[sketcher.objIdx.get(nids[1])].geometry.attributes.position.array
-    _p3 = groupLines[i + 1].geometry.attributes.position.array
+
-    const offset = groupLines[i + 1].userData.offset
+    const offset = dims[i + 1].userData.offset
 
     p1.set(_p1[0], _p1[1])
     p2.set(_p2[0], _p2[1])
@@ -151,8 +221,8 @@ export function updateDimLines() {
 
 
     update(
-      groupLines[i].geometry.attributes.position,
+      dims[i].geometry.attributes.position,
-      groupLines[i + 1].geometry.attributes.position
+      dims[i + 1].geometry.attributes.position
     )
   }
 
@@ -184,3 +254,5 @@ function update(linegeom, pointgeom) {
   pointgeom.array.set(p3.toArray())
   pointgeom.needsUpdate = true;
 }
+
+

src/utils/mouseEvents.js

@@ -103,7 +103,6 @@ export function onPick(e) {
         }
 
         draggedLabel = this.obj3d.children[1].children[idx].label
-        console.log(draggedLabel)
         draggedLabel.style.zIndex = -1;
         break;
       case 'point':
@@ -153,16 +152,19 @@ export function onRelease() {
   this.canvas.removeEventListener('pointermove', this.onDragDim)
   this.canvas.removeEventListener('pointerup', this.onRelease)
 
-  for (let x = 3; x < this.obj3d.children.length; x++) {
+  // for (let x = 3; x < this.obj3d.children.length; x++) {
-    const obj = this.obj3d.children[x]
+  //   const obj = this.obj3d.children[x]
-    obj.geometry.computeBoundingSphere()
+  //   obj.geometry.computeBoundingSphere()
-  }
+  // }
 
-  for (let x = 0; x < this.obj3d.children[1].children.length; x++) {
+  // for (let x = 0; x < this.obj3d.children[1].children.length; x++) {
-    const obj = this.obj3d.children[1].children[x]
+  //   const obj = this.obj3d.children[1].children[x]
-    obj.geometry.computeBoundingSphere()
+  //   obj.geometry.computeBoundingSphere()
-  }
+  // }
 
-  draggedLabel.style.zIndex = 0;
+  this.updateBoundingSpheres()
+  if (draggedLabel) {
+    draggedLabel.style.zIndex = 0;
+  }
 }
 

todo.txt

@@ -0,0 +1,11 @@
+fix css on design tree (a  lot of work)  \
+clear dim on exit exit sketch / rehydrate when back or after loading
+boolean flesh out refresh / replace mesh
+dimension to origin
+fix extrusion loop find
+reattaching sketch
+file save
+stl export
+
+angle
+other constraints / sprite