refactor(web): plugin API v2.0.0

web/package.json

@@ -114,7 +114,7 @@
         "@monaco-editor/react": "4.6.0",
         "@popperjs/core": "2.11.8",
         "@reearth/cesium-mvt-imagery-provider": "1.5.4",
-        "@reearth/core": "0.0.7-beta.0",
+        "@reearth/core": "0.0.7-alpha.5",
         "@rot1024/use-transition": "1.0.0",
         "@sentry/browser": "7.77.0",
         "@seznam/compose-react-refs": "1.0.6",

web/src/beta/features/Editor/Visualizer/convert-infobox.ts

@@ -3,6 +3,7 @@ import type { Layer } from "@reearth/core";
 import { NLSInfobox } from "@reearth/services/api/layersApi/utils";
 import { convert } from "@reearth/services/api/propertyApi/utils";
 
+import { processProperty } from "./convert";
 import { processProperty as processNewProperty } from "./processNewProperty";
 
 export default (
@@ -21,9 +22,11 @@ export default (
       name: blockNames?.[b.extensionId] ?? "Infobox Block",
       pluginId: b.pluginId,
       extensionId: b.extensionId,
+      extensionType: "infoboxBlock",
       property: processNewProperty(undefined, b.property),
+      propertyForPluginAPI: processProperty(b.property),
       propertyId: b.propertyId, // required by onBlockChange
-      pluginBlockPropertyItems: convert(b.property),
+      propertyItemsForPluginBlock: convert(b.property),
     })),
   };
 };

web/src/beta/features/Editor/Visualizer/convert-story.ts

@@ -7,7 +7,8 @@ import { convert } from "@reearth/services/api/propertyApi/utils";
 import { Scene } from "@reearth/services/api/sceneApi";
 import { StoryPage as GqlStoryPage, StoryBlock as GqlStoryBlock } from "@reearth/services/gql";
 
-import { processProperty } from "./processNewProperty";
+import { processProperty } from "./convert";
+import { processProperty as processNewProperty } from "./processNewProperty";
 
 export const convertStory = (scene?: Scene, storyId?: string): Story | undefined => {
   const story = scene?.stories.find(s => s.id === storyId);
@@ -36,10 +37,12 @@ export const convertStory = (scene?: Scene, storyId?: string): Story | undefined
       id: b.id,
       pluginId: b.pluginId,
       extensionId: b.extensionId,
+      extensionType: "storyBlock",
       name: installedBlockNames?.[b.extensionId] ?? "Story Block",
       propertyId: b.property?.id,
-      property: processProperty(undefined, b.property),
-      pluginBlockPropertyItems: convert(b.property),
+      property: processNewProperty(undefined, b.property),
+      propertyForPluginAPI: processProperty(b.property),
+      propertyItemsForPluginBlock: convert(b.property),
     }));
 
   return {

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

@@ -1,8 +1,12 @@
 import { useMemo, useEffect, useCallback, useState, MutableRefObject } from "react";
 
 import type { Alignment, Location } from "@reearth/beta/features/Visualizer/Crust";
+import {
+  convertData,
+  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, ViewerProperty } from "@reearth/core";
 import {
   useLayersFetcher,
   useSceneFetcher,
@@ -55,16 +59,39 @@ export default ({
     useMoveInfoboxBlock,
   } = useInfoboxFetcher();
 
+  const [currentCamera, setCurrentCamera] = useCurrentCamera();
+  const handleCameraUpdate = useCallback(
+    (camera: Camera) => {
+      setCurrentCamera(camera);
+    },
+    [setCurrentCamera],
+  );
+
   const { nlsLayers } = useGetLayersQuery({ sceneId });
   const { layerStyles } = useGetLayerStylesQuery({ sceneId });
 
   const { scene } = useSceneQuery({ sceneId });
 
   const [zoomedLayerId, zoomToLayer] = useState<string | undefined>(undefined);
+  const [initialCamera, setInitialCamera] = useState<Camera | undefined>(undefined);
+
+  const { viewerProperty, cesiumIonAccessToken } = useMemo(() => {
+    const sceneProperty = processProperty(scene?.property);
+    const cesiumIonAccessToken = sceneProperty?.default?.ion;
+    if (sceneProperty?.camera?.camera) {
+      setInitialCamera(sceneProperty?.camera?.camera);
+    }
+    return {
+      viewerProperty: sceneProperty
+        ? (convertData(sceneProperty, sceneProperty2ViewerPropertyMapping) as ViewerProperty)
+        : undefined,
+      cesiumIonAccessToken,
+    };
+  }, [scene?.property]);
 
-  // Scene property
-  // TODO: Fix to use exact type through GQL typing
-  const sceneProperty = useMemo(() => processProperty(scene?.property), [scene?.property]);
+  useEffect(() => {
+    setCurrentCamera(initialCamera);
+  }, [initialCamera, setCurrentCamera]);
 
   const { installableInfoboxBlocks } = useInstallableInfoboxBlocksQuery({ sceneId });
 
@@ -251,9 +278,12 @@ export default ({
 
   const engineMeta = useMemo(
     () => ({
-      cesiumIonAccessToken: config()?.cesiumIonAccessToken,
+      cesiumIonAccessToken:
+        typeof cesiumIonAccessToken === "string" && cesiumIonAccessToken
+          ? cesiumIonAccessToken
+          : config()?.cesiumIonAccessToken,
     }),
-    [],
+    [cesiumIonAccessToken],
   );
 
   // TODO: Use GQL value
@@ -265,17 +295,8 @@ export default ({
 
   const handleMount = useCallback(() => onVisualizerReady(true), [onVisualizerReady]);
 
-  // Camera
-  const [currentCamera, setCurrentCamera] = useCurrentCamera();
-  const handleCameraUpdate = useCallback(
-    (camera: Camera) => {
-      setCurrentCamera(camera);
-    },
-    [setCurrentCamera],
-  );
-
   return {
-    sceneProperty,
+    viewerProperty,
     pluginProperty,
     layers,
     widgets,
@@ -284,6 +305,7 @@ export default ({
     zoomedLayerId,
     installableInfoboxBlocks,
     currentCamera,
+    initialCamera,
     handleCameraUpdate,
     handleCoreLayerSelect,
     handleLayerDrop,

web/src/beta/features/Editor/Visualizer/index.tsx

@@ -62,7 +62,7 @@ const EditorVisualizer: React.FC<Props> = ({
   selectWidgetArea,
 }) => {
   const {
-    sceneProperty,
+    viewerProperty,
     pluginProperty,
     layers,
     widgets,
@@ -71,6 +71,7 @@ const EditorVisualizer: React.FC<Props> = ({
     zoomedLayerId,
     installableInfoboxBlocks,
     currentCamera,
+    initialCamera,
     handleCameraUpdate,
     handleCoreLayerSelect,
     handleLayerDrop,
@@ -110,12 +111,13 @@ const EditorVisualizer: React.FC<Props> = ({
       layers={layers}
       widgets={widgets}
       story={story}
-      sceneProperty={sceneProperty}
+      viewerProperty={viewerProperty}
       pluginProperty={pluginProperty}
       // editor
       zoomedLayerId={zoomedLayerId}
       visualizerRef={visualizerRef}
       currentCamera={currentCamera}
+      initialCamera={initialCamera}
       interactionMode={interactionMode}
       onCameraChange={handleCameraUpdate}
       onCoreLayerSelect={handleCoreLayerSelect}

web/src/beta/features/PluginPlayground/Viewer/hooks.ts

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 
 import { Camera } from "@reearth/beta/utils/value";
-import { MapRef } from "@reearth/core";
+import { MapRef, ViewerProperty } from "@reearth/core";
 import { config } from "@reearth/services/config";
 
 export default () => {
@@ -17,7 +17,7 @@ export default () => {
     [],
   );
 
-  const sceneProperty = useMemo(
+  const viewerProperty: ViewerProperty = useMemo(
     () => ({
       tiles: [
         {
@@ -35,7 +35,7 @@ export default () => {
 
   return {
     visualizerRef,
-    sceneProperty,
+    viewerProperty,
     ready,
     engineMeta,
     currentCamera,

web/src/beta/features/PluginPlayground/Viewer/index.tsx

@@ -5,14 +5,14 @@ import Visualizer from "@reearth/beta/features/Visualizer";
 import useHooks from "./hooks";
 
 const Viewer: FC = () => {
-  const { visualizerRef, sceneProperty, ready, engineMeta, currentCamera, setCurrentCamera } =
+  const { visualizerRef, viewerProperty, ready, engineMeta, currentCamera, setCurrentCamera } =
     useHooks();
 
   return (
     <Visualizer
       engine="cesium"
       visualizerRef={visualizerRef}
-      sceneProperty={sceneProperty}
+      viewerProperty={viewerProperty}
       ready={ready}
       engineMeta={engineMeta}
       currentCamera={currentCamera}

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

@@ -8,10 +8,16 @@ import {
   isBuiltinWidget,
 } from "@reearth/beta/features/Visualizer/Crust";
 import { Story } from "@reearth/beta/features/Visualizer/Crust/StoryPanel";
+import {
+  convertData,
+  sceneProperty2ViewerPropertyMapping,
+} from "@reearth/beta/utils/convert-object";
 import type { Camera } from "@reearth/beta/utils/value";
-import { MapRef } from "@reearth/core";
+import { ViewerProperty, MapRef } from "@reearth/core";
 import { config } from "@reearth/services/config";
 
+import { WidgetThemeOptions } from "../Visualizer/Crust/theme";
+
 import { processProperty } from "./convert";
 import { processLayers, processNewProperty } from "./convert-new-property";
 import { useGA } from "./googleAnalytics/useGA";
@@ -29,8 +35,28 @@ export default (alias?: string) => {
   const [ready, setReady] = useState(false);
   const [error, setError] = useState(false);
   const [currentCamera, setCurrentCamera] = useState<Camera | undefined>(undefined);
+  const [initialCamera, setInitialCamera] = useState<Camera | undefined>(undefined);
+
+  const { viewerProperty, widgetThemeOptions, cesiumIonAccessToken } = useMemo(() => {
+    const sceneProperty = processProperty(data?.property);
+    const widgetThemeOptions = sceneProperty?.theme as WidgetThemeOptions | undefined;
+    const cesiumIonAccessToken = sceneProperty?.default?.ion;
+    if (sceneProperty?.camera?.camera) {
+      setInitialCamera(sceneProperty?.camera?.camera);
+    }
+    return {
+      viewerProperty: sceneProperty
+        ? (convertData(sceneProperty, sceneProperty2ViewerPropertyMapping) as ViewerProperty)
+        : undefined,
+      widgetThemeOptions,
+      cesiumIonAccessToken,
+    };
+  }, [data?.property]);
+
+  useEffect(() => {
+    setCurrentCamera(initialCamera);
+  }, [initialCamera]);
 
-  const sceneProperty = processProperty(data?.property);
   const pluginProperty = useMemo(
     () =>
       Object.keys(data?.plugins ?? {}).reduce<{ [key: string]: any }>(
@@ -234,25 +260,30 @@ export default (alias?: string) => {
 
   const engineMeta = useMemo(
     () => ({
-      cesiumIonAccessToken: config()?.cesiumIonAccessToken,
+      cesiumIonAccessToken:
+        typeof cesiumIonAccessToken === "string" && cesiumIonAccessToken
+          ? cesiumIonAccessToken
+          : config()?.cesiumIonAccessToken,
     }),
-    [],
+    [cesiumIonAccessToken],
   );
 
   // GA
   useGA({ enableGa: data?.enableGa, trackingId: data?.trackingId });
 
   return {
-    sceneProperty,
+    viewerProperty,
     pluginProperty,
     layers,
     widgets,
+    widgetThemeOptions,
     story,
     ready,
     error,
     engineMeta,
     visualizerRef,
     currentCamera,
+    initialCamera,
     setCurrentCamera,
   };
 };

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

@@ -11,16 +11,18 @@ export type Props = {
 export default function Published({ alias }: Props) {
   const t = useT();
   const {
-    sceneProperty,
+    viewerProperty,
     pluginProperty,
     layers,
     widgets,
+    widgetThemeOptions,
     story,
     ready,
     error,
     engineMeta,
     visualizerRef,
     currentCamera,
+    initialCamera,
     setCurrentCamera,
   } = useHooks(alias);
 
@@ -38,11 +40,13 @@ export default function Published({ alias }: Props) {
       ready={ready}
       layers={layers}
       widgets={widgets}
+      widgetThemeOptions={widgetThemeOptions}
       story={story}
-      sceneProperty={sceneProperty}
+      viewerProperty={viewerProperty}
       pluginProperty={pluginProperty}
       showStoryPanel={!!story}
       currentCamera={currentCamera}
+      initialCamera={initialCamera}
       onCameraChange={setCurrentCamera}
     />
   );

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

@@ -1,4 +1,5 @@
-import type { DataRange, DataType, Geometry, SceneProperty, TimeInterval } from "@reearth/core";
+import { SceneProperty } from "@reearth/beta/types";
+import type { DataRange, DataType, Geometry, TimeInterval } from "@reearth/core";
 import { SketchFeature } from "@reearth/services/api/layersApi/utils";
 import { LayerStyle } from "@reearth/services/api/layerStyleApi/utils";
 

web/src/beta/features/Visualizer/Crust/Infobox/Block/index.tsx

@@ -37,7 +37,7 @@ const InfoboxBlockComponent = ({ renderBlock, onRemove, ...props }: Props): JSX.
       isSelected={props.isSelected}
       property={props.block.property}
       propertyId={props.block.propertyId}
-      pluginBlockPropertyItems={props.block.pluginBlockPropertyItems}
+      propertyItemsForPluginBlock={props.block.propertyItemsForPluginBlock}
       onRemove={onRemove ? handleRemove : undefined}>
       {renderBlock?.({ block: props.block, layer: props.layer, onClick: props.onClick })}
     </BlockWrapper>

web/src/beta/features/Visualizer/Crust/Infobox/types.ts

@@ -23,11 +23,18 @@ export type InfoboxBlock<P = any> = {
   name?: string;
   pluginId?: string;
   extensionId?: string;
-  property?: P;
+  extensionType?: "infoboxBlock";
   propertyId?: string;
-  pluginBlockPropertyItems?: Item[];
+  property?: P;
+  propertyForPluginAPI?: any;
+  propertyItemsForPluginBlock?: Item[];
 };
 
+export type PluginInfoboxBlock = Omit<
+  InfoboxBlock,
+  "propertyForPluginAPI" | "propertyItemsForPluginBlock"
+>;
+
 export type InfoboxBlockProps<P = any> = {
   block?: InfoboxBlock<P>;
   layer?: Layer;