Add most of components and prepare for V1 Release

2021-02-13 16:09:48 +01:00
parent 1a5cf0b075
commit decca38b67
47 changed files with 2556 additions and 0 deletions
--- a/src/components/cluster.vue
+++ b/src/components/cluster.vue
@@ -0,0 +1,114 @@
+<template>
+  <div><slot></slot></div>
+</template>
+<script>
+import MarkerClusterer from 'marker-clusterer-plus'
+import mapElementFactory from './mapElementFactory.js'
+const props = {
+  maxZoom: {
+    type: Number,
+    twoWay: false
+  },
+  batchSizeIE: {
+    type: Number,
+    twoWay: false
+  },
+  calculator: {
+    type: Function,
+    twoWay: false
+  },
+  enableRetinaIcons: {
+    type: Boolean,
+    twoWay: false
+  },
+  gridSize: {
+    type: Number,
+    twoWay: false
+  },
+  ignoreHidden: {
+    type: Boolean,
+    twoWay: false
+  },
+  imageExtension: {
+    type: String,
+    twoWay: false
+  },
+  imagePath: {
+    type: String,
+    twoWay: false
+  },
+  imageSizes: {
+    type: Array,
+    twoWay: false
+  },
+  minimumClusterSize: {
+    type: Number,
+    twoWay: false
+  },
+  styles: {
+    type: Array,
+    twoWay: false
+  },
+  zoomOnClick: {
+    type: Boolean,
+    twoWay: false
+  }
+}
+
+const events = [
+  'click',
+  'rightclick',
+  'dblclick',
+  'drag',
+  'dragstart',
+  'dragend',
+  'mouseup',
+  'mousedown',
+  'mouseover',
+  'mouseout'
+]
+
+export default mapElementFactory({
+  mappedProps: props,
+  events,
+  name: 'cluster',
+  ctr: () => {
+    if (typeof MarkerClusterer === 'undefined') {
+      /* eslint-disable no-console */
+      console.error('MarkerClusterer is not installed! require() it or include it from https://cdnjs.cloudflare.com/ajax/libs/js-marker-clusterer/1.0.0/markerclusterer.js')
+      throw new Error('MarkerClusterer is not installed! require() it or include it from https://cdnjs.cloudflare.com/ajax/libs/js-marker-clusterer/1.0.0/markerclusterer.js')
+    }
+    return MarkerClusterer
+  },
+  ctrArgs: ({map, ...otherOptions}) => [map, [], otherOptions],
+  afterCreate (inst) {
+    const reinsertMarkers = () => {
+      const oldMarkers = inst.getMarkers()
+      inst.clearMarkers()
+      inst.addMarkers(oldMarkers)
+    }
+    for (let prop in props) {
+      if (props[prop].twoWay) {
+        this.$on(prop.toLowerCase() + '_changed', reinsertMarkers)
+      }
+    }
+  },
+  updated () {
+    if (this.$clusterObject) {
+      this.$clusterObject.repaint()
+    }
+  },
+  beforeUnmount () {
+    /* Performance optimization when destroying a large number of markers */
+    this.$children.forEach(marker => {
+      if (marker.$clusterObject === this.$clusterObject) {
+        marker.$clusterObject = null
+      }
+    })
+
+    if (this.$clusterObject) {
+      this.$clusterObject.clearMarkers()
+    }
+  },
+})
+</script>