adminandClaude Opus 5.5
2ff3a78607
A vector drawing was one flat list of shapes. With many shapes the list got hard to read, and several shapes could not be kept or moved together. Now the shapes stand on layers, as in pixel art, and can be put into groups that nest. - A drawing has layers, each with a name and an eye. A hidden layer is neither in the tab nor in the picture a sprite wears, and its shapes cannot be pressed. One layer is the one worked on: the pen and Add shape draw onto it, and SHAPES lists what is on it. - The inspector has a list LAYERS over the shapes. Its plus adds a layer, the cross on a row removes it with all on it, the last one stays. A double-click renames, a drag sorts. - Group (Ctrl+G) puts the selected shapes into a group, Ungroup (Ctrl+Shift+G) takes it away. A group stands over its rows in the list, the rows one step in, and a row is dragged into a group or out of it. - In the tab a press on a shape takes its outermost group, and a drag moves the group as one undo step. - The model has layers with a tree of shapes and groups instead of a flat shapes array. The rules are pure functions in core/model/vectorTree.ts. A drawing saved before opens with all its shapes on one layer. - SortableList takes rows with a depth and drops into a tree. The flat lists of tilemap and pixel art run as before. Decided here: - A group has no transformation of its own and cannot be hidden or locked. Rotating and scaling is the follow-up #291. - A group is never empty: the one that loses its last shape goes with it. - Several selected shapes are dragged together, grouped or not, and a click on a shape of the selection keeps the selection. This is what #217 asked for. - Shift+click selects like Ctrl+click. With Select, Shift pans only beside the shapes, as in the scene view. The middle button pans anywhere, and with the pen and Paint Shift pans as before. - A row of the list picks one shape of a group alone. - Shapes change their layer through a row Layer in the inspector, which is there from two layers on. Rows are not dragged between layers. - A group cannot span two layers, the button is off then. - The pen does not draw onto a hidden layer, the hint says so. - Groups are always shown unfolded. - The four order buttons work inside the own group or layer. Tests: - Gate: 204 files, 3067 tests (3008 + 59), exit 0 - e2e 47,48: 108 checks. e2e 39,40,47,48 before the Shift change: 209 checks. No full run, the sum of 1645 (1639 + 6) is reckoned and CI measures it. - 59 unit tests: 36 in tests/core/vector-tree.test.ts, 23 in tests/editor/vector-layers.test.ts - Six e2e checks with a real mouse in block 47j - 47 unit counter-probes for layers and groups and three for the Shift click all fail tests, run on stein2 - Three browser counter-probes fail their checks - Two screenshots looked at (group in the list, hidden layer) - Only unit tested: the row Layer, sorting and removing layers, copying a group, the Shift pan beside the shapes Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
72 lines
2.7 KiB
TypeScript
72 lines
2.7 KiB
TypeScript
import { ui } from '../ui';
|
||
import { createContainer, removeSelection } from './actions';
|
||
import type { EditorState } from './state';
|
||
import { groupShapes, ungroupShapes } from './vectorart/grouping';
|
||
|
||
export interface ShortcutActions {
|
||
play(): void;
|
||
stop(): void;
|
||
togglePause(): void;
|
||
/**
|
||
* Copy and paste of what the visible tab edits: keys (#102), objects and graph pieces (#240).
|
||
* False when there is nothing to do, so the key falls through.
|
||
*/
|
||
copy(): boolean;
|
||
paste(): boolean;
|
||
/**
|
||
* Delete on a point the visible tab has picked inside the selection (#288) – a corner of a polygon
|
||
* collider or of an outline, a point of a shape or a curve. False while none is, so the key takes
|
||
* the selection itself.
|
||
*/
|
||
removePoint(): boolean;
|
||
}
|
||
|
||
/**
|
||
* Global keyboard shortcuts (see the wiki page "Keyboard"). Text fields keep their own key handling;
|
||
* these only run when no focused widget consumed the key. Returns the call that takes them away
|
||
* again – signing out tears the editor down while the page stays up (#177).
|
||
*/
|
||
export function installShortcuts(state: EditorState, actions: ShortcutActions): () => void {
|
||
return ui().focus.onGlobalKey((event) => {
|
||
const mod = event.ctrlKey || event.metaKey;
|
||
const key = event.key.toLowerCase();
|
||
// The eyedropper's two keys come first (#276): Enter writes its candidate, Escape leaves without.
|
||
if (state.objectPick && !mod && (event.key === 'Enter' || event.key === 'Escape')) {
|
||
state.endObjectPick(event.key === 'Enter' ? 'take' : 'cancel');
|
||
return true;
|
||
}
|
||
if (event.key === 'Escape' && state.mode === 'play') {
|
||
actions.stop();
|
||
return true;
|
||
}
|
||
if (mod && key === 'z') {
|
||
if (event.shiftKey) state.redo();
|
||
else state.undo();
|
||
return true;
|
||
}
|
||
if (mod && key === 'y') {
|
||
state.redo();
|
||
return true;
|
||
}
|
||
if (mod && key === 'c') return actions.copy();
|
||
if (mod && key === 'v') return actions.paste();
|
||
if (mod && key === 'g') {
|
||
const s = state.selection;
|
||
if (s?.kind === 'object') createContainer(state, s.holderId, s.objectIds);
|
||
// On the shapes of a vector drawing it groups them, and with Shift takes the group away (#190).
|
||
else if (s?.kind === 'shape') (event.shiftKey ? ungroupShapes : groupShapes)(state, s.assetId);
|
||
return true;
|
||
}
|
||
if (event.key === 'Delete' || event.key === 'Backspace')
|
||
return actions.removePoint() || removeSelection(state);
|
||
// Ctrl+Enter starts play and then holds/resumes it. A plain letter would be taken away from
|
||
// the game, which owns the keyboard while playing.
|
||
if (mod && event.key === 'Enter') {
|
||
if (state.mode === 'edit') actions.play();
|
||
else actions.togglePause();
|
||
return true;
|
||
}
|
||
return false;
|
||
});
|
||
}
|