@tsdraw/core 0.8.2 → 0.8.4

package/dist/index.d.cts

@@ -63,7 +63,6 @@ interface TsdrawSessionStateSnapshot {
         x: number;
         y: number;
         zoom: number;
-        rotation?: number;
     };
     currentToolId: string;
     drawStyle: {
@@ -150,8 +149,31 @@ declare class InputManager {
     getInputs(): PointerInput;
 }
 
+interface Viewport {
+    x: number;
+    y: number;
+    zoom: number;
+}
+declare function createViewport(): Viewport;
+declare function screenToPage(viewport: Viewport, screenX: number, screenY: number): {
+    x: number;
+    y: number;
+};
+declare function pageToScreen(viewport: Viewport, pageX: number, pageY: number): {
+    x: number;
+    y: number;
+};
+declare function setViewport(viewport: Viewport, updater: {
+    x?: number;
+    y?: number;
+    zoom?: number;
+}): Viewport;
+declare function panViewport(viewport: Viewport, dx: number, dy: number): Viewport;
+declare function zoomViewport(viewport: Viewport, factor: number, centerX?: number, centerY?: number): Viewport;
+
 interface IEditor {
     getZoomLevel(): number;
+    readonly viewport: Viewport;
     options: {
         dragDistanceSquared: number;
     };
@@ -181,15 +203,20 @@ interface IEditor {
         fill: FillStyle;
         size: SizeStyle;
     }>): void;
+    setViewport(partial: Partial<Viewport>): void;
     panBy(dx: number, dy: number): void;
 }
 
 interface ToolPointerDownInfo {
     point: Vec3;
+    screenX?: number;
+    screenY?: number;
 }
 interface ToolPointerMoveInfo {
     screenDeltaX?: number;
     screenDeltaY?: number;
+    screenX?: number;
+    screenY?: number;
 }
 interface ToolKeyInfo {
     key: string;
@@ -218,30 +245,26 @@ declare abstract class StateNode {
     onInterrupt(): void;
 }
 
-interface Viewport {
-    x: number;
-    y: number;
-    zoom: number;
-    rotation: number;
-}
-declare function createViewport(): Viewport;
-declare function screenToPage(viewport: Viewport, screenX: number, screenY: number): {
+interface CameraPanSession {
+    initialViewportX: number;
+    initialViewportY: number;
+    originScreenX: number;
+    originScreenY: number;
+    velocityX: number;
+    velocityY: number;
+    previousScreenX: number;
+    previousScreenY: number;
+    lastMoveTime: number;
+}
+declare function beginCameraPan(viewport: Viewport, screenX: number, screenY: number): CameraPanSession;
+declare function moveCameraPan(session: CameraPanSession, currentScreenX: number, currentScreenY: number): {
     x: number;
     y: number;
 };
-declare function pageToScreen(viewport: Viewport, pageX: number, pageY: number): {
-    x: number;
-    y: number;
-};
-declare function setViewport(viewport: Viewport, updater: {
-    x?: number;
-    y?: number;
-    zoom?: number;
-    rotation?: number;
-}): Viewport;
-declare function panViewport(viewport: Viewport, dx: number, dy: number): Viewport;
-declare function zoomViewport(viewport: Viewport, factor: number, centerX?: number, centerY?: number): Viewport;
-declare function rotateViewport(viewport: Viewport, delta: number, centerX?: number, centerY?: number): Viewport;
+interface CameraSlideAnimation {
+    stop: () => void;
+}
+declare function startCameraSlide(session: CameraPanSession, applyPan: (dx: number, dy: number) => void, onFrame: () => void): CameraSlideAnimation | null;
 
 type TsdrawRenderTheme = 'light' | 'dark';
 declare function resolveThemeColor(colorStyle: string, theme: TsdrawRenderTheme): string;
@@ -348,7 +371,6 @@ declare class Editor {
     setViewport(partial: Partial<Viewport>): void;
     panBy(dx: number, dy: number): void;
     zoomAt(factor: number, screenX: number, screenY: number): void;
-    rotateAt(delta: number, screenX: number, screenY: number): void;
     deleteShapes(ids: ShapeId[]): void;
     getDocumentSnapshot(): TsdrawDocumentSnapshot;
     loadDocumentSnapshot(snapshot: TsdrawDocumentSnapshot): void;
@@ -613,8 +635,12 @@ declare class HandIdleState extends StateNode {
 
 declare class HandDraggingState extends StateNode {
     static id: string;
+    private panSession;
+    onEnter(info?: ToolStateTransitionInfo): void;
     onPointerMove(info?: ToolPointerMoveInfo): void;
+    getPanSession(): CameraPanSession | null;
     onPointerUp(): void;
+    onExit(): void;
     onCancel(): void;
     onInterrupt(): void;
 }
@@ -630,4 +656,4 @@ declare function decodePathToPoints(segments: {
     y: number;
 }[];
 
-export { type Bounds, CanvasRenderer, CircleDrawingState, CircleIdleState, type ColorStyle, DEFAULT_COLORS, DRAG_DISTANCE_SQUARED, type DashStyle, type DefaultToolId, DocumentStore, type DocumentStoreSnapshot, type DrawSegment, type DrawShape, ERASER_MARGIN, Editor, type EditorOptions, EraserErasingState, EraserIdleState, EraserPointingState, type FillStyle, HandDraggingState, HandIdleState, type ICanvasRenderer, type IEditor, InputManager, MAX_POINTS_PER_SHAPE, type PageState, PenDrawingState, PenIdleState, type PointerInput, type ResizeHandle, STROKE_WIDTHS, type SegmentType, SelectIdleState, type SelectionBounds, type Shape, type ShapeId, type SizeStyle, SquareDrawingState, SquareIdleState, StateNode, type StateNodeConstructor, type ToolDefinition, type ToolId, type ToolKeyInfo, ToolManager, type ToolPointerDownInfo, type ToolPointerMoveInfo, type ToolStateContext, type ToolStateTransitionInfo, type TransformSnapshot, type TsdrawDocumentSnapshot, type TsdrawEditorSnapshot, type TsdrawHistorySnapshot, type TsdrawPageRecord, type TsdrawPersistedRecord, type TsdrawRenderTheme, type TsdrawSessionStateSnapshot, type TsdrawShapeRecord, type Vec3, type Viewport, applyMove, applyResize, applyRotation, boundsContainPoint, boundsIntersect, boundsOf, buildStartPositions, buildTransformSnapshots, closestOnSegment, createViewport, decodeFirstPoint, decodeLastPoint, decodePathToPoints, decodePoints, distance, documentSnapshotToRecords, encodePoints, getSelectionBoundsPage, getShapeBounds, getShapesInBounds, getTopShapeAtPoint, isSelectTool, minDistanceToPolyline, normalizeSelectionBounds, padBounds, pageToScreen, panViewport, pointHitsShape, recordsToDocumentSnapshot, resolveThemeColor, rotatePoint, rotateViewport, screenToPage, segmentHitsShape, segmentTouchesPolyline, setViewport, shapePagePoints, sqDistance, zoomViewport };
+export { type Bounds, type CameraPanSession, type CameraSlideAnimation, CanvasRenderer, CircleDrawingState, CircleIdleState, type ColorStyle, DEFAULT_COLORS, DRAG_DISTANCE_SQUARED, type DashStyle, type DefaultToolId, DocumentStore, type DocumentStoreSnapshot, type DrawSegment, type DrawShape, ERASER_MARGIN, Editor, type EditorOptions, EraserErasingState, EraserIdleState, EraserPointingState, type FillStyle, HandDraggingState, HandIdleState, type ICanvasRenderer, type IEditor, InputManager, MAX_POINTS_PER_SHAPE, type PageState, PenDrawingState, PenIdleState, type PointerInput, type ResizeHandle, STROKE_WIDTHS, type SegmentType, SelectIdleState, type SelectionBounds, type Shape, type ShapeId, type SizeStyle, SquareDrawingState, SquareIdleState, StateNode, type StateNodeConstructor, type ToolDefinition, type ToolId, type ToolKeyInfo, ToolManager, type ToolPointerDownInfo, type ToolPointerMoveInfo, type ToolStateContext, type ToolStateTransitionInfo, type TransformSnapshot, type TsdrawDocumentSnapshot, type TsdrawEditorSnapshot, type TsdrawHistorySnapshot, type TsdrawPageRecord, type TsdrawPersistedRecord, type TsdrawRenderTheme, type TsdrawSessionStateSnapshot, type TsdrawShapeRecord, type Vec3, type Viewport, applyMove, applyResize, applyRotation, beginCameraPan, boundsContainPoint, boundsIntersect, boundsOf, buildStartPositions, buildTransformSnapshots, closestOnSegment, createViewport, decodeFirstPoint, decodeLastPoint, decodePathToPoints, decodePoints, distance, documentSnapshotToRecords, encodePoints, getSelectionBoundsPage, getShapeBounds, getShapesInBounds, getTopShapeAtPoint, isSelectTool, minDistanceToPolyline, moveCameraPan, normalizeSelectionBounds, padBounds, pageToScreen, panViewport, pointHitsShape, recordsToDocumentSnapshot, resolveThemeColor, rotatePoint, screenToPage, segmentHitsShape, segmentTouchesPolyline, setViewport, shapePagePoints, sqDistance, startCameraSlide, zoomViewport };

package/dist/index.d.ts

@@ -63,7 +63,6 @@ interface TsdrawSessionStateSnapshot {
         x: number;
         y: number;
         zoom: number;
-        rotation?: number;
     };
     currentToolId: string;
     drawStyle: {
@@ -150,8 +149,31 @@ declare class InputManager {
     getInputs(): PointerInput;
 }
 
+interface Viewport {
+    x: number;
+    y: number;
+    zoom: number;
+}
+declare function createViewport(): Viewport;
+declare function screenToPage(viewport: Viewport, screenX: number, screenY: number): {
+    x: number;
+    y: number;
+};
+declare function pageToScreen(viewport: Viewport, pageX: number, pageY: number): {
+    x: number;
+    y: number;
+};
+declare function setViewport(viewport: Viewport, updater: {
+    x?: number;
+    y?: number;
+    zoom?: number;
+}): Viewport;
+declare function panViewport(viewport: Viewport, dx: number, dy: number): Viewport;
+declare function zoomViewport(viewport: Viewport, factor: number, centerX?: number, centerY?: number): Viewport;
+
 interface IEditor {
     getZoomLevel(): number;
+    readonly viewport: Viewport;
     options: {
         dragDistanceSquared: number;
     };
@@ -181,15 +203,20 @@ interface IEditor {
         fill: FillStyle;
         size: SizeStyle;
     }>): void;
+    setViewport(partial: Partial<Viewport>): void;
     panBy(dx: number, dy: number): void;
 }
 
 interface ToolPointerDownInfo {
     point: Vec3;
+    screenX?: number;
+    screenY?: number;
 }
 interface ToolPointerMoveInfo {
     screenDeltaX?: number;
     screenDeltaY?: number;
+    screenX?: number;
+    screenY?: number;
 }
 interface ToolKeyInfo {
     key: string;
@@ -218,30 +245,26 @@ declare abstract class StateNode {
     onInterrupt(): void;
 }
 
-interface Viewport {
-    x: number;
-    y: number;
-    zoom: number;
-    rotation: number;
-}
-declare function createViewport(): Viewport;
-declare function screenToPage(viewport: Viewport, screenX: number, screenY: number): {
+interface CameraPanSession {
+    initialViewportX: number;
+    initialViewportY: number;
+    originScreenX: number;
+    originScreenY: number;
+    velocityX: number;
+    velocityY: number;
+    previousScreenX: number;
+    previousScreenY: number;
+    lastMoveTime: number;
+}
+declare function beginCameraPan(viewport: Viewport, screenX: number, screenY: number): CameraPanSession;
+declare function moveCameraPan(session: CameraPanSession, currentScreenX: number, currentScreenY: number): {
     x: number;
     y: number;
 };
-declare function pageToScreen(viewport: Viewport, pageX: number, pageY: number): {
-    x: number;
-    y: number;
-};
-declare function setViewport(viewport: Viewport, updater: {
-    x?: number;
-    y?: number;
-    zoom?: number;
-    rotation?: number;
-}): Viewport;
-declare function panViewport(viewport: Viewport, dx: number, dy: number): Viewport;
-declare function zoomViewport(viewport: Viewport, factor: number, centerX?: number, centerY?: number): Viewport;
-declare function rotateViewport(viewport: Viewport, delta: number, centerX?: number, centerY?: number): Viewport;
+interface CameraSlideAnimation {
+    stop: () => void;
+}
+declare function startCameraSlide(session: CameraPanSession, applyPan: (dx: number, dy: number) => void, onFrame: () => void): CameraSlideAnimation | null;
 
 type TsdrawRenderTheme = 'light' | 'dark';
 declare function resolveThemeColor(colorStyle: string, theme: TsdrawRenderTheme): string;
@@ -348,7 +371,6 @@ declare class Editor {
     setViewport(partial: Partial<Viewport>): void;
     panBy(dx: number, dy: number): void;
     zoomAt(factor: number, screenX: number, screenY: number): void;
-    rotateAt(delta: number, screenX: number, screenY: number): void;
     deleteShapes(ids: ShapeId[]): void;
     getDocumentSnapshot(): TsdrawDocumentSnapshot;
     loadDocumentSnapshot(snapshot: TsdrawDocumentSnapshot): void;
@@ -613,8 +635,12 @@ declare class HandIdleState extends StateNode {
 
 declare class HandDraggingState extends StateNode {
     static id: string;
+    private panSession;
+    onEnter(info?: ToolStateTransitionInfo): void;
     onPointerMove(info?: ToolPointerMoveInfo): void;
+    getPanSession(): CameraPanSession | null;
     onPointerUp(): void;
+    onExit(): void;
     onCancel(): void;
     onInterrupt(): void;
 }
@@ -630,4 +656,4 @@ declare function decodePathToPoints(segments: {
     y: number;
 }[];
 
-export { type Bounds, CanvasRenderer, CircleDrawingState, CircleIdleState, type ColorStyle, DEFAULT_COLORS, DRAG_DISTANCE_SQUARED, type DashStyle, type DefaultToolId, DocumentStore, type DocumentStoreSnapshot, type DrawSegment, type DrawShape, ERASER_MARGIN, Editor, type EditorOptions, EraserErasingState, EraserIdleState, EraserPointingState, type FillStyle, HandDraggingState, HandIdleState, type ICanvasRenderer, type IEditor, InputManager, MAX_POINTS_PER_SHAPE, type PageState, PenDrawingState, PenIdleState, type PointerInput, type ResizeHandle, STROKE_WIDTHS, type SegmentType, SelectIdleState, type SelectionBounds, type Shape, type ShapeId, type SizeStyle, SquareDrawingState, SquareIdleState, StateNode, type StateNodeConstructor, type ToolDefinition, type ToolId, type ToolKeyInfo, ToolManager, type ToolPointerDownInfo, type ToolPointerMoveInfo, type ToolStateContext, type ToolStateTransitionInfo, type TransformSnapshot, type TsdrawDocumentSnapshot, type TsdrawEditorSnapshot, type TsdrawHistorySnapshot, type TsdrawPageRecord, type TsdrawPersistedRecord, type TsdrawRenderTheme, type TsdrawSessionStateSnapshot, type TsdrawShapeRecord, type Vec3, type Viewport, applyMove, applyResize, applyRotation, boundsContainPoint, boundsIntersect, boundsOf, buildStartPositions, buildTransformSnapshots, closestOnSegment, createViewport, decodeFirstPoint, decodeLastPoint, decodePathToPoints, decodePoints, distance, documentSnapshotToRecords, encodePoints, getSelectionBoundsPage, getShapeBounds, getShapesInBounds, getTopShapeAtPoint, isSelectTool, minDistanceToPolyline, normalizeSelectionBounds, padBounds, pageToScreen, panViewport, pointHitsShape, recordsToDocumentSnapshot, resolveThemeColor, rotatePoint, rotateViewport, screenToPage, segmentHitsShape, segmentTouchesPolyline, setViewport, shapePagePoints, sqDistance, zoomViewport };
+export { type Bounds, type CameraPanSession, type CameraSlideAnimation, CanvasRenderer, CircleDrawingState, CircleIdleState, type ColorStyle, DEFAULT_COLORS, DRAG_DISTANCE_SQUARED, type DashStyle, type DefaultToolId, DocumentStore, type DocumentStoreSnapshot, type DrawSegment, type DrawShape, ERASER_MARGIN, Editor, type EditorOptions, EraserErasingState, EraserIdleState, EraserPointingState, type FillStyle, HandDraggingState, HandIdleState, type ICanvasRenderer, type IEditor, InputManager, MAX_POINTS_PER_SHAPE, type PageState, PenDrawingState, PenIdleState, type PointerInput, type ResizeHandle, STROKE_WIDTHS, type SegmentType, SelectIdleState, type SelectionBounds, type Shape, type ShapeId, type SizeStyle, SquareDrawingState, SquareIdleState, StateNode, type StateNodeConstructor, type ToolDefinition, type ToolId, type ToolKeyInfo, ToolManager, type ToolPointerDownInfo, type ToolPointerMoveInfo, type ToolStateContext, type ToolStateTransitionInfo, type TransformSnapshot, type TsdrawDocumentSnapshot, type TsdrawEditorSnapshot, type TsdrawHistorySnapshot, type TsdrawPageRecord, type TsdrawPersistedRecord, type TsdrawRenderTheme, type TsdrawSessionStateSnapshot, type TsdrawShapeRecord, type Vec3, type Viewport, applyMove, applyResize, applyRotation, beginCameraPan, boundsContainPoint, boundsIntersect, boundsOf, buildStartPositions, buildTransformSnapshots, closestOnSegment, createViewport, decodeFirstPoint, decodeLastPoint, decodePathToPoints, decodePoints, distance, documentSnapshotToRecords, encodePoints, getSelectionBoundsPage, getShapeBounds, getShapesInBounds, getTopShapeAtPoint, isSelectTool, minDistanceToPolyline, moveCameraPan, normalizeSelectionBounds, padBounds, pageToScreen, panViewport, pointHitsShape, recordsToDocumentSnapshot, resolveThemeColor, rotatePoint, screenToPage, segmentHitsShape, segmentTouchesPolyline, setViewport, shapePagePoints, sqDistance, startCameraSlide, zoomViewport };

package/dist/index.js

@@ -223,34 +223,25 @@ var StateNode = class {
 
 // src/canvas/viewport.ts
 function createViewport() {
-  return { x: 0, y: 0, zoom: 1, rotation: 0 };
+  return { x: 0, y: 0, zoom: 1 };
 }
 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: (tx * cos + ty * sin) / viewport.zoom,
-    y: (-tx * sin + ty * cos) / viewport.zoom
+    x: (screenX - viewport.x) / viewport.zoom,
+    y: (screenY - viewport.y) / 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: scaledX * cos - scaledY * sin + viewport.x,
-    y: scaledX * sin + scaledY * cos + viewport.y
+    x: pageX * viewport.zoom + viewport.x,
+    y: pageY * viewport.zoom + viewport.y
   };
 }
 function setViewport(viewport, updater) {
   return {
     x: updater.x ?? viewport.x,
     y: updater.y ?? viewport.y,
-    zoom: updater.zoom ?? viewport.zoom,
-    rotation: updater.rotation ?? viewport.rotation
+    zoom: updater.zoom ?? viewport.zoom
   };
 }
 function panViewport(viewport, dx, dy) {
@@ -262,23 +253,92 @@ function zoomViewport(viewport, factor, centerX, centerY) {
     return { ...viewport, zoom };
   }
   const pageBefore = screenToPage(viewport, centerX, centerY);
-  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 x = centerX - pageBefore.x * zoom;
+  const y = centerY - pageBefore.y * zoom;
+  return { x, y, zoom };
+}
+
+// src/canvas/cameraPan.ts
+var VELOCITY_LERP_FACTOR = 0.5;
+var VELOCITY_ZERO_THRESHOLD = 0.01;
+function beginCameraPan(viewport, screenX, screenY) {
+  return {
+    initialViewportX: viewport.x,
+    initialViewportY: viewport.y,
+    originScreenX: screenX,
+    originScreenY: screenY,
+    velocityX: 0,
+    velocityY: 0,
+    previousScreenX: screenX,
+    previousScreenY: screenY,
+    lastMoveTime: performance.now()
+  };
+}
+function moveCameraPan(session, currentScreenX, currentScreenY) {
+  const now = performance.now();
+  const elapsed = now - session.lastMoveTime;
+  if (elapsed > 0) {
+    const moveDx = currentScreenX - session.previousScreenX;
+    const moveDy = currentScreenY - session.previousScreenY;
+    const moveLen = Math.hypot(moveDx, moveDy);
+    if (moveLen > 0) {
+      const dirX = moveDx / moveLen;
+      const dirY = moveDy / moveLen;
+      const speed = moveLen / elapsed;
+      session.velocityX += (dirX * speed - session.velocityX) * VELOCITY_LERP_FACTOR;
+      session.velocityY += (dirY * speed - session.velocityY) * VELOCITY_LERP_FACTOR;
+    }
+    if (Math.abs(session.velocityX) < VELOCITY_ZERO_THRESHOLD) session.velocityX = 0;
+    if (Math.abs(session.velocityY) < VELOCITY_ZERO_THRESHOLD) session.velocityY = 0;
   }
-  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 };
+  session.previousScreenX = currentScreenX;
+  session.previousScreenY = currentScreenY;
+  session.lastMoveTime = now;
+  return {
+    x: session.initialViewportX + (currentScreenX - session.originScreenX),
+    y: session.initialViewportY + (currentScreenY - session.originScreenY)
+  };
+}
+var SLIDE_FRICTION = 0.92;
+var SLIDE_MIN_SPEED = 0.01;
+var SLIDE_MAX_SPEED = 2;
+var SLIDE_MIN_VELOCITY_TO_START = 0.1;
+function startCameraSlide(session, applyPan, onFrame) {
+  const timeSinceLastMove = performance.now() - session.lastMoveTime;
+  const FRAME_DURATION = 16;
+  const decayFactor = Math.pow(1 - VELOCITY_LERP_FACTOR, timeSinceLastMove / FRAME_DURATION);
+  const effectiveVx = session.velocityX * decayFactor;
+  const effectiveVy = session.velocityY * decayFactor;
+  const speed = Math.hypot(effectiveVx, effectiveVy);
+  const clampedSpeed = Math.min(speed, SLIDE_MAX_SPEED);
+  if (clampedSpeed < SLIDE_MIN_VELOCITY_TO_START) return null;
+  const dirX = effectiveVx / speed;
+  const dirY = effectiveVy / speed;
+  let currentSpeed = clampedSpeed;
+  let lastTime = performance.now();
+  let rafId = 0;
+  const tick = () => {
+    const now = performance.now();
+    const elapsed = now - lastTime;
+    lastTime = now;
+    applyPan(dirX * currentSpeed * elapsed, dirY * currentSpeed * elapsed);
+    onFrame();
+    currentSpeed *= SLIDE_FRICTION;
+    if (currentSpeed < SLIDE_MIN_SPEED) {
+      rafId = 0;
+      return;
+    }
+    rafId = requestAnimationFrame(tick);
+  };
+  rafId = requestAnimationFrame(tick);
+  return {
+    stop() {
+      if (rafId !== 0) {
+        cancelAnimationFrame(rafId);
+        rafId = 0;
+      }
+    }
+  };
 }
 
 // src/utils/colors.ts
@@ -311,7 +371,6 @@ 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") {
@@ -804,7 +863,7 @@ var PenDrawingState = class extends StateNode {
     const z = this._startInfo?.point?.z ?? 0.5;
     this._isPenDevice = penActive;
     this._hasPressure = penActive || z !== 0.5;
-    const pressure = this._hasPressure ? toFixed(z) : 0.5;
+    const pressure = this._hasPressure ? toFixed(z * 1.25) : 0.5;
     this._phase = inputs.getShiftKey() ? "straight" : "free";
     this._extending = false;
     this._lastSample = { ...origin };
@@ -901,13 +960,12 @@ var PenDrawingState = class extends StateNode {
     const curPt = inputs.getCurrentPagePoint();
     if (!this._hasPressure) {
       const liveZ = curPt.z ?? 0.5;
-      if (liveZ !== 0.5 || inputs.getIsPen()) {
+      if (liveZ > 0 && 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) : 0.5;
+    const pressure = this._hasPressure ? toFixed((curPt.z ?? 0.5) * 1.25) : 0.5;
     const pt = { x: toFixed(local.x), y: toFixed(local.y), z: pressure };
     switch (this._phase) {
       case "starting_straight": {
@@ -1053,7 +1111,7 @@ var PenDrawingState = class extends StateNode {
           const firstPt = {
             x: 0,
             y: 0,
-            z: this._hasPressure ? toFixed(curPage.z ?? 0.5) : 0.5
+            z: this._hasPressure ? toFixed((curPage.z ?? 0.5) * 1.25) : 0.5
           };
           this._activePts = [firstPt];
           this.editor.createShape({
@@ -1085,7 +1143,7 @@ var PenDrawingState = class extends StateNode {
   endStroke() {
     if (!this._target) return;
     this.editor.updateShapes([
-      { id: this._target.id, type: "draw", props: { isComplete: true } }
+      { id: this._target.id, type: "draw", props: { isComplete: true, isPen: this._hasPressure } }
     ]);
     this.ctx.transition("pen_idle");
   }
@@ -1515,16 +1573,29 @@ var HandIdleState = class extends StateNode {
 // src/tools/hand/states/HandDraggingState.ts
 var HandDraggingState = class extends StateNode {
   static id = "hand_dragging";
+  panSession = null;
+  onEnter(info) {
+    const downInfo = info;
+    const screenX = downInfo?.screenX ?? 0;
+    const screenY = downInfo?.screenY ?? 0;
+    this.panSession = beginCameraPan(this.editor.viewport, screenX, screenY);
+  }
   onPointerMove(info) {
-    const move = info ?? {};
-    const dx = move.screenDeltaX ?? 0;
-    const dy = move.screenDeltaY ?? 0;
-    if (dx === 0 && dy === 0) return;
-    this.editor.panBy(dx, dy);
+    if (!this.panSession) return;
+    const screenX = info?.screenX ?? 0;
+    const screenY = info?.screenY ?? 0;
+    const target = moveCameraPan(this.panSession, screenX, screenY);
+    this.editor.setViewport({ x: target.x, y: target.y });
+  }
+  getPanSession() {
+    return this.panSession;
   }
   onPointerUp() {
     this.ctx.transition("hand_idle");
   }
+  onExit() {
+    this.panSession = null;
+  }
   onCancel() {
     this.ctx.transition("hand_idle");
   }
@@ -1752,8 +1823,7 @@ 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)),
-      rotation: partial.rotation ?? this.viewport.rotation
+      zoom: Math.max(0.1, Math.min(4, rawZoom))
     };
     this.emitChange();
   }
@@ -1767,10 +1837,6 @@ var Editor = class {
     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);
@@ -1793,8 +1859,7 @@ var Editor = class {
       viewport: {
         x: this.viewport.x,
         y: this.viewport.y,
-        zoom: this.viewport.zoom,
-        rotation: this.viewport.rotation
+        zoom: this.viewport.zoom
       },
       currentToolId: this.getCurrentToolId(),
       drawStyle: this.getCurrentDrawStyle(),
@@ -1802,10 +1867,7 @@ var Editor = class {
     };
   }
   loadSessionStateSnapshot(snapshot) {
-    this.setViewport({
-      ...snapshot.viewport,
-      rotation: snapshot.viewport.rotation ?? 0
-    });
+    this.setViewport(snapshot.viewport);
     this.setCurrentDrawStyle({
       color: snapshot.drawStyle.color,
       dash: snapshot.drawStyle.dash,
@@ -2192,6 +2254,6 @@ function applyResize(editor, handle, startBounds, startShapes, pointer, lockAspe
   }
 }
 
-export { CanvasRenderer, CircleDrawingState, CircleIdleState, DEFAULT_COLORS, DRAG_DISTANCE_SQUARED, DocumentStore, ERASER_MARGIN, Editor, EraserErasingState, EraserIdleState, EraserPointingState, HandDraggingState, HandIdleState, InputManager, MAX_POINTS_PER_SHAPE, PenDrawingState, PenIdleState, STROKE_WIDTHS, SelectIdleState, SquareDrawingState, SquareIdleState, StateNode, ToolManager, applyMove, applyResize, applyRotation, boundsContainPoint, boundsIntersect, boundsOf, buildStartPositions, buildTransformSnapshots, closestOnSegment, createViewport, decodeFirstPoint, decodeLastPoint, decodePathToPoints, decodePoints, distance, documentSnapshotToRecords, encodePoints, getSelectionBoundsPage, getShapeBounds2 as getShapeBounds, getShapesInBounds, getTopShapeAtPoint, isSelectTool, minDistanceToPolyline, normalizeSelectionBounds, padBounds, pageToScreen, panViewport, pointHitsShape, recordsToDocumentSnapshot, resolveThemeColor, rotatePoint, rotateViewport, screenToPage, segmentHitsShape, segmentTouchesPolyline, setViewport, shapePagePoints, sqDistance, zoomViewport };
+export { CanvasRenderer, CircleDrawingState, CircleIdleState, DEFAULT_COLORS, DRAG_DISTANCE_SQUARED, DocumentStore, ERASER_MARGIN, Editor, EraserErasingState, EraserIdleState, EraserPointingState, HandDraggingState, HandIdleState, InputManager, MAX_POINTS_PER_SHAPE, PenDrawingState, PenIdleState, STROKE_WIDTHS, SelectIdleState, SquareDrawingState, SquareIdleState, StateNode, ToolManager, applyMove, applyResize, applyRotation, beginCameraPan, boundsContainPoint, boundsIntersect, boundsOf, buildStartPositions, buildTransformSnapshots, closestOnSegment, createViewport, decodeFirstPoint, decodeLastPoint, decodePathToPoints, decodePoints, distance, documentSnapshotToRecords, encodePoints, getSelectionBoundsPage, getShapeBounds2 as getShapeBounds, getShapesInBounds, getTopShapeAtPoint, isSelectTool, minDistanceToPolyline, moveCameraPan, normalizeSelectionBounds, padBounds, pageToScreen, panViewport, pointHitsShape, recordsToDocumentSnapshot, resolveThemeColor, rotatePoint, screenToPage, segmentHitsShape, segmentTouchesPolyline, setViewport, shapePagePoints, sqDistance, startCameraSlide, zoomViewport };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map