@uipath/apollo-react 3.44.0 → 3.44.2-pr255.af80ea0

package/dist/canvas/hooks/useCrossStageTaskDrag.cjs

@@ -0,0 +1,346 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    useCrossStageTaskDrag: ()=>useCrossStageTaskDrag
+});
+const react_namespaceObject = require("@xyflow/react");
+const external_react_namespaceObject = require("react");
+const taskReorderUtils_cjs_namespaceObject = require("../components/TaskNode/taskReorderUtils.cjs");
+const useTaskPositions_cjs_namespaceObject = require("../components/TaskNode/useTaskPositions.cjs");
+const external_calculateTaskDropPosition_cjs_namespaceObject = require("./calculateTaskDropPosition.cjs");
+function isPointInStage(x, y, stageX, stageY, stageWidth, stageHeight) {
+    return x >= stageX && x <= stageX + stageWidth && y >= stageY && y <= stageY + stageHeight;
+}
+function useCrossStageTaskDrag(callbacks = {}) {
+    const { setNodes, getNodes } = (0, react_namespaceObject.useReactFlow)();
+    const { onTaskMove, onTaskCopy, onTaskReorder } = callbacks;
+    const [dragState, setDragState] = (0, external_react_namespaceObject.useState)({
+        isDragging: false,
+        taskId: null,
+        sourceStageId: null,
+        targetStageId: null,
+        isCopyMode: false,
+        dropPosition: null
+    });
+    const isCopyModeRef = (0, external_react_namespaceObject.useRef)(false);
+    const isDraggingRef = (0, external_react_namespaceObject.useRef)(false);
+    const draggedTaskIdRef = (0, external_react_namespaceObject.useRef)(null);
+    const sourceStageIdRef = (0, external_react_namespaceObject.useRef)(null);
+    const currentDropPositionRef = (0, external_react_namespaceObject.useRef)(null);
+    const currentTargetStageRef = (0, external_react_namespaceObject.useRef)(null);
+    const lastDropPositionRef = (0, external_react_namespaceObject.useRef)(null);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (!dragState.isDragging || !dragState.dropPosition || !dragState.taskId || !dragState.targetStageId) {
+            lastDropPositionRef.current = null;
+            return;
+        }
+        const { groupIndex, taskIndex, isParallel } = dragState.dropPosition;
+        const lastPos = lastDropPositionRef.current;
+        if (lastPos && lastPos.groupIndex === groupIndex && lastPos.taskIndex === taskIndex && lastPos.isParallel === isParallel && lastPos.targetStageId === dragState.targetStageId) return;
+        lastDropPositionRef.current = {
+            groupIndex,
+            taskIndex,
+            isParallel,
+            targetStageId: dragState.targetStageId
+        };
+        const allNodes = getNodes();
+        const targetStage = allNodes.find((n)=>n.id === dragState.targetStageId);
+        if (!targetStage) return;
+        const targetStageData = targetStage.data;
+        const stageDetails = targetStageData?.stageDetails;
+        const taskIds = stageDetails?.taskIds || [];
+        const filteredTaskIds = (0, taskReorderUtils_cjs_namespaceObject.removeTaskFromTaskIds)(taskIds, dragState.taskId);
+        const placeholderId = '__placeholder__';
+        const taskIdsWithPlaceholder = (0, taskReorderUtils_cjs_namespaceObject.insertTaskAtPosition)(filteredTaskIds, placeholderId, {
+            groupIndex,
+            taskIndex,
+            isParallel
+        });
+        const stageWidth = targetStage.style?.width || 304;
+        setNodes((currentNodes)=>{
+            const positions = (0, useTaskPositions_cjs_namespaceObject.calculateTaskPositions)(taskIdsWithPlaceholder, stageWidth, currentNodes);
+            const getOriginalPositions = (stageId)=>{
+                const stage = currentNodes.find((s)=>s.id === stageId);
+                if (!stage) return null;
+                const stageData = stage.data;
+                const details = stageData?.stageDetails;
+                const stageTaskIds = details?.taskIds || [];
+                const filteredIds = dragState.taskId ? (0, taskReorderUtils_cjs_namespaceObject.removeTaskFromTaskIds)(stageTaskIds, dragState.taskId) : stageTaskIds;
+                const width = stage.style?.width || 304;
+                return (0, useTaskPositions_cjs_namespaceObject.calculateTaskPositions)(filteredIds, width, currentNodes);
+            };
+            let updatedNodes = currentNodes.map((n)=>{
+                if ('task' === n.type && n.id !== dragState.taskId && n.parentId === dragState.targetStageId) {
+                    const pos = positions.get(n.id);
+                    if (pos) return {
+                        ...n,
+                        position: {
+                            x: pos.x,
+                            y: pos.y
+                        }
+                    };
+                }
+                if ('task' === n.type && n.id !== dragState.taskId && dragState.sourceStageId && dragState.sourceStageId !== dragState.targetStageId && n.parentId === dragState.sourceStageId) {
+                    const sourcePositions = getOriginalPositions(dragState.sourceStageId);
+                    if (sourcePositions) {
+                        const pos = sourcePositions.get(n.id);
+                        if (pos) return {
+                            ...n,
+                            position: {
+                                x: pos.x,
+                                y: pos.y
+                            }
+                        };
+                    }
+                }
+                if ('task' === n.type && n.id !== dragState.taskId && n.parentId !== dragState.targetStageId && n.parentId !== dragState.sourceStageId) {
+                    const otherPositions = getOriginalPositions(n.parentId);
+                    if (otherPositions) {
+                        const pos = otherPositions.get(n.id);
+                        if (pos) return {
+                            ...n,
+                            position: {
+                                x: pos.x,
+                                y: pos.y
+                            }
+                        };
+                    }
+                }
+                return n;
+            });
+            updatedNodes = updatedNodes.filter((n)=>'__placeholder__' !== n.id);
+            const placeholderPos = positions.get(placeholderId);
+            if (placeholderPos && dragState.targetStageId) updatedNodes.push({
+                id: '__placeholder__',
+                type: 'placeholder',
+                parentId: dragState.targetStageId,
+                extent: 'parent',
+                position: {
+                    x: placeholderPos.x,
+                    y: placeholderPos.y
+                },
+                width: placeholderPos.width,
+                data: {
+                    isParallel
+                },
+                draggable: false,
+                selectable: false,
+                focusable: false
+            });
+            return updatedNodes;
+        });
+    }, [
+        dragState,
+        setNodes,
+        getNodes
+    ]);
+    const handleKeyDown = (0, external_react_namespaceObject.useCallback)((e)=>{
+        if (e.altKey || e.metaKey) {
+            isCopyModeRef.current = true;
+            setDragState((prev)=>({
+                    ...prev,
+                    isCopyMode: true
+                }));
+        }
+    }, []);
+    const handleKeyUp = (0, external_react_namespaceObject.useCallback)((e)=>{
+        if (!e.altKey && !e.metaKey) {
+            isCopyModeRef.current = false;
+            setDragState((prev)=>({
+                    ...prev,
+                    isCopyMode: false
+                }));
+        }
+    }, []);
+    const onNodeDragStart = (0, external_react_namespaceObject.useCallback)((_event, node, _nodes)=>{
+        if ('task' !== node.type) return;
+        const sourceStageId = node.parentId;
+        if (!sourceStageId) return;
+        isDraggingRef.current = true;
+        draggedTaskIdRef.current = node.id;
+        sourceStageIdRef.current = sourceStageId;
+        currentTargetStageRef.current = sourceStageId;
+        setDragState({
+            isDragging: true,
+            taskId: node.id,
+            sourceStageId,
+            targetStageId: sourceStageId,
+            isCopyMode: isCopyModeRef.current,
+            dropPosition: null
+        });
+        window.addEventListener('keydown', handleKeyDown);
+        window.addEventListener('keyup', handleKeyUp);
+    }, [
+        handleKeyDown,
+        handleKeyUp
+    ]);
+    const onNodeDrag = (0, external_react_namespaceObject.useCallback)((_event, node, _nodes)=>{
+        if ('task' !== node.type || !dragState.isDragging) return;
+        const allNodes = getNodes();
+        const nodeWidth = node.width || useTaskPositions_cjs_namespaceObject.DEFAULT_TASK_POSITION_CONFIG.taskHeight;
+        const nodeHeight = node.measured?.height || useTaskPositions_cjs_namespaceObject.DEFAULT_TASK_POSITION_CONFIG.taskHeight;
+        const parentStage = allNodes.find((n)=>n.id === node.parentId);
+        const absoluteX = (parentStage?.position.x || 0) + node.position.x;
+        const absoluteY = (parentStage?.position.y || 0) + node.position.y;
+        const nodeCenterX = absoluteX + nodeWidth / 2;
+        const nodeCenterY = absoluteY + nodeHeight / 2;
+        const stageNodes = allNodes.filter((n)=>{
+            const nodeType = n.data?.nodeType;
+            return 'stage' === n.type || 'stageV2' === n.type || 'string' == typeof nodeType && nodeType.includes('Stage');
+        });
+        let targetStage;
+        for (const stage of stageNodes){
+            const stageWidth = stage.style?.width || stage.width || 304;
+            const stageHeight = stage.style?.height || stage.measured?.height || 200;
+            if (isPointInStage(nodeCenterX, nodeCenterY, stage.position.x, stage.position.y, stageWidth, stageHeight)) {
+                targetStage = stage;
+                break;
+            }
+        }
+        if (targetStage) {
+            const targetStageData = targetStage.data;
+            const stageDetails = targetStageData?.stageDetails;
+            const taskIds = stageDetails?.taskIds || [];
+            const stageWidth = targetStage.style?.width || 304;
+            const relativeX = absoluteX - targetStage.position.x;
+            const relativeY = absoluteY - targetStage.position.y;
+            const dropPos = (0, external_calculateTaskDropPosition_cjs_namespaceObject.calculateDropPosition)(relativeY, nodeHeight, relativeX, nodeWidth, stageWidth, taskIds, node.id);
+            const filteredTaskIds = taskIds.map((g)=>g.filter((id)=>id !== node.id)).filter((g)=>g.length > 0);
+            const { groupIndex, taskIndex } = (0, external_calculateTaskDropPosition_cjs_namespaceObject.convertToGroupPosition)(dropPos.index, dropPos.isParallel, filteredTaskIds, dropPos.draggedYCenter, taskIds);
+            currentDropPositionRef.current = {
+                groupIndex,
+                taskIndex,
+                isParallel: dropPos.isParallel
+            };
+            currentTargetStageRef.current = targetStage.id;
+            setDragState((prev)=>({
+                    ...prev,
+                    targetStageId: targetStage.id,
+                    dropPosition: {
+                        groupIndex,
+                        taskIndex,
+                        isParallel: dropPos.isParallel
+                    }
+                }));
+        }
+    }, [
+        dragState.isDragging,
+        getNodes
+    ]);
+    const onNodeDragStop = (0, external_react_namespaceObject.useCallback)((_event, node, _nodes)=>{
+        if ('task' !== node.type || !isDraggingRef.current) return;
+        window.removeEventListener('keydown', handleKeyDown);
+        window.removeEventListener('keyup', handleKeyUp);
+        const taskId = draggedTaskIdRef.current;
+        const sourceStageId = sourceStageIdRef.current;
+        const isCopyMode = isCopyModeRef.current;
+        const dropPosition = currentDropPositionRef.current;
+        const targetStageId = currentTargetStageRef.current;
+        if (taskId && sourceStageId && targetStageId && dropPosition) {
+            const isCrossStage = sourceStageId !== targetStageId;
+            if (isCrossStage) if (isCopyMode) {
+                const newTaskId = `task-${crypto.randomUUID()}`;
+                onTaskCopy?.({
+                    taskId,
+                    newTaskId,
+                    sourceStageId,
+                    targetStageId,
+                    position: dropPosition
+                });
+            } else onTaskMove?.({
+                taskId,
+                sourceStageId,
+                targetStageId,
+                position: dropPosition
+            });
+            else onTaskReorder?.({
+                taskId,
+                stageId: sourceStageId,
+                position: dropPosition
+            });
+        }
+        isDraggingRef.current = false;
+        draggedTaskIdRef.current = null;
+        sourceStageIdRef.current = null;
+        currentDropPositionRef.current = null;
+        currentTargetStageRef.current = null;
+        setNodes((nodes)=>{
+            const filteredNodes = nodes.filter((n)=>'__placeholder__' !== n.id);
+            const draggedNode = filteredNodes.find((n)=>n.id === taskId);
+            if (!draggedNode || !draggedNode.parentId) return filteredNodes;
+            const parentStage = filteredNodes.find((n)=>n.id === draggedNode.parentId);
+            if (!parentStage) return filteredNodes;
+            const stageData = parentStage.data;
+            const stageDetails = stageData?.stageDetails;
+            const stageTaskIds = stageDetails?.taskIds || [];
+            const stageWidth = parentStage.style?.width || 304;
+            const positions = (0, useTaskPositions_cjs_namespaceObject.calculateTaskPositions)(stageTaskIds, stageWidth, filteredNodes);
+            return filteredNodes.map((n)=>{
+                if ('task' === n.type && n.parentId === draggedNode.parentId) {
+                    const pos = positions.get(n.id);
+                    if (pos) return {
+                        ...n,
+                        position: {
+                            x: pos.x,
+                            y: pos.y
+                        }
+                    };
+                }
+                return n;
+            });
+        });
+        setDragState({
+            isDragging: false,
+            taskId: null,
+            sourceStageId: null,
+            targetStageId: null,
+            isCopyMode: false,
+            dropPosition: null
+        });
+    }, [
+        handleKeyDown,
+        handleKeyUp,
+        onTaskCopy,
+        onTaskMove,
+        onTaskReorder,
+        setNodes
+    ]);
+    return {
+        dragState,
+        handlers: {
+            onNodeDragStart,
+            onNodeDrag,
+            onNodeDragStop
+        }
+    };
+}
+exports.useCrossStageTaskDrag = __webpack_exports__.useCrossStageTaskDrag;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "useCrossStageTaskDrag"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/canvas/hooks/useCrossStageTaskDrag.d.ts

@@ -0,0 +1,44 @@
+import { type Node } from '@xyflow/react';
+type OnNodeDrag = (event: React.MouseEvent, node: Node, nodes: Node[]) => void;
+export interface CrossStageDragState {
+    isDragging: boolean;
+    taskId: string | null;
+    sourceStageId: string | null;
+    targetStageId: string | null;
+    isCopyMode: boolean;
+    dropPosition: DropPosition | null;
+}
+export interface DropPosition {
+    groupIndex: number;
+    taskIndex: number;
+    isParallel: boolean;
+}
+export interface TaskMoveParams {
+    taskId: string;
+    sourceStageId: string;
+    targetStageId: string;
+    position: DropPosition;
+}
+export interface TaskCopyParams extends TaskMoveParams {
+    newTaskId: string;
+}
+export interface TaskReorderParams {
+    taskId: string;
+    stageId: string;
+    position: DropPosition;
+}
+export interface CrossStageTaskCallbacks {
+    onTaskMove?: (params: TaskMoveParams) => void;
+    onTaskCopy?: (params: TaskCopyParams) => void;
+    onTaskReorder?: (params: TaskReorderParams) => void;
+}
+export declare function useCrossStageTaskDrag(callbacks?: CrossStageTaskCallbacks): {
+    dragState: CrossStageDragState;
+    handlers: {
+        onNodeDragStart: OnNodeDrag;
+        onNodeDrag: OnNodeDrag;
+        onNodeDragStop: OnNodeDrag;
+    };
+};
+export {};
+//# sourceMappingURL=useCrossStageTaskDrag.d.ts.map

package/dist/canvas/hooks/useCrossStageTaskDrag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCrossStageTaskDrag.d.ts","sourceRoot":"","sources":["../../../src/canvas/hooks/useCrossStageTaskDrag.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,KAAK,IAAI,EAAgB,MAAM,eAAe,CAAC;AAexD,KAAK,UAAU,GAAG,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;AAK/E,MAAM,WAAW,mBAAmB;IAElC,UAAU,EAAE,OAAO,CAAC;IAEpB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAEtB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAE7B,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAE7B,UAAU,EAAE,OAAO,CAAC;IAEpB,YAAY,EAAE,YAAY,GAAG,IAAI,CAAC;CACnC;AAKD,MAAM,WAAW,YAAY;IAE3B,UAAU,EAAE,MAAM,CAAC;IAEnB,SAAS,EAAE,MAAM,CAAC;IAElB,UAAU,EAAE,OAAO,CAAC;CACrB;AAKD,MAAM,WAAW,cAAc;IAE7B,MAAM,EAAE,MAAM,CAAC;IAEf,aAAa,EAAE,MAAM,CAAC;IAEtB,aAAa,EAAE,MAAM,CAAC;IAEtB,QAAQ,EAAE,YAAY,CAAC;CACxB;AAED,MAAM,WAAW,cAAe,SAAQ,cAAc;IAEpD,SAAS,EAAE,MAAM,CAAC;CACnB;AAKD,MAAM,WAAW,iBAAiB;IAEhC,MAAM,EAAE,MAAM,CAAC;IAEf,OAAO,EAAE,MAAM,CAAC;IAEhB,QAAQ,EAAE,YAAY,CAAC;CACxB;AAKD,MAAM,WAAW,uBAAuB;IAEtC,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;IAE9C,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;IAE9C,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;CACrD;AAoBD,wBAAgB,qBAAqB,CAAC,SAAS,GAAE,uBAA4B;;;;;;;EA2d5E"}