Danilka/Art-gallery
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve movement ribbon layout with collision-aware labels and hover highlight.

Browse Source 
Add FAC operator cheat sheet and link it from README and setup docs.
This commit is contained in:
Danila Khodjaef
2026-07-05 23:07:44 +03:00
parent 2edf577faf
commit aa31a2aa6e
5 changed files with 712 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/MovementBands.css
+39 -3
View File
@@ -112,12 +112,14 @@
stroke-linecap: round;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
transition: filter 0.2s ease, opacity 0.2s ease;
}
.movement-stream-fill {
stroke-width: var(--stream-stroke);
stroke-linecap: round;
vector-effect: non-scaling-stroke;
transition: filter 0.2s ease, opacity 0.2s ease;
}
.movement-stream-core {
@@ -127,6 +129,33 @@
stroke-dasharray: 8 6;
animation: stream-shimmer 16s linear infinite;
vector-effect: non-scaling-stroke;
transition: filter 0.2s ease, opacity 0.2s ease;
}
.movements-flow-canvas.movements-flow-movement-hover .movement-stream-fill:not(.movement-stream-highlighted) {
opacity: 0.55;
}
.movements-flow-canvas.movements-flow-movement-hover .movement-stream-core:not(.movement-stream-highlighted) {
opacity: 0.1;
}
.movements-flow-canvas.movements-flow-movement-hover .movement-branch:not(.movement-branch-highlighted) {
opacity: 0.45;
}
.movement-stream-fill.movement-stream-highlighted {
filter: brightness(1.65) saturate(1.3);
}
.movement-stream-core.movement-stream-highlighted {
opacity: 0.72;
filter: brightness(1.5);
stroke-width: 2.5px;
}
.movement-branch.movement-branch-highlighted {
filter: brightness(1.55) saturate(1.2);
}
@keyframes stream-shimmer {
@@ -201,16 +230,23 @@
position: absolute;
inset: 0;
pointer-events: none;
z-index: 3;
z-index: 6;
}
.movement-flow-label {
position: absolute;
transform: translate(-4px, -100%);
max-width: 160px;
padding: 2px 6px;
pointer-events: none;
z-index: 3;
z-index: 6;
}
.movement-flow-label-above {
transform: translate(-4px, -100%);
}
.movement-flow-label-below {
transform: translate(-4px, 0);
}
.movement-flow-label-btn {