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:
@@ -250,50 +250,8 @@
|
|||||||
|
|
||||||
.react-flow.canvas-edge-insert-reflowing .react-flow__node {
|
.react-flow.canvas-edge-insert-reflowing .react-flow__node {
|
||||||
transition-property: transform;
|
transition-property: transform;
|
||||||
transition-duration: var(--ls-edge-insert-reflow-duration, 1297ms);
|
transition-duration: var(--ls-edge-insert-reflow-duration, 997ms);
|
||||||
transition-timing-function: linear(
|
transition-timing-function: cubic-bezier(0.68, -0.6, 0.32, 1.6);
|
||||||
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%
|
|
||||||
);
|
|
||||||
will-change: transform;
|
will-change: transform;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -82,7 +82,7 @@ interface CanvasInnerProps {
|
|||||||
canvasId: Id<"canvases">;
|
canvasId: Id<"canvases">;
|
||||||
}
|
}
|
||||||
|
|
||||||
const EDGE_INSERT_REFLOW_SETTLE_MS = 1297;
|
const EDGE_INSERT_REFLOW_SETTLE_MS = 997;
|
||||||
|
|
||||||
function CanvasInner({ canvasId }: CanvasInnerProps) {
|
function CanvasInner({ canvasId }: CanvasInnerProps) {
|
||||||
const t = useTranslations('toasts');
|
const t = useTranslations('toasts');
|
||||||
|
|||||||
@@ -27,7 +27,7 @@ export type EdgeInsertMenuState = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const EDGE_INSERT_GAP_PX = 10;
|
const EDGE_INSERT_GAP_PX = 10;
|
||||||
const DEFAULT_REFLOW_SETTLE_MS = 1297;
|
const DEFAULT_REFLOW_SETTLE_MS = 997;
|
||||||
|
|
||||||
function waitForReflowSettle(ms: number): Promise<void> {
|
function waitForReflowSettle(ms: number): Promise<void> {
|
||||||
return new Promise((resolve) => {
|
return new Promise((resolve) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user