@tsdraw/core 0.7.0 → 0.8.1

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") {
@@ -450,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) {
@@ -582,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;
@@ -783,8 +805,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 };
@@ -879,8 +901,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": {
@@ -1026,7 +1055,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({
@@ -1101,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;
@@ -1134,6 +1164,8 @@ 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
   completeShape() {
     const activeShape = this.getActiveShape();
     const config = this.getConfig();
@@ -1454,6 +1486,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;
@@ -1472,6 +1506,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) {
@@ -1736,7 +1771,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();
   }
@@ -1746,6 +1782,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())
@@ -1764,7 +1812,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(),
@@ -1772,7 +1821,10 @@ var Editor = class {
     };
   }
   loadSessionStateSnapshot(snapshot) {
-    this.setViewport(snapshot.viewport);
+    this.setViewport({
+      ...snapshot.viewport,
+      rotation: snapshot.viewport.rotation ?? 0
+    });
     this.setCurrentDrawStyle({
       color: snapshot.drawStyle.color,
       dash: snapshot.drawStyle.dash,
@@ -2213,6 +2265,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;