fix: visualizer on reearth/core (#395)

* fix: visualizer on reearth/core * fix: test
reearth · Jan 12, 2023 · 7ba0dbf · 7ba0dbf
1 parent 07a6b4d
commit 7ba0dbf
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 35 deletions.
diff --git a/src/core/Crust/Widgets/Widget/Navigator/NavigatorPresenter/index.tsx b/src/core/Crust/Widgets/Widget/Navigator/NavigatorPresenter/index.tsx
@@ -13,6 +13,7 @@ export { degreeToRadian, radianToDegree } from "./utils";
 export type Props = {
   theme?: Theme;
   degree: number;
+  editing?: boolean;
   /**
    * Pass degree of circle as callback arguments.
    * This event is invoked when mouse down on outer circle and mouse move.
@@ -42,6 +43,7 @@ export type Props = {
 const NavigatorPresenter: React.FC<Props> = memo(function NavigatorPresenterMemo({
   theme,
   degree,
+  editing,
   onRotate,
   onStartOrbit,
   onEndOrbit,
@@ -65,7 +67,7 @@ const NavigatorPresenter: React.FC<Props> = memo(function NavigatorPresenterMemo
   return (
     <Container>
       <CompassContainer>
-        <Compass ref={compassRef}>
+        <Compass ref={compassRef} editing={!!editing}>
           <CompassIcon onMouseDown={handleOnMouseDownCompass} publishedTheme={theme}>
             <Icon
               icon="compass"
@@ -83,7 +85,10 @@ const NavigatorPresenter: React.FC<Props> = memo(function NavigatorPresenterMemo
               <Icon icon="compassFocus" color={theme?.select} alt="" size={30} />
             </CompassFocusIcon>
           )}
-          <AngleIcon onMouseDown={handleOnMouseDownAngle} publishedTheme={theme}>
+          <AngleIcon
+            onMouseDown={handleOnMouseDownAngle}
+            publishedTheme={theme}
+            editing={!!editing}>
             <Icon icon="navigatorAngle" aria-label={t("aria-label-adjust-angle")} size={32} />
           </AngleIcon>
         </Compass>
@@ -127,14 +132,14 @@ const Help = styled.button`
   user-select: none;
 `;
 
-const Compass = styled.div`
+const Compass = styled.div<{ editing: boolean }>`
   position: relative;
   display: inline-grid;
   place-items: center;
   width: 64px;
   height: 64px;
   cursor: pointer;
-  z-index: 1;
+  ${({ editing }) => (!editing ? "z-index: 1;" : "")}
 `;
 
 const CompassIcon = styled.div<{ publishedTheme?: Theme }>`
@@ -161,7 +166,7 @@ const CompassFocusIcon = styled.div`
   height: 64px;
 `;
 
-const AngleIcon = styled.div<{ publishedTheme?: Theme }>`
+const AngleIcon = styled.div<{ publishedTheme?: Theme; editing: boolean }>`
   & circle {
     fill: ${({ theme, publishedTheme }) => publishedTheme?.background || theme.main.deepBg};
   }
@@ -171,7 +176,7 @@ const AngleIcon = styled.div<{ publishedTheme?: Theme }>`
   display: inline-block;
   height: 32px;
   width: 32px;
-  z-index: 1;
+  ${({ editing }) => (!editing ? "z-index: 1;" : "")}
 `;
 
 const Tool = styled.div<{ publishedTheme?: Theme }>`

diff --git a/src/core/Crust/Widgets/Widget/Navigator/index.tsx b/src/core/Crust/Widgets/Widget/Navigator/index.tsx
@@ -9,6 +9,7 @@ export type Property = {};
 
 const Navigator = ({
   theme,
+  editing,
   context: { camera, onCameraOrbit, onCameraRotateRight, onFlyTo, onZoomIn, onZoomOut } = {},
 }: Props): JSX.Element | null => {
   const { degree, events } = useHooks({
@@ -20,7 +21,7 @@ const Navigator = ({
     onZoomOut,
   });
 
-  return <NavigatorPresenter theme={theme} degree={degree} {...events} />;
+  return <NavigatorPresenter theme={theme} degree={degree} editing={!!editing} {...events} />;
 };
 
 export default Navigator;
diff --git a/src/core/Crust/Widgets/Widget/index.tsx b/src/core/Crust/Widgets/Widget/index.tsx
@@ -89,7 +89,7 @@ export default function WidgetComponent({
       style={{
         pointerEvents: editing ? "none" : "auto",
       }}>
-      <Builtin {...props} widget={w} />
+      <Builtin {...props} editing={editing} widget={w} />
     </div>
   ) : (
     <>{renderWidget?.(w)}</>

diff --git a/src/core/Visualizer/index.tsx b/src/core/Visualizer/index.tsx
@@ -143,33 +143,6 @@ export default function Visualizer({
 
   return (
     <>
-      <Map
-        ref={mapRef}
-        isBuilt={isBuilt}
-        isEditable={isEditable}
-        sceneProperty={sceneProperty}
-        engine={engine}
-        layers={layers}
-        engines={engines}
-        camera={camera}
-        clock={clock}
-        clusters={clusters}
-        hiddenLayers={hiddenLayers}
-        isLayerDraggable={isLayerDraggable}
-        isLayerDragging={isLayerDragging}
-        meta={meta}
-        style={style}
-        // overrides={overrides} // not used for now
-        property={sceneProperty}
-        selectedLayerId={selectedLayerId}
-        small={small}
-        ready={ready}
-        onCameraChange={handleCameraChange}
-        onLayerDrag={onLayerDrag}
-        onLayerDrop={onLayerDrop}
-        onLayerSelect={handleLayerSelect}
-        onTick={handleTick}
-      />
       <Crust
         isBuilt={isBuilt}
         isEditable={isEditable}
@@ -197,6 +170,33 @@ export default function Visualizer({
         onBlockInsert={onBlockInsert}
         renderInfoboxInsertionPopup={renderInfoboxInsertionPopup}
       />
+      <Map
+        ref={mapRef}
+        isBuilt={isBuilt}
+        isEditable={isEditable}
+        sceneProperty={sceneProperty}
+        engine={engine}
+        layers={layers}
+        engines={engines}
+        camera={camera}
+        clock={clock}
+        clusters={clusters}
+        hiddenLayers={hiddenLayers}
+        isLayerDraggable={isLayerDraggable}
+        isLayerDragging={isLayerDragging}
+        meta={meta}
+        style={style}
+        // overrides={overrides} // not used for now
+        property={sceneProperty}
+        selectedLayerId={selectedLayerId}
+        small={small}
+        ready={ready}
+        onCameraChange={handleCameraChange}
+        onLayerDrag={onLayerDrag}
+        onLayerDrop={onLayerDrop}
+        onLayerSelect={handleLayerSelect}
+        onTick={handleTick}
+      />
     </>
   );
 }