feat(web): support set photo overlay on layer inspector [VIZ-1349]

server/pkg/builtin/manifest.yml

@@ -2837,12 +2837,9 @@ extensions:
             - id: enabled
               type: bool
               title: Enabled PhotoOverlay
-              # defaultValue: false
-              # description: xxxxxx
+              defaultValue: true
             - id: cameraDuration
               type: number
-              title: PhotoOverlay Camera Duration
-              # suffix: s
-              # min: 0
-              # defaultValue: 2
-              # description: xxxxxx
+              title: Camera Duration
+              defaultValue: 1
+              description: The duration (in seconds) it takes for the camera to fly to the captured position.

server/pkg/builtin/manifest_ja.yml

@@ -1462,3 +1462,4 @@ extensions:
             title: 有効
           cameraDuration:
             title: カメラ移動時間
+            description: カメラがキャプチャされた位置へ移動するのにかかる時間（秒）

web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/PhotoOverlaySettings/hooks.ts

@@ -0,0 +1,24 @@
+import { filterVisibleItems } from "@reearth/beta/ui/fields/utils";
+import { usePhotoOverlayFetcher } from "@reearth/services/api";
+import { Item, convert } from "@reearth/services/api/propertyApi/utils";
+import { useCallback, useMemo } from "react";
+
+export default ({ layerId, property }: { layerId: string; property?: any }) => {
+  const { useCreateNLSPhotoOverlay } = usePhotoOverlayFetcher();
+
+  const visibleItems: Item[] | undefined = useMemo(
+    () => filterVisibleItems(convert(property)),
+    [property]
+  );
+
+  const handlePhotoOverlayCreate = useCallback(async () => {
+    if (!property) {
+      await useCreateNLSPhotoOverlay({ layerId });
+    }
+  }, [layerId, property, useCreateNLSPhotoOverlay]);
+
+  return {
+    visibleItems,
+    handlePhotoOverlayCreate
+  };
+};

web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/PhotoOverlaySettings/index.tsx

@@ -0,0 +1,51 @@
+import { SwitchField } from "@reearth/beta/ui/fields";
+import PropertyItem from "@reearth/beta/ui/fields/Properties";
+import { NLSPhotoOverlay } from "@reearth/services/api/layersApi/utils";
+import { useT } from "@reearth/services/i18n";
+import { styled } from "@reearth/services/theme";
+import { FC } from "react";
+
+import useHooks from "./hooks";
+
+type Props = {
+  selectedLayerId: string;
+  photoOverlay?: NLSPhotoOverlay;
+};
+
+const PhotoOverlaySettings: FC<Props> = ({ selectedLayerId, photoOverlay }) => {
+  const t = useT();
+
+  const { visibleItems, handlePhotoOverlayCreate } = useHooks({
+    layerId: selectedLayerId,
+    property: photoOverlay?.property
+  });
+
+  return (
+    <Wrapper>
+      {visibleItems ? (
+        visibleItems.map((i) => (
+          <PropertyItem
+            key={i.id ?? ""}
+            propertyId={photoOverlay?.property?.id}
+            item={i}
+          />
+        ))
+      ) : (
+        <SwitchField
+          title={t("Enable PhotoOverlay")}
+          description={t("Show photo overlay when the user clicks on a layer")}
+          value={false}
+          onChange={handlePhotoOverlayCreate}
+        />
+      )}
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing.large
+}));
+
+export default PhotoOverlaySettings;

web/src/beta/features/Editor/Map/InspectorPanel/LayerInspector/index.tsx

@@ -4,9 +4,7 @@ import {
   SelectedFeature,
   SelectedLayer
 } from "@reearth/beta/features/Editor/hooks/useLayers";
-import {
-  GeoJsonFeatureUpdateProps
-} from "@reearth/beta/features/Editor/hooks/useSketch";
+import { GeoJsonFeatureUpdateProps } from "@reearth/beta/features/Editor/hooks/useSketch";
 import { TabItem, Tabs } from "@reearth/beta/lib/reearth-ui";
 import { ComputedFeature, Geometry } from "@reearth/core";
 import { NLSLayer, SketchFeature } from "@reearth/services/api/layersApi/utils";
@@ -18,6 +16,7 @@ import DataSource from "./DataSource";
 import FeatureInspector from "./FeatureInspector";
 import InfoboxSettings from "./InfoboxSettings";
 import LayerStyle from "./LayerStyle";
+import PhotoOverlaySettings from "./PhotoOverlaySettings";
 
 const LAYER_INSPECTOR_TAB_STORAGE_KEY =
   "reearth-visualizer-map-layer-inspector-tab";
@@ -53,8 +52,8 @@ const InspectorTabs: FC<Props> = ({
 }) => {
   const t = useT();
 
-  const tabItems: TabItem[] = useMemo(
-    () => [
+  const tabItems: TabItem[] = useMemo(() => {
+    const tabs: TabItem[] = [
       {
         id: "dataSource",
         icon: "data",
@@ -109,20 +108,36 @@ const InspectorTabs: FC<Props> = ({
           />
         )
       }
-    ],
-    [
-      t,
-      selectedLayer?.layer,
-      onLayerNameUpdate,
-      onLayerConfigUpdate,
-      selectedFeature,
-      selectedSketchFeature,
-      onGeoJsonFeatureUpdate,
-      layerStyles,
-      layers,
-      sceneId
-    ]
-  );
+    ];
+
+    if (selectedLayer?.layer?.isSketch) {
+      tabs.push({
+        id: "photoOverlaySettings",
+        icon: "image",
+        placement: "left",
+        tooltipText: t("Photo Overlay"),
+        children: (
+          <PhotoOverlaySettings
+            selectedLayerId={selectedLayer.layer.id}
+            photoOverlay={selectedLayer.layer?.photoOverlay}
+          />
+        )
+      });
+    }
+
+    return tabs;
+  }, [
+    t,
+    selectedLayer?.layer,
+    onLayerNameUpdate,
+    onLayerConfigUpdate,
+    selectedFeature,
+    selectedSketchFeature,
+    onGeoJsonFeatureUpdate,
+    layerStyles,
+    layers,
+    sceneId
+  ]);
 
   const [currentTab, setCurrentTab] = useState(
     localStorage.getItem(LAYER_INSPECTOR_TAB_STORAGE_KEY) ?? "dataSource"

web/src/beta/features/Editor/Visualizer/hooks.ts

@@ -7,11 +7,7 @@
   sceneProperty2ViewerPropertyMapping
 } from "@reearth/beta/utils/convert-object";
 import { Camera } from "@reearth/beta/utils/value";
-import type {
-  LatLng,
-  ComputedLayer,
-  ComputedFeature,
-} from "@reearth/core";
+import type { LatLng, ComputedLayer, ComputedFeature } from "@reearth/core";
 import {
   useLayersFetcher,
   useSceneFetcher,
@@ -34,7 +30,10 @@
 
 import { useCurrentCamera } from "../atoms";
 import type { LayerSelectProps, SelectedLayer } from "../hooks/useLayers";
-import { PhotoOverlayPreviewAtom, SketchFeatureTooltipAtom } from "../Map/state";
+import {
+  PhotoOverlayPreviewAtom,
+  SketchFeatureTooltipAtom
+} from "../Map/state";
 
 import { convertWidgets, processLayers, processProperty } from "./convert";
 import { convertStory } from "./convert-story";
@@ -193,7 +192,6 @@
       visible: true
     }));
   }, [nlsLayers, layerStyles, infoboxBlockNames, showStoryPanel]);
-
   const handleCoreLayerSelect = useCallback(
     (
       layerId?: string,
@@ -254,7 +252,7 @@
   // Plugin
   const pluginProperty = useMemo(
     () =>
       scene?.plugins.reduce<Record<string, any>>((a, b) => {
         a[b.pluginId] = processProperty(b.property);
         return a;
       }, {}),
@@ -341,8 +339,8 @@
       schemaItemId?: string,
       fieldId?: string,
       itemId?: string,
       vt?: any,
       v?: any
     ) => {
       if (!propertyId || !schemaItemId || !fieldId || !vt) return;
       await useUpdatePropertyValue(

web/src/beta/features/Editor/hooks/useLayers.ts

@@ -206,25 +206,25 @@ export default function ({
     [nlsLayers, selectedLayer, handleLayerSelect, useRemoveNLSLayer]
   );
 
-   const selectedFeature: SelectedFeature | undefined = useMemo(() => {
-     if (!selectedLayer?.computedFeature?.id) return;
-     const { id, geometry, properties } =
-       selectedLayer.layer?.config?.data?.type === "3dtiles" ||
-       selectedLayer.layer?.config?.data?.type === "osm-buildings" ||
-       selectedLayer.layer?.config?.data?.type === "google-photorealistic" ||
-       selectedLayer.layer?.config?.data?.type === "mvt"
-         ? selectedLayer.computedFeature
-         : (selectedLayer.computedLayer?.features?.find(
-             (f) => f.id === selectedLayer.computedFeature?.id
-           ) ?? {});
-
-     if (!id) return;
-     return {
-       id,
-       geometry,
-       properties
-     };
-   }, [selectedLayer]);
+  const selectedFeature: SelectedFeature | undefined = useMemo(() => {
+    if (!selectedLayer?.computedFeature?.id) return;
+    const { id, geometry, properties } =
+      selectedLayer.layer?.config?.data?.type === "3dtiles" ||
+      selectedLayer.layer?.config?.data?.type === "osm-buildings" ||
+      selectedLayer.layer?.config?.data?.type === "google-photorealistic" ||
+      selectedLayer.layer?.config?.data?.type === "mvt"
+        ? selectedLayer.computedFeature
+        : (selectedLayer.computedLayer?.features?.find(
+            (f) => f.id === selectedLayer.computedFeature?.id
+          ) ?? {});
+
+    if (!id) return;
+    return {
+      id,
+      geometry,
+      properties
+    };
+  }, [selectedLayer]);
 
   const handleLayerAdd = useCallback(
     async (inp: LayerAddProps) => {

web/src/beta/features/Published/convert-nls-layers.ts

@@ -0,0 +1,29 @@
+import { NLSLayer } from "@reearth/services/api/layersApi/utils";
+
+import { PublishedNLSLayer } from "./types";
+
+export const convertNLSLayers = (
+  layers: PublishedNLSLayer[] | undefined
+): NLSLayer[] | undefined => {
+  if (!layers) {
+    return;
+  }
+
+  return layers.map((l) => ({
+    id: l.id,
+    title: l.title,
+    visible: !!l.isVisible,
+    layerType: l.layerType,
+    config: l.config,
+    isSketch: l.isSketch,
+    infobox: l.nlsInfobox,
+    photoOverlay: l.nlsPhotoOverlay
+      ? {
+          processedProperty: {
+            enabled: l.nlsPhotoOverlay.property?.default?.enabled,
+            cameraDuration: l.nlsPhotoOverlay.property?.default?.cameraDuration
+          }
+        }
+      : undefined
+  }));
+};

web/src/beta/features/Published/hooks.ts

@@ -20,6 +20,7 @@ import { WidgetThemeOptions } from "../Visualizer/Crust/theme";
 
 import { processProperty } from "./convert";
 import { processLayers, processNewProperty } from "./convert-new-property";
+import { convertNLSLayers } from "./convert-nls-layers";
 import { useGA } from "./googleAnalytics/useGA";
 import type {
   PublishedData,
@@ -256,6 +257,11 @@ export default (alias?: string) => {
     }));
   }, [data?.nlsLayers, data?.layerStyles, story]);
 
+  const nlsLayers = useMemo(
+    () => convertNLSLayers(data?.nlsLayers),
+    [data?.nlsLayers]
+  );
+
   useEffect(() => {
     const url = dataUrl(actualAlias);
     (async () => {
@@ -308,6 +314,7 @@ export default (alias?: string) => {
     viewerProperty,
     pluginProperty,
     layers,
+    nlsLayers,
     widgets,
     widgetThemeOptions,
     story,

web/src/beta/features/Published/index.tsx

@@ -12,6 +12,7 @@ export default function Published({ alias }: Props) {
     viewerProperty,
     pluginProperty,
     layers,
+    nlsLayers,
     widgets,
     widgetThemeOptions,
     story,
@@ -34,6 +35,7 @@ export default function Published({ alias }: Props) {
       isBuilt
       ready={ready}
       layers={layers}
+      nlsLayers={nlsLayers}
       widgets={widgets}
       widgetThemeOptions={widgetThemeOptions}
       story={story}

web/src/beta/features/Published/types.ts

@@ -14,7 +14,7 @@ export type PublishedData = {
   publishedAt: string;
   property?: SceneProperty;
   plugins?: Record<string, Plugin>;
-  nlsLayers?: NLSLayer[];
+  nlsLayers?: PublishedNLSLayer[];
   layerStyles?: LayerStyle[];
   widgets?: Widget[];
   widgetAlignSystem?: WidgetAlignSystem;
@@ -54,7 +54,7 @@ export type Plugin = {
   property: any;
 };
 
-export type NLSLayer = {
+export type PublishedNLSLayer = {
   id: string;
   title: string;
   layerType: "simple";
@@ -71,6 +71,15 @@ export type NLSLayer = {
   isSketch?: boolean;
   sketchInfo?: SketchInfo;
   nlsInfobox?: any;
+  nlsPhotoOverlay?: {
+    id?: string;
+    property?: {
+      default?: {
+        enabled?: boolean;
+        cameraDuration?: number;
+      };
+    };
+  };
 };
 
 export type SketchInfo = {