alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(autoPanSpeed): cleanup

Browse Source
This commit is contained in:
moklick
2024-07-04 18:03:22 +02:00
parent 3f259e9662
commit 62ba38cea9
3 changed files with 6 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/system/src/utils/general.ts
+4 -11
View File
@@ -21,10 +21,6 @@ export const clampPosition = (position: XYPosition = { x: 0, y: 0 }, extent: Coo
y: clamp(position.y, extent[0][1], extent[1][1]), y: clamp(position.y, extent[0][1], extent[1][1]),
}); });
function easeInOutSine(x: number): number {
return -(Math.cos(Math.PI * x) - 1) / 2;
}
/** /**
* Calculates the velocity of panning when the mouse is close to the edge of the canvas * Calculates the velocity of panning when the mouse is close to the edge of the canvas
* @internal * @internal
@@ -33,8 +29,7 @@ function easeInOutSine(x: number): number {
* @param max - Maximal position on canvas before panning starts * @param max - Maximal position on canvas before panning starts
* @returns - A number between 0 and 1 that represents the velocity of panning * @returns - A number between 0 and 1 that represents the velocity of panning
*/ */
const calcAutoPanVelocity = (value: number, min: number, max: number, zoom: number): number => { const calcAutoPanVelocity = (value: number, min: number, max: number): number => {
clamp(zoom, 0, 1);
if (value < min) { if (value < min) {
return clamp(Math.abs(value - min), 1, min) / min; return clamp(Math.abs(value - min), 1, min) / min;
} else if (value > max) { } else if (value > max) {
@@ -47,13 +42,11 @@ const calcAutoPanVelocity = (value: number, min: number, max: number, zoom: numb
export const calcAutoPan = ( export const calcAutoPan = (
pos: XYPosition, pos: XYPosition,
bounds: Dimensions, bounds: Dimensions,
transform: Transform,
speed: number = 15, speed: number = 15,
distance: number = 50 distance: number = 40
): number[] => { ): number[] => {
const zoomFactor = clamp(transform[2] * 10, 0.01, 1); const xMovement = calcAutoPanVelocity(pos.x, distance, bounds.width - distance) * speed;
const xMovement = calcAutoPanVelocity(pos.x, distance, bounds.width - distance, transform[2]) * speed * zoomFactor; const yMovement = calcAutoPanVelocity(pos.y, distance, bounds.height - distance) * speed;
const yMovement = calcAutoPanVelocity(pos.y, distance, bounds.height - distance, transform[2]) * speed * zoomFactor;
return [xMovement, yMovement]; return [xMovement, yMovement];
}; };
packages/system/src/xydrag/XYDrag.ts
+1 -1
View File
@@ -202,7 +202,7 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
const { transform, panBy, autoPanSpeed } = getStoreItems(); const { transform, panBy, autoPanSpeed } = getStoreItems();
const [xMovement, yMovement] = calcAutoPan(mousePosition, containerBounds, transform, autoPanSpeed); const [xMovement, yMovement] = calcAutoPan(mousePosition, containerBounds, autoPanSpeed);
if (xMovement !== 0 || yMovement !== 0) { if (xMovement !== 0 || yMovement !== 0) {
lastPos.x = (lastPos.x ?? 0) - xMovement / transform[2]; lastPos.x = (lastPos.x ?? 0) - xMovement / transform[2];
packages/system/src/xyhandle/XYHandle.ts
+1 -2
View File
@@ -79,8 +79,7 @@ function onPointerDown(
if (!autoPanOnConnect || !containerBounds) { if (!autoPanOnConnect || !containerBounds) {
return; return;
} }
const transform = getTransform(); const [x, y] = calcAutoPan(position, containerBounds, autoPanSpeed);
const [x, y] = calcAutoPan(position, containerBounds, transform, autoPanSpeed);
panBy({ x, y }); panBy({ x, y });
autoPanId = requestAnimationFrame(autoPan); autoPanId = requestAnimationFrame(autoPan);