diff --git a/public/locales/en/panel-skybrowser.json b/public/locales/en/panel-skybrowser.json index 8027e0cf..3be71ac4 100644 --- a/public/locales/en/panel-skybrowser.json +++ b/public/locales/en/panel-skybrowser.json @@ -88,7 +88,12 @@ }, "general": { "tooltip": "General settings for all browsers", - "tab-title": "General" + "tab-title": "General", + "show-hover-indicator": { + "label": "Show image position on hover", + "info": "Show an indicator on the sky in OpenSpace when hovering or focusing images in the SkyBrowser lists. The position of the indicator matches the position of the image interacted with.", + "disabled-tooltip": "No scene graph node for the hover indicator was found. Make sure that the SkyBrowser is properly configured and that the hover indicator asset is loaded." + } } }, "tab-content": { diff --git a/src/panels/SkyBrowserPanel/BrowserTabs/AddedImageCard.tsx b/src/panels/SkyBrowserPanel/BrowserTabs/AddedImageCard.tsx index d9f78149..577eb5a9 100644 --- a/src/panels/SkyBrowserPanel/BrowserTabs/AddedImageCard.tsx +++ b/src/panels/SkyBrowserPanel/BrowserTabs/AddedImageCard.tsx @@ -60,6 +60,8 @@ export function AddedImageCard({ image, opacity }: Props) { luaApi?.skybrowser.selectImage(image.url); setActiveImage(image.url); }} + onHover={() => luaApi?.skybrowser.moveIndicatorToHoverImage(image.url)} + onLeave={() => luaApi?.skybrowser.disableHoverIndicator()} bd={'1px solid var(--mantine-color-gray-7)'} radius={'sm'} /> diff --git a/src/panels/SkyBrowserPanel/BrowserTabs/Settings.tsx b/src/panels/SkyBrowserPanel/BrowserTabs/Settings.tsx index 01671f87..6bbcae0a 100644 --- a/src/panels/SkyBrowserPanel/BrowserTabs/Settings.tsx +++ b/src/panels/SkyBrowserPanel/BrowserTabs/Settings.tsx @@ -12,10 +12,13 @@ import { } from '@mantine/core'; import { useOpenSpaceApi } from '@/api/hooks'; +import { BoolInput } from '@/components/Input/BoolInput'; import { NumericInput } from '@/components/Input/NumericInput/NumericInput'; import { NumericSlider } from '@/components/Input/NumericInput/NumericSlider/NumericSlider'; import { LoadingBlocks } from '@/components/LoadingBlocks/LoadingBlocks'; +import { MaybeTooltip } from '@/components/MaybeTooltip/MaybeTooltip'; import { Property } from '@/components/Property/Property'; +import { useProperty } from '@/hooks/properties'; import { useAppSelector } from '@/redux/hooks'; import { SkyBrowserAllowCameraRotationKey, @@ -46,6 +49,11 @@ export function Settings({ id }: Props) { const imageList = useAppSelector((state) => state.skybrowser.imageList); const targetId = useAppSelector((state) => state.skybrowser.browsers[id]?.targetId); + const [hoverIndicatorEnabled, setHoverIndicatorEnabled] = useProperty( + 'BoolProperty', + 'Scene.HoverIndicator.Renderable.Enabled' + ); + const luaApi = useOpenSpaceApi(); const color = useBrowserColorString(id); @@ -196,6 +204,19 @@ export function Settings({ id }: Props) { + + + diff --git a/src/panels/SkyBrowserPanel/ImageList/ImageCard.tsx b/src/panels/SkyBrowserPanel/ImageList/ImageCard.tsx index 581877f3..841253a6 100644 --- a/src/panels/SkyBrowserPanel/ImageList/ImageCard.tsx +++ b/src/panels/SkyBrowserPanel/ImageList/ImageCard.tsx @@ -31,6 +31,8 @@ export function ImageCard({ image }: Props) { luaApi?.skybrowser.moveIndicatorToHoverImage(image.url)} + onLeave={() => luaApi?.skybrowser.disableHoverIndicator()} icon={} h={'100%'} w={'100%'} diff --git a/src/panels/SkyBrowserPanel/components/IconImage.module.css b/src/panels/SkyBrowserPanel/components/IconImage.module.css index 74263de9..e284ab6b 100644 --- a/src/panels/SkyBrowserPanel/components/IconImage.module.css +++ b/src/panels/SkyBrowserPanel/components/IconImage.module.css @@ -1,3 +1,9 @@ .iconImage:hover { filter: brightness(1.3); } + +.iconImage:focus { + filter: brightness(1.3); + border-style: solid; + border-width: 2px; +} diff --git a/src/panels/SkyBrowserPanel/components/IconImage.tsx b/src/panels/SkyBrowserPanel/components/IconImage.tsx index 0501d76d..782105f8 100644 --- a/src/panels/SkyBrowserPanel/components/IconImage.tsx +++ b/src/panels/SkyBrowserPanel/components/IconImage.tsx @@ -5,15 +5,35 @@ import styles from './IconImage.module.css'; interface Props extends ImageProps { onClick: () => void; + onHover?: () => void; + onLeave?: () => void; icon: React.JSX.Element; url: string; h?: number | string; w?: number | string; } -export function IconImage({ url, onClick, icon, h, w, ...props }: Props) { +export function IconImage({ + url, + onClick, + onHover, + onLeave, + icon, + h, + w, + ...props +}: Props) { return ( - +