feat(svelte): selection box

2023-02-20 19:01:43 +01:00
parent fe84a5d21a
commit 1f44bc4da5
17 changed files with 501 additions and 154 deletions
@@ -0,0 +1,128 @@
+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, Node, Transform } from '@reactflow/system';
+
+import { getDragItems, hasSelector, calcNextPosition } from './utils';
+
+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 = {
+	noDragClassName?: string;
+	handleSelector?: string;
+	nodeId?: string;
+	updateNodePositions: (dragItems: NodeDragItem[], d: boolean, p: boolean) => void;
+	nodesStore: Writable<Node[]>;
+	transformStore: Writable<Transform>;
+};
+
+export default function drag(
+	nodeRef: Element,
+	{
+		noDragClassName,
+		handleSelector,
+		nodeId,
+		updateNodePositions,
+		nodesStore,
+		transformStore
+	}: 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 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: pointerPos.x,
+			ySnapped: pointerPos.y,
+			...pointerPos
+		};
+	};
+
+	const updateNodes = ({ x, y }: XYPosition) => {
+		let hasChange = false;
+
+		dragItems = dragItems.map((n) => {
+			const nextPosition = { x: x - n.distance.x, y: y - n.distance.y };
+			const updatedPos = calcNextPosition(n, nextPosition, get(nodesStore));
+
+			// 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(nodesStore), 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 &&
+				(!noDragClassName || !hasSelector(target, `.${noDragClassName}`, nodeRef)) &&
+				(!handleSelector || hasSelector(target, handleSelector, nodeRef));
+
+			return isDraggable;
+		});
+
+	selection.call(dragHandler);
+}
@@ -0,0 +1,153 @@
+import type {
+	CoordinateExtent,
+	Node,
+	NodeDragItem,
+	NodeInternals,
+	NodeOrigin,
+	XYPosition
+} from '@reactflow/system';
+
+import { clampPosition, isNumeric } from '../../../utils';
+
+export function isParentSelected(node: Node, nodes: Node[]): boolean {
+	if (!node.parentNode) {
+		return false;
+	}
+
+	const parentNode = nodes.find((n) => n.id === node.parentNode);
+
+	if (!parentNode) {
+		return false;
+	}
+
+	if (parentNode.selected) {
+		return true;
+	}
+
+	return isParentSelected(parentNode, nodes);
+}
+
+export function hasSelector(target: Element, selector: string, domNode: Element): boolean {
+	let current = target;
+
+	do {
+		if (current?.matches(selector)) return true;
+		if (current === domNode) return false;
+		current = current.parentElement as Element;
+	} while (current);
+
+	return false;
+}
+
+// looks for all selected nodes and created a NodeDragItem for each of them
+export function getDragItems(nodes: Node[], mousePos: XYPosition, nodeId?: string): NodeDragItem[] {
+	console.log(mousePos, nodes);
+	return nodes
+		.filter(
+			(n) => (n.selected || n.id === nodeId) && (!n.parentNode || !isParentSelected(n, nodes))
+		)
+		.map((n) => ({
+			id: n.id,
+			position: n.position ? { ...n.position } : { x: 0, y: 0 },
+			positionAbsolute: n.positionAbsolute ? { ...n.positionAbsolute } : { x: 0, y: 0 },
+			distance: {
+				x: mousePos.x - (n.positionAbsolute?.x ?? 0),
+				y: mousePos.y - (n.positionAbsolute?.y ?? 0)
+			},
+			delta: {
+				x: 0,
+				y: 0
+			},
+			extent: n.extent,
+			parentNode: n.parentNode,
+			width: n.width,
+			height: n.height
+		}));
+}
+
+export function calcNextPosition(
+	node: NodeDragItem | Node,
+	nextPosition: XYPosition,
+	nodes: Node[],
+	nodeExtent?: CoordinateExtent,
+	nodeOrigin: NodeOrigin = [0, 0]
+): { position: XYPosition; positionAbsolute: XYPosition } {
+	let currentExtent = node.extent || nodeExtent;
+
+	if (node.extent === 'parent') {
+		if (node.parentNode && node.width && node.height) {
+			const parent = nodes.find((n) => n.id === node.parentNode)!;
+			const { x: parentX, y: parentY } = parent.positionAbsolute!;
+			currentExtent =
+				parent &&
+				isNumeric(parentX) &&
+				isNumeric(parentY) &&
+				isNumeric(parent.width) &&
+				isNumeric(parent.height)
+					? [
+							[parentX + node.width * nodeOrigin[0], parentY + node.height * nodeOrigin[1]],
+							[
+								parentX + parent.width! - node.width + node.width * nodeOrigin[0],
+								parentY + parent.height! - node.height + node.height * nodeOrigin[1]
+							]
+					  ]
+					: currentExtent;
+		} else {
+			currentExtent = nodeExtent;
+		}
+	} else if (node.extent && node.parentNode) {
+		const parent = nodes.find((n) => n.id === node.parentNode)!;
+		const { x: parentX, y: parentY } = parent.positionAbsolute!;
+		currentExtent = [
+			[node.extent[0][0] + parentX, node.extent[0][1] + parentY],
+			[node.extent[1][0] + parentX, node.extent[1][1] + parentY]
+		];
+	}
+
+	let parentPosition = { x: 0, y: 0 };
+
+	if (node.parentNode) {
+		const parent = nodes.find((n) => n.id === node.parentNode)!;
+		parentPosition = parent.positionAbsolute!;
+	}
+
+	const positionAbsolute = currentExtent
+		? clampPosition(nextPosition, currentExtent as CoordinateExtent)
+		: nextPosition;
+
+	return {
+		position: {
+			x: positionAbsolute.x - parentPosition.x,
+			y: positionAbsolute.y - parentPosition.y
+		},
+		positionAbsolute
+	};
+}
+
+// returns two params:
+// 1. the dragged node (or the first of the list, if we are dragging a node selection)
+// 2. array of selected nodes (for multi selections)
+export function getEventHandlerParams({
+	nodeId,
+	dragItems,
+	nodeInternals
+}: {
+	nodeId?: string;
+	dragItems: NodeDragItem[];
+	nodeInternals: NodeInternals;
+}): [Node, Node[]] {
+	const extentedDragItems: Node[] = dragItems.map((n) => {
+		const node = nodeInternals.get(n.id)!;
+
+		return {
+			...node,
+			position: n.position,
+			positionAbsolute: n.positionAbsolute
+		};
+	});
+
+	return [
+		nodeId ? extentedDragItems.find((n) => n.id === nodeId)! : extentedDragItems[0],
+		extentedDragItems
+	];
+}