stickyflow 0.10.0 → 0.11.1

package/dist/interaction/index.d.cts

@@ -1,5 +1,5 @@
-import { O as OwnerRef, E as Emitter$1, V as Viewer, U as Unsubscribe } from '../types-B5jrEEcF.cjs';
-import { Z as Side, I as IsometricFace } from '../render-DU4lYbRl.cjs';
+import { O as OwnerRef, E as Emitter$1, V as Viewer, U as Unsubscribe } from '../types-CZJzycKw.cjs';
+import { Z as Side, I as IsometricFace } from '../render-BDO4S5uF.cjs';
 
 interface TextChangeEvent {
     owner: OwnerRef;
@@ -184,7 +184,7 @@ declare function openColorPopover(options: ColorPopoverOptions): ColorPopoverHan
 
 interface InsertCanvasObjectOptions {
     id: string;
-    kind: 'shape' | 'text' | 'frame' | 'swimlane' | 'isometric';
+    kind: 'shape' | 'text' | 'image' | 'frame' | 'swimlane' | 'isometric';
     text?: string;
     x: number;
     y: number;
@@ -221,6 +221,7 @@ declare function applyLinkReconnectChange(sfl: string, event: LinkReconnectEvent
 
 declare function applyLinkSegmentChange(sfl: string, event: LinkSegmentChangeEvent): string;
 
+declare function applyMoveChanges(sfl: string, events: readonly MoveChangeEvent[]): string;
 declare function applyMoveChange(sfl: string, event: MoveChangeEvent): string;
 
 declare function applyPathPointChange(sfl: string, event: PathPointChangeEvent): string;
@@ -280,4 +281,4 @@ interface EditingOptions {
 }
 declare function bindEditing(viewer: Viewer, options?: EditingOptions): Interaction;
 
-export { type ChartValueChangeEvent, type ColorEditHandle, type ColorPickerTheme, type ColorPickerThemeOption, type ColorPopoverHandle, type ColorPopoverOptions, type DeleteEvent, type EditableRules, type EditingOptions, type InsertCanvasObjectOptions, type InsertConnectionOptions, type InsertLinkOptions, type InsertPathOptions, type Interaction, type InteractionEventMap, type InteractionEventName, type IsometricQuickDuplicateDirection, type LinkReconnectEvent, type LinkSegmentChangeEvent, type LinkToEvent, type MoveChangeEvent, type PathDrawCompleteEvent, type PathDrawOptions, type PathPoint, type PathPointChangeEvent, type PickerValue, type PropertyChangeEvent, type PropertyEditingHandle, type PropertyEditingOptions, type PropertyValue, type QuickDuplicateEvent, type QuickDuplicateOptions, type RemoveCanvasObjectOptions, type ResizeChangeEvent, type SankeyNodeMoveEvent, type SankeyNodeRenameEvent, type TextChangeEvent, Unsubscribe, applyChartValueChange, applyLinkReconnectChange, applyLinkSegmentChange, applyMoveChange, applyPathPointChange, applyPropertyChange, applyQuickDuplicateChange, applyResizeChange, applySankeyNodeMoveChange, applySankeyNodeRenameChange, applyTextChange, bindEditing, bindPropertyEditing, cssBackground, formatPickerValue, insertCanvasObject, insertConnection, insertLink, insertPath, openColorPopover, readGradientValue, removeCanvasObject, removeLink, resolveTheme, seedFrom };
+export { type ChartValueChangeEvent, type ColorEditHandle, type ColorPickerTheme, type ColorPickerThemeOption, type ColorPopoverHandle, type ColorPopoverOptions, type DeleteEvent, type EditableRules, type EditingOptions, type InsertCanvasObjectOptions, type InsertConnectionOptions, type InsertLinkOptions, type InsertPathOptions, type Interaction, type InteractionEventMap, type InteractionEventName, type IsometricQuickDuplicateDirection, type LinkReconnectEvent, type LinkSegmentChangeEvent, type LinkToEvent, type MoveChangeEvent, type PathDrawCompleteEvent, type PathDrawOptions, type PathPoint, type PathPointChangeEvent, type PickerValue, type PropertyChangeEvent, type PropertyEditingHandle, type PropertyEditingOptions, type PropertyValue, type QuickDuplicateEvent, type QuickDuplicateOptions, type RemoveCanvasObjectOptions, type ResizeChangeEvent, type SankeyNodeMoveEvent, type SankeyNodeRenameEvent, type TextChangeEvent, Unsubscribe, applyChartValueChange, applyLinkReconnectChange, applyLinkSegmentChange, applyMoveChange, applyMoveChanges, applyPathPointChange, applyPropertyChange, applyQuickDuplicateChange, applyResizeChange, applySankeyNodeMoveChange, applySankeyNodeRenameChange, applyTextChange, bindEditing, bindPropertyEditing, cssBackground, formatPickerValue, insertCanvasObject, insertConnection, insertLink, insertPath, openColorPopover, readGradientValue, removeCanvasObject, removeLink, resolveTheme, seedFrom };

package/dist/interaction/index.d.ts

@@ -1,5 +1,5 @@
-import { O as OwnerRef, E as Emitter$1, V as Viewer, U as Unsubscribe } from '../types-B7IkZ0w4.js';
-import { Z as Side, I as IsometricFace } from '../render-DU4lYbRl.js';
+import { O as OwnerRef, E as Emitter$1, V as Viewer, U as Unsubscribe } from '../types-Dp8JVZLB.js';
+import { Z as Side, I as IsometricFace } from '../render-BDO4S5uF.js';
 
 interface TextChangeEvent {
     owner: OwnerRef;
@@ -184,7 +184,7 @@ declare function openColorPopover(options: ColorPopoverOptions): ColorPopoverHan
 
 interface InsertCanvasObjectOptions {
     id: string;
-    kind: 'shape' | 'text' | 'frame' | 'swimlane' | 'isometric';
+    kind: 'shape' | 'text' | 'image' | 'frame' | 'swimlane' | 'isometric';
     text?: string;
     x: number;
     y: number;
@@ -221,6 +221,7 @@ declare function applyLinkReconnectChange(sfl: string, event: LinkReconnectEvent
 
 declare function applyLinkSegmentChange(sfl: string, event: LinkSegmentChangeEvent): string;
 
+declare function applyMoveChanges(sfl: string, events: readonly MoveChangeEvent[]): string;
 declare function applyMoveChange(sfl: string, event: MoveChangeEvent): string;
 
 declare function applyPathPointChange(sfl: string, event: PathPointChangeEvent): string;
@@ -280,4 +281,4 @@ interface EditingOptions {
 }
 declare function bindEditing(viewer: Viewer, options?: EditingOptions): Interaction;
 
-export { type ChartValueChangeEvent, type ColorEditHandle, type ColorPickerTheme, type ColorPickerThemeOption, type ColorPopoverHandle, type ColorPopoverOptions, type DeleteEvent, type EditableRules, type EditingOptions, type InsertCanvasObjectOptions, type InsertConnectionOptions, type InsertLinkOptions, type InsertPathOptions, type Interaction, type InteractionEventMap, type InteractionEventName, type IsometricQuickDuplicateDirection, type LinkReconnectEvent, type LinkSegmentChangeEvent, type LinkToEvent, type MoveChangeEvent, type PathDrawCompleteEvent, type PathDrawOptions, type PathPoint, type PathPointChangeEvent, type PickerValue, type PropertyChangeEvent, type PropertyEditingHandle, type PropertyEditingOptions, type PropertyValue, type QuickDuplicateEvent, type QuickDuplicateOptions, type RemoveCanvasObjectOptions, type ResizeChangeEvent, type SankeyNodeMoveEvent, type SankeyNodeRenameEvent, type TextChangeEvent, Unsubscribe, applyChartValueChange, applyLinkReconnectChange, applyLinkSegmentChange, applyMoveChange, applyPathPointChange, applyPropertyChange, applyQuickDuplicateChange, applyResizeChange, applySankeyNodeMoveChange, applySankeyNodeRenameChange, applyTextChange, bindEditing, bindPropertyEditing, cssBackground, formatPickerValue, insertCanvasObject, insertConnection, insertLink, insertPath, openColorPopover, readGradientValue, removeCanvasObject, removeLink, resolveTheme, seedFrom };
+export { type ChartValueChangeEvent, type ColorEditHandle, type ColorPickerTheme, type ColorPickerThemeOption, type ColorPopoverHandle, type ColorPopoverOptions, type DeleteEvent, type EditableRules, type EditingOptions, type InsertCanvasObjectOptions, type InsertConnectionOptions, type InsertLinkOptions, type InsertPathOptions, type Interaction, type InteractionEventMap, type InteractionEventName, type IsometricQuickDuplicateDirection, type LinkReconnectEvent, type LinkSegmentChangeEvent, type LinkToEvent, type MoveChangeEvent, type PathDrawCompleteEvent, type PathDrawOptions, type PathPoint, type PathPointChangeEvent, type PickerValue, type PropertyChangeEvent, type PropertyEditingHandle, type PropertyEditingOptions, type PropertyValue, type QuickDuplicateEvent, type QuickDuplicateOptions, type RemoveCanvasObjectOptions, type ResizeChangeEvent, type SankeyNodeMoveEvent, type SankeyNodeRenameEvent, type TextChangeEvent, Unsubscribe, applyChartValueChange, applyLinkReconnectChange, applyLinkSegmentChange, applyMoveChange, applyMoveChanges, applyPathPointChange, applyPropertyChange, applyQuickDuplicateChange, applyResizeChange, applySankeyNodeMoveChange, applySankeyNodeRenameChange, applyTextChange, bindEditing, bindPropertyEditing, cssBackground, formatPickerValue, insertCanvasObject, insertConnection, insertLink, insertPath, openColorPopover, readGradientValue, removeCanvasObject, removeLink, resolveTheme, seedFrom };

package/dist/interaction/index.js

@@ -1,5 +1,5 @@
-import { screenRectOf, Emitter, resolveOwner, isCameraGesture, pointerUserPoint, clearAlignmentGuides, updateAlignmentGuides, pxPerUnit, findOwnerNode, isPrimary, SVG_NAMESPACE, isTextLabel, findSnapCandidateBounds, symbolDeclaredBounds, updateQuickDuplicateBubbles, isometricGeometryOf, updateHalo, axisArrowPlacements, updateAxisArrowGroup, PATH_HALO_ATTR, findAllOwnerNodes, findIsometricApexCandidates, DERIVED_HEIGHT_ROLES, resizeHandlePositions, ISO_HALO_ATTR, ISO_DUPLICATE_BUBBLES_ATTR, pathGeometryOf } from '../chunk-EGUPN56K.js';
-import { sflToCanvasState, isIsometricObject, rgbToHex, parseHexRgb, rgbToHsv, tokenizeSource, roundedOrthogonalPathData, seriesLabelOffsetXProp, seriesLabelOffsetYProp, radarVertexPoint, AXIS_SIN, AXIS_COS, freeformPathData, CORNER_RADIUS_ATTR, isometricFaces, roundedPolygonPath, isometricTopFaceCenter, calculateLinkRoute, pointAtPort, roundedBarPath, barShapePath, formatBarLabel, LABEL_WIDTH, LEADER_INSET, clipSegmentToRect, radarValueAtPoint, radarSeriesPath, hsvToRgb, estimateTextWidth, wrapText, personLabelArea, isometricFaceCenter, PATH_POINT_INDEX_ATTR, linePathData, barLabelSize, BAR_LABEL, pillPath, getLineMidpoint, labelGapDash, pillCornerRadius, SQUARE_CORNER_ATTR, cornersRoundedRectPath, localShapePath, relativeOffsetOnRectangleSide, edgePointToward, SYMBOL_POINTS_ATTR, SYMBOL_TENSION_ATTR } from '../chunk-HRU6VOEC.js';
+import { screenRectOf, Emitter, resolveOwner, isCameraGesture, pointerUserPoint, clearAlignmentGuides, updateAlignmentGuides, pxPerUnit, findOwnerNode, isPrimary, SVG_NAMESPACE, isTextLabel, findSnapCandidateBounds, symbolDeclaredBounds, updateQuickDuplicateBubbles, isometricGeometryOf, updateHalo, axisArrowPlacements, updateAxisArrowGroup, PATH_HALO_ATTR, findAllOwnerNodes, findIsometricApexCandidates, DERIVED_HEIGHT_ROLES, resizeHandlePositions, ISO_HALO_ATTR, ISO_DUPLICATE_BUBBLES_ATTR, pathGeometryOf } from '../chunk-BFQWCOEC.js';
+import { sflToCanvasState, isIsometricObject, rgbToHex, parseHexRgb, rgbToHsv, tokenizeSource, roundedOrthogonalPathData, seriesLabelOffsetXProp, seriesLabelOffsetYProp, radarVertexPoint, AXIS_SIN, AXIS_COS, freeformPathData, CORNER_RADIUS_ATTR, isometricFaces, roundedPolygonPath, isometricTopFaceCenter, calculateLinkRoute, pointAtPort, roundedBarPath, barShapePath, formatBarLabel, LABEL_WIDTH, LEADER_INSET, clipSegmentToRect, radarValueAtPoint, radarSeriesPath, hsvToRgb, estimateTextWidth, wrapText, personLabelArea, isometricFaceCenter, PATH_POINT_INDEX_ATTR, linePathData, barLabelSize, BAR_LABEL, pillPath, getLineMidpoint, labelGapDash, pillCornerRadius, SQUARE_CORNER_ATTR, cornersRoundedRectPath, localShapePath, relativeOffsetOnRectangleSide, edgePointToward, SYMBOL_POINTS_ATTR, SYMBOL_TENSION_ATTR } from '../chunk-G6IW2IX3.js';
 
 // src/runtime/interaction/chartValue/coordinates.ts
 function pointerUserY(svg, event) {
@@ -834,6 +834,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);
@@ -857,6 +865,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,
@@ -867,7 +876,8 @@ function buildSolidControls(root) {
     alphaRow,
     alphaRange,
     alphaNumber,
-    hexInput
+    hexInput,
+    eyedropper
   };
 }
 function buildGradientControls(root, lockStops) {
@@ -1004,6 +1014,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);
@@ -1015,6 +1039,7 @@ function bindPickerEvents(picker) {
   }
   bindAlpha(picker);
   bindHex(picker);
+  bindEyedropper(picker);
   bindAngle(picker);
   return disposers;
 }
@@ -1312,6 +1337,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;
@@ -5609,6 +5653,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));
   });
 }
@@ -6363,7 +6411,7 @@ function braceDelta(masked) {
 }
 
 // src/runtime/interaction/sflPatch/scan/blocks.ts
-var OWNER_HEADER = /^\s*(Entity|Shape|Text|Container|Chart|Path|Link|Isometric|Widget|Component|Connection|Shader)\s+([A-Za-z_][A-Za-z0-9_]*)\b/;
+var OWNER_HEADER = /^\s*(Entity|Shape|Text|Image|Container|Chart|Path|Link|Isometric|Widget|Component|Connection|Shader)\s+([A-Za-z_][A-Za-z0-9_]*)\b/;
 var VALID_IDENT = /^[A-Za-z_][A-Za-z0-9_]*$/;
 function blockEndIn(masked, startLine) {
   let depth = 0;
@@ -6630,6 +6678,9 @@ function canvasObjectBlockKind(kind) {
   if (kind === "text") {
     return "Text";
   }
+  if (kind === "image") {
+    return "Image";
+  }
   if (kind === "isometric") {
     return "Isometric";
   }
@@ -7190,29 +7241,29 @@ function movePathPoints(lines, range, dx, dy) {
   );
   replacePropertyValue(lines, span, shifted);
 }
-function applyMoveChange(sfl, event) {
+function applyMoveChanges(sfl, events) {
   const state = 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");
+  for (const event of events) {
+    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) {
@@ -7789,6 +7840,6 @@ function bindEditing(viewer, options = {}) {
   };
 }
 
-export { applyChartValueChange, applyLinkReconnectChange, applyLinkSegmentChange, applyMoveChange, applyPathPointChange, applyPropertyChange, applyQuickDuplicateChange, applyResizeChange, applySankeyNodeMoveChange, applySankeyNodeRenameChange, applyTextChange, bindEditing, bindPropertyEditing, cssBackground, formatPickerValue, insertCanvasObject, insertConnection, insertLink, insertPath, openColorPopover, readGradientValue, removeCanvasObject, removeLink, resolveTheme, seedFrom };
+export { applyChartValueChange, applyLinkReconnectChange, applyLinkSegmentChange, applyMoveChange, applyMoveChanges, applyPathPointChange, applyPropertyChange, applyQuickDuplicateChange, applyResizeChange, applySankeyNodeMoveChange, applySankeyNodeRenameChange, applyTextChange, bindEditing, bindPropertyEditing, cssBackground, formatPickerValue, insertCanvasObject, insertConnection, insertLink, insertPath, openColorPopover, readGradientValue, removeCanvasObject, removeLink, resolveTheme, seedFrom };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map