@tsdraw/core 0.8.0 → 0.8.2

package/dist/index.d.cts

@@ -429,18 +429,15 @@ interface ShapeBounds {
 }
 declare function buildSquareBounds(anchorX: number, anchorY: number, cursorX: number, cursorY: number): ShapeBounds;
 declare function buildRectangleBounds(anchorX: number, anchorY: number, cursorX: number, cursorY: number): ShapeBounds;
-declare function buildDefaultCenteredRectangleBounds(centerX: number, centerY: number): ShapeBounds;
 declare function buildRectangleSegments(width: number, height: number): DrawSegment[];
 declare function buildCircleBounds(anchorX: number, anchorY: number, cursorX: number, cursorY: number): ShapeBounds;
 declare function buildEllipseBounds(anchorX: number, anchorY: number, cursorX: number, cursorY: number): ShapeBounds;
-declare function buildDefaultCenteredEllipseBounds(centerX: number, centerY: number): ShapeBounds;
 declare function buildEllipseSegments(width: number, height: number): DrawSegment[];
 
 interface GeometricDrawingStateConfig {
     idleStateId: string;
     buildConstrainedBounds: (anchorX: number, anchorY: number, cursorX: number, cursorY: number) => ShapeBounds;
     buildUnconstrainedBounds: (anchorX: number, anchorY: number, cursorX: number, cursorY: number) => ShapeBounds;
-    buildDefaultBounds: (centerX: number, centerY: number) => ShapeBounds;
     buildSegments: (width: number, height: number) => DrawSegment[];
 }
 declare abstract class GeometricDrawingState extends StateNode {
@@ -465,7 +462,6 @@ declare class SquareDrawingState extends GeometricDrawingState {
         idleStateId: string;
         buildConstrainedBounds: typeof buildSquareBounds;
         buildUnconstrainedBounds: typeof buildRectangleBounds;
-        buildDefaultBounds: typeof buildDefaultCenteredRectangleBounds;
         buildSegments: typeof buildRectangleSegments;
     };
 }
@@ -481,7 +477,6 @@ declare class CircleDrawingState extends GeometricDrawingState {
         idleStateId: string;
         buildConstrainedBounds: typeof buildCircleBounds;
         buildUnconstrainedBounds: typeof buildEllipseBounds;
-        buildDefaultBounds: typeof buildDefaultCenteredEllipseBounds;
         buildSegments: typeof buildEllipseSegments;
     };
 }

package/dist/index.d.ts

@@ -429,18 +429,15 @@ interface ShapeBounds {
 }
 declare function buildSquareBounds(anchorX: number, anchorY: number, cursorX: number, cursorY: number): ShapeBounds;
 declare function buildRectangleBounds(anchorX: number, anchorY: number, cursorX: number, cursorY: number): ShapeBounds;
-declare function buildDefaultCenteredRectangleBounds(centerX: number, centerY: number): ShapeBounds;
 declare function buildRectangleSegments(width: number, height: number): DrawSegment[];
 declare function buildCircleBounds(anchorX: number, anchorY: number, cursorX: number, cursorY: number): ShapeBounds;
 declare function buildEllipseBounds(anchorX: number, anchorY: number, cursorX: number, cursorY: number): ShapeBounds;
-declare function buildDefaultCenteredEllipseBounds(centerX: number, centerY: number): ShapeBounds;
 declare function buildEllipseSegments(width: number, height: number): DrawSegment[];
 
 interface GeometricDrawingStateConfig {
     idleStateId: string;
     buildConstrainedBounds: (anchorX: number, anchorY: number, cursorX: number, cursorY: number) => ShapeBounds;
     buildUnconstrainedBounds: (anchorX: number, anchorY: number, cursorX: number, cursorY: number) => ShapeBounds;
-    buildDefaultBounds: (centerX: number, centerY: number) => ShapeBounds;
     buildSegments: (width: number, height: number) => DrawSegment[];
 }
 declare abstract class GeometricDrawingState extends StateNode {
@@ -465,7 +462,6 @@ declare class SquareDrawingState extends GeometricDrawingState {
         idleStateId: string;
         buildConstrainedBounds: typeof buildSquareBounds;
         buildUnconstrainedBounds: typeof buildRectangleBounds;
-        buildDefaultBounds: typeof buildDefaultCenteredRectangleBounds;
         buildSegments: typeof buildRectangleSegments;
     };
 }
@@ -481,7 +477,6 @@ declare class CircleDrawingState extends GeometricDrawingState {
         idleStateId: string;
         buildConstrainedBounds: typeof buildCircleBounds;
         buildUnconstrainedBounds: typeof buildEllipseBounds;
-        buildDefaultBounds: typeof buildDefaultCenteredEllipseBounds;
         buildSegments: typeof buildEllipseSegments;
     };
 }

package/dist/index.js

@@ -601,6 +601,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;
@@ -1127,6 +1128,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;
@@ -1160,6 +1162,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();
@@ -1169,7 +1174,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,
@@ -1199,10 +1212,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;
@@ -1227,16 +1236,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 };
@@ -1255,16 +1254,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;
@@ -1292,7 +1281,6 @@ var SquareDrawingState = class extends GeometricDrawingState {
       idleStateId: "square_idle",
       buildConstrainedBounds: buildSquareBounds,
       buildUnconstrainedBounds: buildRectangleBounds,
-      buildDefaultBounds: buildDefaultCenteredRectangleBounds,
       buildSegments: buildRectangleSegments
     };
   }
@@ -1314,7 +1302,6 @@ var CircleDrawingState = class extends GeometricDrawingState {
       idleStateId: "circle_idle",
       buildConstrainedBounds: buildCircleBounds,
       buildUnconstrainedBounds: buildEllipseBounds,
-      buildDefaultBounds: buildDefaultCenteredEllipseBounds,
       buildSegments: buildEllipseSegments
     };
   }
@@ -1480,6 +1467,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;
@@ -1498,6 +1487,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) {