From 3938e11d04565d28a0de6d3dd68d2d0f80dc5818 Mon Sep 17 00:00:00 2001
From: jlpereira <pepelui@outlook.com>
Date: Tue, 19 Sep 2023 17:43:42 -0300
Subject: [PATCH] Add clusters type

---
 src/components/Map/VMap.client.vue            | 23 ++++++++++++++++++-
 .../components/Panel/PanelMap/PanelMap.vue    |  6 +++--
 .../PanelMap/clusters/CollectionObject.js     |  8 +++++++
 .../Panel/PanelMap/clusters/Mixed.js          | 18 +++++++++++++++
 .../Panel/PanelMap/clusters/TypeMaterial.js   |  8 +++++++
 .../Panel/PanelMap/clusters/index.js          |  3 +++
 .../PanelMap/clusters/makeClusterIconFor.js   | 17 ++++++++++++++
 .../PanelMap/{ => components}/CachedMap.vue   |  0
 .../components}/Search/ListResults.vue        |  0
 .../PanelMap/components}/Search/OtuSearch.vue |  2 +-
 .../PanelMap/components}/Search/SearchBar.vue |  0
 11 files changed, 81 insertions(+), 4 deletions(-)
 create mode 100644 src/modules/otus/components/Panel/PanelMap/clusters/CollectionObject.js
 create mode 100644 src/modules/otus/components/Panel/PanelMap/clusters/Mixed.js
 create mode 100644 src/modules/otus/components/Panel/PanelMap/clusters/TypeMaterial.js
 create mode 100644 src/modules/otus/components/Panel/PanelMap/clusters/index.js
 create mode 100644 src/modules/otus/components/Panel/PanelMap/clusters/makeClusterIconFor.js
 rename src/modules/otus/components/Panel/PanelMap/{ => components}/CachedMap.vue (100%)
 rename src/modules/otus/components/{ => Panel/PanelMap/components}/Search/ListResults.vue (100%)
 rename src/modules/otus/components/{ => Panel/PanelMap/components}/Search/OtuSearch.vue (98%)
 rename src/modules/otus/components/{ => Panel/PanelMap/components}/Search/SearchBar.vue (100%)

diff --git a/src/components/Map/VMap.client.vue b/src/components/Map/VMap.client.vue
index 311ed39..af4f396 100644
--- a/src/components/Map/VMap.client.vue
+++ b/src/components/Map/VMap.client.vue
@@ -107,6 +107,11 @@ const props = defineProps({
   maxClusterRadius: {
     type: Number,
     default: 20
+  },
+
+  clusterIconCreateFunction: {
+    type: Function,
+    default: undefined
   }
 })
 
@@ -155,6 +160,22 @@ watch(
   }
 )
 
+function makeClusterOptions() {
+  const opt = {
+    maxClusterRadius: props.maxClusterRadius
+  }
+
+  if (props.clusterIconCreateFunction) {
+    Object.assign(opt, {
+      iconCreateFunction: (cluster) => {
+        return props.clusterIconCreateFunction({ L, cluster })
+      }
+    })
+  }
+
+  return opt
+}
+
 onMounted(() => {
   const tiles = makeTileFromConfiguration(L, {
     maxZoom: props.maxZoom,
@@ -184,7 +205,7 @@ onMounted(() => {
 
   drawnItems = new L.FeatureGroup()
   geoJSONGroup = props.cluster
-    ? new L.markerClusterGroup({ maxClusterRadius: props.maxClusterRadius })
+    ? new L.markerClusterGroup(makeClusterOptions())
     : new L.FeatureGroup()
 
   mapObject = L.map(leafletMap.value, options)
diff --git a/src/modules/otus/components/Panel/PanelMap/PanelMap.vue b/src/modules/otus/components/Panel/PanelMap/PanelMap.vue
index 7f010eb..36d9250 100644
--- a/src/modules/otus/components/Panel/PanelMap/PanelMap.vue
+++ b/src/modules/otus/components/Panel/PanelMap/PanelMap.vue
@@ -9,6 +9,7 @@
           cluster
           :zoom="zoom"
           :geojson="store.distribution.geojson"
+          :cluster-icon-create-function="makeClusterIconFor"
           @geojson:ready="() => (isLoading = false)"
         />
 
@@ -61,8 +62,9 @@
 <script setup>
 import { ref, onMounted, onBeforeUnmount } from 'vue'
 import { useDistributionStore } from '@/modules/otus/store/useDistributionStore.js'
-import CachedMap from './CachedMap.vue'
-import OtuSearch from '../../Search/OtuSearch.vue'
+import { makeClusterIconFor } from './clusters/makeClusterIconFor'
+import CachedMap from './components/CachedMap.vue'
+import OtuSearch from './components/Search/OtuSearch.vue'
 
 const props = defineProps({
   otuId: {
diff --git a/src/modules/otus/components/Panel/PanelMap/clusters/CollectionObject.js b/src/modules/otus/components/Panel/PanelMap/clusters/CollectionObject.js
new file mode 100644
index 0000000..cadb99f
--- /dev/null
+++ b/src/modules/otus/components/Panel/PanelMap/clusters/CollectionObject.js
@@ -0,0 +1,8 @@
+export function CollectionObject(cluster) {
+  return {
+    html: `<div class="bg-map-collection-object"><span>${cluster.getChildCount()}</span></div>`,
+    className:
+      'leaflet-marker-icon leaflet-zoom-animated leaflet-interactive bg-map-collection-object bg-opacity-60 marker-cluster text-white',
+    iconSize: [40, 40]
+  }
+}
diff --git a/src/modules/otus/components/Panel/PanelMap/clusters/Mixed.js b/src/modules/otus/components/Panel/PanelMap/clusters/Mixed.js
new file mode 100644
index 0000000..595b5d3
--- /dev/null
+++ b/src/modules/otus/components/Panel/PanelMap/clusters/Mixed.js
@@ -0,0 +1,18 @@
+export function Mixed(cluster) {
+  return {
+    html: `
+    <div class="relative flex w-[40px] h-[40px]">
+      <div class="rounded-l-full bg-map-collection-object bg-opacity-60">
+        <div class="w-[15px] h-[30px] rounded-l-full bg-map-collection-object ml-[5px] mt-[5px]"></div>
+      </div>
+      <div class="rounded-r-full bg-map-type-material bg-opacity-60">
+        <div class="w-[15px] h-[30px] rounded-r-full bg-map-type-material mr-[5px] mt-[5px]"></div>
+      </div>
+      <span class="absolute text-xs top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white">
+        ${cluster.getChildCount()}
+      </span>
+    </div>`,
+    className: 'leaflet-marker-icon leaflet-zoom-animated leaflet-interactive',
+    iconSize: [40, 40]
+  }
+}
diff --git a/src/modules/otus/components/Panel/PanelMap/clusters/TypeMaterial.js b/src/modules/otus/components/Panel/PanelMap/clusters/TypeMaterial.js
new file mode 100644
index 0000000..34a8a3a
--- /dev/null
+++ b/src/modules/otus/components/Panel/PanelMap/clusters/TypeMaterial.js
@@ -0,0 +1,8 @@
+export function TypeMaterial(cluster) {
+  return {
+    html: `<div class="bg-map-type-material"><span>${cluster.getChildCount()}</span></div>`,
+    className:
+      'leaflet-marker-icon leaflet-zoom-animated leaflet-interactive marker-cluster bg-map-type-material bg-opacity-60 text-white',
+    iconSize: [40, 40]
+  }
+}
diff --git a/src/modules/otus/components/Panel/PanelMap/clusters/index.js b/src/modules/otus/components/Panel/PanelMap/clusters/index.js
new file mode 100644
index 0000000..46b828f
--- /dev/null
+++ b/src/modules/otus/components/Panel/PanelMap/clusters/index.js
@@ -0,0 +1,3 @@
+export * from './CollectionObject'
+export * from './Mixed'
+export * from './TypeMaterial'
diff --git a/src/modules/otus/components/Panel/PanelMap/clusters/makeClusterIconFor.js b/src/modules/otus/components/Panel/PanelMap/clusters/makeClusterIconFor.js
new file mode 100644
index 0000000..59c95b8
--- /dev/null
+++ b/src/modules/otus/components/Panel/PanelMap/clusters/makeClusterIconFor.js
@@ -0,0 +1,17 @@
+import * as ClusterType from '../clusters'
+
+export function makeClusterIconFor({ L, cluster }) {
+  const items = cluster
+    .getAllChildMarkers()
+    .map((item) => item.feature.properties.base.map((i) => i.type))
+    .flat()
+
+  const types = [...new Set(items)]
+  const currentType = types.pop()
+
+  const makeClusterOptions = types.length
+    ? ClusterType.Mixed
+    : ClusterType[currentType] || ClusterType.CollectionObject
+
+  return L.divIcon(makeClusterOptions(cluster))
+}
diff --git a/src/modules/otus/components/Panel/PanelMap/CachedMap.vue b/src/modules/otus/components/Panel/PanelMap/components/CachedMap.vue
similarity index 100%
rename from src/modules/otus/components/Panel/PanelMap/CachedMap.vue
rename to src/modules/otus/components/Panel/PanelMap/components/CachedMap.vue
diff --git a/src/modules/otus/components/Search/ListResults.vue b/src/modules/otus/components/Panel/PanelMap/components/Search/ListResults.vue
similarity index 100%
rename from src/modules/otus/components/Search/ListResults.vue
rename to src/modules/otus/components/Panel/PanelMap/components/Search/ListResults.vue
diff --git a/src/modules/otus/components/Search/OtuSearch.vue b/src/modules/otus/components/Panel/PanelMap/components/Search/OtuSearch.vue
similarity index 98%
rename from src/modules/otus/components/Search/OtuSearch.vue
rename to src/modules/otus/components/Panel/PanelMap/components/Search/OtuSearch.vue
index ae46ade..b7126a2 100644
--- a/src/modules/otus/components/Search/OtuSearch.vue
+++ b/src/modules/otus/components/Panel/PanelMap/components/Search/OtuSearch.vue
@@ -47,7 +47,7 @@
 
 <script setup>
 import { computed, ref, onMounted, onUnmounted } from 'vue'
-import TaxonWorks from '../../services/TaxonWorks'
+import TaxonWorks from '../../../../../services/TaxonWorks.js'
 import SearchBar from './SearchBar.vue'
 import ListResults from './ListResults.vue'
 
diff --git a/src/modules/otus/components/Search/SearchBar.vue b/src/modules/otus/components/Panel/PanelMap/components/Search/SearchBar.vue
similarity index 100%
rename from src/modules/otus/components/Search/SearchBar.vue
rename to src/modules/otus/components/Panel/PanelMap/components/Search/SearchBar.vue