feat(svelte): selection box
This commit is contained in:
moklick
@@ -1,128 +0,0 @@
|
||||
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);
|
||||
}
|
||||
@@ -1,153 +0,0 @@
|
||||
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
|
||||
];
|
||||
}
|
||||
@@ -1,114 +0,0 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
import type { Writable } from 'svelte/store';
|
||||
import { select } from 'd3-selection';
|
||||
import { zoom as d3Zoom, zoomIdentity } from 'd3-zoom';
|
||||
import type { D3ZoomEvent } from 'd3-zoom';
|
||||
import type { D3SelectionInstance, D3ZoomInstance, Transform } from '@reactflow/system';
|
||||
|
||||
const isWrappedWithClass = (event: any, className: string | undefined) =>
|
||||
event.target.closest(`.${className}`);
|
||||
|
||||
export default function zoom(
|
||||
domNode: Element,
|
||||
{
|
||||
transformStore,
|
||||
d3Store
|
||||
}: {
|
||||
transformStore: Writable<Transform>;
|
||||
d3Store: Writable<{ zoom: D3ZoomInstance | null; selection: D3SelectionInstance | null }>;
|
||||
}
|
||||
) {
|
||||
const d3ZoomInstance = d3Zoom();
|
||||
const selection = select(domNode).call(d3ZoomInstance);
|
||||
const d3ZoomHandler = selection.on('wheel.zoom');
|
||||
d3ZoomInstance.transform(selection, zoomIdentity);
|
||||
|
||||
selection.on('wheel.zoom', function (event: any, d: any) {
|
||||
if (isWrappedWithClass(event, 'nowheel')) {
|
||||
return null;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
d3ZoomHandler!.call(this, event, d);
|
||||
});
|
||||
|
||||
d3Store.set({
|
||||
zoom: d3ZoomInstance,
|
||||
selection
|
||||
});
|
||||
|
||||
d3ZoomInstance.on('zoom', (event: D3ZoomEvent<HTMLDivElement, any>) => {
|
||||
transformStore.set([event.transform.x, event.transform.y, event.transform.k]);
|
||||
});
|
||||
|
||||
d3ZoomInstance.filter((event: any) => {
|
||||
const zoomScroll = true;
|
||||
const pinchZoom = true;
|
||||
|
||||
if (
|
||||
event.button === 1 &&
|
||||
event.type === 'mousedown' &&
|
||||
(isWrappedWithClass(event, 'react-flow__node') ||
|
||||
isWrappedWithClass(event, 'react-flow__edge'))
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// if all interactions are disabled, we prevent all zoom events
|
||||
// if (!panOnDrag && !zoomScroll && !panOnScroll && !zoomOnDoubleClick && !zoomOnPinch) {
|
||||
// return false;
|
||||
// }
|
||||
|
||||
// // during a selection we prevent all other interactions
|
||||
// if (userSelectionActive) {
|
||||
// return false;
|
||||
// }
|
||||
|
||||
// // if zoom on double click is disabled, we prevent the double click event
|
||||
// if (!zoomOnDoubleClick && event.type === 'dblclick') {
|
||||
// return false;
|
||||
// }
|
||||
|
||||
// // if the target element is inside an element with the nowheel class, we prevent zooming
|
||||
// if (isWrappedWithClass(event, noWheelClassName) && event.type === 'wheel') {
|
||||
// return false;
|
||||
// }
|
||||
|
||||
// // if the target element is inside an element with the nopan class, we prevent panning
|
||||
// if (isWrappedWithClass(event, noPanClassName) && event.type !== 'wheel') {
|
||||
// return false;
|
||||
// }
|
||||
|
||||
// if (!zoomOnPinch && event.ctrlKey && event.type === 'wheel') {
|
||||
// return false;
|
||||
// }
|
||||
|
||||
// // when there is no scroll handling enabled, we prevent all wheel events
|
||||
// if (!zoomScroll && !panOnScroll && !pinchZoom && event.type === 'wheel') {
|
||||
// return false;
|
||||
// }
|
||||
|
||||
// // if the pane is not movable, we prevent dragging it with mousestart or touchstart
|
||||
// if (!panOnDrag && (event.type === 'mousedown' || event.type === 'touchstart')) {
|
||||
// return false;
|
||||
// }
|
||||
|
||||
// // if the pane is only movable using allowed clicks
|
||||
// if (
|
||||
// Array.isArray(panOnDrag) &&
|
||||
// !panOnDrag.includes(event.button) &&
|
||||
// (event.type === 'mousedown' || event.type === 'touchstart')
|
||||
// ) {
|
||||
// return false;
|
||||
// }
|
||||
|
||||
// // We only allow right clicks if pan on drag is set to right click
|
||||
// const buttonAllowed =
|
||||
// (Array.isArray(panOnDrag) && panOnDrag.includes(event.button)) ||
|
||||
// !event.button ||
|
||||
// event.button <= 1;
|
||||
|
||||
// default filter for d3-zoom
|
||||
return ((!event.ctrlKey || event.type === 'wheel') && !event.button) || event.button <= 1;
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user