@tsdraw/core 0.8.4 → 0.9.0

package/dist/index.d.cts

@@ -169,7 +169,13 @@ declare function setViewport(viewport: Viewport, updater: {
     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 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;
@@ -264,7 +270,10 @@ declare function moveCameraPan(session: CameraPanSession, currentScreenX: number
 interface CameraSlideAnimation {
     stop: () => void;
 }
-declare function startCameraSlide(session: CameraPanSession, applyPan: (dx: number, dy: number) => void, onFrame: () => void): CameraSlideAnimation | null;
+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;
@@ -273,7 +282,8 @@ interface ICanvasRenderer {
     render(ctx: CanvasRenderingContext2D, viewport: Viewport, shapes: Shape[]): void;
 }
 declare class CanvasRenderer implements ICanvasRenderer {
-    private theme;
+    private _theme;
+    get theme(): TsdrawRenderTheme;
     setTheme(theme: TsdrawRenderTheme): void;
     render(ctx: CanvasRenderingContext2D, viewport: Viewport, shapes: Shape[]): void;
     private paintStroke;
@@ -281,6 +291,22 @@ declare class CanvasRenderer implements ICanvasRenderer {
     private paintClosedShapeFill;
 }
 
+type TsdrawBackgroundType = 'blank' | 'lines' | 'grid' | 'dots';
+interface TsdrawBackgroundPreset {
+    type: TsdrawBackgroundType;
+    color?: string;
+    colorDark?: string;
+    spacing?: number;
+    size?: number;
+    opacity?: number;
+}
+interface TsdrawBackgroundCustom {
+    type: 'custom';
+    render: (ctx: CanvasRenderingContext2D, viewport: Viewport, canvasWidth: number, canvasHeight: number) => void;
+}
+type TsdrawBackgroundOptions = TsdrawBackgroundPreset | TsdrawBackgroundCustom;
+declare function renderCanvasBackground(ctx: CanvasRenderingContext2D, viewport: Viewport, canvasWidth: number, canvasHeight: number, options: TsdrawBackgroundOptions | undefined, theme: TsdrawRenderTheme): void;
+
 type DefaultToolId = 'pen' | 'eraser' | 'select' | 'hand' | 'square' | 'circle';
 type ToolId = DefaultToolId | (string & {});
 interface ToolDefinition {
@@ -313,6 +339,7 @@ interface EditorOptions {
     dragDistanceSquared?: number;
     toolDefinitions?: ToolDefinition[];
     initialToolId?: ToolId;
+    zoomRange?: ZoomRange;
 }
 type EditorListener = () => void;
 declare class Editor {
@@ -323,6 +350,7 @@ declare class Editor {
     viewport: Viewport;
     readonly options: {
         dragDistanceSquared: number;
+        zoomRange?: ZoomRange;
     };
     private drawStyle;
     private readonly toolStateContext;
@@ -656,4 +684,4 @@ declare function decodePathToPoints(segments: {
     y: number;
 }[];
 
-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 };
+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 TsdrawBackgroundCustom, type TsdrawBackgroundOptions, type TsdrawBackgroundPreset, type TsdrawBackgroundType, 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, renderCanvasBackground, resolveThemeColor, rotatePoint, screenToPage, segmentHitsShape, segmentTouchesPolyline, setViewport, shapePagePoints, sqDistance, startCameraSlide, zoomViewport };

package/dist/index.d.ts

@@ -169,7 +169,13 @@ declare function setViewport(viewport: Viewport, updater: {
     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 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;
@@ -264,7 +270,10 @@ declare function moveCameraPan(session: CameraPanSession, currentScreenX: number
 interface CameraSlideAnimation {
     stop: () => void;
 }
-declare function startCameraSlide(session: CameraPanSession, applyPan: (dx: number, dy: number) => void, onFrame: () => void): CameraSlideAnimation | null;
+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;
@@ -273,7 +282,8 @@ interface ICanvasRenderer {
     render(ctx: CanvasRenderingContext2D, viewport: Viewport, shapes: Shape[]): void;
 }
 declare class CanvasRenderer implements ICanvasRenderer {
-    private theme;
+    private _theme;
+    get theme(): TsdrawRenderTheme;
     setTheme(theme: TsdrawRenderTheme): void;
     render(ctx: CanvasRenderingContext2D, viewport: Viewport, shapes: Shape[]): void;
     private paintStroke;
@@ -281,6 +291,22 @@ declare class CanvasRenderer implements ICanvasRenderer {
     private paintClosedShapeFill;
 }
 
+type TsdrawBackgroundType = 'blank' | 'lines' | 'grid' | 'dots';
+interface TsdrawBackgroundPreset {
+    type: TsdrawBackgroundType;
+    color?: string;
+    colorDark?: string;
+    spacing?: number;
+    size?: number;
+    opacity?: number;
+}
+interface TsdrawBackgroundCustom {
+    type: 'custom';
+    render: (ctx: CanvasRenderingContext2D, viewport: Viewport, canvasWidth: number, canvasHeight: number) => void;
+}
+type TsdrawBackgroundOptions = TsdrawBackgroundPreset | TsdrawBackgroundCustom;
+declare function renderCanvasBackground(ctx: CanvasRenderingContext2D, viewport: Viewport, canvasWidth: number, canvasHeight: number, options: TsdrawBackgroundOptions | undefined, theme: TsdrawRenderTheme): void;
+
 type DefaultToolId = 'pen' | 'eraser' | 'select' | 'hand' | 'square' | 'circle';
 type ToolId = DefaultToolId | (string & {});
 interface ToolDefinition {
@@ -313,6 +339,7 @@ interface EditorOptions {
     dragDistanceSquared?: number;
     toolDefinitions?: ToolDefinition[];
     initialToolId?: ToolId;
+    zoomRange?: ZoomRange;
 }
 type EditorListener = () => void;
 declare class Editor {
@@ -323,6 +350,7 @@ declare class Editor {
     viewport: Viewport;
     readonly options: {
         dragDistanceSquared: number;
+        zoomRange?: ZoomRange;
     };
     private drawStyle;
     private readonly toolStateContext;
@@ -656,4 +684,4 @@ declare function decodePathToPoints(segments: {
     y: number;
 }[];
 
-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 };
+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 TsdrawBackgroundCustom, type TsdrawBackgroundOptions, type TsdrawBackgroundPreset, type TsdrawBackgroundType, 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, renderCanvasBackground, 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 };
   }
@@ -303,7 +308,8 @@ 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) {
+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);
@@ -323,7 +329,7 @@ function startCameraSlide(session, applyPan, onFrame) {
     lastTime = now;
     applyPan(dirX * currentSpeed * elapsed, dirY * currentSpeed * elapsed);
     onFrame();
-    currentSpeed *= SLIDE_FRICTION;
+    currentSpeed *= friction;
     if (currentSpeed < SLIDE_MIN_SPEED) {
       rafId = 0;
       return;
@@ -364,9 +370,12 @@ function resolveThemeColor(colorStyle, theme) {
   return DARK_COLORS[colorStyle] ?? lightThemeColor;
 }
 var CanvasRenderer = class {
-  theme = "light";
+  _theme = "light";
+  get theme() {
+    return this._theme;
+  }
   setTheme(theme) {
-    this.theme = theme;
+    this._theme = theme;
   }
   render(ctx, viewport, shapes) {
     ctx.save();
@@ -384,7 +393,7 @@ var CanvasRenderer = class {
     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 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);
@@ -450,7 +459,7 @@ var CanvasRenderer = class {
       ctx.fillStyle = color;
       ctx.globalAlpha = 0.55;
     } else if (fillStyle === "none") {
-      ctx.fillStyle = this.theme === "dark" ? "#0f0f0f" : "#fafafa";
+      ctx.fillStyle = this._theme === "dark" ? "#0f0f0f" : "#fafafa";
       ctx.globalAlpha = 1;
     } else {
       ctx.fillStyle = color;
@@ -546,6 +555,102 @@ function getLineDash(dash, width) {
   }
 }
 
+// src/canvas/backgroundRenderer.ts
+var DEFAULT_SPACING = 20;
+var DEFAULT_LINE_WIDTH = 0.5;
+var DEFAULT_DOT_RADIUS = 1;
+var DEFAULT_OPACITY = 0.25;
+function resolvePresetPatternColor(colorLight, colorDark, theme) {
+  if (theme === "dark") return colorDark ?? colorLight ?? "#888888";
+  return colorLight ?? "#c0c0c0";
+}
+function visiblePageRect(viewport, canvasWidth, canvasHeight) {
+  return {
+    minX: (0 - viewport.x) / viewport.zoom,
+    minY: (0 - viewport.y) / viewport.zoom,
+    maxX: (canvasWidth - viewport.x) / viewport.zoom,
+    maxY: (canvasHeight - viewport.y) / viewport.zoom
+  };
+}
+function drawHorizontalLines(ctx, visible, spacing, lineWidth, color, opacity) {
+  const startY = Math.floor(visible.minY / spacing) * spacing;
+  ctx.save();
+  ctx.strokeStyle = color;
+  ctx.lineWidth = lineWidth / ctx.getTransform().a;
+  ctx.globalAlpha = opacity;
+  ctx.beginPath();
+  for (let y = startY; y <= visible.maxY; y += spacing) {
+    ctx.moveTo(visible.minX, y);
+    ctx.lineTo(visible.maxX, y);
+  }
+  ctx.stroke();
+  ctx.restore();
+}
+function drawGridLines(ctx, visible, spacing, lineWidth, color, opacity) {
+  const startX = Math.floor(visible.minX / spacing) * spacing;
+  const startY = Math.floor(visible.minY / spacing) * spacing;
+  const compensatedWidth = lineWidth / ctx.getTransform().a;
+  ctx.save();
+  ctx.strokeStyle = color;
+  ctx.lineWidth = compensatedWidth;
+  ctx.globalAlpha = opacity;
+  ctx.beginPath();
+  for (let x = startX; x <= visible.maxX; x += spacing) {
+    ctx.moveTo(x, visible.minY);
+    ctx.lineTo(x, visible.maxY);
+  }
+  for (let y = startY; y <= visible.maxY; y += spacing) {
+    ctx.moveTo(visible.minX, y);
+    ctx.lineTo(visible.maxX, y);
+  }
+  ctx.stroke();
+  ctx.restore();
+}
+function drawDotPattern(ctx, visible, spacing, dotRadius, color, opacity) {
+  const startX = Math.floor(visible.minX / spacing) * spacing;
+  const startY = Math.floor(visible.minY / spacing) * spacing;
+  const compensatedRadius = dotRadius / ctx.getTransform().a;
+  ctx.save();
+  ctx.fillStyle = color;
+  ctx.globalAlpha = opacity;
+  ctx.beginPath();
+  for (let x = startX; x <= visible.maxX; x += spacing) {
+    for (let y = startY; y <= visible.maxY; y += spacing) {
+      ctx.moveTo(x + compensatedRadius, y);
+      ctx.arc(x, y, compensatedRadius, 0, Math.PI * 2);
+    }
+  }
+  ctx.fill();
+  ctx.restore();
+}
+function renderCanvasBackground(ctx, viewport, canvasWidth, canvasHeight, options, theme) {
+  if (!options || options.type === "blank") return;
+  if (options.type === "custom") {
+    options.render(ctx, viewport, canvasWidth, canvasHeight);
+    return;
+  }
+  const spacing = options.spacing ?? DEFAULT_SPACING;
+  if (spacing <= 0) return;
+  const color = resolvePresetPatternColor(options.color, options.colorDark, theme);
+  const opacity = options.opacity ?? DEFAULT_OPACITY;
+  const visible = visiblePageRect(viewport, canvasWidth, canvasHeight);
+  ctx.save();
+  ctx.translate(viewport.x, viewport.y);
+  ctx.scale(viewport.zoom, viewport.zoom);
+  switch (options.type) {
+    case "lines":
+      drawHorizontalLines(ctx, visible, spacing, options.size ?? DEFAULT_LINE_WIDTH, color, opacity);
+      break;
+    case "grid":
+      drawGridLines(ctx, visible, spacing, options.size ?? DEFAULT_LINE_WIDTH, color, opacity);
+      break;
+    case "dots":
+      drawDotPattern(ctx, visible, spacing, options.size ?? DEFAULT_DOT_RADIUS, color, opacity);
+      break;
+  }
+  ctx.restore();
+}
+
 // src/input/inputManager.ts
 var InputManager = class {
   _current = { x: 0, y: 0 };
@@ -1709,7 +1814,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();
@@ -1823,7 +1928,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();
   }
@@ -1834,7 +1939,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) {
@@ -2254,6 +2359,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, 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 };
+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, renderCanvasBackground, resolveThemeColor, rotatePoint, screenToPage, segmentHitsShape, segmentTouchesPolyline, setViewport, shapePagePoints, sqDistance, startCameraSlide, zoomViewport };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map