Rework screenspace renderable panel - #233
Open
WeirdRubberDuck wants to merge 47 commits into
Open
Conversation
Also create a separate component to be used for building add icons with a consistent look
…e-renderable-update
…subowners in the renderable tab
# Conflicts: # src/components/DecoratedIcon/DecoratedAddIcon.tsx # src/components/DecoratedIcon/DecoratedIcon.tsx # src/panels/GlobeImageryBrowserPanel/CapabilityEntry.tsx # src/panels/GlobeImageryBrowserPanel/GlobeImageryBrowserPanel.tsx
Member
|
Suggestion to make the "Tip: Try adding by drag-and-dropping..." a bit smaller font-size and just a bit darker grey to keep the focus on the "Add screen pace renderables" |
Member
|
The "Roll" in the Local Rotation behaves opposite to how I would have expected it. Moving the widget clockwise makes the screenspace renderable rotate counter-clockwise |
alexanderbock
approved these changes
Aug 18, 2026
Member
|
Works great! And so much better than before! |
Co-authored-by: Alexander Bock <mail@alexanderbock.eu>
Contributor
There was a problem hiding this comment.
Pull request overview
This PR reworks the ScreenSpace Renderable panel UI to align with the newer property-owner structure, moving from the old “tab-based add + inline owners” layout to a scene-menu style list + selection details view with improved placement controls.
Changes:
- Replaces the old Image/Webpage tabs with an “Add” modal supporting image, webpage, video, and text renderables.
- Introduces a list + selection-based renderable view, including a “more” menu (pop-out/delete) and type icons with tooltips.
- Adds custom placement UI (Cartesian vs RAE, local rotation) and a small global NumberInput theme tweak.
Reviewed changes
Copilot reviewed 23 out of 23 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/util/removeModalsHooks.tsx | Adds a reusable confirm-modal hook for deleting screenspace renderables |
| src/theme/mantineTheme.ts | Adds default NumberInput hold-to-step behavior |
| src/panels/ScreenSpaceRenderablePanel/WebpageTab.tsx | Removes legacy webpage add tab |
| src/panels/ScreenSpaceRenderablePanel/ImageTab.tsx | Removes legacy image add tab |
| src/panels/ScreenSpaceRenderablePanel/TypeIcon.tsx | Adds type-to-icon mapping with tooltip labels |
| src/panels/ScreenSpaceRenderablePanel/ScreenSpaceRenderablePanel.tsx | New list/search + selected-details panel layout |
| src/panels/ScreenSpaceRenderablePanel/ScreenSpaceRenderableView.tsx | Adds detailed view with tabs for renderable/placement/style |
| src/panels/ScreenSpaceRenderablePanel/ScreenSpaceRenderableMoreMenu.tsx | Adds pop-out/delete menu for a renderable |
| src/panels/ScreenSpaceRenderablePanel/ScreenSpaceRenderableListItem.tsx | Adds list row UI with visibility toggle, type icon, and more menu |
| src/panels/ScreenSpaceRenderablePanel/Add/AddModal.tsx | New modal UI for adding renderables |
| src/panels/ScreenSpaceRenderablePanel/Add/hooks.ts | Adds add-renderable helpers (image/web/video/text) |
| src/panels/ScreenSpaceRenderablePanel/Placement/* | New custom placement controls and property grouping UI |
| src/panels/Scene/SceneGraphNode/SceneGraphNodeMoreMenu.tsx | Updates remove hook import path |
| src/panels/GeoLocationPanel/AddedCustomNodes.tsx | Updates remove hook import path |
| src/icons/icons.tsx | Adds new exported icons used by the panel/controls |
| src/hooks/userLevel.ts | Adds a hook to detect “advanced user” level |
| src/components/PropertyOwner/PropertyOwner.tsx | Extends hideSubowners to support hiding specific subowners |
| src/components/AngleInput/AngleInput.tsx | Adds a combined angle slider + numeric input control |
| public/locales/en/panel-screenspacerenderable.json | Updates translations for new UI structure and text |
Suppressed comments (2)
src/panels/ScreenSpaceRenderablePanel/Add/hooks.ts:96
- Identifier fallback uses
slideURLwhenmakeIdentifier(orluaApi) is unavailable. This can produce invalid/very long identifiers and is inconsistent with other add helpers (e.g.,addTextfalls back toname).
async function addWebpage(name: string, slideURL: string) {
const osIdentifier = (await luaApi?.makeIdentifier(name)) ?? slideURL;
src/panels/ScreenSpaceRenderablePanel/Add/hooks.ts:113
- Identifier fallback uses
slideURLwhenmakeIdentifier(orluaApi) is unavailable. Using the URL/path as an identifier can easily create invalid identifiers (and can be extremely long).
) {
const osIdentifier = (await luaApi?.makeIdentifier(name)) ?? slideURL;
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+97
to
+101
| matcherFunc={(uri: Uri, searchString: string) => | ||
| propertyOwners[uri]?.name | ||
| .toLowerCase() | ||
| .includes(searchString.toLowerCase()) | ||
| } |
Comment on lines
+43
to
+45
| async function addImage(name: string, slideURL: string) { | ||
| const osIdentifier = (await luaApi?.makeIdentifier(name)) ?? slideURL; | ||
|
|
Comment on lines
+10
to
+12
| if (userLevel === undefined) { | ||
| throw new Error('User level property is undefined'); | ||
| } |
Comment on lines
+34
to
+38
| function getFileNameFromUrl(data: string) { | ||
| const urlParts = data.split('/'); | ||
| const lastPart = urlParts[urlParts.length - 1]; | ||
| return lastPart.split('.')[0]; // Remove file extension if present | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Based on the new property owner structure in this OpenSpace PR: OpenSpace/OpenSpace#4204
Please try it out and let me know what you think, and if anything is missing or not working as expected.
Summary of features and new visual look below
Closes OpenSpace/OpenSpace#3803
Before any renderables exist:
Adding is now done in a separate modal
And now includes the option to add videos from local files as well as screenspace texts
Icons for added types:
Almost all types have an assigned icon
With details on hover:
Search by name:
Scene-menu style selection and display of data:
Select an item in the list to view its details at the bottom
Custom input components for placement:
Z and radius is only shown for advanced users. For normal users:
This is communicated through a custom property description:
Removal and pop-out are done in "..."-menu
Features left for future work: