@likec4/diagram 1.19.1 → 1.20.0

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

@@ -1,290 +0,0 @@
-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.js

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

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

@@ -1,7 +0,0 @@
-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/_types.d.ts

@@ -1,28 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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;
-    };
-};