fix(plugin): layers.overrideProperty property merging and rerendering (…

…#108)
reearth · Oct 25, 2021 · e5c2550 · e5c2550
1 parent ebe1314
commit e5c2550
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 17 deletions.
diff --git a/package.json b/package.json
@@ -141,6 +141,7 @@
         "type-fest": "^2.3.4",
         "typescript": "^4.4.3",
         "typescript-styled-plugin": "^0.18.1",
+        "use-custom-compare": "^1.2.0",
         "webpack": "^5.54.0",
         "webpack-cli": "^4.5.0",
         "webpack-dev-server": "^4.3.0",

diff --git a/src/components/molecules/Visualizer/Engine/Cesium/Polygon/index.tsx b/src/components/molecules/Visualizer/Engine/Cesium/Polygon/index.tsx
@@ -1,7 +1,9 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { PolygonHierarchy, Cartesian3 } from "cesium";
+import { isEqual } from "lodash";
 import React, { useMemo } from "react";
 import { PolygonGraphics, Entity } from "resium";
+import { useCustomCompareMemo } from "use-custom-compare";
 
 import { Polygon as PolygonValue, toColor } from "@reearth/util/value";
 
@@ -36,7 +38,7 @@ const Polygon: React.FC<PrimitiveProps<Property>> = ({ layer }) => {
     shadows,
   } = property?.default ?? {};
 
-  const hierarchy = useMemo(
+  const hierarchy = useCustomCompareMemo(
     () =>
       polygon?.[0]
         ? new PolygonHierarchy(
@@ -50,6 +52,7 @@ const Polygon: React.FC<PrimitiveProps<Property>> = ({ layer }) => {
           )
         : undefined,
     [polygon],
+    isEqual,
   );
 
   const memoStrokeColor = useMemo(

diff --git a/src/components/molecules/Visualizer/Engine/Cesium/Polyline/index.tsx b/src/components/molecules/Visualizer/Engine/Cesium/Polyline/index.tsx
@@ -1,6 +1,8 @@
 import { Cartesian3 } from "cesium";
+import { isEqual } from "lodash";
 import React, { useMemo } from "react";
 import { PolylineGraphics, Entity } from "resium";
+import { useCustomCompareMemo } from "use-custom-compare";
 
 import { Coordinates, toColor } from "@reearth/util/value";
 
@@ -29,9 +31,10 @@ const Polyline: React.FC<PrimitiveProps<Property>> = ({ layer }) => {
     shadows,
   } = property?.default ?? {};
 
-  const positions = useMemo(
+  const positions = useCustomCompareMemo(
     () => coordinates?.map(c => Cartesian3.fromDegrees(c.lng, c.lat, c.height)),
     [coordinates],
+    isEqual,
   );
   const material = useMemo(() => toColor(strokeColor), [strokeColor]);
 

diff --git a/src/components/molecules/Visualizer/Engine/Cesium/Rect/index.tsx b/src/components/molecules/Visualizer/Engine/Cesium/Rect/index.tsx
@@ -1,6 +1,8 @@
 import { Rectangle, Color, ImageMaterialProperty } from "cesium";
+import { isEqual } from "lodash";
 import React, { useMemo } from "react";
 import { RectangleGraphics, Entity } from "resium";
+import { useCustomCompareMemo } from "use-custom-compare";
 
 import { Rect as RectValue } from "@reearth/util/value";
 
@@ -39,7 +41,7 @@ const Rect: React.FC<PrimitiveProps<Property>> = ({ layer }) => {
     shadows,
   } = property?.default ?? {};
 
-  const coordinates = useMemo(
+  const coordinates = useCustomCompareMemo(
     () =>
       rect &&
       rect.west <= rect.east &&
@@ -55,6 +57,7 @@ const Rect: React.FC<PrimitiveProps<Property>> = ({ layer }) => {
         ? Rectangle.fromDegrees(rect.west, rect.south, rect.east, rect.north)
         : undefined,
     [rect],
+    isEqual,
   );
 
   const material = useMemo(

diff --git a/src/components/molecules/Visualizer/Primitive/index.test.ts b/src/components/molecules/Visualizer/Primitive/index.test.ts
@@ -0,0 +1,11 @@
+import { mergeProperty } from ".";
+
+test("mergeProperty", () => {
+  const a = { a: { b: { lat: 0, lng: 1 } }, c: [{ d: 1 }, { d: 2 }], d: 1 };
+  const b = { a: { b: { lat: 1 } }, c: [{ d: 3 }] };
+  const e = { a: { b: { lat: 1 } }, c: [{ d: 3 }], d: 1 };
+
+  const result = mergeProperty(a, b);
+  expect(result).toEqual(e);
+  expect(result).not.toBe(a);
+});
diff --git a/src/components/molecules/Visualizer/Primitive/index.tsx b/src/components/molecules/Visualizer/Primitive/index.tsx
@@ -1,4 +1,4 @@
-import { merge, cloneDeep } from "lodash-es";
+import { mergeWith } from "lodash";
 import React, { ComponentType, useMemo } from "react";
 
 import { useContext } from "../Plugin";
@@ -30,7 +30,7 @@ export default function PrimitiveComponent<P = any, PP = any, SP = any>({
   const overridenProperty = useMemo(
     () =>
       props.layer && overriddenProperties?.[props.layer.id]
-        ? merge(cloneDeep(props.layer.property), overriddenProperties[props.layer.id])
+        ? mergeProperty(props.layer.property, overriddenProperties[props.layer.id])
         : undefined,
     [overriddenProperties, props.layer],
   );
@@ -52,16 +52,13 @@ export default function PrimitiveComponent<P = any, PP = any, SP = any>({
   return isHidden || !props.layer?.isVisible ? null : Builtin ? (
     <Builtin {...props} layer={actualLayer} />
   ) : null;
-  // <Plugin
-  //   pluginId={props.layer?.pluginId}
-  //   extensionId={props.layer?.extensionId}
-  //   sourceCode={(props.layer as any)?.__REEARTH_SOURCECODE} // for debugging
-  //   extensionType="primitive"
-  //   pluginBaseUrl={pluginBaseUrl}
-  //   visible={false}
-  //   property={props.pluginProperty}
-  //   sceneProperty={props.sceneProperty}
-  //   layer={props.layer}
-  //   pluginProperty={pluginProperty}
-  // />
+}
+
+export function mergeProperty(a: any, b: any) {
+  return mergeWith(
+    { ...a },
+    b,
+    (s: any, v: any, _k: string | number | symbol, _obj: any, _src: any, stack: { size: number }) =>
+      stack.size > 0 || Array.isArray(v) ? v ?? s : undefined,
+  );
 }
diff --git a/yarn.lock b/yarn.lock
@@ -19016,6 +19016,11 @@ use-composed-ref@^1.0.0:
   dependencies:
     ts-essentials "^2.0.3"
 
+use-custom-compare@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/use-custom-compare/-/use-custom-compare-1.2.0.tgz#1d091361a3dbbc6092d16f8b123f0ea255040b6a"
+  integrity sha512-eqWhT9cPz3Y1R7CW/SHVpVudwAqmQD3mAOO/dk+mVp9NhVpgVigDl1w6WEeHOMa3JbhwQYOrCI9fLAdbtAOSXQ==
+
 use-debounce@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/use-debounce/-/use-debounce-7.0.0.tgz#00a67d23d4fe09905e11145a99278da06c01c880"