Skip to content

feat(viewer): add per-panel edge docking (top/right/bottom/left) - #28

Open
ericgozzi wants to merge 2 commits into
feature/toolbar-schemafrom
feature/panel-docking
Open

ericgozzi wants to merge 2 commits into
feature/toolbar-schemafrom
feature/panel-docking

Conversation

@ericgozzi

Copy link
Copy Markdown
Collaborator

Toolbar, Openbar, Metadata, and ObjectActions can each independently dock to any of the viewer's four edges via toolbarPlacement/openbarPlacement/ metadataPlacement/objectActionsPlacement options (default: toolbar+openbar left, metadata+objectActions right - unchanged from today's floating-corner look).

  • New generic PanelDock.vue: a positioning zone for one edge, with no knowledge of which panels land in it. Toolbar and Openbar are not wrapped in a shared component - App.vue mounts all four panels independently, grouped only by matching placement, in a fixed priority order per edge (toolbar, openbar, metadata, objectActions).
  • Deletes Sidebar.vue/RightSidebar.vue. Fixes a pre-existing bug where ObjectInfo was mounted twice (once directly in App.vue, once inside RightSidebar).
  • Renames ObjectInfo.vue -> Metadata.vue, now self-contained: owns its own show/ hide toggle and edge-aware collapse (previously split between ObjectInfo's close button and RightSidebar's open button).
  • .app-container uses a 3x3 CSS Grid border layout (top/bottom docks span the full width; left/right docks are confined to the row between them) instead of four independent position: absolute overlays, so a top dock and a left dock no longer overlap at the shared corner.
  • Panels sharing the top/bottom edge stack as separate full-width bars (column layout), not packed side by side into one row.
  • Each panel adapts row vs. column internal layout and flips its collapse-arrow direction based on its own assigned edge.

Adds examples/embedded_panel_docking.html: an interactive demo with a dropdown per panel to flip placements live, plus a send handler that simulates a backend responding to object selection (object_infos/object_action), so Metadata and Object actions populate when you click the box - the same round trip a real backend integration would go through.

Verified with vue-tsc, eslint, the full vitest suite (41 tests, incl. new tests/panel_docking.test.ts), and headless-browser checks against the built dist-lib/ output confirming no overlap and correct stacking order.

The title must be a conventional commit:
fix:, feat:, feat!: for a breaking change, or one of build: chore:
ci: docs: perf: refactor: style: test:. Release Please builds
CHANGELOG.md and the next version number from it. Apply the no changelog
label to skip. Running npm install enables a commit-msg hook that checks
your commits as you make them.

Checklist

  • npm run check is green (formatting, lint, types, unit tests, both builds).
  • npm run test:browser and npm run test:package pass.

Toolbar, Openbar, Metadata, and ObjectActions can each independently dock to any
of the viewer's four edges via toolbarPlacement/openbarPlacement/
metadataPlacement/objectActionsPlacement options (default: toolbar+openbar left,
metadata+objectActions right - unchanged from today's floating-corner look).

- New generic PanelDock.vue: a positioning zone for one edge, with no knowledge of
  which panels land in it. Toolbar and Openbar are not wrapped in a shared
  component - App.vue mounts all four panels independently, grouped only by
  matching placement, in a fixed priority order per edge (toolbar, openbar,
  metadata, objectActions).
- Deletes Sidebar.vue/RightSidebar.vue. Fixes a pre-existing bug where ObjectInfo
  was mounted twice (once directly in App.vue, once inside RightSidebar).
- Renames ObjectInfo.vue -> Metadata.vue, now self-contained: owns its own show/
  hide toggle and edge-aware collapse (previously split between ObjectInfo's close
  button and RightSidebar's open button).
- .app-container uses a 3x3 CSS Grid border layout (top/bottom docks span the full
  width; left/right docks are confined to the row between them) instead of four
  independent position: absolute overlays, so a top dock and a left dock no longer
  overlap at the shared corner.
- Panels sharing the top/bottom edge stack as separate full-width bars (column
  layout), not packed side by side into one row.
- Each panel adapts row vs. column internal layout and flips its collapse-arrow
  direction based on its own assigned edge.

Adds examples/embedded_panel_docking.html: an interactive demo with a dropdown per
panel to flip placements live, plus a `send` handler that simulates a backend
responding to object selection (object_infos/object_action), so Metadata and
Object actions populate when you click the box - the same round trip a real
backend integration would go through.

Verified with vue-tsc, eslint, the full vitest suite (41 tests, incl. new
tests/panel_docking.test.ts), and headless-browser checks against the built
dist-lib/ output confirming no overlap and correct stacking order.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
@ericgozzi
ericgozzi added this pull request to stack #29 September 21, 2026 12:47
@ericgozzi
ericgozzi marked this pull request as ready for review September 21, 2026 13:05
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant