From 2cf65987370cae947b2db4afe4bfeb285a3e321b Mon Sep 17 00:00:00 2001
From: Theo <theo.tanadi122@gmail.com>
Date: Thu, 10 Oct 2024 19:40:10 +0700
Subject: [PATCH] Add `tileSize` field for raster and raster-dem tile sources
 (#946)

---
 CHANGELOG.md                              |  1 +
 cypress/e2e/modals.cy.ts                  | 15 +++++++++++++++
 src/components/ModalSources.tsx           |  6 ++++--
 src/components/ModalSourcesTypeEditor.tsx | 23 ++++++++++++++++++++++-
 4 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 51bd16e6..8fd7789a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@
 - Add german translation
 - Use same version number for web and desktop versions
 - Add scheme type options for vector/raster tile
+- Add `tileSize` field for raster and raster-dem tile sources
 - _...Add new stuff here..._
 
 ### 🐞 Bug fixes
diff --git a/cypress/e2e/modals.cy.ts b/cypress/e2e/modals.cy.ts
index b14b0175..aade75fe 100644
--- a/cypress/e2e/modals.cy.ts
+++ b/cypress/e2e/modals.cy.ts
@@ -82,6 +82,21 @@ describe("modals", () => {
         scheme: "tms",
       });
     });
+
+    it("add new raster source", () => {
+      let sourceId = "rastertest";
+      when.setValue("modal:sources.add.source_id", sourceId);
+      when.select("modal:sources.add.source_type", "tile_raster");
+      when.select("modal:sources.add.scheme_type", "xyz");
+      when.setValue("modal:sources.add.tile_size", "128");
+      when.click("modal:sources.add.add_source");
+      when.wait(200);
+      then(
+        get.styleFromLocalStorage().then((style) => style.sources[sourceId])
+      ).shouldInclude({
+        tileSize: 128,
+      });
+    });
   });
 
   describe("inspect", () => {
diff --git a/src/components/ModalSources.tsx b/src/components/ModalSources.tsx
index 6884e57e..60a6f850 100644
--- a/src/components/ModalSources.tsx
+++ b/src/components/ModalSources.tsx
@@ -158,7 +158,8 @@ class AddSource extends React.Component<AddSourceProps, AddSourceState> {
       tiles: (source as RasterSourceSpecification).tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`],
       minzoom: (source as RasterSourceSpecification).minzoom || 0,
       maxzoom: (source as RasterSourceSpecification).maxzoom || 14,
-      scheme: (source as RasterSourceSpecification).scheme || 'xyz'
+      scheme: (source as RasterSourceSpecification).scheme || 'xyz',
+      tileSize: (source as RasterSourceSpecification).tileSize || 512,
     }
     case 'tilejson_raster-dem': return {
       type: 'raster-dem',
@@ -168,7 +169,8 @@ class AddSource extends React.Component<AddSourceProps, AddSourceState> {
       type: 'raster-dem',
       tiles: (source as RasterDEMSourceSpecification).tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`],
       minzoom: (source as RasterDEMSourceSpecification).minzoom || 0,
-      maxzoom: (source as RasterDEMSourceSpecification).maxzoom || 14
+      maxzoom: (source as RasterDEMSourceSpecification).maxzoom || 14,
+      tileSize: (source as RasterDEMSourceSpecification).tileSize || 512
     }
     case 'image': return {
       type: 'image',
diff --git a/src/components/ModalSourcesTypeEditor.tsx b/src/components/ModalSourcesTypeEditor.tsx
index bc1944bb..da4f7a3c 100644
--- a/src/components/ModalSourcesTypeEditor.tsx
+++ b/src/components/ModalSourcesTypeEditor.tsx
@@ -308,9 +308,30 @@ class ModalSourcesTypeEditorInternal extends React.Component<ModalSourcesTypeEdi
     case 'tilejson_vector': return <TileJSONSourceEditor {...commonProps} />
     case 'tile_vector': return <TileURLSourceEditor {...commonProps} />
     case 'tilejson_raster': return <TileJSONSourceEditor {...commonProps} />
-    case 'tile_raster': return <TileURLSourceEditor {...commonProps} />
+    case 'tile_raster': return <TileURLSourceEditor {...commonProps}>
+      <FieldNumber
+        label={t("Tile Size")}
+        fieldSpec={latest.source_raster.tileSize}
+        onChange={tileSize => this.props.onChange({
+          ...this.props.source,
+          tileSize: tileSize
+        })}
+        value={this.props.source.tileSize || latest.source_raster.tileSize.default}
+        data-wd-key="modal:sources.add.tile_size"
+      />
+    </TileURLSourceEditor>
     case 'tilejson_raster-dem': return <TileJSONSourceEditor {...commonProps} />
     case 'tilexyz_raster-dem': return <TileURLSourceEditor {...commonProps}>
+      <FieldNumber
+        label={t("Tile Size")}
+        fieldSpec={latest.source_raster_dem.tileSize}
+        onChange={tileSize => this.props.onChange({
+          ...this.props.source,
+          tileSize: tileSize
+        })}
+        value={this.props.source.tileSize || latest.source_raster_dem.tileSize.default}
+        data-wd-key="modal:sources.add.tile_size"
+      />
       <FieldSelect
         label={t("Encoding")}
         fieldSpec={latest.source_raster_dem.encoding}