@likec4/diagram 1.24.1 → 1.25.1

package/dist/hooks/useDiagram.js

@@ -124,6 +124,10 @@ function useDiagramActorSnapshot(selector, compare = shallowEqual) {
   const actorRef = useDiagramActorRef();
   return useSelector(actorRef, useCallbackRef(selector), compare);
 }
+function useDiagramSyncLayoutState(selector, compare = shallowEqual) {
+  const syncLayoutActorRef = useDiagramActorSnapshot((s) => s.context.syncLayoutActorRef);
+  return useSelector(syncLayoutActorRef, useCallbackRef(selector), compare);
+}
 function useDiagramContext(selector, compare = shallowEqual) {
   return useDiagramActorSnapshot(useCallbackRef((s) => selector(s.context)), compare);
 }
@@ -131,5 +135,6 @@ export {
   useDiagram,
   useDiagramActorRef,
   useDiagramActorSnapshot,
-  useDiagramContext
+  useDiagramContext,
+  useDiagramSyncLayoutState
 };

package/dist/hooks/useReducedGraphics.d.ts

@@ -0,0 +1 @@
+export { useIsReducedGraphics, useLooseReducedGraphics } from '../context/ReduceGraphics';

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export type { ControlsCustomLayout, ControlsCustomLayoutProps } from './context/ControlsCustomLayout';
 export { FramerMotionConfig } from './context/FramerMotionConfig';
 export { LikeC4Diagram } from './LikeC4Diagram';
 export type { LikeC4DiagramProps } from './LikeC4Diagram';

package/dist/index.js

@@ -1,4 +1,4 @@
-/* empty css                                                                                                                                                  */
+/* empty css                                                                                                                                                   */
 import { FramerMotionConfig } from "./context/FramerMotionConfig.js";
 import { LikeC4Diagram } from "./LikeC4Diagram.js";
 import { Overlay } from "./overlays/overlay/Overlay.js";

package/dist/likec4diagram/DiagramXYFlow.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren, NamedExoticComponent } from 'react';
+import { EnforceOptional } from 'type-fest/source/enforce-optional';
+import { LikeC4DiagramProperties } from '../LikeC4Diagram.props';
+type Picked = EnforceOptional<Pick<LikeC4DiagramProperties, 'background' | 'nodesDraggable' | 'nodesSelectable'>>;
+export type LikeC4DiagramXYFlowProps = PropsWithChildren<Required<Picked>>;
+export declare const LikeC4DiagramXYFlow: NamedExoticComponent<LikeC4DiagramXYFlowProps>;
+export {};

package/dist/likec4diagram/{XYFlow.js → DiagramXYFlow.js}

@@ -1,16 +1,16 @@
-import { jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { nonNullable } from "@likec4/core";
 import { useCallbackRef } from "@mantine/hooks";
 import clsx from "clsx";
 import { shallowEqual } from "fast-equals";
 import { memo } from "react";
 import { BaseXYFlow } from "../base/BaseXYFlow.js";
+import { ReduceGraphicsViewportListener } from "../context/ReduceGraphics.js";
 import { useDiagram, useDiagramContext } from "../hooks/useDiagram.js";
-import { edgeTypes } from "./custom/index.js";
+import { edgeTypes, nodeTypes } from "./custom/index.js";
 import { DiagramUI } from "./DiagramUI.js";
 import { useLayoutConstraints } from "./useLayoutConstraints.js";
 import { useDiagramEventHandlers } from "../context/DiagramEventHandlers.js";
-import { nodeTypes } from "./custom/nodes/nodeTypes.js";
 const selectXYProps = (ctx) => ({
   initialized: ctx.initialized,
   nodes: ctx.xynodes,
@@ -29,7 +29,12 @@ const selectXYProps = (ctx) => ({
   }
 });
 const equalsXYProps = (a, b) => a.initialized === b.initialized && a.pannable === b.pannable && a.zoomable === b.zoomable && a.fitViewPadding === b.fitViewPadding && a.enableFitView === b.enableFitView && a.enableReadOnly === b.enableReadOnly && shallowEqual(a.nodes, b.nodes) && shallowEqual(a.edges, b.edges) && shallowEqual(a.viewport, b.viewport);
-const LikeC4DiagramXYFlow = memo(({ background, nodesDraggable, nodesSelectable }) => {
+const LikeC4DiagramXYFlow = memo(({
+  background,
+  nodesDraggable,
+  nodesSelectable,
+  children
+}) => {
   const diagram = useDiagram();
   const {
     initialized,
@@ -53,7 +58,7 @@ const LikeC4DiagramXYFlow = memo(({ background, nodesDraggable, nodesSelectable
   const onViewportResize = useCallbackRef(() => {
     diagram.send({ type: "xyflow.resized" });
   });
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     BaseXYFlow,
     {
       nodes,
@@ -120,7 +125,11 @@ const LikeC4DiagramXYFlow = memo(({ background, nodesDraggable, nodesSelectable
       nodesSelectable,
       ...notReadOnly && nodesDraggable && layoutConstraints,
       ...props,
-      children: /* @__PURE__ */ jsx(DiagramUI, {})
+      children: [
+        /* @__PURE__ */ jsx(ReduceGraphicsViewportListener, {}),
+        /* @__PURE__ */ jsx(DiagramUI, {}),
+        children
+      ]
     }
   );
 }, shallowEqual);

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

@@ -8,9 +8,9 @@ export declare const RelationshipEdge: NamedExoticComponent<{
     style?: CSSProperties;
     id: string;
     selected?: boolean;
-    selectable?: boolean;
-    deletable?: boolean;
     animated?: boolean;
+    deletable?: boolean;
+    selectable?: boolean;
     sourceX: number;
     sourceY: number;
     targetX: number;

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

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { nonNullable, isStepEdgeId } from "@likec4/core";
 import { useDebouncedEffect } from "@react-hookz/web";
+import { EdgeLabelRenderer } from "@xyflow/react";
 import clsx from "clsx";
 import { line, curveCatmullRomOpen } from "d3-shape";
 import { useState, useRef, useEffect } from "react";
@@ -8,11 +9,12 @@ import { isTruthy, first, last } from "remeda";
 import { useDiagram } from "../../../hooks/useDiagram.js";
 import { VectorImpl, vector } from "../../../utils/vector.js";
 import { isSamePoint, bezierControlPoints, bezierPath } from "../../../utils/xyflow.js";
-import { controlPoint, controlDragging } from "./edges.css.js";
+import { controlPointsContainer, controlPoint, controlDragging } from "./edges.css.js";
 import { NotePopover } from "./NotePopover.js";
 import { RelationshipsDropdownMenu } from "./RelationshipsDropdownMenu.js";
 import { getNodeIntersectionFromCenterToPoint } from "./utils.js";
 import { customEdge } from "../../../base/primitives/customEdge.js";
+import { useLooseReducedGraphics } from "../../../context/ReduceGraphics.js";
 import { useXYStoreApi, useXYFlow, useXYInternalNode } from "../../../hooks/useXYFlow.js";
 import { useEnabledFeature } from "../../../context/DiagramFeatures.js";
 import { EdgeContainer } from "../../../base/primitives/edge/EdgeContainer.js";
@@ -22,6 +24,7 @@ import { EdgeActionButton } from "../../../base/primitives/edge/EdgeActionButton
 const curve = line().curve(curveCatmullRomOpen).x((d) => d.x).y((d) => d.y);
 const RelationshipEdge = customEdge((props) => {
   var _a;
+  const isReducedGraphicsMode = useLooseReducedGraphics();
   const [isControlPointDragging, setIsControlPointDragging] = useState(false);
   const xyflowStore = useXYStoreApi();
   const xyflow = useXYFlow();
@@ -39,10 +42,11 @@ const RelationshipEdge = customEdge((props) => {
     target,
     targetX,
     targetY,
+    selected = false,
     data: {
       id: edgeId,
-      navigateTo,
       points,
+      hovered = false,
       active = false,
       dimmed = false,
       labelBBox,
@@ -50,6 +54,7 @@ const RelationshipEdge = customEdge((props) => {
       ...data
     }
   } = props;
+  const navigateTo = enableNavigateTo ? data.navigateTo : void 0;
   const sourceNode = nonNullable(useXYInternalNode(source), `source node ${source} not found`);
   const targetNode = nonNullable(useXYInternalNode(target), `target node ${target} not found`);
   const isModified = isTruthy(data.controlPoints) || !isSamePoint(sourceNode.internals.positionAbsolute, sourceNode.data.position) || !isSamePoint(targetNode.internals.positionAbsolute, targetNode.data.position);
@@ -243,7 +248,7 @@ const RelationshipEdge = customEdge((props) => {
     const notes = props.data.notes;
     if (notes && isStepEdgeId(props.id) && ((_a = diagram.getContext().activeWalkthrough) == null ? void 0 : _a.stepId) === props.id) {
       renderLabel = (props2) => /* @__PURE__ */ jsx(NotePopover, { notes, children: /* @__PURE__ */ jsx("div", { ...props2 }) });
-    } else if (enableRelationshipDetails) {
+    } else if (enableRelationshipDetails && (!isReducedGraphicsMode || hovered || selected || active)) {
       renderLabel = (props2) => /* @__PURE__ */ jsx(
         RelationshipsDropdownMenu,
         {
@@ -258,26 +263,6 @@ const RelationshipEdge = customEdge((props) => {
   }
   return /* @__PURE__ */ jsxs(EdgeContainer, { ...props, className: clsx(isControlPointDragging && controlDragging), children: [
     /* @__PURE__ */ jsx(EdgePath, { ...props, svgPath: edgePath, ref: svgPathRef, onEdgePointerDown }),
-    enableEdgeEditing && /* @__PURE__ */ jsx(
-      "g",
-      {
-        onContextMenu: (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-        },
-        children: controlPoints.map((p, i) => /* @__PURE__ */ jsx(
-          "circle",
-          {
-            onPointerDown: (e) => onControlPointerDown(i, e),
-            className: controlPoint,
-            cx: p.x,
-            cy: p.y,
-            r: 3
-          },
-          i
-        ))
-      }
-    ),
     /* @__PURE__ */ jsx(
       EdgeLabel,
       {
@@ -288,7 +273,7 @@ const RelationshipEdge = customEdge((props) => {
           translate: isModified ? "translate(-50%, 0)" : void 0
         },
         ...renderLabel && { renderRoot: renderLabel },
-        children: !isControlPointDragging && enableNavigateTo && navigateTo && /* @__PURE__ */ jsx(
+        children: !isControlPointDragging && navigateTo && /* @__PURE__ */ jsx(
           EdgeActionButton,
           {
             ...props,
@@ -299,7 +284,27 @@ const RelationshipEdge = customEdge((props) => {
           }
         )
       }
-    )
+    ),
+    enableEdgeEditing && controlPoints.length > 0 && /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx(EdgeContainer, { component: "svg", className: controlPointsContainer, ...props, children: /* @__PURE__ */ jsx(
+      "g",
+      {
+        onContextMenu: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        },
+        children: controlPoints.map((p, i) => /* @__PURE__ */ jsx(
+          "circle",
+          {
+            onPointerDown: (e) => onControlPointerDown(i, e),
+            className: clsx("nodrag nopan", controlPoint),
+            cx: Math.round(p.x),
+            cy: Math.round(p.y),
+            r: 3
+          },
+          i
+        ))
+      }
+    ) }) })
   ] });
 });
 export {

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

@@ -1,2 +1,3 @@
+export declare const controlPointsContainer: string;
 export declare const controlPoint: string;
 export declare const controlDragging: string;

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

@@ -1,7 +1,9 @@
 /* empty css                         */
-var controlPoint = "_1fw3wl00";
-var controlDragging = "_1fw3wl01";
+var controlPointsContainer = "_1fw3wl00";
+var controlPoint = "_1fw3wl01";
+var controlDragging = "_1fw3wl02";
 export {
   controlDragging,
-  controlPoint
+  controlPoint,
+  controlPointsContainer
 };

package/dist/likec4diagram/custom/index.d.ts

@@ -1,7 +1,15 @@
+import { Types } from '../types';
 import { NamedExoticComponent, CSSProperties, ReactNode } from 'react';
+import { NodeProps } from '../../base';
 import { Position, XYPosition } from '@xyflow/system';
 import { EdgeId, NonEmptyArray, Point, Color, ViewId, RelationshipArrowType, RelationshipLineType, BBox } from '@likec4/core';
-export { nodeTypes } from './nodes/nodeTypes';
+export declare const nodeTypes: {
+    element: NamedExoticComponent<NodeProps<Types.ElementNodeData>>;
+    deployment: NamedExoticComponent<NodeProps<Types.DeploymentElementNodeData>>;
+    'compound-element': NamedExoticComponent<NodeProps<Types.CompoundElementNodeData>>;
+    'compound-deployment': NamedExoticComponent<NodeProps<Types.CompoundDeploymentNodeData>>;
+    'view-group': NamedExoticComponent<NodeProps<Types.ViewGroupNodeData>>;
+};
 export declare const edgeTypes: {
     relationship: NamedExoticComponent<{
         source: string;
@@ -9,9 +17,9 @@ export declare const edgeTypes: {
         style?: CSSProperties;
         id: string;
         selected?: boolean;
-        selectable?: boolean;
-        deletable?: boolean;
         animated?: boolean;
+        deletable?: boolean;
+        selectable?: boolean;
         sourceX: number;
         sourceY: number;
         targetX: number;

package/dist/likec4diagram/custom/index.js

@@ -1,7 +1,16 @@
 import { RelationshipEdge } from "./edges/RelationshipEdge.js";
+import { ViewGroupNode, CompoundDeploymentNode, CompoundElementNode, DeploymentNode, ElementNode } from "./nodes/nodeTypes.js";
+const nodeTypes = {
+  element: ElementNode,
+  deployment: DeploymentNode,
+  "compound-element": CompoundElementNode,
+  "compound-deployment": CompoundDeploymentNode,
+  "view-group": ViewGroupNode
+};
 const edgeTypes = {
   relationship: RelationshipEdge
 };
 export {
-  edgeTypes
+  edgeTypes,
+  nodeTypes
 };

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

@@ -1,10 +1,8 @@
 import { NodeProps } from '../../../base';
 import { Types } from '../../types';
 import { NamedExoticComponent } from 'react';
-export declare const nodeTypes: {
-    element: NamedExoticComponent<NodeProps<Types.ElementNodeData>>;
-    deployment: NamedExoticComponent<NodeProps<Types.DeploymentElementNodeData>>;
-    'compound-element': NamedExoticComponent<NodeProps<Types.CompoundElementNodeData>>;
-    'compound-deployment': NamedExoticComponent<NodeProps<Types.CompoundDeploymentNodeData>>;
-    'view-group': NamedExoticComponent<NodeProps<Types.ViewGroupNodeData>>;
-};
+export declare const ElementNode: NamedExoticComponent<NodeProps<Types.ElementNodeData>>;
+export declare const DeploymentNode: NamedExoticComponent<NodeProps<Types.DeploymentElementNodeData>>;
+export declare const CompoundElementNode: NamedExoticComponent<NodeProps<Types.CompoundElementNodeData>>;
+export declare const CompoundDeploymentNode: NamedExoticComponent<NodeProps<Types.CompoundDeploymentNodeData>>;
+export declare const ViewGroupNode: NamedExoticComponent<NodeProps<Types.ViewGroupNodeData>>;

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

@@ -8,8 +8,8 @@ import { DeploymentElementToolbar, ElementToolbar } from "./toolbar/ElementToolb
 import { customNode } from "../../../base/primitives/customNode.js";
 import { CompoundNodeContainer } from "../../../base/primitives/compound/CompoundNodeContainer.js";
 import { CompoundTitle } from "../../../base/primitives/compound/CompoundTitle.js";
-import { DefaultHandles } from "../../../base/primitives/NodeHandles.js";
 import { IfNotEnabled, IfEnabled, useEnabledFeature } from "../../../context/DiagramFeatures.js";
+import { DefaultHandles } from "../../../base/primitives/NodeHandles.js";
 import { CompoundDetailsButton } from "../../../base/primitives/compound/CompoundDetailsButton.js";
 import { ElementNodeContainer } from "../../../base/primitives/element/ElementNodeContainer.js";
 import { ElementShape } from "../../../base/primitives/element/ElementShape.js";
@@ -30,65 +30,67 @@ const ElementDetailsButtonWithHandler = ({ fqn, ...props }) => {
     }
   );
 };
-const nodeTypes = {
-  element: customNode((props) => /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
-    /* @__PURE__ */ jsx(ElementShape, { ...props, isMultiple: props.data.isMultiple, withSelectedIndicator: props.selected }),
-    /* @__PURE__ */ jsx(ElementTitle, { ...props }),
-    /* @__PURE__ */ jsx(ElementActions, { ...props }),
-    /* @__PURE__ */ jsx(
-      ElementDetailsButtonWithHandler,
-      {
-        fqn: props.data.modelFqn,
-        ...props
-      }
-    ),
-    /* @__PURE__ */ jsx(IfNotEnabled, { feature: "ReadOnly", children: /* @__PURE__ */ jsx(ElementToolbar, { ...props }) }),
-    /* @__PURE__ */ jsx(DefaultHandles, {})
-  ] })),
-  deployment: customNode((props) => /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
-    /* @__PURE__ */ jsx(ElementShape, { ...props, isMultiple: props.data.isMultiple, withSelectedIndicator: props.selected }),
-    /* @__PURE__ */ jsx(ElementTitle, { ...props }),
-    /* @__PURE__ */ jsx(DeploymentElementActions, { ...props }),
-    !!props.data.modelFqn && /* @__PURE__ */ jsx(
-      ElementDetailsButtonWithHandler,
-      {
-        fqn: props.data.modelFqn,
-        ...props
-      }
-    ),
-    /* @__PURE__ */ jsx(IfNotEnabled, { feature: "ReadOnly", children: /* @__PURE__ */ jsx(DeploymentElementToolbar, { ...props }) }),
-    /* @__PURE__ */ jsx(DefaultHandles, {})
-  ] })),
-  "compound-element": customNode((props) => {
-    const diagram = useDiagram();
-    return /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
-      /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
-      /* @__PURE__ */ jsx(CompoundActions, { ...props }),
-      /* @__PURE__ */ jsx(IfEnabled, { feature: "ElementDetails", children: /* @__PURE__ */ jsx(
-        CompoundDetailsButton,
-        {
-          ...props,
-          onClick: (e) => {
-            e.stopPropagation();
-            diagram.openElementDetails(props.data.modelFqn, props.id);
-          }
-        }
-      ) }),
-      /* @__PURE__ */ jsx(IfNotEnabled, { feature: "ReadOnly", children: /* @__PURE__ */ jsx(CompoundElementToolbar, { ...props }) }),
-      /* @__PURE__ */ jsx(DefaultHandles, {})
-    ] });
-  }),
-  "compound-deployment": customNode((props) => /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
+const ElementNode = customNode((props) => /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
+  /* @__PURE__ */ jsx(ElementShape, { ...props, isMultiple: props.data.isMultiple, withSelectedIndicator: props.selected }),
+  /* @__PURE__ */ jsx(ElementTitle, { ...props }),
+  /* @__PURE__ */ jsx(ElementActions, { ...props }),
+  /* @__PURE__ */ jsx(
+    ElementDetailsButtonWithHandler,
+    {
+      fqn: props.data.modelFqn,
+      ...props
+    }
+  ),
+  /* @__PURE__ */ jsx(IfNotEnabled, { feature: "ReadOnly", children: /* @__PURE__ */ jsx(ElementToolbar, { ...props }) }),
+  /* @__PURE__ */ jsx(DefaultHandles, {})
+] }));
+const DeploymentNode = customNode((props) => /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
+  /* @__PURE__ */ jsx(ElementShape, { ...props, isMultiple: props.data.isMultiple, withSelectedIndicator: props.selected }),
+  /* @__PURE__ */ jsx(ElementTitle, { ...props }),
+  /* @__PURE__ */ jsx(DeploymentElementActions, { ...props }),
+  !!props.data.modelFqn && /* @__PURE__ */ jsx(
+    ElementDetailsButtonWithHandler,
+    {
+      fqn: props.data.modelFqn,
+      ...props
+    }
+  ),
+  /* @__PURE__ */ jsx(IfNotEnabled, { feature: "ReadOnly", children: /* @__PURE__ */ jsx(DeploymentElementToolbar, { ...props }) }),
+  /* @__PURE__ */ jsx(DefaultHandles, {})
+] }));
+const CompoundElementNode = customNode((props) => {
+  const diagram = useDiagram();
+  return /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
     /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
     /* @__PURE__ */ jsx(CompoundActions, { ...props }),
-    /* @__PURE__ */ jsx(IfNotEnabled, { feature: "ReadOnly", children: /* @__PURE__ */ jsx(CompoundDeploymentToolbar, { ...props }) }),
-    /* @__PURE__ */ jsx(DefaultHandles, {})
-  ] })),
-  "view-group": customNode((props) => /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
-    /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
+    /* @__PURE__ */ jsx(IfEnabled, { feature: "ElementDetails", children: /* @__PURE__ */ jsx(
+      CompoundDetailsButton,
+      {
+        ...props,
+        onClick: (e) => {
+          e.stopPropagation();
+          diagram.openElementDetails(props.data.modelFqn, props.id);
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsx(IfNotEnabled, { feature: "ReadOnly", children: /* @__PURE__ */ jsx(CompoundElementToolbar, { ...props }) }),
     /* @__PURE__ */ jsx(DefaultHandles, {})
-  ] }))
-};
+  ] });
+});
+const CompoundDeploymentNode = customNode((props) => /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
+  /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
+  /* @__PURE__ */ jsx(CompoundActions, { ...props }),
+  /* @__PURE__ */ jsx(IfNotEnabled, { feature: "ReadOnly", children: /* @__PURE__ */ jsx(CompoundDeploymentToolbar, { ...props }) }),
+  /* @__PURE__ */ jsx(DefaultHandles, {})
+] }));
+const ViewGroupNode = customNode((props) => /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
+  /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
+  /* @__PURE__ */ jsx(DefaultHandles, {})
+] }));
 export {
-  nodeTypes
+  CompoundDeploymentNode,
+  CompoundElementNode,
+  DeploymentNode,
+  ElementNode,
+  ViewGroupNode
 };