workin dimension drag

src/Scene.js

@@ -192,15 +192,19 @@ async function addSketch() {
 
   let sketch;
 
-  if (this.selected[0].name[0] == 'd') {
+  const references = await this.awaitPts({ p: 3 }, { d: 1 });
+
+  if (!references) return;
+
+  if (references[0].name[0] == 'd') {
     sketch = new Sketch(this.camera, this.canvas, this.store)
-    sketch.obj3d.matrix = this.selected[0].matrix
+    sketch.obj3d.matrix = references[0].matrix
     sketch.plane.applyMatrix4(sketch.obj3d.matrix)
     sketch.obj3d.inverse = sketch.obj3d.matrix.clone().invert()
+    this.obj3d.add(sketch.obj3d)
   } else {
-    const references = await this.awaitPts(3);
-    if (references.length != 3) return;
     sketch = new Sketch(this.camera, this.canvas, this.store)
+    this.obj3d.add(sketch.obj3d)
     sketch.align(
       ...references.map(
         el => new Vector3(...el.geometry.attributes.position.array).applyMatrix4(el.matrixWorld)
@@ -208,7 +212,6 @@ async function addSketch() {
     )
   }
 
-  this.obj3d.add(sketch.obj3d)
 
 
 

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 } from './drawDimension';
+import { drawDimension, _onMoveDimension, updateDimLines } from './drawDimension';
 
 
 
@@ -107,6 +107,7 @@ class Sketch {
     this.drawOnClick2 = drawOnClick2.bind(this);
     this.drawDimension = drawDimension.bind(this)
     this._onMoveDimension = _onMoveDimension.bind(this)
+    this.updateDimLines = updateDimLines.bind(this)
 
     this.awaitPts = awaitPts.bind(this);
 
@@ -379,6 +380,8 @@ class Sketch {
     }
 
 
+    this.updateDimLines()
+    
     this.obj3d.dispatchEvent({ type: 'change' })
   }
 

src/sketcher/drawDimension.js

@@ -13,9 +13,9 @@ const pointMaterial = new THREE.PointsMaterial({
 
 
 export async function drawDimension() {
-  let pts = await this.awaitPts(2)
+  let pts = await this.awaitPts({ p: 2 })
 
-  if (pts.length != 2) return;
+  if (pts == null) return;
 
   const line = new THREE.LineSegments(
     new THREE.BufferGeometry().setAttribute('position',
@@ -31,8 +31,7 @@ export async function drawDimension() {
     pointMaterial.clone()
   )
 
-  line.userData.construction = true
+  line.userData.nids = pts.map(e => e.name)
-  point.userData.construction = true
 
   const groupLines = this.obj3d.children[1]
   const groupPts = this.obj3d.children[2]
@@ -91,15 +90,83 @@ export async function drawDimension() {
 
 export function _onMoveDimension(_p1, _p2, point, line) {
 
-  const p1 = new THREE.Vector2(..._p1.geometry.attributes.position.array.slice(0, 2))
+  p1.set(..._p1.geometry.attributes.position.array.slice(0, 2))
-  const p2 = new THREE.Vector2(..._p2.geometry.attributes.position.array.slice(0, 2))
+  p2.set(..._p2.geometry.attributes.position.array.slice(0, 2))
-  const p3 = new THREE.Vector2()
+
   let dir, hyp, proj, perp, p1e, p2e, loc;
 
   return (e) => {
     loc = this.getLocation(e)
+
     p3.set(loc.x, loc.y)
 
+
+    const linegeom = line.geometry.attributes.position
+    const pointgeom = point.geometry.attributes.position
+
+    dir = p2.clone().sub(p1).normalize()
+    hyp = p3.clone().sub(p1)
+    proj = dir.multiplyScalar(hyp.dot(dir))
+    perp = hyp.clone().sub(proj)
+
+    p1e = p1.clone().add(perp).toArray()
+    p2e = p2.clone().add(perp).toArray()
+
+    linegeom.array.set(p1.toArray(), 0)
+    linegeom.array.set(p1e, 3)
+
+    linegeom.array.set(p1e, 6)
+    linegeom.array.set(p2e, 9)
+
+    linegeom.array.set(p2e, 12)
+    linegeom.array.set(p2.toArray(), 15)
+
+    linegeom.array.set(p1e, 18)
+    linegeom.array.set(p3.toArray(), 21)
+
+    linegeom.needsUpdate = true;
+
+    pointgeom.array.set(p3.toArray())
+    pointgeom.needsUpdate = true;
+
+
+    point.userData.offset = hyp.toArray()
+
+    sc.render()
+  }
+}
+
+const p1 = new THREE.Vector2()
+const p2 = new THREE.Vector2()
+const p3 = new THREE.Vector2()
+
+export function updateDimLines() {
+
+
+  let dir, hyp, proj, perp, p1e, p2e;
+  let nids, _p1, _p2, _p3, offset;
+
+  const groupLines = this.obj3d.children[1].children
+  const groupPts = this.obj3d.children[2].children
+
+  for (let i = 0; i < groupLines.length; i++) {
+
+    nids = groupLines[i].userData.nids
+    // console.log(sketcher.objIdx.get(nid[0]), 'heeeeeeee')
+
+    _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 = groupPts[i].geometry.attributes.position.array
+    offset = groupPts[i].userData.offset
+
+    p1.set(_p1[0], _p1[1])
+    p2.set(_p2[0], _p2[1])
+    p3.set(_p1[0] + offset[0], _p1[1] + offset[1])
+
+
+    const linegeom = groupLines[i].geometry.attributes.position
+    const pointgeom = groupPts[i].geometry.attributes.position
+
     dir = p2.clone().sub(p1).normalize()
     hyp = p3.clone().sub(p1)
     proj = dir.multiplyScalar(hyp.dot(dir))
@@ -108,23 +175,22 @@ export function _onMoveDimension(_p1, _p2, point, line) {
     p1e = p1.clone().add(perp).toArray()
     p2e = p2.clone().add(perp).toArray()
 
-    const linegeom = line.geometry.attributes.position.array
+    linegeom.array.set(p1.toArray(), 0)
-    linegeom.set(p1.toArray(), 0)
+    linegeom.array.set(p1e, 3)
-    linegeom.set(p1e, 3)
 
-    linegeom.set(p1e, 6)
+    linegeom.array.set(p1e, 6)
-    linegeom.set(p2e, 9)
+    linegeom.array.set(p2e, 9)
 
-    linegeom.set(p2e, 12)
+    linegeom.array.set(p2e, 12)
-    linegeom.set(p2.toArray(), 15)
+    linegeom.array.set(p2.toArray(), 15)
 
-    linegeom.set(p1e, 18)
+    linegeom.array.set(p1e, 18)
-    linegeom.set(p3.toArray(), 21)
+    linegeom.array.set(p3.toArray(), 21)
 
-    point.geometry.attributes.position.set(p3.toArray())
+    linegeom.needsUpdate = true;
 
-    line.geometry.attributes.position.needsUpdate = true;
+    pointgeom.array.set(p3.toArray())
-    point.geometry.attributes.position.needsUpdate = true;
+    pointgeom.needsUpdate = true;
-    sc.render()
   }
+
 }

src/utils/shared.js

@@ -56,25 +56,62 @@ const lineObj = (n = 1) => {
 }
 
 
-async function awaitPts(n) {
+async function awaitPts(...criteria) {
+
+  function fullfilled() {
+    for (let i = criteria.length - 1; i >= 0; i--) {
+      const crit = criteria[i]
+      let nfilled = 0;
+      for (let k in counter) {
+        if (!crit[k] || counter[k] > crit[k]) {
+          criteria.splice(i, 1)
+          break;
+        } else if (counter[k] == crit[k]) {
+          nfilled += 1
+        }
+      }
+      if (nfilled == Object.keys(crit).length) return true
+    }
+    return false
+  }
+
+  const counter = {}
+
   let references = this.selected.slice()
+
+  for (let ob of references) {
+    const type = ob.name[0]
+    if (counter[type]) {
+      counter[type] += 1;
+    } else {
+      counter[type] = 1;
+    }
+  }
+  if (fullfilled()) return references
+
   let end = false;
-  while (references.length < n && !end) {
+  while (criteria.length && !end) {
     let pt;
     let onEnd, onKey;
     try {
+
       pt = await new Promise((res, rej) => {
         onKey = (e) => e.key == 'Escape' && rej()
-        onEnd = (e) => res(this.hovered[0])
+        onEnd = (e) => this.hovered.length && res(this.hovered[0])
-
+        this.canvas.addEventListener('pointerdown', onEnd)
-        this.canvas.addEventListener('pointerdown', onEnd,{ once: true })
+        window.addEventListener('keydown', onKey)
-        window.addEventListener('keydown', onKey,{ once: true })
       })
 
-      if (pt.name[0] == 'p') {
       references.push(pt)
+      const type = pt.name[0]
+      if (counter[type]) {
+        counter[type] += 1;
+      } else {
+        counter[type] = 1;
       }
 
+      if (fullfilled()) return references
+
     } catch (e) {
       end = true;
     }
@@ -83,7 +120,8 @@ async function awaitPts(n) {
     window.removeEventListener('keydown', onKey)
   }
   
-  return references
+  console.log('fail')
+  return null
 }