@reearth/core 0.0.1

package/package.json

@@ -0,0 +1,115 @@
+{
+  "name": "@reearth/core",
+  "version": "0.0.1",
+  "author": "Re:Earth contributors <community@reearth.io>",
+  "license": "Apache-2.0",
+  "description": "A library that abstracts a map engine as one common API.",
+  "type": "module",
+  "main": "dist/core.umd.cjs",
+  "module": "dist/core.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "test": "vitest",
+    "storybook": "storybook dev -p 6007",
+    "build-storybook": "storybook build"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "dependencies": {
+    "@reearth/cesium-mvt-imagery-provider": "1.5.4",
+    "@rot1024/use-transition": "1.0.0",
+    "@seznam/compose-react-refs": "1.0.6",
+    "@turf/invariant": "6.5.0",
+    "@turf/turf": "6.5.0",
+    "@ungap/event-target": "0.2.4",
+    "@xstate/react": "3.2.1",
+    "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",
+    "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",
+    "protomaps": "1.23.1",
+    "react-dnd": "16.0.1",
+    "react-dnd-html5-backend": "16.0.1",
+    "react-error-boundary": "4.0.11",
+    "react-nl2br": "1.0.4",
+    "react-use": "17.5.0",
+    "resium": "1.17.3",
+    "suspend-react": "0.1.3",
+    "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"
+  },
+  "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.2.6",
+    "@types/react-dom": "18.2.6",
+    "@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",
+    "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",
+    "vitest": "1.0.4",
+    "web-streams-polyfill": "3.2.1"
+  },
+  "resolutions": {
+    "jackspeak": "2.1.1"
+  }
+}

package/src/Map/ClusteredLayers/index.tsx

@@ -0,0 +1,106 @@
+import { ComponentType, useMemo, useCallback, ReactNode } from "react";
+
+import LayerComponent, { type CommonProps, type Props as LayerProps } from "../Layer";
+import type { Layer, Atom, Typography, DataType } from "../types";
+
+export type Props = {
+  layers?: Layer[];
+  atomMap?: Map<string, Atom>;
+  overrides?: Record<string, Record<string, any>>;
+  selectedLayer?: {
+    layerId?: string;
+    featureId?: string;
+  };
+  isHidden?: (id: string) => boolean;
+  clusters?: Cluster[];
+  delegatedDataTypes?: DataType[];
+  sceneProperty?: any;
+  clusterComponent?: ClusterComponentType;
+  Feature?: LayerProps["Feature"];
+} & Omit<CommonProps, "isSelected" | "isHidden" | "selectedFeatureId">;
+
+export type Cluster = {
+  id: string;
+  property?: ClusterProperty;
+  layers?: string[];
+};
+
+export type ClusterComponentProps = {
+  cluster: Cluster;
+  property?: ClusterProperty;
+  children?: ReactNode;
+};
+
+export type ClusterProperty = {
+  default?: {
+    clusterPixelRange: number;
+    clusterMinSize: number;
+    clusterLabelTypography?: Typography;
+    clusterImage?: string;
+    clusterImageHeight?: number;
+    clusterImageWidth?: number;
+  };
+  layers?: { layer?: string }[];
+};
+
+export type ClusterComponentType = ComponentType<ClusterComponentProps>;
+
+export default function ClusteredLayers({
+  clusters,
+  clusterComponent,
+  layers,
+  atomMap,
+  selectedLayer,
+  overrides,
+  delegatedDataTypes,
+  isHidden,
+  ...props
+}: Props): JSX.Element | null {
+  const Cluster = clusterComponent;
+  const clusteredLayers = useMemo<Set<string>>(
+    () => new Set(clusters?.flatMap(c => (c.layers ?? []).filter(Boolean))),
+    [clusters],
+  );
+
+  const renderLayer = useCallback(
+    (layer: Layer) => {
+      const a = atomMap?.get(layer.id);
+      return !layer.id || !a ? null : (
+        <LayerComponent
+          key={layer.id}
+          {...props}
+          layer={layer}
+          atom={a}
+          overrides={overrides?.[layer.id]}
+          isSelected={selectedLayer?.layerId == layer.id}
+          selectedFeatureId={selectedLayer?.featureId}
+          isHidden={isHidden?.(layer.id)}
+          delegatedDataTypes={delegatedDataTypes}
+        />
+      );
+    },
+    [
+      atomMap,
+      props,
+      overrides,
+      selectedLayer?.layerId,
+      selectedLayer?.featureId,
+      isHidden,
+      delegatedDataTypes,
+    ],
+  );
+
+  return (
+    <>
+      {Cluster &&
+        clusters
+          ?.filter(cluster => !!cluster.id)
+          .map(cluster => (
+            <Cluster key={cluster.id} cluster={cluster} property={cluster.property}>
+              {layers?.filter(layer => cluster?.layers?.some(l => l === layer.id)).map(renderLayer)}
+            </Cluster>
+          ))}
+      {layers?.filter(layer => !clusteredLayers.has(layer.id)).map(renderLayer)}
+    </>
+  );
+}

package/src/Map/Layer/hooks.ts

@@ -0,0 +1,180 @@
+import { useAtom } from "jotai";
+import { isEqual, pick } from "lodash-es";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from "react";
+
+import {
+  clearAllExpressionCaches,
+  computeAtom,
+  DataType,
+  evalFeature,
+  type Data,
+} from "../../mantle";
+import { requestIdleCallbackWithRequiredWork } from "../../utils";
+import type {
+  Atom,
+  DataRange,
+  Layer,
+  ComputedLayer,
+  ComputedFeature,
+  Feature,
+  LayerSimple,
+} from "../types";
+
+export type { Atom as Atom } from "../types";
+
+export const createAtom = computeAtom;
+
+export type EvalFeature = (layer: Layer, feature: Feature) => ComputedFeature | undefined;
+
+export default function useHooks({
+  layer,
+  atom,
+  overrides,
+  delegatedDataTypes,
+  selected,
+  selectedFeatureId,
+}: {
+  layer: Layer | undefined;
+  atom: Atom | undefined;
+  overrides?: Record<string, any>;
+  delegatedDataTypes?: DataType[];
+  selected?: boolean;
+  selectedFeatureId?: string;
+}) {
+  const [computedLayer, set] = useAtom(useMemo(() => atom ?? createAtom(), [atom]));
+  const writeLayer = useCallback(
+    (value: Partial<Pick<LayerSimple, "properties">>) => set({ type: "writeLayer", value }),
+    [set],
+  );
+  const writeFeatures = useCallback(
+    (features: Feature[]) => set({ type: "writeFeatures", features }),
+    [set],
+  );
+  const writeComputedFeatures = useCallback(
+    (feature: Feature[], computed: ComputedFeature[]) =>
+      set({ type: "writeComputedFeatures", value: { feature, computed } }),
+    [set],
+  );
+  const requestFetch = useCallback(
+    (range: DataRange) => set({ type: "requestFetch", range }),
+    [set],
+  );
+  const deleteFeatures = useCallback(
+    (features: string[]) => set({ type: "deleteFeatures", features }),
+    [set],
+  );
+  const deleteComputedFeatures = useCallback(
+    (features: string[]) => set({ type: "deleteComputedFeatures", features }),
+    [set],
+  );
+  const forceUpdateFeatures = useCallback(() => set({ type: "forceUpdateFeatures" }), [set]);
+
+  useLayoutEffect(() => {
+    set({ type: "updateDelegatedDataTypes", delegatedDataTypes: delegatedDataTypes ?? [] });
+  }, [delegatedDataTypes, set]);
+
+  useLayoutEffect(() => {
+    set({
+      type: "override",
+      overrides,
+    });
+  }, [set, overrides]);
+
+  useLayoutEffect(() => {
+    set({
+      type: "setLayer",
+      layer:
+        typeof layer?.visible === "undefined" || layer?.type === null || layer?.type
+          ? layer
+          : undefined,
+    });
+  }, [layer, set]);
+
+  const intervalId = useRef<number>();
+  useLayoutEffect(() => {
+    const data = layer?.type === "simple" ? layer.data : undefined;
+
+    if (!data?.updateInterval || !data?.url) {
+      return;
+    }
+
+    intervalId.current = window.setInterval(forceUpdateFeatures, data.updateInterval);
+
+    return () => {
+      if (intervalId.current) {
+        clearInterval(intervalId.current);
+      }
+    };
+  }, [layer, forceUpdateFeatures]);
+
+  const prevForceUpdatableData = useRef<Pick<Data, "csv" | "jsonProperties">>();
+  useLayoutEffect(() => {
+    const data = layer?.type === "simple" ? layer.data : undefined;
+    const forceUpdatableData = pick(data, "csv", "jsonProperties");
+
+    if (isEqual(forceUpdatableData, prevForceUpdatableData.current) || !data?.url) {
+      return;
+    }
+
+    forceUpdateFeatures();
+
+    prevForceUpdatableData.current = forceUpdatableData;
+  }, [layer, forceUpdateFeatures]);
+
+  // Clear expression cache if layer is unmounted
+  useEffect(
+    () => () => {
+      requestIdleCallbackWithRequiredWork(() => {
+        // This is a little heavy task, and not critical for main functionality, so we can run this at idle time.
+        computedLayer?.originalFeatures.forEach(f => {
+          clearAllExpressionCaches(
+            computedLayer.layer.type === "simple" ? computedLayer.layer : undefined,
+            f,
+          );
+        });
+      });
+    },
+    [], // eslint-disable-line react-hooks/exhaustive-deps -- clear cache only when layer is unmounted
+  );
+
+  useSelectEvent({ layer, selected, computedLayer, selectedFeatureId });
+
+  return {
+    computedLayer,
+    handleFeatureRequest: requestFetch,
+    handleLayerFetch: writeLayer,
+    handleFeatureFetch: writeFeatures,
+    handleComputedFeatureFetch: writeComputedFeatures,
+    handleFeatureDelete: deleteFeatures,
+    handleComputedFeatureDelete: deleteComputedFeatures,
+    evalFeature,
+  };
+}
+
+function useSelectEvent({
+  layer,
+  selected,
+  computedLayer,
+  selectedFeatureId,
+}: {
+  layer: Layer | undefined;
+  selected: boolean | undefined;
+  computedLayer?: ComputedLayer;
+  selectedFeatureId?: string;
+}) {
+  const selectEvent = layer?.type === "simple" ? layer.events?.select : undefined;
+  useEffect(() => {
+    if (!selected || !selectEvent) return;
+    if (selectEvent.openUrl) {
+      const url = selectEvent.openUrl.urlKey
+        ? (selectedFeatureId
+            ? computedLayer?.features.find(f => f.id === selectedFeatureId)?.properties
+            : computedLayer?.properties)?.[selectEvent.openUrl.urlKey]
+        : selectEvent.openUrl.url;
+      if (typeof url === "string" && url) {
+        window.open(url, "_blank", "noreferrer");
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selected, selectedFeatureId]); // only selected
+}

package/src/Map/Layer/index.tsx

@@ -0,0 +1,92 @@
+import { ComponentType } from "react";
+
+import type {
+  DataRange,
+  Feature,
+  ComputedLayer,
+  Layer,
+  DataType,
+  ComputedFeature,
+  LayerSimple,
+} from "../../mantle";
+import { SceneProperty } from "../types";
+
+import useHooks, { type Atom, type EvalFeature } from "./hooks";
+
+export type { EvalFeature } from "./hooks";
+
+export type { Layer, LayerSimple, ComputedFeature } from "../types";
+
+export type FeatureComponentType = ComponentType<FeatureComponentProps>;
+
+export type CommonProps = {
+  isBuilt?: boolean;
+  isEditable?: boolean;
+  isHidden?: boolean;
+  isSelected?: boolean;
+  meta?: Record<string, unknown>;
+};
+
+export type FeatureComponentProps = {
+  layer: ComputedLayer;
+  sceneProperty?: SceneProperty;
+  onFeatureRequest?: (range: DataRange) => void;
+  onLayerFetch?: (value: Partial<Pick<LayerSimple, "properties">>) => void;
+  onFeatureFetch?: (features: Feature[]) => void;
+  onComputedFeatureFetch?: (feature: Feature[], computed: ComputedFeature[]) => void;
+  onFeatureDelete?: (features: string[]) => void;
+  onComputedFeatureDelete?: (features: string[]) => void;
+  evalFeature: EvalFeature;
+} & CommonProps;
+
+export type Props = {
+  layer?: Layer;
+  atom?: Atom;
+  overrides?: Record<string, any>;
+  delegatedDataTypes?: DataType[];
+  sceneProperty?: any;
+  selectedFeatureId?: string;
+  /** Feature component should be injected by a map engine. */
+  Feature?: ComponentType<FeatureComponentProps>;
+} & CommonProps;
+
+export default function LayerComponent({
+  Feature,
+  layer,
+  atom,
+  overrides,
+  delegatedDataTypes,
+  ...props
+}: Props): JSX.Element | null {
+  const {
+    computedLayer,
+    handleFeatureDelete,
+    handleLayerFetch,
+    handleComputedFeatureDelete,
+    handleFeatureFetch,
+    handleComputedFeatureFetch,
+    handleFeatureRequest,
+    evalFeature,
+  } = useHooks({
+    layer: Feature ? layer : undefined,
+    atom,
+    overrides,
+    delegatedDataTypes,
+    selected: props.isSelected,
+    selectedFeatureId: props.selectedFeatureId,
+  });
+
+  return layer && computedLayer && Feature ? (
+    <Feature
+      layer={computedLayer}
+      onFeatureDelete={handleFeatureDelete}
+      onComputedFeatureDelete={handleComputedFeatureDelete}
+      onLayerFetch={handleLayerFetch}
+      onFeatureFetch={handleFeatureFetch}
+      onComputedFeatureFetch={handleComputedFeatureFetch}
+      onFeatureRequest={handleFeatureRequest}
+      evalFeature={evalFeature}
+      {...props}
+    />
+  ) : null;
+}