@tsdraw/core 0.8.3 → 0.8.4

package/dist/index.d.cts

@@ -149,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;
     };
@@ -180,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;
@@ -217,27 +245,26 @@ declare abstract class StateNode {
     onInterrupt(): void;
 }
 
-interface Viewport {
-    x: number;
-    y: number;
-    zoom: 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;
-}): Viewport;
-declare function panViewport(viewport: Viewport, dx: number, dy: number): Viewport;
-declare function zoomViewport(viewport: Viewport, factor: 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;
@@ -608,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;
 }
@@ -625,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, 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

@@ -149,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;
     };
@@ -180,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;
@@ -217,27 +245,26 @@ declare abstract class StateNode {
     onInterrupt(): void;
 }
 
-interface Viewport {
-    x: number;
-    y: number;
-    zoom: 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;
-}): Viewport;
-declare function panViewport(viewport: Viewport, dx: number, dy: number): Viewport;
-declare function zoomViewport(viewport: Viewport, factor: 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;
@@ -608,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;
 }
@@ -625,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, 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

@@ -258,6 +258,89 @@ function zoomViewport(viewport, factor, centerX, centerY) {
   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;
+  }
+  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
 var DARK_COLORS = {
   black: "#f0f0f0",
@@ -1490,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");
   }
@@ -2158,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, 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