@reearth/core 0.0.7-alpha.6 → 0.0.7-alpha.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reearth/core",
-  "version": "0.0.7-alpha.6",
+  "version": "0.0.7-alpha.60",
   "author": "Re:Earth contributors <community@reearth.io>",
   "license": "Apache-2.0",
   "description": "A library that abstracts a map engine as one common API.",
@@ -21,101 +21,115 @@
     "storybook": "storybook dev -p 6007",
     "build-storybook": "storybook build",
     "preversion": "yarn test run",
-    "version": "yarn build"
+    "version": "yarn build",
+    "sketch-typegen": "xstate typegen src/**/sketchMachine.ts"
   },
   "engines": {
     "node": ">=20"
   },
   "peerDependencies": {
-    "cesium": "1.x",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "cesium": "1.118.x",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "dependencies": {
-    "@reearth/cesium-mvt-imagery-provider": "1.5.4",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-icons": "^1.3.2",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@reearth/cesium-mvt-imagery-provider": "1.6.2",
+    "@reearth/spatial-id-sdk": "0.0.0",
     "@rot1024/use-transition": "1.0.0",
     "@seznam/compose-react-refs": "1.0.6",
-    "@turf/invariant": "6.5.0",
-    "@turf/turf": "6.5.0",
-    "@types/proj4": "2.5.5",
+    "@turf/invariant": "^7.3.3",
+    "@turf/turf": "^7.3.3",
     "@ungap/event-target": "0.2.4",
-    "@xstate/react": "3.2.1",
+    "@xstate/react": "^6.1.0",
     "cesium-dnd": "1.1.0",
-    "csv-parse": "5.5.2",
-    "d3": "7.9.0",
-    "fast-xml-parser": "4.3.2",
-    "framer-motion": "11.0.27",
+    "csv-parse": "^6.1.0",
+    "d3": "^7.9.0",
+    "fast-xml-parser": "^5.3.3",
+    "framer-motion": "^12.29.2",
     "geojson": "0.5.0",
-    "jotai": "1.12.1",
-    "js-md5": "0.7.3",
-    "jsep": "1.3.8",
-    "jsonpath-plus": "7.2.0",
-    "jszip": "3.10.1",
-    "lodash-es": "4.17.21",
-    "lru-cache": "8.0.4",
-    "pbf": "3.2.1",
-    "proj4": "2.11.0",
-    "protomaps": "1.23.1",
+    "jotai": "^2.18.0",
+    "js-md5": "^0.8.3",
+    "jsep": "^1.4.0",
+    "jsonpath-plus": "^10.3.0",
+    "jszip": "^3.10.1",
+    "lodash-es": "^4.17.23",
+    "lru-cache": "^11.2.5",
+    "pbf": "^4.0.1",
+    "proj4": "^2.20.2",
+    "protomaps-leaflet": "^5.1.0",
     "react-dnd": "16.0.1",
     "react-dnd-html5-backend": "16.0.1",
-    "react-error-boundary": "4.0.11",
+    "react-error-boundary": "^6.1.0",
     "react-nl2br": "1.0.4",
-    "react-use": "17.5.0",
-    "resium": "^1.18.0",
+    "react-use": "^17.6.0",
+    "resium": "^1.19.3",
     "suspend-react": "0.1.3",
+    "tailwind-merge": "^3.5.0",
+    "tailwindcss": "^4.2.1",
+    "tailwindcss-animate": "^1.0.7",
     "tiny-invariant": "1.3.3",
-    "use-callback-ref": "1.3.2",
-    "use-custom-compare": "1.4.0",
-    "uuid": "9.0.1",
-    "xstate": "4.38.2"
+    "use-callback-ref": "1.3.3",
+    "use-custom-compare": "1.5.0",
+    "uuid": "^13.0.0",
+    "xstate": "^5.28.0"
   },
   "devDependencies": {
-    "@apollo/client": "3.8.1",
-    "@chromatic-com/storybook": "^1.3.3",
-    "@emotion/jest": "11.11.0",
-    "@storybook/addon-essentials": "8.0.8",
-    "@storybook/addon-interactions": "8.0.8",
-    "@storybook/addon-links": "8.0.8",
-    "@storybook/addon-onboarding": "8.0.8",
-    "@storybook/blocks": "8.0.8",
-    "@storybook/react": "8.0.8",
-    "@storybook/react-vite": "8.0.8",
-    "@storybook/test": "8.0.8",
-    "@testing-library/jest-dom": "6.1.4",
-    "@testing-library/react": "14.0.0",
-    "@types/d3": "7.4.3",
-    "@types/geojson": "7946.0.14",
-    "@types/js-md5": "0.7.2",
-    "@types/lodash-es": "4.17.12",
-    "@types/node": "20.12.7",
-    "@types/pbf": "3.0.5",
-    "@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.118.0",
+    "@apollo/client": "^4.1.2",
+    "@chromatic-com/storybook": "^5.0.0",
+    "@emotion/jest": "^11.14.2",
+    "@storybook/addon-docs": "^10.2.3",
+    "@storybook/addon-links": "^10.2.3",
+    "@storybook/addon-onboarding": "^10.2.3",
+    "@storybook/react": "^10.2.3",
+    "@storybook/react-vite": "^10.2.3",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/d3": "^7.4.3",
+    "@types/geojson": "^7946.0.16",
+    "@types/js-md5": "^0.8.0",
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "^25.0.10",
+    "@types/pbf": "^3.0.5",
+    "@types/react": "^19.2.10",
+    "@types/react-dom": "^19.2.3",
+    "@types/scheduler": "^0.26.0",
+    "@vitejs/plugin-react": "^5.1.2",
+    "@xstate/cli": "0.5.17",
+    "@tailwindcss/postcss": "^4.2.1",
+    "autoprefixer": "^10.4.23",
+    "cesium": "^1.137.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "eslint": "8.57.0",
     "eslint-config-reearth": "0.3.0",
-    "eslint-plugin-react-hooks": "4.6.0",
-    "eslint-plugin-react-refresh": "0.4.6",
-    "eslint-plugin-storybook": "0.8.0",
-    "jsdom": "22.1.0",
-    "prettier": "3.2.5",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "storybook": "8.0.8",
-    "typescript": "5.2.2",
-    "vite": "5.0.8",
-    "vite-plugin-cesium": "1.2.22",
-    "vite-plugin-dts": "3.8.1",
-    "vite-plugin-svgr": "4.2.0",
-    "vite-tsconfig-paths": "^4.3.2",
-    "vitest": "1.0.4",
-    "web-streams-polyfill": "3.2.1"
+    "eslint-plugin-storybook": "^10.2.3",
+    "jsdom": "^28.1.0",
+    "postcss": "^8.5.6",
+    "prettier": "^3.8.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "storybook": "^10.2.3",
+    "type-fest": "^5.4.2",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "vite-plugin-cesium": "1.2.23",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-svgr": "4.5.0",
+    "vite-tsconfig-paths": "^6.0.5",
+    "vitest": "^4.0.18",
+    "web-streams-polyfill": "^4.2.0"
   },
   "resolutions": {
-    "jackspeak": "2.1.1"
+    "jackspeak": "3.1.2"
   }
 }

package/src/Map/ClusteredLayers/index.tsx

@@ -1,4 +1,4 @@
-import { ComponentType, useMemo, useCallback, ReactNode } from "react";
+import { ComponentType, useMemo, useCallback, ReactNode, type JSX } from "react";
 
 import LayerComponent, { type CommonProps, type Props as LayerProps } from "../Layer";
 import type { Layer, Atom, Typography, DataType, ViewerProperty } from "../types";

package/src/Map/Geoid/index.tsx

@@ -0,0 +1,68 @@
+import {
+  forwardRef,
+  ForwardRefRenderFunction,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+} from "react";
+
+import { GeoidServer, GeoidRef } from "./types";
+
+export type GeoidProps = {
+  geoidServer?: GeoidServer;
+};
+
+const MAX_GEOID_CACHE_SIZE = 1000;
+
+const Geoid: ForwardRefRenderFunction<GeoidRef, GeoidProps> = ({ geoidServer }, ref) => {
+  const geoidCache = useRef<Map<string, number>>(new Map());
+
+  const getGeoidHeight = useCallback(
+    async (lng?: number, lat?: number): Promise<number | undefined> => {
+      if (!geoidServer?.url || !geoidServer?.geoidProperty) {
+        console.error("Geoid: Server is not set properly");
+        return Promise.resolve(undefined);
+      }
+
+      if (lat === undefined || lng === undefined) {
+        console.error("Geoid: Invalid lat or lng");
+        return Promise.resolve(undefined);
+      }
+
+      const cache = geoidCache.current.get(`${lng},${lat}`);
+      if (cache) return Promise.resolve(cache);
+
+      return fetch(
+        geoidServer.url.replace("${lng}", lng.toString()).replace("${lat}", lat.toString()),
+      )
+        .then(res => {
+          return res.json().then((result: any) => {
+            if (!result) return undefined;
+            const geoid = Number(result[geoidServer?.geoidProperty]);
+            if (!isNaN(geoid)) {
+              const cache = geoidCache.current;
+              if (cache.size > MAX_GEOID_CACHE_SIZE) {
+                const firstKey = cache.keys().next().value;
+                if (firstKey) cache.delete(firstKey);
+              }
+              cache.set(`${lng},${lat}`, geoid);
+              return geoid;
+            }
+            return undefined;
+          });
+        })
+        .catch(e => {
+          console.error("Failed to fetch geoid height", e);
+          return undefined;
+        });
+    },
+    [geoidServer?.url, geoidServer?.geoidProperty],
+  );
+
+  useImperativeHandle(ref, () => ({
+    getGeoidHeight,
+  }));
+  return null;
+};
+
+export default forwardRef(Geoid);

package/src/Map/Geoid/types.ts

@@ -0,0 +1,8 @@
+export type GeoidServer = {
+  url: string; // URL of the geoid server. use ${lat} ${lng} for lat/lng placeholders. Example: "https://mock.com/api/altitude?lat=${lat}&lng=${lng}"
+  geoidProperty: string; // TODO: support json path
+};
+
+export type GeoidRef = {
+  getGeoidHeight: (lat?: number, lng?: number) => Promise<number | undefined>;
+};

package/src/Map/Layer/hooks.ts

@@ -90,7 +90,7 @@ export default function useHooks({
     });
   }, [layer, set]);
 
-  const intervalId = useRef<number>();
+  const intervalId = useRef<number>(undefined);
   useLayoutEffect(() => {
     const data = layer?.type === "simple" ? layer.data : undefined;
 
@@ -107,12 +107,15 @@ export default function useHooks({
     };
   }, [layer, forceUpdateFeatures]);
 
-  const prevForceUpdatableData = useRef<Pick<Data, "csv" | "jsonProperties">>();
+  const prevForceUpdatableData = useRef<Pick<Data, "csv" | "jsonProperties" | "value">>(undefined);
   useLayoutEffect(() => {
     const data = layer?.type === "simple" ? layer.data : undefined;
-    const forceUpdatableData = pick(data, "csv", "jsonProperties");
+    const forceUpdatableData = pick(data, "csv", "jsonProperties", "value");
 
-    if (isEqual(forceUpdatableData, prevForceUpdatableData.current) || !data?.url) {
+    if (
+      isEqual(forceUpdatableData, prevForceUpdatableData.current) ||
+      (!data?.url && !data?.value)
+    ) {
       return;
     }
 

package/src/Map/Layer/index.tsx

@@ -1,4 +1,4 @@
-import { ComponentType } from "react";
+import { ComponentType, type JSX } from "react";
 
 import type {
   DataRange,
@@ -9,6 +9,7 @@ import type {
   ComputedFeature,
   LayerSimple,
 } from "../../mantle";
+import { SketchEditingFeature } from "../Sketch";
 import { ViewerProperty } from "../types";
 
 import useHooks, { type Atom, type EvalFeature } from "./hooks";
@@ -25,6 +26,7 @@ export type CommonProps = {
   isHidden?: boolean;
   isSelected?: boolean;
   meta?: Record<string, unknown>;
+  sketchEditingFeature?: SketchEditingFeature;
 };
 
 export type FeatureComponentProps = {

package/src/Map/Layers/hooks.ts

@@ -35,6 +35,7 @@ export type { Layer, NaiveLayer } from "../../mantle";
  */
 export type LazyLayer = Readonly<Layer> & {
   computed?: Readonly<ComputedLayer>;
+  isTempLayer?: boolean;
   // compat
   pluginId?: string;
   extensionId?: string;
@@ -53,6 +54,7 @@ export type Ref = {
   deleteLayer: (...ids: string[]) => void;
   isLayer: (obj: any) => obj is LazyLayer;
   isComputedLayer: (obj: any) => obj is ComputedLayer;
+  isTempLayer: (layerId?: string) => boolean;
   layers: () => LazyLayer[];
   walk: <T>(
     fn: (layer: LazyLayer, index: number, parents: LazyLayer[]) => T | void,
@@ -119,6 +121,7 @@ export default function useHooks({
   requestingRenderMode,
   onLayerSelect,
   engineRef,
+  onMount,
 }: {
   layers?: Layer[];
   ref?: ForwardedRef<Ref>;
@@ -136,7 +139,8 @@ export default function useHooks({
     reason: LayerSelectionReason | undefined,
     info: SelectedFeatureInfo | undefined,
   ) => void;
-  engineRef?: RefObject<EngineRef>;
+  engineRef?: RefObject<EngineRef | null>;
+  onMount?: () => void;
 }) {
   const layerMap = useMemo(() => new Map<string, Layer>(), []);
   const [overriddenLayers, setOverridenLayers] = useState<OverriddenLayer[]>([]);
@@ -149,11 +153,21 @@ export default function useHooks({
     [hiddenLayerIds, hiddenLayers],
   );
 
-  const layersRef = useGet(layers);
+  const derivedLayers = useMemo(() => {
+    return layers?.map(l => {
+      const hidden = isHidden?.(l.id);
+      return {
+        ...l,
+        visible: hidden ? !hidden : l.visible,
+      };
+    });
+  }, [isHidden, layers]);
+
+  const layersRef = useGet(derivedLayers);
   const [tempLayers, setTempLayers] = useState<Layer[]>([]);
   const tempLayersRef = useRef<Layer[]>([]);
   const flattenedLayers = useMemo((): Layer[] => {
-    const newLayers = [...flattenLayers(layers ?? []), ...flattenLayers(tempLayers)];
+    const newLayers = [...flattenLayers(derivedLayers ?? []), ...flattenLayers(tempLayers)];
     // apply overrides
     return newLayers.map(l => {
       const ol: any = overriddenLayers.find(ll => ll.id === l.id);
@@ -175,7 +189,7 @@ export default function useHooks({
 
       return res;
     });
-  }, [tempLayers, layers, overriddenLayers]);
+  }, [derivedLayers, tempLayers, overriddenLayers]);
 
   const getComputedLayer = useAtomValue(
     useMemo(
@@ -456,6 +470,13 @@ export default function useHooks({
     [lazyLayerPrototype],
   );
 
+  const isTempLayer = useCallback(
+    (layerId?: string) => {
+      return tempLayersRef.current.some(l => l.id === layerId);
+    },
+    [tempLayersRef],
+  );
+
   const isComputedLayer = useCallback(
     (obj: any): obj is ComputedLayer => {
       return typeof obj === "object" && Object.getPrototypeOf(obj) === lazyComputedLayerPrototype;
@@ -560,6 +581,7 @@ export default function useHooks({
       findByIds,
       isLayer,
       isComputedLayer,
+      isTempLayer,
       layers: rootLayers,
       walk,
       find,
@@ -585,6 +607,7 @@ export default function useHooks({
       findByIds,
       isLayer,
       isComputedLayer,
+      isTempLayer,
       rootLayers,
       walk,
       find,
@@ -602,11 +625,15 @@ export default function useHooks({
     ],
   );
 
+  useEffect(() => {
+    onMount?.();
+  }, [onMount]);
+
   const prevLayers = useRef<Layer[] | undefined>([]);
   useLayoutEffect(() => {
     const ids = new Set<string>();
 
-    walkLayers(layers ?? [], l => {
+    walkLayers(derivedLayers ?? [], l => {
       ids.add(l.id);
       if (!atomMap.has(l.id)) {
         atomMap.set(l.id, computeAtom());
@@ -626,8 +653,8 @@ export default function useHooks({
     overriddenLayersRef.current = updated;
     setOverridenLayers(updated);
 
-    prevLayers.current = layers;
-  }, [atomMap, layers, layerMap, lazyLayerMap, setOverridenLayers, showLayer]);
+    prevLayers.current = derivedLayers;
+  }, [atomMap, layerMap, lazyLayerMap, setOverridenLayers, showLayer, derivedLayers]);
 
   useEffect(() => {
     if (!requestingRenderMode || requestingRenderMode.current === FORCE_REQUEST_RENDER) return;
@@ -734,7 +761,7 @@ function useSelection({
     reason: LayerSelectionReason | undefined,
     info: SelectedFeatureInfo | undefined,
   ) => void;
-  engineRef?: RefObject<EngineRef>;
+  engineRef?: RefObject<EngineRef | null>;
   updateStyle: (layerId: string) => void;
 }) {
   const [selectedLayer, selectedComputedFeature]: SelectedLayer = useMemo(

package/src/Map/Layers/index.tsx

@@ -38,7 +38,7 @@ export type Props = Omit<ClusteredLayerProps, "atomMap" | "isHidden" | "selected
   hiddenLayers?: string[];
   viewerProperty?: ViewerProperty;
   requestingRenderMode?: MutableRefObject<RequestingRenderMode>;
-  engineRef?: RefObject<EngineRef>;
+  engineRef?: RefObject<EngineRef | null>;
   onLayerSelect?: (
     layerId: string | undefined,
     featureId: string | undefined,
@@ -46,10 +46,20 @@ export type Props = Omit<ClusteredLayerProps, "atomMap" | "isHidden" | "selected
     reason: LayerSelectionReason | undefined,
     info: SelectedFeatureInfo | undefined,
   ) => void;
+  onMount?: () => void;
 };
 
 const Layers: ForwardRefRenderFunction<Ref, Props> = (
-  { layers, selectedLayer, hiddenLayers, requestingRenderMode, engineRef, onLayerSelect, ...props },
+  {
+    layers,
+    selectedLayer,
+    hiddenLayers,
+    requestingRenderMode,
+    engineRef,
+    onLayerSelect,
+    onMount,
+    ...props
+  },
   ref,
 ) => {
   const { atomMap, flattenedLayers, isHidden } = useHooks({
@@ -60,6 +70,7 @@ const Layers: ForwardRefRenderFunction<Ref, Props> = (
     requestingRenderMode,
     engineRef,
     onLayerSelect,
+    onMount,
   });
 
   return (

package/src/Map/Layers/keys.ts

@@ -18,6 +18,7 @@ export const layerKeys = objKeys<
   computed: 1,
   defines: 1,
   layerStyleId: 1,
+  isTempLayer: 1,
   // appearance
   ...appearanceKeyObj,
   // legacy layer