fix: disable default cesium mouse event (#42)

Co-authored-by: HideBa <49897538+HideBa@users.noreply.github.com>
reearth · Jul 16, 2021 · 129ae36 · 129ae36
1 parent ebfd416
commit 129ae36
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 14 deletions.
diff --git a/src/components/molecules/Common/Cesium/hooks.ts b/src/components/molecules/Common/Cesium/hooks.ts
@@ -4,7 +4,6 @@ import { useDeepCompareEffect } from "react-use";
 import { CesiumComponentRef } from "resium";
 import {
   Viewer as CesiumViewer,
-  ScreenSpaceEventType,
   PerspectiveFrustum,
   Math as CesiumMath,
   ImageryProvider,
@@ -82,12 +81,6 @@ export default ({
     cesium.current?.cesiumElement?.scene.requestRender();
   });
 
-  useEffect(() => {
-    const v = cesium.current?.cesiumElement;
-    v?.screenSpaceEventHandler.removeInputAction(ScreenSpaceEventType.LEFT_CLICK);
-    v?.screenSpaceEventHandler.removeInputAction(ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
-  }, []);
-
   useEffect(() => {
     const viewer = cesium.current?.cesiumElement;
     if (!viewer) return;
@@ -130,9 +123,8 @@ export default ({
     }
   }, [cameraState, onCameraChange]);
 
-  const [imageryLayers, setImageryLayers] = useState<
-    [string, ImageryProvider, number | undefined, number | undefined][]
-  >();
+  const [imageryLayers, setImageryLayers] =
+    useState<[string, ImageryProvider, number | undefined, number | undefined][]>();
 
   useDeepCompareEffect(() => {
     const newTiles = (property?.tiles?.length ? property.tiles : undefined)
@@ -226,9 +218,11 @@ const getCamera = (viewer: CesiumViewer) => {
   if (!(camera.frustum instanceof PerspectiveFrustum)) return;
 
   const ellipsoid = viewer.scene.globe.ellipsoid;
-  const { latitude, longitude, height: altitude } = ellipsoid.cartesianToCartographic(
-    camera.position,
-  );
+  const {
+    latitude,
+    longitude,
+    height: altitude,
+  } = ellipsoid.cartesianToCartographic(camera.position);
   const lat = CesiumMath.toDegrees(latitude);
   const lng = CesiumMath.toDegrees(longitude);
   const { heading, pitch, roll } = camera;

diff --git a/src/components/molecules/Common/Cesium/index.tsx b/src/components/molecules/Common/Cesium/index.tsx
@@ -9,15 +9,18 @@ import {
   Scene,
   CameraFlyTo,
   SkyBox,
+  ScreenSpaceEventHandler,
+  ScreenSpaceEvent,
 } from "resium";
+import { ScreenSpaceEventType } from "cesium";
 
 import { styled } from "@reearth/theme";
 import { SceneProperty, Camera } from "@reearth/util/value";
+import Loading from "@reearth/components/atoms/Loading";
 import PluginPrimitive from "../plugin/PluginPrimitive";
 import PluginWidget from "../plugin/PluginWidget";
 import { Provider } from "./api";
 import useHooks, { Ref as RefType } from "./hooks";
-import Loading from "@reearth/components/atoms/Loading";
 
 export type Layer = {
   id: string;
@@ -118,6 +121,11 @@ const Cesium: React.ForwardRefRenderFunction<Ref, Props> = (
       small={small}
       onClick={selectViewerEntity}>
       <Provider layers={layers} onEntitySelect={selectEntity}>
+        <ScreenSpaceEventHandler useDefault>
+          {/* Disable default events */}
+          <ScreenSpaceEvent type={ScreenSpaceEventType.LEFT_DOUBLE_CLICK} />
+          <ScreenSpaceEvent type={ScreenSpaceEventType.LEFT_CLICK} />
+        </ScreenSpaceEventHandler>
         {cameraDest && cameraOrientation && (
           <CameraFlyTo destination={cameraDest} orientation={cameraOrientation} duration={0} once />
         )}