@tsdraw/core 0.8.3 → 0.8.5

package/dist/index.d.cts

@@ -149,8 +149,37 @@ 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;
+interface ZoomRange {
+    min: number;
+    max: number;
+}
+declare const DEFAULT_ZOOM_RANGE: ZoomRange;
+declare function clampZoom(zoom: number, range?: ZoomRange): number;
+declare function zoomViewport(viewport: Viewport, factor: number, centerX?: number, centerY?: number, zoomRange?: ZoomRange): Viewport;
+
 interface IEditor {
     getZoomLevel(): number;
+    readonly viewport: Viewport;
     options: {
         dragDistanceSquared: number;
     };
@@ -180,15 +209,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 +251,29 @@ 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;
+}
+interface CameraSlideOptions {
+    friction?: number;
+}
+declare function startCameraSlide(session: CameraPanSession, applyPan: (dx: number, dy: number) => void, onFrame: () => void, slideOptions?: CameraSlideOptions): CameraSlideAnimation | null;
 
 type TsdrawRenderTheme = 'light' | 'dark';
 declare function resolveThemeColor(colorStyle: string, theme: TsdrawRenderTheme): string;
@@ -286,6 +322,7 @@ interface EditorOptions {
     dragDistanceSquared?: number;
     toolDefinitions?: ToolDefinition[];
     initialToolId?: ToolId;
+    zoomRange?: ZoomRange;
 }
 type EditorListener = () => void;
 declare class Editor {
@@ -296,6 +333,7 @@ declare class Editor {
     viewport: Viewport;
     readonly options: {
         dragDistanceSquared: number;
+        zoomRange?: ZoomRange;
     };
     private drawStyle;
     private readonly toolStateContext;
@@ -608,8 +646,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 +667,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, type CameraSlideOptions, CanvasRenderer, CircleDrawingState, CircleIdleState, type ColorStyle, DEFAULT_COLORS, DEFAULT_ZOOM_RANGE, 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, type ZoomRange, applyMove, applyResize, applyRotation, beginCameraPan, boundsContainPoint, boundsIntersect, boundsOf, buildStartPositions, buildTransformSnapshots, clampZoom, 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,37 @@ 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;
+interface ZoomRange {
+    min: number;
+    max: number;
+}
+declare const DEFAULT_ZOOM_RANGE: ZoomRange;
+declare function clampZoom(zoom: number, range?: ZoomRange): number;
+declare function zoomViewport(viewport: Viewport, factor: number, centerX?: number, centerY?: number, zoomRange?: ZoomRange): Viewport;
+
 interface IEditor {
     getZoomLevel(): number;
+    readonly viewport: Viewport;
     options: {
         dragDistanceSquared: number;
     };
@@ -180,15 +209,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 +251,29 @@ 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;
+}
+interface CameraSlideOptions {
+    friction?: number;
+}
+declare function startCameraSlide(session: CameraPanSession, applyPan: (dx: number, dy: number) => void, onFrame: () => void, slideOptions?: CameraSlideOptions): CameraSlideAnimation | null;
 
 type TsdrawRenderTheme = 'light' | 'dark';
 declare function resolveThemeColor(colorStyle: string, theme: TsdrawRenderTheme): string;
@@ -286,6 +322,7 @@ interface EditorOptions {
     dragDistanceSquared?: number;
     toolDefinitions?: ToolDefinition[];
     initialToolId?: ToolId;
+    zoomRange?: ZoomRange;
 }
 type EditorListener = () => void;
 declare class Editor {
@@ -296,6 +333,7 @@ declare class Editor {
     viewport: Viewport;
     readonly options: {
         dragDistanceSquared: number;
+        zoomRange?: ZoomRange;
     };
     private drawStyle;
     private readonly toolStateContext;
@@ -608,8 +646,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 +667,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, type CameraSlideOptions, CanvasRenderer, CircleDrawingState, CircleIdleState, type ColorStyle, DEFAULT_COLORS, DEFAULT_ZOOM_RANGE, 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, type ZoomRange, applyMove, applyResize, applyRotation, beginCameraPan, boundsContainPoint, boundsIntersect, boundsOf, buildStartPositions, buildTransformSnapshots, clampZoom, 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

@@ -247,8 +247,13 @@ function setViewport(viewport, updater) {
 function panViewport(viewport, dx, dy) {
   return { ...viewport, x: viewport.x + dx, y: viewport.y + dy };
 }
-function zoomViewport(viewport, factor, centerX, centerY) {
-  const zoom = Math.max(0.1, Math.min(4, viewport.zoom * factor));
+var DEFAULT_ZOOM_RANGE = { min: 0.1, max: 4 };
+function clampZoom(zoom, range) {
+  const { min, max } = range ?? DEFAULT_ZOOM_RANGE;
+  return Math.max(min, Math.min(max, zoom));
+}
+function zoomViewport(viewport, factor, centerX, centerY, zoomRange) {
+  const zoom = clampZoom(viewport.zoom * factor, zoomRange);
   if (centerX == null || centerY == null) {
     return { ...viewport, zoom };
   }
@@ -258,6 +263,90 @@ 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, slideOptions) {
+  const friction = slideOptions?.friction ?? SLIDE_FRICTION;
+  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 *= 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 +1579,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");
   }
@@ -1613,7 +1715,7 @@ var Editor = class {
   historyBatchChanged = false;
   // Creates a new editor instance with the given options (with defaults if not provided)
   constructor(opts = {}) {
-    this.options = { dragDistanceSquared: opts.dragDistanceSquared ?? DRAG_DISTANCE_SQUARED };
+    this.options = { dragDistanceSquared: opts.dragDistanceSquared ?? DRAG_DISTANCE_SQUARED, zoomRange: opts.zoomRange };
     this.lastDocumentSnapshot = this.getDocumentSnapshot();
     this.store.listen(() => {
       this.captureDocumentHistory();
@@ -1727,7 +1829,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))
+      zoom: clampZoom(rawZoom, this.options.zoomRange)
     };
     this.emitChange();
   }
@@ -1738,7 +1840,7 @@ var Editor = class {
     });
   }
   zoomAt(factor, screenX, screenY) {
-    this.viewport = zoomViewport(this.viewport, factor, screenX, screenY);
+    this.viewport = zoomViewport(this.viewport, factor, screenX, screenY, this.options.zoomRange);
     this.emitChange();
   }
   deleteShapes(ids) {
@@ -2158,6 +2260,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, DEFAULT_ZOOM_RANGE, 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, clampZoom, 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