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

feat: ant path rendering on cahnges

Browse Source
This commit is contained in:
authentik Default Admin
2026-03-11 22:08:08 +01:00
parent ea6bdeb05f
commit 1232d148e6
11 changed files with 322 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
frontend/src/styles.css
View File

@@ -24,9 +24,11 @@ body {
.react-flow__pane {
cursor: crosshair;
}
.react-flow.react-flow--panning .react-flow__pane {
cursor: grabbing;
}
.react-flow.react-flow--selecting .react-flow__pane {
cursor: crosshair;
}
@@ -133,26 +135,43 @@ body {
min-height: min-content;
}
/* Animated React Flow edges: thicker stroke + path animation */
/* Animated React Flow edges: ant trail always on; color shows updating path */
.react-flow__edge path.animated-edge-path,
.animated-edge-path {
stroke-width: 4;
stroke: hsl(var(--foreground) / 0.6);
stroke: hsl(var(--foreground) / 0.5);
fill: none;
stroke-dasharray: 8 6;
animation: edge-flow 0.6s linear infinite;
stroke-dashoffset: 0;
animation: edge-flow 1.2s linear infinite;
will-change: stroke-dashoffset;
transform: translateZ(0);
backface-visibility: hidden;
transition: stroke 0.4s ease-out;
}
.react-flow__edge path.animated-edge-path.animated-edge-path--updating,
.animated-edge-path.animated-edge-path--updating {
stroke: hsl(var(--primary));
}
@keyframes edge-flow {
from {
0% {
stroke-dashoffset: 14;
}
to {
100% {
stroke-dashoffset: 0;
}
}
/* Connection path roles: pushing (trigger) vs receiving (updating) — classes on BaseNode root */
.connection-path-trigger {
box-shadow: inset 3px 0 0 hsl(var(--primary));
}
.connection-path-updating {
box-shadow: inset 0 0 0 2px hsl(var(--primary) / 0.4);
}
/* NodeResizer: snappy drag; no border/background on handles; keep resize cursors. */
.react-flow__resize-control {
touch-action: none;
@@ -174,14 +193,37 @@ body {
}
/* Resize cursor per position (keep cursor style change on hover). */
.react-flow__resize-control.top.left { cursor: nw-resize; }
.react-flow__resize-control.top.right { cursor: ne-resize; }
.react-flow__resize-control.bottom.left { cursor: sw-resize; }
.react-flow__resize-control.bottom.right { cursor: se-resize; }
.react-flow__resize-control.top { cursor: n-resize; }
.react-flow__resize-control.right { cursor: e-resize; }
.react-flow__resize-control.bottom { cursor: s-resize; }
.react-flow__resize-control.left { cursor: w-resize; }
.react-flow__resize-control.top.left {
cursor: nw-resize;
}
.react-flow__resize-control.top.right {
cursor: ne-resize;
}
.react-flow__resize-control.bottom.left {
cursor: sw-resize;
}
.react-flow__resize-control.bottom.right {
cursor: se-resize;
}
.react-flow__resize-control.top {
cursor: n-resize;
}
.react-flow__resize-control.right {
cursor: e-resize;
}
.react-flow__resize-control.bottom {
cursor: s-resize;
}
.react-flow__resize-control.left {
cursor: w-resize;
}
/* Small helper for monospace pre output */
pre {