Protected Readonly_classProtected_closeClose button (clicked → hide(), surfaces the pill).
Protected Readonly_containerProtected_destroyedProtected_headerDrag handle inside the panel — usually the title row.
Protected Readonly_minProtected Readonly_minProtected Readonly_modalProtected_panelRoot panel element. Populated by subclass in _buildDom().
Protected_pillFloating "reopen" pill shown while the panel is hidden.
Protected Readonly_resizableProtected Readonly_storageProtected Readonly_tierReadonlyonFires while the user drags the panel (one notification per
pointermove during a drag) and once when the drag ends.
Drag changes the panel's CSS left / top but never its
size, so a ResizeObserver on any descendant element never
sees it. Subclasses or hosts that need to track the panel's
viewport position — for example a View
embedded in the body whose shared WebGL canvas must follow
the panel — should subscribe to this and re-read the
panel's bounding rect.
ReadonlyonFires when show() / hide() toggles the panel's visibility.
Readonlyviewtrue when the panel is mounted and visible (pill hidden).
Protected_bindWire the shared chrome behaviour onto the DOM the subclass built. Idempotent — calling twice is a no-op.
Protected_bindInject eight invisible drag handles (4 edges + 4 corners)
into _panel and wire pointer events. Each handle pins the
panel to absolute left / top on pointerdown (so subsequent
size + position writes take effect over any CSS that uses
right / bottom), then writes new width / height —
and, for north / west edges, new left / top — on
pointermove. onLayoutChanged fires per move and at drag-end;
the saved layout is updated on drag-end.
min-width / min-height enforced from _minWidth /
_minHeight; max-width / max-height are released by
setting them to "none" inline so user-driven size is not
clipped by CSS bounds like max-height: calc(100vh - 32px).
Protected_buildSubclass populates _panel, _pill, _header, _closeBtn
here, and appends _panel + _pill to _container. Called
exactly once, before _bindChrome.
Protected_clampProtected_restoreProtected_saveEngage the header drag from an external pointerdown / move
event so the panel begins following ev immediately. Used by
the drag-to-undock gesture on docked View cells — the cell's
own pointer listener detects motion-past-threshold, replaces
the cell with this freshly-created floating panel, and hands
the live pointer over via this method.
The panel is reflowed so the pointer sits inside its header at
(panelOffsetX, panelOffsetY) from the panel's top-left. Then
setPointerCapture routes all subsequent pointermove /
pointerup events for this pointerId to the panel's own
header, where _bindChrome's existing listeners drive
the drag — no parallel drag loop required.
OptionalpanelOffsetX: numberOptionalpanelOffsetY: numberTear down the NavCube. Idempotent.
Hide the panel and surface the floating reopen pill.
Reveal the panel; hide the floating reopen pill.
Toggle visibility.
StaticgetStaticiconSVG glyph used in context-menu rows that toggle this widget.
A small isometric cube — strokes use currentColor.
StaticopenIdempotent factory: returns the existing NavCube for NavCubeParams.view, or constructs one. If an existing instance is hidden it's shown again.
NavCube — a small 3D cube widget that reflects the View | View's camera orientation and lets the user fly the camera to any canonical axis-aligned, corner, or edge view by clicking the corresponding region of the cube.
Wrapped in the same floating-panel chrome as the other demo panels: drag-by-header, close button, reopen pill, layout persistence to
localStorage.Mirrors the shape of V2's
NavCubePluginbut rendered with CSS 3D transforms — no second renderer or off-screen canvas is required, and the widget composes naturally with whatever overlay chrome an example already has.The cube's local axes are fixed:
+Xis RIGHT,+Yis FRONT,+Zis TOP (CAD / BIM convention). For Y-up scenes a+90°rotation about X is folded into the view matrix so the +Y face still appears at the top.Interaction
Each region highlights on hover.
Sync
Subscribes to
view.viewer.events.onCameraViewMatrixUpdatedand recomputes the cube's CSS rotation each tick. Camera changes driven by anything (orbit, drag,flyTo, programmatic) keep the cube in sync.Lifecycle
destroy()removes the DOM, unsubscribes, and is idempotent.