feat: change layer indicators from preset list (#245)

* indicator * impl indicator * impl indicator * change indicators * show image * reslove comments * Fix syntax * Update icons.ts * Update src/components/molecules/Visualizer/Engine/Cesium/core/Indicator.tsx Co-authored-by: KaWaite <34051327+KaWaite@users.noreply.github.com> * Update src/components/molecules/Visualizer/Engine/Cesium/hooks.ts Co-authored-by: KaWaite <34051327+KaWaite@users.noreply.github.com> * Update src/components/molecules/Visualizer/Engine/Cesium/core/Indicator.tsx Co-authored-by: KaWaite <34051327+KaWaite@users.noreply.github.com> * Update src/components/molecules/Visualizer/Engine/Cesium/core/Indicator.tsx Co-authored-by: KaWaite <34051327+KaWaite@users.noreply.github.com> * pr-commets * pr-fixes3 * remove commented code * zooming - dragging * pr1 Co-authored-by: rot1024 <aayhrot@gmail.com> Co-authored-by: nina992 <nouralali992@gmail.com> Co-authored-by: KaWaite <34051327+KaWaite@users.noreply.github.com>
reearth · Jul 4, 2022 · db185ef · db185ef
1 parent 845e2a3
commit db185ef
Show file tree

Hide file tree

Showing 6 changed files with 153 additions and 0 deletions.
diff --git a/src/components/atoms/Icon/Icons/crosshair.svg b/src/components/atoms/Icon/Icons/crosshair.svg
diff --git a/src/components/atoms/Icon/icons.ts b/src/components/atoms/Icon/icons.ts
@@ -132,6 +132,9 @@ import UploadZipPlugin from "./Icons/uploadZipPlugin.svg";
 import PublicGitHubRepo from "./Icons/publicGitHubRepo.svg";
 import PrivateGitHubRepo from "./Icons/privateGitHubRepo.svg";
 
+// Indicator
+import Crosshair from "./Icons/crosshair.svg";
+
 export default {
   outline: Layer,
   layer: Layer,
@@ -244,4 +247,5 @@ export default {
   menuForDevice: MenuForDevice,
   plugin: Plugin,
   tag: Tag,
+  crosshair: Crosshair,
 };
diff --git a/src/components/molecules/Visualizer/Engine/Cesium/core/Indicator.tsx b/src/components/molecules/Visualizer/Engine/Cesium/core/Indicator.tsx
@@ -0,0 +1,123 @@
+import useTransition, { TransitionStatus } from "@rot1024/use-transition";
+import { BoundingSphere, Cartesian3, SceneTransforms, Cartesian2 } from "cesium";
+import { useEffect, useState } from "react";
+import { useCesium } from "resium";
+
+import Icon from "@reearth/components/atoms/Icon";
+import { styled } from "@reearth/theme";
+
+import { SceneProperty } from "../../ref";
+import { useIcon } from "../common";
+
+export type Props = {
+  className?: string;
+  property?: SceneProperty;
+};
+
+export default function Indicator({ className, property }: Props): JSX.Element | null {
+  const { viewer } = useCesium();
+  const [isVisible, setIsVisible] = useState(true);
+  const [pos, setPos] = useState<Cartesian2>();
+
+  const transiton = useTransition(!!pos && isVisible, 500, {
+    mountOnEnter: true,
+    unmountOnExit: true,
+  });
+  const { indicator_type, indicator_image, indicator_image_scale } = property?.indicator ?? {};
+  const [img, w, h] = useIcon({ image: indicator_image, imageSize: indicator_image_scale });
+
+  useEffect(() => {
+    if (!viewer) return;
+    const handleTick = () => {
+      if (viewer.isDestroyed()) return;
+      const selected = viewer.selectedEntity;
+      if (
+        !selected ||
+        !selected.isShowing ||
+        !selected.isAvailable(viewer.clock.currentTime) ||
+        !selected.position
+      ) {
+        setIsVisible(false);
+        return;
+      }
+
+      // https://github.com/CesiumGS/cesium/blob/1.94/Source/Widgets/Viewer/Viewer.js#L1839
+      let position: Cartesian3 | undefined = undefined;
+      const boundingSphere = new BoundingSphere();
+      const state = (viewer.dataSourceDisplay as any).getBoundingSphere(
+        selected,
+        true,
+        boundingSphere,
+      );
+      // https://github.com/CesiumGS/cesium/blob/main/Source/DataSources/BoundingSphereState.js#L24
+      if (state !== 2 /* BoundingSphereState.FAILED */) {
+        position = boundingSphere.center;
+      } else if (selected.position) {
+        position = selected.position.getValue(viewer.clock.currentTime, position);
+      }
+
+      if (position) {
+        const pos = SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, position);
+        setPos(pos);
+        setIsVisible(true);
+      } else {
+        setIsVisible(false);
+      }
+    };
+
+    viewer.clock.onTick.addEventListener(handleTick);
+    return () => {
+      if (viewer.isDestroyed()) return;
+      viewer.clock.onTick.removeEventListener(handleTick);
+    };
+  }, [viewer]);
+
+  return transiton !== "unmounted" && pos ? (
+    indicator_type === "crosshair" ? (
+      <StyledIcon
+        icon="crosshair"
+        size="48px"
+        className={className}
+        transition={transiton}
+        style={{ left: pos.x + "px", top: pos.y + "px" }}
+      />
+    ) : indicator_type === "custom" ? (
+      <Image
+        src={img}
+        width={w}
+        height={h}
+        transition={transiton}
+        style={{ left: pos.x + "px", top: pos.y + "px" }}
+      />
+    ) : (
+      <StyledIndicator transition={transiton} style={{ left: pos.x + "px", top: pos.y + "px" }} />
+    )
+  ) : null;
+}
+
+const StyledIndicator = styled.div<{ transition: TransitionStatus }>`
+  position: absolute;
+  transform: translate(-50%, -50%);
+  transition: ${({ transition }) =>
+    transition === "entering" || transition === "exiting" ? "all 0.5s ease" : ""};
+  opacity: ${({ transition }) => (transition === "entering" || transition === "entered" ? 1 : 0)};
+  pointer-events: none;
+`;
+
+const StyledIcon = styled(Icon)<{ transition: TransitionStatus }>`
+  position: absolute;
+  transform: translate(-50%, -50%);
+  transition: ${({ transition }) =>
+    transition === "entering" || transition === "exiting" ? "all 0.5s ease" : ""};
+  opacity: ${({ transition }) => (transition === "entering" || transition === "entered" ? 1 : 0)};
+  pointer-events: none;
+`;
+
+const Image = styled.img<{ transition: TransitionStatus }>`
+  position: absolute;
+  transform: translate(-50%, -50%);
+  transition: ${({ transition }) =>
+    transition === "entering" || transition === "exiting" ? "all 0.5s ease" : ""};
+  opacity: ${({ transition }) => (transition === "entering" || transition === "entered" ? 1 : 0)};
+  pointer-events: none;
+`;
diff --git a/src/components/molecules/Visualizer/Engine/Cesium/hooks.ts b/src/components/molecules/Visualizer/Engine/Cesium/hooks.ts
@@ -60,6 +60,16 @@ export default ({
   // imagery layers
   const [imageryLayers, setImageryLayers] = useState<ImageryLayerData[]>();
 
+  // indicator
+  const selectionIndicator = useMemo(
+    () =>
+      !!(
+        property?.indicator?.indicator_type == undefined ||
+        property?.indicator?.indicator_type == "default"
+      ),
+    [property?.indicator?.indicator_type],
+  );
+
   useDeepCompareEffect(() => {
     const newTiles = (property?.tiles?.length ? property.tiles : undefined)
       ?.map(
@@ -301,6 +311,7 @@ export default ({
     limiterDimensions,
     cameraViewOuterBoundaries,
     cameraViewBoundariesMaterial,
+    selectionIndicator,
     handleMount,
     handleUnmount,
     handleClick,

diff --git a/src/components/molecules/Visualizer/Engine/Cesium/index.tsx b/src/components/molecules/Visualizer/Engine/Cesium/index.tsx
@@ -20,6 +20,7 @@ import {
 import type { EngineProps, Ref as EngineRef } from "..";
 
 import Clock from "./core/Clock";
+import Indicator from "./core/Indicator";
 import Event from "./Event";
 import useHooks from "./hooks";
 
@@ -53,6 +54,7 @@ const Cesium: React.ForwardRefRenderFunction<EngineRef, EngineProps> = (
     limiterDimensions,
     cameraViewOuterBoundaries,
     cameraViewBoundariesMaterial,
+    selectionIndicator,
     handleMount,
     handleUnmount,
     handleClick,
@@ -86,6 +88,7 @@ const Cesium: React.ForwardRefRenderFunction<EngineRef, EngineProps> = (
         navigationHelpButton={false}
         projectionPicker={false}
         sceneModePicker={false}
+        selectionIndicator={selectionIndicator}
         creditContainer={creditContainer}
         style={{
           width: small ? "300px" : "auto",
@@ -102,6 +105,9 @@ const Cesium: React.ForwardRefRenderFunction<EngineRef, EngineProps> = (
         onClick={handleClick}>
         <Event onMount={handleMount} onUnmount={handleUnmount} />
         <Clock property={property} />
+        <Entity>
+          <Indicator property={property} />
+        </Entity>
         <ScreenSpaceEventHandler useDefault>
           {/* remove default click event */}
           <ScreenSpaceEvent type={ScreenSpaceEventType.LEFT_CLICK} />

diff --git a/src/components/molecules/Visualizer/Engine/ref.ts b/src/components/molecules/Visualizer/Engine/ref.ts
@@ -22,6 +22,7 @@ export type EngineRef = {
 };
 
 export type SceneMode = "3d" | "2d" | "columbus";
+export type IndicatorTypes = "default" | "crosshair" | "custom";
 
 export type FlyToDestination = {
   /** Degrees */
@@ -88,6 +89,11 @@ export type SceneProperty = {
     cameraLimitterTargetWidth?: number;
     cameraLimitterTargetLength?: number;
   };
+  indicator?: {
+    indicator_type: IndicatorTypes;
+    indicator_image?: string;
+    indicator_image_scale?: number;
+  };
   tiles?: {
     id: string;
     tile_type?: string;