chore(web): story page layer UI (#709)

reearth · Sep 29, 2023 · 4a62abc · 4a62abc
1 parent 2536415
commit 4a62abc
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 40 deletions.
diff --git a/web/src/beta/features/Editor/Settings/index.tsx b/web/src/beta/features/Editor/Settings/index.tsx
@@ -1,31 +1,61 @@
+import { useState } from "react";
+
+import CheckBoxField from "@reearth/beta/components/CheckboxField";
 import FieldComponents from "@reearth/beta/components/fields/PropertyFields";
 import SidePanelSectionField from "@reearth/beta/components/SidePanelSectionField";
 import type { FlyTo } from "@reearth/beta/lib/core/types";
 import type { Camera } from "@reearth/beta/utils/value";
+import { NLSLayer } from "@reearth/services/api/layersApi/utils";
 import type { Item } from "@reearth/services/api/propertyApi/utils";
+import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
 
+import { Tab } from "../../Navbar";
+
 type Props = {
   propertyId: string;
   propertyItems?: Item[];
   currentCamera?: Camera;
+  layers?: NLSLayer[];
+  tab?: Tab;
   onFlyTo?: FlyTo;
 };
 
-const Settings: React.FC<Props> = ({ propertyId, propertyItems, currentCamera, onFlyTo }) => (
-  <Wrapper>
-    {propertyItems?.map((i, idx) => (
-      <SidePanelSectionField title={i.title ?? "Undefined"} key={idx}>
-        <FieldComponents
-          propertyId={propertyId}
-          item={i}
-          currentCamera={currentCamera}
-          onFlyTo={onFlyTo}
-        />
-      </SidePanelSectionField>
-    ))}
-  </Wrapper>
-);
+const Settings: React.FC<Props> = ({
+  propertyId,
+  propertyItems,
+  currentCamera,
+  layers,
+  tab,
+  onFlyTo,
+}) => {
+  const t = useT();
+  const [layerCheck, setLayerCheck] = useState(true);
+
+  return (
+    <Wrapper>
+      {tab == "story" && (
+        <SidePanelSectionField title={t("Layers")}>
+          {layers?.map((layer, idx) => (
+            <Layer key={idx}>
+              <CheckBoxField onClick={setLayerCheck} checked={layerCheck} label={layer.title} />
+            </Layer>
+          ))}
+        </SidePanelSectionField>
+      )}
+      {propertyItems?.map((i, idx) => (
+        <SidePanelSectionField title={i.title ?? "Undefined"} key={idx}>
+          <FieldComponents
+            propertyId={propertyId}
+            item={i}
+            currentCamera={currentCamera}
+            onFlyTo={onFlyTo}
+          />
+        </SidePanelSectionField>
+      ))}
+    </Wrapper>
+  );
+};
 
 export default Settings;
 
@@ -40,3 +70,7 @@ const Item = styled.div`
   background: ${({ theme }) => theme.bg[1]};
   border-radius: 4px;
 `;
+
+const Layer = styled.div`
+  padding: 4px;
+`;
diff --git a/web/src/beta/features/Editor/index.tsx b/web/src/beta/features/Editor/index.tsx
@@ -90,6 +90,7 @@ const Editor: React.FC<Props> = ({ sceneId, projectId, workspaceId, tab }) => {
   const { rightPanel } = useRightPanel({
     tab,
     sceneId,
+    nlsLayers,
     currentPage,
     currentCamera,
     showSceneSettings: selectedSceneSetting,

diff --git a/web/src/beta/features/Editor/tabs/story/RightPanel/index.tsx b/web/src/beta/features/Editor/tabs/story/RightPanel/index.tsx
@@ -2,19 +2,29 @@ import { useMemo } from "react";
 
 import Settings from "@reearth/beta/features/Editor/Settings";
 import SidePanelCommon from "@reearth/beta/features/Editor/SidePanel";
+import { Tab } from "@reearth/beta/features/Navbar";
 import type { FlyTo } from "@reearth/beta/lib/core/types";
 import type { Camera } from "@reearth/beta/utils/value";
+import { NLSLayer } from "@reearth/services/api/layersApi/utils";
 import type { Page } from "@reearth/services/api/storytellingApi/utils";
 import { useT } from "@reearth/services/i18n";
 
 type Props = {
   sceneId?: string;
   selectedPage?: Page;
   currentCamera?: Camera;
+  layers?: NLSLayer[];
+  tab?: Tab;
   onFlyTo?: FlyTo;
 };
 
-const StoryRightPanel: React.FC<Props> = ({ selectedPage, currentCamera, onFlyTo }) => {
+const StoryRightPanel: React.FC<Props> = ({
+  selectedPage,
+  currentCamera,
+  layers,
+  tab,
+  onFlyTo,
+}) => {
   const t = useT();
 
   const propertyItems = useMemo(
@@ -37,6 +47,8 @@ const StoryRightPanel: React.FC<Props> = ({ selectedPage, currentCamera, onFlyTo
               propertyId={selectedPage.property.id}
               propertyItems={propertyItems}
               currentCamera={currentCamera}
+              layers={layers}
+              tab={tab}
               onFlyTo={onFlyTo}
             />
           ),

diff --git a/web/src/beta/features/Editor/useRightPanel.tsx b/web/src/beta/features/Editor/useRightPanel.tsx
@@ -3,6 +3,7 @@ import { ReactNode, useMemo } from "react";
 import type { Tab } from "@reearth/beta/features/Navbar";
 import type { FlyTo } from "@reearth/beta/lib/core/types";
 import type { Camera } from "@reearth/beta/utils/value";
+import { NLSLayer } from "@reearth/services/api/layersApi/utils";
 import type { Page } from "@reearth/services/api/storytellingApi/utils";
 
 import MapSidePanel from "./tabs/map/RightPanel";
@@ -12,6 +13,7 @@ import WidgetSidePanel from "./tabs/widgets/RightPanel";
 type Props = {
   tab: Tab;
   sceneId?: string;
+  nlsLayers: NLSLayer[];
   currentPage?: Page;
   showSceneSettings?: boolean;
   currentCamera?: Camera;
@@ -21,6 +23,7 @@ type Props = {
 export default ({
   tab,
   sceneId,
+  nlsLayers,
   currentPage,
   showSceneSettings,
   currentCamera,
@@ -42,6 +45,8 @@ export default ({
           <StorySidePanel
             selectedPage={currentPage}
             currentCamera={currentCamera}
+            layers={nlsLayers}
+            tab={tab}
             onFlyTo={onFlyTo}
           />
         );
@@ -52,7 +57,7 @@ export default ({
       default:
         return undefined;
     }
-  }, [tab, sceneId, currentPage, showSceneSettings, currentCamera, onFlyTo]);
+  }, [tab, sceneId, showSceneSettings, currentCamera, onFlyTo, currentPage, nlsLayers]);
 
   return {
     rightPanel,

diff --git a/web/src/services/gql/__gen__/gql.ts b/web/src/services/gql/__gen__/gql.ts
@@ -24,7 +24,7 @@ const documents = {
     "\n  fragment ProjectFragment on Project {\n    id\n    name\n    description\n    imageUrl\n    isArchived\n    isBasicAuthActive\n    basicAuthUsername\n    basicAuthPassword\n    publicTitle\n    publicDescription\n    publicImage\n    alias\n    publishmentStatus\n    updatedAt\n    coreSupport\n  }\n": types.ProjectFragmentFragmentDoc,
     "\n  fragment PropertySchemaFieldFragment on PropertySchemaField {\n    fieldId\n    title\n    description\n    translatedTitle(lang: $lang)\n    translatedDescription(lang: $lang)\n    prefix\n    suffix\n    type\n    defaultValue\n    ui\n    min\n    max\n    choices {\n      key\n      icon\n      title\n      translatedTitle(lang: $lang)\n    }\n    isAvailableIf {\n      fieldId\n      type\n      value\n    }\n  }\n\n  fragment PropertySchemaGroupFragment on PropertySchemaGroup {\n    schemaGroupId\n    title\n    translatedTitle(lang: $lang)\n    isList\n    representativeFieldId\n    isAvailableIf {\n      fieldId\n      type\n      value\n    }\n    fields {\n      ...PropertySchemaFieldFragment\n    }\n  }\n\n  fragment PropertyFieldFragment on PropertyField {\n    id\n    fieldId\n    type\n    value\n    links {\n      ...PropertyFieldLink\n    }\n  }\n\n  fragment PropertyGroupFragment on PropertyGroup {\n    id\n    schemaGroupId\n    fields {\n      ...PropertyFieldFragment\n    }\n  }\n\n  fragment PropertyItemFragment on PropertyItem {\n    ... on PropertyGroupList {\n      id\n      schemaGroupId\n      groups {\n        ...PropertyGroupFragment\n      }\n    }\n    ... on PropertyGroup {\n      ...PropertyGroupFragment\n    }\n  }\n\n  fragment PropertyFragmentWithoutSchema on Property {\n    id\n    items {\n      ...PropertyItemFragment\n    }\n  }\n\n  fragment PropertyFragment on Property {\n    id\n    ...PropertyFragmentWithoutSchema\n    schema {\n      id\n      groups {\n        ...PropertySchemaGroupFragment\n      }\n    }\n  }\n\n  fragment MergedPropertyGroupCommonFragment on MergedPropertyGroup {\n    schemaGroupId\n    fields {\n      fieldId\n      type\n      actualValue\n      overridden\n      links {\n        ...PropertyFieldLink\n      }\n    }\n  }\n\n  fragment MergedPropertyGroupFragment on MergedPropertyGroup {\n    ...MergedPropertyGroupCommonFragment\n    groups {\n      ...MergedPropertyGroupCommonFragment\n    }\n  }\n\n  fragment MergedPropertyFragmentWithoutSchema on MergedProperty {\n    originalId\n    parentId\n    linkedDatasetId\n    groups {\n      ...MergedPropertyGroupFragment\n    }\n  }\n\n  fragment MergedPropertyFragment on MergedProperty {\n    ...MergedPropertyFragmentWithoutSchema\n    schema {\n      id\n    }\n  }\n\n  fragment PropertyFieldLink on PropertyFieldLink {\n    datasetId\n    datasetSchemaId\n    datasetSchemaFieldId\n  }\n": types.PropertySchemaFieldFragmentFragmentDoc,
     "\n  fragment StoryFragment on Story {\n    id\n    title\n    panelPosition\n    isBasicAuthActive\n    basicAuthUsername\n    basicAuthPassword\n    alias\n    publicTitle\n    publicDescription\n    publicImage\n    publicNoIndex\n    pages {\n      ...StoryPageFragment\n    }\n  }\n": types.StoryFragmentFragmentDoc,
-    "\n  fragment StoryPageFragment on StoryPage {\n    id\n    title\n    swipeable\n    propertyId\n    property {\n      id\n      ...PropertyFragment\n    }\n    blocks {\n      id\n      pluginId\n      extensionId\n      property {\n        id\n        ...PropertyFragment\n      }\n    }\n  }\n": types.StoryPageFragmentFragmentDoc,
+    "\n  fragment StoryPageFragment on StoryPage {\n    id\n    title\n    swipeable\n    propertyId\n    property {\n      id\n      ...PropertyFragment\n    }\n    layersIds\n    blocks {\n      id\n      pluginId\n      extensionId\n      property {\n        id\n        ...PropertyFragment\n      }\n    }\n  }\n": types.StoryPageFragmentFragmentDoc,
     "\n  query GetAssets($teamId: ID!, $sort: AssetSortType, $keyword: String, $pagination: Pagination) {\n    assets(teamId: $teamId, keyword: $keyword, sort: $sort, pagination: $pagination) {\n      edges {\n        cursor\n        node {\n          id\n          teamId\n          name\n          size\n          url\n          contentType\n        }\n      }\n      nodes {\n        id\n        teamId\n        name\n        size\n        url\n        contentType\n      }\n      pageInfo {\n        endCursor\n        hasNextPage\n        hasPreviousPage\n        startCursor\n      }\n      totalCount\n    }\n  }\n": types.GetAssetsDocument,
     "\n  mutation CreateAsset($teamId: ID!, $file: Upload!) {\n    createAsset(input: { teamId: $teamId, file: $file }) {\n      asset {\n        id\n        teamId\n        name\n        size\n        url\n        contentType\n      }\n    }\n  }\n": types.CreateAssetDocument,
     "\n  mutation RemoveAsset($assetId: ID!) {\n    removeAsset(input: { assetId: $assetId }) {\n      assetId\n    }\n  }\n": types.RemoveAssetDocument,
@@ -48,7 +48,6 @@ const documents = {
     "\n  mutation UpdatePropertyValue(\n    $propertyId: ID!\n    $schemaGroupId: ID\n    $itemId: ID\n    $fieldId: ID!\n    $value: Any\n    $type: ValueType!\n    $lang: Lang\n  ) {\n    updatePropertyValue(\n      input: {\n        propertyId: $propertyId\n        schemaGroupId: $schemaGroupId\n        itemId: $itemId\n        fieldId: $fieldId\n        value: $value\n        type: $type\n      }\n    ) {\n      property {\n        id\n        ...PropertyFragment\n        layer {\n          id\n          ...Layer1Fragment\n        }\n      }\n    }\n  }\n": types.UpdatePropertyValueDocument,
     "\n  mutation AddPropertyItem(\n    $propertyId: ID!\n    $schemaGroupId: ID!\n    $lang: Lang\n  ) {\n    addPropertyItem(\n      input: {\n        propertyId: $propertyId\n        schemaGroupId: $schemaGroupId\n      }\n    ) {\n      property {\n        id\n        ...PropertyFragment\n        layer {\n          id\n          ...Layer1Fragment\n        }\n      }\n    }\n  }\n": types.AddPropertyItemDocument,
     "\n  mutation RemovePropertyItem($propertyId: ID!, $schemaGroupId: ID!, $itemId: ID!, $lang: Lang) {\n    removePropertyItem(\n      input: { propertyId: $propertyId, schemaGroupId: $schemaGroupId, itemId: $itemId }\n    ) {\n      property {\n        id\n        ...PropertyFragment\n        layer {\n          id\n          ...Layer1Fragment\n        }\n      }\n    }\n  }\n": types.RemovePropertyItemDocument,
-    "\n  mutation UpdatePropertyItems(\n    $propertyId: ID!\n    $schemaGroupId: ID!\n    $operations: [UpdatePropertyItemOperationInput!]!\n    $lang: Lang\n  ) {\n    updatePropertyItems(\n      input: { propertyId: $propertyId, schemaGroupId: $schemaGroupId, operations: $operations }\n    ) {\n      property {\n        id\n        ...PropertyFragment\n        layer {\n          id\n          ...Layer1Fragment\n        }\n      }\n    }\n  }\n": types.UpdatePropertyItemsDocument,
     "\n  mutation MovePropertyItem(\n    $propertyId: ID!\n    $schemaGroupId: ID!\n    $itemId: ID!\n    $index: Int!\n    $lang: Lang\n  ) {\n    movePropertyItem(\n      input: {\n        propertyId: $propertyId\n        schemaGroupId: $schemaGroupId\n        itemId: $itemId\n        index: $index\n      }\n    ) {\n      property {\n        id\n        ...PropertyFragment\n        layer {\n          id\n          ...Layer1Fragment\n        }\n      }\n    }\n  }\n": types.MovePropertyItemDocument,
     "\n  query GetScene($sceneId: ID!, $lang: Lang) {\n    node(id: $sceneId, type: SCENE) {\n      id\n      ... on Scene {\n        rootLayerId\n        teamId\n        projectId\n        property {\n          id\n          ...PropertyFragment\n        }\n        clusters {\n          id\n          name\n          propertyId\n          property {\n            id\n            ...PropertyFragment\n          }\n        }\n        tags {\n          id\n          label\n          ... on TagGroup {\n            tags {\n              id\n              label\n            }\n          }\n        }\n        plugins {\n          property {\n            id\n            ...PropertyFragment\n          }\n          plugin {\n            ...PluginFragment\n          }\n        }\n        widgets {\n          id\n          enabled\n          extended\n          pluginId\n          extensionId\n          property {\n            id\n            ...PropertyFragment\n          }\n        }\n        widgetAlignSystem {\n          ...WidgetAlignSystemFragment\n        }\n        stories {\n          ...StoryFragment\n        }\n        newLayers {\n          ...NLSLayerCommon\n        }\n      }\n    }\n  }\n": types.GetSceneDocument,
     "\n  mutation CreateScene($projectId: ID!) {\n    createScene(input: { projectId: $projectId }) {\n      scene {\n        id\n      }\n    }\n  }\n": types.CreateSceneDocument,
@@ -135,7 +134,7 @@ export function gql(source: "\n  fragment StoryFragment on Story {\n    id\n
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function gql(source: "\n  fragment StoryPageFragment on StoryPage {\n    id\n    title\n    swipeable\n    propertyId\n    property {\n      id\n      ...PropertyFragment\n    }\n    blocks {\n      id\n      pluginId\n      extensionId\n      property {\n        id\n        ...PropertyFragment\n      }\n    }\n  }\n"): (typeof documents)["\n  fragment StoryPageFragment on StoryPage {\n    id\n    title\n    swipeable\n    propertyId\n    property {\n      id\n      ...PropertyFragment\n    }\n    blocks {\n      id\n      pluginId\n      extensionId\n      property {\n        id\n        ...PropertyFragment\n      }\n    }\n  }\n"];
+export function gql(source: "\n  fragment StoryPageFragment on StoryPage {\n    id\n    title\n    swipeable\n    propertyId\n    property {\n      id\n      ...PropertyFragment\n    }\n    layersIds\n    blocks {\n      id\n      pluginId\n      extensionId\n      property {\n        id\n        ...PropertyFragment\n      }\n    }\n  }\n"): (typeof documents)["\n  fragment StoryPageFragment on StoryPage {\n    id\n    title\n    swipeable\n    propertyId\n    property {\n      id\n      ...PropertyFragment\n    }\n    layersIds\n    blocks {\n      id\n      pluginId\n      extensionId\n      property {\n        id\n        ...PropertyFragment\n      }\n    }\n  }\n"];
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -228,10 +227,6 @@ export function gql(source: "\n  mutation AddPropertyItem(\n    $propertyId: ID!
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function gql(source: "\n  mutation RemovePropertyItem($propertyId: ID!, $schemaGroupId: ID!, $itemId: ID!, $lang: Lang) {\n    removePropertyItem(\n      input: { propertyId: $propertyId, schemaGroupId: $schemaGroupId, itemId: $itemId }\n    ) {\n      property {\n        id\n        ...PropertyFragment\n        layer {\n          id\n          ...Layer1Fragment\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  mutation RemovePropertyItem($propertyId: ID!, $schemaGroupId: ID!, $itemId: ID!, $lang: Lang) {\n    removePropertyItem(\n      input: { propertyId: $propertyId, schemaGroupId: $schemaGroupId, itemId: $itemId }\n    ) {\n      property {\n        id\n        ...PropertyFragment\n        layer {\n          id\n          ...Layer1Fragment\n        }\n      }\n    }\n  }\n"];
-/**
- * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
- */
-export function gql(source: "\n  mutation UpdatePropertyItems(\n    $propertyId: ID!\n    $schemaGroupId: ID!\n    $operations: [UpdatePropertyItemOperationInput!]!\n    $lang: Lang\n  ) {\n    updatePropertyItems(\n      input: { propertyId: $propertyId, schemaGroupId: $schemaGroupId, operations: $operations }\n    ) {\n      property {\n        id\n        ...PropertyFragment\n        layer {\n          id\n          ...Layer1Fragment\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  mutation UpdatePropertyItems(\n    $propertyId: ID!\n    $schemaGroupId: ID!\n    $operations: [UpdatePropertyItemOperationInput!]!\n    $lang: Lang\n  ) {\n    updatePropertyItems(\n      input: { propertyId: $propertyId, schemaGroupId: $schemaGroupId, operations: $operations }\n    ) {\n      property {\n        id\n        ...PropertyFragment\n        layer {\n          id\n          ...Layer1Fragment\n        }\n      }\n    }\n  }\n"];
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */