feat: support time series features on reearth/core (#446)

* feat: support interval data * fix: add availability
reearth · Feb 9, 2023 · 8fc9b6f · 8fc9b6f
1 parent 3d35aad
commit 8fc9b6f
Show file tree

Hide file tree

Showing 16 changed files with 280 additions and 27 deletions.
diff --git a/src/core/engines/Cesium/Feature/Box/Edge.tsx b/src/core/engines/Cesium/Feature/Box/Edge.tsx
@@ -1,4 +1,10 @@
-import { ArcType, Cartesian3, Color, TranslationRotationScale } from "cesium";
+import {
+  ArcType,
+  Cartesian3,
+  Color,
+  TimeIntervalCollection,
+  TranslationRotationScale,
+} from "cesium";
 import { FC, memo } from "react";
 import { PolylineGraphics } from "resium";
 
@@ -30,6 +36,7 @@ type Props = {
   fillColor?: Color;
   hoverColor?: Color;
   width?: number;
+  availability?: TimeIntervalCollection;
   onMouseDown?: EdgeEventCallback;
   onMouseMove?: EdgeEventCallback;
   onMouseUp?: EdgeEventCallback;
@@ -47,6 +54,7 @@ export const Edge: FC<Props> = memo(function EdgePresenter({
   trs,
   width,
   hoverColor,
+  availability,
   onMouseDown,
   onMouseMove,
   onMouseUp,
@@ -65,7 +73,7 @@ export const Edge: FC<Props> = memo(function EdgePresenter({
   });
 
   return (
-    <EntityExt layerId={layerId} featureId={featureId}>
+    <EntityExt layerId={layerId} featureId={featureId} availability={availability}>
       <PolylineGraphics
         positions={cbp}
         width={width}

diff --git a/src/core/engines/Cesium/Feature/Box/ScalePoints.tsx b/src/core/engines/Cesium/Feature/Box/ScalePoints.tsx
@@ -1,4 +1,10 @@
-import { ArcType, Cartesian3, Color, TranslationRotationScale } from "cesium";
+import {
+  ArcType,
+  Cartesian3,
+  Color,
+  TimeIntervalCollection,
+  TranslationRotationScale,
+} from "cesium";
 import { FC, memo } from "react";
 import { BoxGraphics, PolylineGraphics } from "resium";
 
@@ -43,6 +49,7 @@ type Props = {
   dimensions?: { width: number; height: number; length: number };
   visiblePoint?: boolean;
   visibleAxisLine?: boolean;
+  availability?: TimeIntervalCollection;
   onPointMouseDown?: PointEventCallback;
   onPointMouseMove?: PointEventCallback;
   onPointMouseUp?: PointEventCallback;
@@ -64,6 +71,7 @@ export const ScalePoints: FC<Props> = memo(function ScalePointsPresenter({
   dimensions,
   visiblePoint,
   visibleAxisLine,
+  availability,
   onPointMouseDown,
   onPointMouseMove,
   onPointMouseUp,
@@ -95,7 +103,8 @@ export const ScalePoints: FC<Props> = memo(function ScalePointsPresenter({
         layerId={`${layerId}-${index}`}
         featureId={`${featureId}-${index}`}
         position={entitiesPosition.point}
-        orientation={orientation}>
+        orientation={orientation}
+        availability={availability}>
         <BoxGraphics
           show={visiblePoint}
           dimensions={cesiumDimensionsCallbackProperty}
@@ -110,7 +119,8 @@ export const ScalePoints: FC<Props> = memo(function ScalePointsPresenter({
         layerId={`${layerId}-opposite-${index}`}
         featureId={`${featureId}-opposite-${index}`}
         position={entitiesPosition.oppositePoint}
-        orientation={orientation}>
+        orientation={orientation}
+        availability={availability}>
         <BoxGraphics
           show={visiblePoint}
           dimensions={cesiumDimensionsCallbackProperty}
@@ -123,7 +133,8 @@ export const ScalePoints: FC<Props> = memo(function ScalePointsPresenter({
       </EntityExt>
       <EntityExt
         layerId={`${layerId}-axis-line-${index}`}
-        featureId={`${featureId}-axis-line-${index}`}>
+        featureId={`${featureId}-axis-line-${index}`}
+        availability={availability}>
         <PolylineGraphics
           positions={entitiesPosition.axisLine}
           show={visibleAxisLine}

diff --git a/src/core/engines/Cesium/Feature/Box/Side.tsx b/src/core/engines/Cesium/Feature/Box/Side.tsx
@@ -1,4 +1,9 @@
-import { Color, Plane as CesiumPlane, TranslationRotationScale } from "cesium";
+import {
+  Color,
+  Plane as CesiumPlane,
+  TimeIntervalCollection,
+  TranslationRotationScale,
+} from "cesium";
 import { FC, memo } from "react";
 import { PlaneGraphics } from "resium";
 
@@ -16,6 +21,7 @@ export const Side: FC<{
   outlineColor?: Color;
   activeOutlineColor?: Color;
   fill?: boolean;
+  availability?: TimeIntervalCollection;
 }> = memo(function SidePresenter({
   layerId,
   featureId,
@@ -26,6 +32,7 @@ export const Side: FC<{
   outlineColor,
   activeOutlineColor,
   trs,
+  availability,
 }) {
   const { cbRef, plane, dimension, orientation, outlineColorCb } = useHooks({
     planeLocal,
@@ -36,7 +43,12 @@ export const Side: FC<{
   });
 
   return (
-    <EntityExt layerId={layerId} featureId={featureId} position={cbRef} orientation={orientation}>
+    <EntityExt
+      layerId={layerId}
+      featureId={featureId}
+      position={cbRef}
+      orientation={orientation}
+      availability={availability}>
       <PlaneGraphics
         plane={plane}
         dimensions={dimension}

diff --git a/src/core/engines/Cesium/Feature/Box/hooks/box.ts b/src/core/engines/Cesium/Feature/Box/hooks/box.ts
@@ -13,7 +13,7 @@ import { useCesium } from "resium";
 import type { Property } from "..";
 import { sampleTerrainHeightFromCartesian } from "../../../common";
 import { useContext } from "../../context";
-import { type FeatureProps, toColor } from "../../utils";
+import { type FeatureProps, toColor, toTimeInterval } from "../../utils";
 import type { EdgeEventCallback } from "../Edge";
 import type { PointEventCallback } from "../ScalePoints";
 import { computeMouseMoveAmount, updateTrs } from "../utils";
@@ -22,7 +22,8 @@ export const useHooks = ({
   property,
   geometry,
   sceneProperty,
-}: Pick<FeatureProps<Property>, "property" | "sceneProperty" | "geometry">) => {
+  feature,
+}: Pick<FeatureProps<Property>, "property" | "sceneProperty" | "geometry" | "feature">) => {
   const { viewer } = useCesium();
   const ctx = useContext();
   const {
@@ -291,10 +292,13 @@ export const useHooks = ({
     document.body.style.cursor = cursor || "default";
   }, [cursor]);
 
+  const availability = useMemo(() => toTimeInterval(feature?.interval), [feature?.interval]);
+
   return {
     style,
     trs,
     scalePointStyle,
+    availability,
     handlePointMouseDown,
     handlePointMouseMove,
     handlePointMouseUp,

diff --git a/src/core/engines/Cesium/Feature/Box/index.tsx b/src/core/engines/Cesium/Feature/Box/index.tsx
@@ -40,13 +40,14 @@ const Box: React.FC<Props> = memo(function BoxPresenter({
     style,
     trs,
     scalePointStyle,
+    availability,
     handlePointMouseDown,
     handlePointMouseMove,
     handlePointMouseUp,
     handleEdgeMouseDown,
     handleEdgeMouseMove,
     handleEdgeMouseUp,
-  } = useHooks({ property, geometry, sceneProperty });
+  } = useHooks({ property, geometry, sceneProperty, feature });
 
   const scalePointDimension = ((width + height + length) / 3) * 0.05;
 
@@ -66,6 +67,7 @@ const Box: React.FC<Props> = memo(function BoxPresenter({
           isActive={!!activeBox}
           activeOutlineColor={style.activeOutlineColor}
           trs={trs}
+          availability={availability}
         />
       ))}
       {BOX_EDGES.map((edge, i) => {
@@ -86,6 +88,7 @@ const Box: React.FC<Props> = memo(function BoxPresenter({
             onMouseDown={edge.isDraggable ? handleEdgeMouseDown : undefined}
             onMouseMove={edge.isDraggable ? handleEdgeMouseMove : undefined}
             onMouseUp={edge.isDraggable ? handleEdgeMouseUp : undefined}
+            availability={availability}
           />
         );
       })}
@@ -115,6 +118,7 @@ const Box: React.FC<Props> = memo(function BoxPresenter({
             onPointMouseDown={handlePointMouseDown}
             onPointMouseMove={handlePointMouseMove}
             onPointMouseUp={handlePointMouseUp}
+            availability={availability}
           />
         ))}
     </>

diff --git a/src/core/engines/Cesium/Feature/Ellipsoid/index.tsx b/src/core/engines/Cesium/Feature/Ellipsoid/index.tsx
@@ -7,7 +7,12 @@ import { LatLng, toColor } from "@reearth/util/value";
 
 import type { EllipsoidAppearance } from "../../..";
 import { heightReference, shadowMode } from "../../common";
-import { EntityExt, type FeatureComponentConfig, type FeatureProps } from "../utils";
+import {
+  EntityExt,
+  toTimeInterval,
+  type FeatureComponentConfig,
+  type FeatureProps,
+} from "../utils";
 
 export type Props = FeatureProps<Property>;
 
@@ -46,6 +51,7 @@ export default function Ellipsoid({ id, isVisible, property, geometry, layer, fe
   }, [radius]);
 
   const material = useMemo(() => toColor(fillColor), [fillColor]);
+  const availability = useMemo(() => toTimeInterval(feature?.interval), [feature?.interval]);
 
   return !isVisible || !pos ? null : (
     <EntityExt
@@ -54,7 +60,8 @@ export default function Ellipsoid({ id, isVisible, property, geometry, layer, fe
       layerId={layer?.id}
       featureId={feature?.id}
       draggable
-      legacyLocationPropertyKey="default.position">
+      legacyLocationPropertyKey="default.position"
+      availability={availability}>
       <EllipsoidGraphics
         radii={raddi}
         material={material}

diff --git a/src/core/engines/Cesium/Feature/Marker/index.tsx b/src/core/engines/Cesium/Feature/Marker/index.tsx
@@ -6,7 +6,12 @@ import { toCSSFont } from "@reearth/util/value";
 
 import type { MarkerAppearance } from "../../..";
 import { useIcon, ho, vo, heightReference, toColor } from "../../common";
-import { EntityExt, type FeatureComponentConfig, type FeatureProps } from "../utils";
+import {
+  EntityExt,
+  toTimeInterval,
+  type FeatureComponentConfig,
+  type FeatureProps,
+} from "../utils";
 
 import marker from "./marker.svg";
 
@@ -118,18 +123,30 @@ export default function Marker({ property, id, isVisible, geometry, layer, featu
     [labelBackgroundPaddingHorizontal, labelBackgroundPaddingVertical],
   );
 
+  const availability = useMemo(() => toTimeInterval(feature?.interval), [feature?.interval]);
+
   return !pos || !isVisible ? null : (
     <>
       {extrudePoints && (
-        <EntityExt layerId={layer?.id} featureId={feature?.id} unselectable>
+        <EntityExt
+          layerId={layer?.id}
+          featureId={feature?.id}
+          unselectable
+          availability={availability}>
           <PolylineGraphics
             positions={extrudePoints}
             material={extrudePointsLineColor}
             width={0.5}
           />
         </EntityExt>
       )}
-      <EntityExt id={id} position={pos} layerId={layer?.id} featureId={feature?.id} draggable>
+      <EntityExt
+        id={id}
+        position={pos}
+        layerId={layer?.id}
+        featureId={feature?.id}
+        draggable
+        availability={availability}>
         {style === "point" ? (
           <PointGraphics
             pixelSize={pointSize}

diff --git a/src/core/engines/Cesium/Feature/Model/index.tsx b/src/core/engines/Cesium/Feature/Model/index.tsx
@@ -6,7 +6,12 @@ import { toColor } from "@reearth/util/value";
 
 import type { ModelAppearance } from "../../..";
 import { colorBlendMode, heightReference, shadowMode } from "../../common";
-import { EntityExt, type FeatureComponentConfig, type FeatureProps } from "../utils";
+import {
+  EntityExt,
+  toTimeInterval,
+  type FeatureComponentConfig,
+  type FeatureProps,
+} from "../utils";
 
 export type Props = FeatureProps<Property>;
 
@@ -75,6 +80,7 @@ export default function Model({ id, isVisible, property, geometry, layer, featur
   const modelColor = useMemo(() => (colorBlend ? toColor(color) : undefined), [colorBlend, color]);
   const modelLightColor = useMemo(() => toColor(lightColor), [lightColor]);
   const modelSilhouetteColor = useMemo(() => toColor(silhouetteColor), [silhouetteColor]);
+  const availability = useMemo(() => toTimeInterval(feature?.interval), [feature?.interval]);
 
   return !isVisible || (!model && !url) || !position ? null : (
     <EntityExt
@@ -83,7 +89,8 @@ export default function Model({ id, isVisible, property, geometry, layer, featur
       orientation={orientation as any}
       layerId={layer?.id}
       featureId={feature?.id}
-      draggable>
+      draggable
+      availability={availability}>
       <ModelGraphics
         uri={model || url}
         scale={scale}

diff --git a/src/core/engines/Cesium/Feature/PhotoOverlay/index.tsx b/src/core/engines/Cesium/Feature/PhotoOverlay/index.tsx
@@ -9,7 +9,12 @@ import { styled, useTheme } from "@reearth/theme";
 
 import type { LegacyPhotooverlayAppearance } from "../../..";
 import { heightReference, ho, useIcon, vo } from "../../common";
-import { EntityExt, type FeatureComponentConfig, type FeatureProps } from "../utils";
+import {
+  EntityExt,
+  toTimeInterval,
+  type FeatureComponentConfig,
+  type FeatureProps,
+} from "../utils";
 
 import useHooks, { photoDuration, photoExitDuration, TransitionStatus } from "./hooks";
 
@@ -79,9 +84,17 @@ export default function PhotoOverlay({
     isSelected: isSelected && !!photoOverlayImage,
   });
 
+  const availability = useMemo(() => toTimeInterval(feature?.interval), [feature?.interval]);
+
   return !isVisible || !pos ? null : (
     <>
-      <EntityExt id={id} position={pos} layerId={layer?.id} featureId={feature?.id} draggable>
+      <EntityExt
+        id={id}
+        position={pos}
+        layerId={layer?.id}
+        featureId={feature?.id}
+        draggable
+        availability={availability}>
         <BillboardGraphics
           image={canvas}
           horizontalOrigin={ho(imageHorizontalOrigin)}

diff --git a/src/core/engines/Cesium/Feature/Polygon/index.tsx b/src/core/engines/Cesium/Feature/Polygon/index.tsx
@@ -9,7 +9,12 @@ import { Polygon as PolygonValue, toColor } from "@reearth/util/value";
 
 import type { PolygonAppearance } from "../../..";
 import { heightReference, shadowMode } from "../../common";
-import { EntityExt, type FeatureComponentConfig, type FeatureProps } from "../utils";
+import {
+  EntityExt,
+  toTimeInterval,
+  type FeatureComponentConfig,
+  type FeatureProps,
+} from "../utils";
 
 export type Props = FeatureProps<Property>;
 
@@ -57,9 +62,10 @@ export default function Polygon({ id, isVisible, property, geometry, layer, feat
     [stroke, strokeColor],
   );
   const memoFillColor = useMemo(() => (fill ? toColor(fillColor) : undefined), [fill, fillColor]);
+  const availability = useMemo(() => toTimeInterval(feature?.interval), [feature?.interval]);
 
   return !isVisible ? null : (
-    <EntityExt id={id} layerId={layer?.id} featureId={feature?.id}>
+    <EntityExt id={id} layerId={layer?.id} featureId={feature?.id} availability={availability}>
       <PolygonGraphics
         hierarchy={hierarchy}
         fill={fill}