Spaces:
Running
Running
fix
Browse files
src/lib/components/flow/FitViewOnResize.svelte
CHANGED
|
@@ -20,45 +20,6 @@
|
|
| 20 |
|
| 21 |
let lastLayoutKey = $state<string | null>(null);
|
| 22 |
|
| 23 |
-
const FIT_VIEW_THROTTLE_MS = 500;
|
| 24 |
-
let fitViewTimer: ReturnType<typeof setTimeout> | null = null;
|
| 25 |
-
let lastFitViewTime = 0;
|
| 26 |
-
|
| 27 |
-
function throttledFitView() {
|
| 28 |
-
if (viewState.draggable) return;
|
| 29 |
-
|
| 30 |
-
const now = Date.now();
|
| 31 |
-
const elapsed = now - lastFitViewTime;
|
| 32 |
-
|
| 33 |
-
if (fitViewTimer) {
|
| 34 |
-
clearTimeout(fitViewTimer);
|
| 35 |
-
fitViewTimer = null;
|
| 36 |
-
}
|
| 37 |
-
|
| 38 |
-
if (elapsed >= FIT_VIEW_THROTTLE_MS) {
|
| 39 |
-
lastFitViewTime = now;
|
| 40 |
-
fitView({
|
| 41 |
-
maxZoom: 1,
|
| 42 |
-
minZoom: breakpointsState.isMobile ? 1 : 0.7,
|
| 43 |
-
interpolate: 'smooth',
|
| 44 |
-
duration: 250
|
| 45 |
-
});
|
| 46 |
-
} else {
|
| 47 |
-
fitViewTimer = setTimeout(() => {
|
| 48 |
-
lastFitViewTime = Date.now();
|
| 49 |
-
fitViewTimer = null;
|
| 50 |
-
if (!viewState.draggable) {
|
| 51 |
-
fitView({
|
| 52 |
-
maxZoom: 1,
|
| 53 |
-
minZoom: breakpointsState.isMobile ? 1 : 0.7,
|
| 54 |
-
interpolate: 'smooth',
|
| 55 |
-
duration: 250
|
| 56 |
-
});
|
| 57 |
-
}
|
| 58 |
-
}, FIT_VIEW_THROTTLE_MS - elapsed);
|
| 59 |
-
}
|
| 60 |
-
}
|
| 61 |
-
|
| 62 |
/** Get the actual measured height of a node, or fallback */
|
| 63 |
function getMeasuredHeight(node: Node): number {
|
| 64 |
return node.measured?.height ?? DEFAULT_HEIGHT;
|
|
@@ -122,7 +83,6 @@
|
|
| 122 |
|
| 123 |
onDestroy(() => {
|
| 124 |
window.removeEventListener('resize', handleWindowResize);
|
| 125 |
-
if (fitViewTimer) clearTimeout(fitViewTimer);
|
| 126 |
});
|
| 127 |
|
| 128 |
/** Whether a child should be placed to the right of its parent (same row) */
|
|
@@ -266,6 +226,13 @@
|
|
| 266 |
);
|
| 267 |
}
|
| 268 |
|
| 269 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 270 |
}
|
| 271 |
</script>
|
|
|
|
| 20 |
|
| 21 |
let lastLayoutKey = $state<string | null>(null);
|
| 22 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 23 |
/** Get the actual measured height of a node, or fallback */
|
| 24 |
function getMeasuredHeight(node: Node): number {
|
| 25 |
return node.measured?.height ?? DEFAULT_HEIGHT;
|
|
|
|
| 83 |
|
| 84 |
onDestroy(() => {
|
| 85 |
window.removeEventListener('resize', handleWindowResize);
|
|
|
|
| 86 |
});
|
| 87 |
|
| 88 |
/** Whether a child should be placed to the right of its parent (same row) */
|
|
|
|
| 226 |
);
|
| 227 |
}
|
| 228 |
|
| 229 |
+
if (!viewState.draggable) {
|
| 230 |
+
fitView({
|
| 231 |
+
maxZoom: 1,
|
| 232 |
+
minZoom: breakpointsState.isMobile ? 1 : 0.7,
|
| 233 |
+
interpolate: 'smooth',
|
| 234 |
+
duration: 250
|
| 235 |
+
});
|
| 236 |
+
}
|
| 237 |
}
|
| 238 |
</script>
|
src/routes/+page.svelte
CHANGED
|
@@ -83,13 +83,6 @@
|
|
| 83 |
panOnDrag={viewState.draggable}
|
| 84 |
onbeforedelete={() => Promise.resolve(false)}
|
| 85 |
defaultEdgeOptions={{ type: 'smoothstep' }}
|
| 86 |
-
onnodedragstop={() => {
|
| 87 |
-
nodes = resolveCollisions(nodes, {
|
| 88 |
-
maxIterations: Infinity,
|
| 89 |
-
overlapThreshold: 0.5,
|
| 90 |
-
margin: 15
|
| 91 |
-
});
|
| 92 |
-
}}
|
| 93 |
class="bg-background!"
|
| 94 |
>
|
| 95 |
<FitViewOnResize {initialNodes} />
|
|
|
|
| 83 |
panOnDrag={viewState.draggable}
|
| 84 |
onbeforedelete={() => Promise.resolve(false)}
|
| 85 |
defaultEdgeOptions={{ type: 'smoothstep' }}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 86 |
class="bg-background!"
|
| 87 |
>
|
| 88 |
<FitViewOnResize {initialNodes} />
|