fix: layer select state not update properly (#268)

* fix: new created layer doesn't got selected automaticlly * fix: unselect not emit plugin api select event * fix: event unexpect emit
reearth · Jul 9, 2022 · 5f7c69e · 5f7c69e
1 parent eb41daf
commit 5f7c69e
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git a/src/components/molecules/Visualizer/Plugin/context.tsx b/src/components/molecules/Visualizer/Plugin/context.tsx
@@ -172,8 +172,14 @@ export function Provider({
 
   useEmit<Pick<ReearthEventType, "cameramove" | "select">>(
     {
-      select: selectedLayer ? [selectedLayer.id] : undefined,
-      cameramove: camera ? [camera] : undefined,
+      select: useMemo<[layerId: string | undefined]>(
+        () => (selectedLayer ? [selectedLayer.id] : [undefined]),
+        [selectedLayer],
+      ),
+      cameramove: useMemo<[camera: CameraPosition] | undefined>(
+        () => (camera ? [camera] : undefined),
+        [camera],
+      ),
     },
     emit,
   );

diff --git a/src/components/molecules/Visualizer/hooks.ts b/src/components/molecules/Visualizer/hooks.ts
@@ -1,8 +1,8 @@
 import { Rectangle, Cartographic, Math as CesiumMath } from "cesium";
 import { omit } from "lodash";
-import { useRef, useEffect, useMemo, useState, useCallback, RefObject } from "react";
+import { useRef, useEffect, useMemo, useState, useCallback, RefObject, useReducer } from "react";
 import { initialize, pageview } from "react-ga";
-import { useSet, useUpdate } from "react-use";
+import { useSet } from "react-use";
 
 import { useDrop, DropOptions } from "@reearth/util/use-dnd";
 import { Camera, LatLng, ValueTypes, ValueType } from "@reearth/util/value";
@@ -250,16 +250,18 @@ function useLayers({
   const [layerSelectionReason, setSelectionReason] = useState<string | undefined>();
   const [layerOverridenInfobox, setPrimitiveOverridenInfobox] = useState<OverriddenInfobox>();
   const [layers] = useState<LayerStore>(() => new LayerStore(rootLayer));
-  const forceUpdate = useUpdate();
+  const updateReducer = useCallback((num: number): number => (num + 1) % 1_000_000, []);
+  const [layersRenderKey, forceUpdate] = useReducer(updateReducer, 0);
 
   useEffect(() => {
     layers.setRootLayer(rootLayer);
     forceUpdate();
-  }, [layers, rootLayer, forceUpdate]);
+  }, [layers, rootLayer]);
 
   const selectedLayer = useMemo(
     () => (selectedLayerId ? layers?.findById(selectedLayerId) : undefined),
-    [selectedLayerId, layers],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [selectedLayerId, layers, layersRenderKey],
   );
 
   const selectLayer = useCallback(
@@ -278,7 +280,7 @@ function useLayers({
       forceUpdate();
       return id;
     },
-    [layers, forceUpdate],
+    [layers],
   );
 
   const blocks = useMemo(