From 503d27f6233c911a3e8c330f667a059ebd642345 Mon Sep 17 00:00:00 2001 From: Ondrej Hruska <11602729+ZycaR@users.noreply.github.com> Date: Mon, 17 Jun 2024 23:39:02 +0200 Subject: [PATCH 1/2] Show the current selected direction on the tracker mounting radial menu --- .../pages/mounting/MountingSelectionMenu.tsx | 65 ++++++++++++------- .../components/tracker/TrackerSettings.tsx | 1 + 2 files changed, 43 insertions(+), 23 deletions(-) diff --git a/gui/src/components/onboarding/pages/mounting/MountingSelectionMenu.tsx b/gui/src/components/onboarding/pages/mounting/MountingSelectionMenu.tsx index d29dad03d8..96c3d4656f 100644 --- a/gui/src/components/onboarding/pages/mounting/MountingSelectionMenu.tsx +++ b/gui/src/components/onboarding/pages/mounting/MountingSelectionMenu.tsx @@ -1,12 +1,12 @@ import classNames from 'classnames'; -import { MouseEventHandler } from 'react'; +import { useMemo } from 'react'; import ReactModal from 'react-modal'; import { useElemSize, useLayout } from '@/hooks/layout'; import { Button } from '@/components/commons/Button'; import { Typography } from '@/components/commons/Typography'; import { useLocalization } from '@fluent/react'; import { FootIcon } from '@/components/commons/icon/FootIcon'; -import { rotationToQuatMap } from '@/maths/quaternion'; +import { rotationToQuatMap, similarQuaternions } from '@/maths/quaternion'; import { Quaternion } from 'three'; import { SlimeUpIcon } from '@/components/commons/icon/SlimeUpIcon'; import { BodyPart } from 'solarxr-protocol'; @@ -113,14 +113,18 @@ export function MountingBodyPartIcon({ } function PieSliceOfFeet({ - onClick, + direction, + onDirectionSelected, + currRotation, id, d, noText = false, trackerTransform, trackerWidth = 10, }: { - onClick?: MouseEventHandler; + direction: Quaternion; + onDirectionSelected: (direction: Quaternion) => void; + currRotation?: Quaternion; id: string; d: string; noText?: boolean; @@ -131,14 +135,14 @@ function PieSliceOfFeet({ return ( onDirectionSelected(direction)} className={classNames('group fill-background-10 stroke-background-10')} > @@ -163,11 +172,13 @@ export function MountingSelectionMenu({ onClose, onDirectionSelected, bodyPart, + currRotation, }: { isOpen: boolean; onClose: () => void; onDirectionSelected: (direction: Quaternion) => void; bodyPart?: BodyPart; + currRotation?: Quaternion; }) { const { l10n } = useLocalization(); const { ref: refTrackers, layoutHeight: trackersHeight } = @@ -209,31 +220,35 @@ export function MountingSelectionMenu({ onDirectionSelected(rotationToQuatMap.LEFT)} + direction={rotationToQuatMap.LEFT} + onDirectionSelected={onDirectionSelected} + currRotation={currRotation} id="tracker-rotation-left" trackerTransform="translate(75, 0) scale(-1, 1)" > - onDirectionSelected(rotationToQuatMap.FRONT_LEFT) - } + direction={rotationToQuatMap.FRONT_LEFT} + onDirectionSelected={onDirectionSelected} + currRotation={currRotation} id="tracker-rotation_left_front" noText={true} trackerTransform="translate(-2, 175) rotate(-135)" trackerWidth={7} > onDirectionSelected(rotationToQuatMap.FRONT)} d="M0 0-44-89A99 99 0 0 1 44-89Z" + direction={rotationToQuatMap.FRONT} + onDirectionSelected={onDirectionSelected} + currRotation={currRotation} id="tracker-rotation-front" trackerTransform="translate(0, 75) rotate(-90)" > - onDirectionSelected(rotationToQuatMap.FRONT_RIGHT) - } + direction={rotationToQuatMap.FRONT_RIGHT} + onDirectionSelected={onDirectionSelected} + currRotation={currRotation} id="tracker-rotation-front_right" noText={true} trackerTransform="translate(73, 0) rotate(-45)" @@ -241,15 +256,17 @@ export function MountingSelectionMenu({ > onDirectionSelected(rotationToQuatMap.RIGHT)} + direction={rotationToQuatMap.RIGHT} + onDirectionSelected={onDirectionSelected} + currRotation={currRotation} id="tracker-rotation-right" trackerTransform="translate(175,0)" > - onDirectionSelected(rotationToQuatMap.BACK_RIGHT) - } + direction={rotationToQuatMap.BACK_RIGHT} + onDirectionSelected={onDirectionSelected} + currRotation={currRotation} id="tracker-rotation-back_right" noText={true} trackerTransform="translate(252, 75) rotate(45)" @@ -257,15 +274,17 @@ export function MountingSelectionMenu({ > onDirectionSelected(rotationToQuatMap.BACK)} + direction={rotationToQuatMap.BACK} + onDirectionSelected={onDirectionSelected} + currRotation={currRotation} id="tracker-rotation-back" trackerTransform="translate(250, 175) rotate(90)" > - onDirectionSelected(rotationToQuatMap.BACK_LEFT) - } + direction={rotationToQuatMap.BACK_LEFT} + onDirectionSelected={onDirectionSelected} + currRotation={currRotation} id="tracker-rotation-back_left" noText={true} trackerTransform="translate(177, 250) rotate(135)" diff --git a/gui/src/components/tracker/TrackerSettings.tsx b/gui/src/components/tracker/TrackerSettings.tsx index 26e1497219..270ea1a5b5 100644 --- a/gui/src/components/tracker/TrackerSettings.tsx +++ b/gui/src/components/tracker/TrackerSettings.tsx @@ -170,6 +170,7 @@ export function TrackerSettingsPage() { > setSelectRotation(false)} onDirectionSelected={onDirectionSelected} From 6a967e1c9222e7b187613362dc7efbfb0e226a57 Mon Sep 17 00:00:00 2001 From: Ondrej Hruska <11602729+ZycaR@users.noreply.github.com> Date: Tue, 18 Jun 2024 00:15:53 +0200 Subject: [PATCH 2/2] lint issues fix --- .../onboarding/pages/mounting/MountingSelectionMenu.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/gui/src/components/onboarding/pages/mounting/MountingSelectionMenu.tsx b/gui/src/components/onboarding/pages/mounting/MountingSelectionMenu.tsx index 96c3d4656f..fa8f6dfbab 100644 --- a/gui/src/components/onboarding/pages/mounting/MountingSelectionMenu.tsx +++ b/gui/src/components/onboarding/pages/mounting/MountingSelectionMenu.tsx @@ -1,5 +1,4 @@ import classNames from 'classnames'; -import { useMemo } from 'react'; import ReactModal from 'react-modal'; import { useElemSize, useLayout } from '@/hooks/layout'; import { Button } from '@/components/commons/Button'; @@ -142,7 +141,7 @@ function PieSliceOfFeet({ d={d} className={classNames( 'fill-background-40 opacity-50 stroke-background-90', - 'group-hover:fill-background-30 group-active:fill-background-20', + 'group-hover:fill-background-30 group-active:fill-background-20' )} transform="translate(125 125)" id={id} @@ -158,7 +157,7 @@ function PieSliceOfFeet({ 'stroke-none group-hover:fill-accent-background-20', currRotation && similarQuaternions(currRotation, direction) ? 'fill-background-90' - : 'fill-none', + : 'fill-none' )} >