@likec4/diagram 1.20.1 → 1.20.2

package/dist/hooks/useDiagramActor.d.ts

@@ -1,5 +1,5 @@
 import { LikeC4ViewActorRef, MachineSnapshot } from '../likec4diagram/state/machine';
 import { SyncLayoutActorSnapshot } from '../likec4diagram/state/syncManualLayoutActor';
 export declare function useDiagramActor(): LikeC4ViewActorRef;
-export declare function useDiagramActorState<T>(selector: (state: MachineSnapshot) => T, compare?: <A, B>(a: A, b: B) => boolean): T;
-export declare function useDiagramSyncLayoutState<T>(selector: (state: SyncLayoutActorSnapshot) => T, compare?: <A, B>(a: A, b: B) => boolean): T;
+export declare function useDiagramActorState<T = unknown>(selector: (state: MachineSnapshot) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean): T;
+export declare function useDiagramSyncLayoutState<T = unknown>(selector: (state: SyncLayoutActorSnapshot) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean): T;

package/dist/hooks/useDiagramContext.d.ts

@@ -1,3 +1,3 @@
 import { DiagramContext } from '../likec4diagram/state/machine';
-export declare function useDiagramContext<T>(selector: (state: DiagramContext) => T, compare?: <A, B>(a: A, b: B) => boolean): T;
+export declare function useDiagramContext<T = unknown>(selector: (state: DiagramContext) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean): T;
 export { DiagramContext } from '../likec4diagram/state/machine';

package/dist/hooks/useXYFlow.d.ts

@@ -50,7 +50,7 @@ export declare const useXYFlow: () => ReactFlowInstance<Types.Node, {
         dimmed?: import("../base").Base.Dimmed;
     };
 }>;
-export declare function useXYStore<StateSlice = unknown>(selector: (state: ReactFlowState<Types.Node, Types.Edge>) => StateSlice, equalityFn?: (a: StateSlice, b: StateSlice) => boolean): StateSlice;
+export declare function useXYStore<StateSlice = unknown>(selector: (state: ReactFlowState<Types.Node, Types.Edge>) => StateSlice, equalityFn?: (a: NoInfer<StateSlice>, b: NoInfer<StateSlice>) => boolean): StateSlice;
 export declare const useXYStoreApi: () => {
     getState: () => ReactFlowState<Types.Node, {
         id: string;
@@ -426,3 +426,4 @@ export declare const useXYStoreApi: () => {
 };
 export type XYStoreApi = ReturnType<typeof useXYStoreApi>;
 export declare const useXYInternalNode: (id: string) => InternalNode<Types.Node> | undefined;
+export declare function useIsZoomTooSmall(): boolean;

package/dist/hooks/useXYFlow.js

@@ -10,7 +10,12 @@ function useXYStore(selector, equalityFn) {
 }
 const useXYStoreApi = useStoreApi;
 const useXYInternalNode = useInternalNode;
+const selectZoom = (state) => state.transform[2] < 0.2;
+function useIsZoomTooSmall() {
+  return useStore(selectZoom);
+}
 export {
+  useIsZoomTooSmall,
   useXYFlow,
   useXYInternalNode,
   useXYStore,

package/dist/likec4diagram/XYFlow.js

@@ -2,12 +2,12 @@ import { 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 { useDiagram } from "../hooks/useDiagram.js";
 import { useDiagramContext } from "../hooks/useDiagramContext.js";
 import { edgeTypes } from "./custom/index.js";
 import { useLayoutConstraints } from "./useLayoutConstraints.js";
 import { useDiagramEventHandlers } from "../context/DiagramEventHandlers.js";
-import { useEnabledFeature } from "../context/DiagramFeatures.js";
 import { BaseXYFlow } from "../base/BaseXYFlow.js";
 import { nodeTypes } from "./custom/nodes/nodeTypes.js";
 const selectXYProps = (ctx) => ({
@@ -16,16 +16,21 @@ const selectXYProps = (ctx) => ({
   edges: ctx.xyedges,
   pannable: ctx.pannable,
   zoomable: ctx.zoomable,
-  fitViewPadding: ctx.fitViewPadding
+  fitViewPadding: ctx.fitViewPadding,
+  enableFitView: ctx.features.enableFitView,
+  enableReadOnly: ctx.features.enableReadOnly
 });
+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);
 const LikeC4DiagramXYFlow = ({ background, ...rest }) => {
   const diagram = useDiagram();
   const {
     initialized,
     nodes,
     edges,
+    enableReadOnly,
+    enableFitView,
     ...props
-  } = useDiagramContext(selectXYProps);
+  } = useDiagramContext(selectXYProps, equalsXYProps);
   const {
     onNodeContextMenu,
     onCanvasContextMenu,
@@ -35,12 +40,11 @@ const LikeC4DiagramXYFlow = ({ background, ...rest }) => {
     onCanvasClick,
     onCanvasDblClick
   } = useDiagramEventHandlers();
-  const {
-    enableFitView,
-    enableReadOnly
-  } = useEnabledFeature("ReadOnly", "FitView");
   const notReadOnly = !enableReadOnly;
   const layoutConstraints = useLayoutConstraints();
+  const onViewportResize = useCallbackRef(() => {
+    diagram.send({ type: "xyflow.resized" });
+  });
   return /* @__PURE__ */ jsx(
     BaseXYFlow,
     {
@@ -107,9 +111,7 @@ const LikeC4DiagramXYFlow = ({ background, ...rest }) => {
         })
       },
       ...enableFitView && {
-        onViewportResize: () => {
-          diagram.send({ type: "xyflow.resized" });
-        }
+        onViewportResize
       },
       ...notReadOnly && rest.nodesDraggable && layoutConstraints,
       ...props,

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

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

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

@@ -7,13 +7,13 @@ import { useCallback, forwardRef, Fragment as Fragment$1 } from "react";
 import { pipe, map, filter, isTruthy, partition } from "remeda";
 import { useDiagram } from "../../../hooks/useDiagram.js";
 import { useDiagramContext } from "../../../hooks/useDiagramContext.js";
-import { Link } from "../../ui/diagram-title/Link.js";
 import { menuDropdown, menuItemRelationship, endpoint, title } from "./RelationshipsDropdownMenu.css.js";
 import { DiagramContext } from "../../state/machine.js";
 import { useLikeC4Model } from "../../../likec4model/useLikeC4Model.js";
 import { useMantinePortalProps } from "../../../hooks/useMantinePortalProps.js";
 import { useEnabledFeature, IfEnabled } from "../../../context/DiagramFeatures.js";
 import { useDiagramEventHandlers } from "../../../context/DiagramEventHandlers.js";
+import { Link } from "../../../base/Link.js";
 const stopPropagation = (e) => e.stopPropagation();
 const Tooltip = Tooltip$1.withProps({
   color: "gray",
@@ -194,7 +194,7 @@ const Relationship = forwardRef(({
         gap: 3,
         justify: "stretch",
         align: "stretch",
-        children: links.map((link) => /* @__PURE__ */ jsx(Link, { link }, link.url))
+        children: links.map((link) => /* @__PURE__ */ jsx(Link, { size: "sm", value: link }, link.url))
       }
     )
   ] });

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

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

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

@@ -32,7 +32,7 @@ const ElementDetailsButtonWithHandler = ({ fqn, ...props }) => {
 };
 const nodeTypes = {
   element: customNode((props) => /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
-    /* @__PURE__ */ jsx(ElementShape, { ...props }),
+    /* @__PURE__ */ jsx(ElementShape, { ...props, isMultiple: props.data.isMultiple }),
     /* @__PURE__ */ jsx(ElementTitle, { ...props }),
     /* @__PURE__ */ jsx(ElementActions, { ...props }),
     /* @__PURE__ */ jsx(
@@ -46,7 +46,7 @@ const nodeTypes = {
     /* @__PURE__ */ jsx(DefaultHandles, {})
   ] })),
   deployment: customNode((props) => /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
-    /* @__PURE__ */ jsx(ElementShape, { ...props }),
+    /* @__PURE__ */ jsx(ElementShape, { ...props, isMultiple: props.data.isMultiple }),
     /* @__PURE__ */ jsx(ElementTitle, { ...props }),
     /* @__PURE__ */ jsx(DeploymentElementActions, { ...props }),
     !!props.data.modelFqn && /* @__PURE__ */ jsx(