feat: add defaultContent property for infobox in plugin API on reeart…

…h/core (#538)
reearth · Mar 14, 2023 · 31ba319 · 31ba319
1 parent c4722fe
commit 31ba319
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 34 deletions.
diff --git a/src/core/Crust/Infobox/types.ts b/src/core/Crust/Infobox/types.ts
@@ -20,6 +20,7 @@ export type InfoboxProperty = {
   outlineColor?: string;
   outlineWidth?: number;
   useMask?: boolean;
+  defaultContent?: "description" | "attributes";
 };
 
 export type Block<P = any> = {

diff --git a/src/core/engines/Cesium/Feature/Resource/utils.ts b/src/core/engines/Cesium/Feature/Resource/utils.ts
@@ -1,4 +1,11 @@
-import { JulianDate, Entity, Cartesian3, PolygonHierarchy } from "cesium";
+import {
+  JulianDate,
+  Entity,
+  Cartesian3,
+  PolygonHierarchy,
+  PointGraphics,
+  BillboardGraphics,
+} from "cesium";
 
 import { AppearanceTypes, ComputedFeature, ComputedLayer, Feature } from "@reearth/core/mantle";
 import { EvalFeature } from "@reearth/core/Map";
@@ -53,7 +60,7 @@ export function attachProperties<
   const [appearanceName, propertyName] = namePair;
   const property = entity[propertyName] ?? {};
   if (!entity[propertyName]) {
-    entity[propertyName] = {} as any;
+    return;
   }
 
   const tag = getTag(entity);
@@ -141,6 +148,12 @@ export const attachStyle = (
     }
     const simpleLayer = extractSimpleLayer(layer);
     if (point) {
+      const isPointStyle = simpleLayer?.marker?.style === "point";
+      if (isPointStyle && !entity.point) {
+        entity.point = new PointGraphics();
+        entity.billboard = undefined;
+      }
+
       attachProperties(entity, computedFeature, ["marker", "point"], {
         show: {
           name: "show",
@@ -173,6 +186,12 @@ export const attachStyle = (
     }
 
     if (billboard) {
+      const isImageStyle = simpleLayer?.marker?.style === "image";
+      if (isImageStyle && !entity.billboard) {
+        entity.billboard = new BillboardGraphics();
+        entity.point = undefined;
+      }
+
       attachProperties(entity, computedFeature, ["marker", "billboard"], {
         show: {
           name: "show",

diff --git a/src/core/engines/Cesium/hooks.ts b/src/core/engines/Cesium/hooks.ts
@@ -33,7 +33,7 @@ import { useCameraLimiter } from "./cameraLimiter";
 import { getCamera, isDraggable, isSelectable, getLocationFromScreen } from "./common";
 import { getTag, type Context as FeatureContext } from "./Feature";
 import useEngineRef from "./useEngineRef";
-import { convertCartesian3ToPosition, findEntity } from "./utils";
+import { convertCartesian3ToPosition, findEntity, getEntityContent } from "./utils";
 
 export default ({
   ref,
@@ -247,12 +247,14 @@ export default ({
           ? {
               defaultInfobox: {
                 title: entity.name,
-                content: {
-                  type: "html",
-                  value: entity.description?.getValue(
-                    cesium.current?.cesiumElement?.clock.currentTime ?? new JulianDate(),
-                  ),
-                },
+                content: getEntityContent(
+                  entity,
+                  cesium.current?.cesiumElement?.clock.currentTime ?? new JulianDate(),
+                  tag?.layerId
+                    ? layersRef?.current?.findById(tag.layerId)?.infobox?.property?.default
+                        ?.defaultContent
+                    : undefined,
+                ),
               },
             }
           : undefined,
@@ -333,23 +335,14 @@ export default ({
             ? {
                 defaultInfobox: {
                   title: target.id.name,
-                  content: target.id.description
-                    ? {
-                        type: "html",
-                        value: target.id.description?.getValue(
-                          viewer.clock.currentTime ?? new JulianDate(),
-                        ),
-                      }
-                    : {
-                        type: "table",
-                        value: target.id.properties
-                          ? entityProperties(
-                              target.id.properties.getValue(
-                                viewer.clock.currentTime ?? new JulianDate(),
-                              ),
-                            )
-                          : [],
-                      },
+                  content: getEntityContent(
+                    target.id,
+                    viewer.clock.currentTime ?? new JulianDate(),
+                    tag?.layerId
+                      ? layersRef?.current?.findById(tag.layerId)?.infobox?.property?.default
+                          ?.defaultContent
+                      : undefined,
+                  ),
                 },
               }
             : undefined,
@@ -393,7 +386,7 @@ export default ({
 
       onLayerSelect?.();
     },
-    [onLayerSelect, mouseEventHandles],
+    [onLayerSelect, mouseEventHandles, layersRef, selectedLayerId?.layerId],
   );
 
   // E2E test
@@ -514,13 +507,6 @@ function tileProperties(t: Cesium3DTileFeature): { key: string; value: any }[] {
     );
 }
 
-function entityProperties(properties: Record<string, any>): { key: string; value: any }[] {
-  return Object.entries(properties).reduce<{ key: string; value: [string, string] }[]>(
-    (a, [key, value]) => [...a, { key, value }],
-    [],
-  );
-}
-
 function getLayerId(target: RootEventTarget): string | undefined {
   if (target && "id" in target && target.id instanceof Entity) {
     return getTag(target.id)?.layerId;

diff --git a/src/core/engines/Cesium/utils.ts b/src/core/engines/Cesium/utils.ts
@@ -9,8 +9,12 @@ import {
   Cesium3DTileset,
   Cesium3DTileContent,
   Cesium3DTileFeature,
+  JulianDate,
 } from "cesium";
 
+import { InfoboxProperty } from "@reearth/core/Crust/Infobox";
+import { DefaultInfobox } from "@reearth/core/Map";
+
 import { getTag } from "./Feature";
 
 export const convertCartesian3ToPosition = (
@@ -137,3 +141,32 @@ export function findEntity(
 
   return;
 }
+
+export const getEntityContent = (
+  entity: Entity,
+  time: JulianDate,
+  defaultContent: InfoboxProperty["defaultContent"],
+): DefaultInfobox["content"] => {
+  const content: Record<
+    Exclude<InfoboxProperty["defaultContent"], undefined>,
+    DefaultInfobox["content"]
+  > = {
+    description: {
+      type: "html",
+      value: entity.description?.getValue(time),
+    },
+    attributes: {
+      type: "table",
+      value: entity.properties ? entityProperties(entity.properties.getValue(time)) : [],
+    },
+  };
+
+  return defaultContent ? content[defaultContent] : content.description ?? content.attributes;
+};
+
+function entityProperties(properties: Record<string, any>): { key: string; value: any }[] {
+  return Object.entries(properties).reduce<{ key: string; value: [string, string] }[]>(
+    (a, [key, value]) => [...a, { key, value }],
+    [],
+  );
+}
diff --git a/src/core/mantle/compat/types.ts b/src/core/mantle/compat/types.ts
@@ -41,6 +41,7 @@ export type InfoboxProperty = {
     outlineColor?: string;
     outlineWidth?: number;
     useMask?: boolean;
+    defaultContent?: "description" | "attributes";
   };
 };