refactor(canvas): update edge insertion reflow duration and transition timing

- Reduced the edge insertion reflow duration from 1297ms to 997ms for improved performance.
- Changed the transition timing function to a cubic-bezier for smoother animations in the canvas.
This commit is contained in:
2026-04-05 23:32:00 +02:00
parent fa6a41f775
commit b47720a50b
3 changed files with 4 additions and 46 deletions

View File

@@ -250,50 +250,8 @@
.react-flow.canvas-edge-insert-reflowing .react-flow__node {
transition-property: transform;
transition-duration: var(--ls-edge-insert-reflow-duration, 1297ms);
transition-timing-function: linear(
0 0%,
0.2718 2.5%,
0.6464 5%,
1 7.5%,
1.25 10%,
1.3641 12.5%,
1.3536 15%,
1.2575 17.5%,
1.125 20%,
1 22.5%,
0.9116 25%,
0.8713 27.5%,
0.875 30%,
0.909 32.5%,
0.9558 35%,
1 37.5%,
1.0313 40%,
1.0455 42.5%,
1.0442 45%,
1.0322 47.5%,
1.0156 50%,
1 52.5%,
0.989 55%,
0.9839 57.5%,
0.9844 60%,
0.9886 62.5%,
0.9945 65%,
1 67.5%,
1.0039 70%,
1.0057 72.5%,
1.0055 75%,
1.004 77.5%,
1.002 80%,
1 82.5%,
0.9986 85%,
0.998 87.5%,
0.998 90%,
0.9986 92.5%,
0.9993 95%,
1 97.5%,
1 100%
);
transition-duration: var(--ls-edge-insert-reflow-duration, 997ms);
transition-timing-function: cubic-bezier(0.68, -0.6, 0.32, 1.6);
will-change: transform;
}

View File

@@ -82,7 +82,7 @@ interface CanvasInnerProps {
canvasId: Id<"canvases">;
}
const EDGE_INSERT_REFLOW_SETTLE_MS = 1297;
const EDGE_INSERT_REFLOW_SETTLE_MS = 997;
function CanvasInner({ canvasId }: CanvasInnerProps) {
const t = useTranslations('toasts');

View File

@@ -27,7 +27,7 @@ export type EdgeInsertMenuState = {
};
const EDGE_INSERT_GAP_PX = 10;
const DEFAULT_REFLOW_SETTLE_MS = 1297;
const DEFAULT_REFLOW_SETTLE_MS = 997;
function waitForReflowSettle(ms: number): Promise<void> {
return new Promise((resolve) => {