Rework screenspace renderable panel

public/locales/en/panel-screenspacerenderable.json

@@ -1,26 +1,118 @@
 {
-  "display-name-input": {
-    "title": "Display name",
-    "placeholder": "Slide name"
-  },
-  "image-input": {
-    "tab-title": "Image",
-    "title": "Path or URL to image",
-    "placeholder": "Path / URL",
-    "button-label": "Add"
-  },
-  "website-input": {
-    "tab-title": "Website",
-    "title": "URL to website",
-    "placeholder": "URL",
-    "button-label": "Add"
+  "add-modal": {
+    "button-label": "Add",
+    "title": "Add Screenspace Renderable",
+    "name-input": {
+      "title": "Display name",
+      "placeholder": "Enter a name to show in the GUI"
+    },
+    "image": {
+      "tab-title": "Image",
+      "title": "Path or URL to image",
+      "placeholder": "C:/path/to/image.png or https://example.com/image.png",
+      "error": {
+        "title": "Error: invalid base64 encoding format",
+        "description": "Cannot parse invalid format '{{format}}', supported base64 encoding images are 'png' and 'jpeg'"
+      }
+    },
+    "website": {
+      "tab-title": "Website",
+      "title": "Website URL",
+      "placeholder": "https://example.com",
+      "test-button":  {
+        "label": "Test",
+        "tooltip": "Test website link (open in browser)"
+      }
+    },
+    "video": {
+      "tab-title": "Video",
+      "title": "Path to video file",
+      "placeholder": "C:/path/to/video.mp4",
+      "loop": {
+        "label": "Loop video"
+      },
+      "play-audio": {
+        "label": "Play audio"
+      }
+    },
+    "text": {
+      "tab-title": "Text",
+      "title": "Text content",
+      "placeholder": "Enter the text to display"
+    },
+    "add-button": {
+      "label": "Add",
+      "disabled-tooltip": "Please provide some valid content for the Screenspace renderable."
+    }
   },
   "added-slides": {
-    "empty-slides": "No active slides",
-    "remove-slide-aria-label": "Remove slide"
+    "search-placeholder": "Search...",
+    "empty": "Add Screenspace renderables to view them here.",
+    "tips": "Tip: Try adding an image or video file by dragging and dropping it."
+  },
+  "no-selection-hint": "Select an item to view its details",
+  "more-menu": {
+    "aria-label": "Open more menu",
+    "delete-button": {
+      "label": "Delete",
+      "info": "Remove this Screenspace renderable"
+    },
+    "delete-confirm-modal": {
+      "title": "Delete Screenspace Renderable",
+      "are-you-sure": "Are you sure you want to remove the Screenspace renderable",
+      "remove-button": "Remove",
+      "cancel-button": "Cancel"
+    },
+    "pop-out": "Pop out"
   },
-  "error": {
-    "title": "Error: invalid base64 encoding format",
-    "description": "Cannot parse invalid format '{{format}}', supported base64 encoding images are 'png' and 'jpeg'"
+  "renderable-view": {
+    "placement-tab": {
+      "title": "Placement",
+      "mode-switch": {
+        "aria-label": "Placement mode",
+        "label-rae": "Spherical (RAE)",
+        "label-xyz": "Cartesian (XYZ)"
+      },
+      "spherical-controls": {
+        "label": "Spherical position",
+        "description": "Screenspace position in spherical coordinates (radius, azimuth, elevation). Radius is an advanced property hidden for other user levels. It controls the distance to the screenspace plane, allowing objects to be layered at different depths.",
+        "radius": {
+          "label": "Radius"
+        },
+        "azimuth": {
+          "label": "Azimuth"
+        },
+        "elevation": {
+          "label": "Elevation"
+        }
+      },
+      "cartesian-controls": {
+        "label": "Cartesian position",
+        "description": "Screenspace position in Cartesian coordinates (x, y, z). The z-coordinate is an advanced property hidden for other user levels. It controls the distance to the screenspace plane, allowing objects to be layered at different depths."
+      },
+      "local-rotation": {
+        "label": "Local rotation",
+        "roll": {
+          "label": "Roll"
+        },
+        "pitch": {
+          "label": "Pitch"
+        },
+        "yaw": {
+          "label": "Yaw"
+        },
+        "reset-button": {
+          "tooltip": "Reset",
+          "aria-label": "Reset local rotation"
+        }
+      }
+    },
+    "style-tab": {
+      "title": "Style"
+    },
+    "renderable-tab": {
+      "title": "Renderable",
+      "tooltip": "Main properties of the Screenspace renderable, including the ones for the specific type."
+    }
   }
 }

src/components/AngleInput/AngleInput.tsx

@@ -0,0 +1,91 @@
+import { useEffect, useId, useState } from 'react';
+import { AngleSlider, Group, Stack } from '@mantine/core';
+import { useThrottledCallback } from '@mantine/hooks';
+
+import { NumericInput } from '@/components/Input/NumericInput/NumericInput';
+
+interface Props {
+  value: number; // Radians
+  label: React.ReactNode;
+  onChange?: (value: number) => void; // Radians
+  disabled?: boolean;
+}
+
+export function AngleInput({ value, label, onChange, disabled }: Props) {
+  const [currentAngle, setCurrentAngle] = useState(radiansToDegrees(value));
+  const [isInteracting, setIsInteracting] = useState(false);
+  const throttledNumberInputChange = useThrottledCallback((numericValue: number) => {
+    onChange?.(degreesToRadians(numericValue));
+  }, 300);
+
+  const labelId = useId();
+
+  function radiansToDegrees(radians: number) {
+    return (radians * 180) / Math.PI;
+  }
+
+  function degreesToRadians(degrees: number) {
+    return (degrees * Math.PI) / 180;
+  }
+
+  useEffect(() => {
+    if (!isInteracting) {
+      setCurrentAngle(radiansToDegrees(value));
+    }
+  }, [value, isInteracting]);
+
+  return (
+    <Stack gap={2} flex={1} align={'center'}>
+      <div id={labelId}>{label}</div>
+      <Group align={'center'} justify={'center'} gap={5}>
+        <AngleSlider
+          marks={[
+            { value: 0 },
+            { value: 45 },
+            { value: 90 },
+            { value: 135 },
+            { value: 180 },
+            { value: 225 },
+            { value: 270 },
+            { value: 315 }
+          ]}
+          size={50}
+          value={currentAngle}
+          onChange={(newValue) => {
+            setIsInteracting(true);
+            setCurrentAngle(newValue);
+            onChange?.(degreesToRadians(newValue));
+          }}
+          onChangeEnd={() => setIsInteracting(false)}
+          formatLabel={(labelValue) => `${Math.round(labelValue)}°`}
+          disabled={disabled}
+          aria-labelledby={labelId}
+        />
+        <NumericInput
+          value={currentAngle}
+          flex={1}
+          miw={50}
+          maw={80}
+          size={'xs'}
+          min={-360}
+          max={360}
+          step={1}
+          decimalScale={1}
+          onChange={() => setIsInteracting(true)}
+          onEnter={(newValue) => {
+            const numericValue = Number(newValue);
+            if (numericValue === undefined) {
+              return;
+            }
+            setCurrentAngle(numericValue);
+            throttledNumberInputChange(numericValue);
+          }}
+          onFocus={() => setIsInteracting(true)}
+          onBlur={() => setIsInteracting(false)}
+          disabled={disabled}
+          aria-labelledby={labelId}
+        />
+      </Group>
+    </Stack>
+  );
+}

src/components/PropertyOwner/PropertyOwner.tsx

@@ -1,3 +1,5 @@
+import { useMemo } from 'react';
+
 import {
   useHasVisibleChildren,
   usePropertyOwner,
@@ -7,7 +9,7 @@ import { useAppSelector } from '@/redux/hooks';
 import { propertySelectors } from '@/redux/propertytree/propertySlice';
 import { Uri } from '@/types/types';
 import { displayName } from '@/util/propertyTreeHelpers';
-import { isGlobeLayersUri, parentTypeUri } from '@/util/uris';
+import { identifierFromUri, isGlobeLayersUri, parentTypeUri } from '@/util/uris';
 
 import { GlobeLayersPropertyOwner } from './Custom/GlobeLayers/GlobeLayersPropertyOwner';
 import { VideoPlayerPropertyOwner } from './Custom/VideoPlayer/VideoPlayerPropertyOwner';
@@ -18,7 +20,11 @@ interface Props {
   uri: Uri;
   expandedOnDefault?: boolean;
   showOnlyChildren?: boolean;
-  hideSubowners?: boolean;
+  /**
+   * If true, hide all subowners. If array, hide only the subowners with identifiers in
+   * the array
+   */
+  hideSubowners?: boolean | string[];
 }
 
 export function PropertyOwner({
@@ -48,7 +54,19 @@ export function PropertyOwner({
 
   const hasVisibleChildren = useHasVisibleChildren(uri);
   const visibleProperties = useVisibleProperties(propertyOwner);
-  const subowners = hideSubowners ? [] : (propertyOwner.subowners ?? []);
+
+  const subowners = useMemo(() => {
+    if (hideSubowners === true) {
+      return [];
+    }
+
+    if (Array.isArray(hideSubowners)) {
+      return (propertyOwner.subowners ?? []).filter(
+        (subowner) => !hideSubowners.includes(identifierFromUri(subowner))
+      );
+    }
+    return propertyOwner.subowners ?? [];
+  }, [propertyOwner.subowners, hideSubowners]);
 
   // If there is no content to show for the current visibility settings, we don't want to
   // render this property owner

src/hooks/userLevel.ts

@@ -0,0 +1,15 @@
+import { usePropertyValue } from '@/hooks/properties';
+import { PropertyVisibilityNumber } from '@/types/enums';
+
+export function useIsAdvancedUserLevel(): boolean {
+  const userLevel = usePropertyValue(
+    'OptionProperty',
+    'OpenSpaceEngine.PropertyVisibility'
+  );
+
+  if (userLevel === undefined) {
+    throw new Error('User level property is undefined');
+  }
+
+  return userLevel >= PropertyVisibilityNumber.AdvancedUser;
+}

src/icons/icons.tsx

@@ -15,6 +15,11 @@ export {
   FaPlus as PlusIcon,
   FaRegSave as SaveIcon
 } from 'react-icons/fa';
+export {
+  FaArrowsLeftRight as ArrowsLeftRightIcon,
+  FaArrowsUpDown as ArrowsUpDownIcon,
+  FaArrowRotateLeft as RotateLeftIcon
+} from 'react-icons/fa6';
 export {
   FiChevronsDown as ChevronsDownIcon,
   FiChevronsUp as ChevronsUpIcon
@@ -24,17 +29,19 @@ export {
   GiNightSky as NightSkyIcon,
   GiPencil as PencilIcon
 } from 'react-icons/gi';
-export { GoBrowser as BrowserIcon } from 'react-icons/go';
+export { GoBrowser as BrowserIcon, GoVideo as VideoIcon } from 'react-icons/go';
 export { GoMoveToEnd as GoToEnd, GoMoveToStart as GoToStart } from 'react-icons/go';
 export { ImSphere as GridSphereIcon } from 'react-icons/im';
 export { IoMdGlobe as GlobeIcon, IoMdTime as TimeIcon } from 'react-icons/io';
 export {
   IoInformationCircleOutline as InformationCircleOutlineIcon,
   IoInformation as InformationIcon,
-  IoTelescopeOutline as TelescopeIcon
+  IoTelescopeOutline as TelescopeIcon,
+  IoText as TextIcon
 } from 'react-icons/io5';
 export {
   LuFilePlus2 as AddFileIcon,
+  LuFileClock as FileClockIcon,
   LuFileText as FileTextIcon,
   LuFolderUp as FolderBackIcon,
   LuFolder as FolderIcon,
@@ -101,6 +108,7 @@ export {
   MdSettings as SettingsIcon,
   MdStop as StopIcon,
   MdSunny as SunIcon,
+  MdShortText as TextShortIcon,
   MdTimer as TimerIcon,
   MdArrowUpward as UpArrowIcon,
   MdVideocam as VideocamIcon,
@@ -140,6 +148,7 @@ export {
   TbCube as SceneIcon,
   TbScript as ScriptLogIcon,
   TbServer as ServerIcon,
+  TbShape as ShapeIcon,
   TbWorldWww as WebIcon
 } from 'react-icons/tb';
 export {

src/panels/GeoLocationPanel/AddedCustomNodes.tsx

@@ -7,7 +7,7 @@ import { useAppSelector } from '@/redux/hooks';
 import { GeoLocationGroupKey } from '@/util/keys';
 import { useAnchorNode } from '@/util/propertyTreeHooks';
 import { identifierFromUri, sgnUri } from '@/util/uris';
-import { useRemoveSceneGraphNodeModal } from '@/util/useRemoveSceneGraphNode';
+import { useRemoveSceneGraphNodeModal } from '@/util/removeModalsHooks';
 
 export function AddedCustomNodes() {
   const { t } = useTranslation('panel-geolocation', { keyPrefix: 'added-custom-nodes' });

src/panels/Scene/SceneGraphNode/SceneGraphNodeMoreMenu.tsx

@@ -13,7 +13,7 @@ import { Uri } from '@/types/types';
 import { displayName } from '@/util/propertyTreeHelpers';
 import { useAnchorNode } from '@/util/propertyTreeHooks';
 import { identifierFromUri } from '@/util/uris';
-import { useRemoveSceneGraphNodeModal } from '@/util/useRemoveSceneGraphNode';
+import { useRemoveSceneGraphNodeModal } from '@/util/removeModalsHooks';
 import { useWindowLayoutProvider } from '@/windowmanagement/WindowLayout/hooks';
 
 import { SceneGraphNodeView } from './SceneGraphNodeView';