feat(web): Add layers using wms and mvt (#694)

reearth · Sep 22, 2023 · 5fe5126 · 5fe5126
1 parent 4afa473
commit 5fe5126
Show file tree

Hide file tree

Showing 10 changed files with 347 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,
+  };
+};