@reearth/core 0.0.1

package/src/engines/Cesium/Feature/Box/hooks/side.ts

@@ -0,0 +1,72 @@
+import {
+  Axis,
+  CallbackProperty,
+  Cartesian3,
+  Color,
+  Matrix4,
+  Plane as CesiumPlane,
+  PositionProperty,
+  TranslationRotationScale,
+} from "cesium";
+import { useMemo, useRef, useState, useEffect } from "react";
+
+import { setPlaneDimensions } from "../utils";
+
+export const useHooks = ({
+  planeLocal,
+  isActive,
+  outlineColor,
+  activeOutlineColor,
+  trs,
+}: {
+  planeLocal: CesiumPlane;
+  isActive: boolean;
+  trs: TranslationRotationScale;
+  outlineColor?: Color;
+  activeOutlineColor?: Color;
+}) => {
+  const cbRef = useMemo(
+    () => new CallbackProperty(() => trs.translation, false) as unknown as PositionProperty,
+    [trs],
+  );
+  const [plane, dimension, orientation] = useMemo(() => {
+    return [
+      new CallbackProperty(() => {
+        const scratchScaleMatrix = new Matrix4();
+        const scaleMatrix = Matrix4.fromScale(trs.scale, scratchScaleMatrix);
+        return CesiumPlane.transform(
+          planeLocal,
+          scaleMatrix,
+          new CesiumPlane(Cartesian3.UNIT_Z, 0),
+        );
+      }, false),
+      new CallbackProperty(() => {
+        const normalAxis = planeLocal.normal.x ? Axis.X : planeLocal.normal.y ? Axis.Y : Axis.Z;
+        const dimension = new Cartesian3();
+        setPlaneDimensions(trs.scale, normalAxis, dimension);
+        return dimension;
+      }, false),
+      new CallbackProperty(() => trs.rotation, false),
+    ];
+  }, [trs, planeLocal]);
+
+  const isActiveRef = useRef(false);
+  const [outlineColorCb] = useState(
+    () =>
+      new CallbackProperty(
+        () => (isActiveRef.current ? activeOutlineColor ?? outlineColor : outlineColor),
+        false,
+      ),
+  );
+  useEffect(() => {
+    isActiveRef.current = isActive;
+  }, [isActive]);
+
+  return {
+    cbRef,
+    plane,
+    dimension,
+    orientation,
+    outlineColorCb,
+  };
+};

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

@@ -0,0 +1,156 @@
+import React, { memo } from "react";
+
+import { LayerEditEvent } from "../../..";
+import type { BoxAppearance, LatLngHeight } from "../../../../mantle";
+import type { FeatureComponentConfig, FeatureProps } from "../../Feature";
+
+import { BOX_EDGES, SCALE_POINTS, SIDE_PLANES, SIDE_PLANE_NAMES } from "./constants";
+import { Edge } from "./Edge";
+import { useHooks } from "./hooks/box";
+import { ScalePoints } from "./ScalePoints";
+import { Side } from "./Side";
+
+export type Props = FeatureProps<Property> & { onLayerEdit?: (e: LayerEditEvent) => void };
+
+export type Property = BoxAppearance & {
+  // compat
+  location?: LatLngHeight;
+};
+
+const Box: React.FC<Props> = memo(function BoxPresenter({
+  property,
+  geometry,
+  isVisible,
+  layer,
+  feature,
+  onLayerEdit,
+}) {
+  const {
+    show = true,
+    height = 100,
+    width = 100,
+    length = 100,
+    pointOutlineWidth,
+    axisLineWidth,
+    scalePoint = true,
+    axisLine = true,
+    activeBox,
+    activeEdgeIndex,
+    activeScalePointIndex,
+    hideIndicator,
+    disabledSelection,
+  } = property ?? {};
+  const {
+    style,
+    trs,
+    scalePointStyle,
+    availability,
+    distanceDisplayCondition,
+    handlePointMouseDown,
+    handlePointMouseMove,
+    handlePointMouseUp,
+    handleEdgeMouseDown,
+    handleEdgeMouseMove,
+    handleEdgeMouseUp,
+  } = useHooks({ property, geometry, feature, onLayerEdit });
+
+  const scalePointDimension = ((width + height + length) / 3) * 0.05;
+  const [layerId, featureId] = [layer?.id, feature?.id];
+
+  return !isVisible || !show ? null : (
+    <>
+      {SIDE_PLANES.map((plane, i) => (
+        <Side
+          key={`${layerId}-plane-${SIDE_PLANE_NAMES[i]}`}
+          layerId={`${layerId}-plane-${SIDE_PLANE_NAMES[i]}`}
+          featureId={`${featureId}-plane-${SIDE_PLANE_NAMES[i]}`}
+          planeLocal={plane}
+          fill={style.fill}
+          fillColor={style.fillColor}
+          outlineColor={style.outlineColor}
+          isActive={disabledSelection ? !!activeBox : false}
+          activeOutlineColor={style.activeOutlineColor}
+          trs={trs}
+          availability={availability}
+          distanceDisplayCondition={distanceDisplayCondition}
+          hideIndicator={hideIndicator}
+        />
+      ))}
+      {BOX_EDGES.map((edge, i) => {
+        return (
+          <Edge
+            key={`${layerId}-edge-${i}`}
+            featureId={`${featureId}-edge${edge.isDraggable ? `-draggable` : ""}-${i}`}
+            layerId={`${layerId}-edge${edge.isDraggable ? `-draggable` : ""}-${i}`}
+            index={i}
+            edge={edge}
+            isHovered={
+              disabledSelection
+                ? activeEdgeIndex === i || (!edge.isDraggable && !!activeBox)
+                : false
+            }
+            width={
+              edge.isDraggable && disabledSelection
+                ? style.draggableOutlineWidth
+                : style.outlineWidth
+            }
+            fillColor={edge.isDraggable ? style.draggableOutlineColor : style.outlineColor}
+            hoverColor={
+              disabledSelection
+                ? edge.isDraggable
+                  ? style.activeDraggableOutlineColor
+                  : style.activeOutlineColor
+                : undefined
+            }
+            trs={trs}
+            onMouseDown={edge.isDraggable && disabledSelection ? handleEdgeMouseDown : undefined}
+            onMouseMove={edge.isDraggable && disabledSelection ? handleEdgeMouseMove : undefined}
+            onMouseUp={edge.isDraggable && disabledSelection ? handleEdgeMouseUp : undefined}
+            availability={availability}
+            distanceDisplayCondition={distanceDisplayCondition}
+            hideIndicator={hideIndicator}
+          />
+        );
+      })}
+      {scalePoint &&
+        SCALE_POINTS.map((vector, i) => (
+          <ScalePoints
+            key={`${layerId}-scale-point-${i}`}
+            layerId={`${layerId}-scale-point`}
+            featureId={`${featureId}-scale-point`}
+            index={i}
+            scalePoint={vector}
+            trs={trs}
+            isHovered={disabledSelection ? activeScalePointIndex === i : false}
+            pointFillColor={disabledSelection ? scalePointStyle.pointFillColor : undefined}
+            pointOutlineColor={disabledSelection ? scalePointStyle.pointOutlineColor : undefined}
+            hoverPointOutlineColor={
+              disabledSelection ? scalePointStyle.activePointOutlineColor : undefined
+            }
+            pointOutlineWidth={pointOutlineWidth}
+            axisLineColor={scalePointStyle.axisLineColor}
+            axisLineWidth={axisLineWidth}
+            dimensions={{
+              width: scalePointDimension,
+              height: scalePointDimension,
+              length: scalePointDimension,
+            }}
+            visiblePoint={scalePoint}
+            visibleAxisLine={axisLine && activeScalePointIndex === i}
+            onPointMouseDown={disabledSelection ? handlePointMouseDown : undefined}
+            onPointMouseMove={disabledSelection ? handlePointMouseMove : undefined}
+            onPointMouseUp={disabledSelection ? handlePointMouseUp : undefined}
+            availability={availability}
+            distanceDisplayCondition={distanceDisplayCondition}
+            hideIndicator={hideIndicator}
+          />
+        ))}
+    </>
+  );
+});
+
+export default Box;
+
+export const config: FeatureComponentConfig = {
+  noLayer: true,
+};

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

@@ -0,0 +1,168 @@
+import {
+  Axis,
+  Cartesian2,
+  Cartesian3,
+  HeadingPitchRoll,
+  Matrix3,
+  Matrix4,
+  Quaternion,
+  Ray,
+  Scene,
+  Transforms,
+  TranslationRotationScale,
+} from "cesium";
+
+import type { Geometry } from "../../../../mantle";
+import { translationWithClamping } from "../../utils/utils";
+
+import type { Property } from ".";
+
+export const updateTrs = (
+  trs: TranslationRotationScale,
+  property: Property | undefined,
+  terrainHeightEstimation: number,
+  geometry?: Geometry,
+  allowEnterGround?: boolean,
+) => {
+  const { height, width, length, heading, pitch, roll } = property ?? {};
+
+  const coordinates =
+    geometry?.type === "Point"
+      ? geometry.coordinates
+      : property?.location
+        ? [property.location.lng, property.location.lat, property.location.height ?? 0]
+        : undefined;
+
+  const translation = coordinates
+    ? Cartesian3.fromDegrees(coordinates[0], coordinates[1], coordinates[2])
+    : undefined;
+  if (translation) {
+    Cartesian3.clone(translation, trs.translation);
+  }
+  if (!allowEnterGround) {
+    translationWithClamping(trs, !!allowEnterGround, terrainHeightEstimation);
+  }
+
+  const rotation =
+    heading && pitch && roll
+      ? Matrix3.fromHeadingPitchRoll(new HeadingPitchRoll(heading, pitch, roll))
+      : Matrix3.getRotation(
+          Matrix4.getMatrix3(Transforms.eastNorthUpToFixedFrame(trs.translation), new Matrix3()),
+          new Matrix3(),
+        );
+  Quaternion.clone(Quaternion.fromRotationMatrix(rotation), trs.rotation);
+
+  Cartesian3.clone(new Cartesian3(width || 100, length || 100, height || 100), trs.scale);
+
+  return trs;
+};
+
+function screenProjectVector(
+  scene: Scene,
+  position: Cartesian3,
+  direction: Cartesian3,
+  length: number,
+  result: Cartesian2,
+): Cartesian2 {
+  const ray = new Ray();
+  ray.origin = position;
+  ray.direction = direction;
+  const nearPoint2d = scene.cartesianToCanvasCoordinates(Ray.getPoint(ray, 0), new Cartesian2());
+
+  const farPoint2d = scene.cartesianToCanvasCoordinates(
+    Ray.getPoint(ray, length),
+    new Cartesian2(),
+  );
+  const screenVector2d = Cartesian2.subtract(farPoint2d, nearPoint2d, result);
+  return screenVector2d;
+}
+
+const dotMousePosition = (
+  scene: Scene,
+  mouseMove: {
+    startPosition: Cartesian2;
+    endPosition: Cartesian2;
+  },
+  position: Cartesian3,
+  direction: Cartesian3,
+) => {
+  const mouseVector2d = Cartesian2.subtract(
+    mouseMove.endPosition,
+    mouseMove.startPosition,
+    new Cartesian2(),
+  );
+
+  // Project the vector of unit length to the screen
+  const screenVector2d = screenProjectVector(scene, position, direction, 1, new Cartesian2());
+  const screenNormal2d = Cartesian2.normalize(screenVector2d, new Cartesian2());
+
+  const pixelsPerStep = Cartesian2.magnitude(screenVector2d);
+  const moveAmountPixels = Cartesian2.dot(mouseVector2d, screenNormal2d);
+
+  return {
+    pixelsPerStep,
+    moveAmount: moveAmountPixels / pixelsPerStep,
+  };
+};
+
+export const computeMoveAmount = (
+  scene: Scene,
+  mouseMove: {
+    startPosition: Cartesian2;
+    endPosition: Cartesian2;
+  },
+  position: Cartesian3,
+  direction: Cartesian3,
+) => {
+  const mouseVector2d = Cartesian2.subtract(
+    mouseMove.endPosition,
+    mouseMove.startPosition,
+    new Cartesian2(),
+  );
+
+  // Project the vector of unit length to the screen
+  const screenVector2d = screenProjectVector(scene, position, direction, 1, new Cartesian2());
+  const screenNormal2d = Cartesian2.normalize(screenVector2d, new Cartesian2());
+
+  const pixelsPerStep = Cartesian2.magnitude(screenVector2d);
+  const moveAmountPixels = Cartesian2.dot(mouseVector2d, screenNormal2d);
+
+  return {
+    pixelsPerStep,
+    moveAmount: moveAmountPixels / pixelsPerStep,
+  };
+};
+
+export const computeMouseMoveAmount = (
+  scene: Scene,
+  mouseMove: {
+    startPosition: Cartesian2;
+    endPosition: Cartesian2;
+  },
+  position: Cartesian3,
+  direction: Cartesian3,
+  length: number,
+) => {
+  const { moveAmount, pixelsPerStep } = dotMousePosition(scene, mouseMove, position, direction);
+  const scaleAmount = moveAmount / length;
+  const pixelLengthAfterScaling = pixelsPerStep * length + pixelsPerStep * length * scaleAmount;
+  return { pixelLengthAfterScaling, scaleAmount };
+};
+
+// ref: https://github.com/TerriaJS/terriajs/blob/cad62a45cbee98c7561625458bec3a48510f6cbc/lib/Models/BoxDrawing.ts#L1446-L1461
+export function setPlaneDimensions(
+  boxDimensions: Cartesian3,
+  planeNormalAxis: Axis,
+  planeDimensions: Cartesian2,
+) {
+  if (planeNormalAxis === Axis.X) {
+    planeDimensions.x = boxDimensions.y;
+    planeDimensions.y = boxDimensions.z;
+  } else if (planeNormalAxis === Axis.Y) {
+    planeDimensions.x = boxDimensions.x;
+    planeDimensions.y = boxDimensions.z;
+  } else if (planeNormalAxis === Axis.Z) {
+    planeDimensions.x = boxDimensions.x;
+    planeDimensions.y = boxDimensions.y;
+  }
+}

package/src/engines/Cesium/Feature/Ellipse/index.stories.tsx

@@ -0,0 +1,48 @@
+import { Meta, StoryFn } from "@storybook/react";
+
+import { engine } from "../..";
+import { Map, Props } from "../../../../Map";
+
+export default {
+  component: Map,
+  parameters: { actions: { argTypesRegex: "^on.*" } },
+} as Meta;
+
+const Template: StoryFn<Props> = args => <Map {...args} />;
+
+export const Default = Template.bind([]);
+Default.args = {
+  engine: "cesium",
+  engines: {
+    cesium: engine,
+  },
+  ready: true,
+  layers: [
+    {
+      id: "l",
+      type: "simple",
+      data: {
+        type: "geojson",
+        value: {
+          type: "Feature",
+          geometry: {
+            type: "Point",
+            coordinates: [0, 0, 1000],
+          },
+        },
+      },
+      ellipse: {
+        radius: 1000,
+        fillColor: "#FF0000",
+      },
+    },
+  ],
+  property: {
+    tiles: [
+      {
+        id: "default",
+        tile_type: "default",
+      },
+    ],
+  },
+};

package/src/engines/Cesium/Feature/Ellipse/index.tsx

@@ -0,0 +1,91 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { CallbackProperty, Cartesian3, PositionProperty } from "cesium";
+import { useMemo } from "react";
+import { EllipseGraphics } from "resium";
+
+import type { EllipseAppearance } from "../../..";
+import { classificationType, heightReference, shadowMode } from "../../common";
+import { toColor } from "../utils";
+import {
+  EntityExt,
+  toDistanceDisplayCondition,
+  toTimeInterval,
+  type FeatureComponentConfig,
+  type FeatureProps,
+} from "../utils";
+
+export type Props = FeatureProps<Property>;
+
+export type Property = EllipseAppearance;
+
+export default function Ellipse({ id, isVisible, property, geometry, layer, feature }: Props) {
+  const { show = true } = property ?? {};
+  const coordinates = useMemo(
+    () => (geometry?.type === "Point" ? geometry.coordinates : undefined),
+    [geometry?.coordinates, geometry?.type],
+  );
+
+  const {
+    heightReference: hr,
+    shadows,
+    radius = 1000,
+    fillColor,
+    fill,
+    classificationType: ct,
+  } = property ?? {};
+  const { useTransition, translate } = layer?.transition ?? {};
+
+  const pos = useMemo(
+    () =>
+      coordinates
+        ? Cartesian3.fromDegrees(coordinates[0], coordinates[1], coordinates[2])
+        : undefined,
+    [coordinates],
+  );
+  const translateCallbackProperty = useMemo(
+    () =>
+      useTransition && translate
+        ? new CallbackProperty(() => Cartesian3.fromDegrees(...translate), false)
+        : undefined,
+    [useTransition, translate],
+  );
+
+  const semiAxisProperty = useMemo(
+    () => (useTransition ? new CallbackProperty(() => radius, false) : radius),
+    [radius],
+  );
+
+  const material = useMemo(() => toColor(fillColor), [fillColor]);
+  const availability = useMemo(() => toTimeInterval(feature?.interval), [feature?.interval]);
+  const distanceDisplayCondition = useMemo(
+    () => toDistanceDisplayCondition(property?.near, property?.far),
+    [property?.near, property?.far],
+  );
+
+  return !isVisible || !pos || !show ? null : (
+    <EntityExt
+      id={id}
+      position={(translateCallbackProperty as unknown as PositionProperty) || pos}
+      layerId={layer?.id}
+      featureId={feature?.id}
+      draggable
+      availability={availability}
+      properties={feature?.properties}>
+      <EllipseGraphics
+        // Support drawing circle, not an ellipse.
+        semiMajorAxis={semiAxisProperty}
+        semiMinorAxis={semiAxisProperty}
+        material={material}
+        fill={fill}
+        heightReference={heightReference(hr)}
+        classificationType={classificationType(ct)}
+        shadows={shadowMode(shadows)}
+        distanceDisplayCondition={distanceDisplayCondition}
+      />
+    </EntityExt>
+  );
+}
+
+export const config: FeatureComponentConfig = {
+  noLayer: true,
+};

package/src/engines/Cesium/Feature/Ellipsoid/index.tsx

@@ -0,0 +1,84 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { Cartesian3 } from "cesium";
+import { useMemo } from "react";
+import { EllipsoidGraphics } from "resium";
+
+import type { EllipsoidAppearance } from "../../..";
+import { LatLng, toColor } from "../../../../utils";
+import { heightReference, shadowMode } from "../../common";
+import {
+  EntityExt,
+  toDistanceDisplayCondition,
+  toTimeInterval,
+  type FeatureComponentConfig,
+  type FeatureProps,
+} from "../utils";
+
+export type Props = FeatureProps<Property>;
+
+export type Property = EllipsoidAppearance & {
+  // compat
+  position?: LatLng;
+  location?: LatLng;
+  height?: number;
+};
+
+export default function Ellipsoid({ id, isVisible, property, geometry, layer, feature }: Props) {
+  const { show = true } = property ?? {};
+  const coordinates = useMemo(
+    () =>
+      geometry?.type === "Point"
+        ? geometry.coordinates
+        : property?.position
+          ? [property.position.lng, property.position.lat, property.height ?? 0]
+          : property?.location
+            ? [property.location.lng, property.location.lat, property.height ?? 0]
+            : undefined,
+    [geometry?.coordinates, geometry?.type, property?.height, property?.location],
+  );
+
+  const { heightReference: hr, shadows, radius = 1000, fillColor } = property ?? {};
+
+  const pos = useMemo(
+    () =>
+      coordinates
+        ? Cartesian3.fromDegrees(coordinates[0], coordinates[1], coordinates[2])
+        : undefined,
+    [coordinates],
+  );
+
+  const raddi = useMemo(() => {
+    return new Cartesian3(radius, radius, radius);
+  }, [radius]);
+
+  const material = useMemo(() => toColor(fillColor), [fillColor]);
+  const availability = useMemo(() => toTimeInterval(feature?.interval), [feature?.interval]);
+  const distanceDisplayCondition = useMemo(
+    () => toDistanceDisplayCondition(property?.near, property?.far),
+    [property?.near, property?.far],
+  );
+
+  return !isVisible || !pos || !show ? null : (
+    <EntityExt
+      id={id}
+      position={pos}
+      layerId={layer?.id}
+      featureId={feature?.id}
+      draggable
+      legacyLocationPropertyKey="default.position"
+      availability={availability}
+      properties={feature?.properties}>
+      <EllipsoidGraphics
+        radii={raddi}
+        material={material}
+        heightReference={heightReference(hr)}
+        shadows={shadowMode(shadows)}
+        distanceDisplayCondition={distanceDisplayCondition}
+      />
+    </EntityExt>
+  );
+}
+
+export const config: FeatureComponentConfig = {
+  noLayer: true,
+};

package/src/engines/Cesium/Feature/Frustum/FrustumColorAppearance.ts

@@ -0,0 +1,38 @@
+// Ref: https://github.com/takram-design-engineering/plateau-view/blob/main/libs/pedestrian/src/FrustumAppearance.ts
+
+import { Color, Material, PerInstanceColorAppearance, VertexFormat } from "cesium";
+
+import fragmentShaderSource from "./shaders/frustumAppearance.frag.glsl?raw";
+import vertexShaderSource from "./shaders/frustumAppearance.vert.glsl?raw";
+
+export class FrustumColorAppearance extends PerInstanceColorAppearance {
+  constructor({ color = Color.WHITE, opacity = 1 }: { color?: Color; opacity?: number }) {
+    super({
+      fragmentShaderSource,
+      vertexShaderSource,
+      translucent: true,
+    });
+
+    this.material = new Material({
+      fabric: {
+        uniforms: {
+          color,
+          opacity,
+        },
+        components: {
+          diffuse: "color.rgb",
+          alpha: "opacity",
+        },
+      },
+    });
+  }
+
+  static VERTEX_FORMAT = new VertexFormat({
+    position: true,
+    normal: true,
+    st: true,
+    tangent: true,
+    bitangent: true,
+    color: true,
+  });
+}

package/src/engines/Cesium/Feature/Frustum/getFieldOfView.ts

@@ -0,0 +1,23 @@
+import { Camera, Cartesian2, PerspectiveFrustum } from "cesium";
+import invariant from "tiny-invariant";
+
+const cartesianScratch = new Cartesian2();
+
+export function getFieldOfView(camera: Camera, zoom: number): number {
+  const fov = getFieldOfViewSeparate(camera, zoom, cartesianScratch);
+  const frustum = camera.frustum;
+  invariant(frustum instanceof PerspectiveFrustum);
+  return frustum.aspectRatio > 1 ? fov.x : fov.y;
+}
+
+export function getFieldOfViewSeparate(
+  camera: Camera,
+  zoom: number,
+  result = new Cartesian2(),
+): Cartesian2 {
+  const frustum = camera.frustum;
+  invariant(frustum instanceof PerspectiveFrustum);
+  result.x = Math.atan(Math.pow(2, 1 - zoom)) * 2;
+  result.y = 2 * Math.atan(frustum.aspectRatio * Math.tan(result.x / 2));
+  return result;
+}