Merge branch 'main' into perf/style-evaluation

reearth · Mar 29, 2023 · d4b953f · d4b953f
2 parents 64182b1 + e8050c6
commit d4b953f
Show file tree

Hide file tree

Showing 16 changed files with 124 additions and 97 deletions.
diff --git a/src/components/molecules/Visualizer/Plugin/api.ts b/src/components/molecules/Visualizer/Plugin/api.ts
@@ -297,6 +297,7 @@ export function commonReearth({
   layersInViewport,
   layers,
   sceneProperty,
+  built,
   inEditor,
   tags,
   camera,
@@ -364,6 +365,7 @@ export function commonReearth({
   captureScreen: GlobalThis["reearth"]["scene"]["captureScreen"];
   getLocationFromScreen: GlobalThis["reearth"]["scene"]["getLocationFromScreen"];
   inEditor: () => GlobalThis["reearth"]["scene"]["inEditor"];
+  built: () => GlobalThis["reearth"]["scene"]["built"];
   enableScreenSpaceCameraController: GlobalThis["reearth"]["camera"]["enableScreenSpaceController"];
   lookHorizontal: GlobalThis["reearth"]["camera"]["lookHorizontal"];
   lookVertical: GlobalThis["reearth"]["camera"]["lookVertical"];
@@ -418,6 +420,9 @@ export function commonReearth({
       get inEditor() {
         return inEditor();
       },
+      get built() {
+        return built();
+      },
       get property() {
         return sceneProperty();
       },

diff --git a/src/components/molecules/Visualizer/Plugin/context.tsx b/src/components/molecules/Visualizer/Plugin/context.tsx
@@ -48,6 +48,7 @@ export type Props = {
   engineName: string;
   sceneProperty?: any;
   inEditor: boolean;
+  built: boolean;
   tags?: Tag[];
   camera?: CameraPosition;
   clock: Clock | undefined;
@@ -113,6 +114,7 @@ export function Provider({
   engineName,
   sceneProperty,
   inEditor,
+  built,
   tags,
   camera,
   clock,
@@ -164,6 +166,7 @@ export function Provider({
   const getLayers = useGet(layers);
   const getSceneProperty = useGet(sceneProperty);
   const getInEditor = useGet(inEditor);
+  const getBuilt = useGet(built);
   const getTags = useGet(tags ?? []);
   const getCamera = useGet(camera);
   const getClock = useGet(clock);
@@ -192,6 +195,7 @@ export function Provider({
         layers: getLayers,
         sceneProperty: getSceneProperty,
         inEditor: getInEditor,
+        built: getBuilt,
         tags: getTags,
         camera: getCamera,
         clock: getClock,

diff --git a/src/components/molecules/Visualizer/Plugin/types.ts b/src/components/molecules/Visualizer/Plugin/types.ts
@@ -120,8 +120,8 @@ export type LatLngHeight = {
 };
 
 export type Scene = {
-  /** Current scene property */
   readonly inEditor: boolean;
+  readonly built: boolean;
   readonly property?: any;
   readonly overrideProperty: (property: any) => void;
   readonly captureScreen: (type?: string, encoderOptions?: number) => string | undefined;

diff --git a/src/components/molecules/Visualizer/hooks.ts b/src/components/molecules/Visualizer/hooks.ts
@@ -230,6 +230,7 @@ export default ({
       engineName: engineType || "",
       sceneProperty: overriddenSceneProperty,
       inEditor: !!inEditor,
+      built: !!isBuilt,
       tags,
       camera: innerCamera,
       clock: innerClock,

diff --git a/src/components/molecules/Visualizer/storybook.tsx b/src/components/molecules/Visualizer/storybook.tsx
@@ -59,6 +59,7 @@ export const context: ProviderProps = {
   engineName: "cesium",
   engine: {},
   inEditor: false,
+  built: false,
   hideLayer: act("layers.hide"),
   showLayer: act("layers.show"),
   selectLayer: act("layers.select"),

diff --git a/src/components/pages/Preview/index.tsx b/src/components/pages/Preview/index.tsx
@@ -27,8 +27,7 @@ const PreviewPage: React.FC<Props> = () => {
     <ThemeProvider>
       <DndProvider>
         <AuthenticationRequiredPage>
-          {typeof core === "boolean" &&
-            (core ? <CoreCanvasArea isBuilt /> : <CanvasArea isBuilt />)}
+          {typeof core === "boolean" && (core ? <CoreCanvasArea /> : <CanvasArea />)}
         </AuthenticationRequiredPage>
       </DndProvider>
     </ThemeProvider>

diff --git a/src/core/Crust/Infobox/Block/DataList/index.tsx b/src/core/Crust/Infobox/Block/DataList/index.tsx
@@ -89,6 +89,7 @@ const Dt = styled.dt`
   padding-left: 0;
   box-sizing: border-box;
   font-weight: bold;
+  word-break: break-all;
 `;
 
 const Dd = styled.dd`

diff --git a/src/core/Crust/Plugins/PluginFrame/IFrame/hooks.ts b/src/core/Crust/Plugins/PluginFrame/IFrame/hooks.ts
@@ -195,7 +195,7 @@ export default function useHook({
   useEffect(() => {
     const w = typeof width === "number" ? width + "px" : width;
     const h = typeof height === "number" ? height + "px" : height;
-    setIFrameSize(w && h ? [w, h] : undefined);
+    setIFrameSize(w || h ? [w, h] : undefined);
   }, [width, height]);
 
   return {

diff --git a/src/core/Crust/Plugins/api.ts b/src/core/Crust/Plugins/api.ts
@@ -158,6 +158,13 @@ export function exposed({
               overrideSceneProperty?.(plugin ? `${plugin.id}/${plugin.extensionId}` : "", property);
             };
           },
+          get sampleTerrainHeight() {
+            return async (lng: number, lat: number) => {
+              const result = await commonReearth?.scene?.sampleTerrainHeight?.(lng, lat);
+              startEventLoop?.();
+              return result;
+            };
+          },
         }),
         plugin: {
           get id() {
@@ -292,6 +299,7 @@ export function commonReearth({
   layers,
   sceneProperty,
   inEditor,
+  built,
   tags,
   camera,
   clock,
@@ -358,6 +366,7 @@ export function commonReearth({
   getLocationFromScreen: GlobalThis["reearth"]["scene"]["getLocationFromScreen"];
   sampleTerrainHeight: GlobalThis["reearth"]["scene"]["sampleTerrainHeight"];
   inEditor: () => GlobalThis["reearth"]["scene"]["inEditor"];
+  built: () => GlobalThis["reearth"]["scene"]["built"];
   enableScreenSpaceCameraController: GlobalThis["reearth"]["camera"]["enableScreenSpaceController"];
   lookHorizontal: GlobalThis["reearth"]["camera"]["lookHorizontal"];
   lookVertical: GlobalThis["reearth"]["camera"]["lookVertical"];
@@ -412,6 +421,9 @@ export function commonReearth({
       get inEditor() {
         return !!inEditor?.();
       },
+      get built() {
+        return !!built?.();
+      },
       get property() {
         return sceneProperty?.();
       },

diff --git a/src/core/Crust/Plugins/hooks.ts b/src/core/Crust/Plugins/hooks.ts
@@ -29,6 +29,7 @@ export default function ({
   mapRef,
   sceneProperty,
   inEditor,
+  built,
   tags,
   viewport,
   selectedLayer,
@@ -55,6 +56,7 @@ export default function ({
   const getLayers = useGet(layersRef);
   const getSceneProperty = useGet(sceneProperty);
   const getInEditor = useGet(!!inEditor);
+  const getBuilt = useGet(!!built);
   const getTags = useGet(tags ?? []);
   const getCamera = useGet(camera);
   const getClock = useCallback(() => {
@@ -276,6 +278,7 @@ export default function ({
         layers: getLayers,
         sceneProperty: getSceneProperty,
         inEditor: getInEditor,
+        built: getBuilt,
         tags: getTags,
         camera: getCamera,
         clock: getClock,

diff --git a/src/core/Crust/Plugins/plugin_types.ts b/src/core/Crust/Plugins/plugin_types.ts
@@ -112,8 +112,8 @@ export type Reearth = {
 };
 
 export type Scene = {
-  /** Current scene property */
   readonly inEditor: boolean;
+  readonly built: boolean;
   readonly property?: any;
   readonly overrideProperty: (property: any) => void;
   readonly captureScreen: (type?: string, encoderOptions?: number) => string | undefined;

diff --git a/src/core/Crust/Plugins/storybook.tsx b/src/core/Crust/Plugins/storybook.tsx
@@ -89,6 +89,7 @@ export const context: Context = {
     },
     scene: {
       inEditor: false,
+      built: false,
       overrideProperty: act("overrideSceneProperty"),
       captureScreen: act("captureScreen"),
       getLocationFromScreen: act("getLocationFromScreen"),

diff --git a/src/core/Crust/Plugins/types.ts b/src/core/Crust/Plugins/types.ts
@@ -16,6 +16,7 @@ export type Props = PropsWithChildren<{
   mapRef?: RefObject<MapRef>;
   sceneProperty?: any;
   inEditor?: boolean;
+  built?: boolean;
   tags?: Tag[];
   selectedLayer?: ComputedLayer;
   selectedFeature?: ComputedFeature;

diff --git a/src/core/Crust/index.tsx b/src/core/Crust/index.tsx
@@ -175,6 +175,7 @@ export default function Crust({
       engineName={engineName}
       mapRef={mapRef}
       sceneProperty={sceneProperty}
+      built={isBuilt}
       inEditor={inEditor}
       tags={tags}
       selectedLayer={selectedComputedLayer}

diff --git a/src/core/engines/Cesium/Feature/Raster/hooks.ts b/src/core/engines/Cesium/Feature/Raster/hooks.ts
@@ -6,7 +6,6 @@ import {
   WebMapServiceImageryProvider,
 } from "cesium";
 import { MVTImageryProvider } from "cesium-mvt-imagery-provider";
-import { isEqual, pick } from "lodash-es";
 import { useEffect, useMemo, useRef } from "react";
 import { useCesium } from "resium";
 
@@ -134,84 +133,83 @@ export const useMVT = ({
 
   const updatedAt = useRef<number>();
 
-  const imageryProvider = useMemo(() => {
-    if (!isVisible || !show || !url || !layers || type !== "mvt") return;
-    let currentTime: number | undefined;
-    const cachedStyleMap = new Map();
-    return new MVTImageryProvider({
-      minimumLevel,
-      maximumLevel,
-      credit,
-      urlTemplate: url as `http${"s" | ""}://${string}/{z}/{x}/{y}${string}`,
-      layerName: layers,
-      onRenderFeature: () => {
-        if (!currentTime) {
-          currentTime = updatedAt.current;
-        }
-        return currentTime === updatedAt.current;
-      },
-      style: (mvtFeature, tile) => {
-        const styleCacheKey = JSON.stringify(mvtFeature.properties);
-        const cachedStyle = cachedStyleMap.get(styleCacheKey);
-        if (cachedStyle) {
-          return cachedStyle;
-        }
-        const computedFeature = ((): ComputedFeature | void => {
-          const layer = cachedCalculatedLayerRef.current?.layer;
-          if (layer?.type === "simple" && VectorTileFeature.types[mvtFeature.type] === "Polygon") {
-            const feature = makeFeatureFromPolygon("", mvtFeature, tile);
-
-            const featurePolygonAppearance = pick(feature?.properties, polygonAppearanceFields);
-            if (!isEqual(layerPolygonAppearance, featurePolygonAppearance)) {
-              Object.entries(layerPolygonAppearance ?? {}).forEach(([k, v]) => {
-                feature.properties[k] = v;
-              });
-
+  const imageryProvider = useMemo(
+    () => {
+      if (!isVisible || !show || !url || !layers || type !== "mvt") return;
+      let currentTime: number | undefined;
+      const cachedStyleMap = new Map();
+      return new MVTImageryProvider({
+        minimumLevel,
+        maximumLevel,
+        credit,
+        urlTemplate: url as `http${"s" | ""}://${string}/{z}/{x}/{y}${string}`,
+        layerName: layers,
+        onRenderFeature: () => {
+          if (!currentTime) {
+            currentTime = updatedAt.current;
+          }
+          return currentTime === updatedAt.current;
+        },
+        style: (mvtFeature, tile) => {
+          const styleCacheKey = JSON.stringify(mvtFeature.properties);
+          const cachedStyle = cachedStyleMap.get(styleCacheKey);
+          if (cachedStyle) {
+            return cachedStyle;
+          }
+          const computedFeature = ((): ComputedFeature | void => {
+            const layer = cachedCalculatedLayerRef.current?.layer;
+            if (
+              layer?.type === "simple" &&
+              VectorTileFeature.types[mvtFeature.type] === "Polygon"
+            ) {
+              const feature = makeFeatureFromPolygon("", mvtFeature, tile);
               return evalFeature?.(layer, feature);
             }
+          })();
+
+          const polygon = computedFeature?.polygon;
+          const style = {
+            fillStyle:
+              (polygon?.fill ?? true) && (polygon?.show ?? true)
+                ? polygon?.fillColor
+                : "rgba(0,0,0,0)", // hide the feature
+            strokeStyle:
+              polygon?.stroke && (polygon?.show ?? true) ? polygon?.strokeColor : "rgba(0,0,0,0)", // hide the feature
+            lineWidth: polygon?.strokeWidth,
+            lineJoin: polygon?.lineJoin,
+          };
+          cachedStyleMap.set(styleCacheKey, style);
+          return style;
+        },
+        onSelectFeature: (mvtFeature, tile) => {
+          const layer = extractSimpleLayer(cachedCalculatedLayerRef.current?.layer);
+          if (!layer) {
+            return;
           }
-        })();
-
-        const polygon = computedFeature?.polygon;
-        const style = {
-          fillStyle:
-            (polygon?.fill ?? true) && (polygon?.show ?? true)
-              ? polygon?.fillColor
-              : "rgba(0,0,0,0)", // hide the feature
-          strokeStyle:
-            polygon?.stroke && (polygon?.show ?? true) ? polygon?.strokeColor : "rgba(0,0,0,0)", // hide the feature
-          lineWidth: polygon?.strokeWidth,
-          lineJoin: polygon?.lineJoin,
-        };
-        cachedStyleMap.set(styleCacheKey, style);
-        return style;
-      },
-      onSelectFeature: (mvtFeature, tile) => {
-        const layer = extractSimpleLayer(cachedCalculatedLayerRef.current?.layer);
-        if (!layer) {
-          return;
-        }
-        const id = mvtFeature.id
-          ? String(mvtFeature.id)
-          : idFromGeometry(mvtFeature.loadGeometry(), tile);
-        const feature = evalFeature(layer, makeFeatureFromPolygon(id, mvtFeature, tile));
-        const info = new ImageryLayerFeatureInfo();
-        info.data = { layerId: layer?.id, featureId: id, feature };
-        return info;
-      },
-    });
-  }, [
-    isVisible,
-    show,
-    url,
-    layers,
-    type,
-    minimumLevel,
-    maximumLevel,
-    credit,
-    evalFeature,
-    layerPolygonAppearance,
-  ]);
+          const id = mvtFeature.id
+            ? String(mvtFeature.id)
+            : idFromGeometry(mvtFeature.loadGeometry(), tile);
+          const feature = evalFeature(layer, makeFeatureFromPolygon(id, mvtFeature, tile));
+          const info = new ImageryLayerFeatureInfo();
+          info.data = { layerId: layer?.id, featureId: id, feature };
+          return info;
+        },
+      });
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- Render MVT depends on appearance
+    [
+      isVisible,
+      show,
+      url,
+      layers,
+      type,
+      minimumLevel,
+      maximumLevel,
+      credit,
+      evalFeature,
+      layerPolygonAppearance,
+    ],
+  );
 
   useEffect(() => {
     updatedAt.current = Date.now();