Layer, frame and shape lists all reorder by drag and drop
Reordering shapes by dragging worked well in the vector tab. Pixel art layers and frames and tilemap layers still used up/down buttons. All three lists now share one widget built from the shape list. - SortableList in the UI toolkit, with the drag rules next to it in src/ui/sortable.ts. A row has an optional thumbnail, a name, a hint on the right and an eye toggle. Every drop is one undo step. - The shape list is a thin wrapper around it. shapeRows.ts is gone, its tests moved to the new rules. - Pixel art layers show the layer alone on the current frame, frames show the whole frame. Up/Down, Hide, Earlier and Later are gone. - Tilemap layers get the eye instead of the checkbox. The per-row up, down and delete buttons are replaced by Delete layer next to Add layer. - A row is selected on release instead of press. Selecting rebuilt the inspector or tilemap panel and cancelled a drag that started on a row not yet selected. Tests: - ./check.sh: 138 files, 2052 tests, exit 0 (before 137 / 2051). - GM_STEPS=39,40,47,48 (fresh seed): ALL PASSED, 154 checks. - 5 new e2e checks. Check total 1264 in the README is computed (1259 + 5), CI never measured 1259. - Counter-checks bite: dropMove ignoring reversed fails a unit test, a tilemap drop not applied fails the drag check, a layer thumbnail showing all layers fails the thumbnail check. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
1 parent
8adef83f23
commit
5b9b57fd19
14 files changed
+699
-326
No files matched your search
@@ -0,0 +1,38 @@
|
||||
/**
|
||||
* How a sortable list maps between what is on screen and what its owner holds. A layer list shows the
|
||||
* drawing order upside down – the item drawn last is the topmost row – so every index has two
|
||||
* readings, and dropping a dragged row has a third: the place it lands in is counted with the row
|
||||
* still in the list, while the model takes it out first.
|
||||
*
|
||||
* Kept apart from the widget so the arithmetic can be measured without a canvas.
|
||||
*/
|
||||
|
||||
/** The ids as the list shows them, top first. `reversed` puts the model's last item on top. */
|
||||
export function rowOrder<T>(ids: readonly T[], reversed: boolean): T[] {
|
||||
return reversed ? [...ids].reverse() : [...ids];
|
||||
}
|
||||
|
||||
/** The gap a row dropped at `y` falls into, 0…count – the boundary above row 0 being 0. */
|
||||
export function dropGap(count: number, y: number, rowHeight: number): number {
|
||||
if (rowHeight <= 0) return 0;
|
||||
return Math.max(0, Math.min(count, Math.round(y / rowHeight)));
|
||||
}
|
||||
|
||||
/**
|
||||
* The move a drop makes, in model indices, or null when the row would land where it already is.
|
||||
* `fromRow` and `gap` are in display positions; a gap below the dragged row counts that row itself,
|
||||
* which the model does not once it has taken it out.
|
||||
*/
|
||||
export function dropMove(
|
||||
count: number,
|
||||
fromRow: number,
|
||||
gap: number,
|
||||
reversed: boolean,
|
||||
): { from: number; to: number } | null {
|
||||
if (fromRow < 0 || fromRow >= count) return null;
|
||||
const toRow = gap > fromRow ? gap - 1 : gap;
|
||||
if (toRow === fromRow || toRow < 0 || toRow >= count) return null;
|
||||
if (!reversed) return { from: fromRow, to: toRow };
|
||||
const last = count - 1;
|
||||
return { from: last - fromRow, to: last - toRow };
|
||||
}
|
||||
Reference in new issue
Block a user