chore(web): add scene setting (#755)

Co-authored-by: nina992 <nouralali992@gmail.com> Co-authored-by: KaWaite <34051327+KaWaite@users.noreply.github.com>
reearth · Nov 6, 2023 · f9e53a5 · f9e53a5
1 parent 56c4c00
commit f9e53a5
Show file tree

Hide file tree

Showing 24 changed files with 321 additions and 243 deletions.
diff --git a/server/pkg/builtin/manifest.yml b/server/pkg/builtin/manifest.yml
@@ -94,7 +94,7 @@ extensions:
           collection: Terrain
           title: Terrain
           fields:
-            - id: terrainBool
+            - id: terrain
               type: bool
               title: Enable
               description: Show elevation when close to the surface.
@@ -104,7 +104,7 @@ extensions:
               description: Specify terrain type.
               defaultValue: cesium
               availableIf:
-                field: terrainBool
+                field: terrain
                 type: bool
                 value: true
               choices:
@@ -145,7 +145,7 @@ extensions:
               defaultValue: 1
               suffix: x
               availableIf:
-                field: terrainBool
+                field: terrain
                 type: bool
                 value: true
             - id: terrainExaggerationRelativeHeight
@@ -155,95 +155,102 @@ extensions:
               defaultValue: 0
               suffix: m
               availableIf:
-                field: terrainBool
+                field: terrain
                 type: bool
                 value: true
             - id: depthTestAgainstTerrain
               type: bool
               title: Hide objects under terrain
               description: Hides objects under the terrain. Depending on the loading status of the terrain, objects may be shown or hidden.
               availableIf:
-                field: terrainBool
+                field: terrain
                 type: bool
                 value: true
         - id: globeLighting
           collection: Globe
           title: Globe Lighting
           fields:
-            - id: globeLightingBool
+            - id: globeLighting
               type: bool
               title: Enable
+              defaultValue: false
               description: This property will support the globe receive Entitys Lighting.
         - id: globeShadow
           collection: Globe
           title: Globe Shadow
           fields:
-            - id: globeShadowBool
+            - id: globeShadow
               type: bool
               title: Enable
+              defaultValue: false
               description: This property will support the globe receive Entitys shadows.
         - id: globeAtmosphere
           collection: Globe
           title: Globe Atmosphere
           fields:
-            - id: globeAtmosphereBool
+            - id: globeAtmosphere
               type: bool
               title: Enable
+              defaultValue: true
               description: This setting handles the so-called atmosphere effect of Earth.
             - id: globeAtmosphereIntensity
               type: number
               title: Light Intensity
-              description: "Change the light intensity of the selected tile map. Min: 0 Max: 1"
-              defaultValue: 0.5
+              description: "Change the light intensity of the selected tile map. Min: 0 Max: 30"
+              defaultValue: 10
               ui: slider
               min: 0
-              max: 1
+              max: 30
               availableIf:
-                field: globeAtmosphereBool
+                field: globeAtmosphere
                 type: bool
                 value: true
         - id: skyBox
           collection: Sky
           title: Sky Box
           fields:
-            - id: skyBoxBool
+            - id: skyBox
               type: bool
               title: Enable
+              defaultValue: true
               description: Description needed.
         - id: sun
           collection: Sky
           title: Sun
           fields:
-            - id: sunBool
+            - id: sun
               type: bool
               title: Enable
+              defaultValue: true
               description: Description needed.
         - id: moon
           collection: Sky
           title: Moon
           fields:
-            - id: moonBool
+            - id: moon
               type: bool
               title: Enable
+              defaultValue: true
               description: Description needed.
         - id: skyAtmosphere
           collection: Sky
           title: Sky Atmosphere
           fields:
-            - id: skyAtmosphereBool
+            - id: skyAtmosphere
               type: bool
               title: Enable
+              defaultValue: true
               description: Description neeeded.
             - id: skyAtmosphereIntensity
               type: number
               title: Light Intensity
-              description: "Change the light intensity of the selected tile map. Min: 0 Max: 1"
-              defaultValue: 0.5
+              description: "Change the light intensity of the selected tile map. Min: 0 Max: 200"
+              defaultValue: 50
               ui: slider
               min: 0
-              max: 1
+              max: 200
               availableIf:
-                field: skyAtmosphereBool
+                field: skyAtmosphere
                 type: bool
                 value: true
         - id: camera
@@ -262,7 +269,7 @@ extensions:
             - id: fov
               type: number
               title: FOV
-              description: Description needed
+              # description: Description needed
               defaultValue: 3
               ui: slider
               min: 0

diff --git a/web/src/beta/features/Editor/Visualizer/hooks.ts b/web/src/beta/features/Editor/Visualizer/hooks.ts
@@ -1,8 +1,8 @@
 import { useMemo, useEffect, useCallback } from "react";
 
 import type { Alignment, Location } from "@reearth/beta/lib/core/Crust";
-import type { LatLng, Tag, ValueTypes, ComputedLayer } from "@reearth/beta/lib/core/mantle";
-import type { Layer, LayerSelectionReason, Cluster } from "@reearth/beta/lib/core/Map";
+import type { LatLng, ValueTypes, ComputedLayer } from "@reearth/beta/lib/core/mantle";
+import type { Layer, LayerSelectionReason } from "@reearth/beta/lib/core/Map";
 import type { ValueType } from "@reearth/beta/utils/value";
 import {
   useLayersFetcher,
@@ -26,7 +26,7 @@ import {
   useSelectedStoryPageId,
 } from "@reearth/services/state";
 
-import { convertWidgets, processLayers } from "./convert";
+import { convertWidgets, processLayers, processProperty } from "./convert";
 import { convertStory } from "./convert-story";
 import type { BlockType } from "./type";
 
@@ -69,23 +69,17 @@ export default ({
 
   const handleMount = useCallback(() => setIsVisualizerReady(true), [setIsVisualizerReady]);
 
-  const onBlockMove = useCallback(
-    async (_id: string, _fromIndex: number, _toIndex: number) => {
-      if (!selectedLayer) return;
-      console.log("Block has been moved!");
-    },
-    [selectedLayer],
-  );
+  // Scene property
+  // TODO: Fix to use exact type through GQL typing
+  const sceneProperty = useMemo(() => processProperty(scene?.property), [scene?.property]);
 
-  const onBlockRemove = useCallback(
-    async (_id: string) => {
-      if (!selectedLayer) return;
-      console.log("Block has been removed!");
-    },
-    [selectedLayer],
-  );
+  useEffect(() => {
+    sceneProperty?.default?.sceneMode && setSceneMode(sceneProperty?.default?.sceneMode);
+  }, [sceneProperty, setSceneMode]);
+
+  // Layers
+  const rootLayerId = useMemo(() => scene?.rootLayerId, [scene?.rootLayerId]);
 
-  // convert data
   const layers = useMemo(() => {
     const processedLayers = processLayers(nlsLayers, layerStyles);
     if (!showStoryPanel) return processedLayers;
@@ -95,28 +89,6 @@ export default ({
     }));
   }, [nlsLayers, layerStyles, showStoryPanel, currentPage?.layersIds]);
 
-  // TODO: Use GQL value
-  const rootLayerId = "";
-
-  const widgets = convertWidgets(scene);
-  // TODO: Fix to use exact type through GQL typing
-  const sceneProperty: any = useMemo(
-    () => ({
-      tiles: [
-        {
-          id: "default",
-          tile_type: "default",
-        },
-      ],
-    }),
-    [],
-  );
-  const tags: Tag | undefined = useMemo(() => undefined, []);
-
-  const clusters: Cluster[] = [];
-
-  const pluginProperty = useMemo(() => undefined, []);
-
   const selectLayer = useCallback(
     async (
       id?: string,
@@ -133,6 +105,45 @@ export default ({
     [selectedLayer, setSelectedLayer],
   );
 
+  const handleDropLayer = useCallback(
+    async (_propertyId: string, propertyKey: string, _position?: LatLng) => {
+      // propertyKey will be "default.location" for example
+      const [_schemaGroupId, _fieldId] = propertyKey.split(".", 2);
+    },
+    [],
+  );
+
+  // Widgets
+  const widgets = convertWidgets(scene);
+
+  const onWidgetUpdate = useCallback(
+    async (id: string, update: { location?: Location; extended?: boolean; index?: number }) => {
+      await useUpdateWidget(id, update, sceneId);
+    },
+    [sceneId, useUpdateWidget],
+  );
+
+  const onWidgetAlignSystemUpdate = useCallback(
+    async (location: Location, align: Alignment) => {
+      await useUpdateWidgetAlignSystem(
+        { zone: location.zone, section: location.section, area: location.area, align },
+        sceneId,
+      );
+    },
+    [sceneId, useUpdateWidgetAlignSystem],
+  );
+
+  // Plugin
+  const pluginProperty = useMemo(
+    () =>
+      scene?.plugins.reduce<{ [key: string]: any }>(
+        (a, b) => ({ ...a, [b.pluginId]: processProperty(b.property) }),
+        {},
+      ),
+    [scene?.plugins],
+  );
+
+  // Infobox - NOTE: this is from classic. TBD but will change significantly
   const onBlockChange = useCallback(
     async <T extends keyof ValueTypes>(
       blockId: string,
@@ -151,14 +162,21 @@ export default ({
     [],
   );
 
-  // const onFovChange = useCallback(
-  //   (fov: number) => camera && onCameraChange({ ...camera, fov }),
-  //   [camera, onCameraChange],
-  // );
+  const onBlockMove = useCallback(
+    async (_id: string, _fromIndex: number, _toIndex: number) => {
+      if (!selectedLayer) return;
+      console.log("Block has been moved!");
+    },
+    [selectedLayer],
+  );
 
-  useEffect(() => {
-    sceneProperty?.default?.sceneMode && setSceneMode(sceneProperty?.default?.sceneMode);
-  }, [sceneProperty, setSceneMode]);
+  const onBlockRemove = useCallback(
+    async (_id: string) => {
+      if (!selectedLayer) return;
+      console.log("Block has been removed!");
+    },
+    [selectedLayer],
+  );
 
   // block selector
   const blocks: BlockType[] = useMemo(() => [], []);
@@ -169,38 +187,7 @@ export default ({
     }
   };
 
-  // TODO: Use GQL value
-  const title = "TITLE";
-  useEffect(() => {
-    if (!isBuilt || !title) return;
-    document.title = title;
-  }, [isBuilt, title]);
-
-  const handleDropLayer = useCallback(
-    async (_propertyId: string, propertyKey: string, _position?: LatLng) => {
-      // propertyKey will be "default.location" for example
-      const [_schemaGroupId, _fieldId] = propertyKey.split(".", 2);
-    },
-    [],
-  );
-
-  const onWidgetUpdate = useCallback(
-    async (id: string, update: { location?: Location; extended?: boolean; index?: number }) => {
-      await useUpdateWidget(id, update, sceneId);
-    },
-    [sceneId, useUpdateWidget],
-  );
-
-  const onWidgetAlignSystemUpdate = useCallback(
-    async (location: Location, align: Alignment) => {
-      await useUpdateWidgetAlignSystem(
-        { zone: location.zone, section: location.section, area: location.area, align },
-        sceneId,
-      );
-    },
-    [sceneId, useUpdateWidgetAlignSystem],
-  );
-
+  // Story
   const story = useMemo(
     () => convertStory(scene?.stories.find(s => s.id === storyId)),
     [storyId, scene?.stories],
@@ -255,18 +242,19 @@ export default ({
     [],
   );
 
-  const useExperimentalSandbox = useMemo(() => {
-    return !!sceneProperty?.experimental?.experimental_sandbox;
-  }, [sceneProperty]);
+  // TODO: Use GQL value
+  const title = "TITLE";
+  useEffect(() => {
+    if (!isBuilt || !title) return;
+    document.title = title;
+  }, [isBuilt, title]);
 
   return {
     sceneId,
     rootLayerId,
     selectedBlockId: selectedBlock,
     sceneProperty,
     pluginProperty,
-    clusters,
-    tags,
     widgets,
     layers,
     story,
@@ -276,7 +264,7 @@ export default ({
     selectedWidgetArea,
     widgetAlignEditorActivated,
     engineMeta,
-    useExperimentalSandbox,
+    useExperimentalSandbox: false, // TODO: test and use new sandbox in beta solely, removing old way too.
     isVisualizerReady,
     selectWidgetArea: setSelectedWidgetArea,
     zoomedLayerId,