@tsdraw/core 0.8.5 → 0.9.0

package/dist/index.d.cts

@@ -282,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;
@@ -290,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 {
@@ -667,4 +684,4 @@ declare function decodePathToPoints(segments: {
     y: number;
 }[];
 
-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 };
+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

@@ -282,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;
@@ -290,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 {
@@ -667,4 +684,4 @@ declare function decodePathToPoints(segments: {
     y: number;
 }[];
 
-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 };
+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

@@ -370,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();
@@ -390,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);
@@ -456,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;
@@ -552,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 };
@@ -2260,6 +2359,6 @@ function applyResize(editor, handle, startBounds, startShapes, pointer, lockAspe
   }
 }
 
-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 };
+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