Shrimbly
7 months ago
10 changed files with 578 additions and 49 deletions
@ -0,0 +1,127 @@ |
|||
"use client"; |
|||
|
|||
import { useReactFlow } from "@xyflow/react"; |
|||
import { useWorkflowStore } from "@/store/workflowStore"; |
|||
import { useMemo } from "react"; |
|||
|
|||
const STACK_GAP = 20; |
|||
|
|||
export function MultiSelectToolbar() { |
|||
const { nodes, onNodesChange } = useWorkflowStore(); |
|||
const { getViewport } = useReactFlow(); |
|||
|
|||
const selectedNodes = useMemo( |
|||
() => nodes.filter((node) => node.selected), |
|||
[nodes] |
|||
); |
|||
|
|||
// Calculate toolbar position (centered above selected nodes)
|
|||
const toolbarPosition = useMemo(() => { |
|||
if (selectedNodes.length < 2) return null; |
|||
|
|||
const viewport = getViewport(); |
|||
|
|||
// Find bounding box of selected nodes
|
|||
let minX = Infinity; |
|||
let minY = Infinity; |
|||
let maxX = -Infinity; |
|||
|
|||
selectedNodes.forEach((node) => { |
|||
const nodeWidth = (node.style?.width as number) || node.measured?.width || 220; |
|||
minX = Math.min(minX, node.position.x); |
|||
minY = Math.min(minY, node.position.y); |
|||
maxX = Math.max(maxX, node.position.x + nodeWidth); |
|||
}); |
|||
|
|||
// Convert flow coordinates to screen coordinates
|
|||
const centerX = (minX + maxX) / 2; |
|||
const screenX = centerX * viewport.zoom + viewport.x; |
|||
const screenY = minY * viewport.zoom + viewport.y - 50; // 50px above the top
|
|||
|
|||
return { x: screenX, y: screenY }; |
|||
}, [selectedNodes, getViewport]); |
|||
|
|||
const handleStackHorizontally = () => { |
|||
if (selectedNodes.length < 2) return; |
|||
|
|||
// Sort by current x position to maintain relative order
|
|||
const sortedNodes = [...selectedNodes].sort((a, b) => a.position.x - b.position.x); |
|||
|
|||
// Use the topmost y position as the alignment point
|
|||
const alignY = Math.min(...sortedNodes.map((n) => n.position.y)); |
|||
|
|||
let currentX = sortedNodes[0].position.x; |
|||
|
|||
sortedNodes.forEach((node) => { |
|||
const nodeWidth = (node.style?.width as number) || node.measured?.width || 220; |
|||
|
|||
onNodesChange([ |
|||
{ |
|||
type: "position", |
|||
id: node.id, |
|||
position: { x: currentX, y: alignY }, |
|||
}, |
|||
]); |
|||
|
|||
currentX += nodeWidth + STACK_GAP; |
|||
}); |
|||
}; |
|||
|
|||
const handleStackVertically = () => { |
|||
if (selectedNodes.length < 2) return; |
|||
|
|||
// Sort by current y position to maintain relative order
|
|||
const sortedNodes = [...selectedNodes].sort((a, b) => a.position.y - b.position.y); |
|||
|
|||
// Use the leftmost x position as the alignment point
|
|||
const alignX = Math.min(...sortedNodes.map((n) => n.position.x)); |
|||
|
|||
let currentY = sortedNodes[0].position.y; |
|||
|
|||
sortedNodes.forEach((node) => { |
|||
const nodeHeight = (node.style?.height as number) || node.measured?.height || 200; |
|||
|
|||
onNodesChange([ |
|||
{ |
|||
type: "position", |
|||
id: node.id, |
|||
position: { x: alignX, y: currentY }, |
|||
}, |
|||
]); |
|||
|
|||
currentY += nodeHeight + STACK_GAP; |
|||
}); |
|||
}; |
|||
|
|||
if (!toolbarPosition || selectedNodes.length < 2) return null; |
|||
|
|||
return ( |
|||
<div |
|||
className="fixed z-[100] flex items-center gap-1 bg-neutral-800 border border-neutral-600 rounded-lg shadow-xl p-1" |
|||
style={{ |
|||
left: toolbarPosition.x, |
|||
top: toolbarPosition.y, |
|||
transform: "translateX(-50%)", |
|||
}} |
|||
> |
|||
<button |
|||
onClick={handleStackHorizontally} |
|||
className="p-1.5 rounded hover:bg-neutral-700 text-neutral-400 hover:text-neutral-100 transition-colors" |
|||
title="Stack horizontally (H)" |
|||
> |
|||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}> |
|||
<path strokeLinecap="round" strokeLinejoin="round" d="M6 4h4v16H6zM14 4h4v16h-4z" /> |
|||
</svg> |
|||
</button> |
|||
<button |
|||
onClick={handleStackVertically} |
|||
className="p-1.5 rounded hover:bg-neutral-700 text-neutral-400 hover:text-neutral-100 transition-colors" |
|||
title="Stack vertically (V)" |
|||
> |
|||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}> |
|||
<path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16v4H4zM4 14h16v4H4z" /> |
|||
</svg> |
|||
</button> |
|||
</div> |
|||
); |
|||
} |
|||
Loading…
Reference in new issue