fix(chore): invoke requestRender in primitive features whenever compo…

…nent is updated (#817)
reearth · Nov 15, 2023 · e3ed8c0 · e3ed8c0
1 parent 3e6b7c6
commit e3ed8c0
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 3 deletions.
diff --git a/web/src/beta/lib/core/engines/Cesium/Feature/Marker/index.tsx b/web/src/beta/lib/core/engines/Cesium/Feature/Marker/index.tsx
@@ -1,11 +1,12 @@
 import { Cartesian3, Color, HorizontalOrigin, VerticalOrigin, Cartesian2 } from "cesium";
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import { BillboardGraphics, PointGraphics, LabelGraphics, PolylineGraphics } from "resium";
 
 import { toCSSFont } from "@reearth/beta/utils/value";
 
 import type { MarkerAppearance } from "../../..";
 import { useIcon, ho, vo, heightReference, toColor } from "../../common";
+import { useContext } from "../context";
 import {
   EntityExt,
   toDistanceDisplayCondition,
@@ -37,6 +38,8 @@ export default function Marker({ property, id, isVisible, geometry, layer, featu
     [geometry?.coordinates, geometry?.type, property?.height, property?.location],
   );
 
+  const { requestRender } = useContext();
+
   const {
     show = true,
     extrude,
@@ -134,6 +137,10 @@ export default function Marker({ property, id, isVisible, geometry, layer, featu
     [property?.near, property?.far],
   );
 
+  useEffect(() => {
+    requestRender?.();
+  });
+
   return !pos || !isVisible || !show ? null : (
     <>
       {extrudePoints && (

diff --git a/web/src/beta/lib/core/engines/Cesium/Feature/Model/index.tsx b/web/src/beta/lib/core/engines/Cesium/Feature/Model/index.tsx
@@ -176,6 +176,10 @@ export default function Model({
     }
   }, [imageBasedLighting]);
 
+  useEffect(() => {
+    requestRender?.();
+  });
+
   // if data type is gltf, layer should be rendered. Otherwise only features should be rendererd.
   return (isGltfData ? feature : !feature) || !isVisible || !show || !actualUrl ? null : (
     <EntityExt

diff --git a/web/src/beta/lib/core/engines/Cesium/Feature/Polygon/index.tsx b/web/src/beta/lib/core/engines/Cesium/Feature/Polygon/index.tsx
@@ -1,14 +1,15 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { Cartesian3, PolygonHierarchy } from "cesium";
 import { isEqual } from "lodash-es";
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import { Entity, PolygonGraphics, PolylineGraphics } from "resium";
 import { useCustomCompareMemo } from "use-custom-compare";
 
 import { Polygon as PolygonValue, toColor } from "@reearth/beta/utils/value";
 
 import type { PolygonAppearance } from "../../..";
 import { classificationType, heightReference, shadowMode } from "../../common";
+import { useContext } from "../context";
 import {
   EntityExt,
   toDistanceDisplayCondition,
@@ -42,6 +43,8 @@ export default function Polygon({
     [geometry?.coordinates, geometry?.type, property?.polygon],
   );
 
+  const { requestRender } = useContext();
+
   const {
     show = true,
     fill = true,
@@ -107,6 +110,10 @@ export default function Polygon({
     [property?.near, property?.far],
   );
 
+  useEffect(() => {
+    requestRender?.();
+  });
+
   return !isVisible || !coordiantes || !show ? null : (
     <>
       <EntityExt

diff --git a/web/src/beta/lib/core/engines/Cesium/Feature/Polyline/index.tsx b/web/src/beta/lib/core/engines/Cesium/Feature/Polyline/index.tsx
@@ -1,13 +1,14 @@
 import { Cartesian3 } from "cesium";
 import { isEqual } from "lodash-es";
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import { PolylineGraphics } from "resium";
 import { useCustomCompareMemo } from "use-custom-compare";
 
 import { Coordinates, toColor } from "@reearth/beta/utils/value";
 
 import type { PolylineAppearance } from "../../..";
 import { classificationType, shadowMode } from "../../common";
+import { useContext } from "../context";
 import {
   EntityExt,
   toDistanceDisplayCondition,
@@ -34,6 +35,8 @@ export default function Polyline({ id, isVisible, property, geometry, layer, fea
     [geometry?.coordinates, geometry?.type, property?.coordinates],
   );
 
+  const { requestRender } = useContext();
+
   const {
     clampToGround,
     strokeColor,
@@ -54,6 +57,10 @@ export default function Polyline({ id, isVisible, property, geometry, layer, fea
     [property?.near, property?.far],
   );
 
+  useEffect(() => {
+    requestRender?.();
+  });
+
   return !isVisible || !coordinates || !show ? null : (
     <EntityExt
       id={id}