Merge branch 'main' into chore/add-timeline-manager

reearth · Oct 11, 2023 · cf3772d · cf3772d
2 parents f8e0ece + 8fea370
commit cf3772d
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 54 deletions.
diff --git a/.github/reviewer-lottery.yml b/.github/reviewer-lottery.yml
@@ -13,7 +13,7 @@ groups:
   - name: reviewers
     reviewers: 1
     usernames:
-      - pyshx
       - iby
       - nina992
-
+      - jashanbhullar
+      - mkumbobeaty
diff --git a/web/src/beta/lib/core/engines/Cesium/Feature/Tileset/hooks.ts b/web/src/beta/lib/core/engines/Cesium/Feature/Tileset/hooks.ts
@@ -21,8 +21,9 @@ import {
   ImageBasedLighting,
   Cesium3DTileContent,
   Color,
+  Viewer,
 } from "cesium";
-import { isEqual, pick } from "lodash-es";
+import { pick } from "lodash-es";
 import { MutableRefObject, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { CesiumComponentRef, useCesium } from "resium";
 
@@ -39,7 +40,11 @@ import type {
 import { layerIdField, sampleTerrainHeightFromCartesian } from "../../common";
 import { arrayToCartecian3 } from "../../helpers/sphericalHaromic";
 import type { InternalCesium3DTileFeature } from "../../types";
-import { lookupFeatures, translationWithClamping } from "../../utils";
+import {
+  convertCesium3DTileFeatureProperties,
+  lookupFeatures,
+  translationWithClamping,
+} from "../../utils";
 import { useContext } from "../context";
 import {
   usePick,
@@ -62,6 +67,7 @@ const useData = (layer: ComputedLayer | undefined) => {
     return {
       type: data?.type,
       url: data?.url,
+      idProperty: data?.idProperty,
       layers: data?.layers
         ? Array.isArray(data.layers)
           ? data.layers.join(",")
@@ -74,24 +80,27 @@ const useData = (layer: ComputedLayer | undefined) => {
 const makeFeatureFrom3DTile = (
   tileFeature: InternalCesium3DTileFeature,
   content: Cesium3DTileContent,
-): Feature => {
+  idProperty?: string,
+): Omit<Feature, "properties"> => {
   const coordinates = content.tile.boundingSphere.center;
-  const featureId = getBuiltinFeatureId(tileFeature);
-  const id = generateIDWithMD5(`${coordinates.x}-${coordinates.y}-${coordinates.z}-${featureId}`);
-  const properties =
-    tileFeature instanceof Model
-      ? {}
-      : Object.fromEntries(
-          tileFeature.getPropertyIds().map(id => [id, tileFeature.getProperty(id)]),
-        );
+  const id = (() => {
+    const specifiedId =
+      idProperty && !(tileFeature instanceof Model)
+        ? tileFeature.getProperty(idProperty)
+        : undefined;
+    if (specifiedId) {
+      return specifiedId;
+    }
+    const featureId = getBuiltinFeatureId(tileFeature);
+    return generateIDWithMD5(`${coordinates.x}-${coordinates.y}-${coordinates.z}-${featureId}`);
+  })();
   return {
     type: "feature",
     id,
     geometry: {
       type: "Point",
       coordinates: [coordinates.x, coordinates.y, coordinates.z],
     },
-    properties,
     range: {
       x: coordinates.x,
       y: coordinates.y,
@@ -105,7 +114,8 @@ const getBuiltinFeatureId = (f: InternalCesium3DTileFeature) => {
 };
 
 type CachedFeature = {
-  feature: Feature;
+  // NOTE: `properties` wastes memory, so don't pass it.
+  feature: Omit<Feature, "properties">;
   raw: InternalCesium3DTileFeature;
 };
 
@@ -150,15 +160,17 @@ const convertStyle = (val: any, convert: StyleProperty["convert"]) => {
 const useFeature = ({
   id,
   tileset,
-
+  idProperty,
   layer,
+  viewer,
   evalFeature,
   onComputedFeatureFetch,
 }: {
   id?: string;
   tileset: MutableRefObject<Cesium3DTileset | undefined>;
-
+  idProperty?: string;
   layer?: ComputedLayer;
+  viewer?: Viewer;
   evalFeature: EvalFeature;
   onComputedFeatureFetch?: (f: Feature[], cf: ComputedFeature[]) => void;
 }) => {
@@ -173,8 +185,12 @@ const useFeature = ({
       if (layer?.type === "simple" && feature?.feature) {
         const raw = feature.raw;
         const tag = getTag(raw);
+        const properties =
+          viewer && !(raw instanceof Model)
+            ? convertCesium3DTileFeatureProperties(viewer, raw)
+            : {};
 
-        const computedFeature = evalFeature(layer, feature?.feature);
+        const computedFeature = evalFeature(layer, { ...feature?.feature, properties });
 
         const style = computedFeature?.["3dtiles"];
 
@@ -227,7 +243,7 @@ const useFeature = ({
       }
       return;
     },
-    [evalFeature, layerId],
+    [evalFeature, layerId, viewer],
   );
 
   useEffect(
@@ -237,24 +253,32 @@ const useFeature = ({
         const features = new Set<Feature>();
         await lookupFeatures(t.content, async (tileFeature, content) => {
           const feature = (() => {
-            const normalFeature = makeFeatureFrom3DTile(tileFeature, content);
+            const normalFeature = makeFeatureFrom3DTile(tileFeature, content, idProperty);
             const feature: CachedFeature = {
               feature: normalFeature,
               raw: tileFeature,
             };
-            cachedFeaturesRef.current.push(feature);
-            cachedFeatureIds.current.add(normalFeature.id);
             return feature;
           })();
 
           await attachComputedFeature(feature);
+          cachedFeaturesRef.current.push(feature);
+
+          cachedFeatureIds.current.add(feature.feature.id);
 
           // NOTE: Don't pass a large object like `properties`.
           features.add(pick(feature.feature, ["id", "type", "range"]));
         });
         onComputedFeatureFetch?.(Array.from(features.values()), []);
       }),
-    [tileset, cachedFeaturesRef, attachComputedFeature, layerId, onComputedFeatureFetch],
+    [
+      tileset,
+      cachedFeaturesRef,
+      attachComputedFeature,
+      layerId,
+      onComputedFeatureFetch,
+      idProperty,
+    ],
   );
 
   useEffect(() => {
@@ -270,7 +294,7 @@ const useFeature = ({
   const skippedComputingAt = useRef<number | null>();
   useEffect(() => {
     skippedComputingAt.current = Date.now();
-  }, [pickedAppearance]);
+  }, [pickedAppearance, layer?.layer._updateStyle]);
 
   const prevUpdateStyle = useRef(layer?.layer._updateStyle);
   const computeFeatureAsync = useCallback(
@@ -282,15 +306,7 @@ const useFeature = ({
             return;
           }
 
-          const pickedProperties = pick(f.feature.properties, TILESET_APPEARANCE_FIELDS);
-          if (
-            pickedAppearance &&
-            (!isEqual(pickedProperties, pickedAppearance) ||
-              prevUpdateStyle.current !== layer?.layer._updateStyle)
-          ) {
-            Object.entries(pickedAppearance).forEach(([k, v]) => {
-              f.feature.properties[k] = v;
-            });
+          if (pickedAppearance || layer?.layer._updateStyle) {
             attachComputedFeature(f);
           }
           resolve(undefined);
@@ -380,7 +396,7 @@ export const useHooks = ({
     allowEnterGround,
   } = useClippingBox({ clipping: experimental_clipping, boxId });
   const [style, setStyle] = useState<Cesium3DTileStyle>();
-  const { url, type } = useData(layer);
+  const { url, type, idProperty } = useData(layer);
 
   const prevPlanes = useRef(_planes);
   const planes = useMemo(() => {
@@ -434,6 +450,8 @@ export const useHooks = ({
     id,
     tileset: tilesetRef,
     layer,
+    idProperty,
+    viewer,
     evalFeature,
     onComputedFeatureFetch,
   });

diff --git a/web/src/beta/lib/core/engines/Cesium/useEngineRef.ts b/web/src/beta/lib/core/engines/Cesium/useEngineRef.ts
@@ -33,7 +33,13 @@ import {
 } from "./common";
 import { attachTag, getTag } from "./Feature";
 import { PickedFeature, pickManyFromViewportAsFeature } from "./pickMany";
-import { convertObjToComputedFeature, findEntity, findFeaturesFromLayer } from "./utils";
+import {
+  convertCesium3DTileFeatureProperties,
+  convertEntityProperties,
+  convertObjToComputedFeature,
+  findEntity,
+  findFeaturesFromLayer,
+} from "./utils";
 
 export default function useEngineRef(
   ref: Ref<EngineRef>,
@@ -489,16 +495,17 @@ export default function useEngineRef(
           return {
             type: "feature",
             id: tag.featureId,
-            properties: entity.properties,
+            properties: convertEntityProperties(viewer, entity),
           };
         }
-        if (entity instanceof Cesium.Cesium3DTileFeature) {
+        if (
+          entity instanceof Cesium.Cesium3DTileFeature ||
+          entity instanceof Cesium.Cesium3DTilePointFeature
+        ) {
           return {
             type: "feature",
             id: tag.featureId,
-            properties: Object.fromEntries(
-              entity.getPropertyIds().map(key => [key, entity.getProperty(key)]),
-            ),
+            properties: convertCesium3DTileFeatureProperties(viewer, entity),
           };
         }
         return;
@@ -533,25 +540,19 @@ export default function useEngineRef(
             tag.computedFeature ?? {
               type: "computedFeature",
               id: tag.featureId,
-              properties:
-                entity.properties &&
-                Object.fromEntries(
-                  entity.properties.propertyNames.map(key => [
-                    key,
-                    entity.properties?.getValue(viewer.clock.currentTime)?.[key],
-                  ]),
-                ),
+              properties: convertEntityProperties(viewer, entity),
             }
           );
         }
-        if (entity instanceof Cesium.Cesium3DTileFeature) {
+        if (
+          entity instanceof Cesium.Cesium3DTileFeature ||
+          entity instanceof Cesium.Cesium3DTilePointFeature
+        ) {
           return (
             tag.computedFeature ?? {
               type: "computedFeature",
               id: tag.featureId,
-              properties: Object.fromEntries(
-                entity.getPropertyIds().map(key => [key, entity.getProperty(key)]),
-              ),
+              properties: convertCesium3DTileFeatureProperties(viewer, entity),
             }
           );
         }

diff --git a/web/src/beta/lib/core/engines/Cesium/utils.ts b/web/src/beta/lib/core/engines/Cesium/utils.ts
@@ -321,6 +321,25 @@ export function getPixelRatio(scene: Scene): number {
   ).pixelRatio;
 }
 
+export const convertEntityProperties = (viewer: Viewer, entity: Entity) => {
+  return (
+    entity.properties &&
+    Object.fromEntries(
+      entity.properties.propertyNames.map(key => [
+        key,
+        entity.properties?.getValue(viewer.clock.currentTime)?.[key],
+      ]),
+    )
+  );
+};
+
+export const convertCesium3DTileFeatureProperties = (
+  viewer: Viewer,
+  feature: Cesium3DTileFeature | Cesium3DTilePointFeature,
+) => {
+  return Object.fromEntries(feature.getPropertyIds().map(id => [id, feature.getProperty(id)]));
+};
+
 export const convertObjToComputedFeature = (
   viewer: Viewer,
   obj: object,
@@ -332,7 +351,7 @@ export const convertObjToComputedFeature = (
       tag?.computedFeature ?? {
         type: "computedFeature",
         id: tag?.featureId ?? "",
-        properties: Object.fromEntries(obj.getPropertyIds().map(id => [id, obj.getProperty(id)])),
+        properties: convertCesium3DTileFeatureProperties(viewer, obj),
       },
     ];
   }
@@ -356,7 +375,7 @@ export const convertObjToComputedFeature = (
       tag?.computedFeature ?? {
         type: "computedFeature",
         id: tag?.featureId ?? "",
-        properties: obj.properties?.getValue(viewer.clock.currentTime),
+        properties: convertEntityProperties(viewer, obj),
       },
     ];
   }

diff --git a/web/src/beta/lib/core/mantle/types/index.ts b/web/src/beta/lib/core/mantle/types/index.ts
@@ -72,6 +72,7 @@ export type Data = {
   jsonProperties?: string[];
   updateInterval?: number; // milliseconds
   parameters?: Record<string, any>;
+  idProperty?: string;
   time?: {
     property?: string;
     interval?: number; // milliseconds