dtoro/zui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: edge animation

Browse Source
This commit is contained in:
authentik Default Admin
2026-03-12 20:45:40 +01:00
parent fb1df18256
commit 92fdba7eef
2 changed files with 7 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/src/app/canvas/useCanvasConnectionPath.ts
View File

@@ -14,8 +14,8 @@ function setToStableKey(s: Set<string>): string {
export type EdgeLike = { source: string; target: string } export type EdgeLike = { source: string; target: string }
/** Minimum time (ms) the connection ant trail runs when a path update is in progress. */ /** Short tail (ms) after last updating node ends so the path doesn't vanish instantly. */
const CONNECTION_PATH_UPDATE_MIN_MS = 1500 const CONNECTION_PATH_UPDATE_TAIL_MS = 200
export type UseCanvasConnectionPathResult = { export type UseCanvasConnectionPathResult = {
connectionPathUpdatingNodeIds: string[] connectionPathUpdatingNodeIds: string[]
@@ -41,7 +41,6 @@ export function useCanvasConnectionPath(edges: EdgeLike[]): UseCanvasConnectionP
const [connectionPathErrorNodeIds, setConnectionPathErrorNodeIds] = useState<string[]>([]) const [connectionPathErrorNodeIds, setConnectionPathErrorNodeIds] = useState<string[]>([])
const pathUpdateNodeIdsRef = useRef<Set<string>>(new Set()) const pathUpdateNodeIdsRef = useRef<Set<string>>(new Set())
const pathUpdateStartTimeRef = useRef<number | null>(null)
const pathUpdateEndTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null) const pathUpdateEndTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
const connectionPathPausedNodeIdsRef = useRef<string[]>([]) const connectionPathPausedNodeIdsRef = useRef<string[]>([])
connectionPathPausedNodeIdsRef.current = connectionPathPausedNodeIds connectionPathPausedNodeIdsRef.current = connectionPathPausedNodeIds
@@ -61,7 +60,6 @@ export function useCanvasConnectionPath(edges: EdgeLike[]): UseCanvasConnectionP
const ref = pathUpdateNodeIdsRef.current const ref = pathUpdateNodeIdsRef.current
ref.add(nodeId) ref.add(nodeId)
if (ref.size === 1) { if (ref.size === 1) {
pathUpdateStartTimeRef.current = Date.now()
if (pathUpdateEndTimeoutRef.current != null) { if (pathUpdateEndTimeoutRef.current != null) {
clearTimeout(pathUpdateEndTimeoutRef.current) clearTimeout(pathUpdateEndTimeoutRef.current)
pathUpdateEndTimeoutRef.current = null pathUpdateEndTimeoutRef.current = null
@@ -77,17 +75,10 @@ export function useCanvasConnectionPath(edges: EdgeLike[]): UseCanvasConnectionP
setConnectionPathUpdatingNodeIds(Array.from(ref)) setConnectionPathUpdatingNodeIds(Array.from(ref))
return return
} }
const startedAt = pathUpdateStartTimeRef.current ?? 0 pathUpdateEndTimeoutRef.current = setTimeout(() => {
const elapsed = Date.now() - startedAt pathUpdateEndTimeoutRef.current = null
const remaining = Math.max(0, CONNECTION_PATH_UPDATE_MIN_MS - elapsed)
if (remaining === 0) {
clearPathUpdateSession() clearPathUpdateSession()
} else { }, CONNECTION_PATH_UPDATE_TAIL_MS)
pathUpdateEndTimeoutRef.current = setTimeout(() => {
pathUpdateEndTimeoutRef.current = null
clearPathUpdateSession()
}, remaining)
}
}, [clearPathUpdateSession]) }, [clearPathUpdateSession])
const addConnectionPathTrigger = useCallback((nodeId: string) => { const addConnectionPathTrigger = useCallback((nodeId: string) => {

4
frontend/src/styles.css
View File

@@ -143,11 +143,11 @@ body {
fill: none; fill: none;
stroke-dasharray: 8 6; stroke-dasharray: 8 6;
stroke-dashoffset: 0; stroke-dashoffset: 0;
animation: edge-flow 1.2s linear infinite; animation: edge-flow 0.5s linear infinite;
will-change: stroke-dashoffset; will-change: stroke-dashoffset;
transform: translateZ(0); transform: translateZ(0);
backface-visibility: hidden; backface-visibility: hidden;
transition: stroke 0.4s ease-out; transition: stroke 0.2s ease-out;
} }
.react-flow__edge path.animated-edge-path.animated-edge-path--updating, .react-flow__edge path.animated-edge-path.animated-edge-path--updating,