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

Commit

Permalink
refactor: replace deprecated gql fields, pass widgetId to widget muta…
Browse files Browse the repository at this point in the history 
…tions (#72)

Co-authored-by: KaWaite <34051327+KaWaite@users.noreply.github.com>
  • Loading branch information
@rot1024 @KaWaite
rot1024 and KaWaite committed Sep 7, 2021
1 parent aa5d108 commit f36c868
Show file tree
Hide file tree
Showing 14 changed files with 305 additions and 1,230 deletions.
25 changes: 15 additions & 10 deletions src/components/molecules/EarthEditor/OutlinePane/hooks.tsx
View file
Expand Up @@ -26,15 +26,19 @@ export type LayerItem = {
};

export type Widget = {
id: string;
id?: string;
pluginId: string;
extensionId: string;
title: string;
description?: string;
enabled?: boolean;
icon?: string;
};

export type ItemType = "root" | "scene" | "layer" | "widget";
export type ItemEx = { type: ItemType };
export type ItemType = ItemEx["type"];
export type ItemEx =
| { type: "root" | "scene" | "layer" | "scenes" | "widgets" }
| { type: "widget"; widgetId?: string; pluginId: string; extensionId: string };
export type TreeViewItem = LayerTreeViewItemItem<ItemEx>;

export default ({
Expand Down Expand Up @@ -68,7 +72,7 @@ export default ({
onLayerImport?: (file: File, format: Format) => void;
onLayerRemove?: (id: string) => void;
onSceneSelect?: () => void;
onWidgetSelect?: (id: string) => void;
onWidgetSelect?: (widgetId: string | undefined, pluginId: string, extensionId: string) => void;
onLayerMove?: (
src: string,
dest: string,
Expand All @@ -95,7 +99,7 @@ export default ({
if (item.content.type === "scene") {
onSceneSelect?.();
} else if (item.content.type === "widget") {
onWidgetSelect?.(item.id);
onWidgetSelect?.(item.content.widgetId, item.content.pluginId, item.content.extensionId);
} else if (item.content.type === "layer") {
onLayerSelect?.(
item.id,
Expand Down Expand Up @@ -154,7 +158,6 @@ export default ({
{
id: "scene",
content: {
id: "scene",
type: "scene",
icon: "scene",
title: sceneTitle,
Expand All @@ -169,8 +172,7 @@ export default ({
{
id: "widgets",
content: {
id: "widgets",
type: "widget",
type: "widgets",
icon: "widget",
title: widgetTitle,
group: true,
Expand All @@ -181,9 +183,12 @@ export default ({
expandable: true,
selectable: false,
children: widgets?.map(w => ({
id: w.id,
id: `${w.pluginId}/${w.extensionId}`,
content: {
id: w.id,
id: `${w.pluginId}/${w.extensionId}`,
widgetId: w.id,
pluginId: w.pluginId,
extensionId: w.extensionId,
type: "widget",
title: w.title,
description: w.description,
Expand Down
2 changes: 2 additions & 0 deletions src/components/molecules/EarthEditor/OutlinePane/index.stories.tsx
View file
Expand Up @@ -24,6 +24,8 @@ export default {
const widgets: Widget[] = [
{
id: "Widget1",
pluginId: "xxx",
extensionId: "yyy",
title: "Widget1",
enabled: true,
},
Expand Down
3 changes: 1 addition & 2 deletions src/components/molecules/EarthEditor/OutlinePane/index.tsx
View file
Expand Up @@ -30,7 +30,7 @@ export type Props = {
onLayerRemove?: (id: string) => void;
onLayerSelect?: (layerId: string, ...i: number[]) => void;
onSceneSelect?: () => void;
onWidgetSelect?: (id: string) => void;
onWidgetSelect?: (widgetId: string | undefined, pluginId: string, extensionId: string) => void;
onLayerMove?: (
layer: string,
destLayer: string,
Expand Down Expand Up @@ -111,7 +111,6 @@ const OutlinePane: React.FC<Props> = ({
/>
)}
</OutlineItemsWrapper>

<LayersItemWrapper>
{layersItem && (
<TreeView<TreeViewItem, HTMLDivElement>
Expand Down
4 changes: 2 additions & 2 deletions src/components/molecules/EarthEditor/PropertyPane/PropertyItem/index.stories.tsx
View file
Expand Up @@ -87,7 +87,7 @@ export const NamedList = () => (
item={{
id: "foo",
schemaGroup: "foo",
nameField: "bar",
representativeField: "bar",
schemaFields: [
{
id: "bar",
Expand Down Expand Up @@ -130,7 +130,7 @@ export const LayerMode = () => (
item={{
id: "foo",
schemaGroup: "foo",
nameField: "foo",
representativeField: "foo",
schemaFields: [
{
id: "foo",
Expand Down
20 changes: 11 additions & 9 deletions src/components/molecules/EarthEditor/PropertyPane/PropertyItem/index.tsx
View file
Expand Up @@ -53,7 +53,7 @@ export type ItemCommon = {
schemaGroup: string;
title?: string;
schemaFields: SchemaField[];
nameField?: string;
representativeField?: string;
only?: {
field: string;
value: string | boolean;
Expand Down Expand Up @@ -143,10 +143,10 @@ const PropertyItem: React.FC<Props> = ({

const isList = item && "items" in item;
const layerMode = useMemo(() => {
if (!isList || !item?.nameField) return false;
const sf = item.schemaFields.find(f => f.id === item.nameField);
if (!isList || !item?.representativeField) return false;
const sf = item.schemaFields.find(f => f.id === item.representativeField);
return sf?.type === "ref" && sf.ui === "layer";
}, [isList, item?.nameField, item?.schemaFields]);
}, [isList, item?.representativeField, item?.schemaFields]);

const groups = useMemo<(GroupListItem | Group)[]>(
() => (item && "items" in item ? item.items : item ? [item] : []),
Expand All @@ -161,12 +161,14 @@ const PropertyItem: React.FC<Props> = ({
.map<PropertyListItem | undefined>(i => {
if (!i.id) return;

const nameField = item?.nameField
? i.fields.find(f => f.id === item.nameField)
const representativeField = item?.representativeField
? i.fields.find(f => f.id === item.representativeField)
: undefined;
const nameSchemaField = item?.schemaFields?.find(sf => sf.id === item.nameField);
const nameSchemaField = item?.schemaFields?.find(
sf => sf.id === item.representativeField,
);

const value = nameField?.value || nameSchemaField?.defaultValue;
const value = representativeField?.value || nameSchemaField?.defaultValue;

const choice = nameSchemaField?.choices
? nameSchemaField?.choices?.find(c => c.key === value)?.label
Expand Down Expand Up @@ -283,7 +285,7 @@ const PropertyItem: React.FC<Props> = ({
)}
{!!item &&
schemaFields?.map(f => {
if (layerMode && f.schemaField.id === item.nameField) return null;
if (layerMode && f.schemaField.id === item.representativeField) return null;
return (
<PropertyField
key={f.schemaField.id}
Expand Down
23 changes: 16 additions & 7 deletions src/components/organisms/EarthEditor/OutlinePane/hooks.tsx
View file
Expand Up @@ -78,12 +78,15 @@ export default () => {
.map((e): Widget => {
const pluginId = plugin.id;
const extensionId = e.extensionId;
const enabled = scene?.widgets.find(
// note: multiple widget is not supported now
const widget = scene?.widgets.find(
w => w.pluginId === plugin.id && w.extensionId === e.extensionId,
)?.enabled;
);
return {
id: `${plugin.id}/${e.extensionId}`,
enabled,
id: widget?.id,
pluginId,
extensionId: e.extensionId,
enabled: !!widget?.enabled,
title: e.translatedName,
description: e.translatedDescription,
icon: e.icon || (pluginId === "reearth" ? extensionId : undefined),
Expand Down Expand Up @@ -123,8 +126,13 @@ export default () => {
}, [select, selectBlock]);

const selectWidget = useCallback(
(id: string) => {
select({ type: "widget", widgetId: id });
(widgetId: string | undefined, pluginId: string, extensionId: string) => {
select({
type: "widget",
widgetId,
pluginId,
extensionId,
});
selectBlock(undefined);
},
[select, selectBlock],
Expand Down Expand Up @@ -245,7 +253,8 @@ export default () => {
sceneDescription,
selectedType: selected?.type,
selectedLayerId: selected?.type === "layer" ? selected.layerId : undefined,
selectedWidgetId: selected?.type === "widget" ? selected.widgetId : undefined,
selectedWidgetId:
selected?.type === "widget" ? `${selected.pluginId}/${selected.extensionId}` : undefined,
loading: loading && WidgetLoading,
selectLayer,
selectScene,
Expand Down
30 changes: 14 additions & 16 deletions src/components/organisms/EarthEditor/PropertyPane/convert.ts
View file
Expand Up @@ -62,13 +62,13 @@ const toItem = (
): Item | undefined => {
const common: Pick<
Item,
"id" | "schemaGroup" | "title" | "only" | "schemaFields" | "nameField"
"id" | "schemaGroup" | "title" | "only" | "schemaFields" | "representativeField"
> = {
id: item?.id,
schemaGroup: schemaGroup.schemaGroupId,
title: schemaGroup.translatedTitle,
only: toCond(schemaGroup.isAvailableIf),
nameField: schemaGroup.name ?? undefined,
representativeField: schemaGroup.representativeFieldId ?? undefined,
schemaFields: schemaGroup.fields
.map((f): SchemaField | undefined => {
const t = valueTypeFromGQL(f.type);
Expand All @@ -78,12 +78,12 @@ const toItem = (
type: t,
defaultValue: f.defaultValue,
suffix: f.suffix ?? undefined,
name: f.translatedName,
name: f.translatedTitle,
description: f.translatedDescription,
only: toCond(f.isAvailableIf),
choices: f.choices?.map(c => ({
key: c.key,
label: c.translatedLabel,
label: c.translatedTitle,
})),
ui: toUi(f.ui),
min: f.min ?? undefined,
Expand All @@ -95,15 +95,13 @@ const toItem = (
};

if (schemaGroup.isList) {
const items = (item && "groups" in item ? item.groups : []).map(
(item2, i): GroupListItem => {
const mergedGroup = merged && "groups" in merged ? merged.groups[i] : undefined;
return {
id: item2.id,
fields: toFields(schemaGroup, item2, mergedGroup),
};
},
);
const items = (item && "groups" in item ? item.groups : []).map((item2, i): GroupListItem => {
const mergedGroup = merged && "groups" in merged ? merged.groups[i] : undefined;
return {
id: item2.id,
fields: toFields(schemaGroup, item2, mergedGroup),
};
});
return {
...common,
items,
Expand Down Expand Up @@ -219,9 +217,9 @@ const toUi = (ui: PropertySchemaFieldUi | null | undefined): SchemaField["ui"] =
export const convertLinkableDatasets = (
data?: GetLinkableDatasetsQuery,
): DatasetSchema[] | undefined => {
return (data?.datasetSchemas?.nodes as
| GetLinkableDatasetsQuery["datasetSchemas"]["nodes"]
| undefined)
return (
data?.datasetSchemas?.nodes as GetLinkableDatasetsQuery["datasetSchemas"]["nodes"] | undefined
)
?.map((s): DatasetSchema | undefined => {
return s
? {
Expand Down
49 changes: 26 additions & 23 deletions src/components/organisms/EarthEditor/PropertyPane/hooks-queries.ts
View file
Expand Up @@ -8,6 +8,7 @@ import {
useAssetsQuery,
} from "@reearth/gql";
import { convert, Pane, convertLinkableDatasets, convertLayers } from "./convert";
import { Selected } from "@reearth/state";

export type Mode = "infobox" | "scene" | "layer" | "block" | "widget";

Expand All @@ -16,17 +17,15 @@ export type AssetNodes = NonNullable<AssetsQuery["assets"]["nodes"][number]>[];
export default ({
sceneId,
rootLayerId,
selectedLayer,
selected,
selectedBlock,
selectedWidgetId,
teamId,
mode,
}: {
sceneId?: string;
rootLayerId?: string;
selectedLayer?: string;
selected?: Selected;
selectedBlock?: string;
selectedWidgetId?: { pluginId: string; extensionId: string };
teamId?: string;
mode: Mode;
}) => {
Expand All @@ -53,8 +52,9 @@ export default ({
error: layerPropertyError,
data: layerPropertyData,
} = useGetLayerPropertyQuery({
variables: { layerId: selectedLayer || "" },
skip: !selectedLayer || (mode !== "layer" && mode !== "block" && mode !== "infobox"),
variables: { layerId: selected?.type === "layer" ? selected.layerId : "" },
skip:
selected?.type !== "layer" || (mode !== "layer" && mode !== "block" && mode !== "infobox"),
});

const { data: linkableDatasets } = useGetLinkableDatasetsQuery({
Expand Down Expand Up @@ -119,17 +119,13 @@ export default ({
? layerPropertyData.layer.linkedDatasetId ?? undefined
: undefined;
const isInfoboxCreatable =
!!selectedLayer && mode === "infobox" && !layerPropertyData?.layer?.infobox;
selected?.type === "layer" && mode === "infobox" && !layerPropertyData?.layer?.infobox;
const selectedWidget = useMemo(
() =>
selectedWidgetId
? scene?.widgets.find(
w =>
selectedWidgetId.pluginId === w.pluginId &&
selectedWidgetId.extensionId === w.extensionId,
)
selected?.type === "widget"
? scene?.widgets.find(w => selected.widgetId === w.id)
: undefined,
[scene?.widgets, selectedWidgetId],
[scene?.widgets, selected],
);

const pane = useMemo<Pane | undefined>(() => {
Expand All @@ -144,14 +140,14 @@ export default ({
}

if (mode === "widget") {
if (!selectedWidgetId) return undefined;
const w = scene?.widgets.find(
w =>
w.pluginId === selectedWidgetId.pluginId &&
w.extensionId === selectedWidgetId.extensionId,
);
if (selected?.type !== "widget") return;
const w = selected.widgetId
? scene?.widgets.find(w => selected.widgetId === w.id)
: undefined;
return {
id: selectedWidgetId.pluginId + "/" + selectedWidgetId.extensionId,
id: selected.widgetId || `${selected.pluginId}/${selected.extensionId}`,
pluginId: selected.pluginId,
extensionId: selected.extensionId,
mode: "widget",
propertyId: w?.property?.id,
items: convert(w?.property, null),
Expand All @@ -168,7 +164,15 @@ export default ({
title: layerPropertyData?.layer?.name,
group: layerPropertyData?.layer?.__typename === "LayerGroup",
};
}, [items, mode, propertyId, scene?.widgets, selectedWidgetId, layerPropertyData?.layer]);
}, [
mode,
propertyId,
items,
layerPropertyData?.layer?.name,
layerPropertyData?.layer?.__typename,
selected,
scene?.widgets,
]);
const datasetSchemas = useMemo(
() => convertLinkableDatasets(linkableDatasets),
[linkableDatasets],
Expand All @@ -185,7 +189,6 @@ export default ({
linkedDatasetSchemaId,
isInfoboxCreatable,
datasetSchemas,
scene,
layers,
assets,
selectedWidget,
Expand Down

0 comments on commit f36c868

Please sign in to comment.