Skip to content
This repository has been archived by the owner on Apr 25, 2023. It is now read-only.

Commit

Permalink
feat: extend plugin API supports get viewport's size (#342)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@airslice
airslice authored Nov 9, 2022
1 parent 0395d2b commit 7b268ba
Show file tree
Hide file tree
Showing 14 changed files with 175 additions and 65 deletions.
56 changes: 30 additions & 26 deletions src/components/molecules/Visualizer/Block/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand All @@ -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,
Expand All @@ -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 }>`
Expand Down
2 changes: 2 additions & 0 deletions src/components/molecules/Visualizer/Infobox/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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>(
Expand Down
16 changes: 12 additions & 4 deletions src/components/molecules/Visualizer/Plugin/api.ts
View file
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -13,6 +14,7 @@ import type {
Plugin,
Tag,
PopupPosition,
Viewport,
} from "./types";

export type CommonReearth = Omit<
Expand Down Expand Up @@ -89,6 +91,7 @@ export function exposed({
};
},
}),
viewport: commonReearth.viewport as Viewport,
layers: merge(commonReearth.layers, {
get add() {
return (layer: Layer, parentId?: string) =>
Expand Down Expand Up @@ -197,6 +200,7 @@ export function commonReearth({
tags,
camera,
clock,
viewport,
selectedLayer,
layerSelectionReason,
layerOverriddenInfobox,
Expand All @@ -211,7 +215,7 @@ export function commonReearth({
lookAt,
zoomIn,
zoomOut,
viewport,
cameraViewport,
orbit,
rotateRight,
captureScreen,
Expand All @@ -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"];
Expand All @@ -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"];
Expand Down Expand Up @@ -281,7 +286,7 @@ export function commonReearth({
return camera();
},
get viewport() {
return viewport();
return cameraViewport();
},
enableScreenSpaceController: enableScreenSpaceCameraController,
lookHorizontal,
Expand Down Expand Up @@ -310,6 +315,9 @@ export function commonReearth({
overrideProperty: overrideSceneProperty,
captureScreen,
},
get viewport() {
return viewport?.();
},
engineName,
camera: {
flyTo,
Expand All @@ -322,7 +330,7 @@ export function commonReearth({
return camera();
},
get viewport() {
return viewport();
return cameraViewport();
},
enableScreenSpaceController: enableScreenSpaceCameraController,
lookHorizontal,
Expand Down
26 changes: 20 additions & 6 deletions src/components/molecules/Visualizer/Plugin/context.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -28,6 +29,7 @@ import type {
Tag,
MouseEvent,
Clock,
Viewport,
} from "./types";

export type EngineContext = {
Expand All @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -104,6 +107,7 @@ export function Provider({
layerSelectionReason,
layerOverridenInfobox,
layerOverriddenProperties,
viewport,
showLayer,
hideLayer,
addLayer,
Expand All @@ -117,7 +121,7 @@ export function Provider({
zoomOut,
rotateRight,
orbit,
viewport,
cameraViewport,
captureScreen,
onMouseEvent,
enableScreenSpaceCameraController,
Expand All @@ -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],
);
Expand All @@ -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);
Expand All @@ -169,6 +177,7 @@ export function Provider({
tags: getTags,
camera: getCamera,
clock: getClock,
viewport: getViewport,
selectedLayer: getSelectedLayer,
layerSelectionReason: getLayerSelectionReason,
layerOverriddenInfobox: getLayerOverriddenInfobox,
Expand All @@ -184,7 +193,7 @@ export function Provider({
lookAt,
zoomIn,
zoomOut,
viewport,
cameraViewport,
rotateRight,
orbit,
captureScreen,
Expand Down Expand Up @@ -212,6 +221,7 @@ export function Provider({
getTags,
getCamera,
getClock,
getViewport,
getSelectedLayer,
getLayerSelectionReason,
getLayerOverriddenInfobox,
Expand All @@ -227,7 +237,7 @@ export function Provider({
lookAt,
zoomIn,
zoomOut,
viewport,
cameraViewport,
rotateRight,
orbit,
captureScreen,
Expand All @@ -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]),
Expand All @@ -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,
);
Expand Down
1 change: 1 addition & 0 deletions src/components/molecules/Visualizer/Plugin/hooks.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -197,6 +197,7 @@ export function useAPI({
"mouseleave",
"wheel",
"tick",
"resize",
]);
}

Expand Down
8 changes: 8 additions & 0 deletions src/components/molecules/Visualizer/Plugin/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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. */
Expand Down Expand Up @@ -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;
Expand Down
Loading

0 comments on commit 7b268ba

Please sign in to comment.