stickyflow 0.9.3 → 0.11.0

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;

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;

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, ISO_HALO_ATTR, ISO_DUPLICATE_BUBBLES_ATTR, updateHalo, axisArrowPlacements, updateAxisArrowGroup, PATH_HALO_ATTR, findAllOwnerNodes, findIsometricApexCandidates, DERIVED_HEIGHT_ROLES, resizeHandlePositions, pathGeometryOf } from '../chunk-AAP24GBG.js';
-import { sflToCanvasState, isIsometricObject, 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, 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-Q6FBISNP.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) {
@@ -455,16 +455,9 @@ function bindChartValueDrag(viewer, emitter) {
 }
 
 // src/runtime/interaction/colorEdit/color.ts
-var HEX = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
 function normalizeHex(value) {
-  const raw = value.trim();
-  const withHash = raw.startsWith("#") ? raw : `#${raw}`;
-  if (!HEX.test(withHash)) {
-    return null;
-  }
-  const body = withHash.slice(1);
-  const full = body.length === 3 ? body.split("").map((char) => char + char).join("") : body;
-  return `#${full.toLowerCase()}`;
+  const channels = parseHexRgb(value);
+  return channels && rgbToHex(...channels);
 }
 var COLOR_FUNCTION = /^rgba?\(\s*(\d{1,3})\s*[, ]\s*(\d{1,3})\s*[, ]\s*(\d{1,3})\s*(?:[,/]\s*(\d*\.?\d+)(%?)\s*)?\)$/i;
 var HEX_WITH_ALPHA = /^#([0-9a-f]{6})([0-9a-f]{2})$/i;
@@ -474,7 +467,7 @@ function parseColorAlpha(value) {
   if (fn) {
     const alpha = fn[4] === void 0 ? 1 : Number(fn[4]) / (fn[5] ? 100 : 1);
     return {
-      hex: rgbToHex({ r: Number(fn[1]), g: Number(fn[2]), b: Number(fn[3]) }),
+      hex: rgbToHex2({ r: Number(fn[1]), g: Number(fn[2]), b: Number(fn[3]) }),
       alpha: Math.max(0, Math.min(1, alpha))
     };
   }
@@ -503,63 +496,28 @@ function clampChannel(value) {
   return Math.max(0, Math.min(255, Math.round(value)));
 }
 function hexToRgb(hex) {
-  const normalized = normalizeHex(hex) ?? "#000000";
-  return {
-    r: Number.parseInt(normalized.slice(1, 3), 16),
-    g: Number.parseInt(normalized.slice(3, 5), 16),
-    b: Number.parseInt(normalized.slice(5, 7), 16)
-  };
-}
-function rgbToHex(rgb) {
-  const channel = (value) => clampChannel(value).toString(16).padStart(2, "0");
-  return `#${channel(rgb.r)}${channel(rgb.g)}${channel(rgb.b)}`;
-}
-function hsvToRgb(hsv) {
-  const h = (hsv.h % 360 + 360) % 360;
-  const s = Math.max(0, Math.min(1, hsv.s));
-  const v = Math.max(0, Math.min(1, hsv.v));
-  const c = v * s;
-  const x = c * (1 - Math.abs(h / 60 % 2 - 1));
-  const m = v - c;
-  const sector = Math.floor(h / 60);
-  const table = [
-    [c, x, 0],
-    [x, c, 0],
-    [0, c, x],
-    [0, x, c],
-    [x, 0, c],
-    [c, 0, x]
-  ];
-  const [r, g, b] = table[sector] ?? table[0];
-  return { r: Math.round((r + m) * 255), g: Math.round((g + m) * 255), b: Math.round((b + m) * 255) };
-}
-function rgbToHsv(rgb) {
-  const r = clampChannel(rgb.r) / 255;
-  const g = clampChannel(rgb.g) / 255;
-  const b = clampChannel(rgb.b) / 255;
-  const max = Math.max(r, g, b);
-  const min = Math.min(r, g, b);
-  const delta = max - min;
-  let h = 0;
-  if (delta !== 0) {
-    if (max === r) {
-      h = 60 * ((g - b) / delta % 6);
-    } else if (max === g) {
-      h = 60 * ((b - r) / delta + 2);
-    } else {
-      h = 60 * ((r - g) / delta + 4);
-    }
-  }
-  if (h < 0) {
-    h += 360;
-  }
-  return { h, s: max === 0 ? 0 : delta / max, v: max };
+  const [r, g, b] = parseHexRgb(hex) ?? [0, 0, 0];
+  return { r, g, b };
+}
+function rgbToHex2(rgb) {
+  return rgbToHex(clampChannel(rgb.r), clampChannel(rgb.g), clampChannel(rgb.b));
+}
+function hsvToRgb2(hsv) {
+  const { r, g, b } = hsvToRgb(
+    (hsv.h % 360 + 360) % 360,
+    Math.max(0, Math.min(1, hsv.s)),
+    Math.max(0, Math.min(1, hsv.v))
+  );
+  return { r, g, b };
+}
+function rgbToHsv2(rgb) {
+  return rgbToHsv(clampChannel(rgb.r), clampChannel(rgb.g), clampChannel(rgb.b));
 }
 function hexToHsv(hex) {
-  return rgbToHsv(hexToRgb(hex));
+  return rgbToHsv2(hexToRgb(hex));
 }
 function hsvToHex(hsv) {
-  return rgbToHex(hsvToRgb(hsv));
+  return rgbToHex2(hsvToRgb2(hsv));
 }
 
 // src/runtime/interaction/colorEdit/gradientValue.ts
@@ -1000,9 +958,9 @@ function bindChannel(picker, channel) {
       return;
     }
     const next = { ...hexToRgb(activeHex(picker)), [channel]: value };
-    const nextHsv = rgbToHsv(next);
+    const nextHsv = rgbToHsv2(next);
     picker.state.hsv = nextHsv.s === 0 ? { ...nextHsv, h: picker.state.hsv.h } : nextHsv;
-    setActiveColor(picker, rgbToHex(next));
+    setActiveColor(picker, rgbToHex2(next));
     picker.render();
   };
   const read = (event) => event.target.value;
@@ -2268,19 +2226,40 @@ function collectNodes(svg, ownerId) {
     labelGuide: bySuffix("-label-guide")
   };
 }
-function createIsometricAxisDragState(svg, event) {
+function findResizeHandle(event) {
   const target = event.target;
   const captureTarget = target?.closest?.("[data-sf-resize-handle]");
   const handleAttr = captureTarget?.getAttribute("data-sf-resize-handle");
   if (!captureTarget || !handleAttr?.startsWith("iso-")) {
     return null;
   }
-  const axis = handleAttr.slice(4);
   const overlay = captureTarget.closest("[data-sf-selection-overlay]");
   const ownerId = overlay?.getAttribute("data-sf-selection-overlay");
-  if (!ownerId) {
+  if (!overlay || !ownerId) {
+    return null;
+  }
+  return { captureTarget, axis: handleAttr.slice(4), overlay, ownerId };
+}
+function overlayPartsOf(overlay) {
+  const overlayHalo = overlay.querySelector(`[${ISO_HALO_ATTR}]`) ?? null;
+  const overlayArrows = Object.fromEntries(
+    AXES.map((axis) => [
+      axis,
+      overlay.querySelector(`[data-sf-resize-handle="iso-${axis}"]`) ?? null
+    ])
+  );
+  const overlayDuplicateBubbles = overlay.querySelector(`[${ISO_DUPLICATE_BUBBLES_ATTR}]`) ?? null;
+  if (overlayDuplicateBubbles) {
+    overlayDuplicateBubbles.style.display = "none";
+  }
+  return { overlayHalo, overlayArrows, overlayDuplicateBubbles };
+}
+function createIsometricAxisDragState(svg, event) {
+  const handle = findResizeHandle(event);
+  if (!handle) {
     return null;
   }
+  const { captureTarget, axis, overlay, ownerId } = handle;
   const primary = findOwnerNode(svg, ownerId, isPrimary);
   const owner = primary && resolveOwner(primary);
   if (!primary || owner?.role !== "isometric") {
@@ -2297,17 +2276,6 @@ function createIsometricAxisDragState(svg, event) {
     node?.removeAttribute("clip-path");
   });
   captureTarget.setPointerCapture?.(event.pointerId);
-  const overlayHalo = overlay?.querySelector(`[${ISO_HALO_ATTR}]`) ?? null;
-  const overlayArrows = Object.fromEntries(
-    AXES.map((axis2) => [
-      axis2,
-      overlay?.querySelector(`[data-sf-resize-handle="iso-${axis2}"]`) ?? null
-    ])
-  );
-  const overlayDuplicateBubbles = overlay?.querySelector(`[${ISO_DUPLICATE_BUBBLES_ATTR}]`) ?? null;
-  if (overlayDuplicateBubbles) {
-    overlayDuplicateBubbles.style.display = "none";
-  }
   const start = {
     x: bounds.x,
     y: bounds.y,
@@ -2323,9 +2291,7 @@ function createIsometricAxisDragState(svg, event) {
     start,
     cornerRadius: geometry?.cornerRadius ?? Number(primary.getAttribute(CORNER_RADIUS_ATTR)) ?? 0,
     nodes,
-    overlayHalo,
-    overlayArrows,
-    overlayDuplicateBubbles,
+    ...overlayPartsOf(overlay),
     liveFaceLinks: findLiveFaceLinks(svg, ownerId),
     moved: false,
     current: start
@@ -2686,25 +2652,12 @@ function crossedEndpointDragThreshold(drag, event) {
 }
 
 // src/runtime/interaction/linkEndpoint/preview.ts
-function previewLink2(fromSide, toSide) {
-  return {
-    id: "preview",
-    fromId: "",
-    toId: "",
-    layerGroup: "",
-    orderKey: "",
-    isVisible: true,
-    isLocked: false,
-    fromPoint: { kind: "side", side: fromSide, offset: 0.5 },
-    toPoint: { kind: "side", side: toSide, offset: 0.5 }
-  };
-}
 function updateEndpointPreview(drag, draggedPoint, draggedSide) {
   const fromPoint = drag.end === "from" ? draggedPoint : drag.fixedPoint;
   const toPoint = drag.end === "to" ? draggedPoint : drag.fixedPoint;
   const fromSide = drag.end === "from" ? draggedSide : drag.fixedSide;
   const toSide = drag.end === "to" ? draggedSide : drag.fixedSide;
-  const { points, segments } = calculateLinkRoute(previewLink2(fromSide, toSide), fromPoint, toPoint, drag.pathType);
+  const { points, segments } = calculateLinkRoute(previewLink(fromSide, toSide), fromPoint, toPoint, drag.pathType);
   drag.path.setAttribute("d", previewPathData(points, segments, drag.pathType, drag.strokeWidth));
 }
 
@@ -5007,21 +4960,8 @@ function createDuplicatePreviewPath(svg) {
   path.style.pointerEvents = "none";
   return path;
 }
-function previewLink3(fromSide, toSide) {
-  return {
-    id: "preview",
-    fromId: "",
-    toId: "",
-    layerGroup: "",
-    orderKey: "",
-    isVisible: true,
-    isLocked: false,
-    fromPoint: { kind: "side", side: fromSide, offset: 0.5 },
-    toPoint: { kind: "side", side: toSide, offset: 0.5 }
-  };
-}
 function updateDuplicatePreview(drag, toPoint, toSide) {
-  const link = previewLink3(drag.direction, toSide);
+  const link = previewLink(drag.direction, toSide);
   const { points, segments } = calculateLinkRoute(link, drag.fixedPoint, toPoint, NEW_LINK_PATH_TYPE);
   drag.previewPath.setAttribute("d", previewPathData(points, segments, NEW_LINK_PATH_TYPE, 2));
 }
@@ -6423,7 +6363,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;
@@ -6690,6 +6630,9 @@ function canvasObjectBlockKind(kind) {
   if (kind === "text") {
     return "Text";
   }
+  if (kind === "image") {
+    return "Image";
+  }
   if (kind === "isometric") {
     return "Isometric";
   }
@@ -6808,18 +6751,7 @@ function findReferencingLinkRanges(lines, canvasObjectId) {
   return ranges;
 }
 
-// src/runtime/interaction/sflPatch/canvasObjectPatch/removalRanges.ts
-function containsRange(container, candidate) {
-  const sameRange = container.start === candidate.start && container.end === candidate.end;
-  return !sameRange && container.start <= candidate.start && container.end >= candidate.end;
-}
-function outermostRemovalRanges(ranges) {
-  return ranges.filter(
-    (candidate) => !ranges.some((container) => container !== candidate && containsRange(container, candidate))
-  );
-}
-
-// src/runtime/interaction/sflPatch/canvasObjectPatch/repeatCell.ts
+// src/runtime/interaction/sflPatch/canvasObjectPatch/madeBlocks.ts
 var REPEAT_HEADER = /^(\s*)Repeat\s+[A-Za-z_]\w*\s*\{\s*$/;
 var TEMPLATE_HEADER = /^\s*[A-Z]\w*\s+([A-Za-z_]\w*)\b[^{]*\{/;
 var PROPERTY = /^\s*[A-Za-z_]\w*\s*:/;
@@ -6846,7 +6778,7 @@ function excludeRepeatCell(lines, id) {
         const template = masked[i].match(TEMPLATE_HEADER);
         if (template) {
           seenTemplate = true;
-          const made = id.match(new RegExp(`^${escaped(template[1])}_(\\d+)(?:_(\\d+))?$`));
+          const made = id.match(new RegExp(`^${escaped(template[1])}_(\\d+)(?:_(\\d+))?(?:_[A-Za-z]\\w*)?$`));
           if (made) {
             cell = { col: Number(made[1]), row: made[2] === void 0 ? 0 : Number(made[2]) };
           }
@@ -6875,13 +6807,48 @@ function excludeRepeatCell(lines, id) {
   }
   return null;
 }
+var USE_HEADER = /^\s*Use\s+([A-Za-z_]\w*)\s*:/;
+function findUseBlock(lines, id) {
+  const masked = maskLines(lines);
+  if (masked === null) {
+    return null;
+  }
+  let found = null;
+  for (let start = 0; start < masked.length; start++) {
+    const header = masked[start].match(USE_HEADER);
+    if (header && id.startsWith(`${header[1]}_`) && (found === null || header[1].length > found.length)) {
+      found = { start, end: blockEndLine(lines, start), length: header[1].length };
+    }
+  }
+  return found && { start: found.start, end: found.end };
+}
+
+// src/runtime/interaction/sflPatch/canvasObjectPatch/removalRanges.ts
+function containsRange(container, candidate) {
+  const sameRange = container.start === candidate.start && container.end === candidate.end;
+  return !sameRange && container.start <= candidate.start && container.end >= candidate.end;
+}
+function outermostRemovalRanges(ranges) {
+  return ranges.filter(
+    (candidate) => !ranges.some((container) => container !== candidate && containsRange(container, candidate))
+  );
+}
 
 // src/runtime/interaction/sflPatch/canvasObjectPatch/remove.ts
 function removeCanvasObject(sfl, id, options = {}) {
   const lines = sfl.split("\n");
   const canvasObjectRange = findOwnerBlock(lines, id);
   if (!canvasObjectRange) {
-    return excludeRepeatCell(lines, id)?.join("\n") ?? sfl;
+    const cell = excludeRepeatCell(lines, id);
+    if (cell) {
+      return cell.join("\n");
+    }
+    const use = findUseBlock(lines, id);
+    if (use) {
+      lines.splice(use.start, use.end - use.start + 1);
+      return lines.join("\n");
+    }
+    return sfl;
   }
   const ranges = [canvasObjectRange];
   if (options.alsoRemoveLinks ?? true) {