import { get } from 'svelte/store'; import { XYDrag } from '@xyflow/system'; export default function drag(domNode, params) { const { store, onDrag, onDragStart, onDragStop, onNodeMouseDown } = params; const dragInstance = XYDrag({ onDrag, onDragStart, onDragStop, onNodeMouseDown, getStoreItems: () => { const snapGrid = get(store.snapGrid); const vp = get(store.viewport); return { nodes: get(store.nodes), nodeLookup: get(store.nodeLookup), edges: get(store.edges), nodeExtent: get(store.nodeExtent), snapGrid: snapGrid ? snapGrid : [0, 0], snapToGrid: !!snapGrid, nodeOrigin: get(store.nodeOrigin), multiSelectionActive: get(store.multiselectionKeyPressed), domNode: get(store.domNode), transform: [vp.x, vp.y, vp.zoom], autoPanOnNodeDrag: get(store.autoPanOnNodeDrag), nodesDraggable: get(store.nodesDraggable), selectNodesOnDrag: get(store.selectNodesOnDrag), nodeDragThreshold: get(store.nodeDragThreshold), unselectNodesAndEdges: store.unselectNodesAndEdges, updateNodePositions: store.updateNodePositions, panBy: store.panBy }; } }); function updateDrag(domNode, params) { if (params.disabled) { dragInstance.destroy(); return; } dragInstance.update({ domNode, noDragClassName: params.noDragClass, handleSelector: params.handleSelector, nodeId: params.nodeId, isSelectable: params.isSelectable, nodeClickDistance: params.nodeClickDistance }); } updateDrag(domNode, params); return { update(params) { updateDrag(domNode, params); }, destroy() { dragInstance.destroy(); } }; }