@likec4/diagram 1.17.1 → 1.19.0

package/dist/xyflow/useLayoutConstraints.js

@@ -0,0 +1,226 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { nonNullable } from "@likec4/core";
+import { getNodeDimensions } from "@xyflow/system";
+import { useRef, useMemo } from "react";
+import { pipe, filter, map, hasAtLeast, isNullish } from "remeda";
+import { useDiagramStoreApi } from "../hooks/useDiagramState.js";
+class Rect {
+  constructor() {
+    __publicField(this, "id");
+    __publicField(this, "minX", Infinity);
+    __publicField(this, "minY", Infinity);
+    __publicField(this, "maxX", -Infinity);
+    __publicField(this, "maxY", -Infinity);
+  }
+  get positionAbsolute() {
+    return {
+      x: this.minX,
+      y: this.minY
+    };
+  }
+  set positionAbsolute(pos) {
+    this.maxX += pos.x - this.minX;
+    this.maxY += pos.y - this.minY;
+    this.minX = pos.x;
+    this.minY = pos.y;
+  }
+  get dimensions() {
+    return {
+      width: this.maxX - this.minX,
+      height: this.maxY - this.minY
+    };
+  }
+  // Position relative to parent
+  get position() {
+    const positionAbsolute = this.positionAbsolute;
+    if (!this.parent) {
+      return positionAbsolute;
+    }
+    const parentPosition = this.parent.positionAbsolute;
+    return {
+      x: positionAbsolute.x - parentPosition.x,
+      y: positionAbsolute.y - parentPosition.y
+    };
+  }
+}
+__publicField(Rect, "LeftPadding", 40);
+__publicField(Rect, "RightPadding", 40);
+__publicField(Rect, "TopPadding", 55);
+__publicField(Rect, "BottomPadding", 40);
+class Compound extends Rect {
+  constructor(xynode, parent = null) {
+    super();
+    __publicField(this, "children", []);
+    this.parent = parent;
+    this.id = xynode.id;
+    if (parent) {
+      parent.children.push(this);
+    }
+  }
+}
+class Leaf extends Rect {
+  constructor(xynode, parent = null) {
+    super();
+    this.parent = parent;
+    this.id = xynode.id;
+    this.positionAbsolute = xynode.internals.positionAbsolute;
+    const { width, height } = getNodeDimensions(xynode);
+    this.maxX = this.minX + Math.ceil(width);
+    this.maxY = this.minY + Math.ceil(height);
+    if (parent) {
+      parent.children.push(this);
+    }
+  }
+}
+function createLayoutConstraints(xyflowApi, editingNodeIds) {
+  var _a;
+  const { parentLookup, nodeLookup } = xyflowApi.getState();
+  const rects = /* @__PURE__ */ new Map();
+  const ancestorsOf = (nodeId) => {
+    const ancestors = [];
+    const xynode = nodeLookup.get(nodeId);
+    let parent = xynode == null ? void 0 : xynode.parentId;
+    let parentNode;
+    while (parent && (parentNode = nodeLookup.get(parent))) {
+      ancestors.push(parentNode.id);
+      parent = parentNode.parentId;
+    }
+    return ancestors;
+  };
+  const ancestorsOfDraggingNodes = new Set(
+    editingNodeIds.flatMap(ancestorsOf)
+  );
+  const traverse = new Array();
+  for (const [, xynode] of nodeLookup) {
+    if (isNullish(xynode.parentId)) {
+      traverse.push({
+        xynode,
+        parent: null
+      });
+    }
+  }
+  while (traverse.length > 0) {
+    const { xynode, parent } = traverse.shift();
+    const isEditing = editingNodeIds.includes(xynode.id);
+    const shouldTraverse = !isEditing && xynode.type === "compound" && ancestorsOfDraggingNodes.has(xynode.id);
+    const rect = shouldTraverse ? new Compound(xynode, parent) : new Leaf(xynode, parent);
+    rects.set(xynode.id, rect);
+    if (shouldTraverse) {
+      (_a = parentLookup.get(xynode.id)) == null ? void 0 : _a.forEach((child) => {
+        traverse.push({
+          xynode: child,
+          parent: rect
+        });
+      });
+    }
+  }
+  const rectsToUpdate = [...rects.values()];
+  applyConstraints(rectsToUpdate);
+  function applyConstraints(targets) {
+    targets.filter((x) => x instanceof Compound).forEach((r) => {
+      applyConstraints(r.children);
+      const childrenBB = r.children.reduce((acc, r2) => ({
+        minX: Math.min(acc.minX, r2.minX),
+        minY: Math.min(acc.minY, r2.minY),
+        maxX: Math.max(acc.maxX, r2.maxX),
+        maxY: Math.max(acc.maxY, r2.maxY)
+      }), {
+        minX: Infinity,
+        minY: Infinity,
+        maxX: -Infinity,
+        maxY: -Infinity
+      });
+      r.minX = childrenBB.minX - Rect.LeftPadding;
+      r.minY = childrenBB.minY - Rect.TopPadding;
+      r.maxX = childrenBB.maxX + Rect.RightPadding;
+      r.maxY = childrenBB.maxY + Rect.BottomPadding;
+    });
+  }
+  function updateXYFlowNodes() {
+    applyConstraints(rectsToUpdate);
+    xyflowApi.getState().triggerNodeChanges(
+      rectsToUpdate.reduce((acc, r) => {
+        acc.push({
+          id: r.id,
+          type: "position",
+          dragging: false,
+          position: r.position,
+          positionAbsolute: r.positionAbsolute
+        });
+        if (r instanceof Compound) {
+          acc.push({
+            id: r.id,
+            type: "dimensions",
+            setAttributes: true,
+            dimensions: r.dimensions
+          });
+        }
+        return acc;
+      }, [])
+    );
+  }
+  let animationFrameId = null;
+  function onMove(updater) {
+    if (rectsToUpdate.length === 0) {
+      return;
+    }
+    animationFrameId ?? (animationFrameId = requestAnimationFrame(() => {
+      animationFrameId = null;
+      updater(
+        pipe(
+          editingNodeIds,
+          filter((id) => rects.has(id) && nodeLookup.has(id)),
+          map((id) => ({
+            rect: nonNullable(rects.get(id)),
+            node: nonNullable(nodeLookup.get(id))
+          }))
+        )
+      );
+      updateXYFlowNodes();
+    }));
+  }
+  return {
+    updateXYFlowNodes,
+    onMove
+  };
+}
+function useLayoutConstraints() {
+  const diagramApi = useDiagramStoreApi();
+  const solverRef = useRef();
+  return useMemo(() => ({
+    onNodeDragStart: (_event, xynode) => {
+      const { cancelSaveManualLayout, xystore } = diagramApi.getState();
+      const { nodeLookup } = xystore.getState();
+      cancelSaveManualLayout();
+      const draggingNodes = pipe(
+        Array.from(nodeLookup.values()),
+        filter((n) => n.dragging === true || n.id === xynode.id || n.selected === true),
+        filter((n) => n.draggable !== false),
+        map((x) => x.id)
+      );
+      if (hasAtLeast(draggingNodes, 1)) {
+        solverRef.current = createLayoutConstraints(xystore, draggingNodes);
+      }
+    },
+    onNodeDrag: () => {
+      var _a;
+      (_a = solverRef.current) == null ? void 0 : _a.onMove((nodes) => {
+        nodes.forEach(({ rect, node }) => {
+          rect.positionAbsolute = node.internals.positionAbsolute;
+        });
+      });
+    },
+    onNodeDragStop: () => {
+      var _a;
+      (_a = solverRef.current) == null ? void 0 : _a.updateXYFlowNodes();
+      diagramApi.getState().scheduleSaveManualLayout();
+      solverRef.current = void 0;
+    }
+  }), [diagramApi]);
+}
+export {
+  createLayoutConstraints,
+  useLayoutConstraints
+};

package/dist/xyflow/useXYFlowEvents.d.ts

@@ -0,0 +1,160 @@
+import { ReactFlowProps } from '@xyflow/react';
+import { Simplify } from 'type-fest';
+import { DiagramFlowTypes } from './types';
+import { MouseEvent, ReactNode, CSSProperties } from 'react';
+import { EdgeMarkerType, HandleType, Viewport } from '@xyflow/system';
+export type XYFlowEventHandlers = Simplify<Required<Pick<ReactFlowProps<DiagramFlowTypes.Node, DiagramFlowTypes.Edge>, 'onDoubleClick' | 'onPaneClick' | 'onNodeClick' | 'onNodeDoubleClick' | 'onEdgeClick' | 'onEdgeDoubleClick' | 'onMoveEnd' | 'onNodeContextMenu' | 'onEdgeContextMenu' | 'onPaneContextMenu' | 'onEdgeMouseEnter' | 'onEdgeMouseLeave'>>>;
+export declare function useXYFlowEvents(): {
+    onDoubleClick: (event: MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onPaneClick: (event: MouseEvent<Element, MouseEvent>) => void;
+    onNodeContextMenu: (event: MouseEvent<Element, MouseEvent>, xynode: DiagramFlowTypes.Node) => void;
+    onPaneContextMenu: (event: MouseEvent | MouseEvent<Element, MouseEvent>) => void;
+    onEdgeContextMenu: (event: MouseEvent<Element, MouseEvent>, xyedge: {
+        id: string;
+        type: "relationship";
+        source: string;
+        target: string;
+        sourceHandle?: string | null;
+        targetHandle?: string | null;
+        animated?: boolean;
+        hidden?: boolean;
+        deletable?: boolean;
+        selectable?: boolean;
+        data: DiagramFlowTypes.DiagramEdgeData;
+        selected?: boolean;
+        markerStart?: EdgeMarkerType;
+        markerEnd?: EdgeMarkerType;
+        zIndex?: number;
+        ariaLabel?: string;
+        interactionWidth?: number;
+        label?: ReactNode;
+        labelStyle?: CSSProperties;
+        labelShowBg?: boolean;
+        labelBgStyle?: CSSProperties;
+        labelBgPadding?: [number, number];
+        labelBgBorderRadius?: number;
+        style?: CSSProperties;
+        className?: string;
+        reconnectable?: boolean | HandleType;
+        focusable?: boolean;
+    }) => void;
+    onNodeClick: (event: MouseEvent<Element, MouseEvent>, xynode: DiagramFlowTypes.Node) => void;
+    onNodeDoubleClick: (event: MouseEvent<Element, MouseEvent>, xynode: DiagramFlowTypes.Node) => void;
+    onEdgeClick: (event: MouseEvent<Element, MouseEvent>, xyedge: {
+        id: string;
+        type: "relationship";
+        source: string;
+        target: string;
+        sourceHandle?: string | null;
+        targetHandle?: string | null;
+        animated?: boolean;
+        hidden?: boolean;
+        deletable?: boolean;
+        selectable?: boolean;
+        data: DiagramFlowTypes.DiagramEdgeData;
+        selected?: boolean;
+        markerStart?: EdgeMarkerType;
+        markerEnd?: EdgeMarkerType;
+        zIndex?: number;
+        ariaLabel?: string;
+        interactionWidth?: number;
+        label?: ReactNode;
+        labelStyle?: CSSProperties;
+        labelShowBg?: boolean;
+        labelBgStyle?: CSSProperties;
+        labelBgPadding?: [number, number];
+        labelBgBorderRadius?: number;
+        style?: CSSProperties;
+        className?: string;
+        reconnectable?: boolean | HandleType;
+        focusable?: boolean;
+    }) => void;
+    onEdgeDoubleClick: (event: MouseEvent<Element, MouseEvent>, xyedge: {
+        id: string;
+        type: "relationship";
+        source: string;
+        target: string;
+        sourceHandle?: string | null;
+        targetHandle?: string | null;
+        animated?: boolean;
+        hidden?: boolean;
+        deletable?: boolean;
+        selectable?: boolean;
+        data: DiagramFlowTypes.DiagramEdgeData;
+        selected?: boolean;
+        markerStart?: EdgeMarkerType;
+        markerEnd?: EdgeMarkerType;
+        zIndex?: number;
+        ariaLabel?: string;
+        interactionWidth?: number;
+        label?: ReactNode;
+        labelStyle?: CSSProperties;
+        labelShowBg?: boolean;
+        labelBgStyle?: CSSProperties;
+        labelBgPadding?: [number, number];
+        labelBgBorderRadius?: number;
+        style?: CSSProperties;
+        className?: string;
+        reconnectable?: boolean | HandleType;
+        focusable?: boolean;
+    }) => void;
+    onMoveEnd: (event: MouseEvent | TouchEvent | null, _viewport: Viewport) => void;
+    onEdgeMouseEnter: (_event: MouseEvent<Element, MouseEvent>, { id }: {
+        id: string;
+        type: "relationship";
+        source: string;
+        target: string;
+        sourceHandle?: string | null;
+        targetHandle?: string | null;
+        animated?: boolean;
+        hidden?: boolean;
+        deletable?: boolean;
+        selectable?: boolean;
+        data: DiagramFlowTypes.DiagramEdgeData;
+        selected?: boolean;
+        markerStart?: EdgeMarkerType;
+        markerEnd?: EdgeMarkerType;
+        zIndex?: number;
+        ariaLabel?: string;
+        interactionWidth?: number;
+        label?: ReactNode;
+        labelStyle?: CSSProperties;
+        labelShowBg?: boolean;
+        labelBgStyle?: CSSProperties;
+        labelBgPadding?: [number, number];
+        labelBgBorderRadius?: number;
+        style?: CSSProperties;
+        className?: string;
+        reconnectable?: boolean | HandleType;
+        focusable?: boolean;
+    }) => void;
+    onEdgeMouseLeave: (_event: MouseEvent<Element, MouseEvent>, xyedge: {
+        id: string;
+        type: "relationship";
+        source: string;
+        target: string;
+        sourceHandle?: string | null;
+        targetHandle?: string | null;
+        animated?: boolean;
+        hidden?: boolean;
+        deletable?: boolean;
+        selectable?: boolean;
+        data: DiagramFlowTypes.DiagramEdgeData;
+        selected?: boolean;
+        markerStart?: EdgeMarkerType;
+        markerEnd?: EdgeMarkerType;
+        zIndex?: number;
+        ariaLabel?: string;
+        interactionWidth?: number;
+        label?: ReactNode;
+        labelStyle?: CSSProperties;
+        labelShowBg?: boolean;
+        labelBgStyle?: CSSProperties;
+        labelBgPadding?: [number, number];
+        labelBgBorderRadius?: number;
+        style?: CSSProperties;
+        className?: string;
+        reconnectable?: boolean | HandleType;
+        focusable?: boolean;
+    }) => void;
+};

package/dist/xyflow/useXYFlowEvents.js

@@ -0,0 +1,275 @@
+import { DiagramNode } from "@likec4/core";
+import { useRef, useMemo } from "react";
+import { isTruthy, isNonNullish, first } from "remeda";
+import { useDiagramStoreApi } from "../hooks/useDiagramState.js";
+function useXYFlowEvents() {
+  const diagramApi = useDiagramStoreApi();
+  const lastClickTimestamp = useRef();
+  const dblclickTimeout = useRef();
+  return useMemo(() => {
+    const dbclickLock = () => {
+      if (dblclickTimeout.current !== void 0) {
+        return true;
+      }
+      dblclickTimeout.current = window.setTimeout(() => {
+        dblclickTimeout.current = void 0;
+      }, 300);
+      return false;
+    };
+    const lastClickWasRecent = (ms = 2e3) => {
+      const prevTimestamp = lastClickTimestamp.current ?? 0;
+      const now = lastClickTimestamp.current = Date.now();
+      return prevTimestamp + ms > now;
+    };
+    return {
+      onDoubleClick: (event) => {
+        const {
+          onCanvasDblClick,
+          zoomable,
+          viewportChanged,
+          fitDiagram,
+          resetFocusAndLastClicked
+        } = diagramApi.getState();
+        resetFocusAndLastClicked();
+        if (zoomable && viewportChanged) {
+          fitDiagram();
+        }
+        if (!onCanvasDblClick) {
+          event.stopPropagation();
+        }
+        onCanvasDblClick == null ? void 0 : onCanvasDblClick(event);
+      },
+      onPaneClick: (event) => {
+        if (dbclickLock()) {
+          return;
+        }
+        const {
+          focusedNodeId,
+          activeWalkthrough,
+          fitDiagram,
+          onCanvasClick,
+          resetFocusAndLastClicked
+        } = diagramApi.getState();
+        if ((focusedNodeId ?? activeWalkthrough) !== null) {
+          fitDiagram();
+          if (!onCanvasClick) {
+            event.stopPropagation();
+          }
+        }
+        resetFocusAndLastClicked();
+        onCanvasClick == null ? void 0 : onCanvasClick(event);
+      },
+      onNodeContextMenu: (event, xynode) => {
+        var _a, _b;
+        diagramApi.getState().setLastClickedNode(xynode.id);
+        (_b = (_a = diagramApi.getState()).onNodeContextMenu) == null ? void 0 : _b.call(
+          _a,
+          xynode.data.element,
+          event
+        );
+      },
+      onPaneContextMenu: (event) => {
+        var _a, _b;
+        diagramApi.getState().resetFocusAndLastClicked();
+        (_b = (_a = diagramApi.getState()).onCanvasContextMenu) == null ? void 0 : _b.call(_a, event);
+      },
+      onEdgeContextMenu: (event, xyedge) => {
+        var _a, _b;
+        diagramApi.getState().setLastClickedEdge(xyedge.id);
+        (_b = (_a = diagramApi.getState()).onEdgeContextMenu) == null ? void 0 : _b.call(
+          _a,
+          xyedge.data.edge,
+          event
+        );
+      },
+      onNodeClick: (event, xynode) => {
+        const {
+          focusedNodeId,
+          fitDiagram,
+          focusOnNode,
+          onNodeClick,
+          xystore,
+          enableFocusMode,
+          lastClickedNodeId,
+          nodesSelectable,
+          enableElementDetails,
+          setLastClickedNode,
+          onOpenSource,
+          openOverlay
+        } = diagramApi.getState();
+        const modelRef = DiagramNode.modelRef(xynode.data.element);
+        const deploymentRef = DiagramNode.deploymentRef(xynode.data.element);
+        setLastClickedNode(xynode.id);
+        const shallChangeFocus = !!focusedNodeId && focusedNodeId !== xynode.id;
+        const clickedRecently = lastClickWasRecent() && lastClickedNodeId === xynode.id;
+        let stopPropagation = false;
+        if (clickedRecently && !!onOpenSource && (modelRef || deploymentRef)) {
+          if (modelRef) {
+            onOpenSource({
+              element: modelRef
+            });
+          } else if (deploymentRef) {
+            onOpenSource({
+              deployment: deploymentRef
+            });
+          }
+          stopPropagation = true;
+        }
+        if (enableFocusMode) {
+          switch (true) {
+            case (shallChangeFocus || clickedRecently && !focusedNodeId): {
+              focusOnNode(xynode.id);
+              stopPropagation = true;
+              break;
+            }
+            case (clickedRecently && focusedNodeId === xynode.id): {
+              focusOnNode(false);
+              fitDiagram();
+              stopPropagation = true;
+              break;
+            }
+            case (!clickedRecently && modelRef && focusedNodeId === xynode.id && enableElementDetails): {
+              openOverlay({
+                elementDetails: xynode.data.element.id
+              });
+              stopPropagation = true;
+              break;
+            }
+          }
+        } else if (enableElementDetails && modelRef && (clickedRecently || focusedNodeId === xynode.id) && !onNodeClick) {
+          openOverlay({
+            elementDetails: xynode.data.element.id
+          });
+          stopPropagation = true;
+        } else if (nodesSelectable) {
+          xystore.getState().addSelectedNodes([xynode.id]);
+          stopPropagation = true;
+        }
+        if (!onNodeClick && stopPropagation) {
+          event.stopPropagation();
+          return;
+        }
+        onNodeClick == null ? void 0 : onNodeClick(
+          xynode.data.element,
+          event
+        );
+      },
+      onNodeDoubleClick: (event, xynode) => {
+        const {
+          setLastClickedNode
+        } = diagramApi.getState();
+        setLastClickedNode(xynode.id);
+        lastClickWasRecent();
+        event.stopPropagation();
+      },
+      onEdgeClick: (event, xyedge) => {
+        const {
+          lastClickedEdgeId,
+          isDynamicView,
+          enableDynamicViewWalkthrough,
+          activateWalkthrough,
+          activeWalkthrough,
+          focusedNodeId,
+          xystore,
+          nodesSelectable,
+          onOpenSource,
+          focusOnNode,
+          onEdgeClick,
+          setLastClickedEdge
+        } = diagramApi.getState();
+        if (lastClickedEdgeId !== xyedge.id) {
+          setLastClickedEdge(xyedge.id);
+        }
+        const isNotAFirstClick = lastClickedEdgeId === xyedge.id;
+        const connectedToFocusedNode = isTruthy(focusedNodeId) && (focusedNodeId === xyedge.source || focusedNodeId === xyedge.target);
+        if (isDynamicView && enableDynamicViewWalkthrough && (connectedToFocusedNode || isNotAFirstClick || isNonNullish(activeWalkthrough))) {
+          const nextStep = xyedge.data.edge.id;
+          if ((activeWalkthrough == null ? void 0 : activeWalkthrough.stepId) !== nextStep) {
+            activateWalkthrough(nextStep);
+            event.stopPropagation();
+            return;
+          }
+        }
+        if (isTruthy(focusedNodeId)) {
+          if (connectedToFocusedNode) {
+            focusOnNode(focusedNodeId === xyedge.source ? xyedge.target : xyedge.source);
+          } else {
+            focusOnNode(xyedge.source);
+          }
+          if (!onEdgeClick) {
+            event.stopPropagation();
+            return;
+          }
+        } else if (onOpenSource && !onEdgeClick) {
+          onOpenSource({
+            relation: first(xyedge.data.edge.relations)
+          });
+          event.stopPropagation();
+          return;
+        } else if (nodesSelectable) {
+          xystore.getState().addSelectedEdges([xyedge.id]);
+          if (!onEdgeClick) {
+            event.stopPropagation();
+            return;
+          }
+        }
+        onEdgeClick == null ? void 0 : onEdgeClick(
+          xyedge.data.edge,
+          event
+        );
+      },
+      onEdgeDoubleClick: (event, xyedge) => {
+        diagramApi.getState().setLastClickedEdge(xyedge.id);
+        const {
+          enableFocusMode,
+          isDynamicView,
+          enableDynamicViewWalkthrough,
+          focusOnNode,
+          activeWalkthrough,
+          activateWalkthrough,
+          openOverlay,
+          enableRelationshipDetails
+        } = diagramApi.getState();
+        if (isDynamicView && enableDynamicViewWalkthrough) {
+          const nextStep = xyedge.data.edge.id;
+          if ((activeWalkthrough == null ? void 0 : activeWalkthrough.stepId) !== nextStep) {
+            activateWalkthrough(nextStep);
+            event.stopPropagation();
+          }
+          return;
+        }
+        if (enableRelationshipDetails) {
+          openOverlay({
+            edgeDetails: xyedge.data.edge.id
+          });
+          event.stopPropagation();
+          return;
+        }
+        if (enableFocusMode) {
+          focusOnNode(xyedge.source);
+          event.stopPropagation();
+          return;
+        }
+      },
+      onMoveEnd: (event, _viewport) => {
+        const viewportChanged = !!event;
+        if (viewportChanged !== diagramApi.getState().viewportChanged) {
+          diagramApi.setState({ viewportChanged }, false, `viewport-changed: ${viewportChanged}`);
+        }
+      },
+      onEdgeMouseEnter: (_event, { id }) => {
+        const { setHoveredEdge } = diagramApi.getState();
+        setHoveredEdge(id);
+      },
+      onEdgeMouseLeave: (_event, xyedge) => {
+        const { hoveredEdgeId, setHoveredEdge } = diagramApi.getState();
+        if (hoveredEdgeId === xyedge.id) {
+          setHoveredEdge(null);
+        }
+      }
+    };
+  }, [diagramApi]);
+}
+export {
+  useXYFlowEvents
+};

package/dist/xyflow/utils.d.ts

@@ -0,0 +1,22 @@
+import { DiagramEdge, Point } from '@likec4/core';
+import { InternalNode, Rect, XYPosition } from '@xyflow/react';
+import { DiagramFlowTypes } from './types';
+export declare function toDomPrecision(v: number | null): number;
+export declare function distance(a: XYPosition, b: XYPosition): number;
+export declare const nodeToRect: (nd: DiagramFlowTypes.InternalNode) => Rect;
+/**
+ * Checks if a rectangle is completely inside another rectangle.
+ *
+ * @param test - The rectangle to test.
+ * @param target - The target rectangle.
+ * @returns `true` if the `test` rectangle is completely inside the `target` rectangle, otherwise `false`.
+ */
+export declare const isInside: (test: Rect, target: Rect) => boolean;
+export declare function bezierControlPoints(diagramEdge: DiagramEdge): XYPosition[];
+export declare function isSamePoint(a: XYPosition | Point, b: XYPosition | Point): boolean;
+export declare function distanceBetweenPoints(a: XYPosition, b: XYPosition): number;
+export declare function stopPropagation(e: React.MouseEvent): void;
+export declare function centerXYInternalNode<N extends InternalNode>(nd: N): {
+    x: number;
+    y: number;
+};