chore(web): refactor property and revert core (#788)

reearth · Nov 3, 2023 · e844ddd · e844ddd
1 parent 38f26c8
commit e844ddd
Show file tree

Hide file tree

Showing 9 changed files with 275 additions and 163 deletions.
diff --git a/web/src/beta/features/Editor/Visualizer/convert-story.ts b/web/src/beta/features/Editor/Visualizer/convert-story.ts
@@ -0,0 +1,187 @@
+import { Story, StoryBlock, StoryPage } from "@reearth/beta/lib/core/StoryPanel/types";
+import { valueFromGQL, valueTypeFromGQL } from "@reearth/beta/utils/value";
+import { toUi } from "@reearth/services/api/propertyApi/utils";
+import {
+  PropertyFieldFragmentFragment,
+  PropertyFragmentFragment,
+  PropertyGroupFragmentFragment,
+  PropertyItemFragmentFragment,
+  PropertySchemaFieldFragmentFragment,
+  PropertySchemaGroupFragmentFragment,
+  Story as GqlStory,
+  StoryPage as GqlStoryPage,
+  StoryBlock as GqlStoryBlock,
+} from "@reearth/services/gql";
+
+import { DatasetMap, P, datasetValue } from "./convert";
+
+export const convertStory = (story?: GqlStory): Story | undefined => {
+  if (!story) return undefined;
+
+  const storyPages = (pages: GqlStoryPage[]): StoryPage[] =>
+    pages.map(p => ({
+      id: p.id,
+      title: p.title,
+      propertyId: p.propertyId,
+      property: processProperty(undefined, p.property),
+      blocks: storyBlocks(p.blocks),
+    }));
+
+  const storyBlocks = (blocks: GqlStoryBlock[]): StoryBlock[] =>
+    blocks.map(b => ({
+      id: b.id,
+      pluginId: b.pluginId,
+      extensionId: b.extensionId,
+      name: b.property?.schema?.groups.find(g => g.schemaGroupId === "default")?.title,
+      propertyId: b.property?.id,
+      property: processProperty(undefined, b.property),
+    }));
+
+  return {
+    id: story.id,
+    title: story.title,
+    position: story.panelPosition === "RIGHT" ? "right" : "left",
+    pages: storyPages(story.pages),
+  };
+};
+
+export const processProperty = (
+  parent: PropertyFragmentFragment | null | undefined,
+  orig?: PropertyFragmentFragment | null | undefined,
+  linkedDatasetId?: string | null | undefined,
+  datasets?: DatasetMap | null | undefined,
+): P | undefined => {
+  const schema = orig?.schema || parent?.schema;
+  if (!schema) return;
+
+  const allItems: Record<
+    string,
+    {
+      schema: PropertySchemaGroupFragmentFragment;
+      orig?: PropertyItemFragmentFragment;
+      parent?: PropertyItemFragmentFragment;
+    }
+  > = schema.groups.reduce(
+    (a, b) => ({
+      ...a,
+      [b.schemaGroupId]: {
+        schema: b,
+        orig: orig?.items.find(i => i.schemaGroupId === b.schemaGroupId),
+        parent: parent?.items.find(i => i.schemaGroupId === b.schemaGroupId),
+      },
+    }),
+    {},
+  );
+  const mergedProperty: P = Object.fromEntries(
+    Object.entries(allItems)
+      .map(([key, value]) => {
+        const { schema, orig, parent } = value;
+        if (!orig && !parent) {
+          if (schema.isList) {
+            return [key, undefined];
+          }
+          return [
+            key,
+            processPropertyGroups(schema, undefined, undefined, linkedDatasetId, datasets),
+          ];
+        }
+
+        if (
+          (!orig || orig.__typename === "PropertyGroupList") &&
+          (!parent || parent.__typename === "PropertyGroupList")
+        ) {
+          const used = orig || parent;
+          return [
+            key,
+            used?.groups.map(g => ({
+              ...processPropertyGroups(schema, g, undefined, linkedDatasetId, datasets),
+              id: g.id,
+            })),
+          ];
+        }
+
+        if (
+          (!orig || orig.__typename === "PropertyGroup") &&
+          (!parent || parent.__typename === "PropertyGroup")
+        ) {
+          return [key, processPropertyGroups(schema, parent, orig, linkedDatasetId, datasets)];
+        }
+        return [key, null];
+      })
+      .filter(([, value]) => !!value),
+  );
+
+  return mergedProperty;
+};
+
+const processPropertyGroups = (
+  schema: PropertySchemaGroupFragmentFragment,
+  parent: PropertyGroupFragmentFragment | null | undefined,
+  original: PropertyGroupFragmentFragment | null | undefined,
+  linkedDatasetId: string | null | undefined,
+  datasets: DatasetMap | null | undefined,
+): any => {
+  const allFields: Record<
+    string,
+    {
+      schema: PropertySchemaFieldFragmentFragment;
+      parent?: PropertyFieldFragmentFragment;
+      orig?: PropertyFieldFragmentFragment;
+    }
+  > = schema.fields.reduce(
+    (a, b) => ({
+      ...a,
+      [b.fieldId]: {
+        schema: b,
+        parent: parent?.fields.find(i => i.fieldId === b.fieldId),
+        orig: original?.fields.find(i => i.fieldId === b.fieldId),
+      },
+    }),
+    {},
+  );
+
+  return Object.fromEntries(
+    Object.entries(allFields).map(([key, { schema, parent, orig }]) => {
+      const used = orig || parent;
+
+      const fieldMeta = {
+        type: valueTypeFromGQL(schema.type) || undefined,
+        ui: toUi(schema.ui) || undefined,
+        title: schema.translatedTitle || undefined,
+        description: schema.translatedDescription || undefined,
+      };
+
+      if (!used) {
+        return [
+          key,
+          {
+            ...fieldMeta,
+            value: schema.defaultValue
+              ? valueFromGQL(schema.defaultValue, schema.type)?.value
+              : undefined,
+          },
+        ];
+      }
+
+      const datasetSchemaId = used?.links?.[0]?.datasetSchemaId;
+      const datasetFieldId = used?.links?.[0]?.datasetSchemaFieldId;
+      if (datasetSchemaId && linkedDatasetId && datasetFieldId) {
+        return [
+          key,
+          {
+            ...fieldMeta,
+            value: datasetValue(datasets, datasetSchemaId, linkedDatasetId, datasetFieldId),
+          },
+        ];
+      }
+
+      return [
+        key,
+        {
+          ...fieldMeta,
+          value: valueFromGQL(used.value, used.type)?.value,
+        },
+      ];
+    }),
+  );
+};
diff --git a/web/src/beta/features/Editor/Visualizer/convert.ts b/web/src/beta/features/Editor/Visualizer/convert.ts
@@ -15,11 +15,9 @@ import { WidgetAreaPadding } from "@reearth/beta/lib/core/Crust/Widgets/WidgetAl
 import { LayerAppearanceTypes } from "@reearth/beta/lib/core/mantle";
 import type { Block, Tag } from "@reearth/beta/lib/core/mantle/compat/types";
 import type { Layer } from "@reearth/beta/lib/core/Map";
-import { Story, StoryBlock, StoryPage } from "@reearth/beta/lib/core/StoryPanel/types";
 import { DEFAULT_LAYER_STYLE, valueTypeFromGQL } from "@reearth/beta/utils/value";
 import { NLSLayer } from "@reearth/services/api/layersApi/utils";
 import { LayerStyle } from "@reearth/services/api/layerStyleApi/utils";
-import { toUi } from "@reearth/services/api/propertyApi/utils";
 import {
   type Maybe,
   type WidgetZone as WidgetZoneType,
@@ -35,12 +33,9 @@ import {
   PropertyFieldFragmentFragment,
   ValueType as GQLValueType,
   NlsLayerCommonFragment,
-  Story as GqlStory,
-  StoryPage as GqlStoryPage,
-  StoryBlock as GqlStoryBlock,
 } from "@reearth/services/gql";
 
-type P = { [key in string]: any };
+export type P = { [key in string]: any };
 
 export type DatasetMap = Record<string, Datasets>;
 
@@ -184,36 +179,6 @@ export const convertWidgets = (
   };
 };
 
-export const convertStory = (story?: GqlStory): Story | undefined => {
-  if (!story) return undefined;
-
-  const storyPages = (pages: GqlStoryPage[]): StoryPage[] =>
-    pages.map(p => ({
-      id: p.id,
-      title: p.title,
-      propertyId: p.propertyId,
-      property: processProperty(undefined, p.property),
-      blocks: storyBlocks(p.blocks),
-    }));
-
-  const storyBlocks = (blocks: GqlStoryBlock[]): StoryBlock[] =>
-    blocks.map(b => ({
-      id: b.id,
-      pluginId: b.pluginId,
-      extensionId: b.extensionId,
-      name: b.property?.schema?.groups.find(g => g.schemaGroupId === "default")?.title,
-      propertyId: b.property?.id,
-      property: processProperty(undefined, b.property),
-    }));
-
-  return {
-    id: story.id,
-    title: story.title,
-    position: story.panelPosition === "RIGHT" ? "right" : "left",
-    pages: storyPages(story.pages),
-  };
-};
-
 export const processProperty = (
   parent: PropertyFragmentFragment | null | undefined,
   orig?: PropertyFragmentFragment | null | undefined,
@@ -310,52 +275,24 @@ const processPropertyGroups = (
   );
 
   return Object.fromEntries(
-    Object.entries(allFields).map(([key, { schema, parent, orig }]) => {
-      const used = orig || parent;
-
-      const fieldMeta = {
-        type: valueTypeFromGQL(schema.type) || undefined,
-        ui: toUi(schema.ui) || undefined,
-        title: schema.translatedTitle || undefined,
-        description: schema.translatedDescription || undefined,
-      };
-
-      if (!used) {
-        return [
-          key,
-          {
-            ...fieldMeta,
-            value: schema.defaultValue
-              ? valueFromGQL(schema.defaultValue, schema.type)?.value
-              : undefined,
-          },
-        ];
-      }
-
-      const datasetSchemaId = used?.links?.[0]?.datasetSchemaId;
-      const datasetFieldId = used?.links?.[0]?.datasetSchemaFieldId;
-      if (datasetSchemaId && linkedDatasetId && datasetFieldId) {
-        return [
-          key,
-          {
-            ...fieldMeta,
-            value: datasetValue(datasets, datasetSchemaId, linkedDatasetId, datasetFieldId),
-          },
-        ];
-      }
+    Object.entries(allFields)
+      .map(([key, { parent, orig }]) => {
+        const used = orig || parent;
+        if (!used) return [key, null];
+
+        const datasetSchemaId = used?.links?.[0]?.datasetSchemaId;
+        const datasetFieldId = used?.links?.[0]?.datasetSchemaFieldId;
+        if (datasetSchemaId && linkedDatasetId && datasetFieldId) {
+          return [key, datasetValue(datasets, datasetSchemaId, linkedDatasetId, datasetFieldId)];
+        }
 
-      return [
-        key,
-        {
-          ...fieldMeta,
-          value: valueFromGQL(used.value, used.type)?.value,
-        },
-      ];
-    }),
+        return [key, valueFromGQL(used.value, used.type)?.value];
+      })
+      .filter(([, value]) => typeof value !== "undefined" && value !== null),
   );
 };
 
-const datasetValue = (
+export const datasetValue = (
   datasets: DatasetMap | null | undefined,
   datasetSchemaId: string,
   datasetId: string,

diff --git a/web/src/beta/features/Editor/Visualizer/hooks.ts b/web/src/beta/features/Editor/Visualizer/hooks.ts
@@ -26,7 +26,8 @@ import {
   selectedLayerVar,
 } from "@reearth/services/state";
 
-import { convertStory, convertWidgets, processLayers } from "./convert";
+import { convertWidgets, processLayers } from "./convert";
+import { convertStory } from "./convert-story";
 import type { BlockType } from "./type";
 
 export default ({