From 48ebf23bd1574408f429f2e1200ce878352007f6 Mon Sep 17 00:00:00 2001
From: Fabio Di Stasio <fabio286@gmail.com>
Date: Sun, 30 Jan 2022 11:45:24 +0100
Subject: [PATCH] feat(MySQL): spatial fields support (#165)

* feat: POINT field support

* feat(MySQL): support to LINESTRING, POLYGON and GEOMETRY fields

* refactor: removed links from map attribution

* feat(MySQL): support to MULTIPOINT, MULTILINESTRING, MULTIPOLYGON and GEOMCOLLECTION fields

* test: temporary fix on Windows tests
---
 package.json                                  |   4 +-
 src/common/data-types/mysql.js                |  18 +--
 src/common/fieldTypes.js                      |  25 +++-
 src/common/libs/getArrayDepth.js              |  10 ++
 src/renderer/components/BaseMap.vue           | 108 ++++++++++++++++++
 .../components/WorkspaceTabQueryTable.vue     |   4 +-
 .../components/WorkspaceTabQueryTableRow.vue  |  60 +++++++++-
 src/renderer/index.js                         |   1 +
 src/renderer/scss/_data-types.scss            |   9 ++
 9 files changed, 223 insertions(+), 16 deletions(-)
 create mode 100644 src/common/libs/getArrayDepth.js
 create mode 100644 src/renderer/components/BaseMap.vue

diff --git a/package.json b/package.json
index 66d8d4d2..9cdb975e 100644
--- a/package.json
+++ b/package.json
@@ -106,6 +106,7 @@
   "dependencies": {
     "@electron/remote": "^2.0.1",
     "@mdi/font": "^6.1.95",
+    "@turf/helpers": "^6.5.0",
     "@vscode/vscode-languagedetection": "^1.0.21",
     "ace-builds": "^1.4.13",
     "better-sqlite3": "^7.4.4",
@@ -113,7 +114,8 @@
     "electron-store": "^8.0.1",
     "electron-updater": "^4.6.1",
     "electron-window-state": "^5.0.3",
-    "faker": "~5.5.3",
+    "faker": "^5.5.3",
+    "leaflet": "^1.7.1",
     "marked": "^4.0.0",
     "moment": "^2.29.1",
     "mysql2": "^2.3.2",
diff --git a/src/common/data-types/mysql.js b/src/common/data-types/mysql.js
index f1eeaf33..8e77f900 100644
--- a/src/common/data-types/mysql.js
+++ b/src/common/data-types/mysql.js
@@ -219,56 +219,56 @@ module.exports = [
       types: [
          {
             name: 'POINT',
-            length: true,
+            length: false,
             collation: false,
             unsigned: false,
             zerofill: false
          },
          {
             name: 'LINESTRING',
-            length: true,
+            length: false,
             collation: false,
             unsigned: false,
             zerofill: false
          },
          {
             name: 'POLYGON',
-            length: true,
+            length: false,
             collation: false,
             unsigned: false,
             zerofill: false
          },
          {
             name: 'GEOMETRY',
-            length: true,
+            length: false,
             collation: false,
             unsigned: false,
             zerofill: false
          },
          {
             name: 'MULTIPOINT',
-            length: true,
+            length: false,
             collation: false,
             unsigned: false,
             zerofill: false
          },
          {
             name: 'MULTILINESTRING',
-            length: true,
+            length: false,
             collation: false,
             unsigned: false,
             zerofill: false
          },
          {
             name: 'MULTIPOLYGON',
-            length: true,
+            length: false,
             collation: false,
             unsigned: false,
             zerofill: false
          },
          {
-            name: 'GEOMETRYCOLLECTION',
-            length: true,
+            name: 'GEOMCOLLECTION',
+            length: false,
             collation: false,
             unsigned: false,
             zerofill: false
diff --git a/src/common/fieldTypes.js b/src/common/fieldTypes.js
index d3a8a1db..a7d3399f 100644
--- a/src/common/fieldTypes.js
+++ b/src/common/fieldTypes.js
@@ -8,7 +8,9 @@ export const TEXT = [
 export const LONG_TEXT = [
    'TEXT',
    'MEDIUMTEXT',
-   'LONGTEXT'
+   'LONGTEXT',
+   'JSON',
+   'VARBINARY'
 ];
 
 export const ARRAY = [
@@ -82,3 +84,24 @@ export const BIT = [
    'BIT',
    'BIT VARYING'
 ];
+
+export const SPATIAL = [
+   'POINT',
+   'LINESTRING',
+   'POLYGON',
+   'GEOMETRY',
+   'MULTIPOINT',
+   'MULTILINESTRING',
+   'MULTIPOLYGON',
+   'GEOMCOLLECTION',
+   'GEOMETRYCOLLECTION'
+];
+
+// Used to check multi spatial fields only
+export const IS_MULTI_SPATIAL = [
+   'MULTIPOINT',
+   'MULTILINESTRING',
+   'MULTIPOLYGON',
+   'GEOMCOLLECTION',
+   'GEOMETRYCOLLECTION'
+];
diff --git a/src/common/libs/getArrayDepth.js b/src/common/libs/getArrayDepth.js
new file mode 100644
index 00000000..04e62e77
--- /dev/null
+++ b/src/common/libs/getArrayDepth.js
@@ -0,0 +1,10 @@
+/**
+ *
+ * @param {any[]} array
+ * @returns {number}
+ */
+export function getArrayDepth (array) {
+   return Array.isArray(array)
+      ? 1 + Math.max(0, ...array.map(getArrayDepth))
+      : 0;
+}
diff --git a/src/renderer/components/BaseMap.vue b/src/renderer/components/BaseMap.vue
new file mode 100644
index 00000000..c1cbb836
--- /dev/null
+++ b/src/renderer/components/BaseMap.vue
@@ -0,0 +1,108 @@
+<template>
+   <div id="map" class="map" />
+</template>
+<script>
+import L from 'leaflet';
+import {
+   point,
+   lineString,
+   polygon
+} from '@turf/helpers';
+import { getArrayDepth } from 'common/libs/getArrayDepth';
+
+export default {
+   name: 'BaseMap',
+   props: {
+      points: [Object, Array],
+      isMultiSpatial: Boolean
+   },
+   data () {
+      return {
+         map: null,
+         markers: [],
+         center: null
+      };
+   },
+   mounted () {
+      if (this.isMultiSpatial) {
+         for (const element of this.points)
+            this.markers.push(this.getMarkers(element));
+      }
+      else {
+         this.markers = this.getMarkers(this.points);
+
+         if (!Array.isArray(this.points))
+            this.center = [this.points.y, this.points.x];
+      }
+
+      this.map = L.map('map', {
+         center: this.center || [0, 0],
+         zoom: 15,
+         minZoom: 1,
+         attributionControl: false
+      });
+
+      L.control.attribution({ prefix: '<b>Leaflet</b>' }).addTo(this.map);
+
+      const geoJsonObj = L.geoJSON(this.markers, {
+         style: function () {
+            return {
+               weight: 2,
+               fillColor: '#ff7800',
+               color: '#ff7800',
+               opacity: 0.8,
+               fillOpacity: 0.4
+            };
+         },
+         pointToLayer: function (feature, latlng) {
+            return L.circleMarker(latlng, {
+               radius: 7,
+               weight: 2,
+               fillColor: '#ff7800',
+               color: '#ff7800',
+               opacity: 0.8,
+               fillOpacity: 0.4
+            });
+         }
+      }).addTo(this.map);
+
+      const southWest = L.latLng(-90, -180);
+      const northEast = L.latLng(90, 180);
+      const bounds = L.latLngBounds(southWest, northEast);
+      this.map.setMaxBounds(bounds);
+
+      if (!this.center) this.map.fitBounds(geoJsonObj.getBounds());
+
+      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+         attribution: '&copy; <b>OpenStreetMap</b>'
+      }).addTo(this.map);
+   },
+   methods: {
+      getMarkers (points) {
+         if (Array.isArray(points)) {
+            if (getArrayDepth(points) === 1)
+               return lineString(points.reduce((acc, curr) => [...acc, [curr.x, curr.y]], []));
+            else
+               return polygon(points.map(arr => arr.reduce((acc, curr) => [...acc, [curr.x, curr.y]], [])));
+         }
+         else
+            return point([points.x, points.y]);
+      }
+   }
+};
+</script>
+
+<style lang="scss">
+.map{
+   height: 400px;
+}
+
+.marker-icon{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: $primary-color;
+    border-radius: 50%;
+    box-shadow: 0 0 5px 1px darken($body-font-color-dark, 40%);
+}
+</style>
diff --git a/src/renderer/components/WorkspaceTabQueryTable.vue b/src/renderer/components/WorkspaceTabQueryTable.vue
index d41ebb44..fbd33279 100644
--- a/src/renderer/components/WorkspaceTabQueryTable.vue
+++ b/src/renderer/components/WorkspaceTabQueryTable.vue
@@ -412,7 +412,9 @@ export default {
             `${this.fields[0].table}.${this.selectedCell.field}`,
             `${this.fields[0].tableAlias}.${this.selectedCell.field}`
          ].includes(prop));
-         const valueToCopy = row[cellName];
+         let valueToCopy = row[cellName];
+         if (typeof valueToCopy === 'object')
+            valueToCopy = JSON.stringify(valueToCopy);
          navigator.clipboard.writeText(valueToCopy);
       },
       copyRow () {
diff --git a/src/renderer/components/WorkspaceTabQueryTableRow.vue b/src/renderer/components/WorkspaceTabQueryTableRow.vue
index f417322c..6fe51f13 100644
--- a/src/renderer/components/WorkspaceTabQueryTableRow.vue
+++ b/src/renderer/components/WorkspaceTabQueryTableRow.vue
@@ -123,6 +123,21 @@
             </div>
          </template>
       </ConfirmModal>
+      <ConfirmModal
+         v-if="isMapModal"
+         :hide-footer="true"
+         size="medium"
+         @hide="hideEditorModal"
+      >
+         <template #header>
+            <div class="d-flex">
+               <i class="mdi mdi-24px mdi-map mr-1" /> <span class="cut-text">"{{ editingField }}"</span>
+            </div>
+         </template>
+         <template #body>
+            <BaseMap :points="editingContent" :is-multi-spatial="isMultiSpatial" />
+         </template>
+      </ConfirmModal>
       <ConfirmModal
          v-if="isBlobEditor"
          :confirm-text="$t('word.update')"
@@ -187,10 +202,27 @@ import { mimeFromHex } from 'common/libs/mimeFromHex';
 import { formatBytes } from 'common/libs/formatBytes';
 import { bufferToBase64 } from 'common/libs/bufferToBase64';
 import hexToBinary from 'common/libs/hexToBinary';
-import { TEXT, LONG_TEXT, ARRAY, TEXT_SEARCH, NUMBER, FLOAT, BOOLEAN, DATE, TIME, DATETIME, BLOB, BIT, HAS_TIMEZONE } from 'common/fieldTypes';
+import {
+   TEXT,
+   LONG_TEXT,
+   ARRAY,
+   TEXT_SEARCH,
+   NUMBER,
+   FLOAT,
+   BOOLEAN,
+   DATE,
+   TIME,
+   DATETIME,
+   BLOB,
+   BIT,
+   HAS_TIMEZONE,
+   SPATIAL,
+   IS_MULTI_SPATIAL
+} from 'common/fieldTypes';
 import { VueMaskDirective } from 'v-mask';
 import ConfirmModal from '@/components/BaseConfirmModal';
 import TextEditor from '@/components/BaseTextEditor';
+import BaseMap from '@/components/BaseMap';
 import ForeignKeySelect from '@/components/ForeignKeySelect';
 
 export default {
@@ -198,7 +230,8 @@ export default {
    components: {
       ConfirmModal,
       TextEditor,
-      ForeignKeySelect
+      ForeignKeySelect,
+      BaseMap
    },
    directives: {
       mask: VueMaskDirective
@@ -248,7 +281,10 @@ export default {
             return val;
          }
 
-         return val;
+         if (SPATIAL.includes(type))
+            return val;
+
+         return typeof val === 'object' ? JSON.stringify(val) : val;
       }
    },
    props: {
@@ -263,6 +299,8 @@ export default {
          isInlineEditor: {},
          isTextareaEditor: false,
          isBlobEditor: false,
+         isMapModal: false,
+         isMultiSpatial: false,
          willBeDeleted: false,
          originalContent: null,
          editingContent: null,
@@ -331,6 +369,9 @@ export default {
          if (BOOLEAN.includes(this.editingType))
             return { type: 'boolean', mask: false };
 
+         if (SPATIAL.includes(this.editingType))
+            return { type: 'map', mask: false };
+
          return { type: 'text', mask: false };
       },
       isImage () {
@@ -403,7 +444,7 @@ export default {
          return bufferToBase64(val);
       },
       editON (event, content, field) {
-         if (!this.isEditable) return;
+         if (!this.isEditable || this.editingType === 'none') return;
 
          window.addEventListener('keydown', this.onKey);
 
@@ -419,6 +460,15 @@ export default {
             return;
          }
 
+         if (SPATIAL.includes(type)) {
+            if (content) {
+               this.isMultiSpatial = IS_MULTI_SPATIAL.includes(type);
+               this.isMapModal = true;
+               this.editingContent = this.$options.filters.typeFormat(content, type);
+            }
+            return;
+         }
+
          if (BLOB.includes(type)) {
             this.isBlobEditor = true;
             this.editingContent = content || '';
@@ -490,6 +540,8 @@ export default {
       hideEditorModal () {
          this.isTextareaEditor = false;
          this.isBlobEditor = false;
+         this.isMapModal = false;
+         this.isMultiSpatial = false;
       },
       downloadFile () {
          const downloadLink = document.createElement('a');
diff --git a/src/renderer/index.js b/src/renderer/index.js
index 6079c93f..717f39a5 100644
--- a/src/renderer/index.js
+++ b/src/renderer/index.js
@@ -3,6 +3,7 @@
 import Vue from 'vue';
 
 import '@mdi/font/css/materialdesignicons.css';
+import 'leaflet/dist/leaflet.css';
 import '@/scss/main.scss';
 
 import App from '@/App.vue';
diff --git a/src/renderer/scss/_data-types.scss b/src/renderer/scss/_data-types.scss
index c82d6e60..c4fc63fa 100644
--- a/src/renderer/scss/_data-types.scss
+++ b/src/renderer/scss/_data-types.scss
@@ -81,6 +81,15 @@
     "tsvector": $array-color,
     "tsquery": $array-color,
     "pg_node_tree": $array-color,
+    "point": $array-color,
+    "linestring": $array-color,
+    "polygon": $array-color,
+    "geometry": $array-color,
+    "multipoint": $array-color,
+    "multilinestring": $array-color,
+    "multipolygon": $array-color,
+    "geomcollection": $array-color,
+    "geometrycollection": $array-color,
     "aclitem": $array-color,
     "unknown": $unknown-color,
   )