@reearth/core 0.0.1

package/src/utils/object.ts

@@ -0,0 +1,70 @@
+export function delayedObject<T extends {}>(obj: T, excludedKeys?: string[]): Readonly<T> {
+  const res: any = {};
+  const descs = Object.keys(obj).reduce<PropertyDescriptorMap>(
+    (a, b) => ({
+      ...a,
+      [b]: excludedKeys?.includes(b)
+        ? {
+            value: (obj as any)[b],
+            configurable: false,
+            enumerable: true,
+            writable: false,
+          }
+        : {
+            get() {
+              return (obj as any)[b];
+            },
+            configurable: false,
+            enumerable: true,
+          },
+    }),
+    {},
+  );
+  Object.defineProperties(res, descs);
+  return res;
+}
+
+export function objectFromGetter<T extends { [K in keyof T]: any }>(
+  keys: (keyof T)[],
+  fn: (this: T, key: keyof T) => T[keyof T],
+): Readonly<T> {
+  const res: any = {};
+  const descs = keys.reduce<PropertyDescriptorMap>(
+    (a, b) => ({
+      ...a,
+      [b]: {
+        get(this: any): any {
+          return fn.call(this, b);
+        },
+        configurable: false,
+        enumerable: true,
+      },
+    }),
+    {},
+  );
+  Object.defineProperties(res, descs);
+  return res;
+}
+
+export function clone<T>(obj: T): T {
+  const obj2: any = {};
+  Object.defineProperties(obj2, Object.getOwnPropertyDescriptors(obj));
+  return obj2;
+}
+
+type BoxedTupleTypes<T extends any[]> = { [P in keyof T]: [T[P]] }[Exclude<keyof T, keyof any[]>];
+type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void
+  ? I
+  : never;
+type UnboxIntersection<T> = T extends { 0: infer U } ? U : never;
+
+export function merge<O, P extends any[]>(
+  o1: O,
+  ...o2: P
+): O & UnboxIntersection<UnionToIntersection<BoxedTupleTypes<P>>> {
+  const obj: any = clone(o1);
+  for (const o of o2) {
+    Object.defineProperties(obj, Object.getOwnPropertyDescriptors(o));
+  }
+  return obj;
+}

package/src/utils/raf.ts

@@ -0,0 +1,58 @@
+import { easing as tweenEasing, IEasingMap } from "ts-easing";
+
+export type Easing = keyof IEasingMap;
+
+export function interval(callback: (t: number) => boolean, delay?: number): () => void {
+  let prev = 0;
+  let raf = 0;
+  let to = 0;
+
+  const cb = () => {
+    if (callback(prev === 0 ? 0 : Date.now() - prev)) {
+      raf = window.requestAnimationFrame(cb);
+    }
+    if (prev === 0) {
+      prev = Date.now();
+    }
+  };
+
+  if (typeof delay === "number") {
+    to = window.setTimeout(cb, delay);
+  } else {
+    raf = window.requestAnimationFrame(cb);
+  }
+
+  return () => {
+    window.clearTimeout(to);
+    window.cancelAnimationFrame(raf);
+  };
+}
+
+export function intervalDuring(
+  callback: (time: number) => void,
+  duration: number,
+  delay?: number,
+): () => void {
+  if (duration < 0) return () => {};
+  return interval(d => {
+    const t = Math.min(1, duration === 0 ? 1 : d / duration);
+    callback(t);
+    return t < 1;
+  }, delay);
+}
+
+export function tweenInterval(
+  callback: (v: number, t: number) => void,
+  easing: Easing | ((t: number) => number),
+  duration: number,
+  delay?: number,
+): () => void {
+  const e = typeof easing === "function" ? easing : tweenEasing[easing];
+  return intervalDuring(
+    d => {
+      callback(e(d), d);
+    },
+    duration,
+    delay,
+  );
+}

package/src/utils/time.ts

@@ -0,0 +1,18 @@
+export const convertTime = (time: string | Date | undefined): Date | undefined => {
+  if (!time) return;
+  if (time instanceof Date) {
+    return !isNaN(time.getTime()) ? time : undefined;
+  }
+  try {
+    const dateTime = new Date(time);
+    return !isNaN(dateTime.getTime()) ? dateTime : undefined;
+  } catch {
+    return undefined;
+  }
+};
+
+export const truncMinutes = (d: Date) => {
+  d.setMinutes(0);
+  d.setSeconds(0, 0);
+  return d;
+};

package/src/utils/use-delayed-count.test.ts

@@ -0,0 +1,139 @@
+import { renderHook, act } from "@testing-library/react";
+import { expect, test, vi } from "vitest";
+
+import { useDelayedCount } from "./use-delayed-count";
+
+test("normal", async () => {
+  vi.useFakeTimers();
+
+  const { result } = renderHook(() => useDelayedCount([100, 200, 300]));
+  expect(result.current[0]).toBe(0);
+  expect(result.current[1]).toBe(undefined);
+
+  act(() => {
+    result.current[2](true);
+  });
+  expect(result.current[0]).toBe(0);
+  expect(result.current[1]).toBe(undefined);
+
+  act(() => {
+    result.current[2](false);
+  });
+  expect(result.current[0]).toBe(1);
+  expect(result.current[1]).toBe(0);
+
+  act(() => {
+    vi.advanceTimersByTime(100);
+  });
+  expect(result.current[0]).toBe(2);
+  expect(result.current[1]).toBe(1);
+
+  act(() => {
+    vi.advanceTimersByTime(200);
+  });
+  expect(result.current[0]).toBe(3);
+  expect(result.current[1]).toBe(2);
+
+  act(() => {
+    vi.advanceTimersByTime(300);
+  });
+  expect(result.current[0]).toBe(4);
+  expect(result.current[1]).toBe(3);
+  act(() => {
+    vi.advanceTimersByTime(100);
+  });
+  expect(result.current[0]).toBe(4);
+  expect(result.current[1]).toBe(3);
+
+  act(() => {
+    result.current[2](false);
+  });
+  expect(result.current[0]).toBe(4);
+  expect(result.current[1]).toBe(3);
+
+  act(() => {
+    result.current[2](true);
+  });
+  expect(result.current[0]).toBe(3);
+  expect(result.current[1]).toBe(4);
+
+  act(() => {
+    vi.advanceTimersByTime(300);
+  });
+  expect(result.current[0]).toBe(2);
+  expect(result.current[1]).toBe(3);
+
+  act(() => {
+    vi.advanceTimersByTime(200);
+  });
+  expect(result.current[0]).toBe(1);
+  expect(result.current[1]).toBe(2);
+
+  act(() => {
+    vi.advanceTimersByTime(100);
+  });
+  expect(result.current[0]).toBe(0);
+  expect(result.current[1]).toBe(1);
+  act(() => {
+    vi.advanceTimersByTime(100);
+  });
+  expect(result.current[0]).toBe(0);
+  expect(result.current[1]).toBe(1);
+});
+
+test("different durations", async () => {
+  vi.useFakeTimers();
+
+  const { result } = renderHook(() => useDelayedCount([[100, 300]]));
+  expect(result.current[0]).toBe(0);
+  expect(result.current[1]).toBe(undefined);
+
+  act(() => {
+    result.current[2](false);
+  });
+  expect(result.current[0]).toBe(1);
+  expect(result.current[1]).toBe(0);
+
+  act(() => {
+    vi.advanceTimersByTime(100);
+  });
+  expect(result.current[0]).toBe(2);
+  expect(result.current[1]).toBe(1);
+
+  act(() => {
+    result.current[2](true);
+  });
+  expect(result.current[0]).toBe(1);
+  expect(result.current[1]).toBe(2);
+
+  act(() => {
+    vi.advanceTimersByTime(100);
+  });
+  expect(result.current[0]).toBe(1);
+  expect(result.current[1]).toBe(2);
+  act(() => {
+    vi.advanceTimersByTime(200);
+  });
+  expect(result.current[0]).toBe(0);
+  expect(result.current[1]).toBe(1);
+});
+
+test("skip", async () => {
+  vi.useFakeTimers();
+
+  const { result } = renderHook(() => useDelayedCount([100, 200, 300]));
+  expect(result.current[0]).toBe(0);
+  expect(result.current[1]).toBe(undefined);
+
+  act(() => {
+    result.current[2](false, true);
+  });
+  expect(result.current[0]).toBe(4);
+  expect(result.current[1]).toBe(0);
+
+  act(() => {
+    result.current[2](true, true);
+  });
+  expect(result.current[0]).toBe(0);
+  expect(result.current[1]).toBe(4);
+});

package/src/utils/use-delayed-count.ts

@@ -0,0 +1,65 @@
+import { useRef, useState, useCallback, useEffect } from "react";
+import { usePreviousDistinct } from "react-use";
+
+export type Durations =
+  | [number | null | undefined, number | null | undefined][]
+  | (number | null | undefined)[];
+
+export const useDelayedCount = (durations: Durations = []) => {
+  const [mode, setMode] = useState(0);
+  const prevMode = usePreviousDistinct(mode);
+  const exit = useRef(false);
+  const timeout = useRef<number>();
+
+  const advanceMode = useCallback(() => {
+    setMode(m => Math.max(0, Math.min(durations.length + 1, m + (exit.current ? -1 : 1))));
+  }, [durations.length]);
+
+  const startTransition = useCallback(
+    (e: boolean, skipAnimation?: boolean) => {
+      if (timeout.current) {
+        clearTimeout(timeout.current);
+        timeout.current = undefined;
+      }
+
+      if (skipAnimation) {
+        setMode(e ? 0 : durations.length + 1);
+        return;
+      }
+
+      exit.current = e;
+      advanceMode();
+    },
+    [advanceMode, durations.length],
+  );
+
+  useEffect(() => {
+    if (timeout.current !== undefined) {
+      clearTimeout(timeout.current);
+      timeout.current = undefined;
+    }
+
+    if (mode <= 0 || mode >= durations.length + 1) return;
+
+    const next = durations?.[mode - 1];
+    const duration = Array.isArray(next) ? next[exit.current ? 1 : 0] : next;
+
+    timeout.current = window.setTimeout(() => {
+      timeout.current = undefined;
+      advanceMode();
+    }, duration ?? 0);
+  }, [advanceMode, durations, mode]);
+
+  // clear timeout on unmount
+  useEffect(
+    () => () => {
+      if (timeout.current) {
+        clearTimeout(timeout.current);
+        timeout.current = undefined;
+      }
+    },
+    [],
+  );
+
+  return [mode, prevMode, startTransition] as const;
+};

package/src/utils/use-dnd/drag.ts

@@ -0,0 +1,34 @@
+import { useMemo } from "react";
+import { useDrag as useDndDrag, DragSourceHookSpec } from "react-dnd";
+
+import { Item, ItemType, Dropper } from "./types";
+
+export const useDrag = <T extends ItemType = ItemType>(
+  item: Item<T> | undefined,
+  disabled?: boolean,
+  end?: (item: Item<T>, dropper?: Dropper) => void,
+) => {
+  const options = useMemo<
+    DragSourceHookSpec<
+      Item<T> | Item<"null">,
+      unknown,
+      {
+        isDragging: boolean;
+      }
+    >
+  >(
+    () => ({
+      type: item?.type ?? "null",
+      item: item ?? { type: "null" },
+      canDrag: !!item && !disabled,
+      end: (item, monitor) => end?.(item as Item<T>, monitor.getDropResult() ?? undefined),
+      collect: monitor => ({
+        isDragging: monitor.isDragging(),
+      }),
+    }),
+    [disabled, end, item],
+  );
+
+  const [{ isDragging }, ref, previewRef] = useDndDrag(options);
+  return { ref, isDragging, previewRef };
+};

package/src/utils/use-dnd/drop.ts

@@ -0,0 +1,93 @@
+import { useMemo, useCallback } from "react";
+import { useDrop as useDndDrop, DropTargetHookSpec, DropTargetMonitor } from "react-dnd";
+
+import { Item, ItemType, Dropper } from "./types";
+
+export { DndProvider as Provider } from "react-dnd";
+
+export type Context = {
+  position?: { x: number; y: number; w: number; h: number };
+  canDrop: boolean;
+};
+
+export type DropOptions<T extends ItemType = ItemType, E extends HTMLElement = HTMLElement> = {
+  accept: T | T[];
+  canDrop?: (item: Item<T>) => boolean;
+  hover?: (item: Item<T>, context: Context) => void;
+  drop?: (item: Item<T>, context: Context) => Dropper | undefined;
+  shallow?: boolean;
+  disabled?: boolean;
+  wrapperRef?: React.RefObject<E>;
+};
+
+export const useDrop = <T extends ItemType = ItemType, E extends HTMLElement = HTMLElement>({
+  accept,
+  hover,
+  canDrop,
+  drop,
+  shallow,
+  disabled,
+  wrapperRef,
+}: DropOptions<T, E>) => {
+  const calcContext = useCallback(
+    (monitor: DropTargetMonitor) => {
+      const offset = wrapperRef?.current ? monitor.getClientOffset() : undefined;
+      const wrapperOffset = wrapperRef?.current
+        ? wrapperRef.current.getBoundingClientRect()
+        : undefined;
+      const position =
+        offset && wrapperOffset
+          ? {
+              x: offset.x - wrapperOffset.left,
+              y: offset.y - wrapperOffset.top,
+              w: wrapperOffset.width,
+              h: wrapperOffset.height,
+            }
+          : undefined;
+      return {
+        canDrop: monitor.canDrop(),
+        position,
+      };
+    },
+    [wrapperRef],
+  );
+
+  const options = useMemo<
+    DropTargetHookSpec<
+      Item<T>,
+      Dropper,
+      {
+        isOver: boolean;
+        canDrop: boolean;
+        isDroppable: boolean;
+        isNotDroppable: boolean;
+      }
+    >
+  >(
+    () => ({
+      accept,
+      hover: hover
+        ? (item: Item<T>, monitor) => {
+            hover(item, calcContext(monitor));
+          }
+        : undefined,
+      canDrop: (item: Item<T>, monitor) =>
+        !disabled && (!shallow || monitor.isOver({ shallow: true })) && (!canDrop || canDrop(item)),
+      drop: drop ? (item: Item<T>, monitor) => drop(item, calcContext(monitor)) : undefined,
+      collect(monitor) {
+        const isOver = monitor.isOver({ shallow });
+        const canDrop = monitor.canDrop();
+        return {
+          isOver,
+          canDrop,
+          isDroppable: isOver && canDrop,
+          isNotDroppable: isOver && !canDrop,
+        };
+      },
+    }),
+    [accept, calcContext, canDrop, disabled, drop, hover, shallow],
+  );
+
+  const [{ isOver, canDrop: canDrop2, isDroppable, isNotDroppable }, ref] = useDndDrop(options);
+  return { ref, isOver, canDrop: canDrop2, isDroppable, isNotDroppable };
+};

package/src/utils/use-dnd/index.tsx

@@ -0,0 +1,20 @@
+import { ReactNode } from "react";
+import { DndProvider, useDragLayer } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+
+import { ItemType } from "./types";
+
+export * from "./types";
+export * from "./drag";
+export * from "./drop";
+
+export const Provider: React.FC<{ children?: ReactNode }> = ({ children }) => (
+  <DndProvider
+    backend={HTML5Backend}
+    options={{ enableMouseEvents: true, enableTouchEvents: true }}>
+    {children}
+  </DndProvider>
+);
+
+export const useDraggingItemType = () =>
+  useDragLayer(monitor => (monitor.isDragging() ? (monitor.getItemType() as ItemType) : null));

package/src/utils/use-dnd/types.ts

@@ -0,0 +1,47 @@
+export type ItemType = "layerItem" | "layerGroup" | "primitive" | "block" | "null";
+
+export type Item<T extends ItemType = ItemType> = {
+  null: { type: "null" };
+  layerItem: {
+    type: "layerItem";
+    layerId: string;
+    parentLayerId: string;
+    index: number;
+  };
+  layerGroup: {
+    type: "layerGroup";
+    layerId: string;
+    parentLayerId: string;
+    index: number;
+  };
+  primitive: { type: "primitive" };
+  block: {
+    type: "block";
+    id: string;
+    index: number;
+  };
+}[T];
+
+export type DropperType = "earth" | "layer" | "block";
+
+export type Dropper<T extends DropperType = DropperType> = {
+  earth: {
+    type: "earth";
+    layerId: string;
+    position?: {
+      lat: number;
+      lng: number;
+      height: number;
+    };
+  };
+  layer: {
+    type: "layer";
+    layerId: string;
+    index?: number;
+  };
+  block: {
+    type: "block";
+    id: string;
+    index: number;
+  };
+}[T];

package/src/utils/util.ts

@@ -0,0 +1,81 @@
+import { useRef } from "react";
+
+import { Args, Args3, Args2 } from "../reearthTypes";
+
+/**
+ * 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 const objKeys = <T>(obj: { [k in keyof T]: 0 }): (keyof T)[] => {
+  return Object.keys(obj) as (keyof T)[];
+};
+
+export const isPresent = <V>(v: V | undefined): v is V => typeof v !== "undefined";
+
+export const partitionObject = <T extends {}, K extends keyof T>(
+  obj: T,
+  keys: K[],
+): [Pick<T, K>, Omit<T, K>] => {
+  const a: any = {};
+  const b: any = {};
+  for (const k of Object.keys(obj)) {
+    if (keys.includes(k as K)) {
+      a[k] = obj[k as K];
+    } else {
+      b[k] = obj[k as K];
+    }
+  }
+  return [a, b];
+};
+
+export const bindFunc = <F extends (a: A, ...args: any[]) => any, A>(f?: F, a?: A) =>
+  isPresent(f) && isPresent(a) ? (...args: Args<F>) => f(a, ...args) : undefined;
+
+export const bindFunc2 = <F extends (a: A, b: B, ...args: any[]) => any, A, B>(
+  f?: F,
+  a?: A,
+  b?: B,
+) =>
+  isPresent(f) && isPresent(a) && isPresent(b)
+    ? (...args: Args2<F>) => f(a, b, ...args)
+    : undefined;
+
+export const bindFunc3 = <F extends (a: A, b: B, c: C, ...args: any[]) => any, A, B, C>(
+  f?: F,
+  a?: A,
+  b?: B,
+  c?: C,
+) =>
+  isPresent(f) && isPresent(a) && isPresent(b) && isPresent(c)
+    ? (...args: Args3<F>) => f(a, b, c, ...args)
+    : undefined;
+export function checkIfFileType(url: string, fileTypes: string) {
+  const formats = fileTypes.split(/,.|\./).splice(1);
+  let regexString = "\\.(";
+
+  for (let i = 0; i < formats.length; i++) {
+    if (i === formats.length - 1) {
+      regexString += formats[i];
+    } else {
+      regexString += formats[i] + "|";
+    }
+  }
+  regexString += ")$";
+
+  const regex = new RegExp(regexString);
+
+  return regex.test(url);
+}
+
+export const isEmptyString = function (text: string): boolean {
+  return text === null || /^ *$/.test(text);
+};
+
+export function useConstant<T>(callback: () => T): T {
+  const ref = useRef<{ value: T }>();
+  if (ref.current == null) {
+    ref.current = { value: callback() };
+  }
+  return ref.current.value;
+}