stickyflow 0.2.0 → 0.4.0

package/dist/{chunk-IIOJFR73.cjs → chunk-UXDWH2JC.cjs}

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunkS5BVAAEF_cjs = require('./chunk-S5BVAAEF.cjs');
-var chunk34PK7HEU_cjs = require('./chunk-34PK7HEU.cjs');
+var chunkDDCTNLLD_cjs = require('./chunk-DDCTNLLD.cjs');
+var chunkHFOGKSNU_cjs = require('./chunk-HFOGKSNU.cjs');
 
 // src/runtime/viewer/display/rootAttributesPatch.ts
 var CAMERA_OWNED_ATTRIBUTES = /* @__PURE__ */ new Set(["viewbox", "width", "height"]);
@@ -234,6 +234,14 @@ var ViewportController = class {
   setNatural(natural) {
     this.#natural = natural;
   }
+  #userPoint(clientX, clientY) {
+    const matrix = this.#svg.getScreenCTM();
+    if (!matrix) {
+      return null;
+    }
+    const point = new DOMPoint(clientX, clientY).matrixTransform(matrix.inverse());
+    return { x: point.x, y: point.y };
+  }
   zoomBy(factor, clientX, clientY) {
     const rect = this.#svg.getBoundingClientRect();
     if (rect.width <= 0 || rect.height <= 0) {
@@ -241,16 +249,19 @@ var ViewportController = class {
     }
     const centerX = clientX ?? rect.left + rect.width / 2;
     const centerY = clientY ?? rect.top + rect.height / 2;
-    const worldX = this.#view.x + (centerX - rect.left) / rect.width * this.#view.w;
-    const worldY = this.#view.y + (centerY - rect.top) / rect.height * this.#view.h;
-    this.#view = { w: this.#view.w / factor, h: this.#view.h / factor, x: 0, y: 0 };
-    this.#view.x = worldX - (centerX - rect.left) / rect.width * this.#view.w;
-    this.#view.y = worldY - (centerY - rect.top) / rect.height * this.#view.h;
+    const anchor = this.#userPoint(centerX, centerY);
+    this.#view = { ...this.#view, w: this.#view.w / factor, h: this.#view.h / factor };
+    this.apply();
+    const moved = anchor ? this.#userPoint(centerX, centerY) : null;
+    if (anchor && moved) {
+      this.#view.x += anchor.x - moved.x;
+      this.#view.y += anchor.y - moved.y;
+    }
     this.apply();
   }
   panBy(dxPixels, dyPixels) {
-    const rect = this.#svg.getBoundingClientRect();
-    const pixelsPerUnit = rect.width > 0 ? rect.width / this.#view.w : 1;
+    const scale = this.#svg.getScreenCTM()?.a;
+    const pixelsPerUnit = scale && scale > 0 ? scale : 1;
     this.#view.x -= dxPixels / pixelsPerUnit;
     this.#view.y -= dyPixels / pixelsPerUnit;
     this.apply();
@@ -286,7 +297,7 @@ function mountDisplay(container, svgString) {
 }
 
 // src/runtime/viewer/events.ts
-var Emitter2 = class extends chunk34PK7HEU_cjs.Emitter {
+var Emitter2 = class extends chunkHFOGKSNU_cjs.Emitter {
 };
 
 // src/runtime/viewer/export/raster.ts
@@ -376,15 +387,15 @@ function svgElement(document, name, attributes) {
 function readWidgetStyle(surface) {
   try {
     return {
-      ...chunkS5BVAAEF_cjs.DEFAULT_ROLLING_NUMBER_STYLE,
+      ...chunkDDCTNLLD_cjs.DEFAULT_ROLLING_NUMBER_STYLE,
       ...JSON.parse(surface.getAttribute("data-sf-widget-style") ?? "{}")
     };
   } catch {
-    return chunkS5BVAAEF_cjs.DEFAULT_ROLLING_NUMBER_STYLE;
+    return chunkDDCTNLLD_cjs.DEFAULT_ROLLING_NUMBER_STYLE;
   }
 }
-function cellsOf(box, plain) {
-  const size = Math.max(1, Math.min(box.width, box.height) * 0.28);
+function cellsOf(box, plain, fontSize = 0) {
+  const size = fontSize > 0 ? fontSize : Math.max(1, Math.min(box.width, box.height) * 0.28);
   return {
     size,
     plain,
@@ -470,7 +481,7 @@ function flattenRollingNumbers(svg) {
     const value = surface.getAttribute("data-sf-widget-value") ?? "";
     const style = readWidgetStyle(surface);
     const label = surface.querySelector("div > span:not([data-sf-rolling-digit])")?.textContent ?? "";
-    const cells = cellsOf(box, style.variant === "plain");
+    const cells = cellsOf(box, style.variant === "plain", style.fontSize);
     const labelBlock = label ? cells.size * 0.3 : 0;
     const rowWidth = value.length * cells.cellWidth + Math.max(0, value.length - 1) * cells.gap;
     const left = box.x + (box.width - rowWidth) / 2;
@@ -520,7 +531,7 @@ function serializeSvgSnapshot(svg, captures) {
 // src/runtime/viewer/interaction/changeFlash.ts
 function createChangeFlash(svg) {
   const timers = /* @__PURE__ */ new Map();
-  const flash = (ownerIds, color2 = chunk34PK7HEU_cjs.CHANGE_COLOR) => {
+  const flash = (ownerIds, color2 = chunkHFOGKSNU_cjs.CHANGE_COLOR) => {
     const ids = [...new Set(ownerIds)];
     if (ids.length === 0) {
       return;
@@ -528,7 +539,7 @@ function createChangeFlash(svg) {
     const doc = svg.ownerDocument;
     const reducedMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
     for (const id of ids) {
-      const primary = chunk34PK7HEU_cjs.findOwnerNode(svg, id, chunk34PK7HEU_cjs.isPrimary);
+      const primary = chunkHFOGKSNU_cjs.findOwnerNode(svg, id, chunkHFOGKSNU_cjs.isPrimary);
       if (!primary) {
         continue;
       }
@@ -539,10 +550,10 @@ function createChangeFlash(svg) {
       for (const stale of svg.querySelectorAll(`[data-sf-change-overlay="${CSS.escape(id)}"]`)) {
         stale.remove();
       }
-      const overlay = primary.getAttribute("data-sf-role") === "link" ? chunk34PK7HEU_cjs.linkChangeOverlay(doc, primary, id, color2) : chunk34PK7HEU_cjs.shapeChangeOverlay(doc, primary, id, color2);
+      const overlay = primary.getAttribute("data-sf-role") === "link" ? chunkHFOGKSNU_cjs.linkChangeOverlay(doc, primary, id, color2) : chunkHFOGKSNU_cjs.shapeChangeOverlay(doc, primary, id, color2);
       svg.appendChild(overlay);
-      chunk34PK7HEU_cjs.startChangeFade(overlay, reducedMotion);
-      const duration = reducedMotion ? chunk34PK7HEU_cjs.REDUCED_MOTION_DURATION_MS : chunk34PK7HEU_cjs.FLASH_DURATION_MS;
+      chunkHFOGKSNU_cjs.startChangeFade(overlay, reducedMotion);
+      const duration = reducedMotion ? chunkHFOGKSNU_cjs.REDUCED_MOTION_DURATION_MS : chunkHFOGKSNU_cjs.FLASH_DURATION_MS;
       timers.set(
         id,
         setTimeout(() => {
@@ -629,7 +640,7 @@ var OwnerPointerController = class {
     this.#selection = selection;
   }
   hover(event) {
-    const owner = chunk34PK7HEU_cjs.resolveOwner(event.target);
+    const owner = chunkHFOGKSNU_cjs.resolveOwner(event.target);
     this.#emitter.emit(
       "ownerHover",
       owner ? { diagramId: this.#diagramId, owner, modifiers: modifiersOf(event) } : { diagramId: this.#diagramId, owner: null }
@@ -637,7 +648,7 @@ var OwnerPointerController = class {
   }
   select(event) {
     const target = event.target;
-    const owner = chunk34PK7HEU_cjs.resolveOwner(target);
+    const owner = chunkHFOGKSNU_cjs.resolveOwner(target);
     if (!owner) {
       this.#clearWhenOutsideOverlay(target);
       return;
@@ -658,7 +669,7 @@ var OwnerPointerController = class {
       owner,
       modifiers
     });
-    const node = chunk34PK7HEU_cjs.findOwnerNode(this.#svg, owner.id, chunk34PK7HEU_cjs.isPrimary);
+    const node = chunkHFOGKSNU_cjs.findOwnerNode(this.#svg, owner.id, chunkHFOGKSNU_cjs.isPrimary);
     if (node && !node.hasAttribute("tabindex")) {
       node.setAttribute("tabindex", "-1");
     }
@@ -686,12 +697,12 @@ var PointerInteractionSession = class {
   }
   #onPointerDown = (event) => {
     const target = event.target;
-    const overContent = Boolean(chunk34PK7HEU_cjs.resolveOwner(target)) || isSelectionOverlayControl(target);
+    const overContent = Boolean(chunkHFOGKSNU_cjs.resolveOwner(target)) || isSelectionOverlayControl(target);
     this.#down = {
       x: event.clientX,
       y: event.clientY,
       moved: false,
-      panable: chunk34PK7HEU_cjs.isCameraGesture(event) || !overContent
+      panable: chunkHFOGKSNU_cjs.isCameraGesture(event) || !overContent
     };
   };
   #onPointerMove = (event) => {
@@ -719,7 +730,7 @@ var PointerInteractionSession = class {
     if (!this.#down.moved) {
       return false;
     }
-    if (this.#down.panable && chunk34PK7HEU_cjs.isCameraGesture(event)) {
+    if (this.#down.panable && chunkHFOGKSNU_cjs.isCameraGesture(event)) {
       this.#display.panBy(event.movementX, event.movementY);
     }
     return true;
@@ -743,15 +754,15 @@ function paintSelectionOverlays(svg, selectedIds, owners) {
   }
   const document = svg.ownerDocument;
   for (const id of selectedIds) {
-    const primary = chunk34PK7HEU_cjs.findOwnerNode(svg, id, chunk34PK7HEU_cjs.isPrimary);
+    const primary = chunkHFOGKSNU_cjs.findOwnerNode(svg, id, chunkHFOGKSNU_cjs.isPrimary);
     if (!primary) {
       continue;
     }
     const owner = owners.get(id);
-    const overlay = owner?.role === "link" ? chunk34PK7HEU_cjs.linkSelectionOverlay(document, primary, id, svg) : owner?.role === "path" ? chunk34PK7HEU_cjs.pathSelectionOverlay(document, primary, id, svg) : owner?.role === "isometric" ? chunk34PK7HEU_cjs.isometricSelectionOverlay(document, primary, id, svg) : chunk34PK7HEU_cjs.shapeSelectionOverlay(document, primary, id, svg, owner ? chunk34PK7HEU_cjs.DERIVED_HEIGHT_ROLES.has(owner.role) : false);
+    const overlay = owner?.role === "link" ? chunkHFOGKSNU_cjs.linkSelectionOverlay(document, primary, id, svg) : owner?.role === "path" ? chunkHFOGKSNU_cjs.pathSelectionOverlay(document, primary, id, svg) : owner?.role === "isometric" ? chunkHFOGKSNU_cjs.isometricSelectionOverlay(document, primary, id, svg) : chunkHFOGKSNU_cjs.shapeSelectionOverlay(document, primary, id, svg, owner ? chunkHFOGKSNU_cjs.DERIVED_HEIGHT_ROLES.has(owner.role) : false);
     svg.appendChild(overlay);
     if (owner?.role === "shape" && selectedIds.size === 1) {
-      svg.appendChild(chunk34PK7HEU_cjs.quickDuplicateBubbles(document, primary, id, svg));
+      svg.appendChild(chunkHFOGKSNU_cjs.quickDuplicateBubbles(document, primary, id, svg));
     }
   }
 }
@@ -790,7 +801,7 @@ var SelectionController = class {
   selectIds(ids) {
     for (const id of ids) {
       const element = this.#svg.querySelector(`[data-sf-id="${CSS.escape(id)}"]`);
-      const owner = chunk34PK7HEU_cjs.resolveOwner(element);
+      const owner = chunkHFOGKSNU_cjs.resolveOwner(element);
       if (owner) {
         this.remember(owner);
       }
@@ -802,7 +813,7 @@ var SelectionController = class {
 // src/runtime/viewer/interaction/wheel.ts
 function bindWheelZoom(display, selection) {
   const onWheel = (event) => {
-    if (!chunk34PK7HEU_cjs.isCameraGesture(event)) {
+    if (!chunkHFOGKSNU_cjs.isCameraGesture(event)) {
       return;
     }
     event.preventDefault();
@@ -2026,6 +2037,7 @@ uniform vec3 uColor;
 uniform vec3 uAccent;
 uniform vec3 uGlow;
 uniform vec3 uCore;
+uniform vec3 uPeak;
 varying vec2 vUv;
 
 float wireAt(float at, float lineAt, float depth, float radius, float knob, float spread) {
@@ -2098,7 +2110,8 @@ void main() {
   vec2 q = abs(vec2(across - (tickEnd - tickLength * 0.5), tickAlong)) - vec2(tickLength * 0.5, halfTick) + corner;
   float edge = length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - corner;
   float tick = (1.0 - smoothstep(-0.75, 0.75, edge)) * inRange * mix(0.4, 1.0, tickBump);
-  vec3 tickColor = mix(uColor, vec3(1.0), tickBump);
+  vec3 peakColor = dot(uPeak, uPeak) > 0.0 ? uPeak : vec3(1.0);
+  vec3 tickColor = mix(uColor, peakColor, tickBump);
 
   float alpha = clamp(tick + line * 0.95 + glow + core, 0.0, 1.0);
   vec3 rgb = tickColor * tick + lineColor * line * 0.95 + glowColor * glow + coreColor * core;
@@ -2975,21 +2988,21 @@ function mountShaderSurfaces(svg) {
 
 // src/runtime/viewer/source.ts
 function renderViewerSource(next, defaultRenderOptions) {
-  const svg = next.svg ?? (next.source != null ? chunkS5BVAAEF_cjs.render(next.source, { ...next.renderOptions ?? defaultRenderOptions, linkHitAreas: true }).svg : null);
+  const svg = next.svg ?? (next.source != null ? chunkDDCTNLLD_cjs.render(next.source, { ...next.renderOptions ?? defaultRenderOptions, linkHitAreas: true }).svg : null);
   if (svg == null) {
     throw new Error("createViewer: provide either `source` (SFL) or `svg`.");
   }
   return svg;
 }
 function assertCreateViewerContract(svg) {
-  const version = chunk34PK7HEU_cjs.parseContractVersion(svg);
-  if (!chunk34PK7HEU_cjs.isContractCompatible(version)) {
+  const version = chunkHFOGKSNU_cjs.parseContractVersion(svg);
+  if (!chunkHFOGKSNU_cjs.isContractCompatible(version)) {
     throw new Error(`createViewer: incompatible DOM contract (svg=${version}). Renderer and viewer versions differ.`);
   }
 }
 function assertViewerUpdateContract(svg) {
-  const version = chunk34PK7HEU_cjs.parseContractVersion(svg);
-  if (!chunk34PK7HEU_cjs.isContractCompatible(version)) {
+  const version = chunkHFOGKSNU_cjs.parseContractVersion(svg);
+  if (!chunkHFOGKSNU_cjs.isContractCompatible(version)) {
     throw new Error(`viewer.update: incompatible DOM contract (svg=${version}). Renderer and viewer versions differ.`);
   }
 }
@@ -3152,12 +3165,12 @@ function widgetDigits(surface) {
 function widgetStyle(surface) {
   const encoded = surface.getAttribute("data-sf-widget-style");
   if (!encoded) {
-    return chunkS5BVAAEF_cjs.DEFAULT_ROLLING_NUMBER_STYLE;
+    return chunkDDCTNLLD_cjs.DEFAULT_ROLLING_NUMBER_STYLE;
   }
   try {
-    return { ...chunkS5BVAAEF_cjs.DEFAULT_ROLLING_NUMBER_STYLE, ...JSON.parse(encoded) };
+    return { ...chunkDDCTNLLD_cjs.DEFAULT_ROLLING_NUMBER_STYLE, ...JSON.parse(encoded) };
   } catch {
-    return chunkS5BVAAEF_cjs.DEFAULT_ROLLING_NUMBER_STYLE;
+    return chunkDDCTNLLD_cjs.DEFAULT_ROLLING_NUMBER_STYLE;
   }
 }
 function positiveInteger(value) {
@@ -3181,7 +3194,7 @@ function setRollingNumber(surface, value, animate) {
     return false;
   }
   const previousValue = surface.getAttribute("data-sf-widget-value") ?? "";
-  const nextValue = chunkS5BVAAEF_cjs.formatRollingNumber(value, positiveInteger(surface.getAttribute("data-sf-widget-digits")));
+  const nextValue = chunkDDCTNLLD_cjs.formatRollingNumber(value, positiveInteger(surface.getAttribute("data-sf-widget-digits")));
   if (previousValue === nextValue) {
     return true;
   }
@@ -3667,5 +3680,5 @@ exports.connectInteraction = connectInteraction;
 exports.createViewer = createViewer;
 exports.registerShaderProgram = registerShaderProgram;
 exports.shaderProgram = shaderProgram;
-//# sourceMappingURL=chunk-IIOJFR73.cjs.map
-//# sourceMappingURL=chunk-IIOJFR73.cjs.map
+//# sourceMappingURL=chunk-UXDWH2JC.cjs.map
+//# sourceMappingURL=chunk-UXDWH2JC.cjs.map