@likec4/diagram 1.43.0 → 1.45.0

package/dist/overlays/overlaysActor.js

@@ -1,9 +1,10 @@
 import { getHotkeyHandler } from '@mantine/hooks';
 import { last, isString, reverse } from 'remeda';
-import { setup, stopChild, spawnChild, enqueueActions, fromCallback, assertEvent } from 'xstate';
+import { setup, 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';
+import { x as xstateGuards_cjsExports } from '../_virtual/xstate-guards.cjs.js';
 
 const hotkeyLogic = fromCallback(({ sendBack }) => {
   const handler = getHotkeyHandler([
@@ -19,7 +20,7 @@ const hotkeyLogic = fromCallback(({ sendBack }) => {
     document.body.removeEventListener("keydown", handler, { capture: true });
   };
 });
-const _overlaysActorLogic = setup({
+const machine = setup({
   types: {
     context: {},
     events: {},
@@ -32,119 +33,6 @@ const _overlaysActorLogic = setup({
     relationshipsBrowser: relationshipsBrowserLogic,
     hotkey: hotkeyLogic
   },
-  actions: {
-    "closeLastOverlay": enqueueActions(({ context, enqueue }) => {
-      if (context.overlays.length === 0) {
-        return;
-      }
-      const lastOverlay = last(context.overlays)?.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) => {
-      const toClose = context.overlays.find((o) => o.id === params.actorId)?.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?.type === "relationshipDetails") {
-        enqueue.sendTo(currentOverlay.id, {
-          ...event,
-          type: "navigate.to"
-        });
-        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?.type === "relationshipsBrowser") {
-        enqueue.sendTo(currentOverlay.id, {
-          type: "navigate.to",
-          subject: event.subject,
-          viewId: event.viewId
-        });
-        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 }) => {
@@ -160,76 +48,210 @@ const _overlaysActorLogic = setup({
       return lastOverlay?.type === "relationshipsBrowser";
     }
   }
-}).createMachine({
+});
+const closeLastOverlay = () => machine.enqueueActions(({ context, enqueue }) => {
+  if (context.overlays.length === 0) {
+    return;
+  }
+  const lastOverlay = last(context.overlays)?.id;
+  if (!lastOverlay) {
+    return;
+  }
+  enqueue.sendTo(lastOverlay, { type: "close" });
+  enqueue.stopChild(lastOverlay);
+  enqueue.assign({
+    overlays: context.overlays.filter((o) => o.id !== lastOverlay)
+  });
+});
+const closeSpecificOverlay = () => machine.enqueueActions(({ context, enqueue, event }) => {
+  assertEvent(event, "close");
+  const actorId = event.actorId;
+  if (!isString(actorId)) {
+    return;
+  }
+  const toClose = context.overlays.find((o) => o.id === actorId)?.id;
+  if (toClose) {
+    enqueue.sendTo(toClose, { type: "close" });
+    enqueue.stopChild(toClose);
+    enqueue.assign({
+      overlays: context.overlays.filter((o) => o.id !== toClose)
+    });
+  }
+});
+const closeAllOverlays = () => machine.enqueueActions(({ context, enqueue }) => {
+  for (const { id } of reverse(context.overlays)) {
+    enqueue.sendTo(id, { type: "close" });
+    enqueue.stopChild(id);
+  }
+  enqueue.assign({ overlays: [] });
+});
+const openElementDetails = () => machine.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,
+      {
+        id,
+        type: "elementDetails",
+        subject: event.subject
+      }
+    ]
+  });
+});
+const openRelationshipDetails = () => machine.enqueueActions(({ context, enqueue, event }) => {
+  assertEvent(event, "open.relationshipDetails");
+  const currentOverlay = last(context.overlays);
+  if (currentOverlay?.type === "relationshipDetails") {
+    enqueue.sendTo(currentOverlay.id, {
+      ...event,
+      type: "navigate.to"
+    });
+    return;
+  }
+  const id = `relationshipDetails-${context.seq}`;
+  enqueue.spawnChild("relationshipDetails", {
+    id,
+    input: event
+  });
+  enqueue.assign({
+    seq: context.seq + 1,
+    overlays: [
+      ...context.overlays,
+      {
+        id,
+        type: "relationshipDetails"
+      }
+    ]
+  });
+});
+const openRelationshipsBrowser = () => machine.enqueueActions(({ context, enqueue, event }) => {
+  assertEvent(event, "open.relationshipsBrowser");
+  const currentOverlay = last(context.overlays);
+  if (currentOverlay?.type === "relationshipsBrowser") {
+    enqueue.sendTo(currentOverlay.id, {
+      type: "navigate.to",
+      subject: event.subject,
+      viewId: event.viewId
+    });
+    return;
+  }
+  const id = `relationshipsBrowser-${context.seq}`;
+  enqueue.spawnChild("relationshipsBrowser", {
+    id,
+    input: event
+  });
+  enqueue.assign({
+    seq: context.seq + 1,
+    overlays: [
+      ...context.overlays,
+      {
+        id,
+        type: "relationshipsBrowser",
+        subject: event.subject
+      }
+    ]
+  });
+});
+const openOverlay = () => machine.enqueueActions(({ enqueue, event }) => {
+  console.log("openOverlay event", event);
+  assertEvent(event, [
+    "open.elementDetails",
+    "open.relationshipDetails",
+    "open.relationshipsBrowser"
+  ]);
+  switch (event.type) {
+    case "open.elementDetails":
+      enqueue(openElementDetails());
+      break;
+    case "open.relationshipDetails":
+      enqueue(openRelationshipDetails());
+      break;
+    case "open.relationshipsBrowser":
+      enqueue(openRelationshipsBrowser());
+      break;
+  }
+});
+const listenToEsc = () => machine.spawnChild("hotkey", {
+  id: "hotkey"
+});
+const stopListeningToEsc = () => machine.stopChild("hotkey");
+const checkState = () => machine.enqueueActions(({ enqueue, context }) => {
+  if (context.overlays.length === 0) {
+    console.log("No overlays left, raising close event");
+    enqueue.raise({ type: "close" });
+  }
+});
+const _overlaysActorLogic = machine.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: {},
+    idle: {
+      on: {
+        "open.*": {
+          actions: openOverlay(),
+          target: "active"
+        }
+      }
+    },
     active: {
-      entry: "listenToEsc",
-      exit: "stopListeningToEsc",
+      entry: [
+        listenToEsc()
+      ],
+      exit: [
+        stopListeningToEsc()
+      ],
       on: {
+        "open.*": {
+          actions: openOverlay()
+        },
         "close": [
+          {
+            guard: xstateGuards_cjsExports.not("has overlays?"),
+            target: "idle"
+          },
           {
             guard: "close specific overlay?",
-            actions: {
-              type: "closeSpecificOverlay",
-              params: ({ event }) => ({ actorId: event.actorId })
-            },
-            target: "closing"
+            actions: [
+              closeSpecificOverlay(),
+              checkState()
+            ]
           },
           {
-            actions: "closeLastOverlay",
-            target: "closing"
+            actions: [
+              closeLastOverlay(),
+              checkState()
+            ]
           }
         ],
         "close.all": {
           actions: [
-            "closeAllOverlays",
-            "stopListeningToEsc"
+            closeAllOverlays()
           ],
           target: "idle"
         }
       }
     },
-    closing: {
-      always: [
-        {
-          guard: "has overlays?",
-          target: "active"
-        },
-        {
-          actions: "stopListeningToEsc",
-          target: "idle"
-        }
-      ]
+    final: {
+      entry: [
+        closeAllOverlays(),
+        stopListeningToEsc()
+      ],
+      type: "final"
     }
-  },
-  exit: [
-    "stopListeningToEsc",
-    "closeAllOverlays"
-  ]
+  }
 });
 const overlaysActorLogic = _overlaysActorLogic;
 

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

@@ -17,9 +17,9 @@ import { layoutRelationshipDetails } from './layout.js';
 import { SelectEdge } from './SelectEdge.js';
 import { RelationshipEdge } from './custom/edgeTypes.js';
 import { CompoundNode, ElementNode } from './custom/nodeTypes.js';
-import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
-import IconChevronLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronLeft.js';
-import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
+import IconChevronLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronLeft.js';
+import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
 
 const nodeTypes = {
   element: ElementNode,
@@ -148,6 +148,7 @@ const RelationshipDetailsInner = memo(() => {
         browser.send({ type: "xyflow.selectionChange", ...params });
       }),
       nodesDraggable: false,
+      nodesSelectable: true,
       fitView: false,
       pannable: true,
       zoomable: true,

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

@@ -3,8 +3,8 @@ import { Popover, PopoverTarget, Button, Box, Text, ThemeIcon, PopoverDropdown,
 import { useRef } from 'react';
 import { useRelationshipDetails } from './hooks.js';
 import { edgeSource, edgeTarget, scrollArea, edgeGrid, edgeRow, edgeArrow, edgeLabel } from './SelectEdge.css.js';
-import IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js';
-import IconSelector from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
+import IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js';
+import IconSelector from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
 
 const SelectEdge = ({
   edge,

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

@@ -1,4 +1,4 @@
-import { Color, DiagramNode, ExclusiveUnion, Fqn, IconUrl, RelationId, RelationshipArrowType, RelationshipLineType, RichTextOrEmpty, ViewId } from '@likec4/core/types';
+import { Color, DiagramNode, ExclusiveUnion, Fqn, IconUrl, MarkdownOrString, RelationId, RelationshipArrowType, RelationshipLineType, ViewId } from '@likec4/core/types';
 import { FunctionComponent } from 'react';
 import { Simplify } from 'type-fest';
 import { BaseEdge, BaseEdgeData, BaseEdgeProps, BaseNode, BaseNodeData, BaseNodeProps, NonOptional } from '../../base/types';
@@ -11,12 +11,11 @@ export declare namespace RelationshipDetailsTypes {
         in: string[];
         out: string[];
     };
-    type ElementNodeData = Simplify<BaseNodeData & NonOptional<Pick<DiagramNode, 'id' | 'title' | 'technology' | 'color' | 'shape' | 'width' | 'height' | 'navigateTo' | 'style' | 'tags'>> & {
+    type ElementNodeData = Simplify<BaseNodeData & NonOptional<Pick<DiagramNode, 'id' | 'title' | 'technology' | 'description' | 'color' | 'shape' | 'width' | 'height' | 'navigateTo' | 'style' | 'tags'>> & {
         column: Column;
         fqn: Fqn;
         icon: IconUrl;
         ports: Ports;
-        description: RichTextOrEmpty;
     }>;
     type CompoundNodeData = Simplify<BaseNodeData & NonOptional<Pick<DiagramNode, 'id' | 'title' | 'color' | 'style'>> & {
         column: Column;
@@ -51,7 +50,7 @@ export declare namespace RelationshipDetailsTypes {
         line: RelationshipLineType;
         head?: RelationshipArrowType;
         tail?: RelationshipArrowType;
-        description: RichTextOrEmpty;
+        description: MarkdownOrString | null;
     }>;
     type Edge = BaseEdge<EdgeData, 'relationship'>;
     type EdgeProps = BaseEdgeProps<Edge>;