feat: extend plugin API supports get viewport's size (#342)

* feat: add plugin api viewport * refactor: make viewport always avaliable * refactor: add type VisualizerViewport * refactor: pass viewport to infobox * refactor: visualizerViewport nullable * refactor: update type definition * refactor: move viewportMobileMaxWidth out of hook
reearth · Nov 9, 2022 · 7b268ba · 7b268ba
1 parent 0395d2b
commit 7b268ba
Show file tree

Hide file tree

Showing 14 changed files with 175 additions and 65 deletions.
diff --git a/src/components/molecules/Visualizer/Block/index.tsx b/src/components/molecules/Visualizer/Block/index.tsx
@@ -3,6 +3,7 @@ import { ComponentType } from "react";
 import { styled } from "@reearth/theme";
 import { ValueType, ValueTypes } from "@reearth/util/value";
 
+import { Viewport } from "../hooks";
 import Plugin from "../Plugin";
 import type { Block, Layer, InfoboxProperty, CommonProps as PluginCommonProps } from "../Plugin";
 
@@ -17,6 +18,7 @@ export type Props<BP = any> = {
   layer?: Layer;
   block?: Block<BP>;
   infoboxProperty?: InfoboxProperty;
+  viewport?: Viewport;
   onClick?: () => void;
   onChange?: <T extends ValueType>(
     schemaItemId: string,
@@ -37,32 +39,34 @@ export default function BlockComponent<P = any>({
       ? builtin[`${props.block.pluginId}/${props.block.extensionId}`]
       : undefined;
 
-  return Builtin ? (
-    <Builtin {...props} />
-  ) : (
-    <Wrapper editable={props?.isEditable} onClick={props?.onClick} selected={props?.isSelected}>
-      <Plugin
-        autoResize="height-only"
-        pluginId={props.block?.pluginId}
-        extensionId={props.block?.extensionId}
-        sourceCode={(props.block as any)?.__REEARTH_SOURCECODE} // for debugging
-        extensionType="block"
-        pluginBaseUrl={pluginBaseUrl}
-        visible
-        property={props.pluginProperty}
-        pluginProperty={props.pluginProperty}
-        layer={props.layer}
-        block={props.block}
-        onClick={props.onClick}
-        pluginModalContainer={props.pluginModalContainer}
-        shownPluginModalInfo={props.shownPluginModalInfo}
-        onPluginModalShow={props.onPluginModalShow}
-        pluginPopupContainer={props.pluginPopupContainer}
-        shownPluginPopupInfo={props.shownPluginPopupInfo}
-        onPluginPopupShow={props.onPluginPopupShow}
-      />
-    </Wrapper>
-  );
+  return props.viewport ? (
+    Builtin ? (
+      <Builtin {...props} />
+    ) : (
+      <Wrapper editable={props?.isEditable} onClick={props?.onClick} selected={props?.isSelected}>
+        <Plugin
+          autoResize="height-only"
+          pluginId={props.block?.pluginId}
+          extensionId={props.block?.extensionId}
+          sourceCode={(props.block as any)?.__REEARTH_SOURCECODE} // for debugging
+          extensionType="block"
+          pluginBaseUrl={pluginBaseUrl}
+          visible
+          property={props.pluginProperty}
+          pluginProperty={props.pluginProperty}
+          layer={props.layer}
+          block={props.block}
+          onClick={props.onClick}
+          pluginModalContainer={props.pluginModalContainer}
+          shownPluginModalInfo={props.shownPluginModalInfo}
+          onPluginModalShow={props.onPluginModalShow}
+          pluginPopupContainer={props.pluginPopupContainer}
+          shownPluginPopupInfo={props.shownPluginPopupInfo}
+          onPluginPopupShow={props.onPluginPopupShow}
+        />
+      </Wrapper>
+    )
+  ) : null;
 }
 
 const Wrapper = styled.div<{ editable?: boolean; selected?: boolean }>`

diff --git a/src/components/molecules/Visualizer/Infobox/index.tsx b/src/components/molecules/Visualizer/Infobox/index.tsx
@@ -9,6 +9,7 @@ import { ValueTypes, ValueType } from "@reearth/util/value";
 
 import PluginBlock, { Layer, Block } from "../Block";
 import type { SceneProperty } from "../Engine";
+import { Viewport } from "../hooks";
 import type { CommonProps as PluginCommonProps } from "../Plugin";
 
 import Field from "./Field";
@@ -30,6 +31,7 @@ export type Props = {
   isBuilt?: boolean;
   selectedBlockId?: string;
   visible?: boolean;
+  viewport?: Viewport;
   onMaskClick?: () => void;
   onBlockSelect?: (id?: string) => void;
   onBlockChange?: <T extends ValueType>(

diff --git a/src/components/molecules/Visualizer/Plugin/api.ts b/src/components/molecules/Visualizer/Plugin/api.ts
@@ -1,6 +1,7 @@
 import type { Events } from "@reearth/util/event";
 import { merge } from "@reearth/util/object";
 
+import { Viewport as VisualizerViewport } from "../hooks";
 import type { LayerStore } from "../Layers";
 
 import type {
@@ -13,6 +14,7 @@ import type {
   Plugin,
   Tag,
   PopupPosition,
+  Viewport,
 } from "./types";
 
 export type CommonReearth = Omit<
@@ -89,6 +91,7 @@ export function exposed({
             };
           },
         }),
+        viewport: commonReearth.viewport as Viewport,
         layers: merge(commonReearth.layers, {
           get add() {
             return (layer: Layer, parentId?: string) =>
@@ -197,6 +200,7 @@ export function commonReearth({
   tags,
   camera,
   clock,
+  viewport,
   selectedLayer,
   layerSelectionReason,
   layerOverriddenInfobox,
@@ -211,7 +215,7 @@ export function commonReearth({
   lookAt,
   zoomIn,
   zoomOut,
-  viewport,
+  cameraViewport,
   orbit,
   rotateRight,
   captureScreen,
@@ -232,6 +236,7 @@ export function commonReearth({
   layers: () => LayerStore;
   sceneProperty: () => any;
   tags: () => Tag[];
+  viewport: () => VisualizerViewport;
   camera: () => GlobalThis["reearth"]["camera"]["position"];
   clock: () => GlobalThis["reearth"]["clock"];
   selectedLayer: () => GlobalThis["reearth"]["layers"]["selected"];
@@ -251,7 +256,7 @@ export function commonReearth({
   zoomOut: GlobalThis["reearth"]["visualizer"]["camera"]["zoomOut"];
   rotateRight: GlobalThis["reearth"]["visualizer"]["camera"]["rotateRight"];
   orbit: GlobalThis["reearth"]["visualizer"]["camera"]["orbit"];
-  viewport: () => GlobalThis["reearth"]["visualizer"]["camera"]["viewport"];
+  cameraViewport: () => GlobalThis["reearth"]["visualizer"]["camera"]["viewport"];
   captureScreen: GlobalThis["reearth"]["scene"]["captureScreen"];
   enableScreenSpaceCameraController: GlobalThis["reearth"]["camera"]["enableScreenSpaceController"];
   lookHorizontal: GlobalThis["reearth"]["camera"]["lookHorizontal"];
@@ -281,7 +286,7 @@ export function commonReearth({
           return camera();
         },
         get viewport() {
-          return viewport();
+          return cameraViewport();
         },
         enableScreenSpaceController: enableScreenSpaceCameraController,
         lookHorizontal,
@@ -310,6 +315,9 @@ export function commonReearth({
       overrideProperty: overrideSceneProperty,
       captureScreen,
     },
+    get viewport() {
+      return viewport?.();
+    },
     engineName,
     camera: {
       flyTo,
@@ -322,7 +330,7 @@ export function commonReearth({
         return camera();
       },
       get viewport() {
-        return viewport();
+        return cameraViewport();
       },
       enableScreenSpaceController: enableScreenSpaceCameraController,
       lookHorizontal,

diff --git a/src/components/molecules/Visualizer/Plugin/context.tsx b/src/components/molecules/Visualizer/Plugin/context.tsx
@@ -11,6 +11,7 @@ import events from "@reearth/util/event";
 import { Rect } from "@reearth/util/value";
 
 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 { useGet } from "../utils";
@@ -28,6 +29,7 @@ import type {
   Tag,
   MouseEvent,
   Clock,
+  Viewport,
 } from "./types";
 
 export type EngineContext = {
@@ -48,6 +50,7 @@ export type Props = {
   layerSelectionReason?: string;
   layerOverridenInfobox?: OverriddenInfobox;
   layerOverriddenProperties?: { [key: string]: any };
+  viewport?: VisualizerViewport;
   showLayer: (...id: string[]) => void;
   hideLayer: (...id: string[]) => void;
   addLayer: (layer: Layer, parentId?: string, creator?: string) => string | undefined;
@@ -61,7 +64,7 @@ export type Props = {
   rotateRight: (radian: number) => void;
   orbit: (radian: number) => void;
   layersInViewport: () => Layer[];
-  viewport: () => Rect | undefined;
+  cameraViewport: () => Rect | undefined;
   onMouseEvent: (type: keyof MouseEventHandles, fn: any) => void;
   captureScreen: (type?: string, encoderOptions?: number) => string | undefined;
   enableScreenSpaceCameraController: (enabled: boolean) => void;
@@ -104,6 +107,7 @@ export function Provider({
   layerSelectionReason,
   layerOverridenInfobox,
   layerOverriddenProperties,
+  viewport,
   showLayer,
   hideLayer,
   addLayer,
@@ -117,7 +121,7 @@ export function Provider({
   zoomOut,
   rotateRight,
   orbit,
-  viewport,
+  cameraViewport,
   captureScreen,
   onMouseEvent,
   enableScreenSpaceCameraController,
@@ -134,7 +138,10 @@ export function Provider({
   children,
 }: Props): JSX.Element {
   const [ev, emit] = useMemo(
-    () => events<Pick<ReearthEventType, "cameramove" | "select" | "tick" | keyof MouseEvents>>(),
+    () =>
+      events<
+        Pick<ReearthEventType, "cameramove" | "select" | "tick" | "resize" | keyof MouseEvents>
+      >(),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [engineName],
   );
@@ -144,6 +151,7 @@ export function Provider({
   const getTags = useGet(tags ?? []);
   const getCamera = useGet(camera);
   const getClock = useGet(clock);
+  const getViewport = useGet(viewport as Viewport);
   const getSelectedLayer = useGet(selectedLayer);
   const getLayerSelectionReason = useGet(layerSelectionReason);
   const getLayerOverriddenInfobox = useGet(layerOverridenInfobox);
@@ -169,6 +177,7 @@ export function Provider({
         tags: getTags,
         camera: getCamera,
         clock: getClock,
+        viewport: getViewport,
         selectedLayer: getSelectedLayer,
         layerSelectionReason: getLayerSelectionReason,
         layerOverriddenInfobox: getLayerOverriddenInfobox,
@@ -184,7 +193,7 @@ export function Provider({
         lookAt,
         zoomIn,
         zoomOut,
-        viewport,
+        cameraViewport,
         rotateRight,
         orbit,
         captureScreen,
@@ -212,6 +221,7 @@ export function Provider({
       getTags,
       getCamera,
       getClock,
+      getViewport,
       getSelectedLayer,
       getLayerSelectionReason,
       getLayerOverriddenInfobox,
@@ -227,7 +237,7 @@ export function Provider({
       lookAt,
       zoomIn,
       zoomOut,
-      viewport,
+      cameraViewport,
       rotateRight,
       orbit,
       captureScreen,
@@ -246,7 +256,7 @@ export function Provider({
     ],
   );
 
-  useEmit<Pick<ReearthEventType, "cameramove" | "select" | "tick" | keyof MouseEvents>>(
+  useEmit<Pick<ReearthEventType, "cameramove" | "select" | "tick" | "resize" | keyof MouseEvents>>(
     {
       select: useMemo<[layerId: string | undefined]>(
         () => (selectedLayer ? [selectedLayer.id] : [undefined]),
@@ -259,6 +269,10 @@ export function Provider({
       tick: useMemo<[date: Date] | undefined>(() => {
         return clock ? [clock.currentTime] : undefined;
       }, [clock]),
+      resize: useMemo<[viewport: Viewport] | undefined>(
+        () => (viewport ? [viewport] : undefined),
+        [viewport],
+      ),
     },
     emit,
   );

diff --git a/src/components/molecules/Visualizer/Plugin/hooks.ts b/src/components/molecules/Visualizer/Plugin/hooks.ts
@@ -197,6 +197,7 @@ export function useAPI({
         "mouseleave",
         "wheel",
         "tick",
+        "resize",
       ]);
     }
 

diff --git a/src/components/molecules/Visualizer/Plugin/types.ts b/src/components/molecules/Visualizer/Plugin/types.ts
@@ -25,6 +25,7 @@ export type Reearth = {
   readonly widget?: Widget;
   readonly block?: Block;
   readonly scene: Scene;
+  readonly viewport: Viewport;
   readonly on: <T extends keyof ReearthEventType>(
     type: T,
     callback: (...args: ReearthEventType[T]) => void,
@@ -70,6 +71,7 @@ export type ReearthEventType = {
   mouseleave: [props: MouseEvent];
   wheel: [props: MouseEvent];
   tick: [props: Date];
+  resize: [props: Viewport];
 };
 
 /** Access to the metadata of this plugin and extension currently executed. */
@@ -326,6 +328,12 @@ export type Visualizer = {
   readonly overrideProperty: (property: any) => void;
 };
 
+export type Viewport = {
+  readonly width: number;
+  readonly height: number;
+  readonly isMobile: boolean;
+};
+
 type Rect = {
   north: number;
   south: number;