@reearth/core 0.0.1

package/src/Map/Layers/index.test.tsx

@@ -0,0 +1,188 @@
+import { useEffect, useRef, useState } from "react";
+import { expect, test, vi } from "vitest";
+
+import { render, screen, waitFor } from "../../test/utils";
+
+import Component, { LayerSimple, Layer, FeatureComponentProps, Ref } from ".";
+
+test("simple", () => {
+  const Feature = vi.fn((_: FeatureComponentProps) => <div>Hello</div>);
+  const layers: LayerSimple[] = [
+    { id: "a", type: "simple" },
+    { id: "b", type: "simple" },
+  ];
+  const { rerender } = render(<Component layers={layers} Feature={Feature} />);
+
+  expect(screen.getAllByText("Hello")[0]).toBeVisible();
+  expect(screen.getAllByText("Hello")).toHaveLength(2);
+  expect(Feature).toBeCalledTimes(2);
+  expect(Feature.mock.calls[0][0]).toEqual({
+    isHidden: false,
+    isSelected: false,
+    layer: {
+      id: "a",
+      features: [],
+      layer: layers[0],
+      status: "ready",
+      originalFeatures: [],
+    },
+    onFeatureDelete: expect.any(Function),
+    onFeatureFetch: expect.any(Function),
+    onLayerFetch: expect.any(Function),
+    onComputedFeatureFetch: expect.any(Function),
+    onComputedFeatureDelete: expect.any(Function),
+    onFeatureRequest: expect.any(Function),
+    evalFeature: expect.any(Function),
+    properties: undefined,
+    selectedFeatureId: undefined,
+  });
+  expect(Feature.mock.calls[1][0]).toEqual({
+    isHidden: false,
+    isSelected: false,
+    layer: {
+      id: "b",
+      features: [],
+      layer: layers[1],
+      status: "ready",
+      originalFeatures: [],
+    },
+    onFeatureDelete: expect.any(Function),
+    onFeatureFetch: expect.any(Function),
+    onLayerFetch: expect.any(Function),
+    onComputedFeatureFetch: expect.any(Function),
+    onComputedFeatureDelete: expect.any(Function),
+    onFeatureRequest: expect.any(Function),
+    evalFeature: expect.any(Function),
+    properties: undefined,
+    selectedFeatureId: undefined,
+  });
+
+  Feature.mockClear();
+
+  const layers2: LayerSimple[] = [{ id: "c", type: "simple" }];
+  rerender(<Component layers={layers2} Feature={Feature} />);
+  expect(screen.getByText("Hello")).toBeVisible();
+  expect(Feature.mock.calls[0][0].layer).toEqual({
+    id: "c",
+    features: [],
+    layer: layers2[0],
+    status: "ready",
+    originalFeatures: [],
+  });
+});
+
+test("tree", () => {
+  const Feature = vi.fn((_: FeatureComponentProps) => null);
+  const layers: Layer[] = [
+    {
+      id: "a",
+      type: "group",
+      children: [
+        { id: "b", type: "simple", visible: true },
+        { id: "c", type: "group", children: [] },
+      ],
+    },
+  ];
+  render(<Component layers={layers} Feature={Feature} />);
+
+  expect(Feature).toBeCalledTimes(1);
+  expect(Feature.mock.calls[0][0].layer).toEqual({
+    id: "b",
+    features: [],
+    layer: { id: "b", type: "simple", visible: true },
+    status: "ready",
+    originalFeatures: [],
+  });
+});
+
+test("ref", async () => {
+  const Feature = vi.fn((_: FeatureComponentProps) => null);
+
+  function Comp({ del, replace }: { del?: boolean; replace?: boolean }) {
+    const ref = useRef<Ref>(null);
+    const layerId = useRef("");
+    const [s, ss] = useState("");
+
+    useEffect(() => {
+      if (del) {
+        ref.current?.deleteLayer(layerId.current);
+        ss(ref.current?.findById(layerId.current)?.title ?? "");
+      } else if (replace) {
+        ref.current?.replace({ id: layerId.current, type: "simple", title: "A" });
+        ss(ref.current?.findById(layerId.current)?.title ?? "");
+      } else {
+        const newLayer = ref.current?.add({ type: "simple", title: "a", visible: true });
+        layerId.current = newLayer?.id ?? "";
+        ss(newLayer?.title ?? "");
+      }
+    }, [del, replace]);
+
+    return (
+      <>
+        <Component ref={ref} Feature={Feature} />
+        <p data-testid="layer">{s}</p>
+      </>
+    );
+  }
+
+  const { rerender } = render(<Comp />);
+
+  await waitFor(() => expect(screen.getByTestId("layer")).toHaveTextContent("a"));
+
+  expect(Feature).toBeCalledTimes(1);
+  expect(Feature.mock.calls[0][0].layer).toEqual({
+    id: expect.any(String),
+    features: [],
+    layer: { id: expect.any(String), type: "simple", title: "a", visible: true },
+    status: "ready",
+    originalFeatures: [],
+  });
+
+  rerender(<Comp replace />);
+
+  await waitFor(() => expect(screen.getByTestId("layer")).toHaveTextContent("A"));
+
+  rerender(<Comp del />);
+
+  await waitFor(() => expect(screen.getByTestId("layer")).toBeEmptyDOMElement());
+});
+
+test("computed", async () => {
+  const layers: Layer[] = [
+    {
+      id: "x",
+      type: "simple",
+      visible: true,
+      data: {
+        type: "geojson",
+        value: {
+          type: "Feature",
+          geometry: {
+            type: "Point",
+            coordinates: [0, 1],
+          },
+        },
+      },
+      properties: {},
+      marker: {
+        pointColor: "red",
+      },
+    },
+  ];
+
+  const Feature = (_: FeatureComponentProps) => null;
+
+  function Comp({ layers }: { layers?: Layer[] }) {
+    const ref = useRef<Ref>(null);
+    return (
+      <>
+        <Component layers={layers} ref={ref} Feature={Feature} />
+        <p data-testid="layer">{ref.current?.findById("x")?.computed?.id}</p>
+      </>
+    );
+  }
+
+  const { rerender } = render(<Comp layers={layers} />);
+  rerender(<Comp layers={layers} />);
+  await waitFor(() => expect(screen.getByTestId("layer")).toHaveTextContent("x"));
+});

package/src/Map/Layers/index.tsx

@@ -0,0 +1,76 @@
+import { forwardRef, RefObject, type ForwardRefRenderFunction, type MutableRefObject } from "react";
+
+import { SelectedFeatureInfo } from "../../mantle";
+import ClusteredLayers, { type Props as ClusteredLayerProps } from "../ClusteredLayers";
+import type { ComputedLayer, EngineRef, RequestingRenderMode } from "../types";
+
+import useHooks, { LayerSelectionReason, type Ref } from "./hooks";
+
+export type {
+  CommonProps,
+  FeatureComponentProps,
+  FeatureComponentType,
+  Layer,
+  LayerSimple,
+  EvalFeature,
+} from "../Layer";
+export type {
+  LazyLayer,
+  Ref,
+  NaiveLayer,
+  LayerSelectionReason,
+  DefaultInfobox,
+  OverriddenLayer,
+} from "./hooks";
+export type {
+  ClusterComponentType,
+  ClusterComponentProps,
+  ClusterProperty,
+  Cluster,
+} from "../ClusteredLayers";
+
+export type Props = Omit<ClusteredLayerProps, "atomMap" | "isHidden" | "selectedLayerId"> & {
+  selectedLayer?: {
+    layerId?: string;
+    featureId?: string;
+    reason?: LayerSelectionReason;
+  };
+  hiddenLayers?: string[];
+  sceneProperty?: any;
+  requestingRenderMode?: MutableRefObject<RequestingRenderMode>;
+  engineRef?: RefObject<EngineRef>;
+  onLayerSelect?: (
+    layerId: string | undefined,
+    featureId: string | undefined,
+    layer: (() => Promise<ComputedLayer | undefined>) | undefined,
+    reason: LayerSelectionReason | undefined,
+    info: SelectedFeatureInfo | undefined,
+  ) => void;
+};
+
+const Layers: ForwardRefRenderFunction<Ref, Props> = (
+  { layers, selectedLayer, hiddenLayers, requestingRenderMode, engineRef, onLayerSelect, ...props },
+  ref,
+) => {
+  const { atomMap, flattenedLayers, isHidden } = useHooks({
+    layers,
+    ref,
+    hiddenLayers,
+    selectedLayer,
+    requestingRenderMode,
+    engineRef,
+    onLayerSelect,
+  });
+
+  return (
+    <ClusteredLayers
+      {...props}
+      selectedLayer={selectedLayer}
+      layers={flattenedLayers}
+      atomMap={atomMap}
+      isHidden={isHidden}
+    />
+  );
+};
+
+export default forwardRef(Layers);

package/src/Map/Layers/keys.ts

@@ -0,0 +1,51 @@
+import { appearanceKeyObj } from "../../mantle";
+import type { LegacyLayer, ComputedLayer, Layer } from "../../mantle";
+
+import type { LazyLayer } from "./hooks";
+
+export const layerKeys = objKeys<
+  Exclude<KeysOfUnion<Layer | LegacyLayer | LazyLayer>, "id" | "compat" | "_updateStyle">
+>({
+  // layer
+  children: 1,
+  data: 1,
+  infobox: 1,
+  properties: 1,
+  tags: 1,
+  title: 1,
+  type: 1,
+  creator: 1,
+  computed: 1,
+  defines: 1,
+  layerStyleId: 1,
+  // appearance
+  ...appearanceKeyObj,
+  // legacy layer
+  property: 1,
+  propertyId: 1,
+  pluginId: 1,
+  extensionId: 1,
+  isVisible: 1,
+  visible: 1,
+  events: 1,
+});
+
+export const computedLayerKeys = objKeys<Exclude<KeysOfUnion<ComputedLayer>, "id">>({
+  features: 1,
+  layer: 1,
+  originalFeatures: 1,
+  properties: 1,
+  status: 1,
+  ...appearanceKeyObj,
+});
+
+export type KeysOfUnion<T> = T extends T ? keyof T : never;
+
+/**
+ * Often we want to make an array of keys of an object type,
+ * but if we just specify the key names directly, we may forget to change the array if the object type is changed.
+ * With this function, the compiler checks the object keys for completeness, so the array of keys is always up to date.
+ */
+export function objKeys<T extends string | number | symbol>(obj: { [k in T]: 1 }): T[] {
+  return Object.keys(obj) as T[];
+}

package/src/Map/Layers/utils.test.ts

@@ -0,0 +1,53 @@
+import { expect, test } from "vitest";
+
+import { deepAssign } from "./utils";
+
+test("deepAssign", () => {
+  expect(
+    deepAssign(
+      { marker: { color: "red", size: 100 } },
+      { marker: { color: "blue", image: "example.com" } },
+    ),
+  ).toEqual({ marker: { color: "blue", size: 100, image: "example.com" } });
+
+  expect(
+    deepAssign({ marker: { color: "red", size: 100 } }, { marker: { color: undefined } }),
+  ).toEqual({ marker: { size: 100 } });
+
+  expect(deepAssign({ marker: { color: "red", size: 100 } }, { marker: undefined })).toEqual({});
+
+  expect(
+    deepAssign(
+      { marker: { color: "red", size: 100 }, test: { value: ["abc"] } },
+      { marker: undefined },
+    ),
+  ).toEqual({
+    test: { value: ["abc"] },
+  });
+
+  expect(
+    deepAssign(
+      {
+        marker: { color: "red", size: 100, deep: { value: { a: "abc" } } },
+        test: { value: ["abc"] },
+      },
+      { marker: { deep: { value: { b: "def" } } } },
+    ),
+  ).toEqual({
+    marker: { color: "red", size: 100, deep: { value: { a: "abc", b: "def" } } },
+    test: { value: ["abc"] },
+  });
+
+  expect(
+    deepAssign(
+      {
+        marker: { color: "red", size: 100, deep: { value: { a: "abc" } } },
+        test: { value: ["abc"] },
+      },
+      { marker: {} },
+    ),
+  ).toEqual({
+    marker: {},
+    test: { value: ["abc"] },
+  });
+});

package/src/Map/Layers/utils.ts

@@ -0,0 +1,37 @@
+import { isArray, isObject } from "lodash-es";
+
+export const deepAssign = <O extends Record<string, any>>(obj: O, src: O) => {
+  return Object.fromEntries(
+    Object.entries({ ...src, ...obj })
+      .map(([k, v]): [string, any] | undefined => {
+        const srcV: unknown = src[k];
+        if (Object.hasOwn(src, k) && (srcV === undefined || srcV === null)) {
+          return undefined;
+        }
+
+        if (srcV === undefined) {
+          return [k, v];
+        }
+
+        if (isArray(srcV)) {
+          return [k, srcV];
+        }
+
+        if (
+          isObject(v) &&
+          Object.keys(v).length !== 0 &&
+          isObject(srcV) &&
+          Object.keys(srcV).length !== 0
+        ) {
+          return [k, deepAssign(v, srcV)];
+        }
+
+        if (v !== srcV) {
+          return [k, srcV];
+        }
+
+        return [k, v];
+      })
+      .filter((v): v is [string, any] => !!v),
+  ) as O;
+};