@uipath/apollo-react 6.10.0 → 6.11.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/canvas/components/AlignmentGuides/AlignmentGuides.types.cjs +18 -0
- package/dist/canvas/components/AlignmentGuides/AlignmentGuides.types.d.ts +21 -0
- package/dist/canvas/components/AlignmentGuides/AlignmentGuides.types.d.ts.map +1 -0
- package/dist/canvas/components/AlignmentGuides/AlignmentGuides.types.js +0 -0
- package/dist/canvas/components/AlignmentGuides/AlignmentGuidesOverlay.cjs +75 -0
- package/dist/canvas/components/AlignmentGuides/AlignmentGuidesOverlay.d.ts +7 -0
- package/dist/canvas/components/AlignmentGuides/AlignmentGuidesOverlay.d.ts.map +1 -0
- package/dist/canvas/components/AlignmentGuides/AlignmentGuidesOverlay.js +41 -0
- package/dist/canvas/components/AlignmentGuides/index.cjs +72 -0
- package/dist/canvas/components/AlignmentGuides/index.d.ts +4 -0
- package/dist/canvas/components/AlignmentGuides/index.d.ts.map +1 -0
- package/dist/canvas/components/AlignmentGuides/index.js +3 -0
- package/dist/canvas/components/AlignmentGuides/useAlignmentGuides.cjs +256 -0
- package/dist/canvas/components/AlignmentGuides/useAlignmentGuides.d.ts +35 -0
- package/dist/canvas/components/AlignmentGuides/useAlignmentGuides.d.ts.map +1 -0
- package/dist/canvas/components/AlignmentGuides/useAlignmentGuides.js +204 -0
- package/dist/canvas/components/Edges/CanvasEdge.cjs +27 -1
- package/dist/canvas/components/Edges/CanvasEdge.d.ts.map +1 -1
- package/dist/canvas/components/Edges/CanvasEdge.js +28 -2
- package/dist/canvas/components/Edges/shared/constants.cjs +6 -6
- package/dist/canvas/components/Edges/shared/constants.d.ts +6 -6
- package/dist/canvas/components/Edges/shared/constants.js +6 -6
- package/dist/canvas/components/Edges/shared/primitives/EdgeLabel.cjs +31 -28
- package/dist/canvas/components/Edges/shared/primitives/EdgeLabel.d.ts +7 -2
- package/dist/canvas/components/Edges/shared/primitives/EdgeLabel.d.ts.map +1 -1
- package/dist/canvas/components/Edges/shared/primitives/EdgeLabel.js +28 -28
- package/dist/canvas/components/StageNode/StageEdge.cjs +5 -5
- package/dist/canvas/components/StageNode/StageEdge.js +5 -5
- package/dist/canvas/components/index.cjs +65 -58
- package/dist/canvas/components/index.d.ts +1 -0
- package/dist/canvas/components/index.d.ts.map +1 -1
- package/dist/canvas/components/index.js +1 -0
- package/dist/canvas/styles/reactflow-reset.css +8 -0
- package/dist/canvas/styles/tailwind.canvas.css +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __webpack_require__ = {};
|
|
3
|
+
(()=>{
|
|
4
|
+
__webpack_require__.r = (exports1)=>{
|
|
5
|
+
if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
|
|
6
|
+
value: 'Module'
|
|
7
|
+
});
|
|
8
|
+
Object.defineProperty(exports1, '__esModule', {
|
|
9
|
+
value: true
|
|
10
|
+
});
|
|
11
|
+
};
|
|
12
|
+
})();
|
|
13
|
+
var __webpack_exports__ = {};
|
|
14
|
+
__webpack_require__.r(__webpack_exports__);
|
|
15
|
+
for(var __rspack_i in __webpack_exports__)exports[__rspack_i] = __webpack_exports__[__rspack_i];
|
|
16
|
+
Object.defineProperty(exports, '__esModule', {
|
|
17
|
+
value: true
|
|
18
|
+
});
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
export type AlignmentGuideOrientation = 'vertical' | 'horizontal';
|
|
2
|
+
export type AlignmentGuideKind = 'edge' | 'center';
|
|
3
|
+
export interface AlignmentGuideLine {
|
|
4
|
+
id: string;
|
|
5
|
+
orientation: AlignmentGuideOrientation;
|
|
6
|
+
position: number;
|
|
7
|
+
start: number;
|
|
8
|
+
end: number;
|
|
9
|
+
kind: AlignmentGuideKind;
|
|
10
|
+
matchedNodeIds: string[];
|
|
11
|
+
}
|
|
12
|
+
export interface NodeBounds {
|
|
13
|
+
id: string;
|
|
14
|
+
x1: number;
|
|
15
|
+
y1: number;
|
|
16
|
+
x2: number;
|
|
17
|
+
y2: number;
|
|
18
|
+
cx: number;
|
|
19
|
+
cy: number;
|
|
20
|
+
}
|
|
21
|
+
//# sourceMappingURL=AlignmentGuides.types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AlignmentGuides.types.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/AlignmentGuides/AlignmentGuides.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,yBAAyB,GAAG,UAAU,GAAG,YAAY,CAAC;AAGlE,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,QAAQ,CAAC;AAOnD,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,yBAAyB,CAAC;IACvC,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IAEZ,IAAI,EAAE,kBAAkB,CAAC;IAEzB,cAAc,EAAE,MAAM,EAAE,CAAC;CAC1B;AAED,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;CACZ"}
|
|
File without changes
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __webpack_require__ = {};
|
|
3
|
+
(()=>{
|
|
4
|
+
__webpack_require__.d = (exports1, definition)=>{
|
|
5
|
+
for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: definition[key]
|
|
8
|
+
});
|
|
9
|
+
};
|
|
10
|
+
})();
|
|
11
|
+
(()=>{
|
|
12
|
+
__webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
|
|
13
|
+
})();
|
|
14
|
+
(()=>{
|
|
15
|
+
__webpack_require__.r = (exports1)=>{
|
|
16
|
+
if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
|
|
17
|
+
value: 'Module'
|
|
18
|
+
});
|
|
19
|
+
Object.defineProperty(exports1, '__esModule', {
|
|
20
|
+
value: true
|
|
21
|
+
});
|
|
22
|
+
};
|
|
23
|
+
})();
|
|
24
|
+
var __webpack_exports__ = {};
|
|
25
|
+
__webpack_require__.r(__webpack_exports__);
|
|
26
|
+
__webpack_require__.d(__webpack_exports__, {
|
|
27
|
+
AlignmentGuidesOverlay: ()=>AlignmentGuidesOverlay
|
|
28
|
+
});
|
|
29
|
+
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
|
|
30
|
+
const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
|
|
31
|
+
function AlignmentGuidesOverlay({ guides, draggedBounds }) {
|
|
32
|
+
const { x: viewportX, y: viewportY, zoom } = (0, react_cjs_namespaceObject.useViewport)();
|
|
33
|
+
if (0 === guides.length && !draggedBounds) return null;
|
|
34
|
+
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
|
|
35
|
+
className: "pointer-events-none absolute inset-0 z-40 overflow-hidden",
|
|
36
|
+
children: [
|
|
37
|
+
guides.map((guide)=>{
|
|
38
|
+
const isVertical = 'vertical' === guide.orientation;
|
|
39
|
+
const style = isVertical ? {
|
|
40
|
+
left: guide.position * zoom + viewportX,
|
|
41
|
+
top: guide.start * zoom + viewportY,
|
|
42
|
+
height: (guide.end - guide.start) * zoom
|
|
43
|
+
} : {
|
|
44
|
+
top: guide.position * zoom + viewportY,
|
|
45
|
+
left: guide.start * zoom + viewportX,
|
|
46
|
+
width: (guide.end - guide.start) * zoom
|
|
47
|
+
};
|
|
48
|
+
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
49
|
+
className: isVertical ? 'absolute border-l border-dashed' : 'absolute border-t border-dashed',
|
|
50
|
+
style: {
|
|
51
|
+
...style,
|
|
52
|
+
borderColor: 'var(--canvas-selection-indicator)'
|
|
53
|
+
}
|
|
54
|
+
}, guide.id);
|
|
55
|
+
}),
|
|
56
|
+
draggedBounds && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
57
|
+
className: "absolute rounded-md border border-dashed",
|
|
58
|
+
style: {
|
|
59
|
+
left: draggedBounds.x1 * zoom + viewportX - 8,
|
|
60
|
+
top: draggedBounds.y1 * zoom + viewportY - 8,
|
|
61
|
+
width: (draggedBounds.x2 - draggedBounds.x1) * zoom + 16,
|
|
62
|
+
height: (draggedBounds.y2 - draggedBounds.y1) * zoom + 16,
|
|
63
|
+
borderColor: 'var(--canvas-selection-indicator)'
|
|
64
|
+
}
|
|
65
|
+
})
|
|
66
|
+
]
|
|
67
|
+
});
|
|
68
|
+
}
|
|
69
|
+
exports.AlignmentGuidesOverlay = __webpack_exports__.AlignmentGuidesOverlay;
|
|
70
|
+
for(var __rspack_i in __webpack_exports__)if (-1 === [
|
|
71
|
+
"AlignmentGuidesOverlay"
|
|
72
|
+
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
|
|
73
|
+
Object.defineProperty(exports, '__esModule', {
|
|
74
|
+
value: true
|
|
75
|
+
});
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { AlignmentGuideLine, NodeBounds } from './AlignmentGuides.types';
|
|
2
|
+
export interface AlignmentGuidesOverlayProps {
|
|
3
|
+
guides: AlignmentGuideLine[];
|
|
4
|
+
draggedBounds?: NodeBounds | null;
|
|
5
|
+
}
|
|
6
|
+
export declare function AlignmentGuidesOverlay({ guides, draggedBounds }: AlignmentGuidesOverlayProps): import("react/jsx-runtime").JSX.Element | null;
|
|
7
|
+
//# sourceMappingURL=AlignmentGuidesOverlay.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AlignmentGuidesOverlay.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/AlignmentGuides/AlignmentGuidesOverlay.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE9E,MAAM,WAAW,2BAA2B;IAC1C,MAAM,EAAE,kBAAkB,EAAE,CAAC;IAE7B,aAAa,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;CACnC;AAOD,wBAAgB,sBAAsB,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,EAAE,2BAA2B,kDA6C5F"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useViewport } from "../../xyflow/react.js";
|
|
3
|
+
function AlignmentGuidesOverlay({ guides, draggedBounds }) {
|
|
4
|
+
const { x: viewportX, y: viewportY, zoom } = useViewport();
|
|
5
|
+
if (0 === guides.length && !draggedBounds) return null;
|
|
6
|
+
return /*#__PURE__*/ jsxs("div", {
|
|
7
|
+
className: "pointer-events-none absolute inset-0 z-40 overflow-hidden",
|
|
8
|
+
children: [
|
|
9
|
+
guides.map((guide)=>{
|
|
10
|
+
const isVertical = 'vertical' === guide.orientation;
|
|
11
|
+
const style = isVertical ? {
|
|
12
|
+
left: guide.position * zoom + viewportX,
|
|
13
|
+
top: guide.start * zoom + viewportY,
|
|
14
|
+
height: (guide.end - guide.start) * zoom
|
|
15
|
+
} : {
|
|
16
|
+
top: guide.position * zoom + viewportY,
|
|
17
|
+
left: guide.start * zoom + viewportX,
|
|
18
|
+
width: (guide.end - guide.start) * zoom
|
|
19
|
+
};
|
|
20
|
+
return /*#__PURE__*/ jsx("div", {
|
|
21
|
+
className: isVertical ? 'absolute border-l border-dashed' : 'absolute border-t border-dashed',
|
|
22
|
+
style: {
|
|
23
|
+
...style,
|
|
24
|
+
borderColor: 'var(--canvas-selection-indicator)'
|
|
25
|
+
}
|
|
26
|
+
}, guide.id);
|
|
27
|
+
}),
|
|
28
|
+
draggedBounds && /*#__PURE__*/ jsx("div", {
|
|
29
|
+
className: "absolute rounded-md border border-dashed",
|
|
30
|
+
style: {
|
|
31
|
+
left: draggedBounds.x1 * zoom + viewportX - 8,
|
|
32
|
+
top: draggedBounds.y1 * zoom + viewportY - 8,
|
|
33
|
+
width: (draggedBounds.x2 - draggedBounds.x1) * zoom + 16,
|
|
34
|
+
height: (draggedBounds.y2 - draggedBounds.y1) * zoom + 16,
|
|
35
|
+
borderColor: 'var(--canvas-selection-indicator)'
|
|
36
|
+
}
|
|
37
|
+
})
|
|
38
|
+
]
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
export { AlignmentGuidesOverlay };
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __webpack_modules__ = {
|
|
3
|
+
"./AlignmentGuides.types" (module) {
|
|
4
|
+
module.exports = require("./AlignmentGuides.types.cjs");
|
|
5
|
+
},
|
|
6
|
+
"./AlignmentGuidesOverlay" (module) {
|
|
7
|
+
module.exports = require("./AlignmentGuidesOverlay.cjs");
|
|
8
|
+
},
|
|
9
|
+
"./useAlignmentGuides" (module) {
|
|
10
|
+
module.exports = require("./useAlignmentGuides.cjs");
|
|
11
|
+
}
|
|
12
|
+
};
|
|
13
|
+
var __webpack_module_cache__ = {};
|
|
14
|
+
function __webpack_require__(moduleId) {
|
|
15
|
+
var cachedModule = __webpack_module_cache__[moduleId];
|
|
16
|
+
if (void 0 !== cachedModule) return cachedModule.exports;
|
|
17
|
+
var module = __webpack_module_cache__[moduleId] = {
|
|
18
|
+
exports: {}
|
|
19
|
+
};
|
|
20
|
+
__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
|
|
21
|
+
return module.exports;
|
|
22
|
+
}
|
|
23
|
+
(()=>{
|
|
24
|
+
__webpack_require__.n = (module)=>{
|
|
25
|
+
var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
|
|
26
|
+
__webpack_require__.d(getter, {
|
|
27
|
+
a: getter
|
|
28
|
+
});
|
|
29
|
+
return getter;
|
|
30
|
+
};
|
|
31
|
+
})();
|
|
32
|
+
(()=>{
|
|
33
|
+
__webpack_require__.d = (exports1, definition)=>{
|
|
34
|
+
for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
|
|
35
|
+
enumerable: true,
|
|
36
|
+
get: definition[key]
|
|
37
|
+
});
|
|
38
|
+
};
|
|
39
|
+
})();
|
|
40
|
+
(()=>{
|
|
41
|
+
__webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
|
|
42
|
+
})();
|
|
43
|
+
(()=>{
|
|
44
|
+
__webpack_require__.r = (exports1)=>{
|
|
45
|
+
if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
|
|
46
|
+
value: 'Module'
|
|
47
|
+
});
|
|
48
|
+
Object.defineProperty(exports1, '__esModule', {
|
|
49
|
+
value: true
|
|
50
|
+
});
|
|
51
|
+
};
|
|
52
|
+
})();
|
|
53
|
+
var __webpack_exports__ = {};
|
|
54
|
+
(()=>{
|
|
55
|
+
__webpack_require__.r(__webpack_exports__);
|
|
56
|
+
var _AlignmentGuides_types__rspack_import_0 = __webpack_require__("./AlignmentGuides.types");
|
|
57
|
+
var __rspack_reexport = {};
|
|
58
|
+
for(const __rspack_import_key in _AlignmentGuides_types__rspack_import_0)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_AlignmentGuides_types__rspack_import_0[__rspack_import_key];
|
|
59
|
+
__webpack_require__.d(__webpack_exports__, __rspack_reexport);
|
|
60
|
+
var _AlignmentGuidesOverlay__rspack_import_1 = __webpack_require__("./AlignmentGuidesOverlay");
|
|
61
|
+
var __rspack_reexport = {};
|
|
62
|
+
for(const __rspack_import_key in _AlignmentGuidesOverlay__rspack_import_1)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_AlignmentGuidesOverlay__rspack_import_1[__rspack_import_key];
|
|
63
|
+
__webpack_require__.d(__webpack_exports__, __rspack_reexport);
|
|
64
|
+
var _useAlignmentGuides__rspack_import_2 = __webpack_require__("./useAlignmentGuides");
|
|
65
|
+
var __rspack_reexport = {};
|
|
66
|
+
for(const __rspack_import_key in _useAlignmentGuides__rspack_import_2)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_useAlignmentGuides__rspack_import_2[__rspack_import_key];
|
|
67
|
+
__webpack_require__.d(__webpack_exports__, __rspack_reexport);
|
|
68
|
+
})();
|
|
69
|
+
for(var __rspack_i in __webpack_exports__)exports[__rspack_i] = __webpack_exports__[__rspack_i];
|
|
70
|
+
Object.defineProperty(exports, '__esModule', {
|
|
71
|
+
value: true
|
|
72
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/AlignmentGuides/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC"}
|
|
@@ -0,0 +1,256 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __webpack_require__ = {};
|
|
3
|
+
(()=>{
|
|
4
|
+
__webpack_require__.d = (exports1, definition)=>{
|
|
5
|
+
for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: definition[key]
|
|
8
|
+
});
|
|
9
|
+
};
|
|
10
|
+
})();
|
|
11
|
+
(()=>{
|
|
12
|
+
__webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
|
|
13
|
+
})();
|
|
14
|
+
(()=>{
|
|
15
|
+
__webpack_require__.r = (exports1)=>{
|
|
16
|
+
if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
|
|
17
|
+
value: 'Module'
|
|
18
|
+
});
|
|
19
|
+
Object.defineProperty(exports1, '__esModule', {
|
|
20
|
+
value: true
|
|
21
|
+
});
|
|
22
|
+
};
|
|
23
|
+
})();
|
|
24
|
+
var __webpack_exports__ = {};
|
|
25
|
+
__webpack_require__.r(__webpack_exports__);
|
|
26
|
+
__webpack_require__.d(__webpack_exports__, {
|
|
27
|
+
createAlignmentPositionUpdates: ()=>createAlignmentPositionUpdates,
|
|
28
|
+
computeAlignmentResult: ()=>computeAlignmentResult,
|
|
29
|
+
toBounds: ()=>toBounds,
|
|
30
|
+
toGroupBounds: ()=>toGroupBounds,
|
|
31
|
+
useAlignmentGuides: ()=>useAlignmentGuides,
|
|
32
|
+
computeAlignmentSnapDelta: ()=>computeAlignmentSnapDelta,
|
|
33
|
+
computeAlignmentGuides: ()=>computeAlignmentGuides
|
|
34
|
+
});
|
|
35
|
+
const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
|
|
36
|
+
const external_react_namespaceObject = require("react");
|
|
37
|
+
const external_constants_cjs_namespaceObject = require("../../constants.cjs");
|
|
38
|
+
const NodeUtils_cjs_namespaceObject = require("../../utils/NodeUtils.cjs");
|
|
39
|
+
function toBounds(node, allNodes = [
|
|
40
|
+
node
|
|
41
|
+
]) {
|
|
42
|
+
const width = node.measured?.width ?? node.width ?? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE;
|
|
43
|
+
const height = node.measured?.height ?? node.height ?? external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE;
|
|
44
|
+
const absolutePosition = node.internals?.positionAbsolute ?? (node.parentId ? (0, NodeUtils_cjs_namespaceObject.getAbsolutePosition)(node, allNodes) : node.position);
|
|
45
|
+
const x1 = absolutePosition.x;
|
|
46
|
+
const y1 = absolutePosition.y;
|
|
47
|
+
const x2 = x1 + width;
|
|
48
|
+
const y2 = y1 + height;
|
|
49
|
+
return {
|
|
50
|
+
id: node.id,
|
|
51
|
+
x1,
|
|
52
|
+
y1,
|
|
53
|
+
x2,
|
|
54
|
+
y2,
|
|
55
|
+
cx: (x1 + x2) / 2,
|
|
56
|
+
cy: (y1 + y2) / 2
|
|
57
|
+
};
|
|
58
|
+
}
|
|
59
|
+
function getAxisAnchors(bounds, orientation) {
|
|
60
|
+
return 'vertical' === orientation ? [
|
|
61
|
+
bounds.x1,
|
|
62
|
+
bounds.cx,
|
|
63
|
+
bounds.x2
|
|
64
|
+
] : [
|
|
65
|
+
bounds.y1,
|
|
66
|
+
bounds.cy,
|
|
67
|
+
bounds.y2
|
|
68
|
+
];
|
|
69
|
+
}
|
|
70
|
+
function resolveAxisCandidate(dragged, others, threshold, orientation) {
|
|
71
|
+
const draggedAnchors = getAxisAnchors(dragged, orientation);
|
|
72
|
+
const candidates = [];
|
|
73
|
+
for (const other of others){
|
|
74
|
+
const otherAnchors = getAxisAnchors(other, orientation);
|
|
75
|
+
candidates.push({
|
|
76
|
+
delta: otherAnchors[1] - draggedAnchors[1],
|
|
77
|
+
kind: 'center',
|
|
78
|
+
matchedNodeId: other.id,
|
|
79
|
+
position: otherAnchors[1],
|
|
80
|
+
priority: 0
|
|
81
|
+
});
|
|
82
|
+
for (const draggedIndex of [
|
|
83
|
+
0,
|
|
84
|
+
2
|
|
85
|
+
])for (const otherIndex of [
|
|
86
|
+
0,
|
|
87
|
+
2
|
|
88
|
+
])candidates.push({
|
|
89
|
+
delta: otherAnchors[otherIndex] - draggedAnchors[draggedIndex],
|
|
90
|
+
kind: 'edge',
|
|
91
|
+
matchedNodeId: other.id,
|
|
92
|
+
position: otherAnchors[otherIndex],
|
|
93
|
+
priority: draggedIndex === otherIndex ? 1 : 2
|
|
94
|
+
});
|
|
95
|
+
}
|
|
96
|
+
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];
|
|
97
|
+
}
|
|
98
|
+
function buildGuide(candidate, dragged, others, orientation) {
|
|
99
|
+
const matchingOthers = others.filter((other)=>{
|
|
100
|
+
const anchors = getAxisAnchors(other, orientation);
|
|
101
|
+
const candidateAnchors = 'center' === candidate.kind ? [
|
|
102
|
+
anchors[1]
|
|
103
|
+
] : [
|
|
104
|
+
anchors[0],
|
|
105
|
+
anchors[2]
|
|
106
|
+
];
|
|
107
|
+
return candidateAnchors.some((anchor)=>Math.abs(anchor - candidate.position) < 0.5);
|
|
108
|
+
});
|
|
109
|
+
const ranges = [
|
|
110
|
+
dragged,
|
|
111
|
+
...matchingOthers
|
|
112
|
+
].map((bounds)=>'vertical' === orientation ? [
|
|
113
|
+
bounds.y1,
|
|
114
|
+
bounds.y2
|
|
115
|
+
] : [
|
|
116
|
+
bounds.x1,
|
|
117
|
+
bounds.x2
|
|
118
|
+
]);
|
|
119
|
+
return {
|
|
120
|
+
id: `${orientation}-${candidate.position}`,
|
|
121
|
+
orientation,
|
|
122
|
+
position: candidate.position,
|
|
123
|
+
start: Math.min(...ranges.map(([rangeStart])=>rangeStart)),
|
|
124
|
+
end: Math.max(...ranges.map(([, rangeEnd])=>rangeEnd)),
|
|
125
|
+
kind: candidate.kind,
|
|
126
|
+
matchedNodeIds: matchingOthers.map(({ id })=>id)
|
|
127
|
+
};
|
|
128
|
+
}
|
|
129
|
+
function computeAlignmentResult(dragged, others, threshold) {
|
|
130
|
+
const vertical = resolveAxisCandidate(dragged, others, threshold, 'vertical');
|
|
131
|
+
const horizontal = resolveAxisCandidate(dragged, others, threshold, 'horizontal');
|
|
132
|
+
const delta = {
|
|
133
|
+
dx: vertical?.delta ?? 0,
|
|
134
|
+
dy: horizontal?.delta ?? 0
|
|
135
|
+
};
|
|
136
|
+
const snapped = {
|
|
137
|
+
...dragged,
|
|
138
|
+
x1: dragged.x1 + delta.dx,
|
|
139
|
+
x2: dragged.x2 + delta.dx,
|
|
140
|
+
cx: dragged.cx + delta.dx,
|
|
141
|
+
y1: dragged.y1 + delta.dy,
|
|
142
|
+
y2: dragged.y2 + delta.dy,
|
|
143
|
+
cy: dragged.cy + delta.dy
|
|
144
|
+
};
|
|
145
|
+
const guides = [
|
|
146
|
+
...vertical ? [
|
|
147
|
+
buildGuide(vertical, snapped, others, 'vertical')
|
|
148
|
+
] : [],
|
|
149
|
+
...horizontal ? [
|
|
150
|
+
buildGuide(horizontal, snapped, others, 'horizontal')
|
|
151
|
+
] : []
|
|
152
|
+
];
|
|
153
|
+
return {
|
|
154
|
+
guides,
|
|
155
|
+
delta
|
|
156
|
+
};
|
|
157
|
+
}
|
|
158
|
+
function computeAlignmentGuides(dragged, others, threshold) {
|
|
159
|
+
return computeAlignmentResult(dragged, others, threshold).guides;
|
|
160
|
+
}
|
|
161
|
+
function computeAlignmentSnapDelta(dragged, others, threshold) {
|
|
162
|
+
return computeAlignmentResult(dragged, others, threshold).delta;
|
|
163
|
+
}
|
|
164
|
+
function toGroupBounds(nodes, allNodes = nodes) {
|
|
165
|
+
const bounds = nodes.map((node)=>toBounds(node, allNodes));
|
|
166
|
+
const x1 = Math.min(...bounds.map((item)=>item.x1));
|
|
167
|
+
const y1 = Math.min(...bounds.map((item)=>item.y1));
|
|
168
|
+
const x2 = Math.max(...bounds.map((item)=>item.x2));
|
|
169
|
+
const y2 = Math.max(...bounds.map((item)=>item.y2));
|
|
170
|
+
return {
|
|
171
|
+
id: bounds.map(({ id })=>id).join(','),
|
|
172
|
+
x1,
|
|
173
|
+
y1,
|
|
174
|
+
x2,
|
|
175
|
+
y2,
|
|
176
|
+
cx: (x1 + x2) / 2,
|
|
177
|
+
cy: (y1 + y2) / 2
|
|
178
|
+
};
|
|
179
|
+
}
|
|
180
|
+
function createAlignmentPositionUpdates(nodes, delta) {
|
|
181
|
+
return nodes.map(({ id, position })=>({
|
|
182
|
+
id,
|
|
183
|
+
position: {
|
|
184
|
+
x: position.x + delta.dx,
|
|
185
|
+
y: position.y + delta.dy
|
|
186
|
+
}
|
|
187
|
+
}));
|
|
188
|
+
}
|
|
189
|
+
function useAlignmentGuides(nodes, options = {}) {
|
|
190
|
+
const { thresholdPx = 8, onSnap } = options;
|
|
191
|
+
const { zoom } = (0, react_cjs_namespaceObject.useViewport)();
|
|
192
|
+
const [guides, setGuides] = (0, external_react_namespaceObject.useState)([]);
|
|
193
|
+
const [draggedBounds, setDraggedBounds] = (0, external_react_namespaceObject.useState)(null);
|
|
194
|
+
const resolveDrag = (0, external_react_namespaceObject.useCallback)((draggedNode, draggedNodes, showGuides)=>{
|
|
195
|
+
const activeNodes = draggedNodes.length > 0 ? draggedNodes : [
|
|
196
|
+
draggedNode
|
|
197
|
+
];
|
|
198
|
+
const activeIds = new Set(activeNodes.map(({ id })=>id));
|
|
199
|
+
const others = nodes.filter(({ id })=>!activeIds.has(id)).map((node)=>toBounds(node, nodes));
|
|
200
|
+
const activeBounds = toGroupBounds(activeNodes, nodes);
|
|
201
|
+
const result = computeAlignmentResult(activeBounds, others, thresholdPx / zoom);
|
|
202
|
+
setDraggedBounds(showGuides ? {
|
|
203
|
+
...activeBounds,
|
|
204
|
+
x1: activeBounds.x1 + result.delta.dx,
|
|
205
|
+
x2: activeBounds.x2 + result.delta.dx,
|
|
206
|
+
cx: activeBounds.cx + result.delta.dx,
|
|
207
|
+
y1: activeBounds.y1 + result.delta.dy,
|
|
208
|
+
y2: activeBounds.y2 + result.delta.dy,
|
|
209
|
+
cy: activeBounds.cy + result.delta.dy
|
|
210
|
+
} : null);
|
|
211
|
+
setGuides(showGuides ? result.guides : []);
|
|
212
|
+
if (!onSnap || 0 === result.delta.dx && 0 === result.delta.dy) return;
|
|
213
|
+
onSnap(createAlignmentPositionUpdates(activeNodes, result.delta));
|
|
214
|
+
}, [
|
|
215
|
+
nodes,
|
|
216
|
+
onSnap,
|
|
217
|
+
thresholdPx,
|
|
218
|
+
zoom
|
|
219
|
+
]);
|
|
220
|
+
const onNodeDrag = (0, external_react_namespaceObject.useCallback)((_event, draggedNode, draggedNodes)=>resolveDrag(draggedNode, draggedNodes, true), [
|
|
221
|
+
resolveDrag
|
|
222
|
+
]);
|
|
223
|
+
const onNodeDragStop = (0, external_react_namespaceObject.useCallback)((_event, draggedNode, draggedNodes)=>resolveDrag(draggedNode, draggedNodes, false), [
|
|
224
|
+
resolveDrag
|
|
225
|
+
]);
|
|
226
|
+
return (0, external_react_namespaceObject.useMemo)(()=>({
|
|
227
|
+
guides,
|
|
228
|
+
draggedBounds,
|
|
229
|
+
onNodeDrag,
|
|
230
|
+
onNodeDragStop
|
|
231
|
+
}), [
|
|
232
|
+
guides,
|
|
233
|
+
draggedBounds,
|
|
234
|
+
onNodeDrag,
|
|
235
|
+
onNodeDragStop
|
|
236
|
+
]);
|
|
237
|
+
}
|
|
238
|
+
exports.computeAlignmentGuides = __webpack_exports__.computeAlignmentGuides;
|
|
239
|
+
exports.computeAlignmentResult = __webpack_exports__.computeAlignmentResult;
|
|
240
|
+
exports.computeAlignmentSnapDelta = __webpack_exports__.computeAlignmentSnapDelta;
|
|
241
|
+
exports.createAlignmentPositionUpdates = __webpack_exports__.createAlignmentPositionUpdates;
|
|
242
|
+
exports.toBounds = __webpack_exports__.toBounds;
|
|
243
|
+
exports.toGroupBounds = __webpack_exports__.toGroupBounds;
|
|
244
|
+
exports.useAlignmentGuides = __webpack_exports__.useAlignmentGuides;
|
|
245
|
+
for(var __rspack_i in __webpack_exports__)if (-1 === [
|
|
246
|
+
"computeAlignmentGuides",
|
|
247
|
+
"computeAlignmentResult",
|
|
248
|
+
"computeAlignmentSnapDelta",
|
|
249
|
+
"createAlignmentPositionUpdates",
|
|
250
|
+
"toBounds",
|
|
251
|
+
"toGroupBounds",
|
|
252
|
+
"useAlignmentGuides"
|
|
253
|
+
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
|
|
254
|
+
Object.defineProperty(exports, '__esModule', {
|
|
255
|
+
value: true
|
|
256
|
+
});
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import type { Node, OnNodeDrag } from '../../xyflow/react.ts';
|
|
2
|
+
import type { AlignmentGuideLine, NodeBounds } from './AlignmentGuides.types';
|
|
3
|
+
export declare function toBounds(node: Node, allNodes?: Node[]): NodeBounds;
|
|
4
|
+
export interface AlignmentSnapDelta {
|
|
5
|
+
dx: number;
|
|
6
|
+
dy: number;
|
|
7
|
+
}
|
|
8
|
+
export interface AlignmentResult {
|
|
9
|
+
guides: AlignmentGuideLine[];
|
|
10
|
+
delta: AlignmentSnapDelta;
|
|
11
|
+
}
|
|
12
|
+
export declare function computeAlignmentResult(dragged: NodeBounds, others: NodeBounds[], threshold: number): AlignmentResult;
|
|
13
|
+
export declare function computeAlignmentGuides(dragged: NodeBounds, others: NodeBounds[], threshold: number): AlignmentGuideLine[];
|
|
14
|
+
export declare function computeAlignmentSnapDelta(dragged: NodeBounds, others: NodeBounds[], threshold: number): AlignmentSnapDelta;
|
|
15
|
+
export declare function toGroupBounds(nodes: Node[], allNodes?: Node[]): NodeBounds;
|
|
16
|
+
export interface UseAlignmentGuidesOptions {
|
|
17
|
+
thresholdPx?: number;
|
|
18
|
+
onSnap?: (updates: AlignmentPositionUpdate[]) => void;
|
|
19
|
+
}
|
|
20
|
+
export interface AlignmentPositionUpdate {
|
|
21
|
+
id: string;
|
|
22
|
+
position: {
|
|
23
|
+
x: number;
|
|
24
|
+
y: number;
|
|
25
|
+
};
|
|
26
|
+
}
|
|
27
|
+
export declare function createAlignmentPositionUpdates(nodes: Node[], delta: AlignmentSnapDelta): AlignmentPositionUpdate[];
|
|
28
|
+
export interface UseAlignmentGuidesReturn {
|
|
29
|
+
guides: AlignmentGuideLine[];
|
|
30
|
+
draggedBounds: NodeBounds | null;
|
|
31
|
+
onNodeDrag: OnNodeDrag;
|
|
32
|
+
onNodeDragStop: OnNodeDrag;
|
|
33
|
+
}
|
|
34
|
+
export declare function useAlignmentGuides(nodes: Node[], options?: UseAlignmentGuidesOptions): UseAlignmentGuidesReturn;
|
|
35
|
+
//# sourceMappingURL=useAlignmentGuides.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useAlignmentGuides.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/AlignmentGuides/useAlignmentGuides.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAC;AAKjF,OAAO,KAAK,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAM9E,wBAAgB,QAAQ,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,GAAE,IAAI,EAAW,GAAG,UAAU,CAW1E;AAED,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,kBAAkB,EAAE,CAAC;IAC7B,KAAK,EAAE,kBAAkB,CAAC;CAC3B;AA+FD,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,UAAU,EACnB,MAAM,EAAE,UAAU,EAAE,EACpB,SAAS,EAAE,MAAM,GAChB,eAAe,CAmBjB;AAED,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,UAAU,EACnB,MAAM,EAAE,UAAU,EAAE,EACpB,SAAS,EAAE,MAAM,GAChB,kBAAkB,EAAE,CAEtB;AAED,wBAAgB,yBAAyB,CACvC,OAAO,EAAE,UAAU,EACnB,MAAM,EAAE,UAAU,EAAE,EACpB,SAAS,EAAE,MAAM,GAChB,kBAAkB,CAEpB;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,QAAQ,GAAE,IAAI,EAAU,GAAG,UAAU,CAejF;AAED,MAAM,WAAW,yBAAyB;IAOxC,WAAW,CAAC,EAAE,MAAM,CAAC;IAMrB,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,uBAAuB,EAAE,KAAK,IAAI,CAAC;CACvD;AAED,MAAM,WAAW,uBAAuB;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACpC;AAED,wBAAgB,8BAA8B,CAC5C,KAAK,EAAE,IAAI,EAAE,EACb,KAAK,EAAE,kBAAkB,GACxB,uBAAuB,EAAE,CAK3B;AAED,MAAM,WAAW,wBAAwB;IACvC,MAAM,EAAE,kBAAkB,EAAE,CAAC;IAC7B,aAAa,EAAE,UAAU,GAAG,IAAI,CAAC;IACjC,UAAU,EAAE,UAAU,CAAC;IACvB,cAAc,EAAE,UAAU,CAAC;CAC5B;AAUD,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,IAAI,EAAE,EACb,OAAO,GAAE,yBAA8B,GACtC,wBAAwB,CAkD1B"}
|