chore(svelte): run prettier
This commit is contained in:
moklick
@@ -9,113 +9,113 @@ import type { Node } from '$lib/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;
|
||||
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: Writable<Node[]>;
|
||||
transform: Writable<Transform>;
|
||||
handleSelector?: string;
|
||||
nodeId?: string;
|
||||
updateNodePositions: (dragItems: NodeDragItem[], d: boolean, p: boolean) => void;
|
||||
nodes: Writable<Node[]>;
|
||||
transform: Writable<Transform>;
|
||||
};
|
||||
|
||||
export default function drag(
|
||||
nodeRef: Element,
|
||||
{ handleSelector, nodeId, updateNodePositions, nodes, transform: transformStore }: UseDragParams
|
||||
nodeRef: Element,
|
||||
{ handleSelector, nodeId, updateNodePositions, nodes, transform: transformStore }: UseDragParams
|
||||
) {
|
||||
let dragging = false;
|
||||
let dragItems: NodeDragItem[] = [];
|
||||
let lastPos: { x: number | null; y: number | null } = { x: null, y: null };
|
||||
let dragging = false;
|
||||
let dragItems: NodeDragItem[] = [];
|
||||
let lastPos: { x: number | null; y: number | null } = { x: null, y: null };
|
||||
|
||||
const selection = select(nodeRef);
|
||||
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 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]
|
||||
};
|
||||
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
|
||||
};
|
||||
};
|
||||
// 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;
|
||||
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(nodes) as RFNode[]);
|
||||
dragItems = dragItems.map((n) => {
|
||||
const nextPosition = { x: x - n.distance.x, y: y - n.distance.y };
|
||||
const updatedPos = calcNextPosition(n, nextPosition, get(nodes) as RFNode[]);
|
||||
|
||||
// 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;
|
||||
// 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;
|
||||
n.position = updatedPos.position;
|
||||
n.positionAbsolute = updatedPos.positionAbsolute;
|
||||
|
||||
return n;
|
||||
});
|
||||
return n;
|
||||
});
|
||||
|
||||
if (!hasChange) {
|
||||
return;
|
||||
}
|
||||
if (!hasChange) {
|
||||
return;
|
||||
}
|
||||
|
||||
updateNodePositions(dragItems, true, true);
|
||||
dragging = true;
|
||||
};
|
||||
updateNodePositions(dragItems, true, true);
|
||||
dragging = true;
|
||||
};
|
||||
|
||||
const dragHandler = d3Drag()
|
||||
.on('start', (event: UseDragEvent) => {
|
||||
const pointerPos = getPointerPosition(event);
|
||||
console.log(pointerPos);
|
||||
lastPos = pointerPos;
|
||||
dragItems = getDragItems(get(nodes) as RFNode[], pointerPos, nodeId);
|
||||
})
|
||||
.on('drag', (event: UseDragEvent) => {
|
||||
const pointerPos = getPointerPosition(event);
|
||||
const dragHandler = d3Drag()
|
||||
.on('start', (event: UseDragEvent) => {
|
||||
const pointerPos = getPointerPosition(event);
|
||||
console.log(pointerPos);
|
||||
lastPos = pointerPos;
|
||||
dragItems = getDragItems(get(nodes) as RFNode[], 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;
|
||||
// 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));
|
||||
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;
|
||||
});
|
||||
return isDraggable;
|
||||
});
|
||||
|
||||
selection.call(dragHandler);
|
||||
selection.call(dragHandler);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user