@likec4/diagram 1.19.2 → 1.20.0

package/dist/xyflow/nodes/element/element.css.js

@@ -1,31 +0,0 @@
-/* empty css                           */
-var container = "_1b6tkn1";
-var handleCenter = "_1b6tkn2";
-var containerAnimated = "_1b6tkn3";
-var indicator = "_1b6tkn6";
-var fillElementFill = "_1b6tkn7";
-var fillMixStroke = "_1b6tkn9";
-var hasIcon = "_1b6tkna";
-var title = "_1b6tknd";
-var description = "_1b6tkne";
-var technology = "_1b6tknf";
-var elementDataContainer = "_1b6tkng";
-var elementTextData = "_1b6tknh";
-var elementIcon = "_1b6tkni";
-var shapeSvg = "_1b6tknl";
-export {
-  container,
-  containerAnimated,
-  description,
-  elementDataContainer,
-  elementIcon,
-  elementTextData,
-  fillElementFill,
-  fillMixStroke,
-  handleCenter,
-  hasIcon,
-  indicator,
-  shapeSvg,
-  technology,
-  title
-};

package/dist/xyflow/nodes/element/index.d.ts

@@ -1 +0,0 @@
-export { ElementNodeMemo as ElementNode } from './ElementNode';

package/dist/xyflow/nodes/shared/ElementIcon.d.ts

@@ -1,8 +0,0 @@
-import { DiagramNode } from '@likec4/core';
-import { ElementIconRenderer } from '../../../LikeC4Diagram.props';
-export declare const ElementIcon: ({ element, viewId, className, renderIcon: RenderIcon }: {
-    element: DiagramNode;
-    viewId: string;
-    className: string;
-    renderIcon: ElementIconRenderer | null;
-}) => import("react/jsx-runtime").JSX.Element | null;

package/dist/xyflow/nodes/shared/Toolbar.d.ts

@@ -1,9 +0,0 @@
-import { ThemeColor, DiagramNode } from '@likec4/core';
-import { NodeToolbarProps } from '@xyflow/react';
-type ToolbarProps = NodeToolbarProps & {
-    element: DiagramNode;
-    onColorPreview: (color: ThemeColor | null) => void;
-};
-export declare function CompoundToolbar({ element, onColorPreview, ...props }: ToolbarProps): import("react/jsx-runtime").JSX.Element;
-export declare function ElementToolbar({ element, onColorPreview, ...props }: ToolbarProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/xyflow/nodes/shared/Toolbar.js

@@ -1,436 +0,0 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { defaultTheme, DiagramNode, ElementShapes } from "@likec4/core";
-import { keys, Tooltip as Tooltip$1, Menu, MenuTarget, Button, MenuDropdown, MenuItem, ActionIcon, Popover, PopoverTarget, ColorSwatch, PopoverDropdown, Space, Divider, Stack, TooltipGroup, Flex, CheckIcon, rem, Slider, Paper, Box, Text, Group, SegmentedControl } from "@mantine/core";
-import { IconSelector, IconCheck, IconFileSymlink, IconTransform } from "@tabler/icons-react";
-import { NodeToolbar } from "@xyflow/react";
-import clsx from "clsx";
-import { useState, useEffect } from "react";
-import { stopPropagation } from "../../utils.js";
-import { useDiagramStoreApi, useDiagramState } from "../../../hooks/useDiagramState.js";
-import { useMantinePortalProps } from "../../../hooks/useMantinePortalProps.js";
-import { useUpdateEffect } from "../../../hooks/useUpdateEffect.js";
-const {
-  primary,
-  secondary,
-  muted,
-  ...otherColors
-} = defaultTheme.elements;
-const themedColors = [
-  { key: "primary", value: primary.fill },
-  { key: "secondary", value: secondary.fill },
-  { key: "muted", value: muted.fill }
-];
-const colors = keys(otherColors).map((key) => ({
-  key,
-  value: defaultTheme.elements[key].fill
-}));
-const Tooltip = Tooltip$1.withProps({
-  color: "dark",
-  fz: "xs",
-  openDelay: 400,
-  closeDelay: 150,
-  label: "",
-  children: null,
-  offset: 4
-});
-function CompoundToolbar({
-  element,
-  onColorPreview,
-  ...props
-}) {
-  var _a;
-  const modelRef = DiagramNode.modelRef(element);
-  const deploymentRef = DiagramNode.deploymentRef(element);
-  const targets = [element.id];
-  const diagramApi = useDiagramStoreApi();
-  const {
-    hasGoToSource,
-    enableRelationshipBrowser
-  } = useDiagramState((s) => ({
-    hasGoToSource: !!s.onOpenSource,
-    enableRelationshipBrowser: s.enableRelationshipBrowser
-  }));
-  const onChange = (style) => {
-    diagramApi.getState().triggerChangeElementStyle({
-      op: "change-element-style",
-      style,
-      targets
-    });
-  };
-  return /* @__PURE__ */ jsxs(Toolbar, { element, ...props, children: [
-    /* @__PURE__ */ jsx(
-      ColorButton,
-      {
-        element,
-        isOpacityEditable: true,
-        onColorPreview,
-        onChange,
-        position: "left-start"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      BorderStyleOption,
-      {
-        elementBorderStyle: (_a = element.style) == null ? void 0 : _a.border,
-        onChange
-      }
-    ),
-    hasGoToSource && modelRef && /* @__PURE__ */ jsx(GoToSourceButton, { elementId: modelRef }),
-    hasGoToSource && !modelRef && deploymentRef && /* @__PURE__ */ jsx(GoToSourceButton, { deploymentId: deploymentRef }),
-    enableRelationshipBrowser && !!modelRef && /* @__PURE__ */ jsx(BrowseRelationshipsButton, { elementId: modelRef })
-  ] });
-}
-function Toolbar({ element, children, ...props }) {
-  return /* @__PURE__ */ jsx(NodeToolbar, { ...props, children: /* @__PURE__ */ jsx(
-    Paper,
-    {
-      className: clsx("nodrag", "nopan"),
-      px: 5,
-      pb: 8,
-      pt: 4,
-      radius: "sm",
-      shadow: "xl",
-      onDoubleClickCapture: stopPropagation,
-      onPointerDown: stopPropagation,
-      onClick: stopPropagation,
-      onDoubleClick: stopPropagation,
-      withBorder: true,
-      children: /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
-        /* @__PURE__ */ jsx(Box, { pl: 2, children: /* @__PURE__ */ jsx(Text, { c: "dimmed", fz: 10, fw: 500, children: element.id }) }),
-        /* @__PURE__ */ jsx(Group, { gap: 3, children })
-      ] })
-    }
-  ) });
-}
-function ElementToolbar({
-  element,
-  onColorPreview,
-  ...props
-}) {
-  const modelRef = DiagramNode.modelRef(element);
-  const deploymentRef = DiagramNode.deploymentRef(element);
-  const targets = [element.id];
-  const diagramApi = useDiagramStoreApi();
-  const {
-    hasGoToSource,
-    enableRelationshipBrowser
-  } = useDiagramState((s) => ({
-    hasGoToSource: !!s.onOpenSource,
-    enableRelationshipBrowser: s.enableRelationshipBrowser
-  }));
-  const portalProps = useMantinePortalProps();
-  const onChange = (style) => {
-    diagramApi.getState().triggerChangeElementStyle({
-      op: "change-element-style",
-      style,
-      targets
-    });
-  };
-  return /* @__PURE__ */ jsxs(Toolbar, { element, ...props, children: [
-    /* @__PURE__ */ jsxs(
-      Menu,
-      {
-        openDelay: 300,
-        closeDelay: 450,
-        floatingStrategy: "fixed",
-        closeOnClickOutside: true,
-        clickOutsideEvents: ["pointerdown", "mousedown", "click"],
-        closeOnEscape: true,
-        closeOnItemClick: false,
-        position: "bottom-start",
-        offset: 2,
-        styles: {
-          item: {
-            padding: "calc(var(--mantine-spacing-xs) / 1.5) var(--mantine-spacing-xs)"
-          }
-        },
-        ...portalProps,
-        children: [
-          /* @__PURE__ */ jsx(MenuTarget, { children: /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "light",
-              color: "gray",
-              size: "compact-xs",
-              rightSection: /* @__PURE__ */ jsx(IconSelector, { size: 12 }),
-              children: element.shape
-            }
-          ) }),
-          /* @__PURE__ */ jsx(
-            MenuDropdown,
-            {
-              onDoubleClick: stopPropagation,
-              onClick: stopPropagation,
-              children: ElementShapes.map((shape) => /* @__PURE__ */ jsx(
-                MenuItem,
-                {
-                  fz: 12,
-                  fw: 500,
-                  value: shape,
-                  rightSection: element.shape === shape ? /* @__PURE__ */ jsx(IconCheck, { size: 12 }) : void 0,
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    onChange({ shape });
-                  },
-                  children: shape
-                },
-                shape
-              ))
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      ColorButton,
-      {
-        element,
-        onColorPreview,
-        onChange,
-        position: "right-end"
-      }
-    ),
-    hasGoToSource && modelRef && /* @__PURE__ */ jsx(GoToSourceButton, { elementId: modelRef }),
-    hasGoToSource && !modelRef && deploymentRef && /* @__PURE__ */ jsx(GoToSourceButton, { deploymentId: deploymentRef }),
-    enableRelationshipBrowser && !!modelRef && /* @__PURE__ */ jsx(BrowseRelationshipsButton, { elementId: modelRef })
-  ] });
-}
-function GoToSourceButton(props) {
-  const diagramApi = useDiagramStoreApi();
-  const portalProps = useMantinePortalProps();
-  return /* @__PURE__ */ jsx(Tooltip, { label: "Open source", ...portalProps, children: /* @__PURE__ */ jsx(
-    ActionIcon,
-    {
-      size: "sm",
-      variant: "subtle",
-      color: "gray",
-      onClick: (e) => {
-        var _a, _b, _c, _d;
-        e.stopPropagation();
-        if (props.elementId) {
-          (_b = (_a = diagramApi.getState()).onOpenSource) == null ? void 0 : _b.call(_a, {
-            element: props.elementId
-          });
-        } else if (props.deploymentId) {
-          (_d = (_c = diagramApi.getState()).onOpenSource) == null ? void 0 : _d.call(_c, {
-            deployment: props.deploymentId
-          });
-        }
-      },
-      children: /* @__PURE__ */ jsx(IconFileSymlink, { stroke: 1.8, style: { width: "70%" } })
-    }
-  ) });
-}
-function ColorButton({
-  element,
-  onColorPreview,
-  isOpacityEditable = false,
-  onChange,
-  ...props
-}) {
-  var _a, _b;
-  const elementColor = element.color ?? "primary";
-  return /* @__PURE__ */ jsxs(
-    Popover,
-    {
-      clickOutsideEvents: ["pointerdown", "mousedown", "click"],
-      position: "right-end",
-      offset: 2,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(Button, { variant: "subtle", color: "gray", size: "compact-xs", px: 3, children: /* @__PURE__ */ jsx(
-          ColorSwatch,
-          {
-            color: (_a = defaultTheme.elements[elementColor]) == null ? void 0 : _a.fill,
-            size: 14,
-            withShadow: true,
-            style: { color: "#fff", cursor: "pointer" }
-          }
-        ) }) }),
-        /* @__PURE__ */ jsxs(PopoverDropdown, { p: "xs", children: [
-          /* @__PURE__ */ jsx(
-            ColorSwatches,
-            {
-              elementColor,
-              onColorPreview,
-              onChange: (color) => onChange({ color })
-            }
-          ),
-          isOpacityEditable && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(Space, { h: "xs" }),
-            /* @__PURE__ */ jsx(Divider, { label: "opacity", labelPosition: "left" }),
-            /* @__PURE__ */ jsx(Space, { h: "xs" }),
-            /* @__PURE__ */ jsx(
-              OpacityOption,
-              {
-                elementOpacity: (_b = element.style) == null ? void 0 : _b.opacity,
-                onOpacityChange: (opacity) => {
-                  onChange({ opacity });
-                }
-              }
-            )
-          ] })
-        ] })
-      ]
-    }
-  );
-}
-function ColorSwatches({
-  elementColor,
-  onColorPreview,
-  onChange
-}) {
-  const changeColor = (color) => (e) => {
-    e.stopPropagation();
-    onColorPreview(null);
-    if (elementColor === color) {
-      return;
-    }
-    onChange(color);
-  };
-  return /* @__PURE__ */ jsx(Stack, { gap: 2, onMouseLeave: () => onColorPreview(null), children: /* @__PURE__ */ jsxs(TooltipGroup, { openDelay: 1e3, closeDelay: 300, children: [
-    /* @__PURE__ */ jsx(Flex, { maw: 120, gap: "6", justify: "flex-start", align: "flex-start", direction: "row", wrap: "wrap", children: themedColors.map(({ key, value }) => /* @__PURE__ */ jsx(
-      Tooltip$1,
-      {
-        label: key,
-        fz: "xs",
-        color: "dark",
-        offset: 2,
-        transitionProps: { duration: 140, transition: "slide-up" },
-        children: /* @__PURE__ */ jsx(
-          ColorSwatch,
-          {
-            color: value,
-            size: 18,
-            withShadow: true,
-            onMouseEnter: () => onColorPreview(key),
-            onClick: changeColor(key),
-            style: { color: "#fff", cursor: "pointer" },
-            children: elementColor === key && /* @__PURE__ */ jsx(CheckIcon, { style: { width: rem(10), height: rem(10) } })
-          }
-        )
-      },
-      key
-    )) }),
-    /* @__PURE__ */ jsx(
-      Flex,
-      {
-        mt: "sm",
-        maw: 110,
-        gap: "6",
-        justify: "flex-start",
-        align: "flex-start",
-        direction: "row",
-        wrap: "wrap",
-        children: colors.map(({ key, value }) => /* @__PURE__ */ jsx(
-          Tooltip$1,
-          {
-            label: key,
-            fz: "xs",
-            color: "dark",
-            offset: 2,
-            transitionProps: { duration: 140, transition: "slide-up" },
-            children: /* @__PURE__ */ jsx(
-              ColorSwatch,
-              {
-                color: value,
-                size: 18,
-                onMouseEnter: () => onColorPreview(key),
-                onClick: changeColor(key),
-                style: { color: "#fff", cursor: "pointer" },
-                children: elementColor === key && /* @__PURE__ */ jsx(CheckIcon, { style: { width: rem(10), height: rem(10) } })
-              }
-            )
-          },
-          key
-        ))
-      }
-    )
-  ] }) });
-}
-function BorderStyleOption({
-  elementBorderStyle = "dashed",
-  onChange
-}) {
-  const [value, setValue] = useState(elementBorderStyle);
-  useEffect(() => {
-    setValue(elementBorderStyle);
-  }, [elementBorderStyle]);
-  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
-    SegmentedControl,
-    {
-      size: "xs",
-      fullWidth: true,
-      withItemsBorders: false,
-      value,
-      onChange: (v) => {
-        const border = v;
-        setValue(border);
-        onChange({ border });
-      },
-      styles: {
-        label: {
-          paddingTop: 2,
-          paddingBottom: 2
-        }
-      },
-      data: [
-        { label: "Solid", value: "solid" },
-        { label: "Dashed", value: "dashed" },
-        { label: "Dotted", value: "dotted" },
-        { label: "None", value: "none" }
-      ]
-    }
-  ) });
-}
-function OpacityOption({
-  elementOpacity = 100,
-  onOpacityChange
-}) {
-  const [value, setValue] = useState(elementOpacity);
-  useUpdateEffect(() => {
-    setValue(elementOpacity);
-  }, [elementOpacity]);
-  return /* @__PURE__ */ jsx(
-    Slider,
-    {
-      size: "sm",
-      color: "dark",
-      value,
-      onChange: setValue,
-      onChangeEnd: onOpacityChange
-    }
-  );
-}
-function BrowseRelationshipsButton({ elementId }) {
-  const diagramApi = useDiagramStoreApi();
-  const portalProps = useMantinePortalProps();
-  return /* @__PURE__ */ jsx(Tooltip, { label: "Browse relationships", ...portalProps, children: /* @__PURE__ */ jsx(
-    ActionIcon,
-    {
-      size: "sm",
-      variant: "subtle",
-      color: "gray",
-      onClick: (e) => {
-        e.stopPropagation();
-        diagramApi.getState().openOverlay({
-          relationshipsOf: elementId
-        });
-      },
-      children: /* @__PURE__ */ jsx(
-        IconTransform,
-        {
-          stroke: 2,
-          style: {
-            width: "72%",
-            height: "72%"
-          }
-        }
-      )
-    }
-  ) });
-}
-export {
-  CompoundToolbar,
-  ElementToolbar
-};

package/dist/xyflow/types.d.ts

@@ -1,36 +0,0 @@
-import { BBox, DiagramEdge, DiagramNode, XYPoint } from '@likec4/core';
-import { Edge as ReactFlowEdge, InternalNode as ReactFlowInternalNode, Node as ReactFlowNode, ReactFlowInstance, ReactFlowState } from '@xyflow/react';
-import { SetRequired, Simplify } from 'type-fest';
-import { SharedFlowTypes } from '../overlays/shared/xyflow/_types';
-export declare namespace DiagramFlowTypes {
-    type NodeData = {
-        /**
-         * The DiagramNode backing this node.
-         */
-        element: DiagramNode;
-    };
-    type CompoundNodeData = NodeData & {
-        /**
-         * Whether this node is a view group.
-         */
-        isViewGroup: boolean;
-    };
-    type ElementNode = SetRequired<ReactFlowNode<SharedFlowTypes.NonEmptyNodeData & NodeData, 'element'>, 'type'>;
-    type CompoundNode = SetRequired<ReactFlowNode<SharedFlowTypes.NonEmptyNodeData & CompoundNodeData, 'compound'>, 'type'>;
-    type Node = ElementNode | CompoundNode;
-    type InternalNode = ReactFlowInternalNode<Node>;
-    type XYFlowInstance = ReactFlowInstance<Node, Edge>;
-    type XYFlowState = ReactFlowState<Node, Edge>;
-    type DiagramEdgeData = {
-        edge: DiagramEdge;
-        controlPoints: XYPoint[] | null;
-        label: null | {
-            bbox: BBox;
-            text: string;
-        };
-    };
-    type Edge = Simplify<ReactFlowEdge<DiagramEdgeData, 'relationship'> & {
-        type: 'relationship';
-        data: DiagramEdgeData;
-    }>;
-}

package/dist/xyflow/useXYFlowEvents.d.ts

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