sketchmark 1.3.0 → 1.3.2

package/README.md

@@ -149,7 +149,7 @@ const embed = new SketchmarkEmbed({
 });
 ```
 
-Use `SketchmarkCanvas` for the full playground-style surface, and `SketchmarkEmbed` for fixed-size embeds that clip overflow, auto-fit large diagrams, and expose built-in zoom, playback, caption, and TTS controls.
+Use `SketchmarkCanvas` for the full playground-style surface, and `SketchmarkEmbed` for fixed-size embeds that clip overflow, auto-fit large diagrams, support drag-to-pan plus wheel/trackpad zoom, and expose built-in zoom, playback, caption, and TTS controls.
 
 ---
 

package/dist/index.cjs

@@ -12656,6 +12656,12 @@ const EMBED_CSS = `
   overflow: hidden;
   min-height: 0;
   background: inherit;
+  cursor: grab;
+  touch-action: none;
+}
+
+.skm-embed__viewport.is-panning {
+  cursor: grabbing;
 }
 
 .skm-embed__world {
@@ -12786,6 +12792,83 @@ class SketchmarkEmbed {
         this.autoFitEnabled = true;
         this.motionFrame = null;
         this.resizeObserver = null;
+        this.isPanning = false;
+        this.panMoved = false;
+        this.activePointerId = null;
+        this.lastPointerX = 0;
+        this.lastPointerY = 0;
+        this.suppressClickUntil = 0;
+        this.onPointerDown = (event) => {
+            if (event.button !== 0 && event.button !== 1)
+                return;
+            this.isPanning = true;
+            this.panMoved = false;
+            this.activePointerId = event.pointerId;
+            this.lastPointerX = event.clientX;
+            this.lastPointerY = event.clientY;
+            try {
+                this.viewport.setPointerCapture(event.pointerId);
+            }
+            catch {
+                // Ignore pointer capture failures.
+            }
+        };
+        this.onPointerMove = (event) => {
+            if (!this.isPanning)
+                return;
+            if (this.activePointerId !== null && event.pointerId !== this.activePointerId)
+                return;
+            const dx = event.clientX - this.lastPointerX;
+            const dy = event.clientY - this.lastPointerY;
+            if (!this.panMoved && Math.abs(dx) + Math.abs(dy) > 4) {
+                this.panMoved = true;
+                this.viewport.classList.add("is-panning");
+            }
+            if (this.panMoved) {
+                this.stopMotion();
+                this.autoFitEnabled = false;
+                this.offsetX += dx;
+                this.offsetY += dy;
+                this.applyTransform();
+                this.syncViewControls();
+            }
+            this.lastPointerX = event.clientX;
+            this.lastPointerY = event.clientY;
+        };
+        this.onStopPanning = (event) => {
+            if (this.activePointerId !== null && event?.pointerId != null && event.pointerId !== this.activePointerId)
+                return;
+            if (this.panMoved)
+                this.suppressClickUntil = performance.now() + 180;
+            if (this.activePointerId !== null && this.viewport.hasPointerCapture?.(this.activePointerId)) {
+                try {
+                    this.viewport.releasePointerCapture(this.activePointerId);
+                }
+                catch {
+                    // Ignore pointer capture release failures.
+                }
+            }
+            this.activePointerId = null;
+            this.isPanning = false;
+            this.panMoved = false;
+            this.viewport.classList.remove("is-panning");
+        };
+        this.onViewportClick = (event) => {
+            if (performance.now() <= this.suppressClickUntil) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
+        this.onWheel = (event) => {
+            if (!this.instance?.svg)
+                return;
+            event.preventDefault();
+            const rect = this.viewport.getBoundingClientRect();
+            const pivotX = event.clientX - rect.left;
+            const pivotY = event.clientY - rect.top;
+            const factor = Math.exp(-event.deltaY * 0.0015);
+            this.zoomTo(this.zoom * factor, pivotX, pivotY);
+        };
         this.options = options;
         this.dsl = normalizeNewlines(options.dsl);
         this.theme = options.theme ?? "light";
@@ -12853,6 +12936,13 @@ class SketchmarkEmbed {
         });
         this.btnCaption.addEventListener("click", () => this.setCaptionVisible(!this.showCaption));
         this.btnTts.addEventListener("click", () => this.setTtsEnabled(!this.getTtsEnabled()));
+        this.viewport.addEventListener("pointerdown", this.onPointerDown);
+        this.viewport.addEventListener("pointermove", this.onPointerMove);
+        this.viewport.addEventListener("pointerup", this.onStopPanning);
+        this.viewport.addEventListener("pointercancel", this.onStopPanning);
+        this.viewport.addEventListener("lostpointercapture", this.onStopPanning);
+        this.viewport.addEventListener("click", this.onViewportClick);
+        this.viewport.addEventListener("wheel", this.onWheel, { passive: false });
         if (typeof ResizeObserver !== "undefined") {
             this.resizeObserver = new ResizeObserver(() => {
                 this.positionViewport(false);
@@ -12930,9 +13020,9 @@ class SketchmarkEmbed {
             this.animUnsub = instance.anim.on((event) => {
                 this.syncControls();
                 if (event.type === "step-change") {
-                    if (this.options.autoFocusOnStep !== false) {
+                    if (this.options.autoFocus !== false && this.options.autoFocusOnStep !== false) {
                         requestAnimationFrame(() => {
-                            window.setTimeout(() => this.positionViewport(true), 40);
+                            window.setTimeout(() => this.focusCurrentStep(true), 40);
                         });
                     }
                     this.emitter.emit("stepchange", {
@@ -12976,21 +13066,24 @@ class SketchmarkEmbed {
             return;
         this.instance.anim.next();
         this.syncControls();
-        this.positionViewport(true);
+        if (this.options.autoFocus !== false && this.options.autoFocusOnStep !== false) {
+            this.focusCurrentStep(true);
+        }
     }
     prevStep() {
         if (!this.instance)
             return;
         this.instance.anim.prev();
         this.syncControls();
-        this.positionViewport(true);
+        if (this.options.autoFocus !== false && this.options.autoFocusOnStep !== false) {
+            this.focusCurrentStep(true);
+        }
     }
     resetAnimation() {
         if (!this.instance)
             return;
         this.instance.anim.reset();
         this.syncControls();
-        this.positionViewport(true);
     }
     fitToViewport(animated = false) {
         if (!this.instance?.svg)
@@ -13019,6 +13112,13 @@ class SketchmarkEmbed {
         this.instance?.anim?.destroy();
         this.instance = null;
         this.resizeObserver?.disconnect();
+        this.viewport.removeEventListener("pointerdown", this.onPointerDown);
+        this.viewport.removeEventListener("pointermove", this.onPointerMove);
+        this.viewport.removeEventListener("pointerup", this.onStopPanning);
+        this.viewport.removeEventListener("pointercancel", this.onStopPanning);
+        this.viewport.removeEventListener("lostpointercapture", this.onStopPanning);
+        this.viewport.removeEventListener("click", this.onViewportClick);
+        this.viewport.removeEventListener("wheel", this.onWheel);
         this.root.remove();
     }
     applySize(width, height) {
@@ -13081,6 +13181,10 @@ class SketchmarkEmbed {
             this.options.autoFocus !== false &&
             !!focusTarget;
         if (!shouldFocus) {
+            if (!this.autoFitEnabled) {
+                this.applyTransform();
+                return;
+            }
             this.animateTo(scaledWidth <= viewWidth ? (viewWidth - scaledWidth) / 2 : 0, scaledHeight <= viewHeight ? (viewHeight - scaledHeight) / 2 : 0, animated);
             return;
         }
@@ -13193,6 +13297,56 @@ class SketchmarkEmbed {
         this.applyTransform();
         this.syncViewControls();
     }
+    focusCurrentStep(animated) {
+        const anim = this.instance?.anim;
+        if (!anim || anim.currentStep < 0 || anim.currentStep >= anim.total)
+            return;
+        const targetId = this.getStepTarget(anim.steps[anim.currentStep]);
+        if (targetId)
+            this.focusTarget(targetId, animated);
+    }
+    focusTarget(targetId, animated) {
+        const size = this.getContentSize();
+        if (!size)
+            return;
+        const viewportRect = this.viewport.getBoundingClientRect();
+        const viewWidth = viewportRect.width || this.viewport.clientWidth;
+        const viewHeight = viewportRect.height || this.viewport.clientHeight;
+        if (!viewWidth || !viewHeight)
+            return;
+        const target = this.findTargetElement(targetId);
+        if (!target)
+            return;
+        const targetBox = this.getTargetBox(target, viewportRect);
+        if (!targetBox)
+            return;
+        const centerX = this.offsetX + targetBox.centerX;
+        const centerY = this.offsetY + targetBox.centerY;
+        const padding = this.options.focusPadding ?? 24;
+        if (centerX >= padding &&
+            centerX <= viewWidth - padding &&
+            centerY >= padding &&
+            centerY <= viewHeight - padding) {
+            return;
+        }
+        const scaledWidth = size.width * this.zoom;
+        const scaledHeight = size.height * this.zoom;
+        let nextX = viewWidth / 2 - targetBox.centerX;
+        let nextY = viewHeight / 2 - targetBox.centerY;
+        if (scaledWidth <= viewWidth) {
+            nextX = (viewWidth - scaledWidth) / 2;
+        }
+        else {
+            nextX = clamp(nextX, viewWidth - scaledWidth - padding, padding);
+        }
+        if (scaledHeight <= viewHeight) {
+            nextY = (viewHeight - scaledHeight) / 2;
+        }
+        else {
+            nextY = clamp(nextY, viewHeight - scaledHeight - padding, padding);
+        }
+        this.animateTo(nextX, nextY, animated);
+    }
     applyCaptionVisibility(instance) {
         const caption = instance?.anim.captionElement;
         if (!caption)