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

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

@@ -0,0 +1,72 @@
+import { jsx } from "react/jsx-runtime";
+import { Spacing } from "@uipath/apollo-core";
+import { DEFAULT_TASK_POSITION_CONFIG } from "../TaskNode/useTaskPositions.js";
+function calculatePlaceholderY(groupIndex, taskIndex, taskIds) {
+    const config = DEFAULT_TASK_POSITION_CONFIG;
+    let y = config.headerHeight + config.contentPaddingTop;
+    for(let gi = 0; gi < taskIds.length; gi++){
+        const group = taskIds[gi];
+        if (group) {
+            if (gi === groupIndex) {
+                for(let ti = 0; ti < taskIndex && ti < group.length; ti++){
+                    y += config.taskHeight;
+                    if (ti < group.length - 1) y += config.taskGap;
+                }
+                return y;
+            }
+            y += group.length * config.taskHeight;
+            y += (group.length - 1) * config.taskGap;
+            y += config.taskGap;
+        }
+    }
+    return y;
+}
+const DropPlaceholder = ({ groupIndex, taskIndex, taskIds, isParallel, draggedTaskId })=>{
+    let adjustedTaskIds = taskIds;
+    let adjustedGroupIndex = groupIndex;
+    if (draggedTaskId) {
+        const tempTaskIds = taskIds.map((group)=>[
+                ...group
+            ]);
+        for(let gi = 0; gi < tempTaskIds.length; gi++){
+            const group = tempTaskIds[gi];
+            if (!group) continue;
+            const index = group.indexOf(draggedTaskId);
+            if (-1 !== index) {
+                group.splice(index, 1);
+                if (gi < groupIndex) adjustedGroupIndex--;
+                break;
+            }
+        }
+        adjustedTaskIds = tempTaskIds.filter((g)=>g && g.length > 0);
+    }
+    const y = calculatePlaceholderY(adjustedGroupIndex, taskIndex, adjustedTaskIds);
+    const x = isParallel ? DEFAULT_TASK_POSITION_CONFIG.contentPaddingX + DEFAULT_TASK_POSITION_CONFIG.parallelIndent : DEFAULT_TASK_POSITION_CONFIG.contentPaddingX;
+    const width = isParallel ? "var(--stage-task-width-parallel, 216px)" : "var(--stage-task-width, 246px)";
+    console.log('[DropPlaceholder] Rendering at', {
+        x,
+        y,
+        groupIndex: adjustedGroupIndex,
+        taskIndex,
+        isParallel,
+        draggedTaskId
+    });
+    return /*#__PURE__*/ jsx("div", {
+        style: {
+            position: 'absolute',
+            top: y,
+            left: x,
+            width,
+            height: 36,
+            border: '2px dashed rgba(100, 150, 255, 0.8)',
+            borderRadius: Spacing.SpacingXs,
+            backgroundColor: 'rgba(100, 150, 255, 0.1)',
+            opacity: 1,
+            pointerEvents: 'none',
+            zIndex: 100,
+            boxSizing: 'border-box'
+        },
+        "data-testid": "drop-placeholder"
+    });
+};
+export { DropPlaceholder };