@tsdraw/core 0.8.3 → 0.8.5

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 };
   }
@@ -260,6 +265,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",
@@ -1492,16 +1581,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");
   }
@@ -1615,7 +1717,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();
@@ -1729,7 +1831,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();
   }
@@ -1740,7 +1842,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) {
@@ -2164,6 +2266,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;
@@ -2186,11 +2289,13 @@ exports.ToolManager = ToolManager;
 exports.applyMove = applyMove;
 exports.applyResize = applyResize;
 exports.applyRotation = applyRotation;
+exports.beginCameraPan = beginCameraPan;
 exports.boundsContainPoint = boundsContainPoint;
 exports.boundsIntersect = boundsIntersect;
 exports.boundsOf = boundsOf;
 exports.buildStartPositions = buildStartPositions;
 exports.buildTransformSnapshots = buildTransformSnapshots;
+exports.clampZoom = clampZoom;
 exports.closestOnSegment = closestOnSegment;
 exports.createViewport = createViewport;
 exports.decodeFirstPoint = decodeFirstPoint;
@@ -2206,6 +2311,7 @@ exports.getShapesInBounds = getShapesInBounds;
 exports.getTopShapeAtPoint = getTopShapeAtPoint;
 exports.isSelectTool = isSelectTool;
 exports.minDistanceToPolyline = minDistanceToPolyline;
+exports.moveCameraPan = moveCameraPan;
 exports.normalizeSelectionBounds = normalizeSelectionBounds;
 exports.padBounds = padBounds;
 exports.pageToScreen = pageToScreen;
@@ -2220,6 +2326,7 @@ exports.segmentTouchesPolyline = segmentTouchesPolyline;
 exports.setViewport = setViewport;
 exports.shapePagePoints = shapePagePoints;
 exports.sqDistance = sqDistance;
+exports.startCameraSlide = startCameraSlide;
 exports.zoomViewport = zoomViewport;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map