@tsdraw/core 0.8.0 → 0.8.2

package/dist/index.cjs

@@ -603,6 +603,7 @@ var ToolManager = class {
   getCurrentState() {
     return this.currentState;
   }
+  // Transition between states within the same tool (ex. pen_idle -> pen_drawing)
   transition(stateId, info) {
     const next = this.states.get(stateId);
     if (!next) return;
@@ -1129,6 +1130,7 @@ var GeometricDrawingState = class extends StateNode {
     });
     this.currentShapeId = nextShapeId;
   }
+  // Shift key switches between constrained and unconstrained bounds
   onPointerMove() {
     const activeShape = this.getActiveShape();
     if (!activeShape) return;
@@ -1162,6 +1164,9 @@ var GeometricDrawingState = class extends StateNode {
   onKeyUp() {
     this.onPointerMove();
   }
+  // If user dragged, use the drag extents for the final shape
+  // If they just clicked without dragging, use default-sized shape
+  // If they dragged just a bit (most likely a click), remove the shape and go back to idle
   completeShape() {
     const activeShape = this.getActiveShape();
     const config = this.getConfig();
@@ -1171,7 +1176,15 @@ var GeometricDrawingState = class extends StateNode {
     }
     const originPoint = this.editor.input.getOriginPagePoint();
     const cursorPoint = this.editor.input.getCurrentPagePoint();
-    const finalizedBounds = this.editor.input.getIsDragging() ? this.editor.input.getShiftKey() ? config.buildConstrainedBounds(originPoint.x, originPoint.y, cursorPoint.x, cursorPoint.y) : config.buildUnconstrainedBounds(originPoint.x, originPoint.y, cursorPoint.x, cursorPoint.y) : config.buildDefaultBounds(originPoint.x, originPoint.y);
+    const dx = cursorPoint.x - originPoint.x;
+    const dy = cursorPoint.y - originPoint.y;
+    const draggedFarEnough = dx * dx + dy * dy > this.editor.options.dragDistanceSquared;
+    if (!draggedFarEnough) {
+      this.removeCurrentShape();
+      this.ctx.transition(config.idleStateId, this.startedAt);
+      return;
+    }
+    const finalizedBounds = this.editor.input.getShiftKey() ? config.buildConstrainedBounds(originPoint.x, originPoint.y, cursorPoint.x, cursorPoint.y) : config.buildUnconstrainedBounds(originPoint.x, originPoint.y, cursorPoint.x, cursorPoint.y);
     this.editor.store.updateShape(activeShape.id, {
       x: finalizedBounds.x,
       y: finalizedBounds.y,
@@ -1201,10 +1214,6 @@ var GeometricDrawingState = class extends StateNode {
 
 // src/tools/geometric/geometricShapeHelpers.ts
 var MIN_SIDE_LENGTH = 1;
-var DEFAULT_RECTANGLE_WIDTH = 180;
-var DEFAULT_RECTANGLE_HEIGHT = 120;
-var DEFAULT_ELLIPSE_WIDTH = 180;
-var DEFAULT_ELLIPSE_HEIGHT = 120;
 function toSizedBounds(anchorX, anchorY, cursorX, cursorY, forceEqualSides) {
   const rawDeltaX = cursorX - anchorX;
   const rawDeltaY = cursorY - anchorY;
@@ -1229,16 +1238,6 @@ function buildSquareBounds(anchorX, anchorY, cursorX, cursorY) {
 function buildRectangleBounds(anchorX, anchorY, cursorX, cursorY) {
   return toSizedBounds(anchorX, anchorY, cursorX, cursorY, false);
 }
-function buildDefaultCenteredRectangleBounds(centerX, centerY) {
-  const halfWidth = DEFAULT_RECTANGLE_WIDTH / 2;
-  const halfHeight = DEFAULT_RECTANGLE_HEIGHT / 2;
-  return {
-    x: centerX - halfWidth,
-    y: centerY - halfHeight,
-    width: DEFAULT_RECTANGLE_WIDTH,
-    height: DEFAULT_RECTANGLE_HEIGHT
-  };
-}
 function buildRectangleSegments(width, height) {
   const topLeft = { x: 0, y: 0, z: 0.5 };
   const topRight = { x: width, y: 0, z: 0.5 };
@@ -1257,16 +1256,6 @@ function buildCircleBounds(anchorX, anchorY, cursorX, cursorY) {
 function buildEllipseBounds(anchorX, anchorY, cursorX, cursorY) {
   return toSizedBounds(anchorX, anchorY, cursorX, cursorY, false);
 }
-function buildDefaultCenteredEllipseBounds(centerX, centerY) {
-  const halfWidth = DEFAULT_ELLIPSE_WIDTH / 2;
-  const halfHeight = DEFAULT_ELLIPSE_HEIGHT / 2;
-  return {
-    x: centerX - halfWidth,
-    y: centerY - halfHeight,
-    width: DEFAULT_ELLIPSE_WIDTH,
-    height: DEFAULT_ELLIPSE_HEIGHT
-  };
-}
 function buildEllipseSegments(width, height) {
   const centerX = width / 2;
   const centerY = height / 2;
@@ -1294,7 +1283,6 @@ var SquareDrawingState = class extends GeometricDrawingState {
       idleStateId: "square_idle",
       buildConstrainedBounds: buildSquareBounds,
       buildUnconstrainedBounds: buildRectangleBounds,
-      buildDefaultBounds: buildDefaultCenteredRectangleBounds,
       buildSegments: buildRectangleSegments
     };
   }
@@ -1316,7 +1304,6 @@ var CircleDrawingState = class extends GeometricDrawingState {
       idleStateId: "circle_idle",
       buildConstrainedBounds: buildCircleBounds,
       buildUnconstrainedBounds: buildEllipseBounds,
-      buildDefaultBounds: buildDefaultCenteredEllipseBounds,
       buildSegments: buildEllipseSegments
     };
   }
@@ -1482,6 +1469,8 @@ var EraserErasingState = class extends StateNode {
   onCancel() {
     this.ctx.transition("eraser_idle");
   }
+  // On every pointer move, test the line from previous pointer position to current one against nearby shapes
+  // Only select shapes whose bounding box overlaps the sweep area to avoid testing all shapes
   sweep() {
     const zoom = this.editor.getZoomLevel();
     const tolerance = ERASER_MARGIN / zoom;
@@ -1500,6 +1489,7 @@ var EraserErasingState = class extends StateNode {
     this._marked = [...hitIds];
     this.editor.setErasingShapes(this._marked);
   }
+  // Delete marked shapes and reset, then go back to idle
   finish() {
     const ids = this.editor.getErasingShapeIds();
     if (ids.length > 0) {