fix: clusters and layers are not displayed correctly

reearth · Jan 25, 2022 · 4fc1243 · 4fc1243
1 parent 4365b83
commit 4fc1243
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 12 deletions.
diff --git a/src/components/molecules/Visualizer/Engine/ref.ts b/src/components/molecules/Visualizer/Engine/ref.ts
@@ -126,13 +126,13 @@ export type SceneProperty = {
 
 export type ClusterProperty = {
   id: string;
-  default: {
+  default?: {
     clusterPixelRange: number;
     clusterMinSize: number;
     clusterLabelTypography?: Typography;
     clusterImage?: string;
     clusterImageHeight?: number;
     clusterImageWidth?: number;
   };
-  layers: { layer?: string }[];
+  layers?: { layer?: string }[];
 };
diff --git a/src/components/molecules/Visualizer/Layers/index.tsx b/src/components/molecules/Visualizer/Layers/index.tsx
@@ -1,15 +1,16 @@
-import React, { ComponentType, useCallback } from "react";
+import React, { ComponentType, useMemo, useCallback } from "react";
 
 import { ClusterProperty, ClusterProps } from "../Engine";
-import P, { Layer } from "../Primitive";
+import P from "../Primitive";
 
-import { LayerStore } from "./store";
+import { LayerStore, Layer } from "./store";
 
 export type { Layer } from "../Primitive";
 
 export type Props = {
   pluginProperty?: { [key: string]: any };
   clusterProperty?: ClusterProperty[];
+  sceneProperty?: any;
   isEditable?: boolean;
   isBuilt?: boolean;
   pluginBaseUrl?: string;
@@ -24,6 +25,7 @@ export { LayerStore, empty as emptyLayerStore } from "./store";
 
 export default function Layers({
   pluginProperty,
+  sceneProperty,
   clusterProperty,
   isEditable,
   isBuilt,
@@ -35,13 +37,23 @@ export default function Layers({
   clusterComponent,
 }: Props): JSX.Element | null {
   const Cluster = clusterComponent;
+  const clusteredLayers = useMemo<Set<string>>(
+    () =>
+      new Set(
+        clusterProperty?.flatMap(c =>
+          (c.layers ?? []).map(l => l.layer).filter((l): l is string => !!l),
+        ),
+      ),
+    [clusterProperty],
+  );
 
   const renderLayer = useCallback(
     (layer: Layer<any, any>) => {
       return !layer.id || !layer.isVisible || !!layer.children ? null : (
         <P
           key={layer.id}
           layer={layer}
+          sceneProperty={sceneProperty}
           pluginProperty={
             layer.pluginId && layer.extensionId
               ? pluginProperty?.[`${layer.pluginId}/${layer.extensionId}`]
@@ -63,6 +75,7 @@ export default function Layers({
       overriddenProperties,
       pluginBaseUrl,
       pluginProperty,
+      sceneProperty,
       selectedLayerId,
     ],
   );
@@ -79,13 +92,7 @@ export default function Layers({
                 .map(renderLayer)}
             </Cluster>
           ))}
-      {layers?.flattenLayersRaw
-        ?.filter(
-          layer =>
-            !clusterProperty ||
-            clusterProperty.every(cluster => cluster?.layers?.every(l => l.layer !== layer.id)),
-        )
-        .map(renderLayer)}
+      {layers?.flattenLayersRaw?.filter(layer => !clusteredLayers.has(layer.id)).map(renderLayer)}
     </>
   );
 }
diff --git a/src/components/molecules/Visualizer/index.tsx b/src/components/molecules/Visualizer/index.tsx
@@ -166,6 +166,7 @@ export default function Visualizer({
             isBuilt={props.isBuilt}
             pluginProperty={pluginProperty}
             clusterProperty={clusterProperty}
+            sceneProperty={sceneProperty}
             pluginBaseUrl={pluginBaseUrl}
             selectedLayerId={selectedLayerId}
             layers={layers}