107 lines
3.2 KiB
TypeScript
107 lines
3.2 KiB
TypeScript
/**
|
|
* The nodes selection rectangle gets displayed when a user
|
|
* made a selectio with on or several nodes
|
|
*/
|
|
|
|
import React, { useState, memo } from 'react';
|
|
import ReactDraggable from 'react-draggable';
|
|
|
|
import { useStoreState, useStoreActions } from '../../store/hooks';
|
|
import { isNode } from '../../utils/graph';
|
|
import { Node, XYPosition } from '../../types';
|
|
|
|
type StartPositions = { [key: string]: XYPosition };
|
|
|
|
function getStartPositions(nodes: Node[]): StartPositions {
|
|
const startPositions: StartPositions = {};
|
|
|
|
return nodes.reduce((res, node) => {
|
|
const startPosition = {
|
|
x: node.__rg.position.x || node.position.x,
|
|
y: node.__rg.position.y || node.position.y,
|
|
};
|
|
|
|
res[node.id] = startPosition;
|
|
|
|
return res;
|
|
}, startPositions);
|
|
}
|
|
|
|
export default memo(() => {
|
|
const [offset, setOffset] = useState<XYPosition>({ x: 0, y: 0 });
|
|
const [startPositions, setStartPositions] = useState<StartPositions>({});
|
|
const state = useStoreState(s => ({
|
|
transform: s.transform,
|
|
selectedNodesBbox: s.selectedNodesBbox,
|
|
selectedElements: s.selectedElements,
|
|
snapToGrid: s.snapToGrid,
|
|
snapGrid: s.snapGrid,
|
|
nodes: s.nodes,
|
|
}));
|
|
const updateNodePos = useStoreActions(a => a.updateNodePos);
|
|
const [tx, ty, tScale] = state.transform;
|
|
const position = state.selectedNodesBbox;
|
|
const grid = (state.snapToGrid ? state.snapGrid : [1, 1])! as [number, number];
|
|
|
|
const onStart = (evt: MouseEvent) => {
|
|
const scaledClient: XYPosition = {
|
|
x: evt.clientX / tScale,
|
|
y: evt.clientY / tScale,
|
|
};
|
|
const offsetX: number = scaledClient.x - position.x - tx;
|
|
const offsetY: number = scaledClient.y - position.y - ty;
|
|
const selectedNodes = (state.selectedElements.filter(isNode) as Node[]).map(
|
|
selectedNode => state.nodes.find(node => node.id === selectedNode.id)! as Node
|
|
);
|
|
|
|
const nextStartPositions = getStartPositions(selectedNodes);
|
|
|
|
if (nextStartPositions) {
|
|
setOffset({ x: offsetX, y: offsetY });
|
|
setStartPositions(nextStartPositions);
|
|
}
|
|
};
|
|
|
|
const onDrag = (evt: MouseEvent) => {
|
|
const scaledClient: XYPosition = {
|
|
x: evt.clientX / tScale,
|
|
y: evt.clientY / tScale,
|
|
};
|
|
|
|
(state.selectedElements.filter(isNode) as Node[]).forEach(node => {
|
|
const pos: XYPosition = {
|
|
x: startPositions[node.id].x + scaledClient.x - position.x - offset.x - tx,
|
|
y: startPositions[node.id].y + scaledClient.y - position.y - offset.y - ty,
|
|
};
|
|
|
|
updateNodePos({ id: node.id, pos });
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className="react-flow__nodesselection"
|
|
style={{
|
|
transform: `translate(${tx}px,${ty}px) scale(${tScale})`,
|
|
}}
|
|
>
|
|
<ReactDraggable
|
|
scale={tScale}
|
|
grid={grid}
|
|
onStart={evt => onStart(evt as MouseEvent)}
|
|
onDrag={evt => onDrag(evt as MouseEvent)}
|
|
>
|
|
<div
|
|
className="react-flow__nodesselection-rect"
|
|
style={{
|
|
width: state.selectedNodesBbox.width,
|
|
height: state.selectedNodesBbox.height,
|
|
top: state.selectedNodesBbox.y,
|
|
left: state.selectedNodesBbox.x,
|
|
}}
|
|
/>
|
|
</ReactDraggable>
|
|
</div>
|
|
);
|
|
});
|