138 lines
4.2 KiB
TypeScript
138 lines
4.2 KiB
TypeScript
import { get, type Writable } from 'svelte/store';
|
|
import { drag as d3Drag, type D3DragEvent, type SubjectPosition } from 'd3-drag';
|
|
import { select } from 'd3-selection';
|
|
import type { XYPosition, CoordinateExtent, Transform } from '@reactflow/system';
|
|
|
|
import { getDragItems, hasSelector, calcNextPosition } from './utils';
|
|
import type { Node } from '$lib/types';
|
|
import type { SvelteFlowStore } from '$lib/store/types';
|
|
|
|
export type UseDragData = { dx: number; dy: number };
|
|
export type UseDragEvent = D3DragEvent<HTMLDivElement, null, SubjectPosition>;
|
|
export type NodeDragItem = {
|
|
id: string;
|
|
position: XYPosition;
|
|
positionAbsolute: XYPosition;
|
|
// distance from the mouse cursor to the node when start dragging
|
|
distance: XYPosition;
|
|
width?: number | null;
|
|
height?: number | null;
|
|
extent?: 'parent' | CoordinateExtent;
|
|
parentNode?: string;
|
|
dragging?: boolean;
|
|
};
|
|
|
|
type UseDragParams = {
|
|
handleSelector?: string;
|
|
nodeId?: string;
|
|
updateNodePositions: (dragItems: NodeDragItem[], d: boolean, p: boolean) => void;
|
|
nodes: SvelteFlowStore['nodes'];
|
|
transform: SvelteFlowStore['transform'];
|
|
snapGrid: SvelteFlowStore['snapGrid'];
|
|
};
|
|
|
|
export default function drag(
|
|
nodeRef: Element,
|
|
{
|
|
handleSelector,
|
|
nodeId,
|
|
updateNodePositions,
|
|
nodes,
|
|
transform: transformStore,
|
|
snapGrid: snapGridStore
|
|
}: UseDragParams
|
|
) {
|
|
let dragging = false;
|
|
let dragItems: NodeDragItem[] = [];
|
|
let lastPos: { x: number | null; y: number | null } = { x: null, y: null };
|
|
|
|
const selection = select(nodeRef);
|
|
|
|
const getPointerPosition = ({ sourceEvent }: UseDragEvent) => {
|
|
const x = sourceEvent.touches ? sourceEvent.touches[0].clientX : sourceEvent.clientX;
|
|
const y = sourceEvent.touches ? sourceEvent.touches[0].clientY : sourceEvent.clientY;
|
|
const transform = get(transformStore);
|
|
const snapGrid = get(snapGridStore);
|
|
|
|
const pointerPos = {
|
|
x: (x - transform[0]) / transform[2],
|
|
y: (y - transform[1]) / transform[2]
|
|
};
|
|
|
|
// we need the snapped position in order to be able to skip unnecessary drag events
|
|
return {
|
|
xSnapped: snapGrid ? snapGrid[0] * Math.round(pointerPos.x / snapGrid[0]) : pointerPos.x,
|
|
ySnapped: snapGrid ? snapGrid[1] * Math.round(pointerPos.y / snapGrid[1]) : pointerPos.y,
|
|
...pointerPos
|
|
};
|
|
};
|
|
|
|
const updateNodes = ({ x, y }: XYPosition) => {
|
|
let hasChange = false;
|
|
const snapGrid = get(snapGridStore);
|
|
|
|
dragItems = dragItems.map((n) => {
|
|
const nextPosition = { x: x - n.distance.x, y: y - n.distance.y };
|
|
|
|
if (snapGrid) {
|
|
nextPosition.x = snapGrid[0] * Math.round(nextPosition.x / snapGrid[0]);
|
|
nextPosition.y = snapGrid[1] * Math.round(nextPosition.y / snapGrid[1]);
|
|
}
|
|
|
|
const updatedPos = calcNextPosition(n, nextPosition, get(nodes));
|
|
|
|
// we want to make sure that we only fire a change event when there is a changes
|
|
hasChange =
|
|
hasChange ||
|
|
n.position.x !== updatedPos.position.x ||
|
|
n.position.y !== updatedPos.position.y;
|
|
|
|
n.position = updatedPos.position;
|
|
n.positionAbsolute = updatedPos.positionAbsolute;
|
|
|
|
return n;
|
|
});
|
|
|
|
if (!hasChange) {
|
|
return;
|
|
}
|
|
|
|
updateNodePositions(dragItems, true, true);
|
|
dragging = true;
|
|
};
|
|
|
|
const dragHandler = d3Drag()
|
|
.on('start', (event: UseDragEvent) => {
|
|
const pointerPos = getPointerPosition(event);
|
|
lastPos = pointerPos;
|
|
dragItems = getDragItems(get(nodes), pointerPos, nodeId);
|
|
})
|
|
.on('drag', (event: UseDragEvent) => {
|
|
const pointerPos = getPointerPosition(event);
|
|
|
|
// skip events without movement
|
|
if ((lastPos.x !== pointerPos.xSnapped || lastPos.y !== pointerPos.ySnapped) && dragItems) {
|
|
lastPos = pointerPos;
|
|
updateNodes(pointerPos);
|
|
}
|
|
})
|
|
.on('end', (event: UseDragEvent) => {
|
|
dragging = false;
|
|
|
|
if (dragItems) {
|
|
updateNodePositions(dragItems, false, false);
|
|
}
|
|
})
|
|
.filter((event: MouseEvent) => {
|
|
const target = event.target as HTMLDivElement;
|
|
const isDraggable =
|
|
!event.button &&
|
|
!hasSelector(target, '.nodrag', nodeRef) &&
|
|
(!handleSelector || hasSelector(target, handleSelector, nodeRef));
|
|
|
|
return isDraggable;
|
|
});
|
|
|
|
selection.call(dragHandler);
|
|
}
|