@likec4/diagram 1.26.1 → 1.27.0

package/dist/overlays/relationships-browser/actor.js

@@ -1,15 +1,16 @@
-import { invariant, nonNullable, delay } from "@likec4/core";
-import { applyEdgeChanges, applyNodeChanges } from "@xyflow/react";
-import { getViewportForBounds, getNodeDimensions } from "@xyflow/system";
-import { prop, omit, isNullish } from "remeda";
-import { setup, assign, fromPromise, assertEvent, cancel, raise, enqueueActions } from "xstate";
-import { MinZoom, ZIndexes } from "../../base/const.js";
-import { updateEdges } from "../../base/updateEdges.js";
-import { updateNodes } from "../../base/updateNodes.js";
-import { ViewPadding } from "./const.js";
-import { viewToNodesEdge } from "./useViewToNodesEdges.js";
-import { Base } from "../../base/types.js";
-import { centerXYInternalNode } from "../../utils/xyflow.js";
+import { invariant, nonNullable, delay } from '@likec4/core';
+import { applyEdgeChanges, applyNodeChanges } from '@xyflow/react';
+import { getViewportForBounds, getNodeDimensions } from '@xyflow/system';
+import { prop, omit, isNullish } from 'remeda';
+import { setup, assign, fromPromise, assertEvent, enqueueActions, cancel, raise } from 'xstate';
+import { MinZoom, ZIndexes } from '../../base/const.js';
+import { updateEdges } from '../../base/updateEdges.js';
+import { updateNodes } from '../../base/updateNodes.js';
+import { ViewPadding } from './const.js';
+import { viewToNodesEdge } from './useViewToNodesEdges.js';
+import { Base } from '../../base/types.js';
+import { centerXYInternalNode } from '../../utils/xyflow.js';
+
 const findRootSubject = (nodes) => nodes.find(
   (n) => n.data.column === "subjects" && isNullish(n.parentId)
 );
@@ -128,7 +129,14 @@ const relationshipsBrowserLogic = setup({
     layouter
   },
   guards: {
-    isReady: ({ context }) => context.xyflow !== null && context.xystore !== null && context.layouted !== null
+    isReady: ({ context }) => context.xyflow !== null && context.xystore !== null && context.layouted !== null,
+    anotherSubject: ({ context, event }) => {
+      if (event.type === "update.view") {
+        const subject = context.layouted?.subject;
+        return subject !== event.layouted.subject;
+      }
+      return false;
+    }
   },
   actions: {
     "xyflow.init": assign(({ event }) => {
@@ -162,15 +170,12 @@ const relationshipsBrowserLogic = setup({
       updateNodeInternals(updates, { triggerFitView: false });
     },
     "xyflow:fitDiagram": ({ context }, params) => {
-      var _a;
-      let {
-        duration = 450,
-        bounds
-      } = params ?? {};
+      let { duration, bounds } = params ?? {};
+      duration ??= 450;
       const { xyflow, xystore } = context;
       invariant(xyflow, "xyflow is not initialized");
       invariant(xystore, "xystore is not initialized");
-      bounds ?? (bounds = (_a = context.layouted) == null ? void 0 : _a.bounds);
+      bounds ??= context.layouted?.bounds;
       const maxZoom = Math.max(xyflow.getZoom(), 1);
       if (bounds) {
         const { width, height } = xystore.getState();
@@ -184,14 +189,29 @@ const relationshipsBrowserLogic = setup({
           ...duration > 0 && { duration }
         });
       }
-    }
+    },
+    "xyflow.applyNodeChanges": assign(({ context, event }) => {
+      assertEvent(event, "xyflow.applyNodeChanges");
+      return {
+        xynodes: applyNodeChanges(event.changes, context.xynodes)
+      };
+    }),
+    "xyflow.applyEdgeChanges": assign(({ context, event }) => {
+      assertEvent(event, "xyflow.applyEdgeChanges");
+      return {
+        xyedges: applyEdgeChanges(event.changes, context.xyedges)
+      };
+    })
   }
 }).createMachine({
   id: "relationships-browser",
   context: ({ input }) => ({
-    ...input,
+    subject: input.subject,
+    viewId: input.viewId,
+    scope: input.viewId ? input.scope : "global",
     closeable: input.closeable ?? true,
-    enableNavigationMenu: input.enableNavigationMenu ?? true,
+    enableSelectSubject: input.enableSelectSubject ?? true,
+    enableChangeScope: input.enableChangeScope ?? true,
     xyflow: null,
     xystore: null,
     layouted: null,
@@ -202,18 +222,10 @@ const relationshipsBrowserLogic = setup({
   initial: "initializing",
   on: {
     "xyflow.applyNodeChanges": {
-      actions: assign({
-        xynodes: ({ context, event }) => {
-          return applyNodeChanges(event.changes, context.xynodes);
-        }
-      })
+      actions: "xyflow.applyNodeChanges"
     },
     "xyflow.applyEdgeChanges": {
-      actions: assign({
-        xyedges: ({ context, event }) => {
-          return applyEdgeChanges(event.changes, context.xyedges);
-        }
-      })
+      actions: "xyflow.applyEdgeChanges"
     }
   },
   states: {
@@ -235,8 +247,8 @@ const relationshipsBrowserLogic = setup({
       always: [{
         guard: "isReady",
         actions: [
-          raise({ type: "fitDiagram", duration: 0 }),
-          raise({ type: "xyflow.updateNodeInternals" }, { delay: 100 })
+          { type: "xyflow:fitDiagram", params: { duration: 0 } },
+          raise({ type: "xyflow.updateNodeInternals" }, { delay: 150 })
         ],
         target: "active"
       }, {
@@ -246,6 +258,62 @@ const relationshipsBrowserLogic = setup({
     "active": {
       initial: "idle",
       tags: ["active"],
+      on: {
+        "xyflow.nodeClick": {
+          actions: enqueueActions(({ event, enqueue }) => {
+            if ("fqn" in event.node.data) {
+              const fqn = event.node.data.fqn;
+              enqueue.raise({
+                type: "navigate.to",
+                subject: fqn,
+                fromNode: event.node.id
+              });
+            }
+          })
+        },
+        "navigate.to": {
+          actions: [
+            assign({
+              subject: ({ event }) => event.subject,
+              navigateFromNode: ({ event }) => event.fromNode ?? null
+            })
+          ]
+        },
+        "xyflow.paneDblClick": {
+          actions: "xyflow:fitDiagram"
+        },
+        "update.view": {
+          actions: "update.view",
+          target: ".layouting"
+        },
+        "change.scope": {
+          actions: assign({
+            scope: ({ event }) => event.scope
+          })
+        },
+        "xyflow.updateNodeInternals": {
+          actions: "xyflow:updateNodeInternals"
+        },
+        "fitDiagram": {
+          actions: {
+            type: "xyflow:fitDiagram",
+            params: prop("event")
+          }
+        },
+        "xyflow.resized": {
+          actions: [
+            cancel("fitDiagram"),
+            raise({ type: "fitDiagram" }, { id: "fitDiagram", delay: 300 })
+          ]
+        },
+        "xyflow.init": {
+          actions: "xyflow.init"
+        },
+        "xyflow.unmount": {
+          target: "initializing"
+        },
+        "close": "closed"
+      },
       states: {
         "idle": {
           on: {
@@ -331,9 +399,10 @@ const relationshipsBrowserLogic = setup({
                   xynodes: event.output.xynodes,
                   xyedges: event.output.xyedges,
                   navigateFromNode: null
-                }), enqueue.raise({ type: "fitDiagram" }, { id: "fitDiagram", delay: 50 });
-                for (let i = 0; i <= 10; i++) {
-                  enqueue.raise({ type: "xyflow.updateNodeInternals" }, { delay: 100 + i * 50 });
+                });
+                enqueue.raise({ type: "fitDiagram" }, { id: "fitDiagram", delay: 50 });
+                for (let i = 0; i < 6; i++) {
+                  enqueue.raise({ type: "xyflow.updateNodeInternals" }, { delay: 100 + i * 100 });
                 }
               })
             }
@@ -353,59 +422,6 @@ const relationshipsBrowserLogic = setup({
             }
           }
         }
-      },
-      on: {
-        "xyflow.nodeClick": {
-          actions: enqueueActions(({ event, enqueue }) => {
-            if ("fqn" in event.node.data) {
-              const fqn = event.node.data.fqn;
-              enqueue.raise({
-                type: "navigate.to",
-                subject: fqn,
-                fromNode: event.node.id
-              });
-            }
-          })
-        },
-        "navigate.to": {
-          actions: [
-            assign({
-              subject: ({ event }) => event.subject,
-              navigateFromNode: ({ event }) => event.fromNode ?? null
-            })
-          ]
-        },
-        "xyflow.paneDblClick": {
-          actions: "xyflow:fitDiagram"
-        },
-        "update.view": {
-          actions: assign({
-            layouted: ({ event }) => event.layouted
-          }),
-          target: ".layouting"
-        },
-        "xyflow.updateNodeInternals": {
-          actions: "xyflow:updateNodeInternals"
-        },
-        "fitDiagram": {
-          actions: {
-            type: "xyflow:fitDiagram",
-            params: prop("event")
-          }
-        },
-        "xyflow.resized": {
-          actions: [
-            cancel("fitDiagram"),
-            raise({ type: "fitDiagram" }, { id: "fitDiagram", delay: 300 })
-          ]
-        },
-        "xyflow.init": {
-          actions: "xyflow.init"
-        },
-        "xyflow.unmount": {
-          target: "initializing"
-        },
-        "close": "closed"
       }
     },
     closed: {
@@ -421,7 +437,5 @@ const relationshipsBrowserLogic = setup({
     xynodes: []
   })
 });
-export {
-  layouter,
-  relationshipsBrowserLogic
-};
+
+export { layouter, relationshipsBrowserLogic };

package/dist/overlays/relationships-browser/const.d.ts

@@ -1 +1 @@
-export declare const ViewPadding = 0.08;
+export declare const ViewPadding = 0.1;

package/dist/overlays/relationships-browser/const.js

@@ -1,4 +1,3 @@
-const ViewPadding = 0.08;
-export {
-  ViewPadding
-};
+const ViewPadding = 0.1;
+
+export { ViewPadding };

package/dist/overlays/relationships-browser/custom/ElementActions.js

@@ -1,9 +1,10 @@
-import { jsx } from "react/jsx-runtime";
-import { IconZoomScan, IconTransform, IconFileSymlink } from "@tabler/icons-react";
-import { useEnabledFeature } from "../../../context/DiagramFeatures.js";
-import { useDiagram } from "../../../hooks/useDiagram.js";
-import { useRelationshipsBrowser, useRelationshipsBrowserState } from "../hooks.js";
-import { ElementActionButtons } from "../../../base/primitives/element/ElementActionButtons.js";
+import { jsx } from 'react/jsx-runtime';
+import { IconZoomScan, IconTransform, IconFileSymlink } from '@tabler/icons-react';
+import { useEnabledFeature } from '../../../context/DiagramFeatures.js';
+import { useDiagram } from '../../../hooks/useDiagram.js';
+import { useRelationshipsBrowser, useRelationshipsBrowserState } from '../hooks.js';
+import { ElementActionButtons } from '../../../base/primitives/element/ElementActionButtons.js';
+
 const ElementActions = (props) => {
   const { enableNavigateTo, enableVscode } = useEnabledFeature("NavigateTo", "Vscode");
   const diagram = useDiagram();
@@ -49,6 +50,5 @@ const ElementActions = (props) => {
     }
   );
 };
-export {
-  ElementActions
-};
+
+export { ElementActions };

package/dist/overlays/relationships-browser/custom/EmptyNode.js

@@ -1,6 +1,7 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Box, Text } from "@mantine/core";
-import { emptyNode } from "./styles.css.js";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Box, Text } from '@mantine/core';
+import { emptyNode } from './styles.css.js';
+
 function EmptyNode({
   data: {
     column
@@ -11,6 +12,5 @@ function EmptyNode({
     column === "incomers" ? "incoming" : "outgoing"
   ] }) });
 }
-export {
-  EmptyNode
-};
+
+export { EmptyNode };

package/dist/overlays/relationships-browser/custom/edgeTypes.d.ts

@@ -1,47 +1,46 @@
 import { NamedExoticComponent, CSSProperties, ReactNode } from 'react';
 import { Position } from '@xyflow/system';
 import { NonEmptyArray, RelationId, Color, ViewId, RelationshipLineType } from '@likec4/core';
-export declare const edgeTypes: {
-    relationships: NamedExoticComponent<{
-        source: string;
-        target: string;
-        style?: CSSProperties;
-        id: string;
-        selected?: boolean;
-        animated?: boolean;
-        deletable?: boolean;
-        selectable?: boolean;
-        sourceX: number;
-        sourceY: number;
-        targetX: number;
-        targetY: number;
-        sourcePosition: Position;
-        targetPosition: Position;
-        label?: ReactNode;
-        labelStyle?: CSSProperties;
-        labelShowBg?: boolean;
-        labelBgStyle?: CSSProperties;
-        labelBgPadding?: [number, number];
-        labelBgBorderRadius?: number;
-        sourceHandleId?: string | null;
-        targetHandleId?: string | null;
-        markerStart?: string;
-        markerEnd?: string;
-        pathOptions?: any;
-        interactionWidth?: number;
-        data: {
-            hovered?: boolean;
-            active?: boolean;
-            dimmed?: import("../../../base").Base.Dimmed;
-        } & {
-            relations: NonEmptyArray<RelationId>;
-            color: Color | undefined;
-            label: string | null;
-            navigateTo: ViewId | null;
-            line: RelationshipLineType;
-            hovered?: boolean;
-            active?: boolean;
-            dimmed?: import("../../../base").Base.Dimmed;
-        };
-    }>;
-};
+export declare const RelationshipEdge: NamedExoticComponent<{
+    id: string;
+    selected?: boolean;
+    selectable?: boolean;
+    deletable?: boolean;
+    style?: CSSProperties;
+    source: string;
+    target: string;
+    animated?: boolean;
+    sourceX: number;
+    sourceY: number;
+    targetX: number;
+    targetY: number;
+    sourcePosition: Position;
+    targetPosition: Position;
+    label?: ReactNode;
+    labelStyle?: CSSProperties;
+    labelShowBg?: boolean;
+    labelBgStyle?: CSSProperties;
+    labelBgPadding?: [number, number];
+    labelBgBorderRadius?: number;
+    sourceHandleId?: string | null;
+    targetHandleId?: string | null;
+    markerStart?: string;
+    markerEnd?: string;
+    pathOptions?: any;
+    interactionWidth?: number;
+    data: {
+        hovered?: boolean;
+        active?: boolean;
+        dimmed?: import("../../../base").Base.Dimmed;
+    } & {
+        relations: NonEmptyArray<RelationId>;
+        color: Color | undefined;
+        label: string | null;
+        navigateTo: ViewId | null;
+        line: RelationshipLineType;
+        existsInCurrentView: boolean;
+        hovered?: boolean;
+        active?: boolean;
+        dimmed?: import("../../../base").Base.Dimmed;
+    };
+}>;

package/dist/overlays/relationships-browser/custom/edgeTypes.js

@@ -1,69 +1,101 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { getBezierPath } from "@xyflow/system";
-import { useDiagram } from "../../../hooks/useDiagram.js";
-import { customEdge } from "../../../base/primitives/customEdge.js";
-import { useEnabledFeature } from "../../../context/DiagramFeatures.js";
-import { EdgeContainer } from "../../../base/primitives/edge/EdgeContainer.js";
-import { EdgePath } from "../../../base/primitives/edge/EdgePath.js";
-import { EdgeLabel } from "../../../base/primitives/edge/EdgeLabel.js";
-import { EdgeActionButton } from "../../../base/primitives/edge/EdgeActionButton.js";
-const edgeTypes = {
-  relationships: customEdge((props) => {
-    const { enableNavigateTo } = useEnabledFeature("NavigateTo");
-    const {
-      data: {
-        navigateTo,
-        relations
-      }
-    } = props;
-    const [svgPath, labelX, labelY] = getBezierPath(props);
-    const diagram = useDiagram();
-    const edgeProps = relations.length > 1 ? {
-      ...props,
-      data: {
-        ...props.data,
-        line: "solid",
-        color: "amber"
-      }
-    } : props;
-    return /* @__PURE__ */ jsxs(EdgeContainer, { ...edgeProps, children: [
-      /* @__PURE__ */ jsx(
-        EdgePath,
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { css } from '@likec4/styles/css';
+import { Tooltip } from '@mantine/core';
+import { getBezierPath } from '@xyflow/system';
+import { useDiagram } from '../../../hooks/useDiagram.js';
+import { useRelationshipsBrowser } from '../hooks.js';
+import { customEdge } from '../../../base/primitives/customEdge.js';
+import { useEnabledFeature } from '../../../context/DiagramFeatures.js';
+import { EdgeLabel } from '../../../base/primitives/edge/EdgeLabel.js';
+import { EdgeActionButton } from '../../../base/primitives/edge/EdgeActionButton.js';
+import { EdgeContainer } from '../../../base/primitives/edge/EdgeContainer.js';
+import { EdgePath } from '../../../base/primitives/edge/EdgePath.js';
+import { EdgeLabelContainer } from '../../../base/primitives/edge/EdgeLabelContainer.js';
+
+const RelationshipEdge = customEdge((props) => {
+  const browser = useRelationshipsBrowser();
+  const { enableNavigateTo } = useEnabledFeature("NavigateTo");
+  const {
+    id,
+    data: {
+      navigateTo,
+      relations,
+      existsInCurrentView
+    }
+  } = props;
+  const [svgPath, labelX, labelY] = getBezierPath(props);
+  const diagram = useDiagram();
+  const markOrange = relations.length > 1 || !existsInCurrentView;
+  const edgeProps = markOrange ? {
+    ...props,
+    data: {
+      ...props.data,
+      line: "solid",
+      color: "amber"
+    }
+  } : props;
+  let label = /* @__PURE__ */ jsx(
+    EdgeLabel,
+    {
+      edgeProps,
+      className: css({
+        transition: "fast"
+      }),
+      children: enableNavigateTo && navigateTo && /* @__PURE__ */ jsx(
+        EdgeActionButton,
         {
-          ...edgeProps,
-          svgPath,
-          ...relations.length > 1 && {
-            strokeWidth: 5
+          ...props,
+          onClick: (e) => {
+            e.stopPropagation();
+            diagram.navigateTo(navigateTo);
           }
         }
-      ),
-      /* @__PURE__ */ jsx(
-        EdgeLabel,
-        {
-          edgeProps,
-          labelPosition: {
-            x: labelX,
-            y: labelY,
-            translate: "translate(-50%, 0)"
-          },
-          style: {
-            maxWidth: Math.min(Math.abs(props.targetX - props.sourceX - 70), 250)
-          },
-          children: enableNavigateTo && navigateTo && /* @__PURE__ */ jsx(
-            EdgeActionButton,
-            {
-              ...props,
-              onClick: (e) => {
-                e.stopPropagation();
-                diagram.navigateTo(navigateTo);
-              }
-            }
-          )
-        }
       )
-    ] });
-  })
-};
-export {
-  edgeTypes
-};
+    }
+  );
+  if (!existsInCurrentView) {
+    label = /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        color: "orange",
+        c: "black",
+        label: "This relationship is not included in the current view",
+        portalProps: {
+          target: `#${browser.rootElementId.replaceAll(":", "\\:")}`
+        },
+        openDelay: 800,
+        children: label
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(EdgeContainer, { ...edgeProps, children: [
+    /* @__PURE__ */ jsx(
+      EdgePath,
+      {
+        ...edgeProps,
+        svgPath,
+        ...markOrange && {
+          strokeWidth: 5
+        }
+      },
+      id
+    ),
+    /* @__PURE__ */ jsx(
+      EdgeLabelContainer,
+      {
+        edgeProps,
+        labelPosition: {
+          x: labelX,
+          y: labelY,
+          translate: "translate(-50%, 0)"
+        },
+        style: {
+          maxWidth: Math.min(Math.abs(props.targetX - props.sourceX - 70), 250)
+        },
+        children: label
+      }
+    )
+  ] }, id);
+});
+
+export { RelationshipEdge };

package/dist/overlays/relationships-browser/custom/index.d.ts

@@ -1,2 +1,2 @@
-export { edgeTypes } from './edgeTypes';
-export { nodeTypes } from './nodeTypes';
+export { RelationshipEdge } from './edgeTypes';
+export { CompoundNode, ElementNode, EmptyNode } from './nodeTypes';