stickyflow 0.11.0 → 0.11.2

package/dist/index.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunkFXGXUWSI_cjs = require('./chunk-FXGXUWSI.cjs');
-var chunk5G3BEXQU_cjs = require('./chunk-5G3BEXQU.cjs');
+var chunk4KBU4CFU_cjs = require('./chunk-4KBU4CFU.cjs');
+var chunkEHH6ZDK6_cjs = require('./chunk-EHH6ZDK6.cjs');
 var chunkUHKFJBY5_cjs = require('./chunk-UHKFJBY5.cjs');
 
 // src/model/shape/supportedTypes.ts
@@ -76,7 +76,7 @@ function flattenGroups(groups, buckets) {
 // src/adapters/importJson/assembly.ts
 function sflToImportJson(sfl) {
   const state = chunkUHKFJBY5_cjs.sflToCanvasState(sfl);
-  const collected = chunk5G3BEXQU_cjs.collectCanvasObjects(state);
+  const collected = chunkEHH6ZDK6_cjs.collectCanvasObjects(state);
   const canvas = emptyBuckets();
   const { groupBuckets, bucketFor } = createBucketResolver(indexGroupMembership(state.groups), canvas);
   for (const shape of collected.shapes) {
@@ -107,47 +107,47 @@ function sflToImportJson(sfl) {
 
 Object.defineProperty(exports, "buildBindingGraph", {
   enumerable: true,
-  get: function () { return chunkFXGXUWSI_cjs.buildBindingGraph; }
+  get: function () { return chunk4KBU4CFU_cjs.buildBindingGraph; }
 });
 Object.defineProperty(exports, "createBindingRuntime", {
   enumerable: true,
-  get: function () { return chunkFXGXUWSI_cjs.createBindingRuntime; }
+  get: function () { return chunk4KBU4CFU_cjs.createBindingRuntime; }
 });
 Object.defineProperty(exports, "createDataSource", {
   enumerable: true,
-  get: function () { return chunkFXGXUWSI_cjs.createDataSource; }
+  get: function () { return chunk4KBU4CFU_cjs.createDataSource; }
 });
 Object.defineProperty(exports, "interactiveElements", {
   enumerable: true,
-  get: function () { return chunkFXGXUWSI_cjs.interactiveElements; }
+  get: function () { return chunk4KBU4CFU_cjs.interactiveElements; }
 });
 Object.defineProperty(exports, "renderBound", {
   enumerable: true,
-  get: function () { return chunkFXGXUWSI_cjs.renderBound; }
+  get: function () { return chunk4KBU4CFU_cjs.renderBound; }
 });
 Object.defineProperty(exports, "decodeColor", {
   enumerable: true,
-  get: function () { return chunk5G3BEXQU_cjs.decodeColor; }
+  get: function () { return chunkEHH6ZDK6_cjs.decodeColor; }
 });
 Object.defineProperty(exports, "decodeShadow", {
   enumerable: true,
-  get: function () { return chunk5G3BEXQU_cjs.decodeShadow; }
+  get: function () { return chunkEHH6ZDK6_cjs.decodeShadow; }
 });
 Object.defineProperty(exports, "defineComponent", {
   enumerable: true,
-  get: function () { return chunk5G3BEXQU_cjs.defineComponent; }
+  get: function () { return chunkEHH6ZDK6_cjs.defineComponent; }
 });
 Object.defineProperty(exports, "render", {
   enumerable: true,
-  get: function () { return chunk5G3BEXQU_cjs.render; }
+  get: function () { return chunkEHH6ZDK6_cjs.render; }
 });
 Object.defineProperty(exports, "renderCanvas", {
   enumerable: true,
-  get: function () { return chunk5G3BEXQU_cjs.renderCanvas; }
+  get: function () { return chunkEHH6ZDK6_cjs.renderCanvas; }
 });
 Object.defineProperty(exports, "sflToRenderInput", {
   enumerable: true,
-  get: function () { return chunk5G3BEXQU_cjs.sflToRenderInput; }
+  get: function () { return chunkEHH6ZDK6_cjs.sflToRenderInput; }
 });
 Object.defineProperty(exports, "AXIS_COS", {
   enumerable: true,

package/dist/index.js

@@ -1,6 +1,6 @@
-export { buildBindingGraph, createBindingRuntime, createDataSource, interactiveElements, renderBound } from './chunk-UB2ANTWF.js';
-import { collectCanvasObjects } from './chunk-Q6QLU6YQ.js';
-export { decodeColor, decodeShadow, defineComponent, render, renderCanvas, sflToRenderInput } from './chunk-Q6QLU6YQ.js';
+export { buildBindingGraph, createBindingRuntime, createDataSource, interactiveElements, renderBound } from './chunk-UD6IG2PG.js';
+import { collectCanvasObjects } from './chunk-TQIYK5OA.js';
+export { decodeColor, decodeShadow, defineComponent, render, renderCanvas, sflToRenderInput } from './chunk-TQIYK5OA.js';
 import { sflToCanvasState } from './chunk-G6IW2IX3.js';
 export { AXIS_COS, AXIS_SIN, CHART_TYPES, COMPONENT_CATEGORIES, DOM_CONTRACT_VERSION, canonicalizeSource as canonicalize, componentTypes, flattenPath, getComponentDescriptor, isChartObject, isDimensionObject, isGenericComponent, isIsometricObject, isPathObject, isSwimlaneObject, parseSource as parse, pathBounds, pathToSymbol, sflToCanvasState, symbolToPath } from './chunk-G6IW2IX3.js';
 

package/dist/interaction/index.cjs

@@ -836,6 +836,14 @@ function trackDrag(node, onMove, onEnd) {
 var CHANNELS = ["r", "g", "b"];
 var GAP_BELOW_ANCHOR = 6;
 var VIEWPORT_MARGIN = 8;
+function buildEyedropper(parent) {
+  const button = el("button", "sf-cp-eyedropper", parent);
+  button.type = "button";
+  button.title = "Pick a color from the screen";
+  button.setAttribute("aria-label", "Pick a color from the screen");
+  button.innerHTML = '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 22l1-1h3l9-9"/><path d="M3 21v-3l9-9"/><path d="M15 6l3.4-3.4a2.1 2.1 0 1 1 3 3L18 9l.4.4a2.1 2.1 0 1 1-3 3l-3.8-3.8a2.1 2.1 0 1 1 3-3l.4.4z"/></svg>';
+  return button;
+}
 function buildSolidControls(root) {
   const area = el("div", "sf-cp-area", root);
   const matrix = el("div", "sf-cp-matrix", area);
@@ -859,6 +867,7 @@ function buildSolidControls(root) {
   const hexInput = el("input", "sf-cp-text", hexRow);
   hexInput.type = "text";
   hexInput.spellcheck = false;
+  const eyedropper = "EyeDropper" in window ? buildEyedropper(hexRow) : void 0;
   return {
     matrix,
     matrixCursor,
@@ -869,7 +878,8 @@ function buildSolidControls(root) {
     alphaRow,
     alphaRange,
     alphaNumber,
-    hexInput
+    hexInput,
+    eyedropper
   };
 }
 function buildGradientControls(root, lockStops) {
@@ -1006,6 +1016,20 @@ function bindAngle(picker) {
   angleNumber.addEventListener("input", (event) => applyAngle(picker, read(event)));
   angleNumber.addEventListener("change", () => commit(picker));
 }
+function bindEyedropper(picker) {
+  const { eyedropper } = picker.view;
+  eyedropper?.addEventListener("click", async () => {
+    const Dropper = window.EyeDropper;
+    try {
+      const hex = normalizeHex((await new Dropper().open()).sRGBHex);
+      if (hex) {
+        applyHex(picker, hex);
+        commit(picker);
+      }
+    } catch {
+    }
+  });
+}
 function bindPickerEvents(picker) {
   const { view } = picker;
   const disposers = bindAreas(picker);
@@ -1017,6 +1041,7 @@ function bindPickerEvents(picker) {
   }
   bindAlpha(picker);
   bindHex(picker);
+  bindEyedropper(picker);
   bindAngle(picker);
   return disposers;
 }
@@ -1314,6 +1339,25 @@ var FIELDS_CSS = `
 }
 
 .sf-cp-number,
+.sf-cp-eyedropper {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  margin-left: auto;
+  padding: 0;
+  border: 1px solid var(--sf-cp-field-border);
+  border-radius: 6px;
+  background: var(--sf-cp-field-bg);
+  color: var(--sf-cp-fg);
+  cursor: pointer;
+}
+
+.sf-cp-eyedropper:hover {
+  background: var(--sf-cp-hover);
+}
+
 .sf-cp-text {
   flex: none;
   width: 52px;
@@ -5611,6 +5655,10 @@ function applyGeometryPreview(drag, bounds) {
     return;
   }
   drag.geometryNodes.forEach((node, index) => {
+    if (node.tagName.toLowerCase() === "image") {
+      applyCompositeScale([node], drag.startBounds, bounds, [drag.baseTransforms[index]]);
+      return;
+    }
     applySingleNodeBounds(node, drag.kind, applyInset(bounds, drag.insets[index] ?? NO_INSET));
   });
 }
@@ -7195,29 +7243,44 @@ function movePathPoints(lines, range, dx, dy) {
   );
   replacePropertyValue(lines, span, shifted);
 }
-function applyMoveChange(sfl, event) {
+function applyMoveChanges(sfl, events) {
   const state = chunkUHKFJBY5_cjs.sflToCanvasState(sfl);
-  const canvasObject = state.canvasObjects.find((candidate) => candidate.id === event.owner.id);
-  if (!canvasObject) {
-    return sfl;
-  }
-  const parent = canvasObject.parentFrameId ? state.canvasObjects.find((candidate) => candidate.id === canvasObject.parentFrameId) : void 0;
-  const originX = parent?.x ?? 0;
-  const originY = parent?.y ?? 0;
   const lines = sfl.split("\n");
-  const range = findOwnerBlock(lines, event.owner.id);
-  if (!range) {
-    return sfl;
-  }
-  if (event.owner.role === "path") {
-    movePathPoints(lines, range, event.dx, event.dy);
-    return lines.join("\n");
+  const parents = new Map(state.canvasObjects.map((candidate) => [candidate.id, candidate.parentFrameId]));
+  const moving = new Set(events.map((event) => event.owner.id));
+  const hasMovingAncestor = (id) => {
+    const seen = /* @__PURE__ */ new Set();
+    for (let parent = parents.get(id); parent && !seen.has(parent); parent = parents.get(parent)) {
+      if (moving.has(parent)) {
+        return true;
+      }
+      seen.add(parent);
+    }
+    return false;
+  };
+  for (const event of events) {
+    if (hasMovingAncestor(event.owner.id)) {
+      continue;
+    }
+    const canvasObject = state.canvasObjects.find((candidate) => candidate.id === event.owner.id);
+    const range = canvasObject ? findOwnerBlock(lines, event.owner.id) : null;
+    if (!canvasObject || !range) {
+      continue;
+    }
+    if (event.owner.role === "path") {
+      movePathPoints(lines, range, event.dx, event.dy);
+      continue;
+    }
+    const parent = canvasObject.parentFrameId ? state.canvasObjects.find((candidate) => candidate.id === canvasObject.parentFrameId) : void 0;
+    setOrInsertLayoutTuples(lines, range, [
+      ["position", canvasObject.x - (parent?.x ?? 0) + event.dx, canvasObject.y - (parent?.y ?? 0) + event.dy]
+    ]);
   }
-  setOrInsertLayoutTuples(lines, range, [
-    ["position", canvasObject.x - originX + event.dx, canvasObject.y - originY + event.dy]
-  ]);
   return lines.join("\n");
 }
+function applyMoveChange(sfl, event) {
+  return applyMoveChanges(sfl, [event]);
+}
 
 // src/runtime/interaction/sflPatch/changes/pathPointChange.ts
 function applyPathPointChange(sfl, event) {
@@ -7798,6 +7861,7 @@ exports.applyChartValueChange = applyChartValueChange;
 exports.applyLinkReconnectChange = applyLinkReconnectChange;
 exports.applyLinkSegmentChange = applyLinkSegmentChange;
 exports.applyMoveChange = applyMoveChange;
+exports.applyMoveChanges = applyMoveChanges;
 exports.applyPathPointChange = applyPathPointChange;
 exports.applyPropertyChange = applyPropertyChange;
 exports.applyQuickDuplicateChange = applyQuickDuplicateChange;