feat: Add scene property overriding to Re:Earth API (#224)

* UI of tile map opacity slider, fix WAS bug * add opacity to visualizer * small refactor of SliderField * remove console log * updates based on PR review * add scene property overriding to reearth api * fix merge * fixed merge for all property fields * fix storybook error * wip: override scene from plugin * Fix storybook ci error * Fix mutation issue in merge, move mergeProperty to utils * Move mergeProperty into Visualizer * Update src/components/molecules/Visualizer/utils.ts Co-authored-by: rot1024 <aayhrot@gmail.com> Co-authored-by: rot1024 <aayhrot@gmail.com>
reearth · May 23, 2022 · b076033 · b076033
1 parent 7a11b30
commit b076033
Show file tree

Hide file tree

Showing 15 changed files with 90 additions and 39 deletions.
diff --git a/src/components/molecules/Visualizer/Engine/Cesium/useEngineRef.ts b/src/components/molecules/Visualizer/Engine/Cesium/useEngineRef.ts
@@ -3,15 +3,12 @@ import { Math as CesiumMath } from "cesium";
 import { useImperativeHandle, Ref, RefObject, useMemo, useRef } from "react";
 import type { CesiumComponentRef } from "resium";
 
-import { delayedObject, merge } from "@reearth/util/object";
-
 import type { Ref as EngineRef } from "..";
 
 import builtinPrimitives from "./builtin";
 import Cluster from "./Cluster";
 import { getLocationFromScreenXY, flyTo, lookAt, getCamera } from "./common";
 
-const exposed = delayedObject(Cesium);
 const exposedFunctions = Object.values(Cesium).filter(
   (e): e is (...args: any[]) => any => typeof e === "function",
 );
@@ -26,19 +23,8 @@ export default function useEngineRef(
 ): EngineRef {
   const cancelCameraFlight = useRef<() => void>();
   const e = useMemo((): EngineRef => {
-    const api = merge(exposed, {
-      get viewer(): Cesium.Viewer | undefined {
-        return cesium.current?.cesiumElement;
-      },
-    });
-
     return {
       name: "cesium",
-      pluginApi: {
-        get Cesium() {
-          return api;
-        },
-      },
       isMarshalable,
       requestRender: () => {
         const viewer = cesium.current?.cesiumElement;

diff --git a/src/components/molecules/Visualizer/Plugin/api.ts b/src/components/molecules/Visualizer/Plugin/api.ts
@@ -14,7 +14,10 @@ import type {
   Tag,
 } from "./types";
 
-export type CommonReearth = Omit<Reearth, "plugin" | "ui" | "block" | "layer" | "widget">;
+export type CommonReearth = Omit<
+  Reearth,
+  "visualizer" | "plugin" | "ui" | "block" | "layer" | "widget"
+> & { visualizer: Omit<Reearth["visualizer"], "overrideProperty"> };
 
 export function exposed({
   render,
@@ -26,6 +29,7 @@ export function exposed({
   layer,
   block,
   widget,
+  overrideSceneProperty,
 }: {
   render: (
     html: string,
@@ -44,6 +48,7 @@ export function exposed({
   layer?: () => Layer | undefined;
   block?: () => Block | undefined;
   widget?: () => Widget | undefined;
+  overrideSceneProperty?: (pluginId: string, property: any) => void;
 }): GlobalThis {
   return merge({
     console: {
@@ -53,6 +58,11 @@ export function exposed({
     reearth: merge(
       commonReearth,
       {
+        visualizer: {
+          overrideProperty: (property: any) => {
+            overrideSceneProperty?.(plugin ? `${plugin.id}/${plugin.extensionId}` : "", property);
+          },
+        },
         ui: {
           show: (
             html: string,

diff --git a/src/components/molecules/Visualizer/Plugin/context.tsx b/src/components/molecules/Visualizer/Plugin/context.tsx
@@ -36,7 +36,7 @@ export type EngineContext = {
 export type Props = {
   engine: EngineContext;
   engineName: string;
-  sceneProperty?: any;
+  mergedSceneProperty?: any;
   tags?: Tag[];
   camera?: CameraPosition;
   layers: LayerStore;
@@ -73,7 +73,7 @@ declare global {
 export function Provider({
   engine: { api, isMarshalable, builtinPrimitives },
   engineName,
-  sceneProperty,
+  mergedSceneProperty,
   tags,
   camera,
   layers,
@@ -100,7 +100,7 @@ export function Provider({
   );
 
   const getLayers = useGet(layers);
-  const getSceneProperty = useGet(sceneProperty);
+  const getSceneProperty = useGet(mergedSceneProperty);
   const getTags = useGet(tags ?? []);
   const getCamera = useGet(camera);
   const getSelectedLayer = useGet(selectedLayer);

diff --git a/src/components/molecules/Visualizer/Plugin/hooks.ts b/src/components/molecules/Visualizer/Plugin/hooks.ts
@@ -20,6 +20,7 @@ export default function ({
   pluginProperty,
   onRender,
   onResize,
+  overrideSceneProperty,
 }: {
   pluginId?: string;
   extensionId?: string;
@@ -29,6 +30,7 @@ export default function ({
   widget?: Widget;
   block?: Block;
   pluginProperty?: any;
+  overrideSceneProperty?: (pluginId: string, property: any) => void;
   onRender?: (
     options:
       | {
@@ -53,6 +55,7 @@ export default function ({
       layer,
       widget,
       pluginProperty,
+      overrideSceneProperty,
       onRender,
       onResize,
     }) ?? [];
@@ -89,6 +92,7 @@ export function useAPI({
   layer,
   block,
   widget,
+  overrideSceneProperty,
   onRender,
   onResize,
 }: {
@@ -99,6 +103,7 @@ export function useAPI({
   layer: Layer | undefined;
   block: Block | undefined;
   widget: Widget | undefined;
+  overrideSceneProperty?: (pluginId: string, property: any) => void;
   onRender?: (
     options:
       | {
@@ -192,6 +197,7 @@ export function useAPI({
           resize(width, height);
           onResize?.(width, height, extended);
         },
+        overrideSceneProperty,
       });
     };
   }, [
@@ -205,6 +211,7 @@ export function useAPI({
     getWidget,
     onRender,
     onResize,
+    overrideSceneProperty,
   ]);
 
   useEffect(() => {

diff --git a/src/components/molecules/Visualizer/Plugin/index.tsx b/src/components/molecules/Visualizer/Plugin/index.tsx
@@ -32,6 +32,7 @@ export type Props = {
   layer?: Layer;
   widget?: Widget;
   block?: Block;
+  overrideSceneProperty?: (pluginId: string, property: any) => void;
   onClick?: () => void;
   onRender?: (
     options:
@@ -63,6 +64,7 @@ export default function Plugin({
   widget,
   block,
   pluginProperty,
+  overrideSceneProperty,
   onClick,
   onRender,
   onResize,
@@ -76,6 +78,7 @@ export default function Plugin({
     widget,
     block,
     pluginProperty,
+    overrideSceneProperty,
     onRender,
     onResize,
   });

diff --git a/src/components/molecules/Visualizer/Plugin/types.ts b/src/components/molecules/Visualizer/Plugin/types.ts
@@ -220,6 +220,7 @@ export type Visualizer = {
   readonly camera: Camera;
   /** Current scene property */
   readonly property?: any;
+  readonly overrideProperty: (property: any) => void;
 };
 
 type Rect = {

diff --git a/src/components/molecules/Visualizer/Primitive/index.tsx b/src/components/molecules/Visualizer/Primitive/index.tsx
@@ -1,8 +1,8 @@
-import { mergeWith } from "lodash";
 import React, { ComponentType, useMemo } from "react";
 
 import { useContext } from "../Plugin";
 import type { Layer } from "../Plugin";
+import { mergeProperty } from "../utils";
 
 export type { Layer } from "../Plugin";
 
@@ -53,12 +53,3 @@ export default function PrimitiveComponent<P = any, PP = any, SP = any>({
     <Builtin {...props} layer={actualLayer} />
   ) : null;
 }
-
-export function mergeProperty(a: any, b: any) {
-  return mergeWith(
-    { ...a },
-    b,
-    (s: any, v: any, _k: string | number | symbol, _obj: any, _src: any, stack: { size: number }) =>
-      stack.size > 0 || Array.isArray(v) ? v ?? s : undefined,
-  );
-}
diff --git a/src/components/molecules/Visualizer/Widget/index.tsx b/src/components/molecules/Visualizer/Widget/index.tsx
@@ -23,6 +23,7 @@ export type Props<PP = any, SP = any> = {
   pluginBaseUrl?: string;
   layout?: WidgetLayout;
   editing?: boolean;
+  overrideSceneProperty?: (pluginId: string, property: any) => void;
   onExtend?: (id: string, extended: boolean | undefined) => void;
 };
 
@@ -38,6 +39,7 @@ export default function WidgetComponent<PP = any, SP = any>({
   pluginBaseUrl,
   layout,
   onExtend,
+  overrideSceneProperty,
   ...props
 }: Props<PP, SP>) {
   const { align, location } = layout ?? {};
@@ -96,6 +98,7 @@ export default function WidgetComponent<PP = any, SP = any>({
       widget={w}
       onRender={handleRender}
       onResize={handleResize}
+      overrideSceneProperty={overrideSceneProperty}
     />
   );
 }

diff --git a/src/components/molecules/Visualizer/WidgetAlignSystem/Area.tsx b/src/components/molecules/Visualizer/WidgetAlignSystem/Area.tsx
@@ -20,6 +20,7 @@ type Props = {
   sceneProperty?: any;
   pluginProperty?: { [key: string]: any };
   pluginBaseUrl?: string;
+  overrideSceneProperty?: (pluginId: string, property: any) => void;
   // note that layoutConstraint will be always undefined in published pages
   layoutConstraint?: { [w in string]: WidgetLayoutConstraint };
 };
@@ -31,6 +32,7 @@ export default function Area({
   align,
   widgets,
   pluginProperty,
+  overrideSceneProperty,
   layoutConstraint,
   ...props
 }: Props) {
@@ -92,6 +94,7 @@ export default function Area({
                 extended={extended}
                 editing={editing}
                 onExtend={handleExtend}
+                overrideSceneProperty={overrideSceneProperty}
                 {...props}
               />
             )}

diff --git a/src/components/molecules/Visualizer/WidgetAlignSystem/Zone.tsx b/src/components/molecules/Visualizer/WidgetAlignSystem/Zone.tsx
@@ -13,6 +13,7 @@ export type Props = {
   sceneProperty?: any;
   pluginProperty?: { [key: string]: any };
   pluginBaseUrl?: string;
+  overrideSceneProperty?: (pluginId: string, property: any) => void;
 };
 
 const sections = ["left", "center", "right"] as const;
@@ -27,6 +28,7 @@ export default function Zone({
   pluginBaseUrl,
   isEditable,
   isBuilt,
+  overrideSceneProperty,
   children,
 }: PropsWithChildren<Props>) {
   return (
@@ -52,6 +54,7 @@ export default function Zone({
                 pluginBaseUrl={pluginBaseUrl}
                 isEditable={isEditable}
                 isBuilt={isBuilt}
+                overrideSceneProperty={overrideSceneProperty}
               />
             ),
           )}

diff --git a/src/components/molecules/Visualizer/WidgetAlignSystem/index.tsx b/src/components/molecules/Visualizer/WidgetAlignSystem/index.tsx
@@ -44,6 +44,7 @@ export type Props = {
     },
   ) => void;
   onWidgetAlignSystemUpdate?: (location: Location, align: Alignment) => void;
+  overrideSceneProperty?: (pluginId: string, property: any) => void;
 };
 
 const WidgetAlignSystem: React.FC<Props> = ({
@@ -57,6 +58,7 @@ const WidgetAlignSystem: React.FC<Props> = ({
   layoutConstraint,
   onWidgetUpdate,
   onWidgetAlignSystemUpdate,
+  overrideSceneProperty,
 }) => {
   const { handleMove, handleExtend, handleAlignmentChange } = useHooks({
     onWidgetUpdate,
@@ -90,6 +92,7 @@ const WidgetAlignSystem: React.FC<Props> = ({
                 pluginBaseUrl={pluginBaseUrl}
                 isEditable={isEditable}
                 isBuilt={isBuilt}
+                overrideSceneProperty={overrideSceneProperty}
                 layoutConstraint={layoutConstraint}
               />
             )}
@@ -103,6 +106,7 @@ const WidgetAlignSystem: React.FC<Props> = ({
             pluginBaseUrl={pluginBaseUrl}
             isEditable={isEditable}
             isBuilt={isBuilt}
+            overrideSceneProperty={overrideSceneProperty}
             layoutConstraint={layoutConstraint}>
             <ZoneComponent
               zoneName="inner"
@@ -112,6 +116,7 @@ const WidgetAlignSystem: React.FC<Props> = ({
               pluginBaseUrl={pluginBaseUrl}
               isEditable={isEditable}
               isBuilt={isBuilt}
+              overrideSceneProperty={overrideSceneProperty}
               layoutConstraint={layoutConstraint}
             />
           </ZoneComponent>

diff --git a/src/components/molecules/Visualizer/hooks.ts b/src/components/molecules/Visualizer/hooks.ts
@@ -1,4 +1,5 @@
 import { Rectangle, Cartographic, Math as CesiumMath } from "cesium";
+import { omit } from "lodash";
 import { useRef, useEffect, useMemo, useState, useCallback, RefObject } from "react";
 import { initialize, pageview } from "react-ga";
 import { useSet } from "react-use";
@@ -16,6 +17,7 @@ import type { Props as InfoboxProps, Block } from "./Infobox";
 import { LayerStore, emptyLayerStore } from "./Layers";
 import type { ProviderProps } from "./Plugin";
 import type { CameraOptions, FlyToDestination, LookAtDestination, Tag } from "./Plugin/types";
+import { mergeProperty } from "./utils";
 
 export default ({
   engineType,
@@ -52,6 +54,23 @@ export default ({
 }) => {
   const engineRef = useRef<EngineRef>(null);
 
+  const [overriddenSceneProperty, overrideSceneProperty] = useState<{ [pluginId: string]: any }>(
+    {},
+  );
+
+  const handleScenePropertyOverride = useCallback((pluginId: string, property: any) => {
+    overrideSceneProperty(p =>
+      pluginId && property ? { ...p, [pluginId]: property } : omit(p, pluginId),
+    );
+  }, []);
+
+  const mergedSceneProperty = useMemo(() => {
+    return Object.values(overriddenSceneProperty).reduce(
+      (p, v) => mergeProperty(p, v),
+      sceneProperty,
+    );
+  }, [sceneProperty, overriddenSceneProperty]);
+
   const wrapperRef = useRef<HTMLDivElement>(null);
   const { ref: dropRef, isDroppable } = useDrop(
     useMemo(
@@ -141,7 +160,7 @@ export default ({
   const providerProps: ProviderProps = useProviderProps(
     {
       engineName: engineType || "",
-      sceneProperty,
+      mergedSceneProperty,
       tags,
       camera: innerCamera,
       selectedLayer,
@@ -174,17 +193,19 @@ export default ({
     selectedLayer,
     layerSelectionReason,
     layerOverriddenProperties,
+    isLayerDragging,
     selectedBlockId,
     innerCamera,
     infobox,
+    mergedSceneProperty,
     isLayerHidden,
     selectLayer,
     selectBlock,
     updateCamera,
-    isLayerDragging,
     handleLayerDrag,
     handleLayerDrop,
     handleInfoboxMaskClick,
+    overrideSceneProperty: handleScenePropertyOverride,
   };
 };