@reearth/core 0.0.1

package/src/Visualizer/interactionMode.ts

@@ -0,0 +1,25 @@
+import { FEATURE_FLAGS } from "./featureFlags";
+
+export type InteractionModeType = "default" | "move" | "selection" | "sketch";
+
+// If you would like enable a feature in a specific mode,
+// just set the feature's flag here to that mode.
+export const INTERACTION_MODES: Record<InteractionModeType, number> = {
+  default:
+    FEATURE_FLAGS.CAMERA_MOVE |
+    FEATURE_FLAGS.CAMERA_ZOOM |
+    FEATURE_FLAGS.CAMERA_LOOK |
+    FEATURE_FLAGS.CAMERA_TILT |
+    FEATURE_FLAGS.SINGLE_SELECTION,
+  move:
+    FEATURE_FLAGS.CAMERA_MOVE |
+    FEATURE_FLAGS.CAMERA_ZOOM |
+    FEATURE_FLAGS.CAMERA_LOOK |
+    FEATURE_FLAGS.CAMERA_TILT,
+  selection:
+    FEATURE_FLAGS.SINGLE_SELECTION |
+    FEATURE_FLAGS.MULTIPLE_SELECTION |
+    FEATURE_FLAGS.CAMERA_ZOOM |
+    FEATURE_FLAGS.CAMERA_TILT,
+  sketch: FEATURE_FLAGS.SKETCH | FEATURE_FLAGS.CAMERA_ZOOM | FEATURE_FLAGS.CAMERA_TILT,
+};

package/src/Visualizer/useViewport.ts

@@ -0,0 +1,74 @@
+import { useState, useEffect, RefObject, useMemo } from "react";
+
+const viewportMobileMaxWidth = 768;
+
+export type Viewport = {
+  width: number | undefined;
+  height: number | undefined;
+  isMobile: boolean | undefined;
+  query: Record<string, string>;
+};
+
+type Props = {
+  wrapperRef: RefObject<HTMLDivElement>;
+};
+
+export default ({ wrapperRef }: Props) => {
+  const query = useMemo(() => paramsToObject(new URLSearchParams(window.location.search)), []);
+  const [viewport, setViewport] = useState<Viewport>({
+    width: undefined,
+    height: undefined,
+    isMobile: undefined,
+    query,
+  });
+
+  useEffect(() => {
+    const viewportResizeObserver = new ResizeObserver(entries => {
+      const [entry] = entries;
+      let width: number | undefined;
+      let height: number | undefined;
+
+      if (entry.contentBoxSize) {
+        // Firefox(v69-91) implements `contentBoxSize` as a single content rect, rather than an array
+        const contentBoxSize = Array.isArray(entry.contentBoxSize)
+          ? entry.contentBoxSize[0]
+          : entry.contentBoxSize;
+        width = contentBoxSize.inlineSize;
+        height = contentBoxSize.blockSize;
+      } else if (entry.contentRect) {
+        width = entry.contentRect.width;
+        height = entry.contentRect.height;
+      } else {
+        width = wrapperRef.current?.clientWidth;
+        height = wrapperRef.current?.clientHeight;
+      }
+
+      setViewport(viewport => {
+        return {
+          width,
+          height,
+          isMobile: width ? width <= viewportMobileMaxWidth : undefined,
+          query: viewport.query,
+        };
+      });
+    });
+
+    if (wrapperRef.current) {
+      viewportResizeObserver.observe(wrapperRef.current);
+    }
+
+    return () => {
+      viewportResizeObserver.disconnect();
+    };
+  }, [wrapperRef]);
+
+  return viewport;
+};
+
+function paramsToObject(entries: URLSearchParams) {
+  const result: Record<string, string> = {};
+  for (const [key, value] of entries) {
+    result[key] = value;
+  }
+  return result;
+}

package/src/e2eConfig.ts

@@ -0,0 +1,20 @@
+import { Viewer } from "cesium";
+
+declare global {
+  interface Window {
+    REEARTH_E2E_ACCESS_TOKEN?: string;
+    REEARTH_E2E_CESIUM_VIEWER?: any;
+  }
+}
+
+export function e2eAccessToken(): string | undefined {
+  return window.REEARTH_E2E_ACCESS_TOKEN;
+}
+
+export function setE2ECesiumViewer(viewer: Viewer | undefined) {
+  if (viewer) {
+    window.REEARTH_E2E_CESIUM_VIEWER = viewer;
+  } else {
+    delete window.REEARTH_E2E_CESIUM_VIEWER;
+  }
+}

package/src/engines/Cesium/Cluster.tsx

@@ -0,0 +1,90 @@
+import { Cartesian3, Color, EntityCluster, HorizontalOrigin, VerticalOrigin } from "cesium";
+import React, { useEffect, useMemo } from "react";
+import { CustomDataSource } from "resium";
+
+import { ClusterComponentProps } from "..";
+import { toCSSFont } from "../../utils";
+
+const Cluster: React.FC<ClusterComponentProps> = ({ property, children }) => {
+  const {
+    clusterPixelRange = 15,
+    clusterMinSize = 3,
+    clusterLabelTypography = {
+      fontFamily: "sans-serif",
+      fontSize: 30,
+      fontWeight: 400,
+      color: "#FFF",
+      textAlign: "center",
+      bold: false,
+      italic: false,
+      underline: false,
+    },
+    clusterImage,
+    clusterImageWidth,
+    clusterImageHeight,
+  } = property?.default ?? {};
+
+  const cluster = useMemo(() => {
+    return new EntityCluster({
+      enabled: true,
+      pixelRange: 15,
+      minimumClusterSize: 2,
+      clusterBillboards: true,
+      clusterLabels: true,
+      clusterPoints: true,
+    });
+  }, []);
+
+  useEffect(() => {
+    const isClusterHidden = React.Children.count(children) < clusterMinSize;
+    const removeListener = cluster?.clusterEvent.addEventListener(
+      (_clusteredEntities, clusterParam) => {
+        clusterParam.label.font = toCSSFont(clusterLabelTypography, { fontSize: 30 });
+        clusterParam.label.horizontalOrigin =
+          clusterLabelTypography.textAlign === "right"
+            ? HorizontalOrigin.LEFT
+            : clusterLabelTypography.textAlign === "left"
+              ? HorizontalOrigin.RIGHT
+              : HorizontalOrigin.CENTER;
+        clusterParam.label.verticalOrigin = VerticalOrigin.CENTER;
+        clusterParam.label.fillColor = Color.fromCssColorString(
+          clusterLabelTypography.color ?? "#FFF",
+        );
+        clusterParam.label.eyeOffset = new Cartesian3(0, 0, -5);
+        clusterParam.billboard.show = true;
+        // Billboard.{image,height,width} should accept undefined
+        (clusterParam.billboard.image as any) = clusterImage;
+        (clusterParam.billboard.height as any) = clusterImageHeight;
+        (clusterParam.billboard.width as any) = clusterImageWidth;
+        // Workaround if minimumClusterSize is larger than number of layers event listner breaks
+        cluster.minimumClusterSize = isClusterHidden
+          ? React.Children.count(children)
+          : clusterMinSize;
+      },
+    );
+    cluster.enabled = !isClusterHidden;
+    // Workaround to re-style components
+    cluster.pixelRange = 0;
+    cluster.pixelRange = clusterPixelRange;
+    return () => {
+      removeListener();
+    };
+  }, [
+    clusterMinSize,
+    clusterPixelRange,
+    clusterLabelTypography,
+    clusterImage,
+    clusterImageHeight,
+    clusterImageWidth,
+    children,
+    cluster,
+  ]);
+
+  return cluster ? (
+    <CustomDataSource show clustering={cluster}>
+      {children}
+    </CustomDataSource>
+  ) : null;
+};
+
+export default Cluster;

package/src/engines/Cesium/Event.tsx

@@ -0,0 +1,15 @@
+import { useEffect } from "react";
+
+export type Props = {
+  onMount?: () => void;
+  onUnmount?: () => void;
+};
+
+export default function Event({ onMount, onUnmount }: Props) {
+  useEffect(() => {
+    onMount?.();
+    return () => onUnmount?.();
+  }, [onMount, onUnmount]);
+
+  return null;
+}

package/src/engines/Cesium/Feature/Box/Edge.tsx

@@ -0,0 +1,94 @@
+import {
+  ArcType,
+  Cartesian3,
+  Color,
+  TimeIntervalCollection,
+  TranslationRotationScale,
+  DistanceDisplayCondition,
+} from "cesium";
+import { FC, memo } from "react";
+import { PolylineGraphics } from "resium";
+
+import type { EventCallback } from "../../../../Map";
+import { EntityExt } from "../utils";
+
+import { useHooks } from "./hooks/edge";
+
+export type EdgeEventCallback = EventCallback<
+  [
+    event: any,
+    edgeEvent: {
+      layerId: string;
+      index: number;
+    },
+  ]
+>;
+
+export type EdgeProperties = { start: Cartesian3; end: Cartesian3; isDraggable?: boolean };
+
+type Props = {
+  layerId: string;
+  featureId?: string;
+  index: number;
+  edge: EdgeProperties;
+  trs: TranslationRotationScale;
+  isHovered: boolean;
+  fillColor?: Color;
+  hoverColor?: Color;
+  width?: number;
+  availability?: TimeIntervalCollection;
+  distanceDisplayCondition?: DistanceDisplayCondition;
+  onMouseDown?: EdgeEventCallback;
+  onMouseMove?: EdgeEventCallback;
+  onMouseUp?: EdgeEventCallback;
+  onMouseEnter?: EdgeEventCallback;
+  onMouseLeave?: EdgeEventCallback;
+  hideIndicator?: boolean;
+};
+
+export const Edge: FC<Props> = memo(function EdgePresenter({
+  layerId,
+  featureId,
+  index,
+  edge,
+  isHovered,
+  fillColor,
+  trs,
+  width,
+  hoverColor,
+  availability,
+  distanceDisplayCondition,
+  onMouseDown,
+  onMouseMove,
+  onMouseUp,
+  hideIndicator,
+}) {
+  const { cbp, outlineColor } = useHooks({
+    id: layerId,
+    index,
+    edge,
+    isHovered,
+    fillColor,
+    trs,
+    hoverColor,
+    onMouseDown,
+    onMouseMove,
+    onMouseUp,
+  });
+
+  return (
+    <EntityExt
+      layerId={layerId}
+      featureId={featureId}
+      availability={availability}
+      hideIndicator={hideIndicator}>
+      <PolylineGraphics
+        positions={cbp}
+        width={width}
+        material={outlineColor}
+        arcType={ArcType.NONE}
+        distanceDisplayCondition={distanceDisplayCondition}
+      />
+    </EntityExt>
+  );
+});

package/src/engines/Cesium/Feature/Box/ScalePoints.tsx

@@ -0,0 +1,158 @@
+import {
+  ArcType,
+  Cartesian3,
+  Color,
+  TimeIntervalCollection,
+  TranslationRotationScale,
+  DistanceDisplayCondition,
+} from "cesium";
+import { FC, memo } from "react";
+import { BoxGraphics, PolylineGraphics } from "resium";
+
+import type { EventCallback } from "../../../../Map";
+import { EntityExt } from "../utils";
+
+import { useHooks } from "./hooks/scalePoint";
+
+export type ScalePointProperties = {
+  point: Cartesian3;
+  oppositePoint: Cartesian3;
+};
+
+export type PointEventCallback = EventCallback<
+  [
+    event: any,
+    pointEvent: {
+      index: number;
+      layerId: string;
+      opposite: boolean;
+      position?: Cartesian3;
+      oppositePosition?: Cartesian3;
+      pointLocal?: Cartesian3;
+    },
+  ]
+>;
+
+type Props = {
+  layerId: string;
+  featureId?: string;
+  index: number;
+  scalePoint: ScalePointProperties;
+  trs: TranslationRotationScale;
+  isHovered: boolean;
+  pointFillColor?: Color;
+  pointOutlineColor?: Color;
+  hoverPointOutlineColor?: Color;
+  pointOutlineWidth?: number;
+  axisLineColor?: Color;
+  axisLineWidth?: number;
+  dimensions?: { width: number; height: number; length: number };
+  visiblePoint?: boolean;
+  visibleAxisLine?: boolean;
+  availability?: TimeIntervalCollection;
+  distanceDisplayCondition?: DistanceDisplayCondition;
+  onPointMouseDown?: PointEventCallback;
+  onPointMouseMove?: PointEventCallback;
+  onPointMouseUp?: PointEventCallback;
+  hideIndicator?: boolean;
+};
+
+export const ScalePoints: FC<Props> = memo(function ScalePointsPresenter({
+  layerId,
+  featureId,
+  index,
+  scalePoint,
+  isHovered,
+  pointFillColor,
+  pointOutlineColor,
+  hoverPointOutlineColor,
+  pointOutlineWidth,
+  axisLineColor,
+  axisLineWidth,
+  trs,
+  dimensions,
+  visiblePoint,
+  visibleAxisLine,
+  availability,
+  distanceDisplayCondition,
+  onPointMouseDown,
+  onPointMouseMove,
+  onPointMouseUp,
+  hideIndicator,
+}) {
+  const {
+    entitiesPosition,
+    pointOutlineColorCb,
+    cesiumDimensionsCallbackProperty,
+    orientation,
+    axisColorProperty,
+  } = useHooks({
+    id: layerId,
+    index,
+    scalePoint,
+    isHovered,
+    pointOutlineColor,
+    hoverPointOutlineColor,
+    axisLineColor,
+    trs,
+    dimensions,
+    onPointMouseDown,
+    onPointMouseMove,
+    onPointMouseUp,
+  });
+
+  return (
+    <>
+      <EntityExt
+        layerId={`${layerId}-${index}`}
+        featureId={`${featureId}-${index}`}
+        position={entitiesPosition.point}
+        orientation={orientation}
+        hideIndicator={hideIndicator}
+        availability={availability}>
+        <BoxGraphics
+          show={visiblePoint}
+          dimensions={cesiumDimensionsCallbackProperty}
+          material={pointFillColor}
+          fill={!!pointFillColor}
+          outline={!!pointOutlineColor}
+          outlineColor={pointOutlineColorCb}
+          outlineWidth={pointOutlineWidth}
+          distanceDisplayCondition={distanceDisplayCondition}
+        />
+      </EntityExt>
+      <EntityExt
+        layerId={`${layerId}-opposite-${index}`}
+        featureId={`${featureId}-opposite-${index}`}
+        position={entitiesPosition.oppositePoint}
+        orientation={orientation}
+        hideIndicator={hideIndicator}
+        availability={availability}>
+        <BoxGraphics
+          show={visiblePoint}
+          dimensions={cesiumDimensionsCallbackProperty}
+          material={pointFillColor}
+          fill={!!pointFillColor}
+          outline={!!pointOutlineColor}
+          outlineColor={pointOutlineColorCb}
+          outlineWidth={pointOutlineWidth}
+          distanceDisplayCondition={distanceDisplayCondition}
+        />
+      </EntityExt>
+      <EntityExt
+        layerId={`${layerId}-axis-line-${index}`}
+        featureId={`${featureId}-axis-line-${index}`}
+        hideIndicator={hideIndicator}
+        availability={availability}>
+        <PolylineGraphics
+          positions={entitiesPosition.axisLine}
+          show={visibleAxisLine}
+          material={axisColorProperty}
+          width={axisLineWidth}
+          arcType={ArcType.NONE}
+          distanceDisplayCondition={distanceDisplayCondition}
+        />
+      </EntityExt>
+    </>
+  );
+});

package/src/engines/Cesium/Feature/Box/Side.tsx

@@ -0,0 +1,70 @@
+import {
+  Color,
+  DistanceDisplayCondition,
+  Plane as CesiumPlane,
+  TimeIntervalCollection,
+  TranslationRotationScale,
+} from "cesium";
+import { FC, memo } from "react";
+import { PlaneGraphics } from "resium";
+
+import { EntityExt } from "../utils";
+
+import { useHooks } from "./hooks/side";
+
+export const Side: FC<{
+  layerId: string;
+  featureId?: string;
+  planeLocal: CesiumPlane;
+  isActive: boolean;
+  trs: TranslationRotationScale;
+  fillColor?: Color;
+  outlineColor?: Color;
+  activeOutlineColor?: Color;
+  fill?: boolean;
+  availability?: TimeIntervalCollection;
+  distanceDisplayCondition?: DistanceDisplayCondition;
+  hideIndicator?: boolean;
+}> = memo(function SidePresenter({
+  layerId,
+  featureId,
+  planeLocal,
+  isActive,
+  fill,
+  fillColor,
+  outlineColor,
+  activeOutlineColor,
+  trs,
+  availability,
+  distanceDisplayCondition,
+  hideIndicator,
+}) {
+  const { cbRef, plane, dimension, orientation, outlineColorCb } = useHooks({
+    planeLocal,
+    isActive,
+    outlineColor,
+    activeOutlineColor,
+    trs,
+  });
+
+  return (
+    <EntityExt
+      layerId={layerId}
+      featureId={featureId}
+      position={cbRef}
+      orientation={orientation}
+      availability={availability}
+      hideIndicator={hideIndicator}>
+      <PlaneGraphics
+        plane={plane}
+        dimensions={dimension}
+        fill={fill}
+        material={fillColor}
+        outlineWidth={1}
+        outlineColor={outlineColorCb}
+        distanceDisplayCondition={distanceDisplayCondition}
+        outline
+      />
+    </EntityExt>
+  );
+});

package/src/engines/Cesium/Feature/Box/constants.ts

@@ -0,0 +1,63 @@
+// The 6 box sides defined as planes in local coordinate space.
+
+import { Cartesian3, Plane as CesiumPlane } from "cesium";
+
+import type { EdgeProperties } from "./Edge";
+
+// ref: https://github.com/TerriaJS/terriajs/blob/cad62a45cbee98c7561625458bec3a48510f6cbc/lib/Models/BoxDrawing.ts#L161-L169
+export const SIDE_PLANES: readonly CesiumPlane[] = [
+  new CesiumPlane(new Cartesian3(0, 0, 1), 0.5),
+  new CesiumPlane(new Cartesian3(0, 0, -1), 0.5),
+  new CesiumPlane(new Cartesian3(0, 1, 0), 0.5),
+  new CesiumPlane(new Cartesian3(0, -1, 0), 0.5),
+  new CesiumPlane(new Cartesian3(1, 0, 0), 0.5),
+  new CesiumPlane(new Cartesian3(-1, 0, 0), 0.5),
+];
+
+const CORNER_POINT_VECTORS = [
+  new Cartesian3(0.5, 0.5, 0.5),
+  new Cartesian3(0.5, -0.5, 0.5),
+  new Cartesian3(-0.5, -0.5, 0.5),
+  new Cartesian3(-0.5, 0.5, 0.5),
+];
+
+const FACE_POINT_VECTORS = [
+  new Cartesian3(0.5, 0.0, 0.0),
+  new Cartesian3(0.0, 0.5, 0.0),
+  new Cartesian3(0.0, 0.0, 0.5),
+];
+
+// The box has 8 corner points and 6 face points that act as scaling grips.
+// Here we represent them as 7 vectors in local coordinates space.
+// Each vector represents a point and its opposite points can be easily derived from it.
+// @see https://github.com/TerriaJS/terriajs/blob/cad62a45cbee98c7561625458bec3a48510f6cbc/lib/Models/BoxDrawing.ts#L184-L187
+const SCALE_POINT_VECTORS = [...CORNER_POINT_VECTORS, ...FACE_POINT_VECTORS];
+
+export const SCALE_POINTS = SCALE_POINT_VECTORS.map(vector => {
+  return {
+    point: vector,
+    oppositePoint: Cartesian3.multiplyByScalar(vector, -1, new Cartesian3()),
+  };
+});
+
+// Calculate edge of box. The box has 12 edge.
+// In this logic, calculate 3 edges(vertical edge, top edge, bottom edge) in each `CORNER_POINT_VECTORS`.
+export const BOX_EDGES: EdgeProperties[] = CORNER_POINT_VECTORS.flatMap((vector, i) => {
+  const upPoint = vector;
+  const downPoint = Cartesian3.clone(upPoint, new Cartesian3());
+  // Set point to bottom
+  downPoint.z *= -1;
+
+  const nextUpPoint = CORNER_POINT_VECTORS[(i + 1) % 4];
+  const nextDownPoint = Cartesian3.clone(nextUpPoint, new Cartesian3());
+  nextDownPoint.z *= -1;
+
+  const verticalEdge: EdgeProperties = { start: upPoint, end: downPoint, isDraggable: true };
+  const topEdge: EdgeProperties = { start: nextUpPoint, end: upPoint };
+  const bottomEdge: EdgeProperties = { start: nextDownPoint, end: downPoint };
+  return [verticalEdge, topEdge, bottomEdge];
+});
+
+// This is used for plane ID.
+// We can use this name, for example you want to move the box when front plane is dragged.
+export const SIDE_PLANE_NAMES = ["bottom", "top", "front", "back", "left", "right"];