@likec4/diagram 1.18.0 → 1.19.0

package/dist/overlays/relationships-of/RelationshipsXYFlow.js

@@ -0,0 +1,290 @@
+import { jsx } from "react/jsx-runtime";
+import { isAncestor, delay } from "@likec4/core";
+import { useId } from "@mantine/hooks";
+import { useSyncedRef, useDebouncedCallback, useDeepCompareEffect } from "@react-hookz/web";
+import { ReactFlowProvider, useReactFlow, useStoreApi, useStore, useOnViewportChange, getViewportForBounds, ReactFlow } from "@xyflow/react";
+import { getNodeDimensions } from "@xyflow/system";
+import { useRef, useState } from "react";
+import { map, setPath, omit, isNullish } from "remeda";
+import { centerXYInternalNode } from "../../xyflow/utils.js";
+import { cssReactflowMarker } from "../Overlays.css.js";
+import { ZIndexes } from "./use-layouted-relationships.js";
+import { CompoundNode } from "./xyflow/CompoundNode.js";
+import { ElementNode } from "./xyflow/ElementNode.js";
+import { EmptyNode } from "./xyflow/EmptyNode.js";
+import { RelationshipEdge } from "./xyflow/RelationshipEdge.js";
+import { useUpdateEffect } from "../../hooks/useUpdateEffect.js";
+const nodeTypes = {
+  element: ElementNode,
+  compound: CompoundNode,
+  empty: EmptyNode
+};
+const edgeTypes = {
+  relation: RelationshipEdge
+};
+const findRootSubject = (nodes) => nodes.find((n) => n.data.column === "subjects" && isNullish(n.parentId));
+const resetDimmedAndHovered = (xyflow) => {
+  xyflow.setEdges(
+    (edges) => edges.map((edge) => ({
+      ...edge,
+      data: {
+        ...edge.data,
+        dimmed: false,
+        hovered: false
+      },
+      animated: false
+    }))
+  );
+  xyflow.setNodes(
+    (nodes) => nodes.map(
+      (n) => ({
+        ...n,
+        data: {
+          ...n.data,
+          dimmed: false,
+          hovered: false
+        }
+      })
+    )
+  );
+};
+const animateEdge = (node, animated = true) => (edges) => {
+  return edges.map((edge) => {
+    const isConnected = edge.source === node.id || edge.target === node.id || isAncestor(node.id, edge.source) || isAncestor(node.id, edge.target);
+    return {
+      ...edge,
+      animated: animated && isConnected
+    };
+  });
+};
+const selectContainerViewport = (s) => `${s.width}x${s.height}`;
+function RelationshipsXYFlowWrapped({
+  subjectId,
+  view,
+  nodes,
+  edges,
+  bounds,
+  children,
+  maxZoom = 2,
+  minZoom = 0.05,
+  viewportPadding = 0.1,
+  ...rest
+}) {
+  const id = useId();
+  const lastClickedNodeRef = useRef(null);
+  const xyflow = useReactFlow();
+  const xystore = useStoreApi();
+  const [zoomOnDoubleClick, setZoomOnDoubleClick] = useState(true);
+  const containerviewport = useStore(selectContainerViewport);
+  useOnViewportChange({
+    onEnd: ({ x, y, zoom }) => {
+      const roundedX = Math.round(x), roundedY = Math.round(y);
+      if (x !== roundedX || y !== roundedY) {
+        xystore.setState({ transform: [roundedX, roundedY, zoom] });
+      }
+      setZoomOnDoubleClick(zoom < 0.7);
+    }
+  });
+  const initialFitviewFlagRef = useRef(false);
+  const viewBoundsRef = useSyncedRef(bounds);
+  const fitview = useDebouncedCallback(
+    () => {
+      const { width, height } = xystore.getState();
+      xyflow.setViewport(
+        getViewportForBounds(viewBoundsRef.current, width, height, minZoom, maxZoom, viewportPadding),
+        initialFitviewFlagRef.current ? { duration: 500 } : void 0
+      );
+      initialFitviewFlagRef.current = true;
+    },
+    [xyflow, minZoom, maxZoom, viewportPadding],
+    100
+  );
+  useUpdateEffect(() => {
+    fitview();
+  }, [containerviewport]);
+  useDeepCompareEffect(() => {
+    const {
+      nodes: _nodes,
+      edges: _edges,
+      setNodes,
+      setEdges,
+      width,
+      height
+    } = xystore.getState();
+    const nextSubjectNode = findRootSubject(nodes);
+    const currentSubjectNode = findRootSubject(_nodes);
+    if (currentSubjectNode && (nextSubjectNode == null ? void 0 : nextSubjectNode.data.fqn) === currentSubjectNode.data.fqn) {
+      setNodes(map(nodes, setPath(["data", "entering"], false)));
+      setEdges(edges);
+      fitview();
+      return;
+    }
+    if (!nextSubjectNode) {
+      console.error("Subject node not found");
+    } else if (nextSubjectNode.data.fqn !== subjectId) {
+      console.error(`Subject node mismatch, expected: ${subjectId} got: ${nextSubjectNode.data.fqn}`);
+    }
+    const nextzoom = getViewportForBounds(bounds, width, height, minZoom, maxZoom, viewportPadding).zoom;
+    const nextSubjectCenter = nextSubjectNode && {
+      x: nextSubjectNode.position.x + (nextSubjectNode.width ?? 0) / 2,
+      y: nextSubjectNode.position.y + (nextSubjectNode.height ?? 0) / 2
+    };
+    const existingNode = lastClickedNodeRef.current ?? xyflow.getNodes().find((n) => n.type !== "empty" && n.data.column !== "subjects" && n.data.fqn === subjectId);
+    lastClickedNodeRef.current = null;
+    if (nextSubjectCenter && existingNode && currentSubjectNode) {
+      const currentSubjectInternalNode = xyflow.getInternalNode(currentSubjectNode.id);
+      const currentSubjectCenter = centerXYInternalNode(currentSubjectInternalNode);
+      const existingInternalNode = xyflow.getInternalNode(existingNode.id);
+      const existingDimensions = getNodeDimensions(existingInternalNode);
+      nextSubjectNode.data.layoutId = existingNode.id;
+      setNodes(_nodes.map((n) => {
+        if (n.id !== existingNode.id) {
+          return {
+            ...n,
+            data: {
+              ...n.data,
+              leaving: n.data.column === "subjects",
+              dimmed: n.data.column === "subjects" ? "immediate" : false
+            }
+            // hidden: n.data.column === 'subjects'
+          };
+        }
+        return {
+          ...omit(n, ["parentId"]),
+          position: {
+            x: currentSubjectCenter.x - existingDimensions.width / 2,
+            y: currentSubjectCenter.y - existingDimensions.height / 2
+          },
+          zIndex: ZIndexes.max,
+          data: {
+            ...n.data,
+            leaving: false,
+            dimmed: false
+          }
+        };
+      }));
+      setEdges(_edges.map((e) => ({
+        ...e,
+        data: {
+          ...e.data,
+          dimmed: "immediate"
+        },
+        hidden: e.source === existingNode.id || e.target === existingNode.id || isAncestor(existingNode.id, e.source) || isAncestor(existingNode.id, e.target)
+      })));
+      const zoom = Math.min(
+        xyflow.getViewport().zoom,
+        nextzoom
+      );
+      let isCancelled = false;
+      const layout = async () => {
+        await delay(150);
+        if (isCancelled) return;
+        await xyflow.setCenter(currentSubjectCenter.x, currentSubjectCenter.y, { zoom, duration: 250 });
+        requestAnimationFrame(() => {
+          if (isCancelled) return;
+          xyflow.setCenter(nextSubjectCenter.x, nextSubjectCenter.y, { zoom });
+          setNodes(nodes);
+          setEdges(edges);
+          fitview();
+        });
+      };
+      requestAnimationFrame(layout);
+      return () => {
+        isCancelled = true;
+      };
+    }
+    setNodes(map(nodes, setPath(["data", "entering"], false)));
+    setEdges(edges);
+    fitview();
+    return void 0;
+  }, [nodes, edges, subjectId]);
+  return /* @__PURE__ */ jsx(
+    ReactFlow,
+    {
+      id,
+      defaultEdges: [],
+      defaultNodes: [],
+      nodeTypes,
+      edgeTypes,
+      defaultMarkerColor: "var(--likec4-relation-lineColor)",
+      className: cssReactflowMarker,
+      zoomOnPinch: true,
+      zoomOnScroll: false,
+      zoomOnDoubleClick,
+      maxZoom,
+      minZoom,
+      fitView: true,
+      fitViewOptions: {
+        padding: viewportPadding,
+        maxZoom,
+        minZoom,
+        includeHiddenNodes: true
+      },
+      preventScrolling: true,
+      noDragClassName: "nodrag",
+      noPanClassName: "nopan",
+      panOnScroll: true,
+      panOnDrag: true,
+      nodesFocusable: false,
+      edgesFocusable: false,
+      nodesDraggable: false,
+      onNodeMouseEnter: (_, node) => {
+        if (node.type === "empty") return;
+        xyflow.setEdges(animateEdge(node, true));
+      },
+      onNodeMouseLeave: () => {
+        resetDimmedAndHovered(xyflow);
+      },
+      onEdgeMouseEnter: (_, edge) => {
+        xyflow.setEdges(
+          (edges2) => edges2.map((e) => ({
+            ...e,
+            data: {
+              ...e.data,
+              dimmed: e.id !== edge.id,
+              hovered: e.id === edge.id
+            },
+            zIndex: e.id === edge.id ? ZIndexes.max : ZIndexes.edge,
+            animated: e.id === edge.id
+          }))
+        );
+        xyflow.setNodes(
+          (nodes2) => nodes2.map((n) => ({
+            ...n,
+            data: {
+              ...n.data,
+              dimmed: n.id !== edge.source && n.id !== edge.target
+            }
+          }))
+        );
+      },
+      onEdgeMouseLeave: () => {
+        resetDimmedAndHovered(xyflow);
+      },
+      onNodeDoubleClick: (e) => {
+        e.stopPropagation();
+      },
+      ...!zoomOnDoubleClick && {
+        onDoubleClick: (e) => {
+          e.stopPropagation();
+          fitview();
+        }
+      },
+      ...rest,
+      children
+    }
+  );
+}
+function RelationshipsXYFlow(props) {
+  return /* @__PURE__ */ jsx(
+    ReactFlowProvider,
+    {
+      defaultNodes: [],
+      defaultEdges: [],
+      children: /* @__PURE__ */ jsx(RelationshipsXYFlowWrapped, { ...props })
+    }
+  );
+}
+export {
+  RelationshipsXYFlow
+};

package/dist/overlays/relationships-of/SelectElement.css.d.ts

@@ -0,0 +1,2 @@
+export declare const node: string;
+export declare const label: string;

package/dist/overlays/relationships-of/SelectElement.css.js

@@ -0,0 +1,7 @@
+/* empty css                                 */
+var node = "z1mia80";
+var label = "z1mia81";
+export {
+  label,
+  node
+};

package/dist/overlays/relationships-of/SelectElement.d.ts

@@ -0,0 +1,7 @@
+import { Element, Fqn, ViewId } from '@likec4/core';
+export declare const SelectElement: ({ subject, viewId, scope, onSelect }: {
+    subject: Element;
+    viewId: ViewId;
+    scope: "global" | "view";
+    onSelect: (id: Fqn) => void;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/overlays/relationships-of/SelectElement.js

@@ -0,0 +1,126 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { ancestorsFqn } from "@likec4/core";
+import { useTree, useComputedColorScheme, Popover, PopoverTarget, Button, PopoverDropdown, ScrollAreaAutosize, Tree, Group, ActionIcon, Box, Text } from "@mantine/core";
+import { IconSelector, IconChevronRight } from "@tabler/icons-react";
+import { useRef, useEffect } from "react";
+import * as SelectElement_css from "./SelectElement.css.js";
+import { useLikeC4ElementsTree } from "../../likec4model/useLikeC4ElementsTree.js";
+const SelectElement = ({
+  subject,
+  viewId,
+  scope,
+  onSelect
+}) => {
+  const viewport = useRef(null);
+  const data = useLikeC4ElementsTree(scope === "view" ? viewId : void 0);
+  const tree = useTree({
+    multiple: false
+  });
+  useEffect(() => {
+    ancestorsFqn(subject.id).reverse().forEach((id) => {
+      tree.expand(id);
+    });
+    tree.select(subject.id);
+  }, [subject.id]);
+  const theme = useComputedColorScheme();
+  return /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      position: "bottom",
+      shadow: "md",
+      keepMounted: true,
+      withinPortal: false,
+      closeOnClickOutside: true,
+      clickOutsideEvents: ["pointerdown", "mousedown", "click"],
+      onOpen: () => {
+        setTimeout(() => {
+          var _a;
+          const item = (_a = viewport.current) == null ? void 0 : _a.querySelector(`[data-value="${subject.id}"]`);
+          console.log("item", item);
+          item == null ? void 0 : item.scrollIntoView({ behavior: "instant", block: "nearest" });
+        }, 100);
+      },
+      children: [
+        /* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "xs",
+            variant: "light",
+            color: theme === "light" ? "dark" : "gray",
+            fw: "500",
+            maw: 250,
+            style: { padding: "0.25rem 0.75rem" },
+            rightSection: /* @__PURE__ */ jsx(IconSelector, { size: 16 }),
+            children: subject.title
+          }
+        ) }),
+        /* @__PURE__ */ jsx(PopoverDropdown, { p: 0, miw: 250, maw: 400, children: /* @__PURE__ */ jsx(ScrollAreaAutosize, { mah: "70vh", scrollbars: "y", type: "never", viewportRef: viewport, children: /* @__PURE__ */ jsx(
+          Tree,
+          {
+            allowRangeSelection: false,
+            selectOnClick: false,
+            tree,
+            data,
+            classNames: SelectElement_css,
+            levelOffset: 8,
+            styles: {
+              label: {
+                paddingTop: 5,
+                paddingBottom: 6
+              }
+            },
+            renderNode: ({ node, selected, expanded, elementProps, hasChildren }) => /* @__PURE__ */ jsxs(Group, { gap: 2, wrap: "nowrap", ...elementProps, py: "3", children: [
+              /* @__PURE__ */ jsx(
+                ActionIcon,
+                {
+                  variant: "subtle",
+                  size: 18,
+                  c: "dimmed",
+                  style: {
+                    visibility: hasChildren ? "visible" : "hidden"
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    IconChevronRight,
+                    {
+                      stroke: 3.5,
+                      style: {
+                        transition: "transform 150ms ease",
+                        transform: `rotate(${expanded ? "90deg" : "0"})`,
+                        width: "80%"
+                      }
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Box,
+                {
+                  flex: "1 1 100%",
+                  w: "100%",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onSelect(node.value);
+                    tree.select(node.value);
+                    tree.expand(node.value);
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      fz: "sm",
+                      fw: selected ? "600" : "400",
+                      truncate: "end",
+                      children: node.label
+                    }
+                  )
+                }
+              )
+            ] })
+          }
+        ) }) })
+      ]
+    }
+  );
+};
+export {
+  SelectElement
+};

package/dist/overlays/relationships-of/_types.d.ts

@@ -0,0 +1,28 @@
+import { AddEdgeData, AddNodeData } from '../../utils/types';
+import { SharedFlowTypes } from '../shared/xyflow/_types';
+export declare namespace RelationshipsOfFlowTypes {
+    /**
+     * Data that is exclusive to the relationships-of overlay. It will be merged into the node types
+     * provided by SharedFlowTypes.
+     */
+    type RelationshipsOfNodeData = {
+        depth?: number;
+        column: 'incomers' | 'subjects' | 'outgoers';
+        existsInCurrentView: boolean;
+        layoutId?: string;
+    };
+    export type ElementNode = AddNodeData<SharedFlowTypes.ElementNode, RelationshipsOfNodeData>;
+    export type CompoundNode = AddNodeData<SharedFlowTypes.CompoundNode, RelationshipsOfNodeData>;
+    export type NonEmptyNode = ElementNode | CompoundNode;
+    export type EmptyNode = AddNodeData<SharedFlowTypes.EmptyNode, RelationshipsOfNodeData>;
+    export type Node = NonEmptyNode | EmptyNode;
+    /**
+     * Data that is exclusive to the relationships-of overlay. It will be merged into the edge types
+     * provided by SharedFlowTypes.
+     */
+    type RelationshipsOfEdgeData = {
+        existsInCurrentView: boolean;
+    };
+    export type Edge = AddEdgeData<SharedFlowTypes.Edge, RelationshipsOfEdgeData>;
+    export {};
+}

package/dist/overlays/relationships-of/use-layouted-relationships.d.ts

@@ -0,0 +1,22 @@
+import { DiagramView, Fqn, LikeC4Model } from '@likec4/core';
+import { RelationshipsOfFlowTypes } from './_types';
+export declare const ZIndexes: {
+    empty: number;
+    compound: number;
+    edge: number;
+    element: number;
+    max: number;
+};
+export declare function useLayoutedRelationships(subjectId: Fqn, view: DiagramView, scope: 'global' | 'view'): {
+    viewIncludesSubject: boolean;
+    notIncludedRelations: number;
+    subject: LikeC4Model.Element;
+    nodes: RelationshipsOfFlowTypes.Node[];
+    edges: RelationshipsOfFlowTypes.Edge[];
+    bounds: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+};