refactor(canvas): remove unused animation and optimize edge insertion timing

- Removed the unused CSS animation for edge insertion to streamline the codebase.
- Updated the edge insertion reflow duration from 1297ms to 997ms for improved performance.
- Refactored transition timing function for edge insertion to enhance animation smoothness.
- Cleaned up related test cases to reflect the changes in edge insertion logic.
This commit is contained in:
2026-04-06 21:30:56 +02:00
parent b7771764d8
commit 36e8b7d3db
5 changed files with 57 additions and 199 deletions

View File

@@ -145,17 +145,6 @@
}
}
@keyframes ls-edge-insert-enter {
0% {
opacity: 0;
scale: 0.82;
}
100% {
opacity: 1;
scale: 1;
}
}
.ls-connection-line-marching {
animation: ls-connection-dash-offset 0.4s linear infinite;
}
@@ -262,17 +251,52 @@
.react-flow.canvas-edge-insert-reflowing .react-flow__node {
transition-property: transform;
transition-duration: var(--ls-edge-insert-reflow-duration, 1297ms);
transition-timing-function: cubic-bezier(0.68, -0.6, 0.32, 1.6);
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%
);
will-change: transform;
}
.react-flow__node.canvas-edge-insert-enter,
.react-flow__node .canvas-edge-insert-enter {
animation: ls-edge-insert-enter 300ms cubic-bezier(0.68, -0.6, 0.32, 1.6) both;
transform-origin: center center;
will-change: scale, opacity;
}
@media (prefers-reduced-motion: reduce) {
.react-flow.canvas-scissors-mode .react-flow__edge:not(.temp) .react-flow__edge-path {
transition: none;
@@ -281,13 +305,5 @@
.react-flow.canvas-edge-insert-reflowing .react-flow__node {
transition: none;
}
.react-flow__node.canvas-edge-insert-enter,
.react-flow__node .canvas-edge-insert-enter {
animation: none;
opacity: 1;
scale: 1;
will-change: auto;
}
}
}