@likec4/diagram 1.55.1 → 1.56.0

package/dist/base/Base.js

@@ -1,53 +1,46 @@
-import { hasSubObject } from 'remeda';
-
-const _setDimmed = (v, dimmed) => (v.data.dimmed ?? false) === dimmed ? v : {
-  ...v,
-  data: {
-    ...v.data,
-    dimmed
-  }
+import "../_virtual/_rolldown/runtime.js";
+import { hasSubObject } from "remeda";
+//#region src/base/Base.ts
+var _setDimmed = (v, dimmed) => (v.data.dimmed ?? false) === dimmed ? v : {
+	...v,
+	data: {
+		...v.data,
+		dimmed
+	}
 };
 function setDimmed(arg1, arg2) {
-  if (arg2 !== void 0) {
-    return _setDimmed(arg1, arg2);
-  }
-  return (v) => _setDimmed(v, arg1);
+	if (arg2 !== void 0) return _setDimmed(arg1, arg2);
+	return (v) => _setDimmed(v, arg1);
 }
-const _setHovered = (v, hovered) => (v.data.hovered ?? false) === hovered ? v : {
-  ...v,
-  data: {
-    ...v.data,
-    hovered
-  }
+var _setHovered = (v, hovered) => (v.data.hovered ?? false) === hovered ? v : {
+	...v,
+	data: {
+		...v.data,
+		hovered
+	}
 };
 function setHovered(arg1, arg2) {
-  if (arg2 !== void 0) {
-    return _setHovered(arg1, arg2);
-  }
-  return (v) => _setHovered(v, arg1);
+	if (arg2 !== void 0) return _setHovered(arg1, arg2);
+	return (v) => _setHovered(v, arg1);
 }
 function _setData(value, state) {
-  if (hasSubObject(value.data, state)) {
-    return value;
-  }
-  return {
-    ...value,
-    data: {
-      ...value.data,
-      ...state
-    }
-  };
+	if (hasSubObject(value.data, state)) return value;
+	return {
+		...value,
+		data: {
+			...value.data,
+			...state
+		}
+	};
 }
 function setData(arg1, arg2) {
-  if (arg2 !== void 0) {
-    return _setData(arg1, arg2);
-  }
-  return (edge) => _setData(edge, arg1);
+	if (arg2 !== void 0) return _setData(arg1, arg2);
+	return (edge) => _setData(edge, arg1);
 }
-const Base = {
-  setDimmed,
-  setHovered,
-  setData
+var Base = {
+	setDimmed,
+	setHovered,
+	setData
 };
-
+//#endregion
 export { Base };

package/dist/base/BaseXYFlow.js

@@ -1,168 +1,138 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { cx } from '@likec4/styles/css';
-import { useMantineColorScheme } from '@mantine/core';
-import { ReactFlow, useStore } from '@xyflow/react';
-import { useMemo } from 'react';
-import { useCallbackRef } from '../hooks/useCallbackRef.js';
-import { useUpdateEffect } from '../hooks/useUpdateEffect.js';
-import { useIsZoomTooSmall, useXYStoreApi } from '../hooks/useXYFlow.js';
-import { roundDpr } from '../utils/roundDpr.js';
-import { stopPropagation } from '../utils/xyflow.js';
-import { Background } from './Background.js';
-import { Base } from './Base.js';
-import { MinZoom, MaxZoom } from './const.js';
-
-function BaseXYFlow({
-  nodes,
-  edges,
-  onEdgesChange,
-  onNodesChange,
-  className,
-  pannable = true,
-  zoomable = true,
-  nodesSelectable = true,
-  nodesDraggable = false,
-  background = "dots",
-  children,
-  colorMode,
-  fitViewPadding = 0,
-  fitView = true,
-  zoomOnDoubleClick = false,
-  onViewportResize,
-  onMoveEnd,
-  onNodeMouseEnter,
-  onNodeMouseLeave,
-  onEdgeMouseEnter,
-  onEdgeMouseLeave,
-  ...props
-}) {
-  const fitViewOptions = useMemo(() => ({
-    minZoom: MinZoom,
-    maxZoom: 1,
-    padding: fitViewPadding,
-    includeHiddenNodes: false
-  }), [fitViewPadding]);
-  const isBgWithPattern = background !== "transparent" && background !== "solid";
-  const isZoomTooSmall = useIsZoomTooSmall();
-  const xystore = useXYStoreApi();
-  const { colorScheme } = useMantineColorScheme();
-  if (!colorMode) {
-    colorMode = colorScheme === "auto" ? "system" : colorScheme;
-  }
-  return /* @__PURE__ */ jsxs(
-    ReactFlow,
-    {
-      colorMode,
-      nodes,
-      edges,
-      className: cx(
-        background === "transparent" && "bg-transparent",
-        className
-      ),
-      ...isZoomTooSmall && {
-        ["data-likec4-zoom-small"]: true
-      },
-      zoomOnPinch: zoomable,
-      zoomOnScroll: !pannable && zoomable,
-      ...!zoomable && {
-        zoomActivationKeyCode: null
-      },
-      zoomOnDoubleClick,
-      maxZoom: zoomable ? MaxZoom : 1,
-      minZoom: zoomable ? MinZoom : 1,
-      fitView,
-      fitViewOptions,
-      preventScrolling: zoomable || pannable,
-      defaultMarkerColor: "var(--xy-edge-stroke)",
-      noDragClassName: "nodrag",
-      noPanClassName: "nopan",
-      noWheelClassName: "nowheel",
-      panOnScroll: pannable,
-      panOnDrag: pannable,
-      ...!pannable && {
-        panActivationKeyCode: null,
-        selectionKeyCode: null
-      },
-      elementsSelectable: nodesSelectable,
-      nodesFocusable: nodesDraggable || nodesSelectable,
-      edgesFocusable: false,
-      nodesDraggable,
-      nodeDragThreshold: 4,
-      nodeClickDistance: 3,
-      paneClickDistance: 3,
-      elevateNodesOnSelect: false,
-      selectNodesOnDrag: false,
-      onNodesChange,
-      onEdgesChange,
-      onMoveEnd: useCallbackRef((event, { x, y, zoom }) => {
-        const roundedX = roundDpr(x), roundedY = roundDpr(y);
-        if (x !== roundedX || y !== roundedY) {
-          xystore.setState({ transform: [roundedX, roundedY, zoom] });
-        }
-        onMoveEnd?.(event, { x: roundedX, y: roundedY, zoom });
-      }),
-      onNodeMouseEnter: useCallbackRef((event, node) => {
-        if (onNodeMouseEnter) {
-          onNodeMouseEnter(event, node);
-          return;
-        }
-        onNodesChange([{
-          id: node.id,
-          type: "replace",
-          item: Base.setHovered(node, true)
-        }]);
-      }),
-      onNodeMouseLeave: useCallbackRef((event, node) => {
-        if (onNodeMouseLeave) {
-          onNodeMouseLeave(event, node);
-          return;
-        }
-        onNodesChange([{
-          id: node.id,
-          type: "replace",
-          item: Base.setHovered(node, false)
-        }]);
-      }),
-      onEdgeMouseEnter: useCallbackRef((event, edge) => {
-        if (onEdgeMouseEnter) {
-          onEdgeMouseEnter(event, edge);
-          return;
-        }
-        onEdgesChange([{
-          id: edge.id,
-          type: "replace",
-          item: Base.setHovered(edge, true)
-        }]);
-      }),
-      onEdgeMouseLeave: useCallbackRef((event, edge) => {
-        if (onEdgeMouseLeave) {
-          onEdgeMouseLeave(event, edge);
-          return;
-        }
-        onEdgesChange([{
-          id: edge.id,
-          type: "replace",
-          item: Base.setHovered(edge, false)
-        }]);
-      }),
-      onNodeDoubleClick: stopPropagation,
-      onEdgeDoubleClick: stopPropagation,
-      ...props,
-      children: [
-        isBgWithPattern && /* @__PURE__ */ jsx(Background, { background }),
-        onViewportResize && /* @__PURE__ */ jsx(ViewportResizeHanlder, { onViewportResize }),
-        children
-      ]
-    }
-  );
+import "../_virtual/_rolldown/runtime.js";
+import { Background as Background$1 } from "./Background.js";
+import { useCallbackRef } from "../hooks/useCallbackRef.js";
+import { useUpdateEffect } from "../hooks/useUpdateEffect.js";
+import { useIsZoomTooSmall, useXYStoreApi } from "../hooks/useXYFlow.js";
+import { roundDpr } from "../utils/roundDpr.js";
+import { stopPropagation } from "../utils/xyflow.js";
+import { Base } from "./Base.js";
+import { MinZoom } from "./const.js";
+import { cx } from "@likec4/styles/css";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ReactFlow, useStore } from "@xyflow/react";
+import { useMantineColorScheme } from "@mantine/core";
+//#region src/base/BaseXYFlow.tsx
+function BaseXYFlow({ nodes, edges, onEdgesChange, onNodesChange, className, pannable = true, zoomable = true, nodesSelectable = true, nodesDraggable = false, background = "dots", children, colorMode, fitViewPadding = 0, fitView = true, zoomOnDoubleClick = false, onViewportResize, onMoveEnd, onNodeMouseEnter, onNodeMouseLeave, onEdgeMouseEnter, onEdgeMouseLeave, ...props }) {
+	const fitViewOptions = useMemo(() => ({
+		minZoom: MinZoom,
+		maxZoom: 1,
+		padding: fitViewPadding,
+		includeHiddenNodes: false
+	}), [fitViewPadding]);
+	const isBgWithPattern = background !== "transparent" && background !== "solid";
+	const isZoomTooSmall = useIsZoomTooSmall();
+	const xystore = useXYStoreApi();
+	const { colorScheme } = useMantineColorScheme();
+	if (!colorMode) colorMode = colorScheme === "auto" ? "system" : colorScheme;
+	return /* @__PURE__ */ jsxs(ReactFlow, {
+		colorMode,
+		nodes,
+		edges,
+		className: cx(background === "transparent" && "bg-transparent", className),
+		...isZoomTooSmall && { ["data-likec4-zoom-small"]: true },
+		zoomOnPinch: zoomable,
+		zoomOnScroll: !pannable && zoomable,
+		...!zoomable && { zoomActivationKeyCode: null },
+		zoomOnDoubleClick,
+		maxZoom: zoomable ? 3 : 1,
+		minZoom: zoomable ? MinZoom : 1,
+		fitView,
+		fitViewOptions,
+		preventScrolling: zoomable || pannable,
+		defaultMarkerColor: "var(--xy-edge-stroke)",
+		noDragClassName: "nodrag",
+		noPanClassName: "nopan",
+		noWheelClassName: "nowheel",
+		panOnScroll: pannable,
+		panOnDrag: pannable,
+		...!pannable && {
+			panActivationKeyCode: null,
+			selectionKeyCode: null
+		},
+		elementsSelectable: nodesSelectable,
+		nodesFocusable: nodesDraggable || nodesSelectable,
+		edgesFocusable: false,
+		nodesDraggable,
+		nodeDragThreshold: 4,
+		nodeClickDistance: 3,
+		paneClickDistance: 3,
+		elevateNodesOnSelect: false,
+		selectNodesOnDrag: false,
+		onNodesChange,
+		onEdgesChange,
+		onMoveEnd: useCallbackRef((event, { x, y, zoom }) => {
+			const roundedX = roundDpr(x);
+			const roundedY = roundDpr(y);
+			if (x !== roundedX || y !== roundedY) xystore.setState({ transform: [
+				roundedX,
+				roundedY,
+				zoom
+			] });
+			onMoveEnd?.(event, {
+				x: roundedX,
+				y: roundedY,
+				zoom
+			});
+		}),
+		onNodeMouseEnter: useCallbackRef((event, node) => {
+			if (onNodeMouseEnter) {
+				onNodeMouseEnter(event, node);
+				return;
+			}
+			onNodesChange([{
+				id: node.id,
+				type: "replace",
+				item: Base.setHovered(node, true)
+			}]);
+		}),
+		onNodeMouseLeave: useCallbackRef((event, node) => {
+			if (onNodeMouseLeave) {
+				onNodeMouseLeave(event, node);
+				return;
+			}
+			onNodesChange([{
+				id: node.id,
+				type: "replace",
+				item: Base.setHovered(node, false)
+			}]);
+		}),
+		onEdgeMouseEnter: useCallbackRef((event, edge) => {
+			if (onEdgeMouseEnter) {
+				onEdgeMouseEnter(event, edge);
+				return;
+			}
+			onEdgesChange([{
+				id: edge.id,
+				type: "replace",
+				item: Base.setHovered(edge, true)
+			}]);
+		}),
+		onEdgeMouseLeave: useCallbackRef((event, edge) => {
+			if (onEdgeMouseLeave) {
+				onEdgeMouseLeave(event, edge);
+				return;
+			}
+			onEdgesChange([{
+				id: edge.id,
+				type: "replace",
+				item: Base.setHovered(edge, false)
+			}]);
+		}),
+		onNodeDoubleClick: stopPropagation,
+		onEdgeDoubleClick: stopPropagation,
+		...props,
+		children: [
+			isBgWithPattern && /* @__PURE__ */ jsx(Background$1, { background }),
+			onViewportResize && /* @__PURE__ */ jsx(ViewportResizeHanlder, { onViewportResize }),
+			children
+		]
+	});
 }
-const selectDimensions = ({ width, height }) => (width || 1) * (height || 1);
-const ViewportResizeHanlder = ({
-  onViewportResize
-}) => {
-  const square = useStore(selectDimensions);
-  useUpdateEffect(onViewportResize, [square]);
-  return null;
+var selectDimensions = ({ width, height }) => (width || 1) * (height || 1);
+var ViewportResizeHanlder = ({ onViewportResize }) => {
+	useUpdateEffect(onViewportResize, [useStore(selectDimensions)]);
+	return null;
 };
-
+//#endregion
 export { BaseXYFlow };

package/dist/base/const.js

@@ -1,21 +1,20 @@
-const ZIndexes = {
-  Compound: 1,
-  // XYFlow increments zIndexes of compounds
-  Edge: 20,
-  Element: 20,
-  Max: 30
+//#region src/base/const.ts
+var ZIndexes = {
+	Compound: 1,
+	Edge: 20,
+	EdgeLabel: 25,
+	Element: 20,
+	Max: 30
 };
-const MinZoom = 0.05;
-const MaxZoom = 3;
-const FitViewPaddings = {
-  default: "16px",
-  withControls: {
-    top: "58px",
-    left: "16px",
-    right: "16px",
-    bottom: "16px"
-  }
+var MinZoom = .05;
+var FitViewPaddings = {
+	default: "16px",
+	withControls: {
+		top: "58px",
+		left: "16px",
+		right: "16px",
+		bottom: "16px"
+	}
 };
-const MAX_COMPOUND_DEPTH = 5;
-
-export { FitViewPaddings, MAX_COMPOUND_DEPTH, MaxZoom, MinZoom, ZIndexes };
+//#endregion
+export { FitViewPaddings, MinZoom, ZIndexes };

package/dist/base/updateEdges.js

@@ -1,62 +1,43 @@
-import { deepEqual } from 'fast-equals';
-import { isDefined, hasSubObject, pickBy, isShallowEqual } from 'remeda';
-
-const EMPTY_OBJ = {};
+import "../_virtual/_rolldown/runtime.js";
+import { deepEqual } from "fast-equals";
+import { hasSubObject, isDefined, isShallowEqual, pickBy } from "remeda";
+//#region src/base/updateEdges.ts
+var EMPTY_OBJ = {};
 function _update(current, updated) {
-  if (current === updated) {
-    return current;
-  }
-  updated = updated.map((update) => {
-    const existing = current.find(
-      (n) => n.id === update.id && n.type === update.type && n.source === update.source && n.target === update.target
-    );
-    if (!existing) {
-      return update;
-    }
-    if (existing === update) {
-      return existing;
-    }
-    const isSameData = hasSubObject(existing.data, update.data);
-    let data = isSameData ? existing.data : update.data;
-    if (!isSameData) {
-      if (isDefined(existing.data.hovered) && !isDefined(update.data.hovered)) {
-        data = {
-          ...data,
-          hovered: existing.data.hovered
-        };
-      }
-      if (isDefined(existing.data.dimmed) && !isDefined(update.data.dimmed)) {
-        data = {
-          ...data,
-          dimmed: existing.data.dimmed
-        };
-      }
-      if (isDefined(existing.data.active) && !isDefined(update.data.active)) {
-        data = {
-          ...data,
-          active: existing.data.active
-        };
-      }
-    }
-    if (isSameData && deepEqual(existing.hidden, update.hidden ?? existing.hidden) && deepEqual(existing.selected, update.selected ?? existing.selected) && deepEqual(existing.selectable, update.selectable ?? existing.selectable) && deepEqual(existing.focusable, update.focusable ?? existing.focusable) && deepEqual(existing.animated, update.animated ?? existing.animated) && deepEqual(existing.className, update.className) && deepEqual(existing.zIndex, update.zIndex ?? existing.zIndex) && deepEqual(existing.label, update.label) && deepEqual(existing.sourceHandle, update.sourceHandle) && deepEqual(existing.targetHandle, update.targetHandle) && deepEqual(existing.style ?? EMPTY_OBJ, update.style ?? EMPTY_OBJ)) {
-      return existing;
-    }
-    return {
-      // Retain existing properties that are defined, except parentId
-      ...pickBy(existing, isDefined),
-      // Apply updates, omitting undefined values
-      ...pickBy(update, isDefined),
-      data
-    };
-  });
-  return isShallowEqual(current, updated) ? current : updated;
+	if (current === updated) return current;
+	updated = updated.map((update) => {
+		const existing = current.find((n) => n.id === update.id && n.type === update.type && n.source === update.source && n.target === update.target);
+		if (!existing) return update;
+		if (existing === update) return existing;
+		const isSameData = hasSubObject(existing.data, update.data);
+		let data = isSameData ? existing.data : update.data;
+		if (!isSameData) {
+			if (isDefined(existing.data.hovered) && !isDefined(update.data.hovered)) data = {
+				...data,
+				hovered: existing.data.hovered
+			};
+			if (isDefined(existing.data.dimmed) && !isDefined(update.data.dimmed)) data = {
+				...data,
+				dimmed: existing.data.dimmed
+			};
+			if (isDefined(existing.data.active) && !isDefined(update.data.active)) data = {
+				...data,
+				active: existing.data.active
+			};
+		}
+		if (isSameData && deepEqual(existing.hidden, update.hidden ?? existing.hidden) && deepEqual(existing.selected, update.selected ?? existing.selected) && deepEqual(existing.selectable, update.selectable ?? existing.selectable) && deepEqual(existing.focusable, update.focusable ?? existing.focusable) && deepEqual(existing.animated, update.animated ?? existing.animated) && deepEqual(existing.className, update.className) && deepEqual(existing.zIndex, update.zIndex ?? existing.zIndex) && deepEqual(existing.label, update.label) && deepEqual(existing.sourceHandle, update.sourceHandle) && deepEqual(existing.targetHandle, update.targetHandle) && deepEqual(existing.style ?? EMPTY_OBJ, update.style ?? EMPTY_OBJ)) return existing;
+		return {
+			...pickBy(existing, isDefined),
+			...pickBy(update, isDefined),
+			data
+		};
+	});
+	return isShallowEqual(current, updated) ? current : updated;
 }
 function updateEdges(current, update) {
-  if (isDefined(update)) {
-    return _update(current, update);
-  }
-  update = current;
-  return (current2) => _update(current2, update);
+	if (isDefined(update)) return _update(current, update);
+	update = current;
+	return (current) => _update(current, update);
 }
-
+//#endregion
 export { updateEdges };