@tsdraw/core 0.8.4 → 0.9.0

package/dist/index.cjs

@@ -249,8 +249,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 };
   }
@@ -305,7 +310,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);
@@ -325,7 +331,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;
@@ -366,9 +372,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();
@@ -386,7 +395,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);
@@ -452,7 +461,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;
@@ -548,6 +557,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 };
@@ -1711,7 +1816,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();
@@ -1825,7 +1930,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();
   }
@@ -1836,7 +1941,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) {
@@ -2260,6 +2365,7 @@ exports.CanvasRenderer = CanvasRenderer;
 exports.CircleDrawingState = CircleDrawingState;
 exports.CircleIdleState = CircleIdleState;
 exports.DEFAULT_COLORS = DEFAULT_COLORS;
+exports.DEFAULT_ZOOM_RANGE = DEFAULT_ZOOM_RANGE;
 exports.DRAG_DISTANCE_SQUARED = DRAG_DISTANCE_SQUARED;
 exports.DocumentStore = DocumentStore;
 exports.ERASER_MARGIN = ERASER_MARGIN;
@@ -2288,6 +2394,7 @@ exports.boundsIntersect = boundsIntersect;
 exports.boundsOf = boundsOf;
 exports.buildStartPositions = buildStartPositions;
 exports.buildTransformSnapshots = buildTransformSnapshots;
+exports.clampZoom = clampZoom;
 exports.closestOnSegment = closestOnSegment;
 exports.createViewport = createViewport;
 exports.decodeFirstPoint = decodeFirstPoint;
@@ -2310,6 +2417,7 @@ exports.pageToScreen = pageToScreen;
 exports.panViewport = panViewport;
 exports.pointHitsShape = pointHitsShape;
 exports.recordsToDocumentSnapshot = recordsToDocumentSnapshot;
+exports.renderCanvasBackground = renderCanvasBackground;
 exports.resolveThemeColor = resolveThemeColor;
 exports.rotatePoint = rotatePoint;
 exports.screenToPage = screenToPage;