stickyflow 0.8.0 → 0.9.1

package/dist/{chunk-MAPNY7MJ.js → chunk-TH2HFMEL.js}

@@ -1,4 +1,4 @@
-import { componentRegistryVersion, isDimensionObject, isIsometricObject, sflToCanvasState, registerComponentDescriptor, isBuiltInComponentType, getComponentDescriptor, tag, EMPTY_BOUNDS, DOM_CONTRACT_VERSION, edgePointToward, elementCenter, VISIBLE_ISOMETRIC_FACES, isometricFaceCenter, finite, freeformPathData, rotatedBounds, DEFAULT_FONT, isGenericComponent, cleanFootprint, pointAtNormalizedPort, boxBounds, cornersRoundedRectPath, calculateLinkRoute, labelGapDash, getLineMidpoint, personLabelArea, wrapText, heuristicRichMeasure, shadeFill, extrudeFootprint, isometricFaces, roundedPolygonPath, stackSequence, stackRank, topRoundedRectPath, rightRoundedRectPath, leftRoundedRectPath, bottomRoundedRectPath, isHorizontalBar, paint, CHART_TITLE_PROP, chartText, chartTicks, mapChartValue, roundedOrthogonalPathData, localShapePath, pillCornerRadius, isometricBounds, AXIS_SIN, deriveFaceFills, labelTilt, tiltedLabelRoom, resolveChartShadow, CHART_COLORS, angleForAxisValue, horizontalRows, rowTop, categoryProp, isometricTopFaceCenter, ISOMETRIC_SIZE_ATTR, CORNER_RADIUS_ATTR, ISOMETRIC_LABEL_OFFSET_ATTR, PATH_POINTS_ATTR, PATH_TENSION_ATTR, PATH_CLOSED_ATTR, SYMBOL_BOUNDS_ATTR, SYMBOL_POINTS_ATTR, SYMBOL_TENSION_ATTR, SQUARE_CORNER_ATTR, resolvePieRadii, radarCategoryCount, radarRadius, createPieGeometry, DEFAULT_HEX_RADIUS, DEFAULT_HEATMAP_ZONES, axisBands, DEFAULT_ZONE_FILL, representativeColor, computeBoxplotStats, barCategoryCount, ruleAtProp, ruleTextProp, labelBelowFrame, seriesLabelProp, axisLabelProp, seriesColorProp, seriesValueProp, radarSeriesPath, radarRadiusForValue, createPieSlicePath, clipSegmentToRect, formatFieldValue, renderPieLabels, interpolateHexColorStops, contrastTextColor, sameHueTint, isLightColor, barShapePath, linePathData, colorWithAlpha, estimateTextWidth, segmentedBarPath, roundedBarPath, radarPointAt, gapInsetAngle, pieUsesInnerArc, maxPieCornerRadius, pieApexRadius, maxApexCornerRadius, pieArcPoint, sameHueContrastColor, zoneColorAtValue, ellipsizeToWidth, barPath, labelAboveFrame, seriesValueColorProp, stackedSegment, errorBarRange, createVerticalErrorWhiskerNode, formatBarLabel, barLabelSize, CATEGORY_LABEL_ROW, BAR_LABEL, pillPath, resolveRollingNumberStyle, formatRollingNumber } from './chunk-GLZVHUSW.js';
+import { componentRegistryVersion, isDimensionObject, isIsometricObject, sflToCanvasState, registerComponentDescriptor, isBuiltInComponentType, getComponentDescriptor, tag, EMPTY_BOUNDS, DOM_CONTRACT_VERSION, edgePointToward, elementCenter, VISIBLE_ISOMETRIC_FACES, isometricFaceCenter, finite, freeformPathData, rotatedBounds, DEFAULT_FONT, isGenericComponent, cleanFootprint, pointAtNormalizedPort, boxBounds, cornersRoundedRectPath, calculateLinkRoute, labelGapDash, getLineMidpoint, personLabelArea, wrapText, heuristicRichMeasure, shadeFill, extrudeFootprint, isometricFaces, roundedPolygonPath, stackSequence, stackRank, topRoundedRectPath, rightRoundedRectPath, leftRoundedRectPath, bottomRoundedRectPath, isHorizontalBar, paint, CHART_TITLE_PROP, chartText, chartTicks, mapChartValue, roundedOrthogonalPathData, localShapePath, pillCornerRadius, isometricBounds, AXIS_SIN, deriveFaceFills, labelTilt, tiltedLabelRoom, resolveChartShadow, CHART_COLORS, angleForAxisValue, horizontalRows, rowTop, categoryProp, isometricTopFaceCenter, ISOMETRIC_SIZE_ATTR, CORNER_RADIUS_ATTR, ISOMETRIC_LABEL_OFFSET_ATTR, PATH_POINTS_ATTR, PATH_TENSION_ATTR, PATH_CLOSED_ATTR, SYMBOL_BOUNDS_ATTR, SYMBOL_POINTS_ATTR, SYMBOL_TENSION_ATTR, SQUARE_CORNER_ATTR, resolvePieRadii, radarCategoryCount, radarRadius, createPieGeometry, DEFAULT_HEX_RADIUS, DEFAULT_HEATMAP_ZONES, axisBands, DEFAULT_ZONE_FILL, representativeColor, computeBoxplotStats, barCategoryCount, ruleAtProp, ruleTextProp, labelBelowFrame, seriesLabelProp, axisLabelProp, seriesColorProp, seriesValueProp, radarSeriesPath, radarRadiusForValue, createPieSlicePath, clipSegmentToRect, formatFieldValue, renderPieLabels, interpolateHexColorStops, contrastTextColor, sameHueTint, isLightColor, barShapePath, linePathData, colorWithAlpha, estimateTextWidth, segmentedBarPath, roundedBarPath, radarPointAt, gapInsetAngle, pieUsesInnerArc, maxPieCornerRadius, pieApexRadius, maxApexCornerRadius, pieArcPoint, sameHueContrastColor, zoneColorAtValue, ellipsizeToWidth, barPath, labelAboveFrame, seriesValueColorProp, stackedSegment, errorBarRange, createVerticalErrorWhiskerNode, formatBarLabel, barLabelSize, CATEGORY_LABEL_ROW, BAR_LABEL, pillPath, resolveRollingNumberStyle, formatRollingNumber } from './chunk-D2266VBZ.js';
 
 // src/renderInput/styleDecoding/colorToken.ts
 var COLOR_TOKEN_PATTERN = String.raw`rgba?\([^)]*\)|#[0-9a-fA-F]+|[a-zA-Z][\w-]*`;
@@ -161,6 +161,23 @@ var PATH_TYPES = ["straight", "curved", "orthogonal"];
 function optionalOneOf(value, allowed) {
   return value !== void 0 && allowed.includes(value) ? value : void 0;
 }
+var BLEND_MODES = [
+  "multiply",
+  "screen",
+  "overlay",
+  "darken",
+  "lighten",
+  "color-dodge",
+  "color-burn",
+  "hard-light",
+  "soft-light",
+  "difference",
+  "exclusion",
+  "hue",
+  "saturation",
+  "color",
+  "luminosity"
+];
 var SHAPE_STROKE_STYLES = ["solid", "dashed", "dotted", "double"];
 var MARKER_TYPES = [
   "none",
@@ -896,6 +913,7 @@ function frameObject(e) {
     showLabel: p.showLabel !== "false",
     labelPosition: oneOf(p.labelPosition, LABEL_POSITIONS, "top"),
     shadow: p.shadow !== "false",
+    clip: p.clip === "true" || void 0,
     order: e.order,
     sourceIndex: e.sourceIndex
   };
@@ -923,6 +941,7 @@ function isometricObject(canvasObject) {
     strokeColor: solidColor(presentation.stroke) ?? "#111827",
     strokeWidth: numOf(presentation.strokeWidth) ?? 1,
     cornerRadius: numOf(presentation.cornerRadius) ?? (canvasObject.isometric.footprint ? 0 : 8),
+    seams: presentation.seams === "false" ? false : void 0,
     hasShadow: shadowStyle?.enabled ?? false,
     shadowStyle,
     labelOffsetX: numOf(presentation.labelOffsetX) ?? 0,
@@ -1027,6 +1046,8 @@ function shapeObject(e, shaders) {
     dash: dashArray(p.dash),
     strokeStyle: optionalOneOf(p.strokeStyle, SHAPE_STROKE_STYLES),
     opacity: numOf(p.opacity),
+    blur: numOf(p.blur),
+    blend: optionalOneOf(p.blend, BLEND_MODES),
     parentFrameId: e.parentFrameId,
     order: e.order,
     sourceIndex: e.sourceIndex,
@@ -2957,10 +2978,10 @@ function buildBox(object, index) {
   const hullPath = roundedPolygonPath(silhouette(object), cornerRadius);
   const hullClip = { type: "path", d: hullPath };
   const groundShadow = groundShadowNode(context, faces.top);
-  const seams = seamsNode(context, faces, hullClip);
+  const seams = object.seams === false ? void 0 : seamsNode(context, faces, hullClip);
   const hull = hullNode(context, hullPath, cornerRadius);
   const facesNodes = faceNodes(context, faces, hullClip);
-  const objectNodes = groundShadow ? [hull, ...facesNodes, groundShadow, seams] : [hull, ...facesNodes, seams];
+  const objectNodes = groundShadow ? [hull, ...facesNodes, groundShadow, ...seams ? [seams] : []] : [hull, ...facesNodes, ...seams ? [seams] : []];
   return object.text ? [...objectNodes, ...labelNodes(context, object.text)] : objectNodes;
 }
 
@@ -3553,7 +3574,8 @@ var RECT_PROGRAMS = /* @__PURE__ */ new Set([
   "ledMatrix",
   "lightBand",
   "silkFolds",
-  "glowCard"
+  "glowCard",
+  "glassDots"
 ]);
 function shaderMask(context) {
   if (context.shape.shapeType === "circle" || context.shape.shapeType === "oval") {
@@ -3664,6 +3686,8 @@ function shapeStyle(shape, diagnostics) {
     dash: shapeDash(shape, strokeWidth),
     lineCap: shape.strokeStyle === "dotted" ? "round" : "butt",
     opacity: finite(shape.opacity, defaults.opacity),
+    blur: shape.blur !== void 0 && shape.blur > 0 ? shape.blur : void 0,
+    blend: shape.blend,
     shadow: shadow?.enabled ? {
       color: shadow.color ?? "#000000",
       opacity: finite(shadow.opacity, 0.25),
@@ -9473,16 +9497,111 @@ function buildCharts(charts, diagnostics) {
   );
 }
 
+// src/renderScene/scene/frameClip.ts
+var ARC_STEPS = 8;
+function turnOf(node) {
+  const turned = node;
+  if (!turned.rotation) {
+    return void 0;
+  }
+  if (turned.rotationCenter) {
+    return { angle: turned.rotation, x: turned.rotationCenter.x, y: turned.rotationCenter.y };
+  }
+  if (turned.cx !== void 0 && turned.cy !== void 0) {
+    return { angle: turned.rotation, x: turned.cx, y: turned.cy };
+  }
+  if (turned.x !== void 0 && turned.y !== void 0 && turned.width !== void 0 && turned.height !== void 0) {
+    return { angle: turned.rotation, x: turned.x + turned.width / 2, y: turned.y + turned.height / 2 };
+  }
+  return void 0;
+}
+function roundedRectPoints(frame) {
+  const { x, y, width, height } = frame;
+  const r = Math.max(0, Math.min(frame.cornerRadius, width / 2, height / 2));
+  if (r === 0) {
+    return [
+      [x, y],
+      [x + width, y],
+      [x + width, y + height],
+      [x, y + height]
+    ];
+  }
+  const corners = [
+    [x + width - r, y + r, -90],
+    [x + width - r, y + height - r, 0],
+    [x + r, y + height - r, 90],
+    [x + r, y + r, 180]
+  ];
+  return corners.flatMap(
+    ([cx, cy, start]) => Array.from({ length: ARC_STEPS + 1 }, (_, step) => {
+      const angle = (start + 90 * step / ARC_STEPS) * Math.PI / 180;
+      return [cx + r * Math.cos(angle), cy + r * Math.sin(angle)];
+    })
+  );
+}
+function clipFor(frame, turn) {
+  if (!turn) {
+    return { type: "rect", x: frame.x, y: frame.y, width: frame.width, height: frame.height, rx: frame.cornerRadius };
+  }
+  const back = -turn.angle * Math.PI / 180;
+  const cos = Math.cos(back);
+  const sin = Math.sin(back);
+  const points = roundedRectPoints(frame).map(([px, py]) => {
+    const dx = px - turn.x;
+    const dy = py - turn.y;
+    return [turn.x + dx * cos - dy * sin, turn.y + dx * sin + dy * cos];
+  });
+  const round2 = (value) => Math.round(value * 100) / 100;
+  return { type: "path", d: `M${points.map(([px, py]) => `${round2(px)} ${round2(py)}`).join("L")}Z` };
+}
+function applyFrameClips(nodes, frames) {
+  const clipping = new Map(frames.filter((frame) => frame.clip).map((frame) => [frame.id, frame]));
+  if (clipping.size === 0) {
+    return;
+  }
+  const inside = /* @__PURE__ */ new Map();
+  for (const node of nodes) {
+    const parent = node.identity?.parentFrameId;
+    const frame = parent ? clipping.get(parent) : void 0;
+    if (node.identity && frame) {
+      inside.set(`${node.identity.role}:${node.identity.id}`, frame);
+    }
+  }
+  for (const node of nodes) {
+    const frame = node.identity ? inside.get(`${node.identity.role}:${node.identity.id}`) : void 0;
+    const styled = node;
+    if (frame && styled.style) {
+      const edge = clipFor(frame, turnOf(node));
+      styled.style = { ...styled.style, clip: styled.style.clip ? { ...styled.style.clip, within: edge } : edge };
+    }
+  }
+}
+
 // src/renderScene/scene/build.ts
+function visibleBounds(node) {
+  let { minX, minY, maxX, maxY } = node.bounds;
+  let clip = "style" in node ? node.style?.clip : void 0;
+  while (clip) {
+    if (clip.type === "rect") {
+      minX = Math.max(minX, clip.x);
+      minY = Math.max(minY, clip.y);
+      maxX = Math.min(maxX, clip.x + clip.width);
+      maxY = Math.min(maxY, clip.y + clip.height);
+    }
+    clip = clip.within;
+  }
+  return minX <= maxX && minY <= maxY ? { minX, minY, maxX, maxY } : node.bounds;
+}
 function sceneBounds(nodes) {
   if (!nodes.length) {
     return EMPTY_BOUNDS;
   }
+  const all = nodes.map(visibleBounds);
   return {
-    minX: Math.min(...nodes.map((n) => n.bounds.minX)),
-    minY: Math.min(...nodes.map((n) => n.bounds.minY)),
-    maxX: Math.max(...nodes.map((n) => n.bounds.maxX)),
-    maxY: Math.max(...nodes.map((n) => n.bounds.maxY))
+    minX: Math.min(...all.map((b) => b.minX)),
+    minY: Math.min(...all.map((b) => b.minY)),
+    maxX: Math.max(...all.map((b) => b.maxX)),
+    maxY: Math.max(...all.map((b) => b.maxY))
   };
 }
 function stackingOf(input) {
@@ -9531,6 +9650,7 @@ function buildRenderScene(input, options = {}) {
     ...buildIsometricObjects(input.isometricObjects ?? []),
     ...buildDimensions(input.dimensions ?? [])
   ];
+  applyFrameClips(nodes, input.frames);
   stampStacking(nodes, input);
   nodes.sort(
     (a, b) => (a.rank ?? 0) - (b.rank ?? 0) || (a.sequence ?? 0) - (b.sequence ?? 0) || a.order - b.order || (a.id < b.id ? -1 : a.id > b.id ? 1 : 0)
@@ -9553,17 +9673,17 @@ var SvgClipDefinitions = class {
   prefix;
   ids = /* @__PURE__ */ new Map();
   clip(style) {
-    if (!style.clip) {
-      return void 0;
-    }
-    const key = JSON.stringify(style.clip);
+    return style.clip ? this.define(style.clip) : void 0;
+  }
+  define(clip) {
+    const key = JSON.stringify(clip);
     let id = this.ids.get(key);
     if (!id) {
+      const outer = clip.within ? this.define(clip.within) : void 0;
       id = safeId(`${this.prefix}clip-${this.ids.size}`);
       this.ids.set(key, id);
-      const clip = style.clip;
       const shape = clip.type === "path" ? `<path clip-rule="evenodd" d="${xml(clip.d)}"/>` : `<rect x="${num(clip.x)}" y="${num(clip.y)}" width="${num(clip.width)}" height="${num(clip.height)}" rx="${num(clip.rx)}"/>`;
-      this.addDefinition(`<clipPath id="${id}">${shape}</clipPath>`);
+      this.addDefinition(`<clipPath id="${id}"${outer ? ` clip-path="url(#${outer})"` : ""}>${shape}</clipPath>`);
     }
     return id;
   }
@@ -9592,7 +9712,8 @@ var SvgFilterDefinitions = class {
       );
     }
     if (style.blur || style.saturate !== void 0) {
-      return this.define(nodeId, { blur: style.blur ?? 0, saturate: style.saturate ?? 1 }, blurPrimitives);
+      const margin = size && size > 0 && style.blur ? Math.max(0.5, style.blur * 1.5 / size) : 0.5;
+      return this.define(nodeId, { blur: style.blur ?? 0, saturate: style.saturate ?? 1 }, blurPrimitives, margin);
     }
     return void 0;
   }
@@ -9839,12 +9960,19 @@ function addStrokeAttrs(attrs, style) {
   if (style.pointerEvents) {
     attrs.push(`pointer-events="${style.pointerEvents}"`);
   }
+  const css = [];
   if (style.transition && style.transition > 0) {
     const time = `${num(style.transition)}ms ease`;
-    attrs.push(
-      `style="transition: x ${time}, y ${time}, width ${time}, height ${time}, cx ${time}, cy ${time}, rx ${time}, ry ${time}, fill ${time}, stroke ${time}, stroke-width ${time}, stroke-dasharray ${time}, opacity ${time}"`
+    css.push(
+      `transition: x ${time}, y ${time}, width ${time}, height ${time}, cx ${time}, cy ${time}, rx ${time}, ry ${time}, fill ${time}, stroke ${time}, stroke-width ${time}, stroke-dasharray ${time}, opacity ${time}`
     );
   }
+  if (style.blend) {
+    css.push(`mix-blend-mode: ${xml(style.blend)}`);
+  }
+  if (css.length > 0) {
+    attrs.push(`style="${css.join("; ")}"`);
+  }
 }
 function elementSize(node) {
   const shape = node;
@@ -10212,5 +10340,5 @@ function defineComponent(definition) {
 }
 
 export { collectCanvasObjects, decodeColor, decodeShadow, defineComponent, render, renderCanvas, sflToRenderInput, sliderReach };
-//# sourceMappingURL=chunk-MAPNY7MJ.js.map
-//# sourceMappingURL=chunk-MAPNY7MJ.js.map
+//# sourceMappingURL=chunk-TH2HFMEL.js.map
+//# sourceMappingURL=chunk-TH2HFMEL.js.map