Support creation of Points

will-moore · Apr 23, 2024 · 5aced74 · 5aced74
1 parent 3f00da2
commit 5aced74
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 5 deletions.
diff --git a/src/js/shape_editor/ellipse.js b/src/js/shape_editor/ellipse.js
@@ -485,7 +485,7 @@ CreatePoint.prototype.startDrag = function startDrag(startX, startY) {
 };
 
 CreatePoint.prototype.drag = function drag(dragX, dragY, shiftKey) {
-  this.point.updateHandle("end", dragX, dragY, shiftKey);
+  // no drag behaviour on Point creation
 };
 
 CreatePoint.prototype.stopDrag = function stopDrag() {
@@ -498,7 +498,7 @@ CreatePoint.prototype.stopDrag = function stopDrag() {
   }
   // on the 'new:shape' trigger, this shape will already be selected
   this.point.setSelected(true);
-  this.manager.addShape(this.ellipse);
+  this.manager.addShape(this.point);
 };
 
 

diff --git a/src/js/shape_editor/shape_manager.js b/src/js/shape_editor/shape_manager.js
@@ -36,7 +36,7 @@ var ShapeManager = function ShapeManager(elementId, width, height, options) {
   options = options || {};
 
   // Keep track of state, strokeColor etc
-  this.STATES = ["SELECT", "RECT", "LINE", "ARROW", "ELLIPSE", "POLYGON"];
+  this.STATES = ["SELECT", "RECT", "LINE", "ARROW", "ELLIPSE", "POLYGON", "POINT"];
   this._state = "SELECT";
   this._strokeColor = "#ff0000";
   this._strokeWidth = 2;
@@ -87,6 +87,7 @@ var ShapeManager = function ShapeManager(elementId, width, height, options) {
       ELLIPSE: new CreateEllipse({ manager: this, paper: this.paper }),
       LINE: new CreateLine({ manager: this, paper: this.paper }),
       ARROW: new CreateArrow({ manager: this, paper: this.paper }),
+      POINT: new CreatePoint({ manager: this, paper: this.paper }),
     };
 
     this.createShape = this.shapeFactories.LINE;
@@ -172,7 +173,7 @@ ShapeManager.prototype.setState = function setState(state) {
     return;
   }
   // When creating shapes, cover existing shapes with newShapeBg
-  var shapes = ["RECT", "LINE", "ARROW", "ELLIPSE", "POLYGON"];
+  var shapes = ["RECT", "LINE", "ARROW", "ELLIPSE", "POLYGON", "POINT"];
   if (shapes.indexOf(state) > -1) {
     this.newShapeBg.toFront();
     this.newShapeBg.attr({ cursor: "crosshair" });

diff --git a/src/shapeEditorTest.html b/src/shapeEditorTest.html
@@ -38,7 +38,9 @@
       Line:
       <input type="radio" name="state" value="LINE"/> <br>
       Arrow:
-      <input type="radio" name="state" value="ARROW"/>
+      <input type="radio" name="state" value="ARROW"/> <br>
+      Point:
+      <input type="radio" name="state" value="POINT"/>
     </div>
 
     <div class="toolbar">