fix: navigator styles (#353)

* Hide ? for now, hide compass if 2d * add theming, fix svgs and styles
reearth · Nov 11, 2022 · 9713238 · 9713238
1 parent c76d368
commit 9713238
Show file tree

Hide file tree

Showing 7 changed files with 119 additions and 53 deletions.
diff --git a/src/components/atoms/Icon/Icons/compass.svg b/src/components/atoms/Icon/Icons/compass.svg
diff --git a/src/components/atoms/Icon/Icons/house.svg b/src/components/atoms/Icon/Icons/house.svg
diff --git a/src/components/atoms/Icon/Icons/navigatorAngle.svg b/src/components/atoms/Icon/Icons/navigatorAngle.svg
diff --git a/src/components/atoms/Icon/index.tsx b/src/components/atoms/Icon/index.tsx
@@ -15,6 +15,7 @@ export type Props = {
   size?: string | number;
   alt?: string;
   color?: string;
+  stroke?: string;
   style?: CSSProperties;
   role?: AriaRole;
   notransition?: boolean;
@@ -27,6 +28,7 @@ const Icon: React.FC<Props> = ({
   alt,
   style,
   color,
+  stroke,
   size,
   role,
   notransition,
@@ -64,6 +66,7 @@ const Icon: React.FC<Props> = ({
       style={style}
       role={role}
       color={color}
+      stroke={stroke}
       size={sizeStr}
       notransition={notransition}
       onClick={onClick}
@@ -78,12 +81,18 @@ const StyledImg = styled.img<{ size?: string; notransition?: boolean }>`
   ${({ notransition }) => !notransition && "transition: all 0.4s;"}
 `;
 
-const StyledSvg = styled(SVG)<{ color?: string; size?: string; notransition?: boolean }>`
+const StyledSvg = styled(SVG)<{
+  color?: string;
+  stroke?: string;
+  size?: string;
+  notransition?: boolean;
+}>`
   font-size: 0;
   display: inline-block;
   width: ${({ size }) => size};
   height: ${({ size }) => size};
   color: ${({ color }) => color};
+  ${({ stroke }) => `stroke: ${stroke};`}
   transition-property: color, background;
   ${({ notransition }) => (!notransition ? "transition-duration: 0.4s;" : undefined)}
 `;

diff --git a/src/components/molecules/Visualizer/Widget/Navigator/NavigatorPresenter/index.tsx b/src/components/molecules/Visualizer/Widget/Navigator/NavigatorPresenter/index.tsx
@@ -2,11 +2,15 @@ import { memo } from "react";
 
 import Icon from "@reearth/components/atoms/Icon";
 import { useT } from "@reearth/i18n";
-import { styled } from "@reearth/theme";
+import { PublishTheme, styled } from "@reearth/theme";
+
+import { SceneMode } from "../../../Engine/ref";
 
 import { useNavigator } from "./hooks";
 
 export type Props = {
+  sceneMode?: SceneMode;
+  publishedTheme?: PublishTheme;
   degree: number;
   /**
    * Pass degree of circle as callback arguments.
@@ -35,6 +39,8 @@ export type Props = {
 };
 
 const NavigatorPresenter: React.FC<Props> = memo(function NavigatorPresenterMemo({
+  sceneMode,
+  publishedTheme,
   degree,
   onRotate,
   onStartOrbit,
@@ -45,6 +51,8 @@ const NavigatorPresenter: React.FC<Props> = memo(function NavigatorPresenterMemo
   onZoomIn,
   onZoomOut,
 }) {
+  const t = useT();
+
   const {
     compassRef,
     compassDegree,
@@ -53,43 +61,44 @@ const NavigatorPresenter: React.FC<Props> = memo(function NavigatorPresenterMemo
     handleOnMouseDownAngle,
     handleOnMouseDownCompass,
   } = useNavigator({ degree, onRotate, onStartOrbit, onEndOrbit, onMoveOrbit });
-  const t = useT();
+
   return (
     <Container>
-      <CompassContainer>
-        <Compass ref={compassRef}>
-          <CompassIcon onMouseDown={handleOnMouseDownCompass}>
-            <Icon
-              icon="compass"
-              color="#000"
-              aria-label={t("aria-label-compass")}
-              size={64}
-              style={{ transform: `rotate(${compassDegree}deg)` }}
-            />
-          </CompassIcon>
-          {isMovingAngle && (
-            <CompassFocusIcon
-              style={{
-                transform: `rotate(${compassFocusDegree}deg)`,
-              }}
-              data-testId="compassFocus">
-              <Icon icon="compassFocus" color="blue" alt="" size={30} />
-            </CompassFocusIcon>
-          )}
-          <AngleIcon onMouseDown={handleOnMouseDownAngle}>
-            <Icon icon="navigatorAngle" aria-label={t("aria-label-adjust-angle")} size={32} />
-          </AngleIcon>
-        </Compass>
-        <Help onClick={onClickHelp}>?</Help>
-      </CompassContainer>
-      <Tool>
-        <ToolIconButton onClick={onZoomIn}>
+      {sceneMode !== "2d" && (
+        <CompassContainer>
+          <Compass ref={compassRef}>
+            <CompassIcon onMouseDown={handleOnMouseDownCompass} publishedTheme={publishedTheme}>
+              <Icon
+                icon="compass"
+                aria-label={t("aria-label-compass")}
+                size={64}
+                style={{ transform: `rotate(${compassDegree}deg)` }}
+              />
+            </CompassIcon>
+            {isMovingAngle && (
+              <CompassFocusIcon
+                style={{
+                  transform: `rotate(${compassFocusDegree}deg)`,
+                }}
+                data-testId="compassFocus">
+                <Icon icon="compassFocus" color={publishedTheme?.select} alt="" size={30} />
+              </CompassFocusIcon>
+            )}
+            <AngleIcon onMouseDown={handleOnMouseDownAngle} publishedTheme={publishedTheme}>
+              <Icon icon="navigatorAngle" aria-label={t("aria-label-adjust-angle")} size={32} />
+            </AngleIcon>
+          </Compass>
+          {onClickHelp && <Help onClick={onClickHelp}>?</Help>}
+        </CompassContainer>
+      )}
+      <Tool publishedTheme={publishedTheme}>
+        <ToolIconButton onClick={onZoomIn} publishedTheme={publishedTheme}>
           <Icon icon="plus" aria-label={t("aria-label-zoom-in")} size={16} />
         </ToolIconButton>
-        <ToolIconButton onClick={onRestoreRotate}>
+        <ToolIconButton onClick={onRestoreRotate} publishedTheme={publishedTheme}>
           <Icon icon="house" aria-label={t("aria-label-Go-to-the-home-position")} size={16} />
         </ToolIconButton>
-        <ToolIconButton onClick={onZoomOut}>
+        <ToolIconButton onClick={onZoomOut} publishedTheme={publishedTheme}>
           <Icon icon="minus" aria-label={t("aria-label-zoom-out")} size={16} />
         </ToolIconButton>
       </Tool>
@@ -101,7 +110,6 @@ const Container = styled.div`
   display: inline-flex;
   flex-direction: column;
   align-items: center;
-  padding-left: 32px;
 `;
 
 const CompassContainer = styled.div`
@@ -131,12 +139,19 @@ const Compass = styled.div`
   z-index: 1;
 `;
 
-const CompassIcon = styled.div`
+const CompassIcon = styled.div<{ publishedTheme?: PublishTheme }>`
   position: absolute;
   top: 0;
   left: 0;
   width: 64px;
   height: 64px;
+  color: ${({ theme, publishedTheme }) => publishedTheme?.mainText || theme.main.text};
+  & path {
+    fill: ${({ theme, publishedTheme }) => publishedTheme?.mainText || theme.main.text};
+  }
+  & circle {
+    stroke: ${({ theme, publishedTheme }) => publishedTheme?.background || theme.main.deepBg};
+  }
 `;
 
 const CompassFocusIcon = styled.div`
@@ -148,25 +163,30 @@ const CompassFocusIcon = styled.div`
   height: 64px;
 `;
 
-const AngleIcon = styled.div`
-  color: ${({ theme }) => theme.main.weak};
+const AngleIcon = styled.div<{ publishedTheme?: PublishTheme }>`
+  & circle {
+    fill: ${({ theme, publishedTheme }) => publishedTheme?.background || theme.main.deepBg};
+  }
+  & g {
+    stroke: ${({ theme, publishedTheme }) => publishedTheme?.mainText || theme.main.text};
+  }
   display: inline-block;
   height: 32px;
   width: 32px;
   z-index: 1;
 `;
 
-const Tool = styled.div`
+const Tool = styled.div<{ publishedTheme?: PublishTheme }>`
   display: flex;
   flex-direction: column;
   align-items: center;
-  background: #fff;
+  background: ${({ theme, publishedTheme }) => publishedTheme?.background || theme.main.deepBg};
   border-radius: 16px;
   margin-top: 8px;
 `;
 
-const ToolIconButton = styled.button`
-  color: #4a4a4a;
+const ToolIconButton = styled.button<{ publishedTheme?: PublishTheme }>`
+  color: ${({ theme, publishedTheme }) => publishedTheme?.mainText || theme.main.text};
   height: 32px;
   width: 32px;
   display: grid;

diff --git a/src/components/molecules/Visualizer/Widget/Navigator/hooks.ts b/src/components/molecules/Visualizer/Widget/Navigator/hooks.ts
@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback, useRef } from "react";
+import { useState, useEffect, useCallback, useRef, useMemo } from "react";
 
 import { SceneProperty } from "../../Engine";
 import { useContext } from "../../Plugin";
@@ -9,13 +9,18 @@ export default function ({ sceneProperty }: { sceneProperty: SceneProperty }) {
   const ctx = useContext();
   const camera = ctx?.reearth.camera;
   const [degree, setDegree] = useState(0);
-  const [isHelpOpened, setIsHelpOpened] = useState(false);
+  // const [isHelpOpened, setIsHelpOpened] = useState(false);
   const orbitRadianRef = useRef(0);
   const isMovingOrbit = useRef(false);
   const cameraRotateRight = camera?.rotateRight;
   const cameraOrbit = camera?.orbit;
   const cameraOrbitRef = useRef<typeof cameraOrbit>();
 
+  const sceneMode = useMemo(
+    () => sceneProperty.default?.sceneMode,
+    [sceneProperty.default?.sceneMode],
+  );
+
   const handleOnRotate = useCallback(
     (deg: number) => {
       const radian = degreeToRadian(deg);
@@ -37,9 +42,9 @@ export default function ({ sceneProperty }: { sceneProperty: SceneProperty }) {
       camera?.flyTo(sceneProperty.default.camera, { duration: 1 });
     }
   }, [camera, sceneProperty]);
-  const handleOnClickHelp = useCallback(() => {
-    setIsHelpOpened(prev => !prev);
-  }, []);
+  // const handleOnClickHelp = useCallback(() => {
+  //   setIsHelpOpened(prev => !prev);
+  // }, []);
 
   const handleOnZoomIn = useCallback(() => {
     camera?.zoomIn(2);
@@ -75,15 +80,16 @@ export default function ({ sceneProperty }: { sceneProperty: SceneProperty }) {
   }, [ctx?.reearth]);
 
   return {
+    sceneMode,
     degree,
-    isHelpOpened, // TODO: This will be used to display help modal.
+    // isHelpOpened, // TODO: This will be used to display help modal.
     events: {
       onRotate: handleOnRotate,
       onStartOrbit: handleOnStartOrbit,
       onEndOrbit: handleOnEndOrbit,
       onMoveOrbit: handleOnMoveOrbit,
       onRestoreRotate: handleOnRestoreRotate,
-      onClickHelp: handleOnClickHelp,
+      // onClickHelp: handleOnClickHelp, // Uncomment-out when isHelpOpened/help modal is made
       onZoomIn: handleOnZoomIn,
       onZoomOut: handleOnZoomOut,
     },

diff --git a/src/components/molecules/Visualizer/Widget/Navigator/index.tsx b/src/components/molecules/Visualizer/Widget/Navigator/index.tsx
@@ -1,4 +1,5 @@
 import { ComponentProps as WidgetProps } from "@reearth/components/molecules/Visualizer/Widget";
+import { usePublishTheme } from "@reearth/theme";
 
 import { SceneProperty } from "../../Engine";
 
@@ -8,9 +9,17 @@ import NavigatorPresenter from "./NavigatorPresenter";
 export type Props = WidgetProps<SceneProperty>;
 
 const Navigator = ({ sceneProperty }: Props): JSX.Element | null => {
-  const { degree, events } = useHooks({ sceneProperty });
+  const { sceneMode, degree, events } = useHooks({ sceneProperty });
+  const publishedTheme = usePublishTheme(sceneProperty?.theme);
 
-  return <NavigatorPresenter degree={degree} {...events} />;
+  return (
+    <NavigatorPresenter
+      sceneMode={sceneMode}
+      publishedTheme={publishedTheme}
+      degree={degree}
+      {...events}
+    />
+  );
 };
 
 export default Navigator;