@reearth/core 0.0.1

package/src/mantle/utils.test.ts

@@ -0,0 +1,74 @@
+import { expect, test } from "vitest";
+
+import { getCoord, getCoords, getGeom } from "./utils";
+
+test("getCoord", () => {
+  expect(getCoord("a")).toBeUndefined();
+  expect(getCoord({ type: "Point", coordinates: [1, 2] })).toEqual([1, 2]);
+  expect(getCoord({ type: "Feature", geometry: { type: "Point", coordinates: [1, 2] } })).toEqual([
+    1, 2,
+  ]);
+  expect(getCoord({ type: "LineString", coordinates: [[1, 2]] })).toBeUndefined();
+  expect(getCoord({ type: "Polygon", coordinates: [[[1, 2]]] })).toBeUndefined();
+  expect(
+    getCoord({
+      type: "FeatureCollection",
+      features: [{ type: "Feature", geometry: { type: "Point", coordinates: [1, 2] } }],
+    }),
+  ).toBeUndefined();
+});
+
+test("getCoords", () => {
+  expect(getCoords("a")).toBeUndefined();
+  expect(getCoords({ type: "Point", coordinates: [1, 2] })).toEqual([1, 2]);
+  expect(getCoords({ type: "Feature", geometry: { type: "Point", coordinates: [1, 2] } })).toEqual([
+    1, 2,
+  ]);
+  expect(getCoords({ type: "LineString", coordinates: [[1, 2]] })).toEqual([[1, 2]]);
+  expect(
+    getCoords({
+      type: "Polygon",
+      coordinates: [
+        [
+          [1, 2],
+          [2, 3],
+        ],
+      ],
+    }),
+  ).toEqual([
+    [
+      [1, 2],
+      [2, 3],
+    ],
+  ]);
+  expect(
+    getCoords({
+      type: "FeatureCollection",
+      features: [{ type: "Feature", geometry: { type: "Point", coordinates: [1, 2] } }],
+    }),
+  ).toBeUndefined();
+});
+
+test("getGeom", () => {
+  expect(getGeom("a")).toBeUndefined();
+  expect(getGeom({ type: "Point", coordinates: [1, 2] })).toEqual({
+    type: "Point",
+    coordinates: [1, 2],
+  });
+  expect(getGeom({ type: "Feature", geometry: { type: "Point", coordinates: [1, 2] } })).toEqual({
+    type: "Point",
+    coordinates: [1, 2],
+  });
+  expect(
+    getGeom({
+      type: "GeometryCollection",
+      geometries: [{ type: "Point", coordinates: [1, 2] }],
+    }),
+  ).toBeUndefined();
+  expect(
+    getGeom({
+      type: "FeatureCollection",
+      features: [{ type: "Feature", geometry: { type: "Point", coordinates: [1, 2] } }],
+    }),
+  ).toBeUndefined();
+});

package/src/mantle/utils.ts

@@ -0,0 +1,53 @@
+import { getCoord as turfGetCoord, getCoords as turfGetCoords } from "@turf/invariant";
+import type { Geometry, GeometryCollection } from "geojson";
+
+export const getCoord = wrap(turfGetCoord);
+export const getCoords = wrap(turfGetCoords);
+
+export const getGeom = (g: any): Exclude<Geometry, GeometryCollection<Geometry>> | undefined => {
+  if (typeof g !== "object" || !g || !("type" in g)) return;
+
+  if (g.type === "Feature") return getGeom(g.geometry);
+
+  if (
+    g.type !== "Point" &&
+    g.type !== "MultiPoint" &&
+    g.type !== "LineString" &&
+    g.type !== "MultiLineString" &&
+    g.type !== "Polygon" &&
+    g.type !== "MultiPolygon"
+  )
+    return;
+
+  return g;
+};
+
+function wrap<T>(f: (d: any) => T): (d: any) => T | undefined {
+  return (d: any) => {
+    try {
+      return f(d);
+    } catch {
+      return;
+    }
+  };
+}
+
+/**
+ * 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[];
+}
+
+export function defined(value: any) {
+  return value !== undefined && value !== null;
+}
+
+export function defaultValue(a: any, b: any) {
+  if (a !== undefined && a !== null) {
+    return a;
+  }
+  return b;
+}

package/src/reearthTypes.ts

@@ -0,0 +1,64 @@
+// TODO: Remove this file after the migration is done
+// TODO: Move infobox types to where layer type locates
+import type { Spacing } from "./mantle";
+
+export type Infobox<BP = any> = {
+  featureId?: string;
+  property?: InfoboxProperty;
+  blocks?: InfoboxBlock<BP>[];
+};
+
+export type InfoboxProperty = {
+  default?: {
+    enabled?: PropertyItem<boolean>;
+    position?: PropertyItem<"right" | "left">;
+    padding?: PropertyItem<Spacing>;
+    gap?: PropertyItem<number>;
+  };
+  // for compat
+  defaultContent?: "description" | "attributes";
+};
+
+export type InfoboxBlock<P = any> = {
+  id: string;
+  name?: string;
+  pluginId?: string;
+  extensionId?: string;
+  property?: P;
+  propertyId?: string;
+};
+
+export type PropertyItem<T> = {
+  type?: string;
+  ui?: string;
+  title?: string;
+  description?: string;
+  value?: T;
+  min?: number;
+  max?: number;
+  choices?: { [key: string]: string }[];
+};
+
+// @reearth/types
+export type Args<F> = F extends (a: any, ...b: infer A) => any ? A : never;
+export type Args2<F> = F extends (a: any, b: any, ...c: infer A) => any ? A : never;
+export type Args3<F> = F extends (a: any, b: any, c: any, ...d: infer A) => any ? A : never;
+
+// @reearth/services/gql/__gen__/graphql.ts
+export enum ValueType {
+  Array = "ARRAY",
+  Bool = "BOOL",
+  Camera = "CAMERA",
+  Coordinates = "COORDINATES",
+  Latlng = "LATLNG",
+  Latlngheight = "LATLNGHEIGHT",
+  Number = "NUMBER",
+  Polygon = "POLYGON",
+  Rect = "RECT",
+  Ref = "REF",
+  Spacing = "SPACING",
+  String = "STRING",
+  Timeline = "TIMELINE",
+  Typography = "TYPOGRAPHY",
+  Url = "URL",
+}

package/src/setupTests.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/src/test/setup.ts

@@ -0,0 +1,40 @@
+/* eslint-disable @typescript-eslint/no-namespace */
+import { type EmotionMatchers, matchers as emotionMatchers } from "@emotion/jest";
+import * as domMatchers from "@testing-library/jest-dom/matchers";
+import { cleanup } from "@testing-library/react";
+import { afterEach, expect, vi } from "vitest";
+
+// Vitest on GitHub Actions requires TransformStream to run tests with Cesium
+import "web-streams-polyfill/es2018";
+
+declare global {
+  namespace Vi {
+    interface JestAssertion<T = any> extends jest.Matchers<void, T>, EmotionMatchers {
+      toHaveStyleRule: EmotionMatchers["toHaveStyleRule"];
+    }
+  }
+}
+
+expect.extend(domMatchers);
+expect.extend(emotionMatchers as any);
+
+Object.defineProperty(window, "matchMedia", {
+  writable: true,
+  value: vi.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(), // deprecated
+    removeListener: vi.fn(), // deprecated
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+});
+
+Object.defineProperty(window, "requestIdleCallback", {
+  writable: true,
+  value: vi.fn(),
+});
+
+afterEach(cleanup);

package/src/test/utils.tsx

@@ -0,0 +1,40 @@
+// TODO: remove MockedProvider after double-checking the test here is not necessary
+// import { MockedProvider as MockedGqlProvider, MockedResponse } from "@apollo/client/testing";
+import { render as rtlRender } from "@testing-library/react";
+import { vitest } from "vitest";
+
+// import { Provider as I18nProvider } from "../services/i18n";
+
+// react-inlinesvg is not displayed in test.
+// see detail: https://github.com/gilbarbara/react-inlinesvg/issues/145
+vitest.mock("react-inlinesvg", () => {
+  return {
+    default: function InlineSvgMock(props: any) {
+      return (
+        <svg
+          aria-label={props["aria-label"]}
+          style={props.style}
+          width={props.size}
+          height={props.size}
+        />
+      );
+    },
+  };
+});
+
+const render = (
+  ui: React.ReactElement,
+  // queryMocks?: readonly MockedResponse<Record<string, any>>[],
+  { ...renderOptions } = {},
+) => {
+  const Wrapper: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
+    return <>{children}</>;
+  };
+  return rtlRender(ui, { wrapper: Wrapper, ...renderOptions });
+};
+
+// eslint-disable-next-line import/export
+export * from "@testing-library/react";
+
+// eslint-disable-next-line import/export
+export { render };

package/src/types.ts

@@ -0,0 +1,66 @@
+export type FlyTo = (target: string | FlyToDestination, options?: CameraOptions) => void;
+
+export type CameraOptions = {
+  /** Seconds */
+  duration?: number;
+  easing?: (time: number) => number;
+  withoutAnimation?: boolean;
+};
+
+export type FlyToDestination = {
+  /** Degrees */
+  lat?: number;
+  /** Degrees */
+  lng?: number;
+  /** Meters */
+  height?: number;
+  /** Radian */
+  heading?: number;
+  /** Radian */
+  pitch?: number;
+  /** Radian */
+  roll?: number;
+  /** Radian */
+  fov?: number;
+};
+
+export type LookAtDestination = {
+  /** Degrees */
+  lat?: number;
+  /** Degrees */
+  lng?: number;
+  /** Meters */
+  height?: number;
+  /** Radian */
+  heading?: number;
+  /** Radian */
+  pitch?: number;
+  /** Radian */
+  range?: number;
+  /** Radian */
+  fov?: number;
+  /** Meters */
+  radius?: number;
+};
+
+export type Position2d = [x: number, y: number];
+export type Position3d = [x: number, y: number, z: number];
+
+export type OverideCameraEventType = "left_drag" | "right_drag" | "middle_drag" | "wheel" | "pinch";
+export type OverideKeyboardEventModifier = "ctrl" | "shift" | "alt";
+
+export type ScreenSpaceCameraControllerOptions = {
+  zoomEventTypes?: (OverideCameraEventType | ModifiedCameraEventType)[];
+  rotateEventTypes?: (OverideCameraEventType | ModifiedCameraEventType)[];
+  tiltEventTypes?: (OverideCameraEventType | ModifiedCameraEventType)[];
+  lookEventTypes?: (OverideCameraEventType | ModifiedCameraEventType)[];
+  translateEventTypes?: (OverideCameraEventType | ModifiedCameraEventType)[];
+  minimumZoomDistance?: number;
+  maximumZoomDistance?: number;
+  enableCollisionDetection?: boolean;
+};
+
+export type ModifiedCameraEventType = {
+  eventType: OverideCameraEventType;
+  modifier: OverideKeyboardEventModifier;
+};

package/src/utils/StringMatcher.test.ts

@@ -0,0 +1,132 @@
+/**
+ * Copied from: https://github.com/takram-design-engineering/plateau-view/blob/b7bba6de249d068e2e56b1601e0f6d86053b5d30/libs/cesium/src/StringMatcher.test.ts
+ */
+
+import { describe, expect, test } from "vitest";
+
+import { StringMatcher } from "./StringMatcher";
+
+const source =
+  "uniform sampler2D colorTexture;\n" +
+  "uniform sampler2D depthTexture;\n" +
+  "\n" +
+  "void main() {\n" +
+  "  vec4 color = texture(colorTexture, v_textureCoordinates);\n" +
+  "  out_FragColor = color;\n" +
+  "}\n";
+
+describe("StringMatcher", () => {
+  describe("match", () => {
+    test("match single code", () => {
+      const result = StringMatcher.match(source, "void main()");
+      expect(result.length).toBe(1);
+      expect(result[0].index).toBe(65);
+      expect(result[0][0]).toBe("void main()");
+    });
+
+    test("match multiple codes", () => {
+      const result = StringMatcher.match(source, "uniform sampler2D", true);
+      expect(result.length).toBe(2);
+      expect(result[0].index).toBe(0);
+      expect(result[0][0]).toBe("uniform sampler2D");
+      expect(result[1].index).toBe(32);
+      expect(result[1][0]).toBe("uniform sampler2D");
+    });
+
+    test("throw error when multiple codes found", () => {
+      expect(() => {
+        StringMatcher.match(source, "uniform sampler2D");
+      }).toThrowError();
+    });
+  });
+
+  describe("replace", () => {
+    test("replace single line", () => {
+      const injector = new StringMatcher();
+      expect(
+        injector
+          .replace(
+            "vec4 color = texture(colorTexture, v_textureCoordinates);",
+            "vec4 color = texture(colorTexture, v_textureCoordinates * 0.5);",
+          )
+          .execute(source),
+      ).toBe(
+        "uniform sampler2D colorTexture;\n" +
+          "uniform sampler2D depthTexture;\n" +
+          "\n" +
+          "void main() {\n" +
+          "  vec4 color = texture(colorTexture, v_textureCoordinates * 0.5);\n" +
+          "  out_FragColor = color;\n" +
+          "}\n",
+      );
+      expect(
+        injector
+          .replace("uniform sampler2D colorTexture;", "uniform sampler2D colorTexture2;")
+          .execute(source),
+      ).toBe(
+        "uniform sampler2D colorTexture2;\n" +
+          "uniform sampler2D depthTexture;\n" +
+          "\n" +
+          "void main() {\n" +
+          "  vec4 color = texture(colorTexture, v_textureCoordinates * 0.5);\n" +
+          "  out_FragColor = color;\n" +
+          "}\n",
+      );
+    });
+
+    test("replace multiple lines", () => {
+      const injector = new StringMatcher();
+      expect(injector.replace("uniform sampler2D", "uniform vec4", true).execute(source)).toBe(
+        "uniform vec4 colorTexture;\n" +
+          "uniform vec4 depthTexture;\n" +
+          "\n" +
+          "void main() {\n" +
+          "  vec4 color = texture(colorTexture, v_textureCoordinates);\n" +
+          "  out_FragColor = color;\n" +
+          "}\n",
+      );
+    });
+  });
+
+  test("insertBefore", () => {
+    const injector = new StringMatcher();
+    expect(injector.insertBefore("void main()", "uniform vec2 uv;").execute(source)).toBe(
+      "uniform sampler2D colorTexture;\n" +
+        "uniform sampler2D depthTexture;\n" +
+        "\n" +
+        "uniform vec2 uv;\n" +
+        "void main() {\n" +
+        "  vec4 color = texture(colorTexture, v_textureCoordinates);\n" +
+        "  out_FragColor = color;\n" +
+        "}\n",
+    );
+  });
+
+  test("insertAfter", () => {
+    const injector = new StringMatcher();
+    expect(
+      injector.insertAfter("uniform sampler2D depthTexture;", "uniform vec2 uv;").execute(source),
+    ).toBe(
+      "uniform sampler2D colorTexture;\n" +
+        "uniform sampler2D depthTexture;\n" +
+        "uniform vec2 uv;\n" +
+        "\n" +
+        "void main() {\n" +
+        "  vec4 color = texture(colorTexture, v_textureCoordinates);\n" +
+        "  out_FragColor = color;\n" +
+        "}\n",
+    );
+  });
+
+  test("erase", () => {
+    const injector = new StringMatcher();
+    expect(injector.erase("uniform sampler2D depthTexture;\n").execute(source)).toBe(
+      "uniform sampler2D colorTexture;\n" +
+        "\n" +
+        "void main() {\n" +
+        "  vec4 color = texture(colorTexture, v_textureCoordinates);\n" +
+        "  out_FragColor = color;\n" +
+        "}\n",
+    );
+  });
+});

package/src/utils/StringMatcher.ts

@@ -0,0 +1,104 @@
+/**
+ * Copied from: https://github.com/takram-design-engineering/plateau-view/blob/b7bba6de249d068e2e56b1601e0f6d86053b5d30/libs/cesium/src/StringMatcher.ts
+ */
+import escapeStringRegexp from "escape-string-regexp";
+
+type Command = (source: string) => string;
+
+export class StringMatcher {
+  private readonly commands: Command[] = [];
+
+  concat(...others: StringMatcher[]): StringMatcher {
+    const result = new StringMatcher();
+    result.commands.push(...this.commands);
+    others.forEach(other => {
+      result.commands.push(...other.commands);
+    });
+    return result;
+  }
+
+  static match(
+    source: string,
+    search: string | string[],
+    multiple = false,
+  ): Array<RegExpMatchArray & { index: number }> {
+    const pattern = Array.isArray(search)
+      ? new RegExp(search.map(string => escapeStringRegexp(string)).join("\\s*"), "g")
+      : new RegExp(escapeStringRegexp(search), "g");
+
+    const matches = [...source.matchAll(pattern)].filter(
+      (match): match is RegExpMatchArray & { index: number } => match.index != null,
+    );
+    if (matches == null || matches.length === 0) {
+      throw new Error(`No matching codes found for: "${search}"`);
+    }
+    if (!multiple && matches.length > 1) {
+      throw new Error(`Multiple codes found for: "${search}"`);
+    }
+    return matches;
+  }
+
+  replace(search: string | string[], code: string, multiple = false): this {
+    this.commands.push(source => {
+      const matches = StringMatcher.match(source, search, multiple);
+      const indices = [
+        0,
+        ...matches.flatMap(match => [match.index, match.index + match[0].length]),
+        source.length,
+      ];
+      const chunks: string[] = [];
+      indices.reduce((start, end, index) => {
+        chunks.push(matches[(index - 2) / 2] != null ? code : source.slice(start, end));
+        return end;
+      }, 0);
+      return chunks.join("");
+    });
+    return this;
+  }
+
+  insertBefore(search: string | string[], code: string, multiple?: boolean): this {
+    this.commands.push(source => {
+      const matches = StringMatcher.match(source, search, multiple);
+      const indices = [
+        0,
+        ...matches.flatMap(match => [match.index, match.index + match[0].length]),
+        source.length,
+      ];
+      const chunks: string[] = [];
+      indices.reduce((start, end, index) => {
+        const chunk = source.slice(start, end);
+        chunks.push(matches[(index - 2) / 2] != null ? `${code}\n${chunk}` : chunk);
+        return end;
+      }, 0);
+      return chunks.join("");
+    });
+    return this;
+  }
+
+  insertAfter(search: string | string[], code: string, multiple?: boolean): this {
+    this.commands.push(source => {
+      const matches = StringMatcher.match(source, search, multiple);
+      const indices = [
+        0,
+        ...matches.flatMap(match => [match.index, match.index + match[0].length]),
+        source.length,
+      ];
+      const chunks: string[] = [];
+      indices.reduce((start, end, index) => {
+        const chunk = source.slice(start, end);
+        chunks.push(matches[(index - 2) / 2] != null ? `${chunk}\n${code}` : chunk);
+        return end;
+      }, 0);
+      return chunks.join("");
+    });
+    return this;
+  }
+
+  erase(search: string | string[], multiple?: boolean): this {
+    return this.replace(search, "", multiple);
+  }
+
+  execute(source: string): string {
+    return this.commands.reduce((source, command) => command(source), source);
+  }
+}

package/src/utils/assertType.ts

@@ -0,0 +1 @@
+export function assertType<T>(value: unknown): asserts value is T {}

package/src/utils/generate-random-string.ts

@@ -0,0 +1,9 @@
+const usableChars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
+const generateRandomString = (len: number): string => {
+  return Array.from(window.crypto.getRandomValues(new Uint8Array(len)))
+    .map(n => usableChars[n % len])
+    .join("")
+    .toLowerCase();
+};
+
+export { generateRandomString };

package/src/utils/idle.ts

@@ -0,0 +1,22 @@
+const ctx = typeof window !== "undefined" ? window : global;
+const requestIdleCallbackShim = (
+  callback: (arg0: { didTimeout: boolean; timeRemaining: () => number }) => void,
+  _options?: IdleRequestOptions,
+) => {
+  const start = Date.now();
+  return ctx.setTimeout(function () {
+    callback({
+      didTimeout: false,
+      timeRemaining: function () {
+        return Math.max(0, 12 - (Date.now() - start));
+      },
+    });
+  });
+};
+const requestIdleCallback = ctx.requestIdleCallback || requestIdleCallbackShim;
+
+// This is used to schedule heavy required task at idle time.
+// But this task is required to advance process, so we want to execute it as fast as possible.
+export const requestIdleCallbackWithRequiredWork = (cb: () => void) => {
+  requestIdleCallback(cb, { timeout: 1 });
+};

package/src/utils/image.ts

@@ -0,0 +1,35 @@
+import { useState, useEffect, useMemo, useRef } from "react";
+
+export const useImage = (src?: string): HTMLImageElement | undefined => {
+  const imgRef = useRef<HTMLImageElement>();
+  const [img, setImg] = useState<HTMLImageElement>();
+
+  useEffect(() => {
+    if (!src) {
+      setImg(undefined);
+      if (imgRef.current) {
+        imgRef.current.src = "";
+      }
+      return;
+    }
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.onload = () => {
+      setImg(imgRef.current);
+    };
+    img.src = src;
+    imgRef.current = img;
+  }, [src]);
+
+  return img;
+};
+
+export const useCanvas = (cb: (canvas: HTMLCanvasElement) => void): string => {
+  const can = useMemo(() => document.createElement("canvas"), []);
+  const [data, setData] = useState<string>("");
+  useEffect(() => {
+    cb(can);
+    setData(can.toDataURL());
+  }, [can, cb]);
+  return data;
+};

package/src/utils/index.ts

@@ -0,0 +1,11 @@
+export * from "./StringMatcher";
+export * from "./assertType";
+export * from "./util";
+export * from "./idle";
+export * from "./generate-random-string";
+export * from "./object";
+export * from "./time";
+export * from "./value";
+export * from "./raf";
+export * from "./image";
+export * from "./use-delayed-count";