@likec4/diagram 1.22.0 → 1.23.0

package/dist/overlays/overlaysActor.js

@@ -0,0 +1,233 @@
+import { getHotkeyHandler } from "@mantine/hooks";
+import { last, isString, reverse } from "remeda";
+import { setup, stopChild, spawnChild, enqueueActions, fromCallback, assertEvent } from "xstate";
+import { elementDetailsLogic } from "./element-details/actor.js";
+import { relationshipDetailsLogic } from "./relationship-details/actor.js";
+import { relationshipsBrowserLogic } from "./relationships-browser/actor.js";
+const hotkeyLogic = fromCallback(({ sendBack }) => {
+  const handler = getHotkeyHandler([
+    ["Escape", () => sendBack({ type: "close" }), {
+      preventDefault: true
+    }]
+  ]);
+  document.body.addEventListener("keydown", handler, { capture: true });
+  return () => {
+    document.body.removeEventListener("keydown", handler, { capture: true });
+  };
+});
+const overlaysActorLogic = setup({
+  types: {
+    context: {},
+    events: {},
+    emitted: {},
+    children: {}
+  },
+  actors: {
+    relationshipDetails: relationshipDetailsLogic,
+    elementDetails: elementDetailsLogic,
+    relationshipsBrowser: relationshipsBrowserLogic,
+    hotkey: hotkeyLogic
+  },
+  actions: {
+    "closeLastOverlay": enqueueActions(({ context, enqueue }) => {
+      var _a;
+      if (context.overlays.length === 0) {
+        return;
+      }
+      const lastOverlay = (_a = last(context.overlays)) == null ? void 0 : _a.id;
+      if (!lastOverlay) {
+        return;
+      }
+      enqueue.sendTo(lastOverlay, { type: "close" });
+      enqueue.stopChild(lastOverlay);
+      enqueue.assign({
+        overlays: context.overlays.filter((o) => o.id !== lastOverlay)
+      });
+    }),
+    "closeSpecificOverlay": enqueueActions(({ context, enqueue }, params) => {
+      var _a;
+      const toClose = (_a = context.overlays.find((o) => o.id === params.actorId)) == null ? void 0 : _a.id;
+      if (toClose) {
+        enqueue.sendTo(toClose, { type: "close" });
+        enqueue.stopChild(toClose);
+        enqueue.assign({
+          overlays: context.overlays.filter((o) => o.id !== toClose)
+        });
+      }
+    }),
+    "closeAllOverlays": enqueueActions(({ context, enqueue }) => {
+      for (const { id } of reverse(context.overlays)) {
+        enqueue.sendTo(id, { type: "close" });
+        enqueue.stopChild(id);
+      }
+      enqueue.assign({ overlays: [] });
+    }),
+    "openElementDetails": enqueueActions(({ context, enqueue, event }) => {
+      assertEvent(event, "open.elementDetails");
+      if (context.overlays.some((o) => o.type === "elementDetails" && o.subject === event.subject)) {
+        return;
+      }
+      const id = `elementDetails-${context.seq}`;
+      enqueue.spawnChild("elementDetails", {
+        id,
+        input: event
+      });
+      enqueue.assign({
+        seq: context.seq + 1,
+        overlays: [
+          ...context.overlays,
+          {
+            type: "elementDetails",
+            id,
+            subject: event.subject
+          }
+        ]
+      });
+    }),
+    "openRelationshipDetails": enqueueActions(({ context, enqueue, event }) => {
+      assertEvent(event, "open.relationshipDetails");
+      const currentOverlay = last(context.overlays);
+      if ((currentOverlay == null ? void 0 : currentOverlay.type) === "relationshipDetails") {
+        enqueue.sendTo(currentOverlay.id, {
+          type: "navigate.to",
+          edgeId: event.edgeId
+        });
+        return;
+      }
+      const id = `relationshipDetails-${context.seq}`;
+      enqueue.spawnChild("relationshipDetails", {
+        id,
+        input: event
+      });
+      enqueue.assign({
+        seq: context.seq + 1,
+        overlays: [
+          ...context.overlays,
+          {
+            type: "relationshipDetails",
+            id
+          }
+        ]
+      });
+    }),
+    "openRelationshipsBrowser": enqueueActions(({ context, enqueue, event }) => {
+      assertEvent(event, "open.relationshipsBrowser");
+      const currentOverlay = last(context.overlays);
+      if ((currentOverlay == null ? void 0 : currentOverlay.type) === "relationshipsBrowser") {
+        enqueue.sendTo(currentOverlay.id, {
+          type: "navigate.to",
+          subject: event.subject
+        });
+        return;
+      }
+      const id = `relationshipsBrowser-${context.seq}`;
+      enqueue.spawnChild("relationshipsBrowser", {
+        id,
+        input: event
+      });
+      enqueue.assign({
+        seq: context.seq + 1,
+        overlays: [
+          ...context.overlays,
+          {
+            type: "relationshipsBrowser",
+            id,
+            subject: event.subject
+          }
+        ]
+      });
+    }),
+    "listenToEsc": spawnChild("hotkey", {
+      id: "hotkey"
+    }),
+    "stopListeningToEsc": stopChild("hotkey")
+  },
+  guards: {
+    "has overlays?": ({ context }) => context.overlays.length > 0,
+    "close specific overlay?": ({ context, event }) => {
+      assertEvent(event, "close");
+      return isString(event.actorId) && context.overlays.some((o) => o.id === event.actorId);
+    },
+    "last: is relationshipDetails?": ({ context }) => {
+      const lastOverlay = last(context.overlays);
+      return (lastOverlay == null ? void 0 : lastOverlay.type) === "relationshipDetails";
+    },
+    "last: is relationshipsBrowser?": ({ context }) => {
+      const lastOverlay = last(context.overlays);
+      return (lastOverlay == null ? void 0 : lastOverlay.type) === "relationshipsBrowser";
+    }
+  }
+}).createMachine({
+  id: "overlays",
+  context: () => ({
+    seq: 1,
+    overlays: []
+  }),
+  initial: "idle",
+  on: {
+    "open.elementDetails": {
+      actions: "openElementDetails",
+      target: ".active",
+      reenter: false
+    },
+    "open.relationshipDetails": {
+      actions: "openRelationshipDetails",
+      target: ".active",
+      reenter: false
+    },
+    "open.relationshipsBrowser": {
+      actions: "openRelationshipsBrowser",
+      target: ".active",
+      reenter: false
+    }
+  },
+  states: {
+    idle: {},
+    active: {
+      entry: "listenToEsc",
+      exit: "stopListeningToEsc",
+      on: {
+        "close": [
+          {
+            guard: "close specific overlay?",
+            actions: {
+              type: "closeSpecificOverlay",
+              params: ({ event }) => ({ actorId: event.actorId })
+            },
+            target: "closing"
+          },
+          {
+            actions: "closeLastOverlay",
+            target: "closing"
+          }
+        ],
+        "close.all": {
+          actions: [
+            "closeAllOverlays",
+            "stopListeningToEsc"
+          ],
+          target: "idle"
+        }
+      }
+    },
+    closing: {
+      always: [
+        {
+          guard: "has overlays?",
+          target: "active"
+        },
+        {
+          actions: "stopListeningToEsc",
+          target: "idle"
+        }
+      ]
+    }
+  },
+  exit: [
+    "stopListeningToEsc",
+    "closeAllOverlays"
+  ]
+});
+export {
+  overlaysActorLogic
+};

package/dist/overlays/relationship-details/actor.d.ts

@@ -1,6 +1,6 @@
 import { BBox, DiagramView, EdgeId } from '@likec4/core';
 import { ReactFlowInstance } from '@xyflow/react';
-import { ActorLogic, ActorRefFromLogic, MachineSnapshot, SnapshotFrom } from 'xstate';
+import { ActorLogicFrom, ActorRefFromLogic, MachineSnapshot, SnapshotFrom, StateMachine, NonReducibleUnknown, EventObject, MetaObject, AnyActorLogic, ConditionalRequired, InputFrom, RequiredLogicInput, IsNotNever, ActorRef, AnyActorRef, StateValue, AnyEventObject, ActionFunction, CancelAction } from 'xstate';
 import { RelationshipDetailsTypes } from './_types';
 type XYFLowInstance = ReactFlowInstance<RelationshipDetailsTypes.Node, RelationshipDetailsTypes.Edge>;
 export type Input = {
@@ -34,8 +34,134 @@ export type Events = {
 } | {
     type: 'close';
 };
-export declare const relationshipDetailsActor: ActorLogic<MachineSnapshot<Context, Events, any, "opening" | "active" | "closed", any, any, any, any>, Events, Input, any, any>;
-export type RelationshipDetailsLogic = typeof relationshipDetailsActor;
-export type RelationshipDetailsActorRef = ActorRefFromLogic<typeof relationshipDetailsActor>;
+export declare const relationshipDetailsLogic: StateMachine<Readonly<Input & {
+    xyflow: XYFLowInstance | null;
+    initialized: boolean;
+}>, Events, {}, never, {
+    type: "xyflow:fitDiagram";
+    params: {
+        duration?: number;
+        bounds?: BBox;
+    } | undefined;
+}, {
+    type: "enable: navigate.to";
+    params: unknown;
+}, never, "active" | "closed" | "opening", string, Input, NonReducibleUnknown, EventObject, MetaObject, {
+    readonly initial: "opening";
+    readonly context: ({ input }: {
+        spawn: {
+            <TSrc extends never>(logic: TSrc, ...[options]: never): ActorRefFromLogic<never>;
+            <TLogic extends AnyActorLogic>(src: TLogic, ...[options]: ConditionalRequired<[options?: {
+                id?: never;
+                systemId?: string;
+                input?: InputFrom<TLogic>;
+                syncSnapshot?: boolean;
+            } & { [K in RequiredLogicInput<TLogic>]: unknown; }], IsNotNever<RequiredLogicInput<TLogic>>>): ActorRefFromLogic<TLogic>;
+        };
+        input: Input;
+        self: ActorRef<MachineSnapshot<Readonly<Input & {
+            xyflow: XYFLowInstance | null;
+            initialized: boolean;
+        }>, Events, Record<string, AnyActorRef | undefined>, StateValue, string, unknown, any, any>, Events, AnyEventObject>;
+    }) => {
+        initialized: false;
+        xyflow: null;
+        edgeId: EdgeId;
+        view: DiagramView;
+    };
+    readonly states: {
+        readonly opening: {
+            readonly on: {
+                readonly 'xyflow.init': {
+                    readonly actions: ActionFunction<Readonly<Input & {
+                        xyflow: XYFLowInstance | null;
+                        initialized: boolean;
+                    }>, {
+                        type: "xyflow.init";
+                        instance: XYFLowInstance;
+                    }, Events, undefined, never, never, never, never, never>;
+                    readonly target: "active";
+                };
+                readonly close: {
+                    readonly target: "closed";
+                };
+            };
+        };
+        readonly active: {
+            readonly entry: {
+                readonly type: "xyflow:fitDiagram";
+                readonly params: {
+                    readonly duration: 0;
+                };
+            };
+            readonly on: {
+                readonly 'navigate.to': {
+                    readonly actions: readonly [ ActionFunction<Readonly<Input & {
+                        xyflow: XYFLowInstance | null;
+                        initialized: boolean;
+                    }>, {
+                        type: "navigate.to";
+                        edgeId: EdgeId;
+                    }, Events, undefined, never, never, never, never, never>, ActionFunction<Readonly<Input & {
+                        xyflow: XYFLowInstance | null;
+                        initialized: boolean;
+                    }>, {
+                        type: "navigate.to";
+                        edgeId: EdgeId;
+                    }, Events, undefined, never, never, never, never, never>];
+                };
+                readonly close: {
+                    readonly target: "closed";
+                };
+            };
+            readonly exit: ActionFunction<Readonly<Input & {
+                xyflow: XYFLowInstance | null;
+                initialized: boolean;
+            }>, Events, Events, undefined, never, never, never, never, never>;
+        };
+        readonly closed: {
+            readonly type: "final";
+        };
+    };
+    readonly on: {
+        readonly fitDiagram: {
+            readonly actions: {
+                readonly type: "xyflow:fitDiagram";
+                readonly params: (data: {
+                    context: Readonly<Input & {
+                        xyflow: XYFLowInstance | null;
+                        initialized: boolean;
+                    }>;
+                    event: {
+                        type: "fitDiagram";
+                        duration?: number;
+                        bounds?: BBox;
+                    };
+                }) => {
+                    type: "fitDiagram";
+                    duration?: number;
+                    bounds?: BBox;
+                };
+            };
+        };
+        readonly 'xyflow.resized': {
+            readonly actions: readonly [ CancelAction<Readonly<Input & {
+                xyflow: XYFLowInstance | null;
+                initialized: boolean;
+            }>, {
+                type: "xyflow.resized";
+            }, undefined, Events>, ActionFunction<Readonly<Input & {
+                xyflow: XYFLowInstance | null;
+                initialized: boolean;
+            }>, {
+                type: "xyflow.resized";
+            }, Events, undefined, never, never, never, never, never>];
+        };
+    };
+}>;
+export interface RelationshipDetailsLogic extends ActorLogicFrom<typeof relationshipDetailsLogic> {
+}
+export interface RelationshipDetailsActorRef extends ActorRefFromLogic<RelationshipDetailsLogic> {
+}
 export type RelationshipDetailsSnapshot = SnapshotFrom<RelationshipDetailsActorRef>;
 export {};

package/dist/overlays/relationship-details/actor.js

@@ -3,7 +3,7 @@ import "@xyflow/react";
 import { prop } from "remeda";
 import { setup, cancel, raise, assign } from "xstate";
 import { MinZoom } from "../../base/const.js";
-const relationshipDetailsActor = setup({
+const relationshipDetailsLogic = setup({
   types: {
     context: {},
     input: {},
@@ -109,5 +109,5 @@ const relationshipDetailsActor = setup({
   }
 });
 export {
-  relationshipDetailsActor
+  relationshipDetailsLogic
 };

package/dist/overlays/relationship-details/custom/edgeTypes.d.ts

@@ -7,9 +7,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/overlays/relationship-details/custom/nodeTypes.js

@@ -2,23 +2,40 @@ import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { ElementActions } from "./ElementActions.js";
 import { Handle } from "@xyflow/react";
 import { Position } from "@xyflow/system";
+import { useDiagram } from "../../../hooks/useDiagram.js";
 import { customNode } from "../../../base/primitives/customNode.js";
 import { CompoundNodeContainer } from "../../../base/primitives/compound/CompoundNodeContainer.js";
 import { CompoundTitle } from "../../../base/primitives/compound/CompoundTitle.js";
 import { ElementNodeContainer } from "../../../base/primitives/element/ElementNodeContainer.js";
 import { ElementShape } from "../../../base/primitives/element/ElementShape.js";
 import { ElementTitle } from "../../../base/primitives/element/ElementTitle.js";
+import { ElementDetailsButton } from "../../../base/primitives/element/ElementDetailsButton.js";
+const ElementDetailsButtonWithHandler = (props) => {
+  const diagram = useDiagram();
+  return /* @__PURE__ */ jsx(
+    ElementDetailsButton,
+    {
+      ...props,
+      onClick: (e) => {
+        e.stopPropagation();
+        diagram.openElementDetails(props.data.fqn);
+      }
+    }
+  );
+};
 const nodeTypes = {
   element: customNode((props) => {
     return /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
       /* @__PURE__ */ jsx(ElementShape, { ...props }),
       /* @__PURE__ */ jsx(ElementTitle, { ...props, iconSize: 40 }),
+      /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
       /* @__PURE__ */ jsx(ElementActions, { ...props }),
       /* @__PURE__ */ jsx(ElementPorts, { ...props })
     ] });
   }),
   compound: customNode((props) => {
     return /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
+      /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
       /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
       /* @__PURE__ */ jsx(CompoundPorts, { ...props })
     ] });

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

@@ -2,11 +2,11 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { ActionIcon, Group, Box } from "@mantine/core";
 import { useCallbackRef, useStateHistory } from "@mantine/hooks";
 import { IconX, IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
-import { ReactFlowProvider, useStoreApi, Panel } from "@xyflow/react";
+import { ReactFlowProvider, useStoreApi, useReactFlow, Panel } from "@xyflow/react";
 import clsx from "clsx";
 import { shallowEqual } from "fast-equals";
-import { AnimatePresence, LayoutGroup, m } from "framer-motion";
-import { useId, useRef, memo, useEffect } from "react";
+import { LayoutGroup, AnimatePresence, m } from "framer-motion";
+import { useRef, memo, useEffect } from "react";
 import { BaseXYFlow } from "../../base/BaseXYFlow.js";
 import { useRelationshipsView } from "./-useRelationshipsView.js";
 import { ViewPadding } from "./const.js";
@@ -15,28 +15,24 @@ import { nodeTypes } from "./custom/nodeTypes.js";
 import { RelationshipsBrowserActorContext, useRelationshipsBrowser, useRelationshipsBrowserState } from "./hooks.js";
 import { SelectElement } from "./SelectElement.js";
 function RelationshipsBrowser({ actorRef }) {
-  const id = useId();
   const initialRef = useRef(null);
   if (initialRef.current == null) {
     initialRef.current = {
-      initialNodes: [],
-      initialEdges: []
+      defaultNodes: [],
+      defaultEdges: []
     };
   }
-  return /* @__PURE__ */ jsx(RelationshipsBrowserActorContext.Provider, { value: actorRef, children: /* @__PURE__ */ jsx(ReactFlowProvider, { ...initialRef.current, children: /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(LayoutGroup, { id, children: /* @__PURE__ */ jsx(RelationshipsBrowserXYFlow, {}) }) }) }) });
+  return /* @__PURE__ */ jsx(RelationshipsBrowserActorContext.Provider, { value: actorRef, children: /* @__PURE__ */ jsx(ReactFlowProvider, { ...initialRef.current, children: /* @__PURE__ */ jsx(LayoutGroup, { id: actorRef.sessionId, inherit: false, children: /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(RelationshipsBrowserXYFlow, {}) }) }) }) });
 }
 const selector = (state) => ({
-  initialized: state.context.initialized,
   isActive: state.hasTag("active"),
   nodes: state.context.xynodes,
   edges: state.context.xyedges
 });
-const selectorEq = (a, b) => a.initialized === b.initialized && a.isActive === b.isActive && shallowEqual(a.nodes, b.nodes) && shallowEqual(a.edges, b.edges);
+const selectorEq = (a, b) => a.isActive === b.isActive && shallowEqual(a.nodes, b.nodes) && shallowEqual(a.edges, b.edges);
 const RelationshipsBrowserXYFlow = memo(() => {
-  const xystore = useStoreApi();
   const browser = useRelationshipsBrowser();
   const {
-    initialized,
     isActive,
     nodes,
     edges
@@ -47,16 +43,13 @@ const RelationshipsBrowserXYFlow = memo(() => {
   return /* @__PURE__ */ jsx(
     BaseXYFlow,
     {
-      id: "relationships-browser",
+      id: `relationships-browser-${browser.actor.sessionId}`,
       nodes,
       edges,
-      className: clsx(initialized && isActive ? "initialized" : "not-initialized"),
+      className: clsx(isActive ? "initialized" : "not-initialized"),
       nodeTypes,
       edgeTypes,
       fitViewPadding: ViewPadding,
-      onInit: useCallbackRef((instance) => {
-        browser.send({ type: "xyflow.init", instance, store: xystore });
-      }),
       onNodeClick: useCallbackRef((e, node) => {
         e.stopPropagation();
         browser.send({ type: "xyflow.nodeClick", node });
@@ -86,7 +79,7 @@ const RelationshipsBrowserXYFlow = memo(() => {
       fitView: false,
       pannable: true,
       zoomable: true,
-      children: initialized && /* @__PURE__ */ jsx(RelationshipsBrowserInner, {})
+      children: /* @__PURE__ */ jsx(RelationshipsBrowserInner, {})
     }
   );
 });
@@ -102,6 +95,11 @@ const RelationshipsBrowserInner = memo(() => {
     closeable,
     enableNavigationMenu
   } = useRelationshipsBrowserState(selector2);
+  const store = useStoreApi();
+  const instance = useReactFlow();
+  useEffect(() => {
+    browser.send({ type: "xyflow.init", instance, store });
+  }, [store, instance, browser]);
   const layouted = useRelationshipsView(subjectId);
   const [historySubjectId, historyOps, { history, current }] = useStateHistory(subjectId);
   useEffect(() => {
@@ -113,10 +111,10 @@ const RelationshipsBrowserInner = memo(() => {
     if (historySubjectId !== subjectId) {
       browser.navigateTo(historySubjectId);
     }
-  }, [historySubjectId]);
+  }, [historySubjectId, browser]);
   useEffect(() => {
     browser.send({ type: "update.view", layouted });
-  }, [layouted]);
+  }, [layouted, browser]);
   const hasStepBack = current > 0;
   const hasStepForward = current + 1 < history.length;
   return /* @__PURE__ */ jsxs(Fragment, { children: [