diff --git a/app/globals.css b/app/globals.css index 1d9d88b..056aadc 100644 --- a/app/globals.css +++ b/app/globals.css @@ -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; } diff --git a/components/canvas/canvas.tsx b/components/canvas/canvas.tsx index b5ac195..67c0982 100644 --- a/components/canvas/canvas.tsx +++ b/components/canvas/canvas.tsx @@ -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'); diff --git a/components/canvas/use-canvas-edge-insertions.ts b/components/canvas/use-canvas-edge-insertions.ts index 2b935ba..45f5119 100644 --- a/components/canvas/use-canvas-edge-insertions.ts +++ b/components/canvas/use-canvas-edge-insertions.ts @@ -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 { return new Promise((resolve) => {