@tsdraw/core 0.6.2 → 0.7.0

package/dist/index.cjs

@@ -298,11 +298,16 @@ var CanvasRenderer = class {
     }
     ctx.restore();
   }
+  // Paints a single stroke
   paintStroke(ctx, shape) {
     const width = (STROKE_WIDTHS[shape.props.size] ?? 3.5) * shape.props.scale;
     const samples = flattenSegments(shape);
     if (samples.length === 0) return;
     const color = resolveThemeColor(shape.props.color, this.theme);
+    const fillStyle = shape.props.fill ?? "none";
+    if (shape.props.isClosed && fillStyle !== "none") {
+      this.paintClosedShapeFill(ctx, samples, color, fillStyle);
+    }
     if (shape.props.dash !== "draw") {
       this.paintDashedStroke(ctx, samples, width, color, shape.props.dash);
       return;
@@ -349,6 +354,30 @@ var CanvasRenderer = class {
     ctx.stroke();
     ctx.restore();
   }
+  // Closed shapes are shapes where their start and end point are the same
+  paintClosedShapeFill(ctx, samples, color, fillStyle) {
+    if (samples.length < 3) return;
+    ctx.save();
+    ctx.beginPath();
+    ctx.moveTo(samples[0].x, samples[0].y);
+    for (let i = 1; i < samples.length; i++) {
+      const sample = samples[i];
+      ctx.lineTo(sample.x, sample.y);
+    }
+    ctx.closePath();
+    if (fillStyle === "solid") {
+      ctx.fillStyle = color;
+      ctx.globalAlpha = 0.55;
+    } else if (fillStyle === "none") {
+      ctx.fillStyle = this.theme === "dark" ? "#0f0f0f" : "#fafafa";
+      ctx.globalAlpha = 1;
+    } else {
+      ctx.fillStyle = color;
+      ctx.globalAlpha = 0.28;
+    }
+    ctx.fill();
+    ctx.restore();
+  }
 };
 var PRESSURE_FLOOR = 0.025;
 var STYLUS_CURVE = (t) => t * 0.65 + Math.sin(t * Math.PI / 2) * 0.35;
@@ -362,7 +391,7 @@ function remap(value, inRange, outRange, clamp = false) {
   return outLo + (outHi - outLo) * clamped;
 }
 function strokeConfig(shape, width) {
-  const done = shape.props.isComplete;
+  const done = shape.props.isComplete || shape.props.isClosed === true;
   if (shape.props.isPen) {
     return {
       size: 1 + width * 1.2,
@@ -1035,6 +1064,236 @@ var PenDrawingState = class extends StateNode {
   }
 };
 
+// src/tools/square/states/SquareIdleState.ts
+var SquareIdleState = class extends StateNode {
+  static id = "square_idle";
+  onPointerDown(info) {
+    this.ctx.transition("square_drawing", info);
+  }
+};
+
+// src/tools/geometric/states/GeometricDrawingState.ts
+var GeometricDrawingState = class extends StateNode {
+  currentShapeId = null;
+  startedAt = { point: { x: 0, y: 0, z: 0.5 } };
+  onEnter(info) {
+    this.startedAt = info ?? { point: { x: 0, y: 0, z: 0.5 } };
+    const originPoint = this.editor.input.getOriginPagePoint();
+    const drawStyle = this.editor.getCurrentDrawStyle();
+    const nextShapeId = this.editor.createShapeId();
+    const config = this.getConfig();
+    this.editor.createShape({
+      id: nextShapeId,
+      type: "draw",
+      x: originPoint.x,
+      y: originPoint.y,
+      props: {
+        color: drawStyle.color,
+        dash: drawStyle.dash,
+        fill: drawStyle.fill,
+        size: drawStyle.size,
+        scale: 1,
+        isPen: false,
+        isComplete: false,
+        isClosed: true,
+        segments: config.buildSegments(1, 1)
+      }
+    });
+    this.currentShapeId = nextShapeId;
+  }
+  onPointerMove() {
+    const activeShape = this.getActiveShape();
+    if (!activeShape) return;
+    const config = this.getConfig();
+    const originPoint = this.editor.input.getOriginPagePoint();
+    const cursorPoint = this.editor.input.getCurrentPagePoint();
+    const shapeBounds = 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: shapeBounds.x,
+      y: shapeBounds.y,
+      props: {
+        ...activeShape.props,
+        segments: config.buildSegments(shapeBounds.width, shapeBounds.height),
+        isClosed: true
+      }
+    });
+  }
+  onPointerUp() {
+    this.completeShape();
+  }
+  onCancel() {
+    this.removeCurrentShape();
+    this.ctx.transition(this.getConfig().idleStateId, this.startedAt);
+  }
+  onInterrupt() {
+    this.completeShape();
+  }
+  onKeyDown() {
+    this.onPointerMove();
+  }
+  onKeyUp() {
+    this.onPointerMove();
+  }
+  completeShape() {
+    const activeShape = this.getActiveShape();
+    const config = this.getConfig();
+    if (!activeShape) {
+      this.ctx.transition(config.idleStateId, this.startedAt);
+      return;
+    }
+    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);
+    this.editor.store.updateShape(activeShape.id, {
+      x: finalizedBounds.x,
+      y: finalizedBounds.y,
+      props: {
+        ...activeShape.props,
+        fill: this.editor.getCurrentDrawStyle().fill,
+        isComplete: true,
+        isClosed: true,
+        segments: config.buildSegments(finalizedBounds.width, finalizedBounds.height)
+      }
+    });
+    this.currentShapeId = null;
+    this.ctx.transition(config.idleStateId);
+  }
+  removeCurrentShape() {
+    if (!this.currentShapeId) return;
+    this.editor.store.deleteShapes([this.currentShapeId]);
+    this.currentShapeId = null;
+  }
+  getActiveShape() {
+    if (!this.currentShapeId) return null;
+    const shape = this.editor.getShape(this.currentShapeId);
+    if (!shape || shape.type !== "draw") return null;
+    return shape;
+  }
+};
+
+// 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;
+  const sideLength = Math.max(Math.abs(rawDeltaX), Math.abs(rawDeltaY), MIN_SIDE_LENGTH);
+  if (forceEqualSides) {
+    const nextDeltaX = rawDeltaX < 0 ? -sideLength : sideLength;
+    const nextDeltaY = rawDeltaY < 0 ? -sideLength : sideLength;
+    return normalizeBounds(anchorX, anchorY, anchorX + nextDeltaX, anchorY + nextDeltaY);
+  }
+  return normalizeBounds(anchorX, anchorY, cursorX, cursorY);
+}
+function normalizeBounds(startX, startY, endX, endY) {
+  const x = Math.min(startX, endX);
+  const y = Math.min(startY, endY);
+  const width = Math.max(Math.abs(endX - startX), MIN_SIDE_LENGTH);
+  const height = Math.max(Math.abs(endY - startY), MIN_SIDE_LENGTH);
+  return { x, y, width, height };
+}
+function buildSquareBounds(anchorX, anchorY, cursorX, cursorY) {
+  return toSizedBounds(anchorX, anchorY, cursorX, cursorY, true);
+}
+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 };
+  const bottomRight = { x: width, y: height, z: 0.5 };
+  const bottomLeft = { x: 0, y: height, z: 0.5 };
+  return [
+    { type: "straight", path: encodePoints([topLeft, topRight]) },
+    { type: "straight", path: encodePoints([topRight, bottomRight]) },
+    { type: "straight", path: encodePoints([bottomRight, bottomLeft]) },
+    { type: "straight", path: encodePoints([bottomLeft, topLeft]) }
+  ];
+}
+function buildCircleBounds(anchorX, anchorY, cursorX, cursorY) {
+  return toSizedBounds(anchorX, anchorY, cursorX, cursorY, true);
+}
+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;
+  const radiusX = width / 2;
+  const radiusY = height / 2;
+  const sampleCount = 64;
+  const sampledPoints = [];
+  for (let sampleIndex = 0; sampleIndex <= sampleCount; sampleIndex += 1) {
+    const progress = sampleIndex / sampleCount;
+    const angle = progress * Math.PI * 2;
+    sampledPoints.push({
+      x: centerX + Math.cos(angle) * radiusX,
+      y: centerY + Math.sin(angle) * radiusY,
+      z: 0.5
+    });
+  }
+  return [{ type: "free", path: encodePoints(sampledPoints) }];
+}
+
+// src/tools/square/states/SquareDrawingState.ts
+var SquareDrawingState = class extends GeometricDrawingState {
+  static id = "square_drawing";
+  getConfig() {
+    return {
+      idleStateId: "square_idle",
+      buildConstrainedBounds: buildSquareBounds,
+      buildUnconstrainedBounds: buildRectangleBounds,
+      buildDefaultBounds: buildDefaultCenteredRectangleBounds,
+      buildSegments: buildRectangleSegments
+    };
+  }
+};
+
+// src/tools/circle/states/CircleIdleState.ts
+var CircleIdleState = class extends StateNode {
+  static id = "circle_idle";
+  onPointerDown(info) {
+    this.ctx.transition("circle_drawing", info);
+  }
+};
+
+// src/tools/circle/states/CircleDrawingState.ts
+var CircleDrawingState = class extends GeometricDrawingState {
+  static id = "circle_drawing";
+  getConfig() {
+    return {
+      idleStateId: "circle_idle",
+      buildConstrainedBounds: buildCircleBounds,
+      buildUnconstrainedBounds: buildEllipseBounds,
+      buildDefaultBounds: buildDefaultCenteredEllipseBounds,
+      buildSegments: buildEllipseSegments
+    };
+  }
+};
+
 // src/tools/eraser/states/EraserIdleState.ts
 var EraserIdleState = class extends StateNode {
   static id = "eraser_idle";
@@ -1348,6 +1607,7 @@ var Editor = class {
   drawStyle = {
     color: "black",
     dash: "draw",
+    fill: "none",
     size: "m"
   };
   toolStateContext;
@@ -1407,6 +1667,8 @@ var Editor = class {
   getDefaultToolDefinitions() {
     return [
       { id: "pen", initialStateId: PenIdleState.id, stateConstructors: [PenIdleState, PenDrawingState] },
+      { id: "square", initialStateId: SquareIdleState.id, stateConstructors: [SquareIdleState, SquareDrawingState] },
+      { id: "circle", initialStateId: CircleIdleState.id, stateConstructors: [CircleIdleState, CircleDrawingState] },
       { id: "eraser", initialStateId: EraserIdleState.id, stateConstructors: [EraserIdleState, EraserPointingState, EraserErasingState] },
       { id: "select", initialStateId: SelectIdleState.id, stateConstructors: [SelectIdleState] },
       { id: "hand", initialStateId: HandIdleState.id, stateConstructors: [HandIdleState, HandDraggingState] }
@@ -1511,7 +1773,12 @@ var Editor = class {
   }
   loadSessionStateSnapshot(snapshot) {
     this.setViewport(snapshot.viewport);
-    this.setCurrentDrawStyle(snapshot.drawStyle);
+    this.setCurrentDrawStyle({
+      color: snapshot.drawStyle.color,
+      dash: snapshot.drawStyle.dash,
+      fill: snapshot.drawStyle.fill ?? "none",
+      size: snapshot.drawStyle.size
+    });
     if (this.tools.hasTool(snapshot.currentToolId)) {
       this.setCurrentTool(snapshot.currentToolId);
     }
@@ -1893,6 +2160,8 @@ function applyResize(editor, handle, startBounds, startShapes, pointer, lockAspe
 }
 
 exports.CanvasRenderer = CanvasRenderer;
+exports.CircleDrawingState = CircleDrawingState;
+exports.CircleIdleState = CircleIdleState;
 exports.DEFAULT_COLORS = DEFAULT_COLORS;
 exports.DRAG_DISTANCE_SQUARED = DRAG_DISTANCE_SQUARED;
 exports.DocumentStore = DocumentStore;
@@ -1909,6 +2178,8 @@ exports.PenDrawingState = PenDrawingState;
 exports.PenIdleState = PenIdleState;
 exports.STROKE_WIDTHS = STROKE_WIDTHS;
 exports.SelectIdleState = SelectIdleState;
+exports.SquareDrawingState = SquareDrawingState;
+exports.SquareIdleState = SquareIdleState;
 exports.StateNode = StateNode;
 exports.ToolManager = ToolManager;
 exports.applyMove = applyMove;