@likec4/diagram 1.19.1 → 1.20.0

package/dist/likec4diagram/useViewToNodesEdges.d.ts

@@ -0,0 +1,11 @@
+import { DiagramView, WhereOperator } from '@likec4/core';
+import { Types } from './types';
+export declare function useViewToNodesEdges({ view: { id, nodes, edges, __, }, ...opts }: {
+    view: DiagramView;
+    where: WhereOperator<string, string> | undefined;
+    nodesDraggable: boolean;
+    nodesSelectable: boolean;
+}): {
+    xynodes: Types.Node[];
+    xyedges: Types.Edge[];
+};

package/dist/likec4diagram/useViewToNodesEdges.js

@@ -0,0 +1,245 @@
+import { Queue, whereOperatorAsPredicate, nonNullable, ElementKind, DiagramNode, invariant } from "@likec4/core";
+import { useDeepCompareMemo } from "@react-hookz/web";
+import { pick, hasAtLeast } from "remeda";
+import { ZIndexes } from "../base/const.js";
+function viewToNodesEdge(opts) {
+  const {
+    view,
+    nodesDraggable: draggable,
+    nodesSelectable: selectable
+  } = opts;
+  view.__ === "dynamic";
+  const xynodes = [], xyedges = [], nodeLookup = /* @__PURE__ */ new Map();
+  const queue = Queue.from(view.nodes.reduce(
+    (acc, node) => {
+      nodeLookup.set(node.id, node);
+      if (!node.parent) {
+        acc.push({ node, parent: null });
+      }
+      return acc;
+    },
+    []
+  ));
+  let visiblePredicate = (_nodeOrEdge) => true;
+  if (opts.where) {
+    try {
+      const filterablePredicate = whereOperatorAsPredicate(opts.where);
+      visiblePredicate = (i) => filterablePredicate({
+        ...pick(i, ["tags", "kind"]),
+        ..."source" in i ? { source: nodeById(i.source) } : i,
+        ..."target" in i ? { target: nodeById(i.target) } : i
+      });
+    } catch (e) {
+      console.error("Error in where filter:", e);
+    }
+  }
+  const ns = "";
+  const nodeById = (id) => nonNullable(nodeLookup.get(id), `Node not found: ${id}`);
+  let next;
+  while (next = queue.dequeue()) {
+    const { node, parent } = next;
+    const isCompound = hasAtLeast(node.children, 1) || node.kind == ElementKind.Group;
+    if (isCompound) {
+      for (const child of node.children) {
+        queue.enqueue({ node: nodeById(child), parent: node });
+      }
+    }
+    const position = {
+      x: node.position[0],
+      y: node.position[1]
+    };
+    if (parent) {
+      position.x -= parent.position[0];
+      position.y -= parent.position[1];
+    }
+    const id = ns + node.id;
+    const base = {
+      id,
+      draggable,
+      selectable: selectable && node.kind !== ElementKind.Group,
+      focusable: selectable && !isCompound,
+      deletable: false,
+      position,
+      zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
+      style: {
+        width: node.width,
+        height: node.height
+      },
+      initialWidth: node.width,
+      initialHeight: node.height,
+      hidden: node.kind !== ElementKind.Group && !visiblePredicate(node),
+      ...parent && {
+        parentId: ns + parent.id
+      }
+    };
+    const compoundData = {
+      id: node.id,
+      title: node.title,
+      color: node.color,
+      shape: node.shape,
+      style: node.style,
+      depth: node.depth ?? 0,
+      icon: node.icon ?? null,
+      position: node.position
+    };
+    const leafNodeData = {
+      id: node.id,
+      title: node.title,
+      technology: node.technology,
+      description: node.description,
+      height: node.height,
+      width: node.width,
+      level: node.level,
+      color: node.color,
+      shape: node.shape,
+      style: node.style,
+      icon: node.icon ?? null,
+      position: node.position
+    };
+    if (node.kind === ElementKind.Group) {
+      xynodes.push({
+        ...base,
+        type: "view-group",
+        data: {
+          isViewGroup: true,
+          ...compoundData
+        },
+        dragHandle: ".likec4-compound-title"
+      });
+      continue;
+    }
+    const modelFqn = DiagramNode.modelRef(node);
+    const deploymentFqn = DiagramNode.deploymentRef(node);
+    if (!modelFqn && !deploymentFqn) {
+      console.error("Invalid node", node);
+      throw new Error("Element should have either modelRef or deploymentRef");
+    }
+    const navigateTo = { navigateTo: node.navigateTo ?? null };
+    switch (true) {
+      case (isCompound && !!deploymentFqn): {
+        xynodes.push(
+          {
+            ...base,
+            type: "compound-deployment",
+            data: {
+              ...compoundData,
+              ...navigateTo,
+              deploymentFqn,
+              modelFqn
+            }
+          }
+        );
+        break;
+      }
+      case isCompound: {
+        invariant(!!modelFqn, "ModelRef expected");
+        xynodes.push(
+          {
+            ...base,
+            type: "compound-element",
+            data: {
+              ...compoundData,
+              ...navigateTo,
+              modelFqn
+            },
+            dragHandle: ".likec4-compound-title"
+          }
+        );
+        break;
+      }
+      case !!deploymentFqn: {
+        xynodes.push(
+          {
+            ...base,
+            type: "deployment",
+            data: {
+              ...leafNodeData,
+              ...navigateTo,
+              deploymentFqn,
+              modelFqn
+            }
+          }
+        );
+        break;
+      }
+      default: {
+        invariant(!!modelFqn, "ModelRef expected");
+        xynodes.push(
+          {
+            ...base,
+            type: "element",
+            data: {
+              ...leafNodeData,
+              ...navigateTo,
+              modelFqn
+            }
+          }
+        );
+      }
+    }
+  }
+  for (const edge of view.edges) {
+    const source = edge.source;
+    const target = edge.target;
+    const id = ns + edge.id;
+    if (!hasAtLeast(edge.points, 2)) {
+      console.error("edge should have at least 2 points", edge);
+      continue;
+    }
+    xyedges.push({
+      id,
+      type: "relationship",
+      source: ns + source,
+      target: ns + target,
+      zIndex: ZIndexes.Edge,
+      selectable,
+      hidden: !visiblePredicate(edge),
+      deletable: false,
+      data: {
+        id: edge.id,
+        label: edge.label,
+        technology: edge.technology,
+        notes: edge.notes,
+        navigateTo: edge.navigateTo,
+        controlPoints: edge.controlPoints ?? null,
+        labelBBox: edge.labelBBox ?? null,
+        labelXY: edge.labelBBox ? { x: edge.labelBBox.x, y: edge.labelBBox.y } : null,
+        points: edge.points,
+        color: edge.color ?? "gray",
+        line: edge.line ?? "dashed",
+        dir: edge.dir ?? "forward",
+        head: edge.head ?? "normal",
+        tail: edge.tail ?? "none"
+      },
+      interactionWidth: 20
+    });
+  }
+  return {
+    xynodes,
+    xyedges
+  };
+}
+function useViewToNodesEdges({
+  view: {
+    id,
+    nodes,
+    edges,
+    __ = "element"
+  },
+  ...opts
+}) {
+  return useDeepCompareMemo(() => {
+    return viewToNodesEdge({
+      view: {
+        id,
+        nodes,
+        edges,
+        __
+      },
+      ...opts
+    });
+  }, [id, __, nodes, edges, opts]);
+}
+export {
+  useViewToNodesEdges
+};

package/dist/likec4model/index.d.ts

@@ -1,2 +1,2 @@
 export { useLikeC4ElementsTree, } from './useLikeC4ElementsTree';
-export { useLikeC4CurrentViewModel, useLikeC4DiagramView, useLikeC4ElementModel, useLikeC4Model, useLikeC4View, useLikeC4ViewModel, useLikeC4Views, } from './useLikeC4Model';
+export { useLikeC4Model, } from './useLikeC4Model';

package/dist/likec4model/useLikeC4Model.d.ts

@@ -1,5 +1,4 @@
-import { ComputedView, DiagramView, Fqn, LikeC4Model, ViewId } from '@likec4/core';
-import { LiteralUnion } from 'type-fest';
+import { LikeC4Model } from '@likec4/core';
 export declare function useLikeC4Model(): LikeC4Model | null;
 export declare function useLikeC4Model(strict: true): LikeC4Model;
 export declare function useLikeC4Model(strict: boolean): LikeC4Model | null;
@@ -9,12 +8,3 @@ export declare function useLikeC4Model(strict: true, type: 'layouted' | 'compute
 export declare function useLikeC4Model(strict: boolean, type: 'layouted'): LikeC4Model.Layouted | null;
 export declare function useLikeC4Model(strict: boolean, type: 'computed'): LikeC4Model.Computed | null;
 export declare function useLikeC4Model(strict: boolean, type: 'layouted' | 'computed' | undefined): LikeC4Model | null;
-export declare function useLikeC4Views(): Record<ViewId, ComputedView | DiagramView>;
-export declare function useLikeC4ViewModel(viewId: LiteralUnion<ViewId, string>): LikeC4Model.View;
-export declare function useLikeC4CurrentViewModel(): LikeC4Model.View;
-/**
- * Parsed view, computed or layouted
- */
-export declare function useLikeC4View(viewId: LiteralUnion<ViewId, string>): ComputedView | DiagramView | null;
-export declare function useLikeC4DiagramView(viewId: LiteralUnion<ViewId, string>): DiagramView | null;
-export declare function useLikeC4ElementModel(fqn: LiteralUnion<Fqn, string>): LikeC4Model.Element;

package/dist/likec4model/useLikeC4Model.js

@@ -2,7 +2,6 @@ import "@likec4/core";
 import { useContext } from "react";
 import { isString, isNonNullish, isDefined } from "remeda";
 import { LikeC4ModelContext } from "./LikeC4ModelContext.js";
-import { useCurrentViewId } from "../hooks/useDiagramState.js";
 function useLikeC4Model(strict, type) {
   const model = useContext(LikeC4ModelContext);
   if (isString(type) && isNonNullish(model) && model.type !== type) {
@@ -13,43 +12,6 @@ function useLikeC4Model(strict, type) {
   }
   return model;
 }
-function useLikeC4Views() {
-  return useLikeC4Model(true).$model.views;
-}
-function useLikeC4ViewModel(viewId) {
-  return useLikeC4Model(true).view(viewId);
-}
-function useLikeC4CurrentViewModel() {
-  const viewId = useCurrentViewId();
-  return useLikeC4Model(true).view(viewId);
-}
-function useLikeC4View(viewId) {
-  const model = useLikeC4Model(true);
-  try {
-    return model.view(viewId).$view;
-  } catch (error) {
-    console.warn(error);
-    return null;
-  }
-}
-function useLikeC4DiagramView(viewId) {
-  const model = useLikeC4Model(true, "layouted");
-  try {
-    return model.view(viewId).$view;
-  } catch (error) {
-    console.warn(error);
-    return null;
-  }
-}
-function useLikeC4ElementModel(fqn) {
-  return useLikeC4Model(true).element(fqn);
-}
 export {
-  useLikeC4CurrentViewModel,
-  useLikeC4DiagramView,
-  useLikeC4ElementModel,
-  useLikeC4Model,
-  useLikeC4View,
-  useLikeC4ViewModel,
-  useLikeC4Views
+  useLikeC4Model
 };

package/dist/overlays/Overlays.js

@@ -1,21 +1,20 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { RemoveScroll, Box, FocusTrap, ActionIcon, Notification, Text, Group, Button } from "@mantine/core";
-import { useHotkeys } from "@mantine/hooks";
+import { Box, Notification, Code, Group, Button } from "@mantine/core";
 import { IconX } from "@tabler/icons-react";
-import { ReactFlowProvider } from "@xyflow/react";
-import { AnimatePresence, m } from "framer-motion";
-import { memo, useRef, useMemo } from "react";
+import { useReducedMotion, AnimatePresence } from "framer-motion";
+import { animate } from "framer-motion/dom";
+import { memo, useMemo, useEffect } from "react";
 import { ErrorBoundary } from "react-error-boundary";
-import { isNullish } from "remeda";
-import { useDiagramStoreApi, useDiagramState } from "../hooks/useDiagramState.js";
-import { EdgeDetailsXYFlow } from "./edge-details/EdgeDetailsXYFlow.js";
+import { useDiagramActor, useDiagramActorState } from "../hooks/useDiagramActor.js";
 import { ElementDetailsCard } from "./element-details/ElementDetailsCard.js";
-import { OverlayContext } from "./OverlayContext.js";
-import { container } from "./Overlays.css.js";
-import { RelationshipsOverlay } from "./relationships-of/RelationshipsOverlay.js";
+import { Overlay } from "./overlay/Overlay.js";
+import { RelationshipDetails } from "./relationship-details/RelationshipDetails.js";
+import { RelationshipsBrowser } from "./relationships-browser/RelationshipsBrowser.js";
+import { useXYStore } from "../hooks/useXYFlow.js";
+import { DiagramFeatures } from "../context/DiagramFeatures.js";
 function Fallback({ error, resetErrorBoundary }) {
   const errorString = error instanceof Error ? error.message : "Unknown error";
-  return /* @__PURE__ */ jsx(Box, { className: container, p: "lg", children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(Box, { pos: "fixed", top: 0, left: 0, w: "100%", p: 0, style: { zIndex: 1e3 }, children: /* @__PURE__ */ jsxs(
     Notification,
     {
       icon: /* @__PURE__ */ jsx(IconX, { style: { width: 16, height: 16 } }),
@@ -26,111 +25,68 @@ function Fallback({ error, resetErrorBoundary }) {
       },
       color: "red",
       title: "Oops, something went wrong",
-      py: "lg",
+      p: "xl",
       withCloseButton: false,
       children: [
-        /* @__PURE__ */ jsx(
-          Text,
-          {
-            style: {
-              whiteSpace: "preserve-breaks"
-            },
-            children: errorString
-          }
-        ),
-        /* @__PURE__ */ jsx(Group, { gap: "xs", mt: "sm", children: /* @__PURE__ */ jsx(Button, { color: "gray", size: "xs", variant: "light", onClick: () => resetErrorBoundary(), children: "Reset" }) })
+        /* @__PURE__ */ jsx(Code, { block: true, children: errorString }),
+        /* @__PURE__ */ jsx(Group, { gap: "xs", mt: "xl", children: /* @__PURE__ */ jsx(Button, { color: "gray", size: "xs", variant: "light", onClick: () => resetErrorBoundary(), children: "Reset" }) })
       ]
     }
   ) });
 }
 const Overlays = memo(() => {
-  const diagramStore = useDiagramStoreApi();
+  const xyflowDomNode = useXYStore((s) => s.domNode);
+  const xyflowRendererDom = useMemo(() => (xyflowDomNode == null ? void 0 : xyflowDomNode.querySelector(".react-flow__renderer")) ?? null, [
+    xyflowDomNode
+  ]);
+  const { send } = useDiagramActor();
   const {
-    activeOverlay,
-    viewId
-  } = useDiagramState((s) => ({
-    activeOverlay: s.activeOverlay,
-    viewId: s.view.id
-  }));
-  const onCloseCbRef = useRef();
-  const ctxValue = useMemo(() => ({
-    openOverlay: (overlay) => {
-      diagramStore.getState().openOverlay(overlay);
-    },
-    close: (cb) => {
-      onCloseCbRef.current = cb;
-      diagramStore.getState().closeOverlay();
-    }
-  }), [diagramStore]);
-  const onExitComplete = () => {
+    relationshipsBrowserActor,
+    relationshipDetailsActor,
+    activeElementDetailsOf
+  } = useDiagramActorState((s) => {
     var _a;
-    (_a = onCloseCbRef.current) == null ? void 0 : _a.call(onCloseCbRef);
-    onCloseCbRef.current = void 0;
-  };
-  const isActive = !!activeOverlay;
-  useHotkeys(
-    isActive ? [
-      ["Escape", (e) => {
-        e.stopPropagation();
-        ctxValue.close();
-      }, { preventDefault: true }]
-    ] : []
-  );
-  return /* @__PURE__ */ jsx(OverlayContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxs(ErrorBoundary, { FallbackComponent: Fallback, onReset: () => ctxValue.close(), children: [
-    /* @__PURE__ */ jsx(AnimatePresence, { initial: false, onExitComplete, children: (activeOverlay == null ? void 0 : activeOverlay.elementDetails) && /* @__PURE__ */ jsx(ElementDetailsCard, { fqn: activeOverlay.elementDetails }, "details card") }, viewId),
-    /* @__PURE__ */ jsx(AnimatePresence, { initial: false, onExitComplete, children: activeOverlay && isNullish(activeOverlay.elementDetails) && /* @__PURE__ */ jsx(RemoveScroll, { forwardProps: true, children: /* @__PURE__ */ jsx(
-      Box,
+    return {
+      relationshipsBrowserActor: s.children.relationshipsBrowser,
+      relationshipDetailsActor: s.children.relationshipDetails,
+      activeElementDetailsOf: ((_a = s.context.activeElementDetails) == null ? void 0 : _a.fqn) ?? null
+    };
+  });
+  const isMotionReduced = useReducedMotion() ?? false;
+  const isActiveOverlay = !!activeElementDetailsOf;
+  useEffect(() => {
+    if (!xyflowRendererDom || isMotionReduced) return;
+    animate(xyflowRendererDom, {
+      opacity: isActiveOverlay ? 0.7 : 1,
+      filter: isActiveOverlay ? "grayscale(1)" : "grayscale(0)",
+      transform: isActiveOverlay ? `perspective(400px) translateZ(-12px) translateY(3px)` : `translateY(0)`
+    }, {
+      duration: isActiveOverlay ? 0.35 : 0.17
+    });
+  }, [isActiveOverlay, xyflowRendererDom]);
+  return /* @__PURE__ */ jsx(DiagramFeatures.Overlays, { children: /* @__PURE__ */ jsx(ErrorBoundary, { FallbackComponent: Fallback, onReset: () => send({ type: "close.overlay" }), children: /* @__PURE__ */ jsxs(AnimatePresence, { children: [
+    relationshipsBrowserActor && /* @__PURE__ */ jsx(
+      Overlay,
       {
-        component: m.div,
-        className: container,
-        "data-likec4-color": "gray",
-        initial: {
-          "--backdrop-blur": "0px",
-          "--backdrop-opacity": "0%",
-          opacity: 0,
-          translateY: -15
-        },
-        animate: {
-          "--backdrop-blur": "10px",
-          "--backdrop-opacity": "70%",
-          opacity: 1,
-          translateY: 0
+        onClose: () => {
+          relationshipsBrowserActor.send({ type: "close" });
         },
-        exit: {
-          "--backdrop-blur": "1px",
-          "--backdrop-opacity": "0%",
-          translateY: -5,
-          opacity: 0,
-          transition: {
-            duration: 0.2
-          }
+        children: /* @__PURE__ */ jsx(RelationshipsBrowser, { actorRef: relationshipsBrowserActor })
+      },
+      "relationships-browser"
+    ),
+    relationshipDetailsActor && /* @__PURE__ */ jsx(
+      Overlay,
+      {
+        onClose: () => {
+          relationshipDetailsActor.send({ type: "close" });
         },
-        children: /* @__PURE__ */ jsxs(FocusTrap, { children: [
-          activeOverlay.relationshipsOf && /* @__PURE__ */ jsx(RelationshipsOverlay, { subjectId: activeOverlay.relationshipsOf }),
-          activeOverlay.edgeDetails && /* @__PURE__ */ jsx(
-            ReactFlowProvider,
-            {
-              defaultNodes: [],
-              defaultEdges: [],
-              children: /* @__PURE__ */ jsx(EdgeDetailsXYFlow, { edgeId: activeOverlay.edgeDetails })
-            }
-          ),
-          /* @__PURE__ */ jsx(Box, { pos: "absolute", top: "1rem", right: "1rem", children: /* @__PURE__ */ jsx(
-            ActionIcon,
-            {
-              variant: "default",
-              size: "lg",
-              onClick: (e) => {
-                e.stopPropagation();
-                ctxValue.close();
-              },
-              children: /* @__PURE__ */ jsx(IconX, {})
-            }
-          ) })
-        ] })
-      }
-    ) }) })
-  ] }) });
+        children: /* @__PURE__ */ jsx(RelationshipDetails, { actorRef: relationshipDetailsActor })
+      },
+      "relationship-details"
+    ),
+    activeElementDetailsOf && /* @__PURE__ */ jsx(ElementDetailsCard, { fqn: activeElementDetailsOf })
+  ] }) }) });
 });
 export {
   Overlays