@tsdraw/core 0.6.2 → 0.8.0

package/dist/index.cjs

@@ -225,25 +225,34 @@ var StateNode = class {
 
 // src/canvas/viewport.ts
 function createViewport() {
-  return { x: 0, y: 0, zoom: 1 };
+  return { x: 0, y: 0, zoom: 1, rotation: 0 };
 }
 function screenToPage(viewport, screenX, screenY) {
+  const tx = screenX - viewport.x;
+  const ty = screenY - viewport.y;
+  const cos = Math.cos(viewport.rotation);
+  const sin = Math.sin(viewport.rotation);
   return {
-    x: (screenX - viewport.x) / viewport.zoom,
-    y: (screenY - viewport.y) / viewport.zoom
+    x: (tx * cos + ty * sin) / viewport.zoom,
+    y: (-tx * sin + ty * cos) / viewport.zoom
   };
 }
 function pageToScreen(viewport, pageX, pageY) {
+  const scaledX = pageX * viewport.zoom;
+  const scaledY = pageY * viewport.zoom;
+  const cos = Math.cos(viewport.rotation);
+  const sin = Math.sin(viewport.rotation);
   return {
-    x: pageX * viewport.zoom + viewport.x,
-    y: pageY * viewport.zoom + viewport.y
+    x: scaledX * cos - scaledY * sin + viewport.x,
+    y: scaledX * sin + scaledY * cos + viewport.y
   };
 }
 function setViewport(viewport, updater) {
   return {
     x: updater.x ?? viewport.x,
     y: updater.y ?? viewport.y,
-    zoom: updater.zoom ?? viewport.zoom
+    zoom: updater.zoom ?? viewport.zoom,
+    rotation: updater.rotation ?? viewport.rotation
   };
 }
 function panViewport(viewport, dx, dy) {
@@ -255,9 +264,23 @@ function zoomViewport(viewport, factor, centerX, centerY) {
     return { ...viewport, zoom };
   }
   const pageBefore = screenToPage(viewport, centerX, centerY);
-  const x = centerX - pageBefore.x * zoom;
-  const y = centerY - pageBefore.y * zoom;
-  return { x, y, zoom };
+  const cos = Math.cos(viewport.rotation);
+  const sin = Math.sin(viewport.rotation);
+  const x = centerX - (pageBefore.x * zoom * cos - pageBefore.y * zoom * sin);
+  const y = centerY - (pageBefore.x * zoom * sin + pageBefore.y * zoom * cos);
+  return { x, y, zoom, rotation: viewport.rotation };
+}
+function rotateViewport(viewport, delta, centerX, centerY) {
+  const rotation = viewport.rotation + delta;
+  if (centerX == null || centerY == null) {
+    return { ...viewport, rotation };
+  }
+  const pageBefore = screenToPage(viewport, centerX, centerY);
+  const cos = Math.cos(rotation);
+  const sin = Math.sin(rotation);
+  const x = centerX - (pageBefore.x * viewport.zoom * cos - pageBefore.y * viewport.zoom * sin);
+  const y = centerY - (pageBefore.x * viewport.zoom * sin + pageBefore.y * viewport.zoom * cos);
+  return { x, y, zoom: viewport.zoom, rotation };
 }
 
 // src/utils/colors.ts
@@ -290,6 +313,7 @@ var CanvasRenderer = class {
   render(ctx, viewport, shapes) {
     ctx.save();
     ctx.translate(viewport.x, viewport.y);
+    ctx.rotate(viewport.rotation);
     ctx.scale(viewport.zoom, viewport.zoom);
     for (const shape of shapes) {
       if (shape.type === "draw") {
@@ -298,11 +322,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 +378,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 +415,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,
@@ -421,9 +474,6 @@ function flattenSegments(shape) {
     }
     out.push(D);
   }
-  if (out.length > 0 && !shape.props.isPen) {
-    for (const p of out) p.pressure = 0.5;
-  }
   return out;
 }
 function getLineDash(dash, width) {
@@ -754,8 +804,8 @@ var PenDrawingState = class extends StateNode {
     const penActive = inputs.getIsPen();
     const z = this._startInfo?.point?.z ?? 0.5;
     this._isPenDevice = penActive;
-    this._hasPressure = penActive && z !== 0 || z > 0 && z < 0.5 || z > 0.5 && z < 1;
-    const pressure = this._hasPressure ? toFixed(z * 1.25) : 0.5;
+    this._hasPressure = penActive || z !== 0.5;
+    const pressure = this._hasPressure ? toFixed(z) : 0.5;
     this._phase = inputs.getShiftKey() ? "straight" : "free";
     this._extending = false;
     this._lastSample = { ...origin };
@@ -850,8 +900,15 @@ var PenDrawingState = class extends StateNode {
     const { id, props: { size, scale } } = target;
     const { segments } = shape.props;
     const curPt = inputs.getCurrentPagePoint();
+    if (!this._hasPressure) {
+      const liveZ = curPt.z ?? 0.5;
+      if (liveZ !== 0.5 || inputs.getIsPen()) {
+        this._hasPressure = true;
+        this.editor.updateShapes([{ id, type: "draw", props: { isPen: true } }]);
+      }
+    }
     const local = this.editor.getPointInShapeSpace(shape, curPt);
-    const pressure = this._hasPressure ? toFixed((curPt.z ?? 0.5) * 1.25) : 0.5;
+    const pressure = this._hasPressure ? toFixed(curPt.z ?? 0.5) : 0.5;
     const pt = { x: toFixed(local.x), y: toFixed(local.y), z: pressure };
     switch (this._phase) {
       case "starting_straight": {
@@ -997,7 +1054,7 @@ var PenDrawingState = class extends StateNode {
           const firstPt = {
             x: 0,
             y: 0,
-            z: this._hasPressure ? toFixed((curPage.z ?? 0.5) * 1.25) : 0.5
+            z: this._hasPressure ? toFixed(curPage.z ?? 0.5) : 0.5
           };
           this._activePts = [firstPt];
           this.editor.createShape({
@@ -1035,6 +1092,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 +1635,7 @@ var Editor = class {
   drawStyle = {
     color: "black",
     dash: "draw",
+    fill: "none",
     size: "m"
   };
   toolStateContext;
@@ -1407,6 +1695,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] }
@@ -1474,7 +1764,8 @@ var Editor = class {
     this.viewport = {
       x: partial.x ?? this.viewport.x,
       y: partial.y ?? this.viewport.y,
-      zoom: Math.max(0.1, Math.min(4, rawZoom))
+      zoom: Math.max(0.1, Math.min(4, rawZoom)),
+      rotation: partial.rotation ?? this.viewport.rotation
     };
     this.emitChange();
   }
@@ -1484,6 +1775,18 @@ var Editor = class {
       y: this.viewport.y + dy
     });
   }
+  zoomAt(factor, screenX, screenY) {
+    this.viewport = zoomViewport(this.viewport, factor, screenX, screenY);
+    this.emitChange();
+  }
+  rotateAt(delta, screenX, screenY) {
+    this.viewport = rotateViewport(this.viewport, delta, screenX, screenY);
+    this.emitChange();
+  }
+  deleteShapes(ids) {
+    if (ids.length === 0) return;
+    this.store.deleteShapes(ids);
+  }
   getDocumentSnapshot() {
     return {
       records: documentSnapshotToRecords(this.store.getSnapshot())
@@ -1502,7 +1805,8 @@ var Editor = class {
       viewport: {
         x: this.viewport.x,
         y: this.viewport.y,
-        zoom: this.viewport.zoom
+        zoom: this.viewport.zoom,
+        rotation: this.viewport.rotation
       },
       currentToolId: this.getCurrentToolId(),
       drawStyle: this.getCurrentDrawStyle(),
@@ -1510,8 +1814,16 @@ var Editor = class {
     };
   }
   loadSessionStateSnapshot(snapshot) {
-    this.setViewport(snapshot.viewport);
-    this.setCurrentDrawStyle(snapshot.drawStyle);
+    this.setViewport({
+      ...snapshot.viewport,
+      rotation: snapshot.viewport.rotation ?? 0
+    });
+    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 +2205,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 +2223,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;
@@ -1942,6 +2258,7 @@ exports.pointHitsShape = pointHitsShape;
 exports.recordsToDocumentSnapshot = recordsToDocumentSnapshot;
 exports.resolveThemeColor = resolveThemeColor;
 exports.rotatePoint = rotatePoint;
+exports.rotateViewport = rotateViewport;
 exports.screenToPage = screenToPage;
 exports.segmentHitsShape = segmentHitsShape;
 exports.segmentTouchesPolyline = segmentTouchesPolyline;