diff --git a/Architecture.md b/Architecture.md index e28f2ff..e84336b 100644 --- a/Architecture.md +++ b/Architecture.md @@ -70,8 +70,12 @@ the scrolling part — and it *measures* that chrome (a search box, a header, a row of buttons) rather than repeating it as a number, so no popup can forget one. A fixed cap would waste a tall screen or overflow a short one, and a constant gap that frames a popup on a laptop is a hairline - on a large screen. It is what holds the whole `+` menu of seventeen asset types on screen, and what - lets the image, font and sound pickers show six rows of what the server has instead of two. + on a large screen. It is what lets the image, font and sound pickers show six rows of what the + server has instead of two. + A **submenu** (`MenuSubmenu`, an entry with `submenu` instead of `onSelect`) is a second `Menu` + built with `under` set, opened right of its menu (left of it where the canvas ends), and without + a backdrop or Escape of its own: a backdrop would cover the menu below it, and the first menu's + backdrop and Escape close the whole stack. Picking an entry closes the stack from its first menu. A popup that does not fit below its anchor is still *moved* up rather than squeezed, and `clampPopupY()` enforces the tenth while moving it — otherwise the gap ends up entirely above it and the popup sits flush on the bottom edge, which is exactly what it used to do. @@ -303,10 +307,10 @@ src/editor/inspector/ Inspector panel, host (what a section builds into, and `e objectQueries/vectorRows/parentRow, cutSection (the Nine-slice and Sorting rows, shared by the frame and the drawing inspectors, #308), SpritePreview (a sprite as `syncSpriteMesh` draws it in the scene) + previewFit (whole device pixels per unit, the corner on one) -src/editor/panels/ AssetPanel, assetGroups (groups by type and their order, #176), assetIcons (one SVG per +src/editor/panels/ AssetPanel, assetGroups (the categories, the type groups in them and their order, #176), assetIcons (one SVG per asset type in icons/, shared by the panel, the + menu, the tabs and Scene objects, plus the List, Game, Plugins and User management tabs' own four, which stand for no asset), - assetMenu (the two groups of the + menu), HierarchyPanel + hierarchyDrop (#241: what + assetMenu (the categories of the + menu and their types), HierarchyPanel + hierarchyDrop (#241: what dropping a row does, group rows included) + GroupNameDialog, Toolbar + toolbarIcons + toolbarTips (icon buttons, no captions: menu, undo, redo, play, pause, #183, what each says as a tooltip, #209, and the eye the scene tab's header wears, see ScenePane), diff --git a/Concepts.md b/Concepts.md index f879de3..a70d537 100644 --- a/Concepts.md +++ b/Concepts.md @@ -219,18 +219,27 @@ render layers in *Project settings…*. What is about the person at the screen r project is in *General settings…* (#309), kept in this browser and the same in every project: the **zoom transition** (see below). A project is deleted in *Open project…*: **Delete** asks first, and Cancel, Esc and the deletion itself all lead back to the project list. The active scene is picked where the scenes are — by double-clicking -one in the **Assets** panel. The **Assets** panel's `+` creates an asset and opens its tab; its menu lists the types in -two alphabetical groups, first what can be placed into a scene, then what only lives in the library -(#43) — the line between them answers the question that follows right after "which type?". +one in the **Assets** panel. The **Assets** panel's `+` creates an asset and opens its tab; its menu lists the categories of +the panel (*Basics*, *Visuals*, *Logics*, *Physics*, *Audio*), and each opens a **submenu** beside it +with the types of that category, sorted by name — the same filing as in the panel, so a new asset +turns up where you looked for its kind. A submenu opens as soon as the pointer rests on its +category or on a click; moving on to another category swaps it after a short wait, so a pointer +crossing the rows on its way into a submenu does not take it away. Picking a type closes both, and +so do Escape and a click beside them. (Until then the menu was one list in two groups, placeable +types and library ones, #43.) A right-click on a group heading or on the empty space below the rows opens the same menu (#244); a right-click on an asset keeps its own menu. Every type has an **icon** of its own, the same wherever the type shows: in the `+` menu, on the asset panel's groups, on a document's tab and at the end of a row in **Scene objects** (#176). -The asset panel **groups by type** (#176): one heading per type that has assets, with its icon and -the count at the right, groups and the assets inside them sorted by name. Every group starts -**folded** when a project opens; a click anywhere on a heading folds or unfolds it, and a heading -is never selected. Selecting an asset from elsewhere (a picker, a graph, a new asset) unfolds its -group; folding the group the selected asset sits in lets go of the selection. +The asset panel **groups by category and type** (#176). On top are the categories *Basics*, +*Visuals*, *Logics*, *Physics* and *Audio*, always in that order. Under each is one heading per type +that has assets, named like its `+` menu entry (*Scene*, *Sprite*, *Sound FX*), with its icon and +the count at the right. Groups and the assets inside them are sorted by name. Which category a type +belongs to is set in `ASSET_GROUPS` (`editor/panels/assetGroups.ts`). When a project opens, every +category is **open** and every group **folded**; a click anywhere on a heading folds or unfolds it, +and a heading is never selected. Selecting an asset from elsewhere (a picker, a graph, a new asset) +unfolds its category and its group; folding the category or group the selected asset sits in lets +go of the selection. A click on a row only selects (the inspector shows it, no tab moves); a **double-click** opens the asset as a document in a tab of its own (see **The tab row**) — a behavior, state machine, shader, particles, diff --git a/Development.md b/Development.md index e4742cc..5202662 100644 --- a/Development.md +++ b/Development.md @@ -19,7 +19,7 @@ php tests/php/accounts.test.php # the API's accoun php tests/php/snapshots.test.php # the snapshot store (#231), the same way php tests/php/releases.test.php # the release store (#266), the same way php tests/php/files.test.php # uploaded files in a folder per account (#344), the same way -node tools/seed-e2e.mjs && node tools/e2e.mjs # 1863 editor checks, screenshots in /tmp/gm-e2e-*.png +node tools/seed-e2e.mjs && node tools/e2e.mjs # 1864 editor checks, screenshots in /tmp/gm-e2e-*.png GM_STEPS=20 node tools/e2e.mjs # or 1-12, or 6,20 — a subset while working on one step ./e2e.sh start [GM_STEPS] # the same run detached, see below ./e2e.sh status # live progress, or the last run's result @@ -125,15 +125,25 @@ not by clicking its name: since the tenth tab the row hides some of them at the and the helper goes through the `»` menu when it has to. Clicking the label directly took the whole suite down the day the Particles tab was added. -The same holds for the **`+` menu**: it has one entry per asset type, and an entry below the mask -edge is still found by `locate` while a click on it lands on nothing. The fourteenth type -(Variables) pushed `Font` under that edge and took the font step down, because only the particles -step had carried a workaround of its own; sound is the fifteenth, the tile the sixteenth and the tilemap the seventeenth. Since #43 a menu may grow to the -height of the canvas, so on the test window all seventeen stand on screen at once — the step still -picks a type with `pickAssetType(t, 'Font')` from the same file, which keeps the scroll as insurance -for a shorter window. The menu's own order is checked in the assets step through `__gm.menuRows()`: -two alphabetical groups, placeable types then library ones, one separator between them. Order is -the whole answer there, and no colour check can see an order. +The same holds for the **`+` menu**. A step picks a type with `pickAssetType(t, 'Font')` from the +same file: it asks `__gm.addMenuCategory('Font')` which category holds the type, clicks that +category, and picks the type inside the submenu that opens. It keeps a scroll as insurance for a +short window, since an entry below the mask edge is still found by `locate` while a click on it +lands on nothing (that is what took the font step down when the menu was one long list). A step +that wants to look at the entries itself clicks the category first; from then on +`__gm.menuRows()`, `__gm.menuIcons()` and `__gm.overlayRect()` describe the submenu, and +`__gm.menuSubmenus()` tells which rows open one. The assets step checks the order of the +categories and the sorted types under each. Order is the whole answer there, and no colour check +can see an order. + +**An open popup wins over what is beneath it.** `locate` (and with it `find`, `has` and +`clickText`) takes the first text in drawing order, and the editor is drawn before any popup. +Since the asset panel's headings are named like the `+` menu entries (*Behavior*, *Sprite*, *Text*), +a click meant for an entry would have folded a heading. So `locate` looks in the popup layer +(`ui().overlay`) first and only then in the rest; `locate(text, true)` stays "the topmost". This +matches the screen: below an open menu a click only closes the menu. `04-assets` checks it with the +word *Behavior* on screen twice. The categories (*Logics*) read like the panel's category headings +in the same way. A submenu lies on the popup layer too, above the menu it hangs off. The node palette has the same property, and `__gm.graph.paletteRows()` is its witness: the rows all look alike, only their sequence says whether the search ranked them (#43).