Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(web): plugin API v2.0.0 #1009

Merged
merged 43 commits into from
Aug 2, 2024
Merged
Show file tree
Hide file tree
Changes from 33 commits
Commits
Show all changes
43 commits
Select commit Hold shift + click to select a range
7301405
refactor: use viewer property
airslice Jun 5, 2024
30db2a6
Merge branch 'main' into chore/use-viewer-property
airslice Jun 5, 2024
18a6774
refactor: override viewer property
airslice Jun 6, 2024
ba2d2a0
refactor: updates on api
airslice Jun 7, 2024
84cc250
refactor: clear & comment
airslice Jun 7, 2024
b2a5070
Merge branch 'main' into chore/use-viewer-property
airslice Jun 7, 2024
4ea3f1c
Merge branch 'main' into chore/use-viewer-property
airslice Jun 11, 2024
2b2a3f6
Merge branch 'main' into chore/use-viewer-property
airslice Jun 11, 2024
b00affb
refactor: use engineMeta instead of viewerproperty for ion
airslice Jun 11, 2024
272c4fe
Merge branch 'main' into chore/use-viewer-property
airslice Jun 20, 2024
ae5ed2a
Merge branch 'main' into chore/use-viewer-property
airslice Jun 24, 2024
35c4654
chore: upgrade core version
airslice Jun 24, 2024
2728c40
Merge branch 'main' into chore/use-viewer-property
airslice Jun 24, 2024
a43555c
Merge branch 'main' into chore/use-viewer-property
airslice Jun 24, 2024
1654b33
Merge branch 'main' into chore/use-viewer-property
airslice Jun 25, 2024
80ace3d
Merge branch 'main' into chore/use-viewer-property
airslice Jun 28, 2024
2d8ff20
refactor: remove camera.camera from viewer property
airslice Jun 28, 2024
7bf9793
wip: refactor beta plugin api
airslice Jul 1, 2024
e7a5680
refactor: plugin api
airslice Jul 2, 2024
5bf0a1f
refactor: plugin api
airslice Jul 2, 2024
b424690
Merge branch 'main' into chore/use-viewer-property
airslice Jul 2, 2024
0986099
refactor: plugin API
airslice Jul 3, 2024
89bb0df
Merge branch 'main' into chore/use-viewer-property
airslice Jul 3, 2024
ba26e20
refactor: plugin api 2.0.0
airslice Jul 12, 2024
8b330df
Merge branch 'main' into chore/use-viewer-property
airslice Jul 12, 2024
08dd1b7
refactor: api & events
airslice Jul 18, 2024
08f927d
refactor: update api
airslice Jul 18, 2024
7a0dfb5
Merge branch 'main' into chore/use-viewer-property
airslice Jul 18, 2024
ec4a948
Merge branch 'main' into chore/use-viewer-property
airslice Jul 19, 2024
c6b1044
refactor: clean up and bug fixes
airslice Jul 24, 2024
c781570
refactor: bug fix & refactor & clean up
airslice Jul 26, 2024
d6493bd
refactor: clean up
airslice Jul 26, 2024
507a08f
refactor: block property values
airslice Jul 26, 2024
975c8d4
chore: upgrade core
airslice Jul 29, 2024
a965aa9
refactor: updates base on rabbit suggestions
airslice Jul 29, 2024
20fab74
fix: selected layer
airslice Jul 29, 2024
97203d0
chore: upgrade core
airslice Jul 29, 2024
eb38180
Merge branch 'main' into chore/use-viewer-property
airslice Jul 29, 2024
cbb312a
refactor: avoid spread syntax in reduce
airslice Jul 29, 2024
bdc921d
chore: upgrade core
airslice Aug 1, 2024
c80cd0b
Merge branch 'main' into chore/use-viewer-property
airslice Aug 1, 2024
be1a044
Merge branch 'main' into chore/use-viewer-property
airslice Aug 1, 2024
fc86588
Merge branch 'main' into chore/use-viewer-property
airslice Aug 2, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions web/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@
"@monaco-editor/react": "4.6.0",
"@popperjs/core": "2.11.8",
"@reearth/cesium-mvt-imagery-provider": "1.5.4",
"@reearth/core": "0.0.7-beta.0",
"@reearth/core": "0.0.7-alpha.3",
"@rot1024/use-transition": "1.0.0",
"@sentry/browser": "7.77.0",
"@seznam/compose-react-refs": "1.0.6",
Expand Down Expand Up @@ -202,5 +202,6 @@
"use-file-input": "1.0.0",
"uuid": "9.0.1",
"xstate": "4.38.2"
}
}
},
"packageManager": "yarn@1.22.1"
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import type { Layer } from "@reearth/core";
import { NLSInfobox } from "@reearth/services/api/layersApi/utils";
import { convert } from "@reearth/services/api/propertyApi/utils";

import { processProperty } from "./convert";
import { processProperty as processNewProperty } from "./processNewProperty";

export default (
Expand All @@ -21,9 +22,11 @@ export default (
name: blockNames?.[b.extensionId] ?? "Infobox Block",
pluginId: b.pluginId,
extensionId: b.extensionId,
extensionType: "infoboxBlock",
property: processNewProperty(undefined, b.property),
propertyForPluginAPI: processProperty(b.property),
propertyId: b.propertyId, // required by onBlockChange
pluginBlockPropertyItems: convert(b.property),
propertyItemsForPluginBlock: convert(b.property),
})),
};
};
9 changes: 6 additions & 3 deletions web/src/beta/features/Editor/Visualizer/convert-story.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@ import { convert } from "@reearth/services/api/propertyApi/utils";
import { Scene } from "@reearth/services/api/sceneApi";
import { StoryPage as GqlStoryPage, StoryBlock as GqlStoryBlock } from "@reearth/services/gql";

import { processProperty } from "./processNewProperty";
import { processProperty } from "./convert";
import { processProperty as processNewProperty } from "./processNewProperty";

export const convertStory = (scene?: Scene, storyId?: string): Story | undefined => {
const story = scene?.stories.find(s => s.id === storyId);
Expand Down Expand Up @@ -36,10 +37,12 @@ export const convertStory = (scene?: Scene, storyId?: string): Story | undefined
id: b.id,
pluginId: b.pluginId,
extensionId: b.extensionId,
extensionType: "storyBlock",
name: installedBlockNames?.[b.extensionId] ?? "Story Block",
propertyId: b.property?.id,
property: processProperty(undefined, b.property),
pluginBlockPropertyItems: convert(b.property),
property: processNewProperty(undefined, b.property),
propertyForPluginAPI: processProperty(b.property),
propertyItemsForPluginBlock: convert(b.property),
}));

return {
Expand Down
54 changes: 38 additions & 16 deletions web/src/beta/features/Editor/Visualizer/hooks.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
import { useMemo, useEffect, useCallback, useState, MutableRefObject } from "react";

import type { Alignment, Location } from "@reearth/beta/features/Visualizer/Crust";
import {
convertData,
sceneProperty2ViewerPropertyMapping,
} from "@reearth/beta/utils/convert-object";
import { Camera } from "@reearth/beta/utils/value";
import type { LatLng, ComputedLayer, ComputedFeature } from "@reearth/core";
import type { LatLng, ComputedLayer, ComputedFeature, ViewerProperty } from "@reearth/core";
import {
useLayersFetcher,
useSceneFetcher,
Expand Down Expand Up @@ -55,16 +59,39 @@ export default ({
useMoveInfoboxBlock,
} = useInfoboxFetcher();

const [currentCamera, setCurrentCamera] = useCurrentCamera();
const handleCameraUpdate = useCallback(
(camera: Camera) => {
setCurrentCamera(camera);
},
[setCurrentCamera],
);

const { nlsLayers } = useGetLayersQuery({ sceneId });
const { layerStyles } = useGetLayerStylesQuery({ sceneId });

const { scene } = useSceneQuery({ sceneId });

const [zoomedLayerId, zoomToLayer] = useState<string | undefined>(undefined);
const [initialCamera, setInitialCamera] = useState<Camera | undefined>(undefined);

const { viewerProperty, cesiumIonAccessToken } = useMemo(() => {
const sceneProperty = processProperty(scene?.property);
const cesiumIonAccessToken = sceneProperty?.default?.ion;
if (sceneProperty?.camera?.camera) {
setInitialCamera(sceneProperty?.camera?.camera);
}
return {
viewerProperty: sceneProperty
? (convertData(sceneProperty, sceneProperty2ViewerPropertyMapping) as ViewerProperty)
: undefined,
cesiumIonAccessToken,
};
}, [scene?.property]);

// Scene property
// TODO: Fix to use exact type through GQL typing
const sceneProperty = useMemo(() => processProperty(scene?.property), [scene?.property]);
useEffect(() => {
setCurrentCamera(initialCamera);
}, [initialCamera, setCurrentCamera]);

const { installableInfoboxBlocks } = useInstallableInfoboxBlocksQuery({ sceneId });

Expand Down Expand Up @@ -251,9 +278,12 @@ export default ({

const engineMeta = useMemo(
() => ({
cesiumIonAccessToken: config()?.cesiumIonAccessToken,
cesiumIonAccessToken:
typeof cesiumIonAccessToken === "string" && cesiumIonAccessToken
? cesiumIonAccessToken
: config()?.cesiumIonAccessToken,
}),
[],
[cesiumIonAccessToken],
);

// TODO: Use GQL value
Expand All @@ -265,17 +295,8 @@ export default ({

const handleMount = useCallback(() => onVisualizerReady(true), [onVisualizerReady]);

// Camera
const [currentCamera, setCurrentCamera] = useCurrentCamera();
const handleCameraUpdate = useCallback(
(camera: Camera) => {
setCurrentCamera(camera);
},
[setCurrentCamera],
);

return {
sceneProperty,
viewerProperty,
pluginProperty,
layers,
widgets,
Expand All @@ -284,6 +305,7 @@ export default ({
zoomedLayerId,
installableInfoboxBlocks,
currentCamera,
initialCamera,
handleCameraUpdate,
handleCoreLayerSelect,
handleLayerDrop,
Expand Down
6 changes: 4 additions & 2 deletions web/src/beta/features/Editor/Visualizer/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ const EditorVisualizer: React.FC<Props> = ({
selectWidgetArea,
}) => {
const {
sceneProperty,
viewerProperty,
pluginProperty,
layers,
widgets,
Expand All @@ -71,6 +71,7 @@ const EditorVisualizer: React.FC<Props> = ({
zoomedLayerId,
installableInfoboxBlocks,
currentCamera,
initialCamera,
handleCameraUpdate,
handleCoreLayerSelect,
handleLayerDrop,
Expand Down Expand Up @@ -110,12 +111,13 @@ const EditorVisualizer: React.FC<Props> = ({
layers={layers}
widgets={widgets}
story={story}
sceneProperty={sceneProperty}
viewerProperty={viewerProperty}
pluginProperty={pluginProperty}
// editor
zoomedLayerId={zoomedLayerId}
visualizerRef={visualizerRef}
currentCamera={currentCamera}
initialCamera={initialCamera}
interactionMode={interactionMode}
onCameraChange={handleCameraUpdate}
onCoreLayerSelect={handleCoreLayerSelect}
Expand Down
6 changes: 3 additions & 3 deletions web/src/beta/features/PluginPlayground/Viewer/hooks.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { useEffect, useMemo, useRef, useState } from "react";

import { Camera } from "@reearth/beta/utils/value";
import { MapRef } from "@reearth/core";
import { MapRef, ViewerProperty } from "@reearth/core";
import { config } from "@reearth/services/config";

export default () => {
Expand All @@ -17,7 +17,7 @@ export default () => {
[],
);

const sceneProperty = useMemo(
const viewerProperty: ViewerProperty = useMemo(
() => ({
tiles: [
{
Expand All @@ -35,7 +35,7 @@ export default () => {

return {
visualizerRef,
sceneProperty,
viewerProperty,
ready,
engineMeta,
currentCamera,
Expand Down
4 changes: 2 additions & 2 deletions web/src/beta/features/PluginPlayground/Viewer/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,14 @@ import Visualizer from "@reearth/beta/features/Visualizer";
import useHooks from "./hooks";

const Viewer: FC = () => {
const { visualizerRef, sceneProperty, ready, engineMeta, currentCamera, setCurrentCamera } =
const { visualizerRef, viewerProperty, ready, engineMeta, currentCamera, setCurrentCamera } =
useHooks();

return (
<Visualizer
engine="cesium"
visualizerRef={visualizerRef}
sceneProperty={sceneProperty}
viewerProperty={viewerProperty}
ready={ready}
engineMeta={engineMeta}
currentCamera={currentCamera}
Expand Down
41 changes: 36 additions & 5 deletions web/src/beta/features/Published/hooks.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,16 @@ import {
isBuiltinWidget,
} from "@reearth/beta/features/Visualizer/Crust";
import { Story } from "@reearth/beta/features/Visualizer/Crust/StoryPanel";
import {
convertData,
sceneProperty2ViewerPropertyMapping,
} from "@reearth/beta/utils/convert-object";
import type { Camera } from "@reearth/beta/utils/value";
import { MapRef } from "@reearth/core";
import { ViewerProperty, MapRef } from "@reearth/core";
import { config } from "@reearth/services/config";

import { WidgetThemeOptions } from "../Visualizer/Crust/theme";

import { processProperty } from "./convert";
import { processLayers, processNewProperty } from "./convert-new-property";
import { useGA } from "./googleAnalytics/useGA";
Expand All @@ -29,8 +35,28 @@ export default (alias?: string) => {
const [ready, setReady] = useState(false);
const [error, setError] = useState(false);
const [currentCamera, setCurrentCamera] = useState<Camera | undefined>(undefined);
const [initialCamera, setInitialCamera] = useState<Camera | undefined>(undefined);

const { viewerProperty, widgetThemeOptions, cesiumIonAccessToken } = useMemo(() => {
const sceneProperty = processProperty(data?.property);
const widgetThemeOptions = sceneProperty?.theme as WidgetThemeOptions | undefined;
const cesiumIonAccessToken = sceneProperty?.default?.ion;
if (sceneProperty?.camera?.camera) {
setInitialCamera(sceneProperty?.camera?.camera);
}
return {
viewerProperty: sceneProperty
? (convertData(sceneProperty, sceneProperty2ViewerPropertyMapping) as ViewerProperty)
: undefined,
widgetThemeOptions,
cesiumIonAccessToken,
};
}, [data?.property]);

useEffect(() => {
setCurrentCamera(initialCamera);
}, [initialCamera]);

const sceneProperty = processProperty(data?.property);
const pluginProperty = useMemo(
() =>
Object.keys(data?.plugins ?? {}).reduce<{ [key: string]: any }>(
Expand Down Expand Up @@ -234,25 +260,30 @@ export default (alias?: string) => {

const engineMeta = useMemo(
() => ({
cesiumIonAccessToken: config()?.cesiumIonAccessToken,
cesiumIonAccessToken:
typeof cesiumIonAccessToken === "string" && cesiumIonAccessToken
? cesiumIonAccessToken
: config()?.cesiumIonAccessToken,
}),
[],
[cesiumIonAccessToken],
);

// GA
useGA({ enableGa: data?.enableGa, trackingId: data?.trackingId });

return {
sceneProperty,
viewerProperty,
pluginProperty,
layers,
widgets,
widgetThemeOptions,
story,
ready,
error,
engineMeta,
visualizerRef,
currentCamera,
initialCamera,
setCurrentCamera,
};
};
Expand Down
8 changes: 6 additions & 2 deletions web/src/beta/features/Published/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,18 @@ export type Props = {
export default function Published({ alias }: Props) {
const t = useT();
const {
sceneProperty,
viewerProperty,
pluginProperty,
layers,
widgets,
widgetThemeOptions,
story,
ready,
error,
engineMeta,
visualizerRef,
currentCamera,
initialCamera,
setCurrentCamera,
} = useHooks(alias);

Expand All @@ -38,11 +40,13 @@ export default function Published({ alias }: Props) {
ready={ready}
layers={layers}
widgets={widgets}
widgetThemeOptions={widgetThemeOptions}
story={story}
sceneProperty={sceneProperty}
viewerProperty={viewerProperty}
pluginProperty={pluginProperty}
showStoryPanel={!!story}
currentCamera={currentCamera}
initialCamera={initialCamera}
onCameraChange={setCurrentCamera}
/>
);
Expand Down
3 changes: 2 additions & 1 deletion web/src/beta/features/Published/types.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import type { DataRange, DataType, Geometry, SceneProperty, TimeInterval } from "@reearth/core";
import { SceneProperty } from "@reearth/beta/types";
import type { DataRange, DataType, Geometry, TimeInterval } from "@reearth/core";
import { SketchFeature } from "@reearth/services/api/layersApi/utils";
import { LayerStyle } from "@reearth/services/api/layerStyleApi/utils";

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ const InfoboxBlockComponent = ({ renderBlock, onRemove, ...props }: Props): JSX.
isSelected={props.isSelected}
property={props.block.property}
propertyId={props.block.propertyId}
pluginBlockPropertyItems={props.block.pluginBlockPropertyItems}
propertyItemsForPluginBlock={props.block.propertyItemsForPluginBlock}
onRemove={onRemove ? handleRemove : undefined}>
{renderBlock?.({ block: props.block, layer: props.layer, onClick: props.onClick })}
</BlockWrapper>
Expand Down
11 changes: 9 additions & 2 deletions web/src/beta/features/Visualizer/Crust/Infobox/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,18 @@ export type InfoboxBlock<P = any> = {
name?: string;
pluginId?: string;
extensionId?: string;
property?: P;
extensionType?: "infoboxBlock";
propertyId?: string;
pluginBlockPropertyItems?: Item[];
property?: P;
propertyForPluginAPI?: any;
propertyItemsForPluginBlock?: Item[];
};

export type PluginInfoboxBlock = Omit<
InfoboxBlock,
"propertyForPluginAPI" | "propertyItemsForPluginBlock"
>;

export type InfoboxBlockProps<P = any> = {
block?: InfoboxBlock<P>;
layer?: Layer;
Expand Down
Loading