From 82a952c04ba6ba20b30a5eb7dbf7e87407fd4df3 Mon Sep 17 00:00:00 2001 From: meleki Date: Fri, 2 Oct 2026 12:03:03 +0200 Subject: [PATCH] Tooltips: what a button without words says on hover (#209) Architecture has the paragraph on the tooltip layer and its rule, Concepts names the tooltips of the top bar, Development carries the sum of 1667 e2e checks. --- Architecture.md | 19 ++++++++++++++++++- Concepts.md | 5 ++++- Development.md | 2 +- 3 files changed, 23 insertions(+), 3 deletions(-) diff --git a/Architecture.md b/Architecture.md index f2e03f5..8e61f44 100644 --- a/Architecture.md +++ b/Architecture.md @@ -40,6 +40,23 @@ so the stage is nudged by 1/32 px (`tieBreakFor`), which sends every tie the same way. What this does not give is the subpixel smoothing a browser applies to its own text: Pixi draws a text into a transparent picture first, and there only greyscale smoothing is possible. + **Tooltips** (#209). A `Button` takes a `tooltip` — a text, or a function asked each time — and + shows it on a small sign once the pointer has rested on it for half a second. A button without + one says its own label where that had to be cut short, which is how a tab with a long name shows + the whole of it. There is one sign for the whole page (`tooltips`, a `TooltipLayer` in + `ui/widgets/Tooltip.ts`), on the overlay above the menus: a control reports each pointer move + over itself (`point`) and the pointer leaving (`leave`), the layer does the waiting. A press, a + key or the wheel takes the sign away (`initUI` listens on the window), and the control stays + quiet until the pointer has left it. `placeTooltip` in `ui/tooltip.ts` is the rule for the + place, a pure function: under the control and flush with its left edge, flush with its right + edge where the sign would leave the screen on the right, above the control at the bottom. + A widget that draws its own marks reports them the same way with a key per mark — the eye, the + duplicate mark, the cross and the plus of a `SortableList`. What a sign says is decided where + the button is made: `toolbarTip` for the top bar ("Undo Paint tiles (Ctrl+Z)", from + `CommandStack.undoLabel`), `rowActionTip` for the row actions of the inspector (the one thing a + click would do, or the name of the group once it opens a menu). A button that is greyed out + takes no pointer events and so shows no sign. `__gm.tooltip()` reports the sign on screen with + its box and the box of its control; the text hooks (`locate`, `has`) do not see it. Double-clicks are counted in `clicks.ts`, not read off the event: Pixi only puts a click count on the `click` it synthesises and leaves `detail` at 0 on `pointerdown`, so every press handler that trusted `e.detail` never saw a second click. Presses are counted per key rather than per @@ -248,7 +265,7 @@ src/editor/panels/ AssetPanel, assetGroups (groups by type and their order, 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 dropping a row does, group rows included) + GroupNameDialog, - Toolbar + toolbarIcons (icon buttons, no captions: menu, undo, redo, play, pause, #183, and the eye + 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), SceneVisibilityPopup (behind the eye: symbol, name and collider outline per type), headerIcons (the pictures of the tab headers' switches: the magnet, #194), diff --git a/Concepts.md b/Concepts.md index e85c96e..1a6a8f3 100644 --- a/Concepts.md +++ b/Concepts.md @@ -156,7 +156,10 @@ as the Game tab in its top right corner (#267); a click on it never reaches the **menu** (three bars) on the left with *New project*, *Open project…*, *Snapshots…*, *Release…* and *Project settings…*, **undo** and **redo** beside it, and **play** and **pause** in the middle — on the middle of the window, not of the space the row has left over — where play turns into a stop square while a run is -on, and pause into a second play sign while it is held. On the right stand the +on, and pause into a second play sign while it is held. Rest the pointer on one of them and a +**tooltip** says what it does and which keys do the same (#209); undo and redo name the step they +would take, as in *Undo Paint tiles (Ctrl+Z)*. Every other button that carries a picture instead +of words has one too, and a tab whose name was cut short shows the whole name. On the right stand the notice line, the save status, the frame rate and the **Account** menu. What the bar used to spell out lives in the menu now: the project list in *Open project…*, the project name, the **start-scene switch** (*Start scene* / *Active scene*, see **Start scene**), the **While playing** diff --git a/Development.md b/Development.md index c5da7ab..bd9ec68 100644 --- a/Development.md +++ b/Development.md @@ -18,7 +18,7 @@ php tests/php/accounts.test.php # the API's accoun # has and the web server's container has not (SKIP there) 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 -node tools/seed-e2e.mjs && node tools/e2e.mjs # 1664 editor checks, screenshots in /tmp/gm-e2e-*.png +node tools/seed-e2e.mjs && node tools/e2e.mjs # 1667 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