feat: extend plugin API supports get scene inEditor (#351)

* feat: plugin api scene public * refactor: redefine as inEditor * refactor: renaming as `inEditor` * refactor: component params * refactor: rename function
reearth · Nov 16, 2022 · ec0b81d · ec0b81d
1 parent af55f1a
commit ec0b81d
Show file tree

Hide file tree

Showing 8 changed files with 22 additions and 2 deletions.
diff --git a/src/components/molecules/Visualizer/Plugin/api.ts b/src/components/molecules/Visualizer/Plugin/api.ts
@@ -197,6 +197,7 @@ export function commonReearth({
   layersInViewport,
   layers,
   sceneProperty,
+  inEditor,
   tags,
   camera,
   clock,
@@ -260,6 +261,7 @@ export function commonReearth({
   cameraViewport: () => GlobalThis["reearth"]["visualizer"]["camera"]["viewport"];
   captureScreen: GlobalThis["reearth"]["scene"]["captureScreen"];
   getLocationFromScreen: GlobalThis["reearth"]["scene"]["getLocationFromScreen"];
+  inEditor: () => GlobalThis["reearth"]["scene"]["inEditor"];
   enableScreenSpaceCameraController: GlobalThis["reearth"]["camera"]["enableScreenSpaceController"];
   lookHorizontal: GlobalThis["reearth"]["camera"]["lookHorizontal"];
   lookVertical: GlobalThis["reearth"]["camera"]["lookVertical"];
@@ -311,6 +313,9 @@ export function commonReearth({
       return clock();
     },
     scene: {
+      get inEditor() {
+        return inEditor();
+      },
       get property() {
         return sceneProperty();
       },

diff --git a/src/components/molecules/Visualizer/Plugin/context.tsx b/src/components/molecules/Visualizer/Plugin/context.tsx
@@ -43,6 +43,7 @@ export type Props = {
   engine: EngineContext;
   engineName: string;
   sceneProperty?: any;
+  inEditor: boolean;
   tags?: Tag[];
   camera?: CameraPosition;
   clock: Clock | undefined;
@@ -101,6 +102,7 @@ export function Provider({
   engine: { api, builtinPrimitives },
   engineName,
   sceneProperty,
+  inEditor,
   tags,
   camera,
   clock,
@@ -151,6 +153,7 @@ export function Provider({
 
   const getLayers = useGet(layers);
   const getSceneProperty = useGet(sceneProperty);
+  const getInEditor = useGet(inEditor);
   const getTags = useGet(tags ?? []);
   const getCamera = useGet(camera);
   const getClock = useGet(clock);
@@ -177,6 +180,7 @@ export function Provider({
         events: ev,
         layers: getLayers,
         sceneProperty: getSceneProperty,
+        inEditor: getInEditor,
         tags: getTags,
         camera: getCamera,
         clock: getClock,
@@ -222,6 +226,7 @@ export function Provider({
       ev,
       getLayers,
       getSceneProperty,
+      getInEditor,
       getTags,
       getCamera,
       getClock,

diff --git a/src/components/molecules/Visualizer/Plugin/types.ts b/src/components/molecules/Visualizer/Plugin/types.ts
@@ -92,6 +92,7 @@ export type LatLngHeight = {
 
 export type Scene = {
   /** Current scene property */
+  readonly inEditor: boolean;
   readonly property?: any;
   readonly overrideProperty: (property: any) => void;
   readonly captureScreen: (type?: string, encoderOptions?: number) => string | undefined;

diff --git a/src/components/molecules/Visualizer/hooks.ts b/src/components/molecules/Visualizer/hooks.ts
@@ -41,6 +41,7 @@ export default ({
   isEditable,
   isBuilt,
   isPublished,
+  inEditor,
   rootLayer,
   selectedLayerId: outerSelectedLayerId,
   selectedBlockId: outerSelectedBlockId,
@@ -62,6 +63,7 @@ export default ({
   isEditable?: boolean;
   isBuilt?: boolean;
   isPublished?: boolean;
+  inEditor?: boolean;
   rootLayer?: Layer;
   selectedLayerId?: string;
   selectedBlockId?: string;
@@ -251,6 +253,7 @@ export default ({
     {
       engineName: engineType || "",
       sceneProperty: overriddenSceneProperty,
+      inEditor: !!inEditor,
       tags,
       camera: innerCamera,
       clock: innerClock,

diff --git a/src/components/molecules/Visualizer/index.tsx b/src/components/molecules/Visualizer/index.tsx
@@ -64,6 +64,7 @@ export type Props = {
   selectedBlockId?: string;
   pluginBaseUrl?: string;
   isPublished?: boolean;
+  inEditor?: boolean;
   widgetAlignEditorActivated?: boolean;
   onWidgetUpdate?: WidgetAlignSystemProps["onWidgetUpdate"];
   onWidgetAlignSystemUpdate?: WidgetAlignSystemProps["onWidgetAlignSystemUpdate"];
@@ -89,6 +90,7 @@ export default function Visualizer({
   clusterProperty,
   pluginBaseUrl,
   isPublished,
+  inEditor,
   selectedLayerId: outerSelectedLayerId,
   selectedBlockId: outerSelectedBlockId,
   zoomedLayerId,
@@ -144,6 +146,7 @@ export default function Visualizer({
     isEditable: props.isEditable,
     isBuilt: props.isBuilt,
     isPublished,
+    inEditor,
     rootLayer,
     selectedLayerId: outerSelectedLayerId,
     selectedBlockId: outerSelectedBlockId,

diff --git a/src/components/molecules/Visualizer/storybook.tsx b/src/components/molecules/Visualizer/storybook.tsx
@@ -58,6 +58,7 @@ export function Provider({ children }: { children?: ReactNode }) {
 export const context: ProviderProps = {
   engineName: "cesium",
   engine: {},
+  inEditor: false,
   hideLayer: act("layers.hide"),
   showLayer: act("layers.show"),
   selectLayer: act("layers.select"),

diff --git a/src/components/organisms/EarthEditor/CanvasArea/index.tsx b/src/components/organisms/EarthEditor/CanvasArea/index.tsx
@@ -9,11 +9,12 @@ import useHooks from "./hooks";
 export type Props = {
   className?: string;
   isBuilt?: boolean;
+  inEditor?: boolean;
 };
 
 // TODO: ErrorBoudaryでエラーハンドリング
 
-const CanvasArea: React.FC<Props> = ({ className, isBuilt }) => {
+const CanvasArea: React.FC<Props> = ({ className, isBuilt, inEditor }) => {
   const {
     rootLayerId,
     selectedBlockId,
@@ -61,6 +62,7 @@ const CanvasArea: React.FC<Props> = ({ className, isBuilt }) => {
       engine="cesium"
       isEditable={!isBuilt}
       isBuilt={!!isBuilt}
+      inEditor={!!inEditor}
       rootLayer={rootLayer}
       widgets={widgets}
       selectedLayerId={selectedLayerId}

diff --git a/src/components/pages/EarthEditor/index.tsx b/src/components/pages/EarthEditor/index.tsx
@@ -31,7 +31,7 @@ const EarthEditor: React.FC<Props> = () => {
           header={<Header />}
           left={<LeftMenu />}
           centerTop={<PrimitiveHeader />}
-          center={<CanvasArea />}
+          center={<CanvasArea inEditor />}
           right={<RightMenu />}
         />
       </DndProvider>