@reearth/core 0.0.1

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

@@ -0,0 +1,296 @@
+import {
+  Cartesian3,
+  Color,
+  HorizontalOrigin,
+  VerticalOrigin,
+  Cartesian2,
+  CallbackProperty,
+  PositionProperty,
+  Entity,
+} from "cesium";
+import { useEffect, useMemo, useRef } from "react";
+import {
+  BillboardGraphics,
+  PointGraphics,
+  LabelGraphics,
+  PolylineGraphics,
+  CesiumComponentRef,
+} from "resium";
+
+import type { MarkerAppearance } from "../../..";
+import { toCSSFont } from "../../../../utils";
+import { useIcon, ho, vo, heightReference, toColor } from "../../common";
+import { useContext } from "../context";
+import {
+  EntityExt,
+  toDistanceDisplayCondition,
+  toTimeInterval,
+  type FeatureComponentConfig,
+  type FeatureProps,
+  getTag,
+} from "../utils";
+
+import marker from "./marker.svg";
+
+export type Props = FeatureProps<Property>;
+
+export type Property = MarkerAppearance & {
+  // compat
+  location?: { lat: number; lng: number };
+  height?: number;
+};
+
+export default function Marker({ property, id, isVisible, geometry, layer, feature }: Props) {
+  const coordinates = useMemo(
+    () =>
+      geometry?.type === "Point"
+        ? property?.height
+          ? [...geometry.coordinates.slice(0, 2), property.height]
+          : geometry.coordinates
+        : property?.location
+          ? [property.location.lng, property.location.lat, property.height ?? 0]
+          : undefined,
+    [geometry?.coordinates, geometry?.type, property?.height, property?.location],
+  );
+
+  const { requestRender } = useContext();
+
+  const {
+    show = true,
+    extrude,
+    pointSize = 10,
+    style,
+    pointColor,
+    pointOutlineColor,
+    pointOutlineWidth,
+    label,
+    labelTypography,
+    labelText,
+    labelPosition: labelPos = "right",
+    labelBackground,
+    labelBackgroundColor,
+    labelBackgroundPaddingHorizontal,
+    labelBackgroundPaddingVertical,
+    image = marker,
+    imageSize,
+    imageSizeInMeters,
+    imageHorizontalOrigin: horizontalOrigin,
+    imageVerticalOrigin: verticalOrigin,
+    imageColor,
+    imageCrop: crop,
+    imageShadow: shadow,
+    imageShadowColor: shadowColor,
+    imageShadowBlur: shadowBlur,
+    imageShadowPositionX: shadowOffsetX,
+    imageShadowPositionY: shadowOffsetY,
+    eyeOffset,
+    pixelOffset,
+    heightReference: hr,
+    hideIndicator,
+  } = property ?? {};
+
+  const { useTransition, translate } = layer?.transition ?? {};
+  const translatedCoords = useMemo(
+    () => (translate ? Cartesian3.fromDegrees(...translate) : undefined),
+    [translate],
+  );
+  const translatedCoordsRef = useRef(translatedCoords);
+  translatedCoordsRef.current = translatedCoords;
+  // CallbackProperty forces to disable the request render mode,
+  // so we need to be able to switch the use of `CallbackProperty` for performance.
+  const translateCallbackProperty = useMemo(
+    () =>
+      useTransition ? new CallbackProperty(() => translatedCoordsRef.current, false) : undefined,
+    [useTransition],
+  );
+
+  const pos = useMemo(() => {
+    return coordinates
+      ? Cartesian3.fromDegrees(coordinates[0], coordinates[1], coordinates[2])
+      : undefined;
+  }, [coordinates]);
+
+  const extrudePoints = useMemo(() => {
+    return extrude && coordinates && typeof coordinates[2] === "number"
+      ? [
+          Cartesian3.fromDegrees(coordinates[0], coordinates[1], coordinates[2]),
+          Cartesian3.fromDegrees(coordinates[0], coordinates[1], 0),
+        ]
+      : undefined;
+  }, [coordinates, extrude]);
+
+  const isStyleImage = !style || style === "image";
+  const [icon, imgw, imgh] = useIcon({
+    image: isStyleImage ? image : undefined,
+    imageSize,
+    crop,
+    shadow,
+    shadowColor,
+    shadowBlur,
+    shadowOffsetX,
+    shadowOffsetY,
+  });
+
+  const cartPixelOffset = useMemo(
+    () => (pixelOffset ? new Cartesian2(...pixelOffset) : undefined),
+    [pixelOffset],
+  );
+  const cartEyeOffset = useMemo(
+    () => (eyeOffset ? new Cartesian3(...eyeOffset) : undefined),
+    [eyeOffset],
+  );
+
+  const labelPixelOffset = useMemo(() => {
+    if (cartPixelOffset) return cartPixelOffset;
+    const padding = 15;
+    const x = (isStyleImage ? imgw : pointSize) / 2 + padding;
+    const y = (isStyleImage ? imgh : pointSize) / 2 + padding;
+    return new Cartesian2(
+      labelPos.includes("left") || labelPos.includes("right")
+        ? x * (labelPos.includes("left") ? -1 : 1)
+        : 0,
+      labelPos.includes("top") || labelPos.includes("bottom")
+        ? y * (labelPos.includes("top") ? -1 : 1)
+        : 0,
+    );
+  }, [isStyleImage, imgw, pointSize, imgh, labelPos, cartPixelOffset]);
+
+  const extrudePointsLineColor = useMemo(() => {
+    return Color.WHITE.withAlpha(0.4);
+  }, []);
+
+  const entityRef = useRef<CesiumComponentRef<Entity>>(null);
+  const tag = getTag(entityRef.current?.cesiumElement);
+
+  const imageColorCesium = useMemo(
+    () =>
+      toColor(
+        tag?.isFeatureSelected && typeof layer?.["marker"]?.selectedFeatureColor === "string"
+          ? layer["marker"]?.selectedFeatureColor
+          : imageColor,
+      ),
+    [imageColor, layer, tag?.isFeatureSelected],
+  );
+  const pointColorCesium = useMemo(
+    () =>
+      toColor(
+        tag?.isFeatureSelected && typeof layer?.["marker"]?.selectedFeatureColor === "string"
+          ? layer["marker"]?.selectedFeatureColor
+          : pointColor,
+      ),
+    [pointColor, layer, tag?.isFeatureSelected],
+  );
+  const pointOutlineColorCesium = useMemo(() => toColor(pointOutlineColor), [pointOutlineColor]);
+  const labelColorCesium = useMemo(() => toColor(labelTypography?.color), [labelTypography?.color]);
+  const labelBackgroundColorCesium = useMemo(
+    () => toColor(labelBackgroundColor),
+    [labelBackgroundColor],
+  );
+  const labelBackgroundPadding = useMemo(
+    // https://cesium.com/learn/cesiumjs/ref-doc/LabelGraphics.html?classFilter=labelgra#backgroundPadding
+    () =>
+      new Cartesian2(labelBackgroundPaddingHorizontal || 7, labelBackgroundPaddingVertical || 5),
+    [labelBackgroundPaddingHorizontal, labelBackgroundPaddingVertical],
+  );
+
+  const availability = useMemo(() => toTimeInterval(feature?.interval), [feature?.interval]);
+  const distanceDisplayCondition = useMemo(
+    () => toDistanceDisplayCondition(property?.near, property?.far),
+    [property?.near, property?.far],
+  );
+
+  const stringLabelText = useMemo(() => String(labelText), [labelText]);
+
+  useEffect(() => {
+    requestRender?.();
+  });
+
+  return !pos || !isVisible || !show ? null : (
+    <>
+      {extrudePoints && (
+        <EntityExt
+          layerId={layer?.id}
+          featureId={feature?.id}
+          unselectable
+          properties={feature?.properties}
+          availability={availability}
+          hideIndicator={hideIndicator}>
+          <PolylineGraphics
+            positions={extrudePoints}
+            material={extrudePointsLineColor}
+            width={0.5}
+            distanceDisplayCondition={distanceDisplayCondition}
+          />
+        </EntityExt>
+      )}
+      <EntityExt
+        id={id}
+        position={
+          useTransition
+            ? (translateCallbackProperty as unknown as PositionProperty)
+            : translatedCoords ?? pos
+        }
+        layerId={layer?.id}
+        featureId={feature?.id}
+        ref={entityRef}
+        draggable
+        properties={feature?.properties}
+        availability={availability}
+        hideIndicator={hideIndicator}>
+        {style === "point" ? (
+          <PointGraphics
+            pixelSize={pointSize}
+            color={pointColorCesium}
+            outlineColor={pointOutlineColorCesium}
+            outlineWidth={pointOutlineWidth}
+            heightReference={heightReference(hr)}
+            distanceDisplayCondition={distanceDisplayCondition}
+          />
+        ) : (
+          <BillboardGraphics
+            image={icon}
+            color={imageColorCesium}
+            horizontalOrigin={ho(horizontalOrigin)}
+            verticalOrigin={vo(verticalOrigin)}
+            heightReference={heightReference(hr)}
+            distanceDisplayCondition={distanceDisplayCondition}
+            sizeInMeters={imageSizeInMeters}
+            pixelOffset={cartPixelOffset}
+            eyeOffset={cartEyeOffset}
+          />
+        )}
+        {label && (
+          <LabelGraphics
+            horizontalOrigin={
+              labelPos === "right" || labelPos == "righttop" || labelPos === "rightbottom"
+                ? HorizontalOrigin.LEFT
+                : labelPos === "left" || labelPos === "lefttop" || labelPos === "leftbottom"
+                  ? HorizontalOrigin.RIGHT
+                  : HorizontalOrigin.CENTER
+            }
+            verticalOrigin={
+              labelPos === "bottom" || labelPos === "rightbottom" || labelPos === "leftbottom"
+                ? VerticalOrigin.TOP
+                : labelPos === "top" || labelPos === "righttop" || labelPos === "lefttop"
+                  ? VerticalOrigin.BOTTOM
+                  : VerticalOrigin.CENTER
+            }
+            pixelOffset={labelPixelOffset}
+            fillColor={labelColorCesium}
+            font={toCSSFont(labelTypography, { fontSize: 30 })}
+            text={stringLabelText}
+            showBackground={labelBackground}
+            backgroundColor={labelBackgroundColorCesium}
+            backgroundPadding={labelBackgroundPadding}
+            heightReference={heightReference(hr)}
+            distanceDisplayCondition={distanceDisplayCondition}
+          />
+        )}
+      </EntityExt>
+    </>
+  );
+}
+
+export const config: FeatureComponentConfig = {
+  noLayer: true,
+};

package/src/engines/Cesium/Feature/Marker/marker.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.0292 22.7354C15.1183 21.8682 16.207 20.8883 17.226 19.8127C20.1976 16.676 22 13.3716 22 10C22 4.47715 17.5228 0 12 0C6.47715 0 2 4.47715 2 10C2 13.3716 3.8024 16.676 6.77405 19.8127C7.793 20.8883 8.88175 21.8682 9.97082 22.7354C10.3526 23.0394 10.7078 23.3081 11.0278 23.5392C11.2228 23.68 11.3649 23.7784 11.4453 23.8321C11.7812 24.056 12.2188 24.056 12.5547 23.8321C12.6351 23.7784 12.7772 23.68 12.9722 23.5392C13.2922 23.3081 13.6474 23.0394 14.0292 22.7354ZM15.774 18.4373C14.8242 19.4398 13.8036 20.3584 12.7833 21.1708C12.5048 21.3926 12.2423 21.5936 12 21.7726C11.7577 21.5936 11.4952 21.3926 11.2167 21.1708C10.1964 20.3584 9.17575 19.4398 8.22595 18.4373C5.5726 15.6365 4 12.7534 4 10C4 5.58172 7.58172 2 12 2C16.4183 2 20 5.58172 20 10C20 12.7534 18.4274 15.6365 15.774 18.4373ZM12 14C9.79086 14 8 12.2091 8 10C8 7.79086 9.79086 6 12 6C14.2091 6 16 7.79086 16 10C16 12.2091 14.2091 14 12 14ZM14 10C14 11.1046 13.1046 12 12 12C10.8954 12 10 11.1046 10 10C10 8.89543 10.8954 8 12 8C13.1046 8 14 8.89543 14 10Z" fill="white"/>
+</svg>

package/src/engines/Cesium/Feature/Model/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],
+          },
+        },
+      },
+      model: {
+        url: "/BoxAnimated.glb",
+        scale: 1000000,
+      },
+    },
+  ],
+  property: {
+    tiles: [
+      {
+        id: "default",
+        tile_type: "default",
+      },
+    ],
+  },
+};

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

@@ -0,0 +1,223 @@
+import {
+  Cartesian3,
+  HeadingPitchRoll,
+  Math as CesiumMath,
+  Transforms,
+  Model as CesiumModel,
+  ImageBasedLighting,
+} from "cesium";
+import { useEffect, useMemo, useRef } from "react";
+import { ModelGraphics, useCesium } from "resium";
+
+import type { ModelAppearance } from "../../..";
+import { colorBlendMode, heightReference, shadowMode } from "../../common";
+import { arrayToCartecian3 } from "../../helpers/sphericalHaromic";
+import { useSceneEvent } from "../../hooks/useSceneEvent";
+import {
+  NonPBRLightingShader,
+  NonPBRWithTextureLightingShader,
+} from "../../Shaders/CustomShaders/NonPBRLightingShader";
+import { useContext } from "../context";
+import { toColor } from "../utils";
+import {
+  EntityExt,
+  extractSimpleLayerData,
+  toDistanceDisplayCondition,
+  toTimeInterval,
+  type FeatureComponentConfig,
+  type FeatureProps,
+} from "../utils";
+
+export type Props = FeatureProps<Property>;
+
+export type Property = ModelAppearance & {
+  location?: { lat: number; lng: number };
+  height?: number;
+};
+
+export default function Model({
+  id,
+  isVisible,
+  property,
+  sceneProperty,
+  geometry,
+  layer,
+  feature,
+}: Props) {
+  const data = extractSimpleLayerData(layer);
+  const isGltfData = data?.type === "gltf";
+
+  const coordinates = useMemo(
+    () =>
+      geometry?.type === "Point"
+        ? geometry.coordinates
+        : property?.location
+          ? [property.location.lng, property.location.lat, property.height ?? 0]
+          : undefined,
+    [geometry?.coordinates, geometry?.type, property?.height, property?.location],
+  );
+  const position = useMemo(() => {
+    return coordinates
+      ? Cartesian3.fromDegrees(coordinates[0], coordinates[1], coordinates[2])
+      : Cartesian3.ZERO;
+  }, [coordinates]);
+
+  const {
+    show = true,
+    model,
+    url,
+    heightReference: hr,
+    heading,
+    pitch,
+    roll,
+    scale,
+    maximumScale,
+    minimumPixelSize,
+    animation = true,
+    shadows = "disabled",
+    colorBlend = "none",
+    color,
+    colorBlendAmount,
+    lightColor,
+    silhouette,
+    silhouetteColor,
+    bearing,
+    silhouetteSize = 1,
+    pbr,
+  } = property ?? {};
+
+  const actualUrl = useMemo(() => model || url || data?.url, [model, url, data?.url]);
+  const orientation = useMemo(
+    () =>
+      bearing
+        ? Transforms.headingPitchRollQuaternion(
+            position,
+            HeadingPitchRoll.fromDegrees(bearing - 90.0, 0.0, 0.0),
+          )
+        : Transforms.headingPitchRollQuaternion(
+            position,
+            new HeadingPitchRoll(
+              CesiumMath.toRadians(heading ?? 0),
+              CesiumMath.toRadians(pitch ?? 0),
+              CesiumMath.toRadians(roll ?? 0),
+            ),
+          ),
+    [bearing, heading, pitch, position, roll],
+  );
+
+  const modelColor = useMemo(() => (colorBlend ? toColor(color) : undefined), [colorBlend, color]);
+  const modelLightColor = useMemo(() => toColor(lightColor), [lightColor]);
+  const modelSilhouetteColor = useMemo(() => toColor(silhouetteColor), [silhouetteColor]);
+  const availability = useMemo(() => toTimeInterval(feature?.interval), [feature?.interval]);
+  const distanceDisplayCondition = useMemo(
+    () => toDistanceDisplayCondition(property?.near, property?.far),
+    [property?.near, property?.far],
+  );
+
+  const imageBasedLighting = useMemo(() => {
+    const ibl = new ImageBasedLighting();
+
+    if (
+      !property?.specularEnvironmentMaps &&
+      !property?.sphericalHarmonicCoefficients &&
+      !sceneProperty?.light?.specularEnvironmentMaps &&
+      !sceneProperty?.light?.sphericalHarmonicCoefficients
+    )
+      return ibl;
+
+    const specularEnvironmentMaps =
+      property?.specularEnvironmentMaps ?? sceneProperty?.light?.specularEnvironmentMaps;
+    const imageBasedLightIntensity =
+      property?.imageBasedLightIntensity ?? sceneProperty?.light?.imageBasedLightIntensity;
+    const sphericalHarmonicCoefficients = arrayToCartecian3(
+      property?.sphericalHarmonicCoefficients ??
+        sceneProperty?.light?.sphericalHarmonicCoefficients,
+      imageBasedLightIntensity,
+    );
+
+    if (specularEnvironmentMaps) {
+      ibl.specularEnvironmentMaps = specularEnvironmentMaps;
+    }
+    if (sphericalHarmonicCoefficients) {
+      ibl.sphericalHarmonicCoefficients = sphericalHarmonicCoefficients;
+    }
+    return ibl;
+  }, [
+    property?.specularEnvironmentMaps,
+    property?.sphericalHarmonicCoefficients,
+    property?.imageBasedLightIntensity,
+    sceneProperty?.light?.specularEnvironmentMaps,
+    sceneProperty?.light?.sphericalHarmonicCoefficients,
+    sceneProperty?.light?.imageBasedLightIntensity,
+  ]);
+
+  const { viewer } = useCesium();
+  const { requestRender } = useContext();
+  const shouldUpdateAfterLoaded = useRef(false);
+  useSceneEvent("postRender", () => {
+    const primitives = viewer?.scene.primitives;
+    const length = primitives?.length ?? 0;
+
+    if (!shouldUpdateAfterLoaded.current || !imageBasedLighting) {
+      return;
+    }
+
+    for (let i = 0; i < length; i++) {
+      const prim = primitives?.get(i);
+      if (prim instanceof CesiumModel && prim.id && prim.id.id === id) {
+        prim.imageBasedLighting = imageBasedLighting;
+        shouldUpdateAfterLoaded.current = false;
+        requestRender?.();
+      }
+    }
+  });
+
+  useEffect(() => {
+    if (imageBasedLighting) {
+      shouldUpdateAfterLoaded.current = true;
+    }
+  }, [imageBasedLighting]);
+
+  useEffect(() => {
+    requestRender?.();
+  });
+
+  // if data type is gltf, layer should be rendered. Otherwise only features should be rendererd.
+  return (isGltfData ? feature : !feature) || !isVisible || !show || !actualUrl ? null : (
+    <EntityExt
+      id={id}
+      position={position}
+      orientation={orientation as any}
+      layerId={layer?.id}
+      featureId={feature?.id}
+      draggable
+      properties={feature?.properties}
+      availability={availability}>
+      <ModelGraphics
+        uri={actualUrl}
+        scale={scale}
+        shadows={shadowMode(shadows)}
+        customShader={
+          pbr === false
+            ? NonPBRLightingShader
+            : pbr === "withTexture"
+              ? NonPBRWithTextureLightingShader
+              : undefined
+        }
+        colorBlendMode={colorBlendMode(colorBlend)}
+        colorBlendAmount={colorBlendAmount}
+        color={modelColor}
+        lightColor={modelLightColor}
+        runAnimations={animation}
+        silhouetteColor={modelSilhouetteColor}
+        silhouetteSize={silhouette ? silhouetteSize : undefined}
+        heightReference={heightReference(hr)}
+        maximumScale={maximumScale}
+        minimumPixelSize={minimumPixelSize}
+        distanceDisplayCondition={distanceDisplayCondition}
+      />
+    </EntityExt>
+  );
+}
+
+export const config: FeatureComponentConfig = {};

package/src/engines/Cesium/Feature/PhotoOverlay/hooks.ts

@@ -0,0 +1,98 @@
+import useTransition, { TransitionStatus } from "@rot1024/use-transition";
+import { Math as CesiumMath, EasingFunction } from "cesium";
+import { useCallback, useEffect, useRef } from "react";
+
+import type { Camera } from "../../..";
+import { useDelayedCount, Durations } from "../../../../utils";
+import { useContext } from "../context";
+
+export type { TransitionStatus } from "@rot1024/use-transition";
+
+const cameraDuration = 2;
+const cameraExitDuration = 2;
+const fovDuration = 0.5;
+const fovExitDuration = 0.5;
+export const photoDuration = 1;
+export const photoExitDuration = 0.5;
+const defaultFOV = CesiumMath.toRadians(60);
+
+const durations: Durations = [
+  [cameraDuration * 1000, cameraExitDuration * 1000],
+  [fovDuration * 1000, fovExitDuration * 1000],
+  [photoDuration * 1000, photoExitDuration * 1000],
+];
+
+export default function ({ isSelected, camera }: { isSelected?: boolean; camera?: Camera }): {
+  photoOverlayImageTransiton: TransitionStatus;
+  exitPhotoOverlay: () => void;
+} {
+  const { selectionReason, flyTo, getCamera } = useContext();
+
+  // mode 0 = idle, 1 = idle<->fly, 2 = fly<->fov, 3 = fov<->photo, 4 = photo
+  const [mode, prevMode, startTransition] = useDelayedCount(durations);
+  const cameraRef = useRef(camera);
+  cameraRef.current = camera;
+  const storytelling = useRef(false);
+  storytelling.current = selectionReason?.reason === "storytelling";
+  const prevCamera = useRef<Camera>();
+
+  // camera flight
+  useEffect(() => {
+    if ((prevMode ?? 0) > 1 && mode === 1 && prevCamera.current) {
+      flyTo?.(prevCamera.current, {
+        duration: cameraExitDuration,
+        easing: EasingFunction.CUBIC_IN_OUT,
+      });
+      prevCamera.current = undefined;
+    } else if ((prevMode ?? 0) === 0 && mode === 1 && cameraRef.current) {
+      prevCamera.current = getCamera?.();
+      flyTo?.(
+        { ...cameraRef.current, fov: prevCamera.current?.fov },
+        {
+          duration: cameraDuration,
+          easing: EasingFunction.CUBIC_IN_OUT,
+        },
+      );
+    } else if (mode === 2) {
+      const fov =
+        (prevMode ?? 0) === 1 ? cameraRef.current?.fov : prevCamera.current?.fov ?? defaultFOV;
+      flyTo?.(
+        { fov },
+        {
+          duration: (prevMode ?? 0) === 1 ? fovDuration : fovExitDuration,
+          easing: EasingFunction.CUBIC_IN_OUT,
+        },
+      );
+    }
+  }, [flyTo, getCamera, mode, prevMode]);
+
+  // start transition: when selection was changed
+  useEffect(() => {
+    // restore fov
+    if (!isSelected && storytelling.current) {
+      const fov = prevCamera.current?.fov ?? defaultFOV;
+      flyTo?.({ fov }, { duration: 0 });
+    }
+    // skip camera flight when is not selected
+    startTransition(!isSelected, !isSelected);
+  }, [flyTo, startTransition, isSelected]);
+
+  const transition = useTransition(
+    !!isSelected && mode >= 3,
+    (prevMode ?? 0) > 3 ? photoExitDuration * 1000 : photoDuration * 1000,
+    {
+      mountOnEnter: true,
+      unmountOnExit: true,
+    },
+  );
+
+  const exitPhotoOverlay = useCallback(
+    () => startTransition(true, !camera),
+    [camera, startTransition],
+  );
+
+  return {
+    photoOverlayImageTransiton: transition,
+    exitPhotoOverlay,
+  };
+}