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

package/src/Map/types/viewerProperty.ts

@@ -1,215 +0,0 @@
-/*
-  * 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/Visualizer/useCoreAPI.ts

@@ -1,30 +0,0 @@
-import { useEffect, useMemo, useRef } from "react";
-
-import { version } from "../../package.json";
-import { ViewerProperty } from "../engines";
-
-interface CoreAPI {
-  readonly version: string;
-  readonly viewerProperty?: ViewerProperty;
-}
-
-export default ({ viewerProperty }: { viewerProperty?: ViewerProperty }) => {
-  const viewerPropertyRef = useRef(viewerProperty);
-  viewerPropertyRef.current = viewerProperty;
-
-  const coreAPI: CoreAPI = useMemo(
-    () => ({
-      get version() {
-        return version;
-      },
-      get viewerProperty() {
-        return viewerPropertyRef.current;
-      },
-    }),
-    [],
-  );
-
-  useEffect(() => {
-    (window as any).reearth_core = coreAPI;
-  }, [coreAPI]);
-};

package/src/engines/Cesium/hooks/useCamera.ts

@@ -1,135 +0,0 @@
-import { Math as CesiumMath, Scene, Viewer } from "cesium";
-import { isEqual } from "lodash-es";
-import { useCallback, useEffect, useRef } from "react";
-import { CesiumComponentRef } from "resium";
-import { RefObject } from "use-callback-ref/dist/es5/types";
-import { useCustomCompareCallback } from "use-custom-compare";
-
-import { EngineRef, ViewerProperty } from "../..";
-import { Camera } from "../../../mantle";
-import { FEATURE_FLAGS } from "../../../Visualizer";
-import { getCamera } from "../common";
-
-import { useCameraLimiter } from "./useCameraLimiter";
-
-export default ({
-  cesium,
-  property,
-  camera,
-  featureFlags,
-  engineAPI,
-  cameraForceHorizontalRoll = false,
-  onCameraChange,
-}: {
-  cesium: RefObject<CesiumComponentRef<Viewer>>;
-  property?: ViewerProperty;
-  engineAPI: EngineRef;
-  featureFlags: number;
-  camera?: Camera;
-  cameraForceHorizontalRoll?: boolean;
-  onCameraChange?: (camera: Camera) => void;
-}) => {
-  // cache the camera data emitted from viewer camera change
-  const emittedCamera = useRef<Camera[]>([]);
-  const updateCamera = useCallback(() => {
-    const viewer = cesium?.current?.cesiumElement;
-    if (!viewer || viewer.isDestroyed() || !onCameraChange) return;
-
-    const c = getCamera(viewer);
-    if (c && !isEqual(c, camera)) {
-      emittedCamera.current.push(c);
-      // The state change is not sync now. This number is how many state updates can actually happen to be merged within one re-render.
-      if (emittedCamera.current.length > 10) {
-        emittedCamera.current.shift();
-      }
-      onCameraChange?.(c);
-    }
-  }, [cesium, camera, onCameraChange]);
-
-  const handleCameraChange = useCallback(() => {
-    updateCamera();
-  }, [updateCamera]);
-
-  const handleCameraMoveEnd = useCallback(() => {
-    updateCamera();
-  }, [updateCamera]);
-
-  useEffect(() => {
-    if (camera && !emittedCamera.current.includes(camera)) {
-      engineAPI.flyTo(camera, { duration: 0 });
-      emittedCamera.current = [];
-    }
-  }, [camera, engineAPI]);
-
-  useEffect(() => {
-    if (!cesium.current?.cesiumElement) return;
-    const allowCameraMove = !!(featureFlags & FEATURE_FLAGS.CAMERA_MOVE);
-    const allowCameraZoom = !!(featureFlags & FEATURE_FLAGS.CAMERA_ZOOM);
-    const allowCameraTilt = !!(featureFlags & FEATURE_FLAGS.CAMERA_TILT);
-    const allowCameraLook = !!(featureFlags & FEATURE_FLAGS.CAMERA_LOOK);
-    cesium.current.cesiumElement.scene.screenSpaceCameraController.enableTranslate =
-      allowCameraMove;
-    cesium.current.cesiumElement.scene.screenSpaceCameraController.enableRotate = allowCameraMove;
-    cesium.current.cesiumElement.scene.screenSpaceCameraController.enableLook = allowCameraLook;
-    cesium.current.cesiumElement.scene.screenSpaceCameraController.enableTilt = allowCameraTilt;
-    cesium.current.cesiumElement.scene.screenSpaceCameraController.enableZoom = allowCameraZoom;
-  }, [cesium, featureFlags]);
-
-  // move to initial position at startup
-  const initialCameraFlight = useRef(false);
-
-  const mountCamera = useCustomCompareCallback(
-    () => {
-      if (initialCameraFlight.current) return;
-      initialCameraFlight.current = true;
-      if (property?.camera?.limiter?.enabled && property?.camera?.limiter?.targetArea) {
-        engineAPI.flyTo(property?.camera?.limiter?.targetArea, { duration: 0 });
-      } else if (camera) {
-        engineAPI.flyTo(camera, { duration: 0 });
-      }
-    },
-    [engineAPI, property?.camera?.limiter?.enabled],
-    (prevDeps, nextDeps) => prevDeps[0] === nextDeps[0] && prevDeps[1] === nextDeps[1],
-  );
-
-  const unmountCamera = useCallback(() => {
-    initialCameraFlight.current = false;
-  }, []);
-
-  // camera limiter
-  const { cameraViewBoundaries, cameraViewOuterBoundaries, cameraViewBoundariesMaterial } =
-    useCameraLimiter(cesium, camera, property?.camera?.limiter);
-
-  // horizontal roll
-  const fixCameraHorizontal = useCallback(
-    (scene: Scene) => {
-      if (!scene.camera || !cameraForceHorizontalRoll) return;
-      if (Math.abs(CesiumMath.negativePiToPi(scene.camera.roll)) > Math.PI / 86400) {
-        scene.camera.setView({
-          orientation: {
-            heading: scene.camera.heading,
-            pitch: scene.camera.pitch,
-            roll: 0,
-          },
-        });
-      }
-    },
-    [cameraForceHorizontalRoll],
-  );
-
-  useEffect(() => {
-    const viewer = cesium.current?.cesiumElement;
-    if (!viewer) return;
-    return viewer.scene.preRender.addEventListener(fixCameraHorizontal);
-  }, [cesium, fixCameraHorizontal]);
-
-  return {
-    cameraViewBoundaries,
-    cameraViewOuterBoundaries,
-    cameraViewBoundariesMaterial,
-    mountCamera,
-    unmountCamera,
-    handleCameraChange,
-    handleCameraMoveEnd,
-  };
-};

package/src/engines/Cesium/hooks/useExplicitRender.ts

@@ -1,65 +0,0 @@
-import { Viewer } from "cesium";
-import { MutableRefObject, RefObject, useCallback, useEffect, useRef } from "react";
-import { CesiumComponentRef } from "resium";
-
-import { RequestingRenderMode, ViewerProperty } from "../../../Map";
-import { FORCE_REQUEST_RENDER, NO_REQUEST_RENDER, REQUEST_RENDER_ONCE } from "../../../Map/hooks";
-
-export default ({
-  cesium,
-  requestingRenderMode,
-  isLayerDragging,
-  shouldRender,
-  property,
-}: {
-  cesium: RefObject<CesiumComponentRef<Viewer>>;
-  requestingRenderMode?: MutableRefObject<RequestingRenderMode>;
-  isLayerDragging?: boolean;
-  shouldRender?: boolean;
-  property?: ViewerProperty;
-}) => {
-  // explicit rendering
-  const explicitRender = useCallback(() => {
-    const viewer = cesium.current?.cesiumElement;
-    if (!requestingRenderMode?.current || !viewer || viewer.isDestroyed()) return;
-    viewer.scene.requestRender();
-    if (requestingRenderMode.current === REQUEST_RENDER_ONCE) {
-      requestingRenderMode.current = NO_REQUEST_RENDER;
-    }
-  }, [cesium, requestingRenderMode]);
-
-  const explicitRenderRef = useRef<() => void>();
-
-  useEffect(() => {
-    explicitRenderRef.current = explicitRender;
-  }, [explicitRender]);
-
-  useEffect(() => {
-    const viewer = cesium.current?.cesiumElement;
-    if (!viewer || viewer.isDestroyed()) return;
-    return viewer.scene.postUpdate.addEventListener(() => {
-      explicitRenderRef.current?.();
-    });
-  }, [cesium]);
-
-  // render one frame when scene property changes
-  useEffect(() => {
-    if (requestingRenderMode) {
-      requestingRenderMode.current = REQUEST_RENDER_ONCE;
-    }
-  }, [property, requestingRenderMode]);
-
-  // force render when timeline is animating or is shouldRender
-  useEffect(() => {
-    const viewer = cesium.current?.cesiumElement;
-    if (!viewer || viewer.isDestroyed()) return;
-    if (requestingRenderMode) {
-      requestingRenderMode.current =
-        isLayerDragging || shouldRender
-          ? FORCE_REQUEST_RENDER
-          : requestingRenderMode.current === REQUEST_RENDER_ONCE
-            ? REQUEST_RENDER_ONCE
-            : NO_REQUEST_RENDER;
-    }
-  }, [cesium, isLayerDragging, shouldRender, requestingRenderMode]);
-};

package/src/engines/Cesium/hooks/useLayerDragDrop.ts

@@ -1,77 +0,0 @@
-import { Cartesian3, Entity, Viewer } from "cesium";
-import CesiumDnD, { Context } from "cesium-dnd";
-import { RefObject, useCallback, useEffect, useRef } from "react";
-import { CesiumComponentRef } from "resium";
-
-import { LatLng } from "../../../utils";
-import { isDraggable, isSelectable } from "../common";
-import { getTag } from "../Feature";
-import { convertCartesian3ToPosition } from "../utils/utils";
-
-export default ({
-  cesium,
-  isLayerDraggable,
-  onLayerDrag,
-  onLayerDrop,
-}: {
-  cesium: RefObject<CesiumComponentRef<Viewer>>;
-  isLayerDraggable?: boolean;
-  onLayerDrag?: (layerId: string, featureId: string | undefined, position: LatLng) => void;
-  onLayerDrop?: (
-    layerId: string,
-    featureId: string | undefined,
-    position: LatLng | undefined,
-  ) => void;
-}) => {
-  // enable Drag and Drop Layers
-  const handleLayerDrag = useCallback(
-    (e: Entity, position: Cartesian3 | undefined, _context: Context): boolean | void => {
-      const viewer = cesium.current?.cesiumElement;
-      if (!viewer || viewer.isDestroyed() || !isSelectable(e) || !isDraggable(e)) return false;
-
-      const pos = convertCartesian3ToPosition(cesium.current?.cesiumElement, position);
-      if (!pos) return false;
-
-      const tag = getTag(e);
-      if (!tag) return false;
-
-      onLayerDrag?.(tag.layerId || "", tag.featureId, pos);
-    },
-    [cesium, onLayerDrag],
-  );
-
-  const handleLayerDrop = useCallback(
-    (e: Entity, position: Cartesian3 | undefined): boolean | void => {
-      const viewer = cesium.current?.cesiumElement;
-      if (!viewer || viewer.isDestroyed()) return false;
-
-      const tag = getTag(e);
-      const pos = convertCartesian3ToPosition(cesium.current?.cesiumElement, position);
-      onLayerDrop?.(tag?.layerId || "", tag?.featureId || "", pos);
-
-      return false; // let apollo-client handle optimistic updates
-    },
-    [cesium, onLayerDrop],
-  );
-
-  const cesiumDnD = useRef<CesiumDnD>();
-  useEffect(() => {
-    const viewer = cesium.current?.cesiumElement;
-    if (!viewer || viewer.isDestroyed()) return;
-    cesiumDnD.current = new CesiumDnD(viewer, {
-      onDrag: handleLayerDrag,
-      onDrop: handleLayerDrop,
-      dragDelay: 1000,
-      initialDisabled: !isLayerDraggable,
-    });
-    return () => {
-      if (!viewer || viewer.isDestroyed()) return;
-      cesiumDnD.current?.disable();
-    };
-  }, [cesium, isLayerDraggable, handleLayerDrag, handleLayerDrop]);
-
-  return {
-    handleLayerDrag,
-    handleLayerDrop,
-  };
-};

package/src/engines/Cesium/hooks/useViewerProperty.ts

@@ -1,90 +0,0 @@
-import { Cartesian3, Color, DirectionalLight, SceneMode, SunLight, Viewer } from "cesium";
-import { RefObject, useMemo } from "react";
-import { CesiumComponentRef } from "resium";
-
-import { ViewerProperty } from "../..";
-
-// TODO: move all viewer property -> resium component prop logic here (from the gerneal long Cesium/hooks file)
-export default ({
-  cesium,
-  property,
-}: {
-  cesium: RefObject<CesiumComponentRef<Viewer>>;
-  property?: ViewerProperty;
-}) => {
-  const sceneLight = useMemo(() => {
-    let light;
-    if (property?.scene?.light?.type === "sunLight") {
-      light = new SunLight({
-        color: property.scene?.light?.color
-          ? Color.fromCssColorString(property.scene.light.color)
-          : undefined,
-        intensity: property.scene?.light?.intensity,
-      });
-    } else if (property?.scene?.light?.type === "directionalLight") {
-      light = new DirectionalLight({
-        direction: new Cartesian3(
-          property?.scene?.light?.direction?.[0] ?? 1,
-          property?.scene?.light?.direction?.[1] ?? 0,
-          property?.scene?.light?.direction?.[2] ?? 0,
-        ),
-        color: property.scene?.light?.color
-          ? Color.fromCssColorString(property.scene.light.color)
-          : undefined,
-        intensity: property.scene?.light?.intensity,
-      });
-    } else {
-      light = cesium.current?.cesiumElement?.scene.light;
-      if (light) {
-        light.color = property?.scene?.light?.color
-          ? Color.fromCssColorString(property.scene.light.color)
-          : light.color;
-        light.intensity = property?.scene?.light?.intensity
-          ? property.scene.light.intensity
-          : light.intensity;
-      }
-    }
-    return light;
-  }, [
-    cesium,
-    property?.scene?.light?.type,
-    property?.scene?.light?.color,
-    property?.scene?.light?.direction,
-    property?.scene?.light?.intensity,
-  ]);
-
-  const sceneBackgroundColor = useMemo(
-    () =>
-      property?.scene?.backgroundColor
-        ? Color.fromCssColorString(property.scene.backgroundColor)
-        : undefined,
-    [property?.scene?.backgroundColor],
-  );
-
-  const sceneMsaaSamples = useMemo(() => {
-    // TODO: FXAA doesn't support alpha blending in Cesium, so we will enable FXAA when this is fixed.
-    // viewer.scene.postProcessStages.fxaa.enabled = property?.render?.antialias === "high";
-    return property?.render?.antialias === "extreme"
-      ? 8
-      : property?.render?.antialias === "high"
-        ? 6
-        : property?.render?.antialias === "medium"
-          ? 4
-          : 1;
-  }, [property?.render?.antialias]);
-
-  const sceneMode = useMemo(() => {
-    return property?.scene?.mode === "2d"
-      ? SceneMode.SCENE2D
-      : property?.scene?.mode === "columbus"
-        ? SceneMode.COLUMBUS_VIEW
-        : SceneMode.SCENE3D;
-  }, [property?.scene?.mode]);
-
-  return {
-    sceneLight,
-    sceneBackgroundColor,
-    sceneMsaaSamples,
-    sceneMode,
-  };
-};