@likec4/diagram 1.47.0 → 1.49.0

package/dist/likec4diagram/DiagramXYFlow.js

@@ -3,15 +3,15 @@ import { nonNullable } from '@likec4/core';
 import { cx } from '@likec4/styles/css';
 import { useTimeout, useDebouncedCallback } from '@mantine/hooks';
 import { useCustomCompareMemo } from '@react-hookz/web';
-import { shallowEqual } from 'fast-equals';
 import { isEmpty } from 'remeda';
 import { memoNode } from '../base-primitives/memoNode.js';
 import { BaseXYFlow } from '../base/BaseXYFlow.js';
 import { useIsReducedGraphics, usePanningAtom } from '../context/RootContainerContext.js';
-import { useDiagramActorSnapshot } from '../hooks/useDiagram.js';
+import { useDiagramSnapshot, selectDiagramActor } from '../hooks/useDiagram.js';
 import { depsShallowEqual, useUpdateEffect } from '../hooks/useUpdateEffect.js';
 import { BuiltinEdges, BuiltinNodes } from './custom/index.js';
 import { deriveToggledFeatures } from './state/machine.setup.js';
+import { viewBounds } from './state/utils.js';
 import { useLayoutConstraints } from './useLayoutConstraints.js';
 import { useDiagram } from '../hooks/safeContext.js';
 import { useDiagramEventHandlers } from '../context/DiagramEventHandlers.js';
@@ -44,9 +44,21 @@ function prepareNodeTypes(nodeTypes) {
     "seq-parallel": nodeTypes.seqParallel ?? builtinNodes["seq-parallel"]
   };
 }
-const selectXYProps = ({ context: ctx, children }) => {
+const viewportToTopLeft = (ctx) => {
+  const bounds = viewBounds(ctx);
+  return {
+    x: -bounds.x,
+    y: -bounds.y,
+    zoom: 1
+  };
+};
+const selectXYProps = selectDiagramActor(({ context: ctx, children }) => {
   const { enableReadOnly } = deriveToggledFeatures(ctx);
   const isNotEditingEdge = enableReadOnly || children.editor?.getSnapshot().context.editing !== "edge";
+  let nodesDraggable = !enableReadOnly && ctx.nodesDraggable;
+  if (ctx.dynamicViewVariant === "sequence" && ctx.view._type === "dynamic") {
+    nodesDraggable = false;
+  }
   return {
     enableReadOnly,
     initialized: ctx.initialized.xydata && ctx.initialized.xyflow,
@@ -54,20 +66,15 @@ const selectXYProps = ({ context: ctx, children }) => {
     edges: ctx.xyedges,
     pannable: ctx.pannable,
     zoomable: ctx.zoomable,
-    nodesDraggable: !enableReadOnly && ctx.nodesDraggable,
+    nodesDraggable,
     nodesSelectable: ctx.nodesSelectable && isNotEditingEdge,
     fitViewPadding: ctx.fitViewPadding,
     enableFitView: ctx.features.enableFitView,
     ...!ctx.features.enableFitView && {
-      viewport: {
-        x: -ctx.view.bounds.x,
-        y: -ctx.view.bounds.y,
-        zoom: 1
-      }
+      viewport: viewportToTopLeft(ctx)
     }
   };
-};
-const equalsXYProps = (a, b) => a.enableReadOnly === b.enableReadOnly && a.initialized === b.initialized && a.pannable === b.pannable && a.zoomable === b.zoomable && a.nodesDraggable === b.nodesDraggable && a.nodesSelectable === b.nodesSelectable && a.enableFitView === b.enableFitView && shallowEqual(a.fitViewPadding, b.fitViewPadding) && shallowEqual(a.nodes, b.nodes) && shallowEqual(a.edges, b.edges) && shallowEqual(a.viewport ?? null, b.viewport ?? null);
+});
 function LikeC4DiagramXYFlow({
   background = "dots",
   reactFlowProps = {},
@@ -84,7 +91,7 @@ function LikeC4DiagramXYFlow({
     nodesDraggable,
     nodesSelectable,
     ...props
-  } = useDiagramActorSnapshot(selectXYProps, equalsXYProps);
+  } = useDiagramSnapshot(selectXYProps);
   const {
     onNodeContextMenu,
     onCanvasContextMenu,
@@ -96,19 +103,23 @@ function LikeC4DiagramXYFlow({
   } = useDiagramEventHandlers();
   const isReducedGraphics = useIsReducedGraphics(), layoutConstraints = useLayoutConstraints(), $isPanning = usePanningAtom(), isPanning = useTimeout(() => {
     $isPanning.set(true);
-  }, isReducedGraphics ? 120 : 400), notPanning = useDebouncedCallback(() => {
+  }, isReducedGraphics ? 200 : 800), notPanning = useDebouncedCallback(() => {
     isPanning.clear();
     $isPanning.set(false);
-  }, isReducedGraphics ? 350 : 200), onMove = useCallbackRef((event) => {
+  }, 200), onMove = useCallbackRef((event) => {
     if (!event) {
+      isPanning.clear();
       return;
     }
     if (!$isPanning.get()) {
       isPanning.start();
+    } else {
+      notPanning();
     }
-    notPanning();
   }), onMoveEnd = useCallbackRef((event, viewport) => {
-    isPanning.clear();
+    if (event) {
+      notPanning();
+    }
     diagram.send({
       type: "xyflow.viewportMoved",
       viewport,
@@ -133,10 +144,10 @@ function LikeC4DiagramXYFlow({
       nodeTypes,
       edgeTypes,
       onNodesChange: useCallbackRef((changes) => {
-        diagram.send({ type: "xyflow.applyNodeChanges", changes });
+        diagram.send({ type: "xyflow.applyChanges", nodes: changes });
       }),
       onEdgesChange: useCallbackRef((changes) => {
-        diagram.send({ type: "xyflow.applyEdgeChanges", changes });
+        diagram.send({ type: "xyflow.applyChanges", edges: changes });
       }),
       background: initialized ? background : "transparent",
       fitView: false,

package/dist/likec4diagram/convert-to-xyflow.d.ts

@@ -1,6 +1,7 @@
-import { DynamicViewDisplayVariant, LayoutedView, WhereOperator } from '@likec4/core/types';
+import { DynamicViewDisplayVariant, LayoutedView, ViewId, WhereOperator } from '@likec4/core/types';
 import { Types } from './types';
 type ConvertToXYFlowInput = {
+    currentViewId: ViewId | undefined;
     view: LayoutedView;
     where: WhereOperator | null;
     dynamicViewVariant: DynamicViewDisplayVariant;

package/dist/likec4diagram/convert-to-xyflow.js

@@ -4,12 +4,11 @@ import { sequenceLayoutToXY } from './xyflow-sequence/sequence-layout.js';
 function convertToXYFlow({ dynamicViewVariant, ...params }) {
   const view = params.view;
   const isDynamic = view._type === "dynamic";
-  const { bounds, xynodes, xyedges } = isDynamic && dynamicViewVariant === "sequence" ? sequenceLayoutToXY(view) : diagramToXY(params);
+  const { xynodes, xyedges } = isDynamic && dynamicViewVariant === "sequence" ? sequenceLayoutToXY(view, params.currentViewId) : diagramToXY({ ...params });
   if (isDynamic && view.variant !== dynamicViewVariant) {
     return {
       view: {
         ...view,
-        bounds,
         variant: dynamicViewVariant
       },
       xynodes,
@@ -17,10 +16,7 @@ function convertToXYFlow({ dynamicViewVariant, ...params }) {
     };
   }
   return {
-    view: bounds === view.bounds ? view : {
-      ...view,
-      bounds
-    },
+    view,
     xynodes,
     xyedges
   };

package/dist/likec4diagram/custom/edges/RelationshipEdge.js

@@ -1,12 +1,14 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { css, cx } from '@likec4/styles/css';
+import { useRafEffect } from '@react-hookz/web';
 import { EdgeLabelRenderer } from '@xyflow/react';
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef } from 'react';
 import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
 import { useCallbackRef } from '../../../hooks/useCallbackRef.js';
 import '@xstate/react';
 import 'fast-equals';
 import { useDiagram } from '../../../hooks/safeContext.js';
+import { useSetState } from '../../../hooks/useSetState.js';
 import { useUpdateEffect } from '../../../hooks/useUpdateEffect.js';
 import { useXYFlow, useXYStoreApi } from '../../../hooks/useXYFlow.js';
 import { isSamePoint } from '../../../utils/xyflow.js';
@@ -61,30 +63,28 @@ const RelationshipEdge = memoEdge((props) => {
     isControlPointDragging
   });
   let labelX = labelBBox?.x ?? 0, labelY = labelBBox?.y ?? 0;
-  const [labelPos, setLabelPos] = useState({
+  const [labelPos, setLabelPos] = useSetState({
     x: labelXY?.x ?? labelX,
     y: labelXY?.y ?? labelY
-  });
+  }, isSamePoint);
   useUpdateEffect(() => {
     if (isControlPointDraggingRef.current) {
       return;
     }
-    const next = {
+    setLabelPos({
       x: labelX,
       y: labelY
-    };
-    setLabelPos((current) => isSamePoint(current, next) ? current : next);
+    });
   }, [labelX, labelY]);
   const svgPathRef = useRef(null);
-  useEffect(() => {
+  useRafEffect(() => {
     const path = svgPathRef.current;
     if (!path || !isControlPointDragging) return;
-    const next = getEdgeCenter(path);
-    setLabelPos((current) => isSamePoint(current, next) ? current : next);
+    setLabelPos(getEdgeCenter(path));
   }, [edgePath, isControlPointDragging]);
   const updateEdgeData = useCallbackRef((controlPoints2) => {
-    const point = svgPathRef.current ? getEdgeCenter(svgPathRef.current) : null;
-    if (labelBBox && point) {
+    const point = labelBBox && svgPathRef.current ? getEdgeCenter(svgPathRef.current) : null;
+    if (point) {
       diagram.updateEdgeData(id, {
         controlPoints: controlPoints2,
         labelBBox: {
@@ -217,8 +217,7 @@ const RelationshipEdge = memoEdge((props) => {
         onStartMove: onControlPointerStartMove,
         onCancelMove: onControlPointerCancelMove,
         onFinishMove: onControlPointerFinishMove,
-        onDelete: onControlPointerDelete,
-        zIndex: 9999
+        onDelete: onControlPointerDelete
       }
     )
   ] });
@@ -232,35 +231,35 @@ function ControlPoints({
   onStartMove,
   onCancelMove,
   onFinishMove,
-  onDelete,
-  zIndex
+  onDelete
 }) {
   const xyflowStore = useXYStoreApi();
   const xyflow = useXYFlow();
   const edgeId = edgeProps.data.id;
+  const controlPointsRef = useRef(controlPoints);
+  controlPointsRef.current = controlPoints;
   const onLmbControlPointerDown = (index, e, domNode) => {
     let hasMoved = false;
-    let pointer = { x: e.clientX, y: e.clientY };
+    let initialPoint = { x: e.clientX, y: e.clientY };
+    let clientPoint = { ...initialPoint };
     let animationFrameId = null;
-    let cp = controlPoints;
+    let cp = [...controlPointsRef.current];
     const onPointerMove = (e2) => {
-      const clientPoint = {
-        x: e2.clientX,
-        y: e2.clientY
-      };
-      if (!isSamePoint(pointer, clientPoint)) {
+      clientPoint.x = e2.clientX;
+      clientPoint.y = e2.clientY;
+      const isDragging = !isSamePoint(initialPoint, clientPoint);
+      if (isDragging) {
         if (!hasMoved) {
           hasMoved = true;
           onStartMove();
         }
-        pointer = clientPoint;
         animationFrameId ??= requestAnimationFrame(() => {
           animationFrameId = null;
-          cp = cp.slice();
-          const { x, y } = xyflow.screenToFlowPosition(pointer, { snapToGrid: false });
+          const { x, y } = xyflow.screenToFlowPosition(clientPoint, { snapToGrid: false });
+          cp = [...cp];
           cp[index] = {
-            x: Math.round(x),
-            y: Math.round(y)
+            x: Math.trunc(x),
+            y: Math.trunc(y)
           };
           onMove(cp);
         });
@@ -275,6 +274,9 @@ function ControlPoints({
       domNode.removeEventListener("click", stopAndPrevent, {
         capture: true
       });
+      if (animationFrameId !== null) {
+        cancelAnimationFrame(animationFrameId);
+      }
       if (hasMoved) {
         onFinishMove(cp);
       } else {
@@ -294,12 +296,11 @@ function ControlPoints({
     });
   };
   const onRmbControlPointerDown = (index, e) => {
-    if (controlPoints.length <= 1) {
+    const newControlPoints = [...controlPointsRef.current];
+    if (newControlPoints.length <= 1 || index >= newControlPoints.length) {
       return;
     }
-    e.stopPropagation();
-    e.preventDefault();
-    const newControlPoints = controlPoints.slice();
+    stopAndPrevent(e);
     newControlPoints.splice(index, 1);
     setTimeout(() => {
       onDelete(newControlPoints);
@@ -330,12 +331,12 @@ function ControlPoints({
     }
   });
   const onControlPointerDblClick = useCallbackRef((e) => {
-    const { domNode } = xyflowStore.getState();
-    if (!domNode || e.pointerType !== "mouse") {
+    if (e.pointerType !== "mouse") {
       return;
     }
     const index = parseFloat(e.currentTarget.getAttribute("data-control-point-index") || "");
     if (isNaN(index)) {
+      console.error(e.currentTarget);
       throw new Error("data-control-point-index is not a number");
     }
     onRmbControlPointerDown(index, e);
@@ -346,10 +347,6 @@ function ControlPoints({
       component: "svg",
       className: controlPointsContainer,
       ...edgeProps,
-      style: {
-        ...edgeProps.style,
-        zIndex
-      },
       children: /* @__PURE__ */ jsx(
         "g",
         {

package/dist/likec4diagram/custom/edges/edges.css.js

@@ -9,7 +9,8 @@ const controlPointsContainer = css({
   mixBlendMode: {
     _dark: "screen",
     _light: "multiply"
-  }
+  },
+  zIndex: "[100]"
 });
 const controlPoint = css({
   fill: `[var(--xy-edge-stroke)]`,

package/dist/likec4diagram/custom/edges/useControlPoints.js

@@ -1,8 +1,8 @@
+import { vector } from '@likec4/core/geometry';
 import { deepEqual } from 'fast-equals';
 import { useState } from 'react';
 import { useCallbackRef } from '../../../hooks/useCallbackRef.js';
 import { useUpdateEffect } from '../../../hooks/useUpdateEffect.js';
-import { vector } from '@likec4/core/geometry';
 import { bezierControlPoints } from '../../../utils/xyflow.js';
 
 function useControlPoints({
@@ -19,8 +19,8 @@ function useControlPoints({
     const next = data.controlPoints ?? bezierControlPoints(data.points);
     setControlPoints((prev) => deepEqual(prev, next) ? prev : next);
   }, [
-    data.controlPoints?.map((p) => `${Math.round(p.x)},${Math.round(p.y)}`).join("|") ?? "",
-    data.points.map((p) => `${Math.round(p[0])},${Math.round(p[1])}`).join("|")
+    data.points,
+    data.controlPoints ?? []
   ]);
   const insertControlPoint = useCallbackRef(({ x, y }) => {
     const sourceV = vector(sourceX, sourceY);

package/dist/likec4diagram/custom/edges/useRelationshipEdgePath.d.ts

@@ -1,5 +1,8 @@
 import { XYPosition } from '@xyflow/react';
 import { Types } from '../../types';
+/**
+ * @returns SVG path data string for relationship edge
+ */
 export declare function useRelationshipEdgePath({ props: { sourceX, sourceY, source, target, targetX, targetY, data, }, controlPoints, isControlPointDragging, }: {
     props: Types.EdgeProps<'relationship'>;
     controlPoints: XYPosition[];

package/dist/likec4diagram/custom/edges/useRelationshipEdgePath.js

@@ -1,12 +1,14 @@
-import { nonNullable } from '@likec4/core';
+import { vector } from '@likec4/core/geometry';
+import { nonNullable } from '@likec4/core/utils';
+import { getNodeDimensions } from '@xyflow/system';
 import { line, curveCatmullRomOpen } from 'd3-shape';
+import { shallowEqual } from 'fast-equals';
 import { useCallback } from 'react';
 import { isTruthy, first, last } from 'remeda';
 import { useXYStore } from '../../../hooks/useXYFlow.js';
-import { nodeToRect, getNodeIntersectionFromCenterToPoint, bezierPath, isEqualRects } from '../../../utils/xyflow.js';
+import { bezierPath, getNodeIntersectionFromCenterToPoint } from '../../../utils/xyflow.js';
 
-const curve = line().curve(curveCatmullRomOpen.alpha(0.7)).x((d) => Math.round(d.x)).y((d) => Math.round(d.y));
-const isSameRects = (a, b) => isEqualRects(a.sourceNode, b.sourceNode) && isEqualRects(a.targetNode, b.targetNode);
+const curve = line().curve(curveCatmullRomOpen.alpha(0.7)).x((d) => Math.trunc(d.x)).y((d) => Math.trunc(d.y));
 function useRelationshipEdgePath({
   props: {
     sourceX,
@@ -20,41 +22,57 @@ function useRelationshipEdgePath({
   controlPoints,
   isControlPointDragging
 }) {
-  const {
-    sourceNode,
-    targetNode
-  } = useXYStore(
+  const [
+    sourceNodeWidth,
+    sourceNodeHeight,
+    targetNodeWidth,
+    targetNodeHeight
+  ] = useXYStore(
     useCallback(({ nodeLookup }) => {
-      const sourceNode2 = nonNullable(nodeLookup.get(source), `source node ${source} not found`);
-      const targetNode2 = nonNullable(nodeLookup.get(target), `target node ${target} not found`);
-      return {
-        sourceNode: nodeToRect(sourceNode2),
-        targetNode: nodeToRect(targetNode2)
-      };
+      const sourceNode = getNodeDimensions(nonNullable(nodeLookup.get(source), `source node ${source} not found`));
+      const targetNode = getNodeDimensions(nonNullable(nodeLookup.get(target), `target node ${target} not found`));
+      return [
+        Math.ceil(sourceNode.width),
+        Math.ceil(sourceNode.height),
+        Math.ceil(targetNode.width),
+        Math.ceil(targetNode.height)
+      ];
     }, [source, target]),
-    isSameRects
+    shallowEqual
   );
   const isModified = isTruthy(data.controlPoints) || isControlPointDragging;
-  if (isModified) {
-    const sourceCenterPos = { x: sourceX, y: sourceY };
-    const targetCenterPos = { x: targetX, y: targetY };
-    const nodeMargin = 6;
-    const points = data.dir === "back" ? [
-      targetCenterPos,
-      getNodeIntersectionFromCenterToPoint(targetNode, first(controlPoints) ?? sourceCenterPos, nodeMargin),
-      ...controlPoints,
-      getNodeIntersectionFromCenterToPoint(sourceNode, last(controlPoints) ?? targetCenterPos, nodeMargin),
-      sourceCenterPos
-    ] : [
-      sourceCenterPos,
-      getNodeIntersectionFromCenterToPoint(sourceNode, first(controlPoints) ?? targetCenterPos, nodeMargin),
-      ...controlPoints,
-      getNodeIntersectionFromCenterToPoint(targetNode, last(controlPoints) ?? sourceCenterPos, nodeMargin),
-      targetCenterPos
-    ];
-    return nonNullable(curve(points));
+  if (!isModified) {
+    return bezierPath(data.points);
   }
-  return bezierPath(data.points);
+  const sourceCenterPos = vector(sourceX, sourceY).trunc();
+  const targetCenterPos = vector(targetX, targetY).trunc();
+  const sourceNd = {
+    // Calculate node top-left from center position
+    ...sourceCenterPos.subtract(vector(sourceNodeWidth, sourceNodeHeight).divide(2)).trunc().toObject(),
+    width: sourceNodeWidth,
+    height: sourceNodeHeight
+  };
+  const targetNd = {
+    // Calculate node top-left from center position
+    ...targetCenterPos.subtract(vector(targetNodeWidth, targetNodeHeight).divide(2)).trunc().toObject(),
+    width: targetNodeWidth,
+    height: targetNodeHeight
+  };
+  const nodeMargin = 6;
+  const points = data.dir === "back" ? [
+    targetCenterPos,
+    getNodeIntersectionFromCenterToPoint(targetNd, first(controlPoints) ?? sourceCenterPos, nodeMargin),
+    ...controlPoints,
+    getNodeIntersectionFromCenterToPoint(sourceNd, last(controlPoints) ?? targetCenterPos, nodeMargin),
+    sourceCenterPos
+  ] : [
+    sourceCenterPos,
+    getNodeIntersectionFromCenterToPoint(sourceNd, first(controlPoints) ?? targetCenterPos, nodeMargin),
+    ...controlPoints,
+    getNodeIntersectionFromCenterToPoint(targetNd, last(controlPoints) ?? sourceCenterPos, nodeMargin),
+    targetCenterPos
+  ];
+  return nonNullable(curve(points));
 }
 
 export { useRelationshipEdgePath };

package/dist/likec4diagram/custom/nodes/ElementActions.d.ts

@@ -2,7 +2,6 @@ import { SimplifyDeep } from 'type-fest';
 import { ElementActionButtons } from '../../../base-primitives';
 import { BaseNodeData } from '../../../base/types';
 import { Types } from '../../types';
-import { NamedExoticComponent } from 'react';
 type WithExtraButtons = {
     /**
      * Add extra action buttons
@@ -54,7 +53,7 @@ export type ElementActionsProps = SimplifyDeep<{
  * />
  * ```
  */
-export declare const ElementActions: NamedExoticComponent<ElementActionsProps>;
+export declare function ElementActions({ extraButtons, ...props }: ElementActionsProps): import("react/jsx-runtime").JSX.Element;
 export type DeploymentElementActionsProps = SimplifyDeep<{
     selected?: boolean;
     data: Pick<Types.DeploymentElementNodeData, 'id' | 'modelFqn' | 'navigateTo'> & BaseNodeData;

package/dist/likec4diagram/custom/nodes/ElementActions.js

@@ -1,21 +1,18 @@
 import { jsx } from 'react/jsx-runtime';
-import { deepEqual, shallowEqual } from 'fast-equals';
-import { memo, useMemo } from 'react';
+import { useMemo } from 'react';
 import { hasAtLeast } from 'remeda';
 import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
 import '@xstate/react';
+import 'fast-equals';
 import { useDiagram } from '../../../hooks/safeContext.js';
-import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
-import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
+import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
 import { ElementActionButtons } from '../../../base-primitives/element/ElementActionButtons.js';
 
-const compareElementActionsProps = (a, b) => {
-  return deepEqual(a.data.id, b.data.id) && deepEqual(a.selected ?? false, b.selected ?? false) && deepEqual(a.data.modelFqn ?? null, b.data.modelFqn ?? null) && deepEqual(a.data.navigateTo ?? null, b.data.navigateTo ?? null) && deepEqual(a.data.hovered ?? false, b.data.hovered ?? false) && (!a.extraButtons && !b.extraButtons || shallowEqual(a.extraButtons, b.extraButtons));
-};
-const ElementActions = memo(({
+function ElementActions({
   extraButtons,
   ...props
-}) => {
+}) {
   const { enableNavigateTo, enableRelationshipBrowser } = useEnabledFeatures();
   const diagram = useDiagram();
   const { id, navigateTo, modelFqn } = props.data;
@@ -47,7 +44,7 @@ const ElementActions = memo(({
     buttons = [...buttons, ...extraButtons];
   }
   return /* @__PURE__ */ jsx(ElementActionButtons, { ...props, buttons });
-}, compareElementActionsProps);
+}
 const DeploymentElementActions = ({
   extraButtons,
   ...props

package/dist/likec4diagram/custom/nodes/NodeDrifts.d.ts

@@ -1,6 +1,5 @@
 import { Types } from '../../types';
 export type NodeDriftsProps = {
     nodeProps: Types.NodeProps;
-    position?: 'top' | 'bottom';
 };
-export declare function NodeDrifts({ nodeProps: { data }, position, }: NodeDriftsProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function NodeDrifts({ nodeProps: { data }, }: NodeDriftsProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/likec4diagram/custom/nodes/NodeDrifts.js

@@ -1,17 +1,13 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { Box } from '@likec4/styles/jsx';
-import { Notification, Text } from '@mantine/core';
-import { Position, NodeToolbar } from '@xyflow/react';
 
 function NodeDrifts({
-  nodeProps: { data },
-  position = "bottom"
+  nodeProps: { data }
 }) {
   const drifts = data.drifts;
   if (!drifts || drifts.length === 0) {
     return null;
   }
-  const toolbarPosition = position === "top" ? Position.Top : Position.Bottom;
   return /* @__PURE__ */ jsx(
     Box,
     {
@@ -24,20 +20,7 @@ function NodeDrifts({
           outlineStyle: "dashed",
           outlineOffset: "1.5"
         }
-      },
-      children: /* @__PURE__ */ jsx(NodeToolbar, { isVisible: data.hovered === true, align: "start", position: toolbarPosition, children: /* @__PURE__ */ jsx(
-        Notification,
-        {
-          color: "orange",
-          withBorder: false,
-          withCloseButton: false,
-          title: "Changes:",
-          children: drifts.map((drift) => /* @__PURE__ */ jsxs(Text, { mt: 2, size: "sm", lh: "xs", children: [
-            "- ",
-            drift
-          ] }, drift))
-        }
-      ) })
+      }
     }
   );
 }

package/dist/likec4diagram/custom/nodes/NodeNotes.d.ts

@@ -0,0 +1,6 @@
+import { BaseNodePropsWithData } from '../../../base/types';
+import { Types } from '../../types';
+type RequiredData = Pick<Types.NodeData, 'id' | 'notes' | 'width' | 'height' | 'x' | 'y'>;
+export type NodeNotesProps = BaseNodePropsWithData<RequiredData>;
+export declare function NodeNotes({ data }: NodeNotesProps): import("react/jsx-runtime").JSX.Element | null;
+export {};