feat: add override, replace and delete plugin API on reearth/core (#451)

* feat: add override and delete plugin API on reearth/core * feat: add replace api * fix: fix ci error
reearth · Feb 10, 2023 · 2e1c411 · 2e1c411
1 parent f24ef53
commit 2e1c411
Show file tree

Hide file tree

Showing 10 changed files with 59 additions and 71 deletions.
diff --git a/src/core/Crust/Plugins/api.ts b/src/core/Crust/Plugins/api.ts
@@ -501,6 +501,15 @@ export function commonReearth({
       get findAll() {
         return layers()?.findAll;
       },
+      get override() {
+        return layers()?.override;
+      },
+      get replace() {
+        return layers()?.replace;
+      },
+      get delete() {
+        return layers()?.deleteLayer;
+      },
       get walk() {
         return layers()?.walk;
       },

diff --git a/src/core/Crust/Plugins/hooks.ts b/src/core/Crust/Plugins/hooks.ts
@@ -230,8 +230,8 @@ export default function ({
   );
 
   const overrideLayerProperty = useCallback(
-    (id: string, properties?: Partial<any> | null | undefined) => {
-      layersRef?.overrideProperties(id, properties);
+    (id: string, property?: Partial<any> | null | undefined) => {
+      layersRef?.override(id, { property });
     },
     [layersRef],
   );

diff --git a/src/core/Crust/Plugins/plugin_types.ts b/src/core/Crust/Plugins/plugin_types.ts
@@ -6,6 +6,7 @@ import type {
   CameraPosition,
   Tag,
   NaiveLayer,
+  LayerSimple,
 } from "@reearth/core/mantle";
 import type {
   CameraOptions,
@@ -61,21 +62,19 @@ export type Reearth = {
       WrappedRef<LayersRef>,
       | "layers"
       | "isLayer"
-      | "overrideProperties"
-      | "override"
       | "add"
       | "select"
       | "addAll"
-      | "replace"
       | "deleteLayer"
       | "selectedLayer"
       | "selectedFeature"
       | "overriddenLayers"
     > & {
       readonly layersInViewport?: () => LazyLayer[] | undefined;
       readonly overriddenProperties?: OverriddenLayer[];
-      readonly overrideProperty?: WrappedRef<LayersRef>["overrideProperties"];
+      readonly overrideProperty?: (properties: LayerSimple["properties"] | undefined) => void;
       readonly add?: (layer: NaiveLayer) => string | undefined;
+      readonly delete?: WrappedRef<LayersRef>["deleteLayer"];
       readonly select?: (
         layerId: string | undefined,
         reason?: LayerSelectionReason | undefined,

diff --git a/src/core/Crust/Plugins/storybook.tsx b/src/core/Crust/Plugins/storybook.tsx
@@ -102,6 +102,9 @@ export const context: Context = {
       findByIds: act("layers.findByIds"),
       walk: act("layers.walk"),
       find: act("layers.find"),
+      override: act("layers.override"),
+      replace: act("layers.replace"),
+      delete: act("layers.delete"),
       findAll: act("layers.findAll"),
       findByTags: act("layers.findByTags"),
       findByTagLabels: act("layers.findByTagLabels"),

diff --git a/src/core/Map/Layers/hooks.test.ts b/src/core/Map/Layers/hooks.test.ts
@@ -460,7 +460,7 @@ test("override", () => {
   expect(l3.tags).toBeUndefined();
 });
 
-test("overrideProperties", () => {
+test("override property for compat", () => {
   const dataValue = {
     type: "Feature",
     id: "y",
@@ -492,12 +492,14 @@ test("overrideProperties", () => {
     return { ref, flattenedLayers };
   });
 
-  result.current.ref.current?.overrideProperties("y", {
-    default: {
-      pointSize: 100,
-      location: {
-        lat: 1,
-        lng: 2,
+  result.current.ref.current?.override("y", {
+    property: {
+      default: {
+        pointSize: 100,
+        location: {
+          lat: 1,
+          lng: 2,
+        },
       },
     },
   });
@@ -512,8 +514,10 @@ test("overrideProperties", () => {
   expect(l.marker).toEqual({ pointSize: 100, pointColor: "red" });
   expect(l.tags).toBeUndefined();
 
-  result.current.ref.current?.overrideProperties("y", {
-    pointSize: 200,
+  result.current.ref.current?.override("y", {
+    property: {
+      pointSize: 200,
+    },
   });
   rerender();
   const l2 = result.current.flattenedLayers[1];

diff --git a/src/core/Map/Layers/hooks.ts b/src/core/Map/Layers/hooks.ts
@@ -16,7 +16,7 @@ import { v4 as uuidv4 } from "uuid";
 import { DATA_CACHE_KEYS } from "@reearth/core/mantle/atoms/data";
 import { objectFromGetter } from "@reearth/util/object";
 
-import { computeAtom, convertLegacyLayer, LayerSimple } from "../../mantle";
+import { computeAtom, convertLegacyLayer } from "../../mantle";
 import type { Atom, ComputedLayer, Layer, NaiveLayer } from "../../mantle";
 import { useGet } from "../utils";
 
@@ -45,8 +45,7 @@ export type Ref = {
   add: (layer: NaiveLayer) => LazyLayer | undefined;
   addAll: (...layers: NaiveLayer[]) => (LazyLayer | undefined)[];
   replace: (...layers: Layer[]) => void;
-  override: (id: string, layer?: Partial<Layer> | null) => void;
-  overrideProperties: (id: string, properties?: Partial<LayerSimple["properties"]> | null) => void;
+  override: (id: string, layer?: (Partial<Layer> & { property?: any }) | null) => void;
   deleteLayer: (...ids: string[]) => void;
   isLayer: (obj: any) => obj is LazyLayer;
   layers: () => LazyLayer[];
@@ -288,56 +287,27 @@ export default function useHooks({
   );
 
   const override = useCallback(
-    (id: string, layer?: Partial<Layer> | null) => {
-      if (!layer) {
-        setOverridenLayers(layers => layers.filter(l => l.id !== id));
-        return;
-      }
-
-      const originalLayer = layerMap.get(id);
-      if (!originalLayer) return;
-
-      const rawLayer = compat({
-        ...layer,
-        ...(originalLayer.compat && "property" in layer
-          ? {
-              type: originalLayer.type === "group" ? "group" : "item",
-              extensionId: originalLayer.compat.extensionId,
-            }
-          : {}),
-      });
-      if (!rawLayer) return;
-      const layer2 = { id, ...omit(rawLayer, "id", "type", "children", "compat") };
-      setOverridenLayers(layers => {
-        const i = layers.findIndex(l => l.id === id);
-        if (i < 0) return [...layers, layer2];
-        return [...layers.slice(0, i), layer2, ...layers.slice(i + 1)];
-      });
-    },
-    [layerMap],
-  );
-
-  // For compat
-  const overrideProperties = useCallback(
-    (id: string, properties?: Partial<LayerSimple["properties"]> | null) => {
+    (id: string, layer?: (Partial<Layer> & { property?: any }) | null) => {
       const originalLayer = layerMap.get(id);
       if (!originalLayer) return;
 
+      const property = layer?.property;
       const rawLayer = compat({
         ...originalLayer,
-        ...(originalLayer.compat && properties
+        ...(originalLayer.compat && property
           ? {
               type: originalLayer.type === "group" ? "group" : "item",
               extensionId: originalLayer.compat.extensionId,
               property: {
                 default: {
                   ...(originalLayer.compat.property?.default || {}),
-                  ...(properties.default || {}),
+                  ...(property.default || {}),
                 },
               },
             }
           : {}),
-        ...(!originalLayer.compat && properties ? { property: properties } : {}),
+        ...(!originalLayer.compat && property ? { property } : {}),
+        ...layer,
       });
       if (!rawLayer) return;
 
@@ -369,9 +339,9 @@ export default function useHooks({
         const newLayers = filterLayers(layers, l => {
           if (ids.includes(l.id)) {
             deleted.push(l);
-            return false;
+            return true;
           }
-          return true;
+          return false;
         });
         deleted
           .map(l => l.id)
@@ -381,8 +351,8 @@ export default function useHooks({
             lazyLayerMap.delete(id);
             showLayer(id);
           });
-        tempLayersRef.current = tempLayersRef.current.filter(
-          l => !deleted.find(ll => ll.id === l.id),
+        tempLayersRef.current = tempLayersRef.current.filter(l =>
+          deleted.find(ll => ll.id === l.id),
         );
         return newLayers;
       });
@@ -498,7 +468,6 @@ export default function useHooks({
       addAll,
       replace,
       override,
-      overrideProperties,
       deleteLayer,
       findByIds,
       isLayer,
@@ -520,7 +489,6 @@ export default function useHooks({
       addAll,
       replace,
       override,
-      overrideProperties,
       deleteLayer,
       findByIds,
       isLayer,
@@ -612,7 +580,7 @@ function filterLayers(
   const newLayers: Layer[] = [];
   for (let i = 0; i < layers.length; i++) {
     const l = layers[i];
-    if (cb(l, i, layers)) {
+    if (!cb(l, i, layers)) {
       newLayers.push(l);
     }
     if (l.type === "group" && Array.isArray(l.children)) {

diff --git a/src/core/Map/ref.ts b/src/core/Map/ref.ts
@@ -74,7 +74,6 @@ const layersRefKeys: FunctionKeys<LayersRef> = {
   isLayer: 1,
   layers: 1,
   override: 1,
-  overrideProperties: 1,
   replace: 1,
   select: 1,
   selectedLayer: 1,

diff --git a/src/core/engines/Cesium/Feature/Raster/hooks.ts b/src/core/engines/Cesium/Feature/Raster/hooks.ts
@@ -10,7 +10,7 @@ import { useEffect, useMemo, useRef } from "react";
 import { useCesium } from "resium";
 
 import type { ComputedFeature, ComputedLayer, Feature } from "../../..";
-import { extractSimpleLayerData } from "../utils";
+import { extractSimpleLayer, extractSimpleLayerData } from "../utils";
 
 import { Props } from "./types";
 
@@ -111,10 +111,11 @@ export const useMVT = ({
   const cachedFeatureIdsRef = useRef(new Set<Feature["id"]>());
   const shouldSyncFeatureRef = useRef(false);
 
-  const polygonAppearanceFillStyle = layer?.polygon?.fillColor;
-  const polygonAppearanceStrokeStyle = layer?.polygon?.strokeColor;
-  const polygonAppearanceLineWidth = layer?.polygon?.strokeWidth;
-  const polygonAppearanceLineJoin = layer?.polygon?.lineJoin;
+  const layerSimple = extractSimpleLayer(layer);
+  const polygonAppearanceFillStyle = layerSimple?.polygon?.fillColor;
+  const polygonAppearanceStrokeStyle = layerSimple?.polygon?.strokeColor;
+  const polygonAppearanceLineWidth = layerSimple?.polygon?.strokeWidth;
+  const polygonAppearanceLineJoin = layerSimple?.polygon?.lineJoin;
 
   const tempFeaturesRef = useRef<Feature[]>([]);
   const tempComputedFeaturesRef = useRef<ComputedFeature[]>([]);

diff --git a/src/core/engines/Cesium/Feature/Raster/index.tsx b/src/core/engines/Cesium/Feature/Raster/index.tsx
@@ -1,7 +1,7 @@
 import { isEqual } from "lodash-es";
 import { memo } from "react";
 
-import { type FeatureComponentConfig } from "../utils";
+import { extractSimpleLayer, extractSimpleLayerData, type FeatureComponentConfig } from "../utils";
 
 import { useMVT, useWMS } from "./hooks";
 import type { Props } from "./types";
@@ -24,7 +24,8 @@ export default memo(
   Raster,
   (prev, next) =>
     // In Raster component, we only use polygon, so we only check polygon in layer props.
-    isEqual(prev.layer?.polygon, next.layer?.polygon) &&
+    isEqual(extractSimpleLayer(prev.layer)?.polygon, extractSimpleLayer(next.layer)?.polygon) &&
+    isEqual(extractSimpleLayerData(prev.layer), extractSimpleLayerData(next.layer)) &&
     isEqual(prev.property, next.property) &&
     prev.isVisible === next.isVisible &&
     prev.evalFeature === next.evalFeature &&

diff --git a/src/core/engines/Cesium/Feature/utils.tsx b/src/core/engines/Cesium/Feature/utils.tsx
@@ -20,7 +20,7 @@ import {
 } from "react";
 import { type CesiumComponentRef, Entity } from "resium";
 
-import { Data, TimeInterval } from "@reearth/core/mantle";
+import { Data, LayerSimple, TimeInterval } from "@reearth/core/mantle";
 
 import type { ComputedFeature, ComputedLayer, FeatureComponentProps, Geometry } from "../..";
 
@@ -141,11 +141,15 @@ const tagKeys = Object.keys(tagObj) as (keyof Tag)[];
 
 const tagKey = "__reearth_tag";
 
-export const extractSimpleLayerData = (layer: ComputedLayer | undefined): Data | void => {
+export const extractSimpleLayer = (layer: ComputedLayer | undefined): LayerSimple | void => {
   if (layer?.layer.type !== "simple") {
     return;
   }
-  return layer.layer.data;
+  return layer.layer;
+};
+
+export const extractSimpleLayerData = (layer: ComputedLayer | undefined): Data | void => {
+  return extractSimpleLayer(layer)?.data;
 };
 
 export const toColor = (c?: string) => {