Rework Topbar #183

New Issue

2026-09-20T14:46:15+02:00

admin commented

2026-09-20 14:46:15 +02:00

Reduzieren auf 3 Icon-Button: Menu, Undo, Redo
Menu-Button, Dropdown mit: New Project, Open Project... (Dialog mit Projektauswahl, Buttons für Öffnen, Löschen und Abbrechen), Project Settings... (Dialog mit Projektname, die scene was beim play gestartet werden soll (Start scene / Active scene), Collision layers)

nur noch play und pause button (ohne text, auch nur icon)

<img width="692" alt="image.png" src="attachments/a8592424-00da-4da7-9521-28f5878b8377"> Reduzieren auf 3 Icon-Button: Menu, Undo, Redo Menu-Button, Dropdown mit: New Project, Open Project... (Dialog mit Projektauswahl, Buttons für Öffnen, Löschen und Abbrechen), Project Settings... (Dialog mit Projektname, die scene was beim play gestartet werden soll (Start scene / Active scene), Collision layers) <img width="425" alt="image.png" src="attachments/7b876047-6a70-46b8-91b8-0de472a79061"> nur noch play und pause button (ohne text, auch nur icon)

image.png

10 KiB

image.png

6.2 KiB

admin added this to the Development project 2026-09-20 14:46:15 +02:00

admin moved this to Next in Development on 2026-09-20 14:46:20 +02:00

admin added the high-priority label 2026-09-20 14:52:46 +02:00

meleki referenced this issue from a commit

2026-09-20 16:51:43 +02:00

The topbar is icons only: the leading Project dropdown, the Scene picker and the labelled Play/Pause buttons are gone and in their place stand five icon buttons - menu, undo, redo on the left, play and pause in the middle - while Notice, the save state, fps and the Account menu keep the right side; the Play button swaps its icon for a stop square while the project runs and Pause swaps for a second play sign while it is held (Button.setIcon()), and iconSpace() drops the gap between icon and label when a button has no label, which is what kept a 24 px icon button 3 px off its own centre; the menu carries New project, Open project..., a separator and Project settings..., where the picker (src/editor/OpenProjectDialog.ts) preselects the open project and marks it "open", opens on a double click and puts Delete on the left of Cancel and Open - it closes itself before it asks whether to delete, because two modals on top of each other would have left the question standing over a list it no longer speaks about - and the settings dialog (src/editor/ProjectSettingsDialog.ts) holds the name, the "Play starts" switch (Start scene / Active scene, a preference of this browser and so no command) and the collision layers from #152, which retires CollisionLayersDialog.ts and the "Collision layers..." entry; what Apply actually writes is the pure function settingsChanges(), so renaming and the layers are each their own undo step and each drop out when nothing differs; the Scene dropdown falls away without replacement, the active scene is switched by double clicking it in the Assets panel, which is the way that was there anyway; new module 46 runs last with 9 checks (no label left in the bar, the run buttons in edit mode, the four menu entries, the picker with the open project preselected, Cancel leaving the project standing, the settings dialog on the state of the project, renaming with undo and redo through the icon buttons) and it neither opens nor deletes a project, because that would pull the project out from under every earlier module; modules 8, 18 and 35 and the harness follow the new bar, 6 unit tests cover settingsChanges and 3 the icons (#183)

meleki commented

2026-09-20 16:52:54 +02:00

Umgesetzt in 60d0146 und da35f10, Wiki in c0b74fd und cef9168.

Die Leiste trägt fünf Icon-Knöpfe und kein Wort mehr. Links Menü (drei Balken), Undo, Redo; in der Mitte Play und Pause. Play wird im Lauf zum Stop-Quadrat, Pause beim Halten zum zweiten Play-Zeichen (Button.setIcon()). Rechts stehen unverändert Notice, Save-Status, fps und das Account-Menü.

Das Menü hat New project, Open project…, Trennlinie, Project settings….

Open project… (src/editor/OpenProjectDialog.ts): Projektliste, das offene ist vorgewählt und als „open" markiert, Doppelklick öffnet; Delete links, Cancel und Open rechts. Delete schließt erst den Picker und fragt dann — zwei Modals übereinander hätten die Rückfrage über einer Liste stehen lassen, um die es nicht mehr geht.
Project settings… (src/editor/ProjectSettingsDialog.ts): Name, der Schalter Play starts (Start scene / Active scene, eine Vorliebe dieses Browsers und darum kein Command) und die Kollisionsebenen aus #152. CollisionLayersDialog.ts und der Eintrag „Collision layers…" entfallen damit.
Was Apply schreibt, ist die reine Funktion settingsChanges(): Umbenennen und Ebenen sind je ein eigener Undo-Schritt und fallen weg, wenn sich nichts geändert hat.

Der Scene-Dropdown fällt ersatzlos weg — auf Rückfrage so entschieden. Die aktive Szene wechselt man per Doppelklick im Assets-Panel, der Weg, den es ohnehin gab.

Zwei Nachträge nach dem Ansehen der fertigen Leiste:

Die Undo/Redo-Pfeile waren unleserlich. Der erste Entwurf war ein Dreiviertelkreis mit Dreieck am Bogenende; bei 16 Einheiten sitzt der Kopf genau dort, wo der Bogen schon ist, beides verschmilzt und das Icon liest sich als Komma. Jetzt: flacher Kopf, der frei neben seinem Schweif steht. Geprüft wurde im echten Build, nicht nur im SVG-Renderer — ImageMagick zeichnet diese Pfade deutlich freundlicher als Pixi.
Play/Pause saß nicht in der Mitte. Die Zeile hat drei flexible Kinder: die zwei Spacer um das Paar und das Notice-Label, das seit #177 flexibel ist, damit die Leiste bei 1280 px nicht überläuft — jedes bekommt ein Drittel des Rests. Toolbar.layout() schiebt das Paar jetzt nach super.layout() auf die Mitte der Leiste, geklemmt zwischen Redo-Kante und Notice-Anfang.

Tests

./check.sh                       → 120 Files, 1760 Tests, CHECK EXIT 0
npm run build                    → BUILD EXIT 0
node tools/e2e.mjs (alle Module) → ALL PASSED – 1148 checks
Smokes                           → 24 / 19 / 21 checks

Neues Modul 46 (10 Checks), läuft als letztes: keine Beschriftung mehr in der Leiste, die Lauf-Knöpfe in Edit-Mode, die vier Menüeinträge, der Picker mit dem offenen Projekt vorgewählt, Cancel lässt das Projekt stehen, der Settings-Dialog auf dem Stand des Projekts, Umbenennen samt Undo und Redo über die Icon-Knöpfe, und die Mitte des Play/Pause-Paars gegen innerWidth/2 (± 2 px). Es öffnet kein Projekt und löscht keines — das würde jedem früheren Modul das Projekt wegziehen.
Nachgezogen: Modul 08 (Ebenen über Menü → Project settings…), 18 (runButtons() statt has('▶ Resume')), 35 (Start-Scene-Schalter im Dialog, aktive Szene per Doppelklick), Harness (t.play() klickt das Icon).
9 neue Unit-Tests: 6 für settingsChanges, 3 für die Icons (eigene Bilder, keines davon ein Asset-Icon, kein A-Befehl im Pfad — die Arc-Falle aus #119).
Zwei Gegenproben, beide greifen: „Open project…" aus dem Menü genommen → Modul 46 fällt mit 2 FAILs; das Pause-Icon nicht mehr tauschen → Modul 18 fällt.

Zwei Dinge, die offen bleiben

Es gibt keine Tooltips im Toolkit, und ich habe keine gebaut — das wäre ein eigenes Feature quer durch die Oberfläche. Fünf Knöpfe ohne Beschriftung und ohne Hinweis sind aber eine Einbuße; dafür gehört ein eigenes Issue angelegt.
Das Löschen aus dem Picker ist nicht per e2e gedeckt — ein Lauf, der wirklich ein Projekt löscht, wäre nicht zurückzunehmen. Gelaufen ist nur der Weg bis zur Rückfrage.

Wiki: Concepts, Scenes, Colliders, Architecture, Accounts, Development (Check-Summe 1148). Die README zeigt jetzt den Screenshot des Editors.

Umgesetzt in `60d0146` und `da35f10`, Wiki in `c0b74fd` und `cef9168`. **Die Leiste trägt fünf Icon-Knöpfe und kein Wort mehr.** Links Menü (drei Balken), Undo, Redo; in der Mitte Play und Pause. Play wird im Lauf zum Stop-Quadrat, Pause beim Halten zum zweiten Play-Zeichen (`Button.setIcon()`). Rechts stehen unverändert Notice, Save-Status, fps und das Account-Menü. **Das Menü** hat *New project*, *Open project…*, Trennlinie, *Project settings…*. * **Open project…** (`src/editor/OpenProjectDialog.ts`): Projektliste, das offene ist vorgewählt und als „open" markiert, Doppelklick öffnet; **Delete** links, **Cancel** und **Open** rechts. Delete schließt erst den Picker und fragt dann — zwei Modals übereinander hätten die Rückfrage über einer Liste stehen lassen, um die es nicht mehr geht. * **Project settings…** (`src/editor/ProjectSettingsDialog.ts`): Name, der Schalter **Play starts** (*Start scene* / *Active scene*, eine Vorliebe dieses Browsers und darum kein Command) und die Kollisionsebenen aus #152. `CollisionLayersDialog.ts` und der Eintrag „Collision layers…" entfallen damit. * Was Apply schreibt, ist die reine Funktion `settingsChanges()`: Umbenennen und Ebenen sind je ein eigener Undo-Schritt und fallen weg, wenn sich nichts geändert hat. **Der Scene-Dropdown fällt ersatzlos weg** — auf Rückfrage so entschieden. Die aktive Szene wechselt man per Doppelklick im Assets-Panel, der Weg, den es ohnehin gab. **Zwei Nachträge nach dem Ansehen der fertigen Leiste:** * **Die Undo/Redo-Pfeile waren unleserlich.** Der erste Entwurf war ein Dreiviertelkreis mit Dreieck am Bogenende; bei 16 Einheiten sitzt der Kopf genau dort, wo der Bogen schon ist, beides verschmilzt und das Icon liest sich als Komma. Jetzt: flacher Kopf, der frei neben seinem Schweif steht. Geprüft wurde im **echten Build**, nicht nur im SVG-Renderer — ImageMagick zeichnet diese Pfade deutlich freundlicher als Pixi. * **Play/Pause saß nicht in der Mitte.** Die Zeile hat drei flexible Kinder: die zwei Spacer um das Paar **und** das Notice-Label, das seit #177 flexibel ist, damit die Leiste bei 1280 px nicht überläuft — jedes bekommt ein Drittel des Rests. `Toolbar.layout()` schiebt das Paar jetzt nach `super.layout()` auf die Mitte der Leiste, geklemmt zwischen Redo-Kante und Notice-Anfang. **Tests** ``` ./check.sh → 120 Files, 1760 Tests, CHECK EXIT 0 npm run build → BUILD EXIT 0 node tools/e2e.mjs (alle Module) → ALL PASSED – 1148 checks Smokes → 24 / 19 / 21 checks ``` * **Neues Modul 46 (10 Checks),** läuft als letztes: keine Beschriftung mehr in der Leiste, die Lauf-Knöpfe in Edit-Mode, die vier Menüeinträge, der Picker mit dem offenen Projekt vorgewählt, Cancel lässt das Projekt stehen, der Settings-Dialog auf dem Stand des Projekts, Umbenennen samt Undo und Redo über die Icon-Knöpfe, und die Mitte des Play/Pause-Paars gegen `innerWidth/2` (± 2 px). Es öffnet kein Projekt und löscht keines — das würde jedem früheren Modul das Projekt wegziehen. * **Nachgezogen:** Modul 08 (Ebenen über Menü → Project settings…), 18 (`runButtons()` statt `has('▶ Resume')`), 35 (Start-Scene-Schalter im Dialog, aktive Szene per Doppelklick), Harness (`t.play()` klickt das Icon). * **9 neue Unit-Tests:** 6 für `settingsChanges`, 3 für die Icons (eigene Bilder, keines davon ein Asset-Icon, kein `A`-Befehl im Pfad — die Arc-Falle aus #119). * **Zwei Gegenproben, beide greifen:** „Open project…" aus dem Menü genommen → Modul 46 fällt mit 2 FAILs; das Pause-Icon nicht mehr tauschen → Modul 18 fällt. **Zwei Dinge, die offen bleiben** * **Es gibt keine Tooltips im Toolkit**, und ich habe keine gebaut — das wäre ein eigenes Feature quer durch die Oberfläche. Fünf Knöpfe ohne Beschriftung und ohne Hinweis sind aber eine Einbuße; dafür gehört ein eigenes Issue angelegt. * **Das Löschen aus dem Picker ist nicht per e2e gedeckt** — ein Lauf, der wirklich ein Projekt löscht, wäre nicht zurückzunehmen. Gelaufen ist nur der Weg bis zur Rückfrage. Wiki: Concepts, Scenes, Colliders, Architecture, Accounts, Development (Check-Summe 1148). Die README zeigt jetzt den Screenshot des Editors.

meleki closed this issue

2026-09-20 16:52:57 +02:00

meleki referenced this issue

2026-09-20 16:53:11 +02:00

Physik: Kollisionsebenen und Masken (Layer, „Collides with“) #152

admin moved this to Done in Development on 2026-09-20 16:53:23 +02:00

meleki referenced this issue from a commit

2026-09-20 17:24:47 +02:00

Refactoring round 5 covers the code since round 4 without changing behaviour: four identical copies of dot() and three of "nearest point on a segment" stood in the collision math, in the hit area of the collider outlines and in the polygon handles, so they moved into the new module src/core/util/vec.ts; the warning line, the busy state, info() and the caret reset were written out line by line in both the sign-in screen and the password dialog and are now FormStatus; the closing row "Cancel plus a confirming button, optionally one on the left" was built by hand in FormDialog, FilePicker, OpenProjectDialog and PasswordDialog and is now dialogButtons(); the header bar was drawn by the toolbar, the TabHeader and the Breadcrumb each on its own and is now drawHeaderBar(); AddColliderCommand and AddRigidbodyCommand share a base, each subclass only builds its own asset; Editor.ts derives the panes from assetEditors instead of repeating eight entries and clamps its splitters with clamp(); jscpd over src falls from 0.19 % to 0.14 %; dead code is gone - listScenes() has been orphaned since the Scene picker fell away (#183), DEFAULT_FILTER (#152) was never used, the two test hooks projectPickerRowAt/rowPosition and particleCompiles are read by no tool, and four functions lost an export they did not need; seven comments that told history ("used to", "no longer", "since #...") describe the state of things now, and that this changed nothing was proved by a rebuild - the bundle is md5 identical, b4ad0dfe... before and after; the README said Logout sits at the far right of the toolbar, which has been the Account menu since #182, and wiki/Architecture.md was missing src/core/util/ altogether; 4 new unit tests cover vec.ts, and switching the clamp on the segment off makes exactly one of them fail while none of the 76 neighbouring tests notice, so that clamping was covered nowhere before (#85)

meleki referenced this issue

2026-09-20 17:25:45 +02:00

Refactoring (wiederkehrend) #85