feat: extend plugin API supports communication (#364)

* feat: add communication * fix: type on storybook * feat: get name from format pluginid-version * refactor: correct blocks * refactor: clean up * refactor: useRef & remove some useCallback * refactor: clean up * refactor: use promise for send messge * refactor: correct naming
reearth · Dec 14, 2022 · 61e67ef · 61e67ef
1 parent 1fcc75f
commit 61e67ef
Show file tree

Hide file tree

Showing 8 changed files with 216 additions and 2 deletions.
diff --git a/src/components/molecules/Visualizer/Plugin/api.ts b/src/components/molecules/Visualizer/Plugin/api.ts
@@ -3,6 +3,7 @@ import { merge } from "@reearth/util/object";
 
 import { Viewport as VisualizerViewport } from "../hooks";
 import type { LayerStore } from "../Layers";
+import type { PluginInstances } from "../usePluginInstances";
 
 import type {
   GlobalThis,
@@ -43,6 +44,7 @@ export function exposed({
   widget,
   overrideSceneProperty,
   moveWidget,
+  pluginPostMessage,
 }: {
   render: (
     html: string,
@@ -79,6 +81,7 @@ export function exposed({
   widget?: () => Widget | undefined;
   overrideSceneProperty?: (pluginId: string, property: any) => void;
   moveWidget?: (widgetId: string, options: WidgetLocationOptions) => void;
+  pluginPostMessage: (extentionId: string, msg: any, sender: string) => void;
 }): GlobalThis {
   return merge({
     console: {
@@ -172,6 +175,20 @@ export function exposed({
             return plugin?.property;
           },
         },
+        plugins: {
+          get postMessage() {
+            const sender =
+              (plugin?.extensionType === "widget"
+                ? widget?.()?.id
+                : plugin?.extensionType === "block"
+                ? block?.()?.id
+                : "") ?? "";
+            return (id: string, msg: any) => pluginPostMessage(id, msg, sender);
+          },
+          get instances() {
+            return commonReearth.plugins.instances;
+          },
+        },
         ...events,
       },
       plugin?.extensionType === "block"
@@ -212,6 +229,7 @@ export function commonReearth({
   tags,
   camera,
   clock,
+  pluginInstances,
   viewport,
   selectedLayer,
   layerSelectionReason,
@@ -252,6 +270,7 @@ export function commonReearth({
   viewport: () => VisualizerViewport;
   camera: () => GlobalThis["reearth"]["camera"]["position"];
   clock: () => GlobalThis["reearth"]["clock"];
+  pluginInstances: () => PluginInstances;
   selectedLayer: () => GlobalThis["reearth"]["layers"]["selected"];
   layerSelectionReason: () => GlobalThis["reearth"]["layers"]["selectionReason"];
   layerOverriddenInfobox: () => GlobalThis["reearth"]["layers"]["overriddenInfobox"];
@@ -425,6 +444,11 @@ export function commonReearth({
         return addLayer;
       },
     },
+    plugins: {
+      get instances() {
+        return pluginInstances().meta.current;
+      },
+    },
     ...events,
   };
 }
diff --git a/src/components/molecules/Visualizer/Plugin/context.tsx b/src/components/molecules/Visualizer/Plugin/context.tsx
@@ -14,6 +14,7 @@ import { MouseEvents, MouseEventHandles } from "../Engine/ref";
 import { Viewport as VisualizerViewport } from "../hooks";
 import type { LayerStore } from "../Layers";
 import type { Component as PrimitiveComponent } from "../Primitive";
+import { PluginInstances } from "../usePluginInstances";
 import { useGet } from "../utils";
 
 import type { CommonReearth } from "./api";
@@ -48,6 +49,7 @@ export type Props = {
   tags?: Tag[];
   camera?: CameraPosition;
   clock: Clock | undefined;
+  pluginInstances: PluginInstances;
   layers: LayerStore;
   selectedLayer?: Layer;
   layerSelectionReason?: string;
@@ -93,6 +95,7 @@ type SelectedReearthEventType = Pick<
 export type Context = {
   reearth: CommonReearth;
   engine: EngineContext;
+  pluginInstances: PluginInstances;
   overrideSceneProperty: (id: string, property: any) => void;
   emit: EventEmitter<SelectedReearthEventType>;
   moveWidget: (widgetId: string, options: WidgetLocationOptions) => void;
@@ -115,6 +118,7 @@ export function Provider({
   tags,
   camera,
   clock,
+  pluginInstances,
   layers,
   selectedLayer,
   layerSelectionReason,
@@ -164,6 +168,7 @@ export function Provider({
   const getTags = useGet(tags ?? []);
   const getCamera = useGet(camera);
   const getClock = useGet(clock);
+  const getPluginInstances = useGet(pluginInstances);
   const getViewport = useGet(viewport as Viewport);
   const getSelectedLayer = useGet(selectedLayer);
   const getLayerSelectionReason = useGet(layerSelectionReason);
@@ -191,6 +196,7 @@ export function Provider({
         tags: getTags,
         camera: getCamera,
         clock: getClock,
+        pluginInstances: getPluginInstances,
         viewport: getViewport,
         selectedLayer: getSelectedLayer,
         layerSelectionReason: getLayerSelectionReason,
@@ -227,6 +233,7 @@ export function Provider({
       overrideSceneProperty,
       emit,
       moveWidget,
+      pluginInstances,
     }),
     [
       api,
@@ -239,6 +246,7 @@ export function Provider({
       getTags,
       getCamera,
       getClock,
+      getPluginInstances,
       getViewport,
       getSelectedLayer,
       getLayerSelectionReason,
@@ -274,6 +282,7 @@ export function Provider({
       overrideSceneProperty,
       emit,
       moveWidget,
+      pluginInstances,
     ],
   );
 

diff --git a/src/components/molecules/Visualizer/Plugin/hooks.ts b/src/components/molecules/Visualizer/Plugin/hooks.ts
@@ -207,6 +207,10 @@ export function useAPI({
   const event =
     useRef<[Events<ReearthEventType>, EventEmitter<ReearthEventType>, (() => void) | undefined]>();
 
+  const pluginMessageSender = useCallback((msg: any) => {
+    event.current?.[1]("pluginmessage", msg);
+  }, []);
+
   const onPreInit = useCallback(() => {
     const e = events<ReearthEventType>();
     let cancel: (() => void) | undefined;
@@ -241,7 +245,20 @@ export function useAPI({
     }
 
     event.current = [e[0], e[1], cancel];
-  }, [ctx?.reearth.on, ctx?.reearth.off, ctx?.reearth.once]);
+
+    const instanceId = widget?.id ?? block?.id;
+    if (instanceId) {
+      ctx?.pluginInstances.addPluginMessageSender(instanceId, pluginMessageSender);
+    }
+  }, [
+    ctx?.reearth.on,
+    ctx?.reearth.off,
+    ctx?.reearth.once,
+    ctx?.pluginInstances,
+    widget?.id,
+    block?.id,
+    pluginMessageSender,
+  ]);
 
   const onDispose = useCallback(() => {
     event.current?.[1]("close");
@@ -253,6 +270,10 @@ export function useAPI({
     if (popupVisible) {
       onPluginPopupShow?.();
     }
+    const instanceId = widget?.id ?? block?.id;
+    if (instanceId) {
+      ctx?.pluginInstances.removePluginMessageSender(instanceId);
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [onPluginModalShow, onPluginPopupShow]);
 
@@ -368,12 +389,14 @@ export function useAPI({
         },
         overrideSceneProperty: ctx.overrideSceneProperty,
         moveWidget: ctx.moveWidget,
+        pluginPostMessage: ctx.pluginInstances.postMessage,
       });
     };
   }, [
     ctx?.reearth,
     ctx?.overrideSceneProperty,
     ctx?.moveWidget,
+    ctx?.pluginInstances,
     extensionId,
     extensionType,
     pluginId,

diff --git a/src/components/molecules/Visualizer/Plugin/types.ts b/src/components/molecules/Visualizer/Plugin/types.ts
@@ -20,6 +20,7 @@ export type Reearth = {
   readonly modal: Modal;
   readonly popup: Popup;
   readonly plugin: Plugin;
+  readonly plugins: Plugins;
   readonly layers: Layers;
   readonly layer?: Layer;
   readonly widget?: Widget;
@@ -56,6 +57,11 @@ export type LayerEditEvent = {
   rotate?: { heading: number; pitch: number; roll: number };
 };
 
+export type PluginMessage = {
+  data: any;
+  sender: string;
+};
+
 export type ReearthEventType = {
   update: [];
   close: [];
@@ -81,6 +87,7 @@ export type ReearthEventType = {
   resize: [props: Viewport];
   modalclose: [];
   popupclose: [];
+  pluginmessage: [props: PluginMessage];
 };
 
 /** Access to the metadata of this plugin and extension currently executed. */
@@ -91,6 +98,19 @@ export type Plugin = {
   readonly property?: any;
 };
 
+export type PluginExtensionInstance = {
+  readonly id: string;
+  readonly pluginId: string;
+  readonly name: string;
+  readonly extensionId: string;
+  readonly extensionType: "widget" | "block";
+};
+
+export type Plugins = {
+  readonly instances: PluginExtensionInstance[];
+  readonly postMessage?: (id: string, message: any) => void;
+};
+
 export type LatLngHeight = {
   lat: number;
   lng: number;

diff --git a/src/components/molecules/Visualizer/hooks.ts b/src/components/molecules/Visualizer/hooks.ts
@@ -25,9 +25,10 @@ import type {
   LookAtDestination,
   Tag,
 } from "./Plugin/types";
+import usePluginInstances from "./usePluginInstances";
 import useWidgetAlignSystem from "./useWidgetAlignSystem";
 import { useOverriddenProperty } from "./utils";
-import type { WidgetAlignSystem } from "./WidgetAlignSystem";
+import type { WidgetAlignSystem, Widget } from "./WidgetAlignSystem";
 
 export type Viewport = {
   width: number;
@@ -53,6 +54,7 @@ export default ({
   sceneProperty,
   tags,
   alignSystem,
+  floatingWidgets,
   onLayerSelect,
   onBlockSelect,
   onBlockChange,
@@ -76,6 +78,7 @@ export default ({
   sceneProperty?: SceneProperty;
   tags?: Tag[];
   alignSystem?: WidgetAlignSystem;
+  floatingWidgets?: Widget[];
   onLayerSelect?: (id?: string) => void;
   onBlockSelect?: (id?: string) => void;
   onBlockChange?: <T extends keyof ValueTypes>(
@@ -257,6 +260,12 @@ export default ({
     alignSystem,
   });
 
+  const pluginInstances = usePluginInstances({
+    alignSystem,
+    floatingWidgets,
+    blocks: selectedLayer?.infobox?.blocks,
+  });
+
   const providerProps: ProviderProps = useProviderProps(
     {
       engineName: engineType || "",
@@ -265,6 +274,7 @@ export default ({
       tags,
       camera: innerCamera,
       clock: innerClock,
+      pluginInstances,
       selectedLayer,
       layerSelectionReason,
       layerOverridenInfobox,

diff --git a/src/components/molecules/Visualizer/index.tsx b/src/components/molecules/Visualizer/index.tsx
@@ -159,6 +159,7 @@ export default function Visualizer({
     sceneProperty,
     tags,
     alignSystem: widgets?.alignSystem,
+    floatingWidgets: widgets?.floatingWidgets,
     onLayerSelect,
     onBlockSelect,
     onBlockChange,

diff --git a/src/components/molecules/Visualizer/storybook.tsx b/src/components/molecules/Visualizer/storybook.tsx
@@ -89,6 +89,14 @@ export const context: ProviderProps = {
     isMobile: false,
   },
   layers: new LayerStore({ id: "", children: layers }),
+  pluginInstances: {
+    meta: {
+      current: [],
+    },
+    postMessage: () => {},
+    addPluginMessageSender: () => {},
+    removePluginMessageSender: () => {},
+  },
   flyTo: act("flyTo"),
   lookAt: act("lookAt"),
   zoomIn: act("zoomIn"),