@reearth/core 0.0.7-alpha.5 → 0.0.7-beta.1

package/src/Map/types/index.ts

@@ -22,6 +22,7 @@ import type {
   Feature,
   ComputedFeature,
   CameraPosition,
+  LUT,
 } from "../../mantle";
 import type {
   CameraOptions,
@@ -38,11 +39,10 @@ import type {
   LayerSelectionReason,
   Ref as LayersRef,
 } from "../Layers";
-import { SketchType, SketchOptions, SketchComponentType } from "../Sketch/types";
+import { SketchComponentType } from "../Sketch";
+import { SketchAppearance, SketchType } from "../Sketch/types";
 import type { TimelineManagerRef } from "../useTimelineManager";
 
-import type { SceneMode, ViewerProperty } from "./viewerProperty";
-
 export type {
   FeatureComponentProps,
   FeatureComponentType,
@@ -72,7 +72,6 @@ export type {
   ValueType,
 } from "../../mantle";
 export * from "./event";
-export * from "./viewerProperty";
 
 export type EngineRef = {
   name: string;
@@ -88,7 +87,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: () => number | undefined;
+  getGlobeHeight: () => void;
   toXYZ: (
     lng: number,
     lat: number,
@@ -203,8 +202,7 @@ export type EngineProps = {
   style?: CSSProperties;
   isEditable?: boolean;
   isBuilt?: boolean;
-  property?: ViewerProperty;
-  time?: string | Date;
+  property?: SceneProperty;
   camera?: Camera;
   cameraForceHorizontalRoll?: boolean;
   small?: boolean;
@@ -299,18 +297,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 = {
@@ -321,18 +319,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;
 };
 
@@ -341,6 +339,186 @@ 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>
 >;
@@ -356,8 +534,12 @@ 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;
-  getOptions: () => SketchOptions;
-  overrideOptions: (options: SketchOptions) => 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;
 };

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"
-    | "initialize";
+    | "storyPage";
   id?: string;
 };
 
@@ -193,9 +193,7 @@ export default ({ init, engineRef, timelineManagerRef }: Props) => {
       onCommit,
       offCommit,
       handleTick,
-      get tick() {
-        return engineRef?.current?.tick;
-      },
+      tick: engineRef?.current?.tick,
     };
   }, [
     options,

package/src/Map/utils.ts

@@ -1,4 +1,5 @@
-import { type RefObject, useCallback, useRef } from "react";
+import { cloneDeep, mergeWith, omit } from "lodash-es";
+import { type RefObject, useCallback, useRef, useState, useMemo } from "react";
 
 export function useGet<T>(value: T): () => T {
   const ref = useRef<T>(value);
@@ -14,6 +15,47 @@ 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,6 +1,11 @@
 import { createContext } from "react";
 
-import { LayerEditEvent, LayerSelectionReason, LayerVisibilityEvent } from "../engines";
+import {
+  LayerEditEvent,
+  LayerSelectionReason,
+  LayerVisibilityEvent,
+  SceneProperty,
+} from "../engines";
 import { ComputedFeature, ComputedLayer } from "../mantle";
 import {
   LayerLoadEvent,
@@ -23,6 +28,8 @@ 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;

package/src/Visualizer/hooks.ts

@@ -1,3 +1,4 @@
+import { clone } from "lodash-es";
 import { Ref, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 
 import type { ComputedFeature, Feature, LatLng, SelectedFeatureInfo } from "../mantle";
@@ -6,6 +7,7 @@ import type {
   LayerSelectionReason,
   Camera,
   ComputedLayer,
+  SceneProperty,
   LayerEditEvent,
   CursorType,
   LayerVisibilityEvent,
@@ -13,22 +15,21 @@ import type {
   LayerSelectWithRectStart,
   LayerSelectWithRectMove,
   LayerSelectWithRectEnd,
-  ViewerProperty,
 } from "../Map";
+import { useOverriddenProperty } from "../Map";
 import { SketchEventCallback, SketchEventProps, SketchType } from "../Map/Sketch/types";
 import { TimelineManagerRef } from "../Map/useTimelineManager";
 
 import type { InteractionModeType } from "./interactionMode";
 import { INTERACTION_MODES } from "./interactionMode";
-import useCoreAPI from "./useCoreAPI";
 import useViewport from "./useViewport";
 
 export default function useHooks(
   {
     camera: initialCamera,
     interactionMode: initialInteractionMode,
+    sceneProperty,
     zoomedLayerId,
-    viewerProperty,
     onLayerSelect,
     onCameraChange,
     onInteractionModeChange,
@@ -38,8 +39,8 @@ export default function useHooks(
   }: {
     camera?: Camera;
     interactionMode?: InteractionModeType;
+    sceneProperty?: SceneProperty;
     zoomedLayerId?: string;
-    viewerProperty?: ViewerProperty;
     onLayerSelect?: (
       layerId: string | undefined,
       layer: (() => Promise<ComputedLayer | undefined>) | undefined,
@@ -110,6 +111,70 @@ export default function useHooks(
 
   const timelineManagerRef: TimelineManagerRef = useRef();
 
+  // scene
+  const [overriddenSceneProperty, originalOverrideSceneProperty] =
+    useOverriddenProperty(sceneProperty);
+
+  const overrideSceneProperty = useCallback(
+    (pluginId: string, property: SceneProperty) => {
+      if (property.timeline) {
+        const filteredTimeline = clone(property.timeline);
+        delete filteredTimeline.visible;
+        if (Object.keys(filteredTimeline).length > 0) {
+          if (
+            filteredTimeline.current !== undefined ||
+            filteredTimeline.start !== undefined ||
+            filteredTimeline.stop !== undefined
+          ) {
+            timelineManagerRef?.current?.commit({
+              cmd: "SET_TIME",
+              payload: {
+                start:
+                  filteredTimeline.start ?? timelineManagerRef?.current?.computedTimeline.start,
+                stop: filteredTimeline.stop ?? timelineManagerRef?.current?.computedTimeline.stop,
+                current:
+                  filteredTimeline.current ?? timelineManagerRef?.current?.computedTimeline.current,
+              },
+              committer: {
+                source: "overrideSceneProperty",
+                id: pluginId,
+              },
+            });
+          }
+          if (
+            filteredTimeline.multiplier !== undefined ||
+            filteredTimeline.stepType !== undefined ||
+            filteredTimeline.rangeType !== undefined
+          ) {
+            timelineManagerRef?.current?.commit({
+              cmd: "SET_OPTIONS",
+              payload: {
+                stepType: filteredTimeline.stepType,
+                multiplier: filteredTimeline.multiplier,
+                rangeType: filteredTimeline.rangeType,
+              },
+              committer: {
+                source: "overrideSceneProperty",
+                id: pluginId,
+              },
+            });
+          }
+          if (filteredTimeline.animation !== undefined) {
+            timelineManagerRef?.current?.commit({
+              cmd: filteredTimeline.animation ? "PLAY" : "PAUSE",
+              committer: {
+                source: "overrideSceneProperty",
+                id: pluginId,
+              },
+            });
+          }
+        }
+      }
+      originalOverrideSceneProperty(pluginId, property);
+    },
+    [timelineManagerRef, originalOverrideSceneProperty],
+  );
+
   // camera
   const [camera, changeCamera] = useValue(initialCamera, onCameraChange);
 
@@ -241,6 +306,8 @@ export default function useHooks(
       selectedLayer,
       selectedComputedFeature,
       viewport,
+      overriddenSceneProperty,
+      overrideSceneProperty,
       handleCameraForceHorizontalRollChange,
       handleInteractionModeChange: changeInteractionMode,
       onSketchPluginFeatureCreate,
@@ -257,6 +324,8 @@ export default function useHooks(
       selectedLayer,
       selectedComputedFeature,
       viewport,
+      overriddenSceneProperty,
+      overrideSceneProperty,
       changeInteractionMode,
       handleCameraForceHorizontalRollChange,
       onLayerEdit,
@@ -280,20 +349,20 @@ export default function useHooks(
     [],
   );
 
-  useCoreAPI({ viewerProperty });
-
   return {
     mapRef,
     wrapperRef,
     selectedFeature,
     camera,
     featureFlags,
+    overriddenSceneProperty,
     isLayerDragging,
     timelineManagerRef,
     cursor,
     cameraForceHorizontalRoll,
     coreContextValue,
     containerStyle,
+    overrideSceneProperty,
     handleLayerSelect,
     handleLayerDrag,
     handleLayerDrop,

package/src/Visualizer/index.stories.tsx

@@ -15,11 +15,11 @@ export const Cesium: Story = {
   args: {
     ready: true,
     engine: "cesium",
-    viewerProperty: {
+    sceneProperty: {
       tiles: [
         {
           id: "default",
-          type: "default",
+          tile_type: "default",
         },
       ],
     },
@@ -72,13 +72,57 @@ export const API: Story = {
   args: {
     ready: true,
     engine: "cesium",
-    viewerProperty: {
+    sceneProperty: {
       tiles: [
         {
           id: "default",
-          type: "default",
+          tile_type: "default",
         },
       ],
     },
   },
 };
+
+export const Plugin = {
+  args: {
+    ready: true,
+    engine: "cesium",
+    sceneProperty: {
+      tiles: [
+        {
+          id: "default",
+          tile_type: "default",
+        },
+      ],
+    },
+    widgetAlignSystem: {
+      outer: {
+        left: {
+          top: {
+            align: "start",
+            widgets: [
+              {
+                id: "plugin",
+                pluginId: "plugin",
+                extensionId: "test",
+                ...({
+                  __REEARTH_SOURCECODE: `reearth.layers.add(${JSON.stringify({
+                    id: "l",
+                    type: "simple",
+                    data: {
+                      type: "geojson",
+                      value: { type: "Feature", geometry: { type: "Point", coordinates: [0, 0] } },
+                    },
+                    marker: {
+                      imageColor: "#fff",
+                    },
+                  })});`,
+                } as any),
+              },
+            ],
+          },
+        },
+      },
+    },
+  },
+};