@uipath/apollo-react 6.10.0 → 6.11.1

package/dist/canvas/components/AlignmentGuides/useAlignmentGuides.js

@@ -0,0 +1,204 @@
+import { useViewport } from "../../xyflow/react.js";
+import { useCallback, useMemo, useState } from "react";
+import { DEFAULT_NODE_SIZE } from "../../constants.js";
+import { getAbsolutePosition } from "../../utils/NodeUtils.js";
+function toBounds(node, allNodes = [
+    node
+]) {
+    const width = node.measured?.width ?? node.width ?? DEFAULT_NODE_SIZE;
+    const height = node.measured?.height ?? node.height ?? DEFAULT_NODE_SIZE;
+    const absolutePosition = node.internals?.positionAbsolute ?? (node.parentId ? getAbsolutePosition(node, allNodes) : node.position);
+    const x1 = absolutePosition.x;
+    const y1 = absolutePosition.y;
+    const x2 = x1 + width;
+    const y2 = y1 + height;
+    return {
+        id: node.id,
+        x1,
+        y1,
+        x2,
+        y2,
+        cx: (x1 + x2) / 2,
+        cy: (y1 + y2) / 2
+    };
+}
+function getAxisAnchors(bounds, orientation) {
+    return 'vertical' === orientation ? [
+        bounds.x1,
+        bounds.cx,
+        bounds.x2
+    ] : [
+        bounds.y1,
+        bounds.cy,
+        bounds.y2
+    ];
+}
+function resolveAxisCandidate(dragged, others, threshold, orientation) {
+    const draggedAnchors = getAxisAnchors(dragged, orientation);
+    const candidates = [];
+    for (const other of others){
+        const otherAnchors = getAxisAnchors(other, orientation);
+        candidates.push({
+            delta: otherAnchors[1] - draggedAnchors[1],
+            kind: 'center',
+            matchedNodeId: other.id,
+            position: otherAnchors[1],
+            priority: 0
+        });
+        for (const draggedIndex of [
+            0,
+            2
+        ])for (const otherIndex of [
+            0,
+            2
+        ])candidates.push({
+            delta: otherAnchors[otherIndex] - draggedAnchors[draggedIndex],
+            kind: 'edge',
+            matchedNodeId: other.id,
+            position: otherAnchors[otherIndex],
+            priority: draggedIndex === otherIndex ? 1 : 2
+        });
+    }
+    return candidates.filter(({ delta })=>Math.abs(delta) <= threshold).sort((a, b)=>Math.abs(a.delta) - Math.abs(b.delta) || a.priority - b.priority || a.position - b.position || a.matchedNodeId.localeCompare(b.matchedNodeId))[0];
+}
+function buildGuide(candidate, dragged, others, orientation) {
+    const matchingOthers = others.filter((other)=>{
+        const anchors = getAxisAnchors(other, orientation);
+        const candidateAnchors = 'center' === candidate.kind ? [
+            anchors[1]
+        ] : [
+            anchors[0],
+            anchors[2]
+        ];
+        return candidateAnchors.some((anchor)=>Math.abs(anchor - candidate.position) < 0.5);
+    });
+    const ranges = [
+        dragged,
+        ...matchingOthers
+    ].map((bounds)=>'vertical' === orientation ? [
+            bounds.y1,
+            bounds.y2
+        ] : [
+            bounds.x1,
+            bounds.x2
+        ]);
+    return {
+        id: `${orientation}-${candidate.position}`,
+        orientation,
+        position: candidate.position,
+        start: Math.min(...ranges.map(([rangeStart])=>rangeStart)),
+        end: Math.max(...ranges.map(([, rangeEnd])=>rangeEnd)),
+        kind: candidate.kind,
+        matchedNodeIds: matchingOthers.map(({ id })=>id)
+    };
+}
+function computeAlignmentResult(dragged, others, threshold) {
+    const vertical = resolveAxisCandidate(dragged, others, threshold, 'vertical');
+    const horizontal = resolveAxisCandidate(dragged, others, threshold, 'horizontal');
+    const delta = {
+        dx: vertical?.delta ?? 0,
+        dy: horizontal?.delta ?? 0
+    };
+    const snapped = {
+        ...dragged,
+        x1: dragged.x1 + delta.dx,
+        x2: dragged.x2 + delta.dx,
+        cx: dragged.cx + delta.dx,
+        y1: dragged.y1 + delta.dy,
+        y2: dragged.y2 + delta.dy,
+        cy: dragged.cy + delta.dy
+    };
+    const guides = [
+        ...vertical ? [
+            buildGuide(vertical, snapped, others, 'vertical')
+        ] : [],
+        ...horizontal ? [
+            buildGuide(horizontal, snapped, others, 'horizontal')
+        ] : []
+    ];
+    return {
+        guides,
+        delta
+    };
+}
+function computeAlignmentGuides(dragged, others, threshold) {
+    return computeAlignmentResult(dragged, others, threshold).guides;
+}
+function computeAlignmentSnapDelta(dragged, others, threshold) {
+    return computeAlignmentResult(dragged, others, threshold).delta;
+}
+function toGroupBounds(nodes, allNodes = nodes) {
+    const bounds = nodes.map((node)=>toBounds(node, allNodes));
+    const x1 = Math.min(...bounds.map((item)=>item.x1));
+    const y1 = Math.min(...bounds.map((item)=>item.y1));
+    const x2 = Math.max(...bounds.map((item)=>item.x2));
+    const y2 = Math.max(...bounds.map((item)=>item.y2));
+    return {
+        id: bounds.map(({ id })=>id).join(','),
+        x1,
+        y1,
+        x2,
+        y2,
+        cx: (x1 + x2) / 2,
+        cy: (y1 + y2) / 2
+    };
+}
+function createAlignmentPositionUpdates(nodes, delta) {
+    return nodes.map(({ id, position })=>({
+            id,
+            position: {
+                x: position.x + delta.dx,
+                y: position.y + delta.dy
+            }
+        }));
+}
+function useAlignmentGuides(nodes, options = {}) {
+    const { thresholdPx = 8, onSnap } = options;
+    const { zoom } = useViewport();
+    const [guides, setGuides] = useState([]);
+    const [draggedBounds, setDraggedBounds] = useState(null);
+    const resolveDrag = useCallback((draggedNode, draggedNodes, showGuides)=>{
+        const activeNodes = draggedNodes.length > 0 ? draggedNodes : [
+            draggedNode
+        ];
+        const activeIds = new Set(activeNodes.map(({ id })=>id));
+        const others = nodes.filter(({ id })=>!activeIds.has(id)).map((node)=>toBounds(node, nodes));
+        const activeBounds = toGroupBounds(activeNodes, nodes);
+        const result = computeAlignmentResult(activeBounds, others, thresholdPx / zoom);
+        setDraggedBounds(showGuides ? {
+            ...activeBounds,
+            x1: activeBounds.x1 + result.delta.dx,
+            x2: activeBounds.x2 + result.delta.dx,
+            cx: activeBounds.cx + result.delta.dx,
+            y1: activeBounds.y1 + result.delta.dy,
+            y2: activeBounds.y2 + result.delta.dy,
+            cy: activeBounds.cy + result.delta.dy
+        } : null);
+        setGuides(showGuides ? result.guides : []);
+        if (!onSnap || 0 === result.delta.dx && 0 === result.delta.dy) return;
+        onSnap(createAlignmentPositionUpdates(activeNodes, result.delta));
+    }, [
+        nodes,
+        onSnap,
+        thresholdPx,
+        zoom
+    ]);
+    const onNodeDrag = useCallback((_event, draggedNode, draggedNodes)=>resolveDrag(draggedNode, draggedNodes, true), [
+        resolveDrag
+    ]);
+    const onNodeDragStop = useCallback((_event, draggedNode, draggedNodes)=>resolveDrag(draggedNode, draggedNodes, false), [
+        resolveDrag
+    ]);
+    return useMemo(()=>({
+            guides,
+            draggedBounds,
+            onNodeDrag,
+            onNodeDragStop
+        }), [
+        guides,
+        draggedBounds,
+        onNodeDrag,
+        onNodeDragStop
+    ]);
+}
+export { computeAlignmentGuides, computeAlignmentResult, computeAlignmentSnapDelta, createAlignmentPositionUpdates, toBounds, toGroupBounds, useAlignmentGuides };

package/dist/canvas/components/Edges/CanvasEdge.cjs

@@ -44,6 +44,28 @@ const CanvasEdge_CanvasEdge = /*#__PURE__*/ (0, external_react_namespaceObject.m
     const onMouseEnter = (0, external_react_namespaceObject.useCallback)(()=>setIsHovered(true), []);
     const onMouseLeave = (0, external_react_namespaceObject.useCallback)(()=>setIsHovered(false), []);
     const pathRef = (0, external_react_namespaceObject.useRef)(null);
+    const store = (0, react_cjs_namespaceObject.useStoreApi)();
+    const onLabelClick = (0, external_react_namespaceObject.useCallback)((event)=>{
+        event.stopPropagation();
+        const { addSelectedEdges, edgeLookup, elementsSelectable, multiSelectionActive, unselectNodesAndEdges } = store.getState();
+        const edge = edgeLookup.get(id);
+        if (!edge || !(edge.selectable ?? elementsSelectable)) return;
+        store.setState({
+            nodesSelectionActive: false
+        });
+        if (edge.selected && multiSelectionActive) unselectNodesAndEdges({
+            nodes: [],
+            edges: [
+                edge
+            ]
+        });
+        else addSelectedEdges([
+            id
+        ]);
+    }, [
+        id,
+        store
+    ]);
     const routing = data?.routing ?? 'waypoint';
     const storedWaypoints = data?.waypoints ?? constants_cjs_namespaceObject.EMPTY_WAYPOINTS;
     const strokeStyle = data?.strokeStyle ?? 'solid';
@@ -129,6 +151,7 @@ const CanvasEdge_CanvasEdge = /*#__PURE__*/ (0, external_react_namespaceObject.m
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("g", {
+                "data-edge-hovered": isHovered || void 0,
                 onMouseEnter: onMouseEnter,
                 onMouseLeave: onMouseLeave,
                 onMouseMove: toolbarEnabled ? toolbar.handleMouseMoveOnPath : void 0,
@@ -174,7 +197,10 @@ const CanvasEdge_CanvasEdge = /*#__PURE__*/ (0, external_react_namespaceObject.m
                         x: geometry.labelPoint.x,
                         y: geometry.labelPoint.y,
                         text: label,
-                        selected: selected
+                        borderColor: color,
+                        onClick: isReadOnly ? void 0 : onLabelClick,
+                        onMouseEnter: onMouseEnter,
+                        onMouseLeave: onMouseLeave
                     })
                 ]
             }),

package/dist/canvas/components/Edges/CanvasEdge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CanvasEdge.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Edges/CanvasEdge.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAWtD,eAAO,MAAM,UAAU,uDAkMF,CAAC"}
+{"version":3,"file":"CanvasEdge.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Edges/CanvasEdge.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAWtD,eAAO,MAAM,UAAU,uDA+NF,CAAC"}

package/dist/canvas/components/Edges/CanvasEdge.js

@@ -1,5 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Position } from "../../xyflow/react.js";
+import { Position, useStoreApi } from "../../xyflow/react.js";
 import { memo, useCallback, useRef, useState } from "react";
 import { isPreviewEdge } from "../../utils/createPreviewNode.js";
 import { useBaseCanvasMode } from "../BaseCanvas/BaseCanvasModeProvider.js";
@@ -16,6 +16,28 @@ const CanvasEdge_CanvasEdge = /*#__PURE__*/ memo(function({ id, selected, animat
     const onMouseEnter = useCallback(()=>setIsHovered(true), []);
     const onMouseLeave = useCallback(()=>setIsHovered(false), []);
     const pathRef = useRef(null);
+    const store = useStoreApi();
+    const onLabelClick = useCallback((event)=>{
+        event.stopPropagation();
+        const { addSelectedEdges, edgeLookup, elementsSelectable, multiSelectionActive, unselectNodesAndEdges } = store.getState();
+        const edge = edgeLookup.get(id);
+        if (!edge || !(edge.selectable ?? elementsSelectable)) return;
+        store.setState({
+            nodesSelectionActive: false
+        });
+        if (edge.selected && multiSelectionActive) unselectNodesAndEdges({
+            nodes: [],
+            edges: [
+                edge
+            ]
+        });
+        else addSelectedEdges([
+            id
+        ]);
+    }, [
+        id,
+        store
+    ]);
     const routing = data?.routing ?? 'waypoint';
     const storedWaypoints = data?.waypoints ?? EMPTY_WAYPOINTS;
     const strokeStyle = data?.strokeStyle ?? 'solid';
@@ -101,6 +123,7 @@ const CanvasEdge_CanvasEdge = /*#__PURE__*/ memo(function({ id, selected, animat
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsxs("g", {
+                "data-edge-hovered": isHovered || void 0,
                 onMouseEnter: onMouseEnter,
                 onMouseLeave: onMouseLeave,
                 onMouseMove: toolbarEnabled ? toolbar.handleMouseMoveOnPath : void 0,
@@ -146,7 +169,10 @@ const CanvasEdge_CanvasEdge = /*#__PURE__*/ memo(function({ id, selected, animat
                         x: geometry.labelPoint.x,
                         y: geometry.labelPoint.y,
                         text: label,
-                        selected: selected
+                        borderColor: color,
+                        onClick: isReadOnly ? void 0 : onLabelClick,
+                        onMouseEnter: onMouseEnter,
+                        onMouseLeave: onMouseLeave
                     })
                 ]
             }),

package/dist/canvas/components/Edges/shared/constants.cjs

@@ -55,12 +55,12 @@ const EDGE_DASHARRAY = {
     dashed: '5,5'
 };
 const EDGE_COLORS = {
-    default: 'var(--canvas-border)',
-    hover: 'var(--canvas-primary-hover)',
-    selected: 'var(--canvas-primary)',
-    invalid: 'var(--canvas-error-icon)',
-    diffAdded: 'var(--canvas-success-icon)',
-    diffRemoved: 'var(--canvas-error-icon)'
+    default: 'var(--canvas-border, var(--color-border))',
+    hover: 'var(--canvas-primary-hover, var(--color-primary-hover))',
+    selected: 'var(--canvas-primary, var(--color-primary))',
+    invalid: 'var(--canvas-error-icon, var(--color-error-icon))',
+    diffAdded: 'var(--canvas-success-icon, var(--color-success-icon))',
+    diffRemoved: 'var(--canvas-error-icon, var(--color-error-icon))'
 };
 const ARROW_ANGLE_MAP = {
     [react_cjs_namespaceObject.Position.Left]: 0,

package/dist/canvas/components/Edges/shared/constants.d.ts

@@ -21,12 +21,12 @@ export declare const EDGE_DASHARRAY: {
     readonly dashed: "5,5";
 };
 export declare const EDGE_COLORS: {
-    readonly default: "var(--canvas-border)";
-    readonly hover: "var(--canvas-primary-hover)";
-    readonly selected: "var(--canvas-primary)";
-    readonly invalid: "var(--canvas-error-icon)";
-    readonly diffAdded: "var(--canvas-success-icon)";
-    readonly diffRemoved: "var(--canvas-error-icon)";
+    readonly default: "var(--canvas-border, var(--color-border))";
+    readonly hover: "var(--canvas-primary-hover, var(--color-primary-hover))";
+    readonly selected: "var(--canvas-primary, var(--color-primary))";
+    readonly invalid: "var(--canvas-error-icon, var(--color-error-icon))";
+    readonly diffAdded: "var(--canvas-success-icon, var(--color-success-icon))";
+    readonly diffRemoved: "var(--canvas-error-icon, var(--color-error-icon))";
 };
 export declare const ARROW_ANGLE_MAP: Record<Position, number>;
 export declare const ARROW_OFFSETS: Record<Position, Point>;

package/dist/canvas/components/Edges/shared/constants.js

@@ -21,12 +21,12 @@ const EDGE_DASHARRAY = {
     dashed: '5,5'
 };
 const EDGE_COLORS = {
-    default: 'var(--canvas-border)',
-    hover: 'var(--canvas-primary-hover)',
-    selected: 'var(--canvas-primary)',
-    invalid: 'var(--canvas-error-icon)',
-    diffAdded: 'var(--canvas-success-icon)',
-    diffRemoved: 'var(--canvas-error-icon)'
+    default: 'var(--canvas-border, var(--color-border))',
+    hover: 'var(--canvas-primary-hover, var(--color-primary-hover))',
+    selected: 'var(--canvas-primary, var(--color-primary))',
+    invalid: 'var(--canvas-error-icon, var(--color-error-icon))',
+    diffAdded: 'var(--canvas-success-icon, var(--color-success-icon))',
+    diffRemoved: 'var(--canvas-error-icon, var(--color-error-icon))'
 };
 const ARROW_ANGLE_MAP = {
     [Position.Left]: 0,

package/dist/canvas/components/Edges/shared/primitives/EdgeLabel.cjs

@@ -24,41 +24,44 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    EdgeLabel: ()=>EdgeLabel
+    EdgeLabel: ()=>EdgeLabel,
+    EDGE_LABEL_DEFAULT_BORDER_COLOR: ()=>EDGE_LABEL_DEFAULT_BORDER_COLOR
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-function EdgeLabel({ x, y, text, selected }) {
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("foreignObject", {
-        x: x,
-        y: y,
-        width: 1,
-        height: 1,
-        overflow: "visible",
-        style: {
-            pointerEvents: 'none'
-        },
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-            className: "react-flow__edge-label nodrag nopan",
-            style: {
-                position: 'absolute',
-                transform: 'translate(-50%, -50%)',
-                whiteSpace: 'nowrap',
-                pointerEvents: 'none',
-                color: 'var(--canvas-foreground)',
-                background: 'var(--canvas-background)',
-                padding: '4px 8px',
-                borderRadius: '4px',
-                fontSize: '12px',
-                fontWeight: 500,
-                border: `1px solid ${selected ? 'var(--canvas-primary)' : 'var(--canvas-border)'}`,
-                boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1)'
-            },
-            children: text
+const react_cjs_namespaceObject = require("../../../../xyflow/react.cjs");
+const external_react_namespaceObject = require("react");
+const external_CanvasTooltip_cjs_namespaceObject = require("../../../CanvasTooltip.cjs");
+const EDGE_LABEL_BASE_CLASS = "react-flow__edge-label nodrag nopan absolute top-0 left-0 max-w-48 overflow-hidden text-ellipsis whitespace-nowrap pointer-events-auto cursor-default px-2 py-1 rounded text-xs font-medium border shadow-[0_1px_3px_0_rgba(0,0,0,0.1)] text-[var(--canvas-foreground,var(--color-foreground))] bg-[var(--canvas-background,var(--color-background))]";
+const EDGE_LABEL_DEFAULT_BORDER_COLOR = 'var(--canvas-border,var(--color-border))';
+function EdgeLabel({ x, y, text, borderColor = EDGE_LABEL_DEFAULT_BORDER_COLOR, onClick, onMouseEnter, onMouseLeave }) {
+    const transform = (0, external_react_namespaceObject.useMemo)(()=>`translate(-50%, -50%) translate(${x}px, ${y}px)`, [
+        x,
+        y
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.EdgeLabelRenderer, {
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
+            content: text,
+            smartTooltip: true,
+            delay: true,
+            disableHoverableContent: true,
+            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: EDGE_LABEL_BASE_CLASS,
+                style: {
+                    transform,
+                    borderColor
+                },
+                onClick: onClick,
+                onMouseEnter: onMouseEnter,
+                onMouseLeave: onMouseLeave,
+                children: text
+            })
         })
     });
 }
+exports.EDGE_LABEL_DEFAULT_BORDER_COLOR = __webpack_exports__.EDGE_LABEL_DEFAULT_BORDER_COLOR;
 exports.EdgeLabel = __webpack_exports__.EdgeLabel;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "EDGE_LABEL_DEFAULT_BORDER_COLOR",
     "EdgeLabel"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {

package/dist/canvas/components/Edges/shared/primitives/EdgeLabel.d.ts

@@ -1,8 +1,13 @@
+import type { MouseEventHandler } from 'react';
 export type EdgeLabelProps = {
     x: number;
     y: number;
     text: string;
-    selected?: boolean;
+    borderColor?: string;
+    onClick?: MouseEventHandler<HTMLDivElement>;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
 };
-export declare function EdgeLabel({ x, y, text, selected }: EdgeLabelProps): import("react/jsx-runtime").JSX.Element;
+export declare const EDGE_LABEL_DEFAULT_BORDER_COLOR = "var(--canvas-border,var(--color-border))";
+export declare function EdgeLabel({ x, y, text, borderColor, onClick, onMouseEnter, onMouseLeave, }: EdgeLabelProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=EdgeLabel.d.ts.map

package/dist/canvas/components/Edges/shared/primitives/EdgeLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EdgeLabel.d.ts","sourceRoot":"","sources":["../../../../../../src/canvas/components/Edges/shared/primitives/EdgeLabel.tsx"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG;IAC3B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,wBAAgB,SAAS,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,cAAc,2CA+BjE"}
+{"version":3,"file":"EdgeLabel.d.ts","sourceRoot":"","sources":["../../../../../../src/canvas/components/Edges/shared/primitives/EdgeLabel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI/C,MAAM,MAAM,cAAc,GAAG;IAC3B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAWF,eAAO,MAAM,+BAA+B,6CAA6C,CAAC;AAS1F,wBAAgB,SAAS,CAAC,EACxB,CAAC,EACD,CAAC,EACD,IAAI,EACJ,WAA6C,EAC7C,OAAO,EACP,YAAY,EACZ,YAAY,GACb,EAAE,cAAc,2CAkBhB"}

package/dist/canvas/components/Edges/shared/primitives/EdgeLabel.js

@@ -1,32 +1,32 @@
 import { jsx } from "react/jsx-runtime";
-function EdgeLabel({ x, y, text, selected }) {
-    return /*#__PURE__*/ jsx("foreignObject", {
-        x: x,
-        y: y,
-        width: 1,
-        height: 1,
-        overflow: "visible",
-        style: {
-            pointerEvents: 'none'
-        },
-        children: /*#__PURE__*/ jsx("div", {
-            className: "react-flow__edge-label nodrag nopan",
-            style: {
-                position: 'absolute',
-                transform: 'translate(-50%, -50%)',
-                whiteSpace: 'nowrap',
-                pointerEvents: 'none',
-                color: 'var(--canvas-foreground)',
-                background: 'var(--canvas-background)',
-                padding: '4px 8px',
-                borderRadius: '4px',
-                fontSize: '12px',
-                fontWeight: 500,
-                border: `1px solid ${selected ? 'var(--canvas-primary)' : 'var(--canvas-border)'}`,
-                boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1)'
-            },
-            children: text
+import { EdgeLabelRenderer } from "../../../../xyflow/react.js";
+import { useMemo } from "react";
+import { CanvasTooltip } from "../../../CanvasTooltip.js";
+const EDGE_LABEL_BASE_CLASS = "react-flow__edge-label nodrag nopan absolute top-0 left-0 max-w-48 overflow-hidden text-ellipsis whitespace-nowrap pointer-events-auto cursor-default px-2 py-1 rounded text-xs font-medium border shadow-[0_1px_3px_0_rgba(0,0,0,0.1)] text-[var(--canvas-foreground,var(--color-foreground))] bg-[var(--canvas-background,var(--color-background))]";
+const EDGE_LABEL_DEFAULT_BORDER_COLOR = 'var(--canvas-border,var(--color-border))';
+function EdgeLabel({ x, y, text, borderColor = EDGE_LABEL_DEFAULT_BORDER_COLOR, onClick, onMouseEnter, onMouseLeave }) {
+    const transform = useMemo(()=>`translate(-50%, -50%) translate(${x}px, ${y}px)`, [
+        x,
+        y
+    ]);
+    return /*#__PURE__*/ jsx(EdgeLabelRenderer, {
+        children: /*#__PURE__*/ jsx(CanvasTooltip, {
+            content: text,
+            smartTooltip: true,
+            delay: true,
+            disableHoverableContent: true,
+            children: /*#__PURE__*/ jsx("div", {
+                className: EDGE_LABEL_BASE_CLASS,
+                style: {
+                    transform,
+                    borderColor
+                },
+                onClick: onClick,
+                onMouseEnter: onMouseEnter,
+                onMouseLeave: onMouseLeave,
+                children: text
+            })
         })
     });
 }
-export { EdgeLabel };
+export { EDGE_LABEL_DEFAULT_BORDER_COLOR, EdgeLabel };

package/dist/canvas/components/StageNode/StageEdge.cjs

@@ -43,19 +43,19 @@ const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
 const external_react_namespaceObject = require("react");
 const StageEdgeLabel = styled_default().div`
   position: absolute;
-  color: var(--canvas-foreground);
-  background: var(--canvas-background);
+  color: var(--canvas-foreground, var(--color-foreground));
+  background: var(--canvas-background, var(--color-background));
   padding: 4px 8px;
   border-radius: 4px;
   font-size: 12px;
   font-weight: 500;
-  border: 1px solid var(--canvas-border);
+  border: 1px solid var(--canvas-border, var(--color-border));
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
   pointer-events: all;
 
   &:hover {
-    background: var(--canvas-background-hover);
-    border-color: var(--canvas-border-hover);
+    background: var(--canvas-background-hover, var(--color-background-hover));
+    border-color: var(--canvas-border-hover, var(--color-border-hover));
   }
 `;
 function stageEdgeGeometryEquality(previous, next) {

package/dist/canvas/components/StageNode/StageEdge.js

@@ -4,19 +4,19 @@ import { EdgeLabelRenderer, getSmoothStepPath, useStore } from "../../xyflow/rea
 import { memo, useMemo } from "react";
 const StageEdgeLabel = styled.div`
   position: absolute;
-  color: var(--canvas-foreground);
-  background: var(--canvas-background);
+  color: var(--canvas-foreground, var(--color-foreground));
+  background: var(--canvas-background, var(--color-background));
   padding: 4px 8px;
   border-radius: 4px;
   font-size: 12px;
   font-weight: 500;
-  border: 1px solid var(--canvas-border);
+  border: 1px solid var(--canvas-border, var(--color-border));
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
   pointer-events: all;
 
   &:hover {
-    background: var(--canvas-background-hover);
-    border-color: var(--canvas-border-hover);
+    background: var(--canvas-background-hover, var(--color-background-hover));
+    border-color: var(--canvas-border-hover, var(--color-border-hover));
   }
 `;
 function stageEdgeGeometryEquality(previous, next) {