@reearth/core 0.0.7-alpha.1 → 0.0.7-alpha.11

package/dist/{index-DqatWUTw.js → index-DqGWVPtz.js}

@@ -1,4 +1,3 @@
-window.CESIUM_BASE_URL = "/cesium/";
 var oe = typeof global < "u" ? global : typeof self < "u" ? self : typeof window < "u" ? window : {}, P = [], M = [], Qt = typeof Uint8Array < "u" ? Uint8Array : Array, je = !1;
 function at() {
   je = !0;

package/dist/index.d.ts

@@ -54,7 +54,7 @@ declare type Array_2 = any[];
 export { Array_2 as Array }
 
 export declare type AssetsCesiumProperty = {
-    terrian?: {
+    terrain?: {
         ionAccessToken?: string;
         ionAsset?: string;
         ionUrl?: string;
@@ -137,25 +137,24 @@ export declare type CameraOptions = {
 /** Represents the camera position and state */
 export declare type CameraPosition = {
     /** degrees */
-    lat: number;
+    lat?: number;
     /** degrees */
-    lng: number;
+    lng?: number;
     /** meters */
-    height: number;
+    height?: number;
     /** radians */
-    heading: number;
+    heading?: number;
     /** radians */
-    pitch: number;
+    pitch?: number;
     /** radians */
-    roll: number;
+    roll?: number;
     /** Field of view expressed in radians */
-    fov: number;
+    fov?: number;
     /** Aspect ratio of frustum */
     aspectRatio?: number;
 };
 
 export declare type CameraProperty = {
-    camera?: Camera;
     allowEnterGround?: boolean;
     limiter?: CameraLimiterProperty;
 };
@@ -422,6 +421,14 @@ export declare type DefaultInfobox = {
     };
 };
 
+export declare type ElevationHeatMapProperty = {
+    type?: "custom";
+    colorLUT?: LUT;
+    minHeight?: number;
+    maxHeight?: number;
+    logarithmic?: boolean;
+};
+
 export declare type EllipseAppearance = {
     show?: boolean;
     heightReference?: "none" | "clamp" | "relative";
@@ -513,7 +520,7 @@ export declare 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, height: number, options?: {
         useGlobeEllipsoid?: boolean;
     }) => [x: number, y: number, z: number] | undefined;
@@ -797,14 +804,6 @@ export declare type HeatMapAppearance = {
     logarithmic?: boolean;
 };
 
-export declare type HeightMapProperty = {
-    type?: "custom";
-    colorLUT?: LUT;
-    minHeight?: number;
-    maxHeight?: number;
-    logarithmic?: boolean;
-};
-
 export declare type ImageBasedLighting = {
     enabled?: boolean;
     intensity?: number;
@@ -955,6 +954,7 @@ export declare type LayersRef = {
     }) | null) => void;
     deleteLayer: (...ids: string[]) => void;
     isLayer: (obj: any) => obj is LazyLayer;
+    isComputedLayer: (obj: any) => obj is ComputedLayer;
     layers: () => LazyLayer[];
     walk: <T>(fn: (layer: LazyLayer, index: number, parents: LazyLayer[]) => T | void) => T | undefined;
     find: (fn: (layer: LazyLayer, index: number, parents: LazyLayer[]) => boolean) => LazyLayer | undefined;
@@ -1177,18 +1177,18 @@ export declare type MouseEventCallbacks = {
 
 export declare 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;
 };
 
@@ -1208,7 +1208,7 @@ export declare type MouseEvents = {
     wheel: MouseWheelEventCallback;
 };
 
-export declare type MouseEventTypes = "click" | "doubleclick" | "mousedown" | "mouseup" | "rightclick" | "rightdown" | "rightup" | "middleclick" | "middledown" | "middleup" | "mousemove" | "mouseenter" | "mouseleave" | "wheel";
+export declare type MouseEventTypes = "click" | "doubleClick" | "mouseDown" | "mouseUp" | "rightClick" | "rightDown" | "rightUp" | "middleClick" | "middleDown" | "middleUp" | "mouseMove" | "mouseEnter" | "mouseLeave" | "wheel";
 
 export declare type MouseWheelEventCallback = (props: MouseEventProps) => void;
 
@@ -1485,6 +1485,16 @@ export declare type SketchFeature = Feature_2<Polygon_2 | MultiPolygon | Point |
     extrudedHeight: number;
 }>;
 
+export declare type SketchOptions = {
+    color?: string;
+    appearance?: SketchAppearance;
+    dataOnly?: boolean;
+    disableShadow?: boolean;
+    enableRelativeHeight?: boolean;
+    rightClickToAbort?: boolean;
+    autoResetInteractionMode?: boolean;
+};
+
 export declare type SketchProps = {
     layersRef: RefObject<LayersRef>;
     engineRef: RefObject<EngineRef>;
@@ -1499,14 +1509,10 @@ export declare type SketchProps = {
 };
 
 export declare 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;
 };
 
 export declare type SketchType = "marker" | "polyline" | "circle" | "rectangle" | "polygon" | "extrudedCircle" | "extrudedRectangle" | "extrudedPolygon";
@@ -1554,7 +1560,7 @@ export declare type TerrainProperty = {
     type?: "cesium" | "arcgis" | "cesiumion";
     url?: string;
     normal?: boolean;
-    heightMap?: HeightMapProperty;
+    elevationHeatMap?: ElevationHeatMapProperty;
 };
 
 export declare type TickEvent = (cb: TickEventCallback) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reearth/core",
-  "version": "0.0.7-alpha.1",
+  "version": "0.0.7-alpha.11",
   "author": "Re:Earth contributors <community@reearth.io>",
   "license": "Apache-2.0",
   "description": "A library that abstracts a map engine as one common API.",
@@ -27,9 +27,9 @@
     "node": ">=20"
   },
   "peerDependencies": {
+    "cesium": "1.118.x",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "cesium": "1.x"
+    "react-dom": "^18.2.0"
   },
   "dependencies": {
     "@reearth/cesium-mvt-imagery-provider": "1.5.4",
@@ -61,7 +61,7 @@
     "react-error-boundary": "4.0.11",
     "react-nl2br": "1.0.4",
     "react-use": "17.5.0",
-    "resium": "1.17.4",
+    "resium": "1.18.1",
     "suspend-react": "0.1.3",
     "tiny-invariant": "1.3.3",
     "use-callback-ref": "1.3.2",
@@ -89,13 +89,13 @@
     "@types/lodash-es": "4.17.12",
     "@types/node": "20.12.7",
     "@types/pbf": "3.0.5",
-    "@types/react": "18.2.6",
-    "@types/react-dom": "18.2.6",
+    "@types/react": "18.3.0",
+    "@types/react-dom": "18.3.0",
     "@types/uuid": "9.0.8",
     "@typescript-eslint/eslint-plugin": "7.2.0",
     "@typescript-eslint/parser": "7.2.0",
     "@vitejs/plugin-react": "4.2.1",
-    "cesium": "1.116.0",
+    "cesium": "1.118.0",
     "eslint": "8.57.0",
     "eslint-config-reearth": "0.3.0",
     "eslint-plugin-react-hooks": "4.6.0",
@@ -108,7 +108,7 @@
     "storybook": "8.0.8",
     "typescript": "5.2.2",
     "vite": "5.0.8",
-    "vite-plugin-cesium": "1.2.22",
+    "vite-plugin-cesium": "1.2.23",
     "vite-plugin-dts": "3.8.1",
     "vite-plugin-svgr": "4.2.0",
     "vite-tsconfig-paths": "^4.3.2",

package/src/Map/Layers/hooks.ts

@@ -52,6 +52,7 @@ export type Ref = {
   override: (id: string, layer?: (Partial<Layer> & { property?: any }) | null) => void;
   deleteLayer: (...ids: string[]) => void;
   isLayer: (obj: any) => obj is LazyLayer;
+  isComputedLayer: (obj: any) => obj is ComputedLayer;
   layers: () => LazyLayer[];
   walk: <T>(
     fn: (layer: LazyLayer, index: number, parents: LazyLayer[]) => T | void,
@@ -455,6 +456,13 @@ export default function useHooks({
     [lazyLayerPrototype],
   );
 
+  const isComputedLayer = useCallback(
+    (obj: any): obj is ComputedLayer => {
+      return typeof obj === "object" && Object.getPrototypeOf(obj) === lazyComputedLayerPrototype;
+    },
+    [lazyComputedLayerPrototype],
+  );
+
   const rootLayers = useCallback(() => {
     return [...(layersRef() ?? []), ...tempLayersRef.current]
       .map(l => findById(l.id))
@@ -551,6 +559,7 @@ export default function useHooks({
       deleteLayer,
       findByIds,
       isLayer,
+      isComputedLayer,
       layers: rootLayers,
       walk,
       find,
@@ -575,6 +584,7 @@ export default function useHooks({
       deleteLayer,
       findByIds,
       isLayer,
+      isComputedLayer,
       rootLayers,
       walk,
       find,

package/src/Map/Sketch/hooks.ts

@@ -24,15 +24,16 @@ import {
   MouseEventProps,
   SketchRef,
 } from "../types";
+import { useGet } from "../utils";
 
-import { PRESET_APPEARANCE } from "./preset";
+import { PRESET_APPEARANCE, PRESET_COLOR } from "./preset";
 import { Position3d, createSketchMachine } from "./sketchMachine";
 import {
   GeometryOptionsXYZ,
   SketchType,
   SketchFeature,
-  SketchAppearance,
   SketchEventProps,
+  SketchOptions,
 } from "./types";
 import { useWindowEvent } from "./utils";
 
@@ -73,16 +74,25 @@ export default function useHooks({
   const [state, send] = useMachine(sketchMachine);
   const [type, updateType] = useState<SketchType | undefined>();
   const [from, updateFrom] = useState<"editor" | "plugin">("editor");
-  const [color, updateColor] = useState<string>();
-  const [disableShadow, updateDisableShadow] = useState(false);
-  const [enableRelativeHeight, updateEnableRelativeHeight] = useState(false);
   const [disableInteraction, setDisableInteraction] = useState(false);
-  const [defaultAppearance, updateDefaultAppearance] = useState<SketchAppearance | undefined>(
-    PRESET_APPEARANCE,
-  );
-  const createDataOnlyForPluginEnabledRef = useRef(false);
-  const allowRightClickToAbortEnabledRef = useRef(true);
-  const allowAutoResetInteractionModeRef = useRef(true);
+
+  const [sketchOptions, setSketchOptions] = useState<SketchOptions>({
+    color: PRESET_COLOR,
+    appearance: PRESET_APPEARANCE,
+    dataOnly: false,
+    disableShadow: false,
+    enableRelativeHeight: false,
+    rightClickToAbort: true,
+    autoResetInteractionMode: true,
+  });
+
+  const overrideOptions = useCallback((options: SketchOptions) => {
+    setSketchOptions(prev => ({
+      ...prev,
+      ...options,
+      appearance: merge(cloneDeep(prev.appearance), options.appearance),
+    }));
+  }, []);
 
   const [geometryOptions, setGeometryOptions] = useState<GeometryOptionsXYZ | null>(null);
   const [extrudedHeight, setExtrudedHeight] = useState(0);
@@ -94,34 +104,6 @@ export default function useHooks({
     updateFrom(from ?? "editor");
   }, []);
 
-  const setColor = useCallback((color: string) => {
-    updateColor(color);
-  }, []);
-
-  const setDisableShadow = useCallback((disable: boolean) => {
-    updateDisableShadow(!!disable);
-  }, []);
-
-  const setEnableRelativeHeight = useCallback((enable: boolean) => {
-    updateEnableRelativeHeight(!!enable);
-  }, []);
-
-  const setDefaultAppearance = useCallback((appearance: SketchAppearance) => {
-    updateDefaultAppearance(merge(cloneDeep(PRESET_APPEARANCE), appearance));
-  }, []);
-
-  const createDataOnly = useCallback((dataOnly: boolean) => {
-    createDataOnlyForPluginEnabledRef.current = !!dataOnly;
-  }, []);
-
-  const allowRightClickToAbort = useCallback((allow: boolean) => {
-    allowRightClickToAbortEnabledRef.current = !!allow;
-  }, []);
-
-  const allowAutoResetInteractionMode = useCallback((allow: boolean) => {
-    allowAutoResetInteractionModeRef.current = !!allow;
-  }, []);
-
   const createFeature = useCallback(() => {
     const geoOptions = type === "marker" ? markerGeometryRef.current : geometryOptions;
     if (geoOptions == null) {
@@ -169,11 +151,11 @@ export default function useHooks({
             features: [{ ...feature, id: feature.properties.id }],
           },
         },
-        ...defaultAppearance,
+        ...sketchOptions.appearance,
       });
       return { layerId: newLayer?.id, featureId: feature.properties.id };
     },
-    [layersRef, defaultAppearance],
+    [layersRef, sketchOptions.appearance],
   );
 
   const pluginSketchLayerFeatureAdd = useCallback(
@@ -220,13 +202,16 @@ export default function useHooks({
 
   const handleFeatureCreate = useCallback(
     (feature: SketchFeature) => {
-      updateType(undefined);
+      if (sketchOptions.autoResetInteractionMode) {
+        updateType(undefined);
+      }
+
       if (from === "editor") {
         onSketchFeatureCreate?.(feature);
         return;
       }
 
-      if (!createDataOnlyForPluginEnabledRef.current) {
+      if (!sketchOptions.dataOnly) {
         const selectedLayer = layersRef.current?.selectedLayer();
         const { layerId, featureId } =
           selectedLayer?.id?.length !== PLUGIN_LAYER_ID_LENGTH ||
@@ -262,6 +247,8 @@ export default function useHooks({
     [
       layersRef,
       from,
+      sketchOptions.dataOnly,
+      sketchOptions.autoResetInteractionMode,
       pluginSketchLayerCreate,
       pluginSketchLayerFeatureAdd,
       onSketchFeatureCreate,
@@ -481,7 +468,7 @@ export default function useHooks({
   );
 
   const handleRightClick = useCallback(() => {
-    if (!allowRightClickToAbortEnabledRef.current) {
+    if (!sketchOptions.rightClickToAbort) {
       return;
     }
     if (type !== undefined) {
@@ -490,7 +477,7 @@ export default function useHooks({
     if (state.matches("idle")) return;
     send({ type: "ABORT" });
     updateGeometryOptions(undefined);
-  }, [type, state, send, updateGeometryOptions]);
+  }, [type, state, sketchOptions.rightClickToAbort, send, updateGeometryOptions]);
 
   const mouseDownEventRef = useRef<MouseEventCallback>(handleLeftDown);
   mouseDownEventRef.current = handleLeftDown;
@@ -583,47 +570,40 @@ export default function useHooks({
     }
   }, [type, send, updateGeometryOptions]);
 
+  const fromRef = useRef(from);
+  fromRef.current = from;
+  const overrideInteractionModeRef = useRef(overrideInteractionMode);
+  overrideInteractionModeRef.current = overrideInteractionMode;
+  const onSketchTypeChangeRef = useRef(onSketchTypeChange);
+  onSketchTypeChangeRef.current = onSketchTypeChange;
+
   useEffect(() => {
-    if (type) {
-      overrideInteractionMode?.("sketch");
-    } else if (allowAutoResetInteractionModeRef.current) {
-      overrideInteractionMode?.("default");
-    }
+    overrideInteractionModeRef.current?.(type ? "sketch" : "default");
+    onSketchTypeChangeRef.current?.(type, fromRef.current);
+  }, [type]);
 
-    onSketchTypeChange?.(type, from);
-  }, [type, from, overrideInteractionMode, onSketchTypeChange]);
+  // API
+  const getType = useGet(type);
+  const getOptions = useGet(sketchOptions);
 
   useImperativeHandle(
     ref,
     () => ({
+      getType,
       setType,
-      setColor,
-      setDefaultAppearance,
-      createDataOnly,
-      disableShadow: setDisableShadow,
-      enableRelativeHeight: setEnableRelativeHeight,
-      allowRightClickToAbort,
-      allowAutoResetInteractionMode,
+      getOptions,
+      overrideOptions,
     }),
-    [
-      setType,
-      setColor,
-      setDisableShadow,
-      setEnableRelativeHeight,
-      setDefaultAppearance,
-      createDataOnly,
-      allowRightClickToAbort,
-      allowAutoResetInteractionMode,
-    ],
+    [getType, setType, getOptions, overrideOptions],
   );
 
   return {
     state,
     extrudedHeight,
     geometryOptions,
-    color,
-    disableShadow,
-    enableRelativeHeight,
+    color: sketchOptions.color,
+    disableShadow: sketchOptions.disableShadow,
+    enableRelativeHeight: sketchOptions.enableRelativeHeight,
   } as any;
 }
 

package/src/Map/Sketch/index.tsx

@@ -1,38 +1,16 @@
 // Reference: Sketch feature is basically referenced from https://github.com/takram-design-engineering/plateau-view/blob/main/libs/sketch/src/SketchTool.tsx
 
-import { type LineString, type MultiPolygon, type Polygon } from "geojson";
-import { ComponentType, ForwardRefRenderFunction, RefObject, forwardRef } from "react";
-import { RequireExactlyOne } from "type-fest";
+import { ForwardRefRenderFunction, RefObject, forwardRef } from "react";
 
 import { ComputedLayer, SelectedFeatureInfo } from "../../mantle";
-import { Position3d } from "../../types";
 import { InteractionModeType } from "../../Visualizer/interactionMode";
 import { EngineRef, Feature, LayerSelectionReason, LayersRef, SketchRef } from "../types";
 
 import useHooks from "./hooks";
-import { SketchEventProps, SketchFeature, SketchType } from "./types";
+import { SketchComponentType, SketchEventProps, SketchFeature, SketchType } from "./types";
 
 export * from "./types";
 
-export type SketchComponentType = ComponentType<SketchComponentProps>;
-
-type GeometryOptions = {
-  type: SketchType;
-  controlPoints: readonly Position3d[];
-};
-
-type SketchComponentProps = RequireExactlyOne<
-  {
-    geometry?: LineString | Polygon | MultiPolygon | null;
-    geometryOptions?: GeometryOptions | null;
-    extrudedHeight?: number;
-    disableShadow?: boolean;
-    enableRelativeHeight?: boolean;
-    color?: string;
-  },
-  "geometry" | "geometryOptions"
->;
-
 export type OnLayerSelectType = (
   layerId: string | undefined,
   featureId: string | undefined,

package/src/Map/Sketch/preset.ts

@@ -27,3 +27,5 @@ export const PRESET_APPEARANCE: SketchAppearance = {
     strokeWidth: 2,
   },
 };
+
+export const PRESET_COLOR: string = "#FFFFFF";

package/src/Map/Sketch/types.ts

@@ -1,8 +1,29 @@
 import { Feature as GeojsonFeature, MultiPolygon, Polygon, Point, LineString } from "geojson";
+import { ComponentType } from "react";
+import { RequireExactlyOne } from "type-fest";
 
 import { LayerAppearanceTypes } from "../../mantle";
 import { Position3d } from "../../types";
 
+type GeometryOptions = {
+  type: SketchType;
+  controlPoints: readonly Position3d[];
+};
+
+type SketchComponentProps = RequireExactlyOne<
+  {
+    geometry?: LineString | Polygon | MultiPolygon | null;
+    geometryOptions?: GeometryOptions | null;
+    extrudedHeight?: number;
+    disableShadow?: boolean;
+    enableRelativeHeight?: boolean;
+    color?: string;
+  },
+  "geometry" | "geometryOptions"
+>;
+
+export type SketchComponentType = ComponentType<SketchComponentProps>;
+
 export type SketchType =
   | "marker"
   | "polyline"
@@ -13,6 +34,16 @@ export type SketchType =
   | "extrudedRectangle"
   | "extrudedPolygon";
 
+export type SketchOptions = {
+  color?: string;
+  appearance?: SketchAppearance;
+  dataOnly?: boolean;
+  disableShadow?: boolean;
+  enableRelativeHeight?: boolean;
+  rightClickToAbort?: boolean;
+  autoResetInteractionMode?: boolean;
+};
+
 export type GeometryOptionsXYZ = {
   type: SketchType;
   controlPoints: Position3d[];

package/src/Map/ref.ts

@@ -103,6 +103,7 @@ const layersRefKeys: FunctionKeys<LayersRef> = {
   findByTags: 1,
   hide: 1,
   isLayer: 1,
+  isComputedLayer: 1,
   layers: 1,
   override: 1,
   replace: 1,
@@ -117,14 +118,10 @@ const layersRefKeys: FunctionKeys<LayersRef> = {
 };
 
 const sketchRefKeys: FunctionKeys<SketchRef> = {
+  getType: 1,
   setType: 1,
-  setColor: 1,
-  setDefaultAppearance: 1,
-  createDataOnly: 1,
-  disableShadow: 1,
-  enableRelativeHeight: 1,
-  allowRightClickToAbort: 1,
-  allowAutoResetInteractionMode: 1,
+  getOptions: 1,
+  overrideOptions: 1,
 };
 
 export function mapRef({