From 5fe51261233cf375f0c01b5142dcff24535cd5ef Mon Sep 17 00:00:00 2001
From: Beatrice Mkumbo <charsbeaty@gmail.com>
Date: Fri, 22 Sep 2023 09:28:43 +0300
Subject: [PATCH] feat(web): Add layers using wms and mvt (#694)

---
 .../Editor/DataSourceManager/Asset/index.tsx  |   6 +-
 .../DataSourceManager/DelimitedText/index.tsx |   6 +-
 .../DataSourceManager/ThreeDTiles/index.tsx   |   6 +-
 .../DataSourceManager/VectorTiles/index.tsx   | 124 ++++++++++++++++++
 .../DataSourceManager/WmsTiles/index.tsx      | 124 ++++++++++++++++++
 .../Editor/DataSourceManager/hooks.ts         |  46 +++++++
 .../Editor/DataSourceManager/index.tsx        |  12 ++
 .../Editor/DataSourceManager/utils.tsx        |  25 +++-
 web/src/services/i18n/translations/en.yml     |   5 +-
 web/src/services/i18n/translations/ja.yml     |   5 +-
 10 files changed, 347 insertions(+), 12 deletions(-)
 create mode 100644 web/src/beta/features/Editor/DataSourceManager/VectorTiles/index.tsx
 create mode 100644 web/src/beta/features/Editor/DataSourceManager/WmsTiles/index.tsx
 create mode 100644 web/src/beta/features/Editor/DataSourceManager/hooks.ts

diff --git a/web/src/beta/features/Editor/DataSourceManager/Asset/index.tsx b/web/src/beta/features/Editor/DataSourceManager/Asset/index.tsx
index c832c7a113..ee2b792d2c 100644
--- a/web/src/beta/features/Editor/DataSourceManager/Asset/index.tsx
+++ b/web/src/beta/features/Editor/DataSourceManager/Asset/index.tsx
@@ -9,7 +9,7 @@ import { useT } from "@reearth/services/i18n";
 
 import { DataProps } from "..";
 import {
-  ColJustiftBetween,
+  ColJustifyBetween,
   AssetWrapper,
   InputGroup,
   Input,
@@ -88,7 +88,7 @@ const Asset: React.FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
   };
 
   return (
-    <ColJustiftBetween>
+    <ColJustifyBetween>
       <AssetWrapper>
         <InputGroup
           label={t("Source Type")}
@@ -150,7 +150,7 @@ const Asset: React.FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
           disabled={(sourceType === "url" || sourceType === "value") && !value}
         />
       </SubmitWrapper>
-    </ColJustiftBetween>
+    </ColJustifyBetween>
   );
 };
 
diff --git a/web/src/beta/features/Editor/DataSourceManager/DelimitedText/index.tsx b/web/src/beta/features/Editor/DataSourceManager/DelimitedText/index.tsx
index 4b0c816d4a..8bc3ef88ee 100644
--- a/web/src/beta/features/Editor/DataSourceManager/DelimitedText/index.tsx
+++ b/web/src/beta/features/Editor/DataSourceManager/DelimitedText/index.tsx
@@ -8,7 +8,7 @@ import { useT } from "@reearth/services/i18n";
 
 import { DataProps } from "..";
 import {
-  ColJustiftBetween,
+  ColJustifyBetween,
   AssetWrapper,
   InputGroup,
   Input,
@@ -57,7 +57,7 @@ const DelimitedText: React.FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
   };
 
   return (
-    <ColJustiftBetween>
+    <ColJustifyBetween>
       <AssetWrapper>
         <InputGroup
           label="Source Type"
@@ -105,7 +105,7 @@ const DelimitedText: React.FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
           disabled={(sourceType === "url" || sourceType === "value") && !value}
         />
       </SubmitWrapper>
-    </ColJustiftBetween>
+    </ColJustifyBetween>
   );
 };
 
diff --git a/web/src/beta/features/Editor/DataSourceManager/ThreeDTiles/index.tsx b/web/src/beta/features/Editor/DataSourceManager/ThreeDTiles/index.tsx
index 331da788dc..e9c1e5d4cc 100644
--- a/web/src/beta/features/Editor/DataSourceManager/ThreeDTiles/index.tsx
+++ b/web/src/beta/features/Editor/DataSourceManager/ThreeDTiles/index.tsx
@@ -4,7 +4,7 @@ import Button from "@reearth/beta/components/Button";
 import generateRandomString from "@reearth/beta/utils/generate-random-string";
 
 import { DataProps } from "..";
-import { ColJustiftBetween, AssetWrapper, InputGroup, Input, SubmitWrapper } from "../utils";
+import { ColJustifyBetween, AssetWrapper, InputGroup, Input, SubmitWrapper } from "../utils";
 
 const ThreeDTiles: React.FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
   const [value, setValue] = React.useState("");
@@ -38,7 +38,7 @@ const ThreeDTiles: React.FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
   };
 
   return (
-    <ColJustiftBetween>
+    <ColJustifyBetween>
       <AssetWrapper>
         <InputGroup label="Resource URL" description="URL of the data source you want to add.">
           <Input
@@ -58,7 +58,7 @@ const ThreeDTiles: React.FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
           disabled={!value}
         />
       </SubmitWrapper>
-    </ColJustiftBetween>
+    </ColJustifyBetween>
   );
 };
 
diff --git a/web/src/beta/features/Editor/DataSourceManager/VectorTiles/index.tsx b/web/src/beta/features/Editor/DataSourceManager/VectorTiles/index.tsx
new file mode 100644
index 0000000000..6aea77fe40
--- /dev/null
+++ b/web/src/beta/features/Editor/DataSourceManager/VectorTiles/index.tsx
@@ -0,0 +1,124 @@
+import { FC } from "react";
+
+import Button from "@reearth/beta/components/Button";
+import generateRandomString from "@reearth/beta/utils/generate-random-string";
+import { useT } from "@reearth/services/i18n";
+
+import { DataProps } from "..";
+import useHooks from "../hooks";
+import {
+  AddLayerWrapper,
+  AssetWrapper,
+  ColJustifyBetween,
+  DeleteLayerIcon,
+  Input,
+  InputGroup,
+  LayerWrapper,
+  SubmitWrapper,
+} from "../utils";
+
+const VectorTiles: FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
+  const {
+    urlValue,
+    layerValue,
+    layerInput,
+    layers,
+    setUrlValue,
+    setLayerValue,
+    handleAddLayer,
+    handleDeleteLayer,
+    handleLayerInput,
+  } = useHooks();
+
+  const t = useT();
+
+  const handleSubmit = () => {
+    onSubmit({
+      layerType: "simple",
+      sceneId,
+      title: generateRandomString(5),
+      visible: true,
+      config: {
+        data: {
+          url: urlValue !== "" ? urlValue : null,
+          type: "mvt",
+          layers: layers.length <= 1 ? layers[0] : layers,
+        },
+        resource: {
+          clampToGround: true,
+        },
+        marker: {
+          heightReference: "clamp",
+        },
+        polygon: {
+          heightReference: "clamp",
+        },
+        polyline: {
+          clampToGround: true,
+        },
+      },
+    });
+    onClose();
+  };
+
+  return (
+    <ColJustifyBetween>
+      <AssetWrapper>
+        <InputGroup
+          label={t("Resource URL")}
+          description={t("URL of the data source you want to add.")}>
+          <Input
+            type="text"
+            placeholder="https://"
+            value={urlValue}
+            onChange={e => setUrlValue(e.target.value)}
+          />
+        </InputGroup>
+        <InputGroup
+          label={t("Choose layer to add")}
+          description={t("Layer of the data source you want to add.")}>
+          {layers.map((layer: string, index: number) => (
+            <LayerWrapper key={index}>
+              <Input type="text" placeholder={`${layer}`} disabled={true} />
+              <DeleteLayerIcon icon="bin" size={16} onClick={() => handleDeleteLayer(index)} />
+            </LayerWrapper>
+          ))}
+          {(!layers.length || layerInput) && (
+            <LayerWrapper>
+              <Input
+                type="text"
+                placeholder={t("layer name")}
+                value={layerValue}
+                onChange={e => setLayerValue(e.target.value)}
+                onKeyDown={handleAddLayer}
+              />
+              <DeleteLayerIcon disabled={true} icon="bin" size={16} />
+            </LayerWrapper>
+          )}
+
+          <AddLayerWrapper>
+            <Button
+              icon="plus"
+              text={t("Layer")}
+              buttonType="primary"
+              size="small"
+              onClick={handleLayerInput}
+              disabled={!layerValue && !layers.length}
+            />
+          </AddLayerWrapper>
+        </InputGroup>
+      </AssetWrapper>
+      <SubmitWrapper>
+        <Button
+          text={t("Add to Layer")}
+          buttonType="primary"
+          size="medium"
+          onClick={handleSubmit}
+          disabled={!urlValue}
+        />
+      </SubmitWrapper>
+    </ColJustifyBetween>
+  );
+};
+
+export default VectorTiles;
diff --git a/web/src/beta/features/Editor/DataSourceManager/WmsTiles/index.tsx b/web/src/beta/features/Editor/DataSourceManager/WmsTiles/index.tsx
new file mode 100644
index 0000000000..7d43ba7fe9
--- /dev/null
+++ b/web/src/beta/features/Editor/DataSourceManager/WmsTiles/index.tsx
@@ -0,0 +1,124 @@
+import { FC } from "react";
+
+import Button from "@reearth/beta/components/Button";
+import generateRandomString from "@reearth/beta/utils/generate-random-string";
+import { useT } from "@reearth/services/i18n";
+
+import { DataProps } from "..";
+import useHooks from "../hooks";
+import {
+  AddLayerWrapper,
+  AssetWrapper,
+  ColJustifyBetween,
+  DeleteLayerIcon,
+  Input,
+  InputGroup,
+  LayerWrapper,
+  SubmitWrapper,
+} from "../utils";
+
+const WmsTiles: FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
+  const {
+    urlValue,
+    layerValue,
+    layerInput,
+    layers,
+    setUrlValue,
+    setLayerValue,
+    handleAddLayer,
+    handleDeleteLayer,
+    handleLayerInput,
+  } = useHooks();
+
+  const t = useT();
+
+  const handleSubmit = () => {
+    onSubmit({
+      layerType: "simple",
+      sceneId,
+      title: generateRandomString(5),
+      visible: true,
+      config: {
+        data: {
+          url: urlValue !== "" ? urlValue : null,
+          type: "wms",
+          layers: layers.length <= 1 ? layers[0] : layers,
+        },
+        resource: {
+          clampToGround: true,
+        },
+        marker: {
+          heightReference: "clamp",
+        },
+        polygon: {
+          heightReference: "clamp",
+        },
+        polyline: {
+          clampToGround: true,
+        },
+      },
+    });
+    onClose();
+  };
+
+  return (
+    <ColJustifyBetween>
+      <AssetWrapper>
+        <InputGroup
+          label={t("Resource URL")}
+          description={t("URL of the data source you want to add.")}>
+          <Input
+            type="text"
+            placeholder="https://"
+            value={urlValue}
+            onChange={e => setUrlValue(e.target.value)}
+          />
+        </InputGroup>
+        <InputGroup
+          label={t("Choose layer to add")}
+          description={t("Layer of the data source you want to add.")}>
+          {layers.map((layer: string, index: number) => (
+            <LayerWrapper key={index}>
+              <Input type="text" placeholder={`${layer}`} disabled={true} />
+              <DeleteLayerIcon icon="bin" size={16} onClick={() => handleDeleteLayer(index)} />
+            </LayerWrapper>
+          ))}
+          {(!layers.length || layerInput) && (
+            <LayerWrapper>
+              <Input
+                type="text"
+                placeholder={t("layer name")}
+                value={layerValue}
+                onChange={e => setLayerValue(e.target.value)}
+                onKeyDown={handleAddLayer}
+              />
+              <DeleteLayerIcon disabled={true} icon="bin" size={16} />
+            </LayerWrapper>
+          )}
+
+          <AddLayerWrapper>
+            <Button
+              icon="plus"
+              text={t("Layer")}
+              buttonType="primary"
+              size="small"
+              onClick={handleLayerInput}
+              disabled={!layerValue && !layers.length}
+            />
+          </AddLayerWrapper>
+        </InputGroup>
+      </AssetWrapper>
+      <SubmitWrapper>
+        <Button
+          text={t("Add to Layer")}
+          buttonType="primary"
+          size="medium"
+          onClick={handleSubmit}
+          disabled={!urlValue}
+        />
+      </SubmitWrapper>
+    </ColJustifyBetween>
+  );
+};
+
+export default WmsTiles;
diff --git a/web/src/beta/features/Editor/DataSourceManager/hooks.ts b/web/src/beta/features/Editor/DataSourceManager/hooks.ts
new file mode 100644
index 0000000000..e669d12e7a
--- /dev/null
+++ b/web/src/beta/features/Editor/DataSourceManager/hooks.ts
@@ -0,0 +1,46 @@
+import { useState, KeyboardEvent } from "react";
+
+export default () => {
+  const [urlValue, setUrlValue] = useState("");
+  const [layerValue, setLayerValue] = useState("");
+  const [layers, setLayers] = useState<string[]>([]);
+  const [layerInput, setLayerInput] = useState(false);
+
+  const handleonAddLayer = () => {
+    if (layerValue.trim() !== "") {
+      const exist = layers.some((layer: string) => layer === layerValue);
+      if (!exist) setLayers(prev => [...prev, layerValue]);
+      setLayerValue("");
+    }
+  };
+
+  const handleLayerInput = () => {
+    handleonAddLayer();
+    setLayerInput(true);
+  };
+
+  const handleAddLayer = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      handleonAddLayer();
+      setLayerInput(false);
+    }
+  };
+
+  const handleDeleteLayer = (idx: number) => {
+    const updatedLayers = [...layers];
+    updatedLayers.splice(idx, 1);
+    setLayers(updatedLayers);
+  };
+
+  return {
+    urlValue,
+    layerInput,
+    layerValue,
+    layers,
+    setLayerValue,
+    setUrlValue,
+    handleAddLayer,
+    handleLayerInput,
+    handleDeleteLayer,
+  };
+};
diff --git a/web/src/beta/features/Editor/DataSourceManager/index.tsx b/web/src/beta/features/Editor/DataSourceManager/index.tsx
index 688fc66f60..94f5adc681 100644
--- a/web/src/beta/features/Editor/DataSourceManager/index.tsx
+++ b/web/src/beta/features/Editor/DataSourceManager/index.tsx
@@ -7,6 +7,8 @@ import { LayerAddProps } from "../useLayers";
 import Asset from "./Asset";
 import DelimitedText from "./DelimitedText";
 import ThreeDTiles from "./ThreeDTiles";
+import VectorTiles from "./VectorTiles";
+import WmsTiles from "./WmsTiles";
 
 export type DataProps = {
   sceneId: string;
@@ -37,6 +39,16 @@ const DataSourceManager: React.FC<DataProps> = ({ sceneId, onClose, onSubmit })
           id: "threeDTiles",
           label: "3D Tiles",
         },
+        {
+          content: <WmsTiles sceneId={sceneId} onSubmit={onSubmit} onClose={onClose} />,
+          id: "wms",
+          label: "WMS",
+        },
+        {
+          content: <VectorTiles sceneId={sceneId} onSubmit={onSubmit} onClose={onClose} />,
+          id: "vectorTiles",
+          label: "Vector Tile",
+        },
       ]}
     />
   );
diff --git a/web/src/beta/features/Editor/DataSourceManager/utils.tsx b/web/src/beta/features/Editor/DataSourceManager/utils.tsx
index 2aba57d2b2..67b9533498 100644
--- a/web/src/beta/features/Editor/DataSourceManager/utils.tsx
+++ b/web/src/beta/features/Editor/DataSourceManager/utils.tsx
@@ -1,3 +1,4 @@
+import Icon from "@reearth/beta/components/Icon";
 import { styled } from "@reearth/services/theme";
 
 export const InputGroup: React.FC<{
@@ -51,7 +52,7 @@ export const AssetWrapper = styled.div`
   gap: 16px;
 `;
 
-export const ColJustiftBetween = styled.div`
+export const ColJustifyBetween = styled.div`
   display: flex;
   height: 100%;
   flex-direction: column;
@@ -89,3 +90,25 @@ export const TextArea = styled.textarea`
   color: ${props => props.theme.content.main};
   overflow: hidden;
 `;
+
+export const LayerWrapper = styled.div`
+  display: flex;
+  gap: 8px;
+`;
+
+export const DeleteLayerIcon = styled(Icon)<{ disabled?: boolean }>`
+  cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};
+  background: transparent;
+  border: 1px solid #777;
+  padding: 7px 6px;
+  border-radius: 4px;
+  outline: none;
+  opacity: ${({ disabled }) => (disabled ? 0.5 : 1)}; // Reduce opacity for disabled state
+`;
+
+export const AddLayerWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  margin-top: 5px;
+  justify-content: flex-start;
+`;
diff --git a/web/src/services/i18n/translations/en.yml b/web/src/services/i18n/translations/en.yml
index 07c08154c9..11f00d4450 100644
--- a/web/src/services/i18n/translations/en.yml
+++ b/web/src/services/i18n/translations/en.yml
@@ -37,6 +37,10 @@ Value: ''
 Description around.: ''
 Write down your text: ''
 Add to Layer: ''
+Choose layer to add: 'Choose layer to add'
+Layer of the data source you want to add.: 'Layer of the data source you want to add'
+layer name: 'Layer name'
+Layer: Layer
 Scene: Scene
 Main: ''
 Layers: Layers
@@ -435,7 +439,6 @@ Successfully published your project with search engine indexing!: Successfully p
 Successfully unpublished your project. Now nobody can access your project.: Successfully unpublished your project. Now nobody can access your project.
 Successfully copied to clipboard!: Successfully copied to clipboard!
 Folder: Folder
-Layer: Layer
 Widget: Widget
 Infobox: Infobox
 Tag: Tag
diff --git a/web/src/services/i18n/translations/ja.yml b/web/src/services/i18n/translations/ja.yml
index f3f8937d31..42d6049b2b 100644
--- a/web/src/services/i18n/translations/ja.yml
+++ b/web/src/services/i18n/translations/ja.yml
@@ -37,6 +37,10 @@ Value: ''
 Description around.: ''
 Write down your text: ''
 Add to Layer: レイヤー追加
+Choose layer to add: ''
+Layer of the data source you want to add.: ''
+layer name: ''
+Layer: レイヤー
 Scene: シーン
 Main: ''
 Layers: レイヤー
@@ -396,7 +400,6 @@ Successfully published your project with search engine indexing!: 検索エン
 Successfully unpublished your project. Now nobody can access your project.: プロジェクトは非公開状態です。現在、誰も閲覧することはできません。
 Successfully copied to clipboard!: クリップボードにコピーしました。
 Folder: 新規フォルダ
-Layer: レイヤー
 Widget: ウィジェット
 Infobox: インフォボックス
 Tag: タグ