@reearth/core 0.0.1

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

@@ -0,0 +1,375 @@
+import {
+  Cartesian3,
+  HeadingPitchRoll,
+  Quaternion,
+  Math as CesiumMath,
+  TranslationRotationScale,
+  Cartesian2,
+  Cartographic,
+} from "cesium";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCesium } from "resium";
+
+import type { Property } from "..";
+import { LayerEditEvent } from "../../../..";
+import { sampleTerrainHeightFromCartesian, updateMapController } from "../../../common";
+import { useContext } from "../../context";
+import {
+  type FeatureProps,
+  toColor,
+  toTimeInterval,
+  toDistanceDisplayCondition,
+} from "../../utils";
+import type { EdgeEventCallback } from "../Edge";
+import type { PointEventCallback } from "../ScalePoints";
+import { computeMouseMoveAmount, updateTrs } from "../utils";
+
+export const useHooks = ({
+  property,
+  geometry,
+  feature,
+  onLayerEdit,
+}: Pick<FeatureProps<Property>, "property" | "geometry" | "feature"> & {
+  onLayerEdit?: (e: LayerEditEvent) => void;
+}) => {
+  const { viewer } = useCesium();
+  const ctx = useContext();
+  const {
+    fillColor,
+    outlineColor,
+    activeOutlineColor,
+    outlineWidth,
+    draggableOutlineColor,
+    activeDraggableOutlineColor,
+    draggableOutlineWidth,
+    pointFillColor,
+    pointOutlineColor,
+    activePointOutlineColor,
+    axisLineColor,
+    cursor,
+    allowEnterGround,
+  } = property ?? {};
+
+  const [terrainHeightEstimate, setTerrainHeightEstimate] = useState(0);
+  const [trs] = useState(() =>
+    updateTrs(
+      new TranslationRotationScale(),
+      property,
+      terrainHeightEstimate,
+      geometry,
+      allowEnterGround,
+    ),
+  );
+
+  const inProgressSamplingTerrainHeight = useRef(false);
+  const updateTerrainHeight = useCallback(() => {
+    if (inProgressSamplingTerrainHeight.current) {
+      return;
+    }
+
+    if (!allowEnterGround && viewer) {
+      inProgressSamplingTerrainHeight.current = true;
+      sampleTerrainHeightFromCartesian(viewer.scene, trs.translation).then(v => {
+        setTerrainHeightEstimate(v ?? 0);
+        inProgressSamplingTerrainHeight.current = false;
+      });
+    }
+  }, [allowEnterGround, viewer, trs]);
+
+  const { requestRender } = useContext();
+
+  useEffect(() => {
+    updateTrs(trs, property, terrainHeightEstimate, geometry, allowEnterGround);
+    requestRender?.();
+    updateTerrainHeight();
+  }, [
+    property,
+    geometry,
+    trs,
+    viewer,
+    terrainHeightEstimate,
+    updateTerrainHeight,
+    allowEnterGround,
+    requestRender,
+  ]);
+
+  const style = useMemo(
+    () => ({
+      fillColor: toColor(fillColor),
+      outlineColor: toColor(outlineColor),
+      activeOutlineColor: toColor(activeOutlineColor),
+      draggableOutlineColor: toColor(draggableOutlineColor),
+      activeDraggableOutlineColor: toColor(activeDraggableOutlineColor),
+      outlineWidth,
+      draggableOutlineWidth,
+      fill: !!fillColor,
+      outline: !!outlineColor,
+    }),
+    [
+      fillColor,
+      outlineColor,
+      activeOutlineColor,
+      outlineWidth,
+      draggableOutlineWidth,
+      draggableOutlineColor,
+      activeDraggableOutlineColor,
+    ],
+  );
+
+  const scalePointStyle = useMemo(
+    () => ({
+      pointFillColor: toColor(pointFillColor) ?? style.fillColor,
+      pointOutlineColor: toColor(pointOutlineColor) ?? style.outlineColor,
+      activePointOutlineColor: toColor(activePointOutlineColor) ?? style.outlineColor,
+      axisLineColor: toColor(axisLineColor) ?? style.outlineColor,
+    }),
+    [pointFillColor, pointOutlineColor, axisLineColor, style, activePointOutlineColor],
+  );
+
+  // ScalePoint event handlers
+  const currentPointIndex = useRef<number>();
+  const handlePointMouseDown: PointEventCallback = useCallback(
+    (_, { index }) => {
+      if (!viewer) {
+        return;
+      }
+      updateMapController(viewer, false);
+      currentPointIndex.current = index;
+    },
+    [viewer],
+  );
+  const prevMousePosition2dForPoint = useRef<Cartesian2>();
+  const handlePointMouseMove: PointEventCallback = useCallback(
+    (e, { position, oppositePosition, pointLocal, index, layerId }) => {
+      if (
+        currentPointIndex.current !== index ||
+        !position ||
+        !oppositePosition ||
+        !pointLocal ||
+        !viewer
+      ) {
+        return;
+      }
+
+      const mousePosition = e.startPosition;
+      if (prevMousePosition2dForPoint.current === undefined) {
+        prevMousePosition2dForPoint.current = new Cartesian2(mousePosition.x, mousePosition.y);
+        return;
+      }
+
+      const currentMousePosition2d = new Cartesian2(mousePosition.x, mousePosition.y);
+
+      const axisVector = Cartesian3.subtract(position, oppositePosition, new Cartesian3());
+      const length = Cartesian3.magnitude(axisVector);
+      const scaleDirection = Cartesian3.normalize(axisVector, new Cartesian3());
+
+      const { scaleAmount, pixelLengthAfterScaling } = computeMouseMoveAmount(
+        viewer.scene,
+        {
+          startPosition: prevMousePosition2dForPoint.current,
+          endPosition: currentMousePosition2d,
+        },
+        position,
+        scaleDirection,
+        length,
+      );
+
+      prevMousePosition2dForPoint.current = currentMousePosition2d.clone();
+
+      const axisLocal = Cartesian3.normalize(pointLocal, new Cartesian3());
+      const xDot = Math.abs(Cartesian3.dot(new Cartesian3(1, 0, 0), axisLocal));
+      const yDot = Math.abs(Cartesian3.dot(new Cartesian3(0, 1, 0), axisLocal));
+      const zDot = Math.abs(Cartesian3.dot(new Cartesian3(0, 0, 1), axisLocal));
+
+      const isProportionalScaling = xDot && yDot && zDot;
+
+      // When downscaling, stop at 20px length.
+      if (scaleAmount < 0) {
+        const isDiagonal = axisLocal.x && axisLocal.y && axisLocal.y;
+        const pixelSideLengthAfterScaling = isDiagonal
+          ? pixelLengthAfterScaling / Math.sqrt(2)
+          : pixelLengthAfterScaling;
+        if (pixelSideLengthAfterScaling < 20) {
+          // Do nothing if scaling down will make the box smaller than 20px
+          return;
+        }
+      }
+
+      // Compute scale components along xyz
+      const scaleStep = Cartesian3.multiplyByScalar(
+        // Taking abs because scaling step is independent of axis direction
+        // Scaling step is negative when scaling down and positive when scaling up
+        Cartesian3.abs(
+          // Extract scale components along the axis
+          Cartesian3.multiplyComponents(
+            trs.scale,
+            // For proportional scaling we scale equally along xyz
+            isProportionalScaling ? new Cartesian3(1, 1, 1) : axisLocal,
+            new Cartesian3(),
+          ),
+          new Cartesian3(),
+        ),
+        scaleAmount,
+        new Cartesian3(),
+      );
+
+      // Move the box by half the scale amount in the direction of scaling so
+      // that the opposite end remains stationary.
+      const moveStep = Cartesian3.multiplyByScalar(axisVector, scaleAmount / 2, new Cartesian3());
+
+      // Prevent scaling in Z axis if it will result in the box going underground.
+      const isDraggingBottomScalePoint = axisLocal.z < 0;
+      const isUpscaling = scaleAmount > 0;
+      if (!allowEnterGround && isUpscaling && isDraggingBottomScalePoint) {
+        const boxCenterHeight = Cartographic.fromCartesian(
+          trs.translation,
+          undefined,
+          new Cartographic(),
+        ).height;
+        const bottomHeight = boxCenterHeight - trs.scale.z / 2;
+        const bottomHeightAfterScaling = bottomHeight - Math.abs(moveStep.z);
+        if (bottomHeightAfterScaling < 0) {
+          scaleStep.z = 0;
+        }
+      }
+
+      const nextScale = new Cartesian3();
+      const nextTranslation = new Cartesian3();
+
+      Cartesian3.add(trs.scale, scaleStep, nextScale);
+      Cartesian3.add(trs.translation, moveStep, nextTranslation);
+
+      const cartographic = viewer?.scene.globe.ellipsoid.cartesianToCartographic(
+        nextTranslation,
+      ) as Cartographic;
+
+      onLayerEdit?.({
+        layerId,
+        scale: {
+          width: nextScale.x,
+          length: nextScale.y,
+          height: nextScale.z,
+          location: {
+            lat: CesiumMath.toDegrees(cartographic?.latitude),
+            lng: CesiumMath.toDegrees(cartographic?.longitude),
+            height: cartographic?.height,
+          },
+        },
+      });
+      ctx?.onLayerEdit?.({
+        layerId,
+        scale: {
+          width: nextScale.x,
+          length: nextScale.y,
+          height: nextScale.z,
+          location: {
+            lat: CesiumMath.toDegrees(cartographic?.latitude),
+            lng: CesiumMath.toDegrees(cartographic?.longitude),
+            height: cartographic?.height,
+          },
+        },
+      });
+    },
+    [trs, viewer, allowEnterGround, ctx, onLayerEdit],
+  );
+  const handlePointMouseUp: PointEventCallback = useCallback(() => {
+    if (!viewer) {
+      return;
+    }
+    currentPointIndex.current = undefined;
+    prevMousePosition2dForPoint.current = undefined;
+    updateMapController(viewer, true);
+  }, [viewer]);
+
+  // Edge event handlers
+  const currentEdgeIndex = useRef<number>();
+  const handleEdgeMouseDown: EdgeEventCallback = useCallback(
+    (_, { index }) => {
+      if (!viewer) {
+        return;
+      }
+      currentEdgeIndex.current = index;
+      updateMapController(viewer, false);
+    },
+    [viewer],
+  );
+  const prevMouseXAxisForEdge = useRef<number>();
+  const handleEdgeMouseMove: EdgeEventCallback = useCallback(
+    (e, { index, layerId }) => {
+      if (currentEdgeIndex.current !== index) {
+        return;
+      }
+
+      const mousePosition = e.startPosition;
+      if (prevMouseXAxisForEdge.current === undefined) {
+        prevMouseXAxisForEdge.current = mousePosition.x;
+        return;
+      }
+
+      const dx = mousePosition.x - prevMouseXAxisForEdge.current;
+      prevMouseXAxisForEdge.current = mousePosition.x;
+      const sensitivity = 0.05;
+      const hpr = new HeadingPitchRoll(0, 0, 0);
+      // -dx because the screen coordinates is opposite to local coordinates space.
+      hpr.heading = -dx * sensitivity;
+      hpr.pitch = 0;
+      hpr.roll = 0;
+
+      const nextRotation = new Quaternion();
+
+      Quaternion.multiply(trs.rotation, Quaternion.fromHeadingPitchRoll(hpr), nextRotation);
+
+      const { heading, pitch, roll } = HeadingPitchRoll.fromQuaternion(nextRotation);
+
+      onLayerEdit?.({
+        layerId,
+        rotate: {
+          heading,
+          pitch,
+          roll,
+        },
+      });
+      ctx?.onLayerEdit?.({
+        layerId,
+        rotate: {
+          heading,
+          pitch,
+          roll,
+        },
+      });
+    },
+    [trs, ctx, onLayerEdit],
+  );
+  const handleEdgeMouseUp: EdgeEventCallback = useCallback(() => {
+    if (!viewer) {
+      return;
+    }
+    currentEdgeIndex.current = undefined;
+    prevMouseXAxisForEdge.current = undefined;
+    updateMapController(viewer, true);
+  }, [viewer]);
+
+  useEffect(() => {
+    document.body.style.cursor = cursor || "default";
+  }, [cursor]);
+
+  const availability = useMemo(() => toTimeInterval(feature?.interval), [feature?.interval]);
+  const distanceDisplayCondition = useMemo(
+    () => toDistanceDisplayCondition(property?.near, property?.far),
+    [property?.near, property?.far],
+  );
+
+  return {
+    style,
+    trs,
+    scalePointStyle,
+    availability,
+    distanceDisplayCondition,
+    handlePointMouseDown,
+    handlePointMouseMove,
+    handlePointMouseUp,
+    handleEdgeMouseDown,
+    handleEdgeMouseMove,
+    handleEdgeMouseUp,
+  };
+};

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

@@ -0,0 +1,112 @@
+import {
+  CallbackProperty,
+  Cartesian3,
+  Color,
+  ColorMaterialProperty,
+  Matrix4,
+  ScreenSpaceEventHandler,
+  ScreenSpaceEventType,
+  TranslationRotationScale,
+} from "cesium";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCesium } from "resium";
+
+import type { EventCallback } from "../../../../../Map";
+import { getTag } from "../../utils";
+import type { EdgeEventCallback, EdgeProperties } from "../Edge";
+
+export const useHooks = ({
+  id,
+  index,
+  edge,
+  isHovered,
+  fillColor,
+  trs,
+  hoverColor,
+  onMouseDown,
+  onMouseMove,
+  onMouseUp,
+}: {
+  id: string;
+  index: number;
+  edge: EdgeProperties;
+  trs: TranslationRotationScale;
+  isHovered: boolean;
+  fillColor?: Color;
+  hoverColor?: Color;
+  width?: number;
+  onMouseDown?: EdgeEventCallback;
+  onMouseMove?: EdgeEventCallback;
+  onMouseUp?: EdgeEventCallback;
+  onMouseEnter?: EdgeEventCallback;
+  onMouseLeave?: EdgeEventCallback;
+}) => {
+  const { viewer } = useCesium();
+  const [cbp] = useState(
+    () =>
+      new CallbackProperty(() => {
+        const position1 = new Cartesian3();
+        const position2 = new Cartesian3();
+        const matrix = Matrix4.fromTranslationRotationScale(trs);
+        Matrix4.multiplyByPoint(matrix, edge.start, position1);
+        Matrix4.multiplyByPoint(matrix, edge.end, position2);
+        return [position1, position2];
+      }, false),
+  );
+
+  const isEdgeHovered = useRef(false);
+  const [outlineColor] = useState(
+    () =>
+      new ColorMaterialProperty(
+        new CallbackProperty(
+          () => (isEdgeHovered.current ? hoverColor ?? fillColor : fillColor),
+          false,
+        ),
+      ),
+  );
+  useEffect(() => {
+    isEdgeHovered.current = isHovered;
+  }, [isHovered]);
+
+  const handleMouseDown: EventCallback = useCallback(
+    e => {
+      if (!viewer) {
+        return;
+      }
+      const currentLayerId = getTag(viewer.scene.pick(e.position)?.id)?.layerId;
+      if (currentLayerId !== id) {
+        return;
+      }
+      onMouseDown?.(e, { layerId: id, index });
+    },
+    [onMouseDown, id, index, viewer],
+  );
+
+  const handleMouseMove: EventCallback = useCallback(
+    e => {
+      onMouseMove?.(e, { layerId: id, index });
+    },
+    [onMouseMove, index, id],
+  );
+
+  const handleMouseUp: EventCallback = useCallback(
+    e => {
+      onMouseUp?.(e, { layerId: id, index });
+    },
+    [onMouseUp, index, id],
+  );
+
+  const eventHandler = useMemo(() => new ScreenSpaceEventHandler(viewer?.scene.canvas), [viewer]);
+  useEffect(() => {
+    eventHandler.setInputAction(handleMouseDown, ScreenSpaceEventType.LEFT_DOWN);
+    eventHandler.setInputAction(handleMouseMove, ScreenSpaceEventType.MOUSE_MOVE);
+    eventHandler.setInputAction(handleMouseUp, ScreenSpaceEventType.LEFT_UP);
+  }, [eventHandler, handleMouseDown, handleMouseMove, handleMouseUp]);
+
+  useEffect(() => () => eventHandler.destroy(), [eventHandler]);
+
+  return {
+    cbp,
+    outlineColor,
+  };
+};

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

@@ -0,0 +1,174 @@
+import {
+  CallbackProperty,
+  Cartesian3,
+  Color,
+  JulianDate,
+  Matrix4,
+  PolylineDashMaterialProperty,
+  PositionProperty,
+  Quaternion,
+  ScreenSpaceEventHandler,
+  ScreenSpaceEventType,
+  TranslationRotationScale,
+} from "cesium";
+import { useCallback, useMemo, useState, useEffect, useRef } from "react";
+import { useCesium } from "resium";
+
+import type { EventCallback } from "../../../../../Map";
+import { getTag } from "../../utils";
+import type { PointEventCallback, ScalePointProperties } from "../ScalePoints";
+
+export const useHooks = ({
+  id,
+  index,
+  scalePoint,
+  isHovered,
+  pointOutlineColor,
+  hoverPointOutlineColor,
+  axisLineColor,
+  trs,
+  dimensions,
+  onPointMouseDown,
+  onPointMouseMove,
+  onPointMouseUp,
+}: {
+  id: string;
+  index: number;
+  scalePoint: ScalePointProperties;
+  trs: TranslationRotationScale;
+  isHovered: boolean;
+  pointOutlineColor?: Color;
+  hoverPointOutlineColor?: Color;
+  axisLineColor?: Color;
+  dimensions?: { width: number; height: number; length: number };
+  onPointMouseDown?: PointEventCallback;
+  onPointMouseMove?: PointEventCallback;
+  onPointMouseUp?: PointEventCallback;
+}) => {
+  const layerId = `${id}-${index}`;
+  const oppositeLayerId = `${id}-opposite-${index}`;
+
+  const { viewer } = useCesium();
+
+  const [entitiesPosition] = useState(() => {
+    const point = new Cartesian3();
+    const oppositePoint = new Cartesian3();
+
+    const pointProperty = new CallbackProperty(() => {
+      const matrix = Matrix4.fromTranslationRotationScale(trs);
+      Matrix4.multiplyByPoint(matrix, scalePoint.point, point);
+      return point;
+    }, false) as unknown as PositionProperty;
+    const oppositePointProperty = new CallbackProperty(() => {
+      const matrix = Matrix4.fromTranslationRotationScale(trs);
+      Matrix4.multiplyByPoint(matrix, scalePoint.oppositePoint, oppositePoint);
+      return oppositePoint;
+    }, false) as unknown as PositionProperty;
+
+    return {
+      point: pointProperty,
+      oppositePoint: oppositePointProperty,
+      axisLine: new CallbackProperty(
+        () => [
+          pointProperty.getValue(JulianDate.now()),
+          oppositePointProperty.getValue(JulianDate.now()),
+        ],
+        false,
+      ),
+    };
+  });
+
+  const isScalePointHovered = useRef(false);
+  const [pointOutlineColorCb] = useState(
+    () =>
+      new CallbackProperty(
+        () => (isScalePointHovered.current ? hoverPointOutlineColor : pointOutlineColor),
+        false,
+      ),
+  );
+  useEffect(() => {
+    isScalePointHovered.current = isHovered;
+  }, [isHovered]);
+
+  const [cesiumDimensions] = useState(
+    () => new Cartesian3(dimensions?.width, dimensions?.length, dimensions?.height),
+  );
+  const [cesiumDimensionsCallbackProperty] = useState(
+    () => new CallbackProperty(() => cesiumDimensions, false),
+  );
+  const [orientation] = useState(() => new CallbackProperty(() => Quaternion.IDENTITY, false));
+  const axisColorProperty = useMemo(
+    () => new PolylineDashMaterialProperty({ color: axisLineColor, dashLength: 8 }),
+    [axisLineColor],
+  );
+
+  const isOppositePointClicked = useRef(false);
+  const handlePointMouseDown: EventCallback = useCallback(
+    e => {
+      if (!viewer) {
+        return;
+      }
+      const currentLayerId = getTag(viewer.scene.pick(e.position)?.id)?.layerId;
+      isOppositePointClicked.current = currentLayerId === oppositeLayerId;
+      if (currentLayerId === layerId || currentLayerId === oppositeLayerId) {
+        onPointMouseDown?.(e, {
+          layerId: isOppositePointClicked.current ? oppositeLayerId : layerId,
+          index,
+          opposite: isOppositePointClicked.current,
+        });
+      }
+    },
+    [onPointMouseDown, index, layerId, oppositeLayerId, viewer],
+  );
+  const handlePointMouseMove: EventCallback = useCallback(
+    e => {
+      onPointMouseMove?.(e, {
+        layerId: isOppositePointClicked.current ? oppositeLayerId : layerId,
+        index,
+        opposite: isOppositePointClicked.current,
+        position: isOppositePointClicked.current
+          ? entitiesPosition.oppositePoint.getValue(JulianDate.now())
+          : entitiesPosition.point.getValue(JulianDate.now()),
+        oppositePosition: isOppositePointClicked.current
+          ? entitiesPosition.point.getValue(JulianDate.now())
+          : entitiesPosition.oppositePoint.getValue(JulianDate.now()),
+        pointLocal: isOppositePointClicked ? scalePoint.oppositePoint : scalePoint.point,
+      });
+    },
+    [onPointMouseMove, index, entitiesPosition, scalePoint, layerId, oppositeLayerId],
+  );
+  const handlePointMouseUp: EventCallback = useCallback(
+    e => {
+      onPointMouseUp?.(e, {
+        layerId: isOppositePointClicked.current ? oppositeLayerId : layerId,
+        index,
+        opposite: isOppositePointClicked.current,
+      });
+    },
+    [onPointMouseUp, index, layerId, oppositeLayerId],
+  );
+
+  useEffect(() => {
+    Cartesian3.clone(
+      new Cartesian3(dimensions?.width, dimensions?.length, dimensions?.height),
+      cesiumDimensions,
+    );
+  }, [dimensions, cesiumDimensions]);
+
+  const eventHandler = useMemo(() => new ScreenSpaceEventHandler(viewer?.scene.canvas), [viewer]);
+  useEffect(() => {
+    eventHandler.setInputAction(handlePointMouseDown, ScreenSpaceEventType.LEFT_DOWN);
+    eventHandler.setInputAction(handlePointMouseMove, ScreenSpaceEventType.MOUSE_MOVE);
+    eventHandler.setInputAction(handlePointMouseUp, ScreenSpaceEventType.LEFT_UP);
+  }, [eventHandler, handlePointMouseDown, handlePointMouseMove, handlePointMouseUp]);
+
+  useEffect(() => () => eventHandler.destroy(), [eventHandler]);
+
+  return {
+    entitiesPosition,
+    pointOutlineColorCb,
+    cesiumDimensionsCallbackProperty,
+    orientation,
+    axisColorProperty,
+  };
+};