fix(canvas): 画布连线 - 端点收敛到端口中点并新增流动光影
两件事,都在连线层。 一、多条线接同一个端口时不再沿着边散开。 原因是 use-canvas-connection-controller 把**鼠标松手的 Y 位置**记成了 anchorRatio, 于是每条线各自钉在落点上。判据还是反的:真正多端口的分镜脚本传 undefined, 而左右各只有一个出入口的普通节点却按落点比例取 Y,看起来像节点有很多端口。 改成单端口一侧永远取边的正中。这条规则有**两份实现**(canvas-connections 的 connectionHandleY 与 canvas-project-domain 的 getConnectionTargetAnchor),只改一处 会让实际画出来的线和吸附点对不上,所以两处一起改。同时把 anchorRatio 参数从这两个 几何函数上摘掉,让「不按落点」写在签名里而不是悄悄丢掉一个入参 —— 摘掉之后编译器 点出了 4 处仍在传旧参数的调用,正是这么做的收益。分镜脚本的 row: 句柄不受影响。 二、连线新增光晕与流光两层。 光晕(blur 的宽描边)和流光(一小段高亮沿路径跑)**只在悬停/选中态渲染**:blur 是 filter,成本随线条数量线性上升,常态几十条线全开会明显掉帧。常态仍是原来那条极淡的 虚线,只有指向的那条亮起来,顺带让「当前在看哪条链路」更清楚。 流光周期 2.1s 与虚线流动 1.25s 刻意错拍 —— 同频会锁成一条整体平移的虚线, 看不出有光在走。keyframes 的位移量等于 dasharray 之和(16 + 118 = 134), 否则循环处会跳一帧。 新动画已加入全部三处禁用名单:prefers-reduced-motion、.no-motion,以及 [data-canvas-viewport-interacting](平移缩放期间)。第三处最关键 —— 漏掉的话拖画布时 几十条线还在跑动画,正是错题本里「画布高频重绘导致崩溃」那一类。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
@@ -271,6 +271,7 @@
|
||||
/* infinite 装饰动画在 reduced-motion / no-motion 下降级(对应 #99 三级降级)*/
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.canvas-connection-flow,
|
||||
.canvas-connection-comet,
|
||||
.canvas-connection-draft,
|
||||
.canvas-task-progress-shimmer,
|
||||
.ai-title-aurora,
|
||||
@@ -282,6 +283,7 @@
|
||||
}
|
||||
}
|
||||
.no-motion .canvas-connection-flow,
|
||||
.no-motion .canvas-connection-comet,
|
||||
.no-motion .canvas-connection-draft,
|
||||
.no-motion .canvas-task-progress-shimmer,
|
||||
.no-motion .ai-title-aurora,
|
||||
@@ -7161,7 +7163,7 @@
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
[data-canvas-viewport-interacting="true"] :where(.canvas-connection-flow, .canvas-connection-draft) {
|
||||
[data-canvas-viewport-interacting="true"] :where(.canvas-connection-flow, .canvas-connection-comet, .canvas-connection-draft) {
|
||||
animation: none !important;
|
||||
}
|
||||
|
||||
@@ -7185,6 +7187,12 @@
|
||||
animation: canvas-connection-flow 1.25s var(--motion-ease-linear) infinite;
|
||||
}
|
||||
|
||||
/* 流光:一小段高亮沿连线跑。周期与上面的虚线流动刻意错开,两者同频会锁成
|
||||
一条整体平移的虚线、看不出「有光在走」。只在悬停/选中态渲染(见 canvas-connections.tsx)。 */
|
||||
.canvas-connection-comet {
|
||||
animation: canvas-connection-comet 2.1s var(--motion-ease-linear) infinite;
|
||||
}
|
||||
|
||||
.canvas-connection-draft {
|
||||
animation: canvas-connection-flow 0.9s var(--motion-ease-linear) infinite;
|
||||
}
|
||||
@@ -7207,6 +7215,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* 位移量必须等于 dasharray 之和(16 + 118),否则循环处会跳一下 */
|
||||
@keyframes canvas-connection-comet {
|
||||
to {
|
||||
stroke-dashoffset: -134;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.canvas-node-info-modal .ant-modal-header {
|
||||
padding-right: 0;
|
||||
|
||||
Reference in New Issue
Block a user