noe/arthur
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Drag symbols onto the stage or the timeline, with previews

Browse source 
A symbol dragged out of the pool shows where it would land: on the stage, a
dashed outline of its first frame centred on the pointer, and on the timeline
a preview row of its own length. A stage drop places it at the playhead under
the pointer; a timeline drop places it at the frame under the pointer, in its
own coordinates. A drop that would make a cycle is refused while hovering.
Pool thumbnails are capped at 40x30.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Olive Vaughn 2026-09-29 13:06:38 -04:00
parent d5f044c6da
commit f590ff19cf
7 changed files with 267 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

23
static/arthur/app.css
View file

@ -308,6 +308,8 @@ input[type="range"] { width: 100%; accent-color: var(--sel); }
flex: 0 0 40px;
width: 40px;
height: 30px;
max-width: 40px;
max-height: 30px;
object-fit: cover;
background: var(--stage);
border-radius: 2px;
@ -430,6 +432,19 @@ input[type="range"] { width: 100%; accent-color: var(--sel); }
.paint-overlay.drawing { cursor: crosshair; }
.paint-overlay circle { cursor: grab; }
/* Where a drag out of the pool would land. Dashed and unfilled, so it reads as
"not there yet" over whatever is already drawn. */
/* Never a hit target: it is drawn under the pointer, and anything under the
pointer that changes mid-drag gets a dragenter of its own. */
.paint-overlay .ghost { pointer-events: none; }
.paint-overlay .ghost > * {
fill: none;
stroke: #fff1be;
stroke-width: 1;
stroke-dasharray: 3 2;
vector-effect: non-scaling-stroke;
}
/* --------------------------------------------------------------------------
params */
@ -582,6 +597,14 @@ input[type="range"] { width: 100%; accent-color: var(--sel); }
-45deg, var(--span) 0 3px, #c3d4ea 3px 6px);
}
/* The preview row of a drop in flight: its own length, where it would start. */
.tl-span.ghost, .tl-label.ghost { pointer-events: none; }
.tl-span.ghost {
background: transparent;
border: 1px dashed var(--sel);
}
.tl-label.ghost { color: var(--sel); font-style: italic; }
/* Flash's keyframe: a filled dot. */
.tl-key {
position: absolute;