likec4 1.55.0 → 1.55.1

package/__app__/src/vendors.js

@@ -20790,11 +20790,13 @@ function getPoints({ source, sourcePosition = Position.Bottom, target, targetPos
     const sourceGapPoint = { x: sourceGapped.x + sourceGapOffset.x, y: sourceGapped.y + sourceGapOffset.y }, targetGapPoint = { x: targetGapped.x + targetGapOffset.x, y: targetGapped.y + targetGapOffset.y }, maxXDistance = Math.max(Math.abs(sourceGapPoint.x - points[0].x), Math.abs(targetGapPoint.x - points[0].x)), maxYDistance = Math.max(Math.abs(sourceGapPoint.y - points[0].y), Math.abs(targetGapPoint.y - points[0].y));
     maxXDistance >= maxYDistance ? (centerX = (sourceGapPoint.x + targetGapPoint.x) / 2, centerY = points[0].y) : (centerX = points[0].x, centerY = (sourceGapPoint.y + targetGapPoint.y) / 2);
   }
+  const gappedSource = { x: sourceGapped.x + sourceGapOffset.x, y: sourceGapped.y + sourceGapOffset.y }, gappedTarget = { x: targetGapped.x + targetGapOffset.x, y: targetGapped.y + targetGapOffset.y };
   return [[
     source,
-    { x: sourceGapped.x + sourceGapOffset.x, y: sourceGapped.y + sourceGapOffset.y },
+    // we only want to add the gapped source/target if they are different from the first/last point to avoid duplicates which can cause issues with the bends
+    ...gappedSource.x !== points[0].x || gappedSource.y !== points[0].y ? [gappedSource] : [],
     ...points,
-    { x: targetGapped.x + targetGapOffset.x, y: targetGapped.y + targetGapOffset.y },
+    ...gappedTarget.x !== points[points.length - 1].x || gappedTarget.y !== points[points.length - 1].y ? [gappedTarget] : [],
     target
   ], centerX, centerY, defaultOffsetX, defaultOffsetY];
 }
@@ -20819,10 +20821,10 @@ function getSmoothStepPath({ sourceX, sourceY, sourcePosition = Position.Bottom,
     offset: offset2,
     stepPosition
   });
-  return [points.reduce((res, p, i2) => {
-    let segment = "";
-    return i2 > 0 && i2 < points.length - 1 ? segment = getBend(points[i2 - 1], p, points[i2 + 1], borderRadius) : segment = `${i2 === 0 ? "M" : "L"}${p.x} ${p.y}`, res += segment, res;
-  }, ""), labelX, labelY, offsetX, offsetY];
+  let path = `M${points[0].x} ${points[0].y}`;
+  for (let i2 = 1; i2 < points.length - 1; i2++)
+    path += getBend(points[i2 - 1], points[i2], points[i2 + 1], borderRadius);
+  return path += `L${points[points.length - 1].x} ${points[points.length - 1].y}`, [path, labelX, labelY, offsetX, offsetY];
 }
 function isNodeInitialized(node) {
   return node && !!(node.internals.handleBounds || node.handles?.length) && !!(node.measured.width || node.width || node.initialWidth);
@@ -20972,7 +20974,7 @@ function isManualZIndexMode(zIndexMode) {
 }
 function adoptUserNodes(nodes, nodeLookup, parentLookup, options = {}) {
   const _options = mergeObjects(adoptUserNodesDefaultOptions, options), rootParentIndex = { i: 0 }, tmpLookup = new Map(nodeLookup), selectedNodeZ = _options?.elevateNodesOnSelect && !isManualZIndexMode(_options.zIndexMode) ? SELECTED_NODE_Z : 0;
-  let nodesInitialized = nodes.length > 0;
+  let nodesInitialized = nodes.length > 0, hasSelectedNodes = !1;
   nodeLookup.clear(), parentLookup.clear();
   for (const userNode of nodes) {
     let internalNode = tmpLookup.get(userNode.id);
@@ -20996,9 +20998,9 @@ function adoptUserNodes(nodes, nodeLookup, parentLookup, options = {}) {
         }
       }, nodeLookup.set(userNode.id, internalNode);
     }
-    (internalNode.measured === void 0 || internalNode.measured.width === void 0 || internalNode.measured.height === void 0) && !internalNode.hidden && (nodesInitialized = !1), userNode.parentId && updateChildNode(internalNode, nodeLookup, parentLookup, options, rootParentIndex);
+    (internalNode.measured === void 0 || internalNode.measured.width === void 0 || internalNode.measured.height === void 0) && !internalNode.hidden && (nodesInitialized = !1), userNode.parentId && updateChildNode(internalNode, nodeLookup, parentLookup, options, rootParentIndex), hasSelectedNodes ||= userNode.selected ?? !1;
   }
-  return nodesInitialized;
+  return { nodesInitialized, hasSelectedNodes };
 }
 function updateParentLookup(node, parentLookup) {
   if (!node.parentId)
@@ -21635,7 +21637,7 @@ function createPanZoomEndHandler({ zoomPanValues, panOnDrag, panOnScroll, onDrag
         () => {
           onPanZoomEnd?.(event.sourceEvent, viewport);
         },
-        // we need a setTimeout for panOnScroll to supress multiple end events fired during scroll
+        // we need a setTimeout for panOnScroll to suppress multiple end events fired during scroll
         panOnScroll ? 150 : 0
       );
     }
@@ -22119,7 +22121,7 @@ function SelectionListener({ onSelectionChange }) {
   const storeHasSelectionChangeHandlers = useStore$1(changeSelector);
   return onSelectionChange || storeHasSelectionChangeHandlers ? jsx(SelectionListenerInner, { onSelectionChange }) : null;
 }
-const defaultNodeOrigin = [0, 0], defaultViewport = { x: 0, y: 0, zoom: 1 }, reactFlowFieldsToTrack = [
+const useIsomorphicLayoutEffect$1 = typeof window < "u" ? useLayoutEffect$1 : useEffect, defaultNodeOrigin = [0, 0], defaultViewport = { x: 0, y: 0, zoom: 1 }, reactFlowFieldsToTrack = [
   "nodes",
   "edges",
   "defaultNodes",
@@ -22203,11 +22205,11 @@ const defaultNodeOrigin = [0, 0], defaultViewport = { x: 0, y: 0, zoom: 1 }, rea
 };
 function StoreUpdater(props) {
   const { setNodes, setEdges, setMinZoom, setMaxZoom, setTranslateExtent, setNodeExtent, reset, setDefaultNodesAndEdges } = useStore$1(selector$l, shallow$1), store = useStoreApi();
-  useEffect(() => (setDefaultNodesAndEdges(props.defaultNodes, props.defaultEdges), () => {
+  useIsomorphicLayoutEffect$1(() => (setDefaultNodesAndEdges(props.defaultNodes, props.defaultEdges), () => {
     previousFields.current = initPrevValues, reset();
   }), []);
   const previousFields = useRef(initPrevValues);
-  return useEffect(
+  return useIsomorphicLayoutEffect$1(
     () => {
       for (const fieldName of fieldsToTrack) {
         const fieldValue = props[fieldName], previousFieldValue = previousFields.current[fieldName];
@@ -22283,15 +22285,15 @@ const useViewportHelper = () => {
   return useMemo(() => ({
     zoomIn: (options) => {
       const { panZoom } = store.getState();
-      return panZoom ? panZoom.scaleBy(1.2, { duration: options?.duration }) : Promise.resolve(!1);
+      return panZoom ? panZoom.scaleBy(1.2, options) : Promise.resolve(!1);
     },
     zoomOut: (options) => {
       const { panZoom } = store.getState();
-      return panZoom ? panZoom.scaleBy(1 / 1.2, { duration: options?.duration }) : Promise.resolve(!1);
+      return panZoom ? panZoom.scaleBy(1 / 1.2, options) : Promise.resolve(!1);
     },
     zoomTo: (zoomLevel, options) => {
       const { panZoom } = store.getState();
-      return panZoom ? panZoom.scaleTo(zoomLevel, { duration: options?.duration }) : Promise.resolve(!1);
+      return panZoom ? panZoom.scaleTo(zoomLevel, options) : Promise.resolve(!1);
     },
     getZoom: () => store.getState().transform[2],
     setViewport: async (viewport, options) => {
@@ -22429,7 +22431,6 @@ const isNode$1 = (element) => isNodeBase(element), isEdge = (element) => isEdgeB
 function fixedForwardRef(render) {
   return forwardRef(render);
 }
-const useIsomorphicLayoutEffect$1 = typeof window < "u" ? useLayoutEffect$1 : useEffect;
 function useQueue(runQueue) {
   const [serial, setSerial] = useState(BigInt(0)), [queue] = useState(() => createQueue(() => setSerial((n2) => n2 + BigInt(1))));
   return useIsomorphicLayoutEffect$1(() => {
@@ -23674,7 +23675,7 @@ GraphViewComponent.displayName = "GraphView";
 const GraphView = memo$2(GraphViewComponent), getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView, fitViewOptions, minZoom = 0.5, maxZoom = 2, nodeOrigin, nodeExtent, zIndexMode = "basic" } = {}) => {
   const nodeLookup = /* @__PURE__ */ new Map(), parentLookup = /* @__PURE__ */ new Map(), connectionLookup = /* @__PURE__ */ new Map(), edgeLookup = /* @__PURE__ */ new Map(), storeEdges = defaultEdges ?? edges ?? [], storeNodes = defaultNodes ?? nodes ?? [], storeNodeOrigin = nodeOrigin ?? [0, 0], storeNodeExtent = nodeExtent ?? infiniteExtent;
   updateConnectionLookup(connectionLookup, edgeLookup, storeEdges);
-  const nodesInitialized = adoptUserNodes(storeNodes, nodeLookup, parentLookup, {
+  const { nodesInitialized } = adoptUserNodes(storeNodes, nodeLookup, parentLookup, {
     nodeOrigin: storeNodeOrigin,
     nodeExtent: storeNodeExtent,
     zIndexMode
@@ -23780,14 +23781,20 @@ const GraphView = memo$2(GraphViewComponent), getInitialState = ({ nodes, edges,
       zIndexMode
     }),
     setNodes: (nodes2) => {
-      const { nodeLookup, parentLookup, nodeOrigin: nodeOrigin2, elevateNodesOnSelect, fitViewQueued, zIndexMode: zIndexMode2 } = get2(), nodesInitialized = adoptUserNodes(nodes2, nodeLookup, parentLookup, {
+      const { nodeLookup, parentLookup, nodeOrigin: nodeOrigin2, elevateNodesOnSelect, fitViewQueued, zIndexMode: zIndexMode2, nodesSelectionActive } = get2(), { nodesInitialized, hasSelectedNodes } = adoptUserNodes(nodes2, nodeLookup, parentLookup, {
         nodeOrigin: nodeOrigin2,
         nodeExtent,
         elevateNodesOnSelect,
         checkEquality: !0,
         zIndexMode: zIndexMode2
-      });
-      fitViewQueued && nodesInitialized ? (resolveFitView(), set2({ nodes: nodes2, nodesInitialized, fitViewQueued: !1, fitViewOptions: void 0 })) : set2({ nodes: nodes2, nodesInitialized });
+      }), nextNodesSelectionActive = nodesSelectionActive && hasSelectedNodes;
+      fitViewQueued && nodesInitialized ? (resolveFitView(), set2({
+        nodes: nodes2,
+        nodesInitialized,
+        fitViewQueued: !1,
+        fitViewOptions: void 0,
+        nodesSelectionActive: nextNodesSelectionActive
+      })) : set2({ nodes: nodes2, nodesInitialized, nodesSelectionActive: nextNodesSelectionActive });
     },
     setEdges: (edges2) => {
       const { connectionLookup, edgeLookup } = get2();
@@ -23804,7 +23811,7 @@ const GraphView = memo$2(GraphViewComponent), getInitialState = ({ nodes, edges,
       }
     },
     /*
-     * Every node gets registerd at a ResizeObserver. Whenever a node
+     * Every node gets registered at a ResizeObserver. Whenever a node
      * changes its dimensions, this function is called to measure the
      * new dimensions and update the nodes.
      */
@@ -23985,7 +23992,7 @@ function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTy
   const rfId = id2 || "1", colorModeClassName = useColorModeClass(colorMode), wrapperOnScroll = useCallback((e2) => {
     e2.currentTarget.scrollTo({ top: 0, left: 0, behavior: "instant" }), onScroll?.(e2);
   }, [onScroll]);
-  return jsx("div", { "data-testid": "rf__wrapper", ...rest, onScroll: wrapperOnScroll, style: { ...style2, ...wrapperStyle }, ref, className: cc(["react-flow", className, colorModeClassName]), id: id2, role: "application", children: jsxs(Wrapper, { nodes, edges, width, height, fitView, fitViewOptions, minZoom, maxZoom, nodeOrigin, nodeExtent, zIndexMode, children: [jsx(GraphView, { onInit, onNodeClick, onEdgeClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, nodeTypes, edgeTypes, connectionLineType, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, selectionKeyCode, selectionOnDrag, selectionMode, deleteKeyCode, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, onlyRenderVisibleElements, defaultViewport: defaultViewport$1, translateExtent, minZoom, maxZoom, preventScrolling, zoomOnScroll, zoomOnPinch, zoomOnDoubleClick, panOnScroll, panOnScrollSpeed, panOnScrollMode, panOnDrag, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, paneClickDistance, nodeClickDistance, onSelectionContextMenu, onSelectionStart, onSelectionEnd, onReconnect, onReconnectStart, onReconnectEnd, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius, defaultMarkerColor, noDragClassName, noWheelClassName, noPanClassName, rfId, disableKeyboardA11y, nodeExtent, viewport, onViewportChange }), jsx(StoreUpdater, { nodes, edges, defaultNodes, defaultEdges, onConnect, onConnectStart, onConnectEnd, onClickConnectStart, onClickConnectEnd, nodesDraggable, autoPanOnNodeFocus, nodesConnectable, nodesFocusable, edgesFocusable, edgesReconnectable, elementsSelectable, elevateNodesOnSelect, elevateEdgesOnSelect, minZoom, maxZoom, nodeExtent, onNodesChange, onEdgesChange, snapToGrid, snapGrid, connectionMode, translateExtent, connectOnClick, defaultEdgeOptions, fitView, fitViewOptions, onNodesDelete, onEdgesDelete, onDelete, onNodeDragStart, onNodeDrag, onNodeDragStop, onSelectionDrag, onSelectionDragStart, onSelectionDragStop, onMove, onMoveStart, onMoveEnd, noPanClassName, nodeOrigin, rfId, autoPanOnConnect, autoPanOnNodeDrag, autoPanSpeed, onError, connectionRadius, isValidConnection, selectNodesOnDrag, nodeDragThreshold, connectionDragThreshold, onBeforeDelete, debug: debug2, ariaLabelConfig, zIndexMode }), jsx(SelectionListener, { onSelectionChange }), children2, jsx(Attribution, { proOptions, position: attributionPosition }), jsx(A11yDescriptions, { rfId, disableKeyboardA11y })] }) });
+  return jsx("div", { "data-testid": "rf__wrapper", ...rest, onScroll: wrapperOnScroll, style: { ...style2, ...wrapperStyle }, ref, className: cc(["react-flow", className, colorModeClassName]), id: id2, role: "application", children: jsxs(Wrapper, { nodes, edges, width, height, fitView, fitViewOptions, minZoom, maxZoom, nodeOrigin, nodeExtent, zIndexMode, children: [jsx(StoreUpdater, { nodes, edges, defaultNodes, defaultEdges, onConnect, onConnectStart, onConnectEnd, onClickConnectStart, onClickConnectEnd, nodesDraggable, autoPanOnNodeFocus, nodesConnectable, nodesFocusable, edgesFocusable, edgesReconnectable, elementsSelectable, elevateNodesOnSelect, elevateEdgesOnSelect, minZoom, maxZoom, nodeExtent, onNodesChange, onEdgesChange, snapToGrid, snapGrid, connectionMode, translateExtent, connectOnClick, defaultEdgeOptions, fitView, fitViewOptions, onNodesDelete, onEdgesDelete, onDelete, onNodeDragStart, onNodeDrag, onNodeDragStop, onSelectionDrag, onSelectionDragStart, onSelectionDragStop, onMove, onMoveStart, onMoveEnd, noPanClassName, nodeOrigin, rfId, autoPanOnConnect, autoPanOnNodeDrag, autoPanSpeed, onError, connectionRadius, isValidConnection, selectNodesOnDrag, nodeDragThreshold, connectionDragThreshold, onBeforeDelete, debug: debug2, ariaLabelConfig, zIndexMode }), jsx(GraphView, { onInit, onNodeClick, onEdgeClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, nodeTypes, edgeTypes, connectionLineType, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, selectionKeyCode, selectionOnDrag, selectionMode, deleteKeyCode, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, onlyRenderVisibleElements, defaultViewport: defaultViewport$1, translateExtent, minZoom, maxZoom, preventScrolling, zoomOnScroll, zoomOnPinch, zoomOnDoubleClick, panOnScroll, panOnScrollSpeed, panOnScrollMode, panOnDrag, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, paneClickDistance, nodeClickDistance, onSelectionContextMenu, onSelectionStart, onSelectionEnd, onReconnect, onReconnectStart, onReconnectEnd, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius, defaultMarkerColor, noDragClassName, noWheelClassName, noPanClassName, rfId, disableKeyboardA11y, nodeExtent, viewport, onViewportChange }), jsx(SelectionListener, { onSelectionChange }), children2, jsx(Attribution, { proOptions, position: attributionPosition }), jsx(A11yDescriptions, { rfId, disableKeyboardA11y })] }) });
 }
 var index$2 = fixedForwardRef(ReactFlow);
 const selector$6 = (s) => s.domNode?.querySelector(".react-flow__edgelabel-renderer");
@@ -50371,6 +50378,9 @@ async function toCanvas(node, options = {}) {
   const { width, height } = getImageSize(node, options), svg = await toSvg(node, options), img = await createImage(svg), canvas = document.createElement("canvas"), context = canvas.getContext("2d"), ratio = options.pixelRatio || getPixelRatio(), canvasWidth = options.canvasWidth || width, canvasHeight = options.canvasHeight || height;
   return canvas.width = canvasWidth * ratio, canvas.height = canvasHeight * ratio, options.skipAutoScale || checkCanvasDimensions(canvas), canvas.style.width = `${canvasWidth}`, canvas.style.height = `${canvasHeight}`, options.backgroundColor && (context.fillStyle = options.backgroundColor, context.fillRect(0, 0, canvas.width, canvas.height)), context.drawImage(img, 0, 0, canvas.width, canvas.height), canvas;
 }
+async function toJpeg(node, options = {}) {
+  return (await toCanvas(node, options)).toDataURL("image/jpeg", options.quality || 1);
+}
 async function toBlob(node, options = {}) {
   const canvas = await toCanvas(node, options);
   return await canvasToBlob(canvas);
@@ -52610,18 +52620,19 @@ export {
   useRouter as d8,
   useParams as d9,
   LoadingOverlay as dA,
-  toBlob as dB,
-  useAsync as dC,
-  Ut as dD,
-  qt as dE,
-  Zt as dF,
-  notFound as dG,
-  Navigate as dH,
-  object as dI,
-  literal as dJ,
-  stringbool as dK,
-  string$1 as dL,
-  formatError as dM,
+  toJpeg as dB,
+  toBlob as dC,
+  useAsync as dD,
+  Ut as dE,
+  qt as dF,
+  Zt as dG,
+  notFound as dH,
+  Navigate as dI,
+  object as dJ,
+  literal as dK,
+  stringbool as dL,
+  string$1 as dM,
+  formatError as dN,
   isNotFound as da,
   Container as db,
   Code as dc,

package/__app__/src/webcomponent.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { LikeC4View as LikeC4View$1 } from "likec4:react";
 import { createRoot } from "react-dom/client";
 import { ComponentName } from "./const.js";
-import { dI as object, dJ as literal, dK as stringbool, dL as string, dM as formatError } from "./vendors.js";
+import { dJ as object, dK as literal, dL as stringbool, dM as string, dN as formatError } from "./vendors.js";
 const propsSchema = object({
   viewId: string().default("index"),
   browser: stringbool().default(!0),

package/dist/_chunks/index2.d.mts

@@ -700,7 +700,7 @@ type FqnReferenceable = Element | ExtendDeployment | ExtendElement | Referenceab
 declare const FqnReferenceable = "FqnReferenceable";
 type IconId = string;
 type IconPositionValue = 'bottom' | 'left' | 'right' | 'top';
-type Id = 'deployment' | 'element' | 'group' | 'instance' | 'model' | 'node' | ArrowType | DynamicViewDisplayVariantValue | ElementShape | IconPositionValue | LineOptions | Participant | RankValue | SizeValue | ThemeColor | string;
+type Id = 'deployment' | 'element' | 'group' | 'instance' | 'model' | 'node' | 'relationship' | ArrowType | DynamicViewDisplayVariantValue | ElementShape | IconPositionValue | LineOptions | Participant | RankValue | SizeValue | ThemeColor | string;
 type LikeC4View = DeploymentView | DynamicView | ElementView;
 declare const LikeC4View = "LikeC4View";
 type LineOptions = 'dashed' | 'dotted' | 'solid';