feat: extend plugin API supports move widget

src/components/molecules/Visualizer/Plugin/api.ts

@@ -14,6 +14,7 @@ import type {
   Plugin,
   Tag,
   PopupPosition,
+  WidgetLocationOptions,
 } from "./types";
 
 export type CommonReearth = Omit<
@@ -41,6 +42,7 @@ export function exposed({
   block,
   widget,
   overrideSceneProperty,
+  moveWidget,
 }: {
   render: (
     html: string,
@@ -76,6 +78,7 @@ export function exposed({
   block?: () => Block | undefined;
   widget?: () => Widget | undefined;
   overrideSceneProperty?: (pluginId: string, property: any) => void;
+  moveWidget?: (widgetId: string, options: WidgetLocationOptions) => void;
 }): GlobalThis {
   return merge({
     console: {
@@ -184,7 +187,14 @@ export function exposed({
       plugin?.extensionType === "widget"
         ? {
             get widget() {
-              return widget?.();
+              return {
+                ...widget?.(),
+                moveTo: (options: WidgetLocationOptions) => {
+                  const widgetId = widget?.()?.id;
+                  if (!widgetId) return;
+                  moveWidget?.(widgetId, options);
+                },
+              };
             },
           }
         : {},

src/components/molecules/Visualizer/Plugin/context.tsx

@@ -31,6 +31,7 @@ import type {
   Clock,
   Viewport,
   LatLngHeight,
+  WidgetLocationOptions,
 } from "./types";
 
 export type EngineContext = {
@@ -81,12 +82,14 @@ export type Props = {
   moveRight: (amount: number) => void;
   moveOverTerrain: () => void;
   flyToGround: (destination: FlyToDestination, options?: CameraOptions, offset?: number) => void;
+  moveWidget: (widgetId: string, options: WidgetLocationOptions) => void;
 };
 
 export type Context = {
   reearth: CommonReearth;
   engine: EngineContext;
   overrideSceneProperty: (id: string, property: any) => void;
+  moveWidget: (widgetId: string, options: WidgetLocationOptions) => void;
 };
 
 export const context = createContext<Context | undefined>(undefined);
@@ -140,6 +143,7 @@ export function Provider({
   moveRight,
   moveOverTerrain,
   flyToGround,
+  moveWidget,
   children,
 }: Props): JSX.Element {
   const [ev, emit] = useMemo(
@@ -218,6 +222,7 @@ export function Provider({
         flyToGround,
       }),
       overrideSceneProperty,
+      moveWidget,
     }),
     [
       api,
@@ -263,6 +268,7 @@ export function Provider({
       moveOverTerrain,
       flyToGround,
       overrideSceneProperty,
+      moveWidget,
     ],
   );
 

src/components/molecules/Visualizer/Plugin/hooks.ts

@@ -366,11 +366,13 @@ export function useAPI({
           onResize?.(width, height, extended);
         },
         overrideSceneProperty: ctx.overrideSceneProperty,
+        moveWidget: ctx.moveWidget,
       });
     };
   }, [
     ctx?.reearth,
     ctx?.overrideSceneProperty,
+    ctx?.moveWidget,
     extensionId,
     extensionType,
     pluginId,

src/components/molecules/Visualizer/Plugin/types.ts

@@ -208,6 +208,7 @@ export type Widget<P = any> = {
     vertically: boolean;
   };
   layout?: WidgetLayout;
+  moveTo?: (options: WidgetLocationOptions) => void;
 };
 
 export type WidgetLayout = {
@@ -223,6 +224,10 @@ export type WidgetLocation = {
 
 export type WidgetAlignment = "start" | "centered" | "end";
 
+export type WidgetLocationOptions = WidgetLocation & {
+  method?: "insert" | "append";
+};
+
 /** The API for iframes, which is required not only for displaying the UI but also for calling the browser API. */
 export type UI = {
   /**

src/components/molecules/Visualizer/hooks.ts

@@ -23,9 +23,17 @@ import type {
   Clock,
   FlyToDestination,
   LookAtDestination,
+  WidgetLocationOptions,
   Tag,
 } from "./Plugin/types";
 import { useOverriddenProperty } from "./utils";
+import type {
+  Widget,
+  WidgetAlignSystem,
+  WidgetSection,
+  WidgetZone,
+  WidgetArea,
+} from "./WidgetAlignSystem";
 
 export type Viewport = {
   width: number;
@@ -50,6 +58,7 @@ export default ({
   clock,
   sceneProperty,
   tags,
+  alignSystem,
   onLayerSelect,
   onBlockSelect,
   onBlockChange,
@@ -72,6 +81,7 @@ export default ({
   clock?: Clock;
   sceneProperty?: SceneProperty;
   tags?: Tag[];
+  alignSystem?: WidgetAlignSystem;
   onLayerSelect?: (id?: string) => void;
   onBlockSelect?: (id?: string) => void;
   onBlockChange?: <T extends keyof ValueTypes>(
@@ -249,6 +259,97 @@ export default ({
     pageview(window.location.pathname);
   }, [isPublished, enableGA, trackingId]);
 
+  const [overriddenAlignSystem, setOverrideAlignSystem] = useState<WidgetAlignSystem | undefined>(
+    alignSystem,
+  );
+
+  const moveWidget = useCallback((widgetId: string, options: WidgetLocationOptions) => {
+    if (
+      !widgetId ||
+      !["outer", "inner"].includes(options.zone) ||
+      !["left", "center", "right"].includes(options.section) ||
+      !["top", "middle", "bottom"].includes(options.area) ||
+      (options.section === "center" && options.area === "middle")
+    )
+      return;
+
+    let tarWidget: Widget | undefined;
+
+    setOverrideAlignSystem(alignSystem => {
+      if (!alignSystem) return alignSystem;
+      Object.keys(alignSystem).forEach(zoneName => {
+        const zone = alignSystem[zoneName as keyof WidgetAlignSystem];
+        if (zone) {
+          Object.keys(zone).forEach(sectionName => {
+            const section = zone[sectionName as keyof WidgetZone];
+            if (section) {
+              Object.keys(section).forEach(areaName => {
+                const area = section[areaName as keyof WidgetSection];
+                if (!tarWidget && area?.widgets) {
+                  let tarIndex;
+                  for (let i = 0, len = area.widgets.length; i < len; i += 1) {
+                    if (area.widgets[i].id === widgetId) {
+                      tarIndex = i;
+                      break;
+                    }
+                  }
+                  if (tarIndex !== undefined) {
+                    [tarWidget] = area.widgets.splice(tarIndex, 1);
+                  }
+                }
+              });
+            }
+          });
+        }
+      });
+      return { ...alignSystem };
+    });
+
+    setTimeout(() => {
+      setOverrideAlignSystem(alignSystem => {
+        if (!alignSystem || !tarWidget) return alignSystem;
+        if (!alignSystem[options.zone]) {
+          alignSystem[options.zone] = {
+            left: undefined,
+            center: undefined,
+            right: undefined,
+          };
+        }
+
+        const tarZone = alignSystem[options.zone] as WidgetZone;
+        if (!tarZone[options.section]) {
+          tarZone[options.section] = {
+            top: undefined,
+            middle: undefined,
+            bottom: undefined,
+          };
+        }
+
+        const tarSection = tarZone[options.section] as WidgetSection;
+        if (!tarSection[options.area]) {
+          tarSection[options.area] = {
+            align: "start",
+            widgets: [],
+          };
+        }
+
+        const tarArea = tarSection[options.area] as WidgetArea;
+        if (!tarArea.widgets) tarArea.widgets = [];
+        if (options.method === "insert") {
+          tarArea.widgets.unshift(tarWidget);
+        } else {
+          tarArea.widgets.push(tarWidget);
+        }
+
+        return { ...alignSystem };
+      });
+    }, 0);
+  }, []);
+
+  useEffect(() => {
+    setOverrideAlignSystem(alignSystem);
+  }, [alignSystem]);
+
   const providerProps: ProviderProps = useProviderProps(
     {
       engineName: engineType || "",
@@ -268,6 +369,7 @@ export default ({
       selectLayer,
       overrideLayerProperty,
       overrideSceneProperty,
+      moveWidget,
     },
     engineRef,
     layers,
@@ -315,6 +417,7 @@ export default ({
     pluginPopupContainerRef,
     shownPluginPopupInfo,
     viewport,
+    overriddenAlignSystem,
     onPluginModalShow,
     onPluginPopupShow,
     isLayerHidden,

src/components/molecules/Visualizer/index.tsx

@@ -128,6 +128,7 @@ export default function Visualizer({
     shownPluginModalInfo,
     pluginPopupContainerRef,
     shownPluginPopupInfo,
+    overriddenAlignSystem,
     viewport,
     onPluginModalShow,
     onPluginPopupShow,
@@ -155,6 +156,7 @@ export default function Visualizer({
     clock: props.clock,
     sceneProperty,
     tags,
+    alignSystem: widgets?.alignSystem,
     onLayerSelect,
     onBlockSelect,
     onBlockChange,
@@ -171,7 +173,7 @@ export default function Visualizer({
           {isDroppable && <DropHolder />}
           {ready && widgets?.alignSystem && (
             <WidgetAlignSystem
-              alignSystem={widgets.alignSystem}
+              alignSystem={overriddenAlignSystem}
               editing={widgetAlignEditorActivated}
               onWidgetUpdate={onWidgetUpdate}
               onWidgetAlignSystemUpdate={onWidgetAlignSystemUpdate}

src/components/molecules/Visualizer/storybook.tsx

@@ -113,6 +113,7 @@ export const context: ProviderProps = {
   moveRight: act("moveRight"),
   moveOverTerrain: act("moveOverTerrain"),
   flyToGround: act("flyToGround"),
+  moveWidget: act("moveWidget"),
 };
 
 function act<T extends any[], M extends (...args: T) => any>(