working

src/Sketch.js

@@ -213,20 +213,23 @@ class Sketch {
         if (this.mode == 'line') {
           drawClear.call(this)
         }
-        this.canvas.addEventListener('pointerdown', this.drawOnClick1)
         this.mode = "line"
+        this.canvas.addEventListener('pointerdown', this.drawOnClick1, {once:true})
         break;
       case 'a':
-        this.canvas.addEventListener('pointerdown', this.drawOnClick1)
         this.mode = "arc"
+        this.canvas.addEventListener('pointerdown', this.drawOnClick1, {once:true})
         break;
       case 'd':
-        this.drawDimension()
+        if (this.mode != '') {
+          drawClear.call(this)
+        }
         this.mode = ""
+        this.drawDimension()
         break;
       case 'p':
-        this.canvas.addEventListener('pointerdown', this.drawOnClick1)
         this.mode = "point"
+        this.canvas.addEventListener('pointerdown', this.drawOnClick1, {once:true})
         break;
       case 'Delete':
         this.deleteSelected()
@@ -234,19 +237,31 @@ class Sketch {
       case 'Backspace':
         this.deleteSelected()
         break;
-      case ' ':
+      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;
@@ -287,7 +302,7 @@ class Sketch {
   }
 
   delete(obj) {
-
+    if (!obj) return
     if (obj.userData.type == 'dimension') {
       this.deleteConstraints(obj.name)
       return

src/drawArc.js

@@ -58,7 +58,7 @@ const _p2 = new Vector2()
 const _l12 = new Vector2()
 
 
-export function arcOnClick2(p1, p2) {
+export function drawArc3(p1, p2) {
   _p1.set(
     p1.geometry.attributes.position.array[0],
     p1.geometry.attributes.position.array[1]
@@ -73,7 +73,7 @@ export function arcOnClick2(p1, p2) {
 }
 
 let r_cross_s, centerScalar, ccw, points
-export function drawArc3(mouseLoc, toPush) {
+export function drawArc4(mouseLoc, toPush) {
   const [p1, p2, p3, arc] = toPush
 
   _vec2.set(mouseLoc.x - _p1.x, mouseLoc.y - _p1.y)

src/drawDimension.js

@@ -2,7 +2,7 @@ import * as THREE from '../node_modules/three/src/Three';
 import { color } from './shared'
 
 const lineMaterial = new THREE.LineBasicMaterial({
-  linewidth: 2,
+  linewidth: 1,
   color: color.dimension,
 })
 

src/drawEvents.js

@@ -1,18 +1,38 @@
 
-import { drawArc, drawArc2, arcOnClick2, drawArc3 } from './drawArc'
+import { drawArc, drawArc2, drawArc3, drawArc4 } from './drawArc'
 import { drawLine, drawLine2 } from './drawLine'
 import { ptObj } from './shared'
 
 export function drawOnClick1(e) {
   if (e.buttons !== 1) return
-  this.canvas.removeEventListener('pointerdown', this.drawOnClick1)
+
+  // this.canvas.removeEventListener('pointerdown', this.drawOnClick1)
+
   this.canvas.addEventListener('pointermove', this.drawPreClick2)
-  this.canvas.addEventListener('pointerdown', this.drawOnClick2)
+  this.canvas.addEventListener('pointerdown', this.drawOnClick2, { once: true })
 
   const mouseLoc = this.getLocation(e).toArray();
 
+  // this.mode allow alow following modes to create new obj3ds
   if (this.mode == "line") {
-    this.toPush = drawLine.call(this, mouseLoc)
+    this.toPush = drawLine(mouseLoc)
+
+    if (this.subsequent) {
+      const p1 = this.toPush[0]
+
+      this.constraints.set(++this.c_id,  //??? why incremennt before not after
+        [
+          'points_coincident', -1,
+          [this.obj3d.children[this.obj3d.children.length - 2].name, p1.name, -1, -1]
+        ]
+      )
+
+      p1.userData.constraints.push(this.c_id)
+      this.obj3d.children[this.obj3d.children.length - 2].userData.constraints.push(this.c_id)
+
+    }
+
+
   } else if (this.mode == "arc") {
     this.toPush = drawArc(mouseLoc)
   } else if (this.mode == 'point') {
@@ -50,11 +70,11 @@ export function drawPreClick2(e) {
 export function drawOnClick2(e) {
   if (e.buttons !== 1) return;
   this.canvas.removeEventListener('pointermove', this.drawPreClick2);
-  this.canvas.removeEventListener('pointerdown', this.drawOnClick2);
 
   this.updatePointsBuffer(this.updatePoint)
   this.updateOtherBuffers()
 
+  // a this.mode == "" will prevent event chain from persisisting
   if (this.mode == "line") {
     this.subsequent = true
     this.drawOnClick1(e)
@@ -63,10 +83,10 @@ export function drawOnClick2(e) {
     this.drawOnClick1(e)
   } else if (this.mode == "arc") {
 
-    arcOnClick2(this.toPush[0], this.toPush[1])
+    drawArc3(this.toPush[0], this.toPush[1])
 
     this.canvas.addEventListener('pointermove', this.drawPreClick3)
-    this.canvas.addEventListener('pointerdown', this.drawOnClick3)
+    this.canvas.addEventListener('pointerdown', this.drawOnClick3, { once: true })
   }
 
 }
@@ -75,14 +95,14 @@ export function drawOnClick2(e) {
 let ccw;
 export function drawPreClick3(e) {
   const mouseLoc = this.getLocation(e);
-  ccw = drawArc3(mouseLoc, this.toPush)
+  ccw = drawArc4(mouseLoc, this.toPush)
   sc.render()
 }
 
 export function drawOnClick3(e) {
   if (e.buttons !== 1) return;
   this.canvas.removeEventListener('pointermove', this.drawPreClick3);
-  this.canvas.removeEventListener('pointerdown', this.drawOnClick3);
+
   if (!ccw) {
     let temp
     const ent = this.linkedObjs.get(this.l_id - 1)
@@ -95,7 +115,10 @@ export function drawOnClick3(e) {
     this.linksBuf[i + 1] = this.linksBuf[i + 2]
     this.linksBuf[i + 2] = temp
   }
-  this.canvas.addEventListener('pointerdown', this.drawOnClick1)
+
+
+  this.updatePoint = this.obj3d.children.length
+  this.canvas.addEventListener('pointerdown', this.drawOnClick1, { once: true })
 }
 
 
@@ -103,17 +126,7 @@ export function drawOnClick3(e) {
 export function drawClear() {
   if (this.mode == "") return
 
-  if (this.mode == "line") {
+  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.delete(this.obj3d.children[this.updatePoint])
-
-    this.obj3d.dispatchEvent({ type: 'change' })
-    this.subsequent = false
-    this.toPush = []
-  } if (this.mode == "arc") {
     this.canvas.removeEventListener('pointerdown', this.drawOnClick1)
     this.canvas.removeEventListener('pointermove', this.drawPreClick2);
     this.canvas.removeEventListener('pointerdown', this.drawOnClick2);
@@ -126,6 +139,7 @@ export function drawClear() {
     this.subsequent = false
     this.toPush = []
   }
+  
 }
 
 

src/drawLine.js

@@ -1,4 +1,3 @@
-import * as THREE from '../node_modules/three/src/Three';
 import {ptObj, lineObj} from './shared'
 
 export function drawLine(mouseLoc) {
@@ -21,24 +20,6 @@ export function drawLine(mouseLoc) {
   line.geometry.attributes.position.set(mouseLoc)
   p1.geometry.attributes.position.set(mouseLoc)
 
-  if (this.subsequent) {
-
-    this.constraints.set(++this.c_id,  //??? why incremennt before not after
-      [
-        'points_coincident', -1,
-        [this.obj3d.children[this.obj3d.children.length - 2].name, p1.name, -1, -1]
-      ]
-    )
-
-    p1.userData.constraints.push(this.c_id)
-    this.obj3d.children[this.obj3d.children.length - 2].userData.constraints.push(this.c_id)
-
-
-
-  }
-
-
-
   return [p1, p2, line];
 }