Inspector: Gruppen mit Kopf als Band gliedern #290

Closed
opened 2026-10-01 18:26:23 +02:00 by meleki · 2 comments
Owner

Aus dem Benchmark-Lauf des Engine-Prompts (benchmark/engine-prompt.md, defc34b): Dort hat jede Gruppe im Inspector einen Kopf als durchgehendes Band mit Trennlinie. Das gefällt dem User besser als unsere Titelzeilen. Das Bild unten zeigt den Inspector aus dem Benchmark-Lauf.

Stand heute

  • Die Gruppen gibt es schon: addTitle in src/editor/inspector/host.ts setzt eine Zeile wie SPRITE OBJECT, POSITION, TRANSFORM, EDITOR OFFSET (SCENE VIEW ONLY), PROPERTIES oder VARIABLES.
  • Der Titel ist aber nur ein kleines graues Label in Großbuchstaben, im selben Raster und mit demselben Abstand wie eine Property-Zeile. Bei vielen Zeilen hebt sich eine Gruppe kaum von der nächsten ab.
  • Bei einem Behavior stehen Enabled, Run in editor und Run while paused direkt unter Name, Asset und Parent, ohne eigenen Kopf.

Zu bauen (Vorschlag)

  • Gruppenkopf als Band: volle Breite des Panels, eigener Hintergrund, Trennlinie oben und unten, Titel in normaler Schreibweise statt in Großbuchstaben (wie im Bild „Object“ und „Camera properties“).
  • Ein Baustein dafür im UI-Toolkit, den addTitle benutzt. Damit bekommen ihn alle Sections auf einmal: Objekt, Asset, Node, Frame, Shape, Track, Annotation.
  • Die Köpfe mit Knopf (VARIABLES mit Open, FIELDS) bekommen dasselbe Band, der Knopf sitzt rechts darin.
  • Die Zeilen darunter behalten ihr Raster.

Offene Fragen

  1. Benennung: Bleiben unsere Titel (POSITION, TRANSFORM, PROPERTIES), oder heißt die letzte Gruppe wie im Bild nach dem Typ („Camera properties“, „Sprite properties“)?
  2. Einklappbar? Ein Band lädt dazu ein, die Gruppe per Klick auf- und zuzuklappen. Soll das gleich mit, und wenn ja: gemerkt pro Gruppe für die Sitzung oder dauerhaft?
  3. Schalter als eigene Gruppe: Sollen Enabled, Keep on scene load und die Behavior-Schalter aus dem Kopfblock in eine eigene Gruppe wandern?
  4. Andere Panels: Gilt das Band auch für die Property-Listen in den Tabs (Variables-Tab, Kopf im Curve- und Pixel-Art-Tab), oder nur für den Inspector?

Tests (Vorschlag)

  • Unit für den Baustein: Höhe, Breite über das ganze Panel, der Knopf rechts bleibt klickbar.
  • e2e: Screenshot des Inspectors mit einem Sprite und mit einem Behavior, angesehen. Pixelprobe, dass das Band über die ganze Breite geht und sich vom Hintergrund der Zeilen unterscheidet.
  • Viele Module klicken Inspector-Zeilen über ihre Position an. Wächst die Höhe eines Kopfes, verschieben sich die Zeilen darunter: Die Hooks liefern die Position, feste Koordinaten dürfte es nicht geben. Deshalb den vollen e2e-Lauf fahren.

Bild

Inspector aus dem Benchmark-Lauf

Aus dem Benchmark-Lauf des Engine-Prompts (`benchmark/engine-prompt.md`, `defc34b`): Dort hat jede Gruppe im Inspector einen Kopf als durchgehendes Band mit Trennlinie. Das gefällt dem User besser als unsere Titelzeilen. Das Bild unten zeigt den Inspector aus dem Benchmark-Lauf. ## Stand heute - Die Gruppen gibt es schon: `addTitle` in `src/editor/inspector/host.ts` setzt eine Zeile wie `SPRITE OBJECT`, `POSITION`, `TRANSFORM`, `EDITOR OFFSET (SCENE VIEW ONLY)`, `PROPERTIES` oder `VARIABLES`. - Der Titel ist aber nur ein kleines graues Label in Großbuchstaben, im selben Raster und mit demselben Abstand wie eine Property-Zeile. Bei vielen Zeilen hebt sich eine Gruppe kaum von der nächsten ab. - Bei einem Behavior stehen *Enabled*, *Run in editor* und *Run while paused* direkt unter Name, Asset und Parent, ohne eigenen Kopf. ## Zu bauen (Vorschlag) - **Gruppenkopf als Band:** volle Breite des Panels, eigener Hintergrund, Trennlinie oben und unten, Titel in normaler Schreibweise statt in Großbuchstaben (wie im Bild „Object“ und „Camera properties“). - Ein Baustein dafür im UI-Toolkit, den `addTitle` benutzt. Damit bekommen ihn alle Sections auf einmal: Objekt, Asset, Node, Frame, Shape, Track, Annotation. - Die Köpfe mit Knopf (`VARIABLES` mit *Open*, `FIELDS`) bekommen dasselbe Band, der Knopf sitzt rechts darin. - Die Zeilen darunter behalten ihr Raster. ## Offene Fragen 1. **Benennung:** Bleiben unsere Titel (`POSITION`, `TRANSFORM`, `PROPERTIES`), oder heißt die letzte Gruppe wie im Bild nach dem Typ („Camera properties“, „Sprite properties“)? 2. **Einklappbar?** Ein Band lädt dazu ein, die Gruppe per Klick auf- und zuzuklappen. Soll das gleich mit, und wenn ja: gemerkt pro Gruppe für die Sitzung oder dauerhaft? 3. **Schalter als eigene Gruppe:** Sollen *Enabled*, *Keep on scene load* und die Behavior-Schalter aus dem Kopfblock in eine eigene Gruppe wandern? 4. **Andere Panels:** Gilt das Band auch für die Property-Listen in den Tabs (Variables-Tab, Kopf im Curve- und Pixel-Art-Tab), oder nur für den Inspector? ## Tests (Vorschlag) - Unit für den Baustein: Höhe, Breite über das ganze Panel, der Knopf rechts bleibt klickbar. - e2e: Screenshot des Inspectors mit einem Sprite und mit einem Behavior, angesehen. Pixelprobe, dass das Band über die ganze Breite geht und sich vom Hintergrund der Zeilen unterscheidet. - Viele Module klicken Inspector-Zeilen über ihre Position an. Wächst die Höhe eines Kopfes, verschieben sich die Zeilen darunter: Die Hooks liefern die Position, feste Koordinaten dürfte es nicht geben. Deshalb den vollen e2e-Lauf fahren. ## Bild ![Inspector aus dem Benchmark-Lauf](http://git.nockal.com/attachments/42c26cbb-af7d-445a-b0bc-d4f8c735868b)
admin added this to the Development project 2026-10-01 18:31:49 +02:00
admin moved this to Next in Development on 2026-10-01 18:31:56 +02:00
  1. Unsere Titel bleiben wie sie sind
  2. Einklappbar
  3. Ja, das wäre wahrscheinlich strukturell schöner
  4. Ja, in alle Panels die so aufgebaut sind (Variables Tab, Tilemap Zusatz-Panel, Pixel-Art Tab, Vector Art Tab, was du mit Curve Tab meinst weiß ich nicht weil da gibt es keine eigenes Panel?)
1. Unsere Titel bleiben wie sie sind 2. Einklappbar 3. Ja, das wäre wahrscheinlich strukturell schöner 4. Ja, in alle Panels die so aufgebaut sind (Variables Tab, Tilemap Zusatz-Panel, Pixel-Art Tab, Vector Art Tab, was du mit Curve Tab meinst weiß ich nicht weil da gibt es keine eigenes Panel?)
admin moved this to Done in Development on 2026-10-01 22:07:37 +02:00
Author
Owner

Done in 393caad, wiki 6e8426c (Concepts, Architecture, Scenes, Development).

What changes
Every group of rows has a band as its head now, and a click on the band folds the group.

  • Band: from edge to edge of the panel in the header colour, with the title and a mark in front that says whether the group is open. The titles stay as they are (answer 1).
  • Fold: a click on a band takes the rows of its group away, the band stays and the next band moves up against it. Another click brings them back (answer 2). A control in the band (Open, + Variable, + Property) does its own job and folds nothing.
  • Switches: a placed object has a group SWITCHES under its name, asset and parent, with Enabled, Keep on scene load and the switches of a behavior. An asset has SWITCHES and PROPERTIES, and a group without rows is left out (answer 3).
  • Other panels: the same bands head the tilemap panel, the Variables tab, the side of the Pixel art tab and the shape list of vector art in the inspector. A list with a header of its own (Layers, Frames, Shapes) folds with a click on that header, clear of its plus (answer 4).

Decided here

  • A fold is kept for good, in localStorage of this browser. The issue asked "for the session or for good", the answer said only "foldable".
  • A fold is remembered by title, per panel. PROPERTIES folded once is folded on every object, asset and node, and after a reload. A number in a title does not count, so Key at frame 12 and Key at frame 3 are one group. The inspector, the tilemap panel, the Variables tab and the Pixel art side each keep their own.
  • A behavior asset has all its rows under SWITCHES, since what it declares stands under VARIABLES. A Variables asset and a state machine get a group SCOPE.
  • A greyed out control in a band takes the click too. Without that the click fell through to the band and folded the group.
  • The Curve tab has no column of this kind, as said in the answer, and is unchanged.

Under the hood

  • src/ui/sections.ts holds the rules as pure functions (hiddenBySections, sectionOffsets). SectionStack is the column, SectionHeader the band, and a SortableList with a title opens a group the same way.
  • The toolkit only folds. Which groups are folded is kept in src/editor/sectionFolds.ts, one entry game-maker.folded-sections.
  • Every title of the inspector goes through addTitle or sectionHeader in inspector/host.ts, so a new section gets the band by itself.
  • New hooks: __gm.section(title) and __gm.pixelArt.control('layer:head' | 'frame:head').

Found on the way

  • The inspector of a sprite is taller than the 800 pixel window of the checks now. The hooks that hand out a row scroll it into view first (Inspector.reveal), and module 28 scrolls before it looks for a row by its text.
  • A fold stays in the browser between modules. A check that folds has to unfold again, 02 and 48 do.

Tests (on melektaus-atx)

gate        202 files, 3008 tests, CHECK EXIT 0 (2982 + 26)
e2e         no complete run for the committed state
  • e2e for the committed state: modules 28 to 61 passed alone (749 checks). A full run was cut off in the accounts module at 1492 passes without a failure. The modules after it and the smokes are missing.
  • A first full run, before the last fixes, found two failing checks. Both are fixed (the hooks and module 28 above).
  • The sum of 1639 (1635 + 4) in README and wiki is reckoned, not measured. The CI run for 393caad measures it and was not waited for.
  • 26 unit tests in tests/editor/sections.test.ts.
  • Four e2e checks with a real mouse: three in module 02 (band and its colour by pixel, the group of switches, fold and its memory across objects), one in module 48 (the header of a list).
  • Screenshots of the bands looked at before the last build (inspector, tilemap panel, Pixel art side, shape list), none after it.
Counter-check Result
25 in the unit tests all work
Browser, band in the colour of the panel run, result not noted
Browser, a click that does not fold run, result not noted
  • The unit counter-checks ran on stein2, not in the container.
  • The 1635 before this change are measured (CI run 280 for c5ba215 is green).
Done in `393caad`, wiki `6e8426c` (*Concepts*, *Architecture*, *Scenes*, *Development*). **What changes** Every group of rows has a band as its head now, and a click on the band folds the group. - **Band:** from edge to edge of the panel in the header colour, with the title and a mark in front that says whether the group is open. The titles stay as they are (answer 1). - **Fold:** a click on a band takes the rows of its group away, the band stays and the next band moves up against it. Another click brings them back (answer 2). A control in the band (*Open*, *+ Variable*, *+ Property*) does its own job and folds nothing. - **Switches:** a placed object has a group `SWITCHES` under its name, asset and parent, with *Enabled*, *Keep on scene load* and the switches of a behavior. An asset has `SWITCHES` and `PROPERTIES`, and a group without rows is left out (answer 3). - **Other panels:** the same bands head the tilemap panel, the Variables tab, the side of the Pixel art tab and the shape list of vector art in the inspector. A list with a header of its own (*Layers*, *Frames*, *Shapes*) folds with a click on that header, clear of its plus (answer 4). **Decided here** - **A fold is kept for good**, in `localStorage` of this browser. The issue asked "for the session or for good", the answer said only "foldable". - **A fold is remembered by title, per panel.** `PROPERTIES` folded once is folded on every object, asset and node, and after a reload. A number in a title does not count, so *Key at frame 12* and *Key at frame 3* are one group. The inspector, the tilemap panel, the Variables tab and the Pixel art side each keep their own. - A behavior asset has all its rows under `SWITCHES`, since what it declares stands under `VARIABLES`. A Variables asset and a state machine get a group `SCOPE`. - A greyed out control in a band takes the click too. Without that the click fell through to the band and folded the group. - The Curve tab has no column of this kind, as said in the answer, and is unchanged. **Under the hood** - `src/ui/sections.ts` holds the rules as pure functions (`hiddenBySections`, `sectionOffsets`). `SectionStack` is the column, `SectionHeader` the band, and a `SortableList` with a title opens a group the same way. - The toolkit only folds. Which groups are folded is kept in `src/editor/sectionFolds.ts`, one entry `game-maker.folded-sections`. - Every title of the inspector goes through `addTitle` or `sectionHeader` in `inspector/host.ts`, so a new section gets the band by itself. - New hooks: `__gm.section(title)` and `__gm.pixelArt.control('layer:head' | 'frame:head')`. **Found on the way** - The inspector of a sprite is taller than the 800 pixel window of the checks now. The hooks that hand out a row scroll it into view first (`Inspector.reveal`), and module 28 scrolls before it looks for a row by its text. - A fold stays in the browser between modules. A check that folds has to unfold again, 02 and 48 do. **Tests** (on `melektaus-atx`) ``` gate 202 files, 3008 tests, CHECK EXIT 0 (2982 + 26) e2e no complete run for the committed state ``` - **e2e for the committed state:** modules 28 to 61 passed alone (749 checks). A full run was cut off in the accounts module at 1492 passes without a failure. The modules after it and the smokes are missing. - A first full run, before the last fixes, found two failing checks. Both are fixed (the hooks and module 28 above). - The sum of 1639 (1635 + 4) in README and wiki is reckoned, not measured. The CI run for `393caad` measures it and was not waited for. - 26 unit tests in `tests/editor/sections.test.ts`. - Four e2e checks with a real mouse: three in module 02 (band and its colour by pixel, the group of switches, fold and its memory across objects), one in module 48 (the header of a list). - Screenshots of the bands looked at before the last build (inspector, tilemap panel, Pixel art side, shape list), none after it. | Counter-check | Result | |---|---| | 25 in the unit tests | all work | | Browser, band in the colour of the panel | run, result not noted | | Browser, a click that does not fold | run, result not noted | - The unit counter-checks ran on stein2, not in the container. - The 1635 before this change are measured (CI run 280 for `c5ba215` is green).
Sign in to join this conversation.
2 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: meleki/feuerwerk#290