feat: support tags in plugin API (#153)

reearth · Jan 21, 2022 · 1031c51 · 1031c51
1 parent 90084f7
commit 1031c51
Show file tree

Hide file tree

Showing 11 changed files with 196 additions and 33 deletions.
diff --git a/src/components/molecules/Visualizer/Layers/store.ts b/src/components/molecules/Visualizer/Layers/store.ts
@@ -20,6 +20,7 @@ export class LayerStore {
         "propertyId",
         "title",
         "type",
+        "tags",
       ],
       function (key) {
         const id = (this as any).id;
@@ -77,6 +78,22 @@ export class LayerStore {
     return ids.map(id => this.findById(id));
   };
 
+  findByTags = (...tagIds: string[]): PluginLayer[] => {
+    return this.findAll(
+      l =>
+        !!l.tags?.some(t => tagIds.includes(t.id) || !!t.tags?.some(tt => tagIds.includes(tt.id))),
+    );
+  };
+
+  findByTagLabels = (...tagLabels: string[]): PluginLayer[] => {
+    return this.findAll(
+      l =>
+        !!l.tags?.some(
+          t => tagLabels.includes(t.label) || !!t.tags?.some(tt => tagLabels.includes(tt.label)),
+        ),
+    );
+  };
+
   find = (
     fn: (layer: PluginLayer, index: number, parents: PluginLayer[]) => boolean,
   ): PluginLayer | undefined => {

diff --git a/src/components/molecules/Visualizer/Plugin/api.ts b/src/components/molecules/Visualizer/Plugin/api.ts
@@ -3,7 +3,16 @@ import { merge } from "@reearth/util/object";
 
 import type { LayerStore } from "../Layers";
 
-import type { GlobalThis, Block, Layer, Widget, ReearthEventType, Reearth, Plugin } from "./types";
+import type {
+  GlobalThis,
+  Block,
+  Layer,
+  Widget,
+  ReearthEventType,
+  Reearth,
+  Plugin,
+  Tag,
+} from "./types";
 
 export type CommonReearth = Omit<Reearth, "plugin" | "ui" | "block" | "layer" | "widget">;
 
@@ -100,6 +109,7 @@ export function commonReearth({
   events,
   layers,
   sceneProperty,
+  tags,
   camera,
   selectedLayer,
   layerSelectionReason,
@@ -118,6 +128,7 @@ export function commonReearth({
   events: Events<ReearthEventType>;
   layers: () => LayerStore;
   sceneProperty: () => any;
+  tags: () => Tag[];
   camera: () => GlobalThis["reearth"]["visualizer"]["camera"]["position"];
   selectedLayer: () => GlobalThis["reearth"]["layers"]["selected"];
   layerSelectionReason: () => GlobalThis["reearth"]["layers"]["selectionReason"];
@@ -172,6 +183,9 @@ export function commonReearth({
       get layers() {
         return layers().root.children ?? [];
       },
+      get tags() {
+        return tags();
+      },
       get selectionReason() {
         return layerSelectionReason();
       },
@@ -187,6 +201,12 @@ export function commonReearth({
       get findByIds() {
         return layers().findByIds;
       },
+      get findByTags() {
+        return layers().findByTags;
+      },
+      get findByTagLabels() {
+        return layers().findByTagLabels;
+      },
       get find() {
         return layers().find;
       },

diff --git a/src/components/molecules/Visualizer/Plugin/context.tsx b/src/components/molecules/Visualizer/Plugin/context.tsx
@@ -23,6 +23,7 @@ import type {
   ReearthEventType,
   FlyToDestination,
   LookAtDestination,
+  Tag,
 } from "./types";
 
 export type EngineContext = {
@@ -35,6 +36,7 @@ export type Props = {
   engine: EngineContext;
   engineName: string;
   sceneProperty?: any;
+  tags?: Tag[];
   camera?: CameraPosition;
   layers: LayerStore;
   selectedLayer?: Layer;
@@ -69,6 +71,7 @@ export function Provider({
   engine: { api, isMarshalable, builtinPrimitives },
   engineName,
   sceneProperty,
+  tags,
   camera,
   layers,
   selectedLayer,
@@ -93,6 +96,7 @@ export function Provider({
 
   const getLayers = useGet(layers);
   const getSceneProperty = useGet(sceneProperty);
+  const getTags = useGet(tags ?? []);
   const getCamera = useGet(camera);
   const getSelectedLayer = useGet(selectedLayer);
   const getLayerSelectionReason = useGet(layerSelectionReason);
@@ -111,6 +115,7 @@ export function Provider({
         events: ev,
         layers: getLayers,
         sceneProperty: getSceneProperty,
+        tags: getTags,
         camera: getCamera,
         selectedLayer: getSelectedLayer,
         layerSelectionReason: getLayerSelectionReason,

diff --git a/src/components/molecules/Visualizer/Plugin/types.ts b/src/components/molecules/Visualizer/Plugin/types.ts
@@ -52,6 +52,7 @@ export type Plugin = {
 export type Layers = {
   readonly layers: Layer[];
   readonly selected?: Layer;
+  readonly tags?: Tag[];
   readonly selectionReason?: string;
   readonly overriddenInfobox?: OverriddenInfobox;
   readonly overriddenProperties?: { [id: string]: any };
@@ -61,6 +62,8 @@ export type Layers = {
   readonly hide: (...id: string[]) => void;
   readonly findById: (id: string) => Layer | undefined;
   readonly findByIds: (...id: string[]) => (Layer | undefined)[];
+  readonly findByTags: (...tagIds: string[]) => Layer[];
+  readonly findByTagLabels: (...tagLabels: string[]) => Layer[];
   readonly find: (
     fn: (layer: Layer, index: number, parents: Layer[]) => boolean,
   ) => Layer | undefined;
@@ -93,9 +96,16 @@ export type Layer<P = any, IBP = any> = {
   infobox?: Infobox<IBP>;
   isVisible?: boolean;
   propertyId?: string;
+  tags?: Tag[];
   readonly children?: Layer<P, IBP>[];
 };
 
+export type Tag = {
+  id: string;
+  label: string;
+  tags?: Tag[];
+};
+
 export type Infobox<BP = any> = {
   property?: InfoboxProperty;
   blocks?: Block<BP>[];

diff --git a/src/components/molecules/Visualizer/hooks.ts b/src/components/molecules/Visualizer/hooks.ts
@@ -14,7 +14,7 @@ import type {
 import type { Props as InfoboxProps, Block } from "./Infobox";
 import { LayerStore, emptyLayerStore } from "./Layers";
 import type { ProviderProps } from "./Plugin";
-import { CameraOptions, FlyToDestination, LookAtDestination } from "./Plugin/types";
+import type { CameraOptions, FlyToDestination, LookAtDestination, Tag } from "./Plugin/types";
 
 export default ({
   engineType,
@@ -27,6 +27,7 @@ export default ({
   selectedBlockId: outerSelectedBlockId,
   camera,
   sceneProperty,
+  tags,
   onLayerSelect,
   onBlockSelect,
   onCameraChange,
@@ -42,6 +43,7 @@ export default ({
   selectedBlockId?: string;
   camera?: Camera;
   sceneProperty?: SceneProperty;
+  tags?: Tag[];
   onLayerSelect?: (id?: string) => void;
   onBlockSelect?: (id?: string) => void;
   onCameraChange?: (c: Camera) => void;
@@ -139,6 +141,7 @@ export default ({
     {
       engineName: engineType || "",
       sceneProperty,
+      tags,
       camera,
       selectedLayer,
       layerSelectionReason,

diff --git a/src/components/molecules/Visualizer/index.tsx b/src/components/molecules/Visualizer/index.tsx
@@ -11,6 +11,7 @@ import useHooks from "./hooks";
 import Infobox, { Props as InfoboxProps } from "./Infobox";
 import Layers, { LayerStore } from "./Layers";
 import { Provider } from "./Plugin";
+import type { Tag } from "./Plugin/types";
 import W from "./Widget";
 import type { Widget } from "./Widget";
 import WidgetAlignSystem, {
@@ -21,6 +22,7 @@ import WidgetAlignSystem, {
 export type { SceneProperty, ClusterProperty } from "./Engine";
 export type { InfoboxProperty, Block } from "./Infobox";
 export type { Layer } from "./Layers";
+export type { Tag } from "./Plugin/types";
 export type {
   Widget,
   Alignment,
@@ -44,6 +46,7 @@ export type Props = PropsWithChildren<
       layoutConstraint?: WidgetAlignSystemProps["layoutConstraint"];
     };
     sceneProperty?: SceneProperty;
+    tags?: Tag[];
     pluginProperty?: { [key: string]: any };
     clusterProperty?: ClusterProperty[];
     clusterLayers?: string[];
@@ -70,6 +73,7 @@ export default function Visualizer({
   layers,
   widgets,
   sceneProperty,
+  tags,
   children,
   pluginProperty,
   clusterProperty,
@@ -121,6 +125,7 @@ export default function Visualizer({
     selectedBlockId: outerSelectedBlockId,
     camera: props.camera,
     sceneProperty,
+    tags,
     onLayerSelect,
     onBlockSelect,
     onCameraChange: props.onCameraChange,

diff --git a/src/components/organisms/EarthEditor/CanvasArea/convert.ts b/src/components/organisms/EarthEditor/CanvasArea/convert.ts
@@ -10,6 +10,7 @@ import {
   WidgetArea,
   Alignment,
   WidgetLayoutConstraint,
+  Tag,
 } from "@reearth/components/molecules/Visualizer";
 import {
   GetLayersQuery,
@@ -148,6 +149,7 @@ const processLayer = (layer: EarthLayer5Fragment | undefined): Layer | undefined
       layer.__typename === "LayerItem"
         ? processMergedInfobox(layer.merged?.infobox)
         : processInfobox(layer.infobox),
+    tags: processLayerTags(layer.tags),
     children:
       layer.__typename === "LayerGroup"
         ? layer.layers?.map(l => processLayer(l ?? undefined)).filter((l): l is Layer => !!l)
@@ -296,3 +298,31 @@ export const convertToBlocks = (data?: GetBlocksQuery): BlockType[] | undefined
     .filter((a): a is BlockType[] => !!a)
     .reduce((a, b) => [...a, ...b], []);
 };
+
+export function processLayerTags(
+  tags: {
+    tagId: string;
+    tag?: Maybe<{ label: string }>;
+    children?: { tagId: string; tag?: Maybe<{ label: string }> }[];
+  }[],
+): Tag[] {
+  return tags.map(t => ({
+    id: t.tagId,
+    label: t.tag?.label ?? "",
+    tags: t.children?.map(tt => ({ id: tt.tagId, label: tt.tag?.label ?? "" })),
+  }));
+}
+
+export function processSceneTags(
+  tags: {
+    id: string;
+    label: string;
+    tags?: { id: string; label: string }[];
+  }[],
+): Tag[] {
+  return tags.map(t => ({
+    id: t.id,
+    label: t.label ?? "",
+    tags: t.tags?.map(tt => ({ id: tt.id, label: tt.label ?? "" })),
+  }));
+}
diff --git a/src/components/organisms/EarthEditor/CanvasArea/hooks.ts b/src/components/organisms/EarthEditor/CanvasArea/hooks.ts
@@ -8,7 +8,6 @@ import {
 } from "@reearth/components/molecules/Visualizer/WidgetAlignSystem/hooks";
 import {
   useGetLayersQuery,
-  useGetClustersQuery,
   useGetEarthWidgetsQuery,
   useMoveInfoboxFieldMutation,
   useRemoveInfoboxFieldMutation,
@@ -33,7 +32,13 @@ import {
 } from "@reearth/state";
 import { valueTypeToGQL, ValueTypes, valueToGQL, LatLng } from "@reearth/util/value";
 
-import { convertLayers, convertWidgets, convertToBlocks, convertProperty } from "./convert";
+import {
+  convertLayers,
+  convertWidgets,
+  convertToBlocks,
+  convertProperty,
+  processSceneTags,
+} from "./convert";
 
 export default (isBuilt?: boolean) => {
   const intl = useIntl();
@@ -81,45 +86,40 @@ export default (isBuilt?: boolean) => {
     variables: { sceneId: sceneId ?? "", lang: intl.locale },
     skip: !sceneId,
   });
-  const { data: widgetData } = useGetEarthWidgetsQuery({
-    variables: { sceneId: sceneId ?? "", lang: intl.locale },
-    skip: !sceneId,
-  });
-
-  // TODO
-  const { data: clusterData } = useGetClustersQuery({
+  const { data: sceneData } = useGetEarthWidgetsQuery({
     variables: { sceneId: sceneId ?? "", lang: intl.locale },
     skip: !sceneId,
   });
 
   const rootLayerId =
     layerData?.node?.__typename === "Scene" ? layerData.node.rootLayer?.id : undefined;
-  const scene = widgetData?.node?.__typename === "Scene" ? widgetData.node : undefined;
+  const scene = sceneData?.node?.__typename === "Scene" ? sceneData.node : undefined;
 
   // convert data
   const selectedLayerId = selected?.type === "layer" ? selected.layerId : undefined;
   const layers = useMemo(() => convertLayers(layerData), [layerData]);
   const selectedLayer = selectedLayerId ? layers?.findById(selectedLayerId) : undefined;
-  const widgets = useMemo(() => convertWidgets(widgetData), [widgetData]);
+  const widgets = useMemo(() => convertWidgets(sceneData), [sceneData]);
   const sceneProperty = useMemo(() => convertProperty(scene?.property), [scene?.property]);
-  const clusterScene = clusterData?.node?.__typename === "Scene" ? clusterData.node : undefined;
+  const tags = useMemo(() => processSceneTags(scene?.tags ?? []), [scene?.tags]);
 
+  // TODO: refactor
   const clusterProperty = useMemo(
-    () => clusterScene?.clusters.reduce<any[]>((a, b) => [...a, convertProperty(b.property)], []),
-    [clusterScene?.clusters],
+    () => scene?.clusters.reduce<any[]>((a, b) => [...a, convertProperty(b.property)], []),
+    [scene?.clusters],
   );
 
   const clusterLayers = useMemo(
     () =>
-      clusterScene?.clusters.reduce<any[]>(
+      scene?.clusters.reduce<any[]>(
         (a, b) =>
           flatMap([
             ...a,
             convertProperty(b.property)?.layers?.map((layerItem: any) => layerItem.layer),
           ]).filter(item => !!item),
         [],
       ),
-    [clusterScene?.clusters],
+    [scene?.clusters],
   );
 
   const pluginProperty = useMemo(
@@ -279,6 +279,7 @@ export default (isBuilt?: boolean) => {
     pluginProperty,
     clusterProperty,
     clusterLayers,
+    tags,
     widgets,
     layers,
     selectedLayer,

diff --git a/src/components/organisms/EarthEditor/CanvasArea/index.tsx b/src/components/organisms/EarthEditor/CanvasArea/index.tsx
@@ -23,6 +23,7 @@ const CanvasArea: React.FC<Props> = ({ className, isBuilt }) => {
     clusterLayers,
     layers,
     widgets,
+    tags,
     selectedLayerId,
     blocks,
     isCapturing,
@@ -62,6 +63,7 @@ const CanvasArea: React.FC<Props> = ({ className, isBuilt }) => {
       selectedBlockId={selectedBlockId}
       rootLayerId={rootLayerId}
       sceneProperty={sceneProperty}
+      tags={tags}
       pluginProperty={pluginProperty}
       clusterProperty={clusterProperty}
       clusterLayers={clusterLayers}