@reearth/core 0.0.7-alpha.0 → 0.0.7-alpha.2

package/src/Map/types/index.ts

@@ -22,7 +22,6 @@ import type {
   Feature,
   ComputedFeature,
   CameraPosition,
-  LUT,
 } from "../../mantle";
 import type {
   CameraOptions,
@@ -39,10 +38,11 @@ import type {
   LayerSelectionReason,
   Ref as LayersRef,
 } from "../Layers";
-import { SketchComponentType } from "../Sketch";
-import { SketchAppearance, SketchType } from "../Sketch/types";
+import { SketchType, SketchOptions, SketchComponentType } from "../Sketch/types";
 import type { TimelineManagerRef } from "../useTimelineManager";
 
+import type { SceneMode, ViewerProperty } from "./viewerProperty";
+
 export type {
   FeatureComponentProps,
   FeatureComponentType,
@@ -72,6 +72,7 @@ export type {
   ValueType,
 } from "../../mantle";
 export * from "./event";
+export * from "./viewerProperty";
 
 export type EngineRef = {
   name: string;
@@ -87,7 +88,7 @@ export type EngineRef = {
   getLocationFromScreen: (x: number, y: number, withTerrain?: boolean) => LatLngHeight | undefined;
   sampleTerrainHeight: (lng: number, lat: number) => Promise<number | undefined>;
   computeGlobeHeight: (lng: number, lat: number, height?: number) => number | undefined;
-  getGlobeHeight: () => void;
+  getGlobeHeight: () => number | undefined;
   toXYZ: (
     lng: number,
     lat: number,
@@ -202,7 +203,8 @@ export type EngineProps = {
   style?: CSSProperties;
   isEditable?: boolean;
   isBuilt?: boolean;
-  property?: SceneProperty;
+  property?: ViewerProperty;
+  time?: string | Date;
   camera?: Camera;
   cameraForceHorizontalRoll?: boolean;
   small?: boolean;
@@ -297,18 +299,18 @@ export type MouseEventCallback = (props: MouseEventProps) => void;
 export type MouseWheelEventCallback = (props: MouseEventProps) => void;
 export type MouseEventTypes =
   | "click"
-  | "doubleclick"
-  | "mousedown"
-  | "mouseup"
-  | "rightclick"
-  | "rightdown"
-  | "rightup"
-  | "middleclick"
-  | "middledown"
-  | "middleup"
-  | "mousemove"
-  | "mouseenter"
-  | "mouseleave"
+  | "doubleClick"
+  | "mouseDown"
+  | "mouseUp"
+  | "rightClick"
+  | "rightDown"
+  | "rightUp"
+  | "middleClick"
+  | "middleDown"
+  | "middleUp"
+  | "mouseMove"
+  | "mouseEnter"
+  | "mouseLeave"
   | "wheel";
 
 export type MouseEvents = {
@@ -319,18 +321,18 @@ export type MouseEvents = {
 
 export type MouseEventHandles = {
   onClick: (fn: MouseEvents["click"]) => void;
-  onDoubleClick: (fn: MouseEvents["doubleclick"]) => void;
-  onMouseDown: (fn: MouseEvents["mousedown"]) => void;
-  onMouseUp: (fn: MouseEvents["mouseup"]) => void;
-  onRightClick: (fn: MouseEvents["rightclick"]) => void;
-  onRightDown: (fn: MouseEvents["rightdown"]) => void;
-  onRightUp: (fn: MouseEvents["rightup"]) => void;
-  onMiddleClick: (fn: MouseEvents["middleclick"]) => void;
-  onMiddleDown: (fn: MouseEvents["middledown"]) => void;
-  onMiddleUp: (fn: MouseEvents["middleup"]) => void;
-  onMouseMove: (fn: MouseEvents["mousemove"]) => void;
-  onMouseEnter: (fn: MouseEvents["mouseenter"]) => void;
-  onMouseLeave: (fn: MouseEvents["mouseleave"]) => void;
+  onDoubleClick: (fn: MouseEvents["doubleClick"]) => void;
+  onMouseDown: (fn: MouseEvents["mouseDown"]) => void;
+  onMouseUp: (fn: MouseEvents["mouseUp"]) => void;
+  onRightClick: (fn: MouseEvents["rightClick"]) => void;
+  onRightDown: (fn: MouseEvents["rightDown"]) => void;
+  onRightUp: (fn: MouseEvents["rightUp"]) => void;
+  onMiddleClick: (fn: MouseEvents["middleClick"]) => void;
+  onMiddleDown: (fn: MouseEvents["middleDown"]) => void;
+  onMiddleUp: (fn: MouseEvents["middleUp"]) => void;
+  onMouseMove: (fn: MouseEvents["mouseMove"]) => void;
+  onMouseEnter: (fn: MouseEvents["mouseEnter"]) => void;
+  onMouseLeave: (fn: MouseEvents["mouseLeave"]) => void;
   onWheel: (fn: MouseEvents["wheel"]) => void;
 };
 
@@ -339,186 +341,6 @@ export type MouseEventCallbacks = { [key in keyof MouseEvents]: MouseEvents[key]
 export type TickEvent = (cb: TickEventCallback) => void;
 export type TickEventCallback = (current: Date, clock: { start: Date; stop: Date }) => void;
 
-export type SceneMode = "3d" | "2d" | "columbus";
-export type IndicatorTypes = "default" | "crosshair" | "custom";
-
-export type TerrainProperty = {
-  terrain?: boolean;
-  terrainType?: "cesium" | "arcgis" | "cesiumion"; // default: cesium
-  terrainExaggeration?: number; // default: 1
-  terrainExaggerationRelativeHeight?: number; // default: 0
-  depthTestAgainstTerrain?: boolean;
-  terrainCesiumIonAsset?: string;
-  terrainCesiumIonAccessToken?: string;
-  terrainCesiumIonUrl?: string;
-  terrainUrl?: string;
-  terrainNormal?: boolean;
-  // TODO: Add encode option
-  // Need to specify a tile from `tiles` option with `heatmap` option.
-  heatmapType?: "custom"; // TODO: Support Cesium's terrain heatmap as built-in: https://sandcastle.cesium.com/?src=Globe%20Materials.html
-  heatmapColorLUT?: LUT;
-  heatmapMinHeight?: number;
-  heatmapMaxHeight?: number;
-  heatmapLogarithmic?: boolean;
-};
-
-export type SceneProperty = {
-  main?: {
-    sceneMode?: SceneMode; // default: scene3d
-    ion?: string;
-    vr?: boolean;
-  };
-  tiles?: {
-    id: string;
-    tile_type?: string;
-    tile_url?: string;
-    tile_zoomLevel?: number[];
-    tile_zoomLevelForURL?: number[];
-    tile_opacity?: number;
-    heatmap?: boolean;
-  }[];
-  tileLabels?: {
-    id: string;
-    labelType: "japan_gsi_optimal_bvmap"; // | "other_map"
-    style: Record<string, any>; // Function isn't allowed
-  }[];
-  terrain?: {
-    terrain?: boolean;
-    terrainType?: "cesium" | "arcgis" | "cesiumion"; // default: cesium
-    terrainCesiumIonAsset?: string;
-    terrainCesiumIonAccessToken?: string;
-    terrainCesiumIonUrl?: string;
-    terrainExaggeration?: number; // default: 1
-    terrainExaggerationRelativeHeight?: number; // default: 0
-    depthTestAgainstTerrain?: boolean;
-  };
-  globeLighting?: {
-    globeLighting?: boolean;
-  };
-  globeShadow?: {
-    globeShadow?: boolean;
-  };
-  globeAtmosphere?: {
-    globeAtmosphere?: boolean;
-    globeAtmosphereIntensity?: number; // default: 10
-  };
-  skyBox?: {
-    skyBox?: boolean;
-  };
-  sun?: {
-    sun?: boolean;
-  };
-  moon?: {
-    moon?: boolean;
-  };
-  skyAtmosphere?: {
-    skyAtmosphere?: boolean;
-    skyAtmosphereIntensity?: number; // default: 50
-  };
-  camera?: {
-    camera?: Camera;
-    allowEnterGround?: boolean;
-    fov?: number;
-  };
-  render?: { showWireframe?: boolean };
-} & LegacySceneProperty;
-
-type LegacySceneProperty = {
-  default?: {
-    camera?: Camera;
-    allowEnterGround?: boolean;
-    skybox?: boolean;
-    bgcolor?: string;
-    ion?: string;
-    sceneMode?: SceneMode; // default: scene3d
-    vr?: boolean;
-  } & TerrainProperty; // compat
-  cameraLimiter?: {
-    cameraLimitterEnabled?: boolean;
-    cameraLimitterShowHelper?: boolean;
-    cameraLimitterTargetArea?: Camera;
-    cameraLimitterTargetWidth?: number;
-    cameraLimitterTargetLength?: number;
-  };
-  indicator?: {
-    indicator_type: IndicatorTypes;
-    indicator_image?: string;
-    indicator_image_scale?: number;
-  };
-  tiles?: {
-    id: string;
-    tile_type?: string;
-    tile_url?: string;
-    tile_zoomLevel?: number[];
-    tile_opacity?: number;
-  }[];
-  terrain?: TerrainProperty;
-  atmosphere?: {
-    enable_sun?: boolean;
-    enableMoon?: boolean;
-    enable_lighting?: boolean;
-    ground_atmosphere?: boolean;
-    sky_atmosphere?: boolean;
-    shadows?: boolean;
-    shadowResolution?: 1024 | 2048 | 4096;
-    softShadow?: boolean;
-    shadowDarkness?: number;
-    shadowMaximumDistance?: number;
-    fog?: boolean;
-    fog_density?: number;
-    hue_shift?: number;
-    brightness_shift?: number;
-    surturation_shift?: number;
-    skyboxBrightnessShift?: number;
-    skyboxSurturationShift?: number;
-    globeShadowDarkness?: number;
-    globeImageBasedLighting?: boolean;
-    globeBaseColor?: string;
-  };
-  timeline?: {
-    animation?: boolean;
-    visible?: boolean;
-    current?: string;
-    start?: string;
-    stop?: string;
-    stepType?: "rate" | "fixed";
-    multiplier?: number;
-    step?: number;
-    rangeType?: "unbounded" | "clamped" | "bounced";
-  };
-  googleAnalytics?: {
-    enableGA?: boolean;
-    trackingId?: string;
-  };
-  theme?: {
-    themeType?: "light" | "dark" | "forest" | "custom";
-    themeTextColor?: string;
-    themeSelectColor?: string;
-    themeBackgroundColor?: string;
-  };
-  ambientOcclusion?: {
-    enabled?: boolean;
-    quality?: "low" | "medium" | "high" | "extreme";
-    intensity?: number;
-    ambientOcclusionOnly?: boolean;
-  };
-  light?: {
-    lightType?: "sunLight" | "directionalLight";
-    lightDirectionX?: number;
-    lightDirectionY?: number;
-    lightDirectionZ?: number;
-    lightColor?: string;
-    lightIntensity?: number;
-    specularEnvironmentMaps?: string;
-    sphericalHarmonicCoefficients?: [x: number, y: number, z: number][];
-    imageBasedLightIntensity?: number;
-  };
-  render?: {
-    antialias?: "low" | "medium" | "high" | "extreme";
-    debugFramePerSecond?: boolean;
-  };
-};
-
 export type EngineComponent = ForwardRefExoticComponent<
   PropsWithoutRef<EngineProps> & RefAttributes<EngineRef>
 >;
@@ -534,12 +356,8 @@ export type Engine = {
 export type RequestingRenderMode = -1 | 0 | 1; // -1: force render on every postUpdate, 0: no request to render, 1: request one frame
 
 export type SketchRef = {
+  getType: () => SketchType | undefined;
   setType: (type: SketchType | undefined, from?: "editor" | "plugin") => void;
-  setColor: (color: string) => void;
-  setDefaultAppearance: (appearance: SketchAppearance) => void;
-  disableShadow: (disable: boolean) => void;
-  enableRelativeHeight: (enable: boolean) => void;
-  createDataOnly: (dataOnly: boolean) => void;
-  allowRightClickToAbort: (allow: boolean) => void;
-  allowAutoResetInteractionMode: (allow: boolean) => void;
+  getOptions: () => SketchOptions;
+  overrideOptions: (options: SketchOptions) => void;
 };

package/src/Map/types/viewerProperty.ts

@@ -0,0 +1,215 @@
+/*
+  * ViewerProperty Interface
+  * ------------------------
+  * The ViewerProperty interface defines a collection of sub-properties that represent different aspects of the viewer component.
+  * Each sub-property encapsulates specific settings and configurations related to the viewer's behavior and appearance.
+  
+  * GlobeProperty: Settings related to the globe visualization, such as base color, lighting, and atmosphere.
+  * TerrainProperty: Configuration options for terrain visualization, including terrain type, height map, and normal mapping.
+  * SceneProperty: Scene-specific settings, such as background color, scene mode, vertical exaggeration, and lighting.
+  * TilesProperty: Properties for managing tile layers, including URLs, opacity, zoom levels, and heatmap settings.
+  * TileLabelProperty: Properties for managing tile labels, such as label type and style.
+  * SkyProperty: Settings for sky visualization, including skybox, sun, moon, fog, and sky atmosphere.
+  * CameraProperty: Camera-related settings, such as camera position, limiter, and ground entry.
+  * RenderProperty: Rendering settings, such as antialiasing and ambient occlusion.
+  * IndicatorProperty: Properties for customizing the viewer's indicator, such as type and image.
+  * AssetsProperty: Asset-related settings, such as access tokens and URLs for external assets.
+  * DebugProperty: Debugging options, such as wireframe display and FPS counter.
+  
+  * Guidelines for Adding New Properties
+  * ------------------------------------
+  * When adding new properties to the ViewerProperty interface, follow these steps to ensure consistency and maintainability:
+  * 1. Determine the Appropriate Category: Identify the aspect of the viewer your new property will affect and choose the most relevant existing sub-property type (e.g., GlobeProperty, TerrainProperty, SceneProperty, etc.). If your property does not fit into an existing category, consider creating a new sub-property type.
+  * 2. Define the New Property: Add your new property to the chosen sub-property type. Ensure that the property name is descriptive and the type is correctly specified. If your property requires complex structures, define new types as needed.
+  * 3. Maintain Optional Properties: To keep the interface flexible, add new properties as optional (?) unless they are strictly required.
+  * 4. Follow Naming Rules:
+  * - Use CamelCase for property names.
+  * - Keep property names descriptive but concise.
+  * - Maintain consistency with existing naming patterns.
+  * - Avoid abbreviations unless widely understood and standard.
+  * 5. Document the Property: Add comments or documentation to describe the purpose and usage of the new property. This will help other developers understand its function and how to use it.
+  * 6. Update Usage Examples: If applicable, update any example configurations or documentation to include the new property, demonstrating how it should be used.
+*/
+
+import type { LUT, Camera } from "../../mantle";
+
+export type SceneMode = "3d" | "2d" | "columbus";
+
+export type ViewerProperty = {
+  globe?: GlobeProperty;
+  terrain?: TerrainProperty;
+  scene?: SceneProperty;
+  tiles?: TileProperty[];
+  tileLabels?: TileLabelProperty[];
+  sky?: SkyProperty;
+  camera?: CameraProperty;
+  render?: RenderPeropty;
+  assets?: AssetsProperty; // anything related to specific assets and its access tokens
+  debug?: DebugProperty;
+  indicator?: IndicatorProperty; // consider remove this if not needed in the future
+};
+
+export type GlobeProperty = {
+  baseColor?: string;
+  enableLighting?: boolean;
+  atmosphere?: GlobeAtmosphereProperty;
+  depthTestAgainstTerrain?: boolean;
+};
+
+export type GlobeAtmosphereProperty = {
+  enabled?: boolean;
+  lightIntensity?: number;
+  brightnessShift?: number;
+  hueShift?: number;
+  saturationShift?: number;
+};
+
+export type TerrainProperty = {
+  enabled?: boolean;
+  type?: "cesium" | "arcgis" | "cesiumion";
+  url?: string;
+  normal?: boolean;
+  elevationHeatMap?: ElevationHeatMapProperty;
+};
+
+export type ElevationHeatMapProperty = {
+  type?: "custom";
+  colorLUT?: LUT;
+  minHeight?: number;
+  maxHeight?: number;
+  logarithmic?: boolean;
+};
+
+export type SceneProperty = {
+  backgroundColor?: string;
+  mode?: SceneMode;
+  verticalExaggeration?: number;
+  verticalExaggerationRelativeHeight?: number;
+  vr?: boolean;
+  light?: LightProperty;
+  shadow?: ShadowProperty;
+  imageBasedLighting?: ImageBasedLighting;
+};
+
+export type LightProperty = {
+  type?: "sunLight" | "directionalLight";
+  direction?: [x: number, y: number, z: number];
+  color?: string;
+  intensity?: number;
+};
+
+export type ShadowProperty = {
+  enabled?: boolean;
+  darkness?: number;
+  shadowMap?: ShadowMapProperty;
+};
+
+export type ShadowMapProperty = {
+  size?: 1024 | 2048 | 4096;
+  softShadows?: boolean;
+  darkness?: number;
+  maximumDistance?: number;
+};
+
+export type ImageBasedLighting = {
+  enabled?: boolean;
+  intensity?: number;
+  specularEnvironmentMaps?: string;
+  sphericalHarmonicCoefficients?: [number, number, number][];
+};
+
+export type TileProperty = {
+  id: string;
+  type?: string;
+  url?: string;
+  opacity?: number;
+  zoomLevel?: number[];
+  zoomLevelForURL?: number[];
+  heatmap?: boolean;
+};
+
+export type TileLabelProperty = {
+  id: string;
+  labelType: "japan_gsi_optimal_bvmap";
+  style: Record<string, any>;
+};
+
+export type SkyProperty = {
+  skyBox?: SkyBoxProperty;
+  sun?: SunProperty;
+  moon?: MoonProperty;
+  fog?: FogProperty;
+  skyAtmosphere?: SkyAtmosphereProperty;
+};
+
+export type SkyBoxProperty = {
+  show?: boolean;
+};
+
+export type SunProperty = {
+  show?: boolean;
+};
+
+export type MoonProperty = {
+  show?: boolean;
+};
+
+export type FogProperty = {
+  enabled?: boolean;
+  density?: number;
+};
+
+export type SkyAtmosphereProperty = {
+  show?: boolean;
+  lightIntensity?: number;
+  saturationShift?: number;
+  brightnessShift?: number;
+};
+
+export type CameraProperty = {
+  allowEnterGround?: boolean;
+  limiter?: CameraLimiterProperty;
+};
+
+export type CameraLimiterProperty = {
+  enabled?: boolean;
+  targetArea?: Camera;
+  targetWidth?: number;
+  targetLength?: number;
+  showHelper?: boolean;
+};
+
+export type RenderPeropty = {
+  antialias?: "low" | "medium" | "high" | "extreme";
+  ambientOcclusion?: AmbientOcclusionProperty;
+};
+
+export type AmbientOcclusionProperty = {
+  enabled?: boolean;
+  quality?: "low" | "medium" | "high" | "extreme";
+  intensity?: number;
+  ambientOcclusionOnly?: boolean;
+};
+
+export type IndicatorProperty = {
+  type?: "default" | "crosshair" | "custom";
+  image?: string;
+  imageScale?: number;
+};
+
+export type AssetsProperty = {
+  cesium?: AssetsCesiumProperty;
+};
+
+export type AssetsCesiumProperty = {
+  terrain?: {
+    ionAccessToken?: string;
+    ionAsset?: string;
+    ionUrl?: string;
+  };
+};
+
+export type DebugProperty = {
+  showGlobeWireframe?: boolean;
+  showFramesPerSecond?: boolean;
+};

package/src/Map/useTimelineManager.ts

@@ -62,12 +62,12 @@ export type TimelineCommit = (PlayCommand | PauseCommand | SetTimeCommand | SetO
 
 export type TimelineCommitter = {
   source:
-    | "overrideSceneProperty"
     | "widgetContext"
     | "pluginAPI"
     | "featureResource"
     | "storyTimelineBlock"
-    | "storyPage";
+    | "storyPage"
+    | "initialize";
   id?: string;
 };
 
@@ -193,7 +193,9 @@ export default ({ init, engineRef, timelineManagerRef }: Props) => {
       onCommit,
       offCommit,
       handleTick,
-      tick: engineRef?.current?.tick,
+      get tick() {
+        return engineRef?.current?.tick;
+      },
     };
   }, [
     options,

package/src/Map/utils.ts

@@ -1,5 +1,4 @@
-import { cloneDeep, mergeWith, omit } from "lodash-es";
-import { type RefObject, useCallback, useRef, useState, useMemo } from "react";
+import { type RefObject, useCallback, useRef } from "react";
 
 export function useGet<T>(value: T): () => T {
   const ref = useRef<T>(value);
@@ -15,47 +14,6 @@ export function wrapRef<T>(ref: RefObject<T>, keys: FunctionKeys<T>): WrappedRef
   ) as WrappedRef<T>;
 }
 
-export function mergeProperty(a: any, b: any) {
-  const a2 = cloneDeep(a);
-  return mergeWith(
-    a2,
-    b,
-    (
-      s: any,
-      v: any,
-      _k: string | number | symbol,
-      _obj: any,
-      _src: any,
-      stack: { size: number },
-    ) => (stack.size > 0 || Array.isArray(v) ? v ?? s : undefined),
-  );
-}
-
-export function useOverriddenProperty<T extends {}>(
-  property: T | undefined,
-): [T, (pluginId: string, property: T) => void] {
-  const [overriddenProperties, setOverrideProperty] = useState<{
-    [pluginId: string]: any;
-  }>({});
-  const { overriddenPropertyCommon, overriddenProperty } = useMemo(() => {
-    const { "": overriddenPropertyCommon, ...overriddenProperty } = overriddenProperties;
-    return { overriddenPropertyCommon, overriddenProperty };
-  }, [overriddenProperties]);
-
-  const overrideProperty = useCallback((pluginId: string, property: any) => {
-    setOverrideProperty(p => (property ? { ...p, [pluginId || ""]: property } : omit(p, pluginId)));
-  }, []);
-
-  const mergedProperty = useMemo(() => {
-    return [overriddenPropertyCommon, ...Object.values(overriddenProperty)].reduce(
-      (p, v) => mergeProperty(p, v),
-      property,
-    );
-  }, [property, overriddenPropertyCommon, overriddenProperty]);
-
-  return [mergedProperty, overrideProperty];
-}
-
 export type FunctionKeys<T> = {
   [P in keyof T as T[P] extends (...args: any[]) => any ? P : never]: 1;
 };

package/src/Visualizer/coreContext.tsx

@@ -1,11 +1,6 @@
 import { createContext } from "react";
 
-import {
-  LayerEditEvent,
-  LayerSelectionReason,
-  LayerVisibilityEvent,
-  SceneProperty,
-} from "../engines";
+import { LayerEditEvent, LayerSelectionReason, LayerVisibilityEvent } from "../engines";
 import { ComputedFeature, ComputedLayer } from "../mantle";
 import {
   LayerLoadEvent,
@@ -28,8 +23,6 @@ type CoreContext = {
   };
   selectedComputedFeature?: ComputedFeature | undefined;
   viewport?: Viewport;
-  overriddenSceneProperty?: SceneProperty;
-  overrideSceneProperty?: (pluginId: string, property: SceneProperty) => void;
   handleCameraForceHorizontalRollChange?: (enable?: boolean) => void;
   handleInteractionModeChange?: (mode?: InteractionModeType | undefined) => void;
   onSketchPluginFeatureCreate?: (cb: SketchEventCallback) => void;