From 1bc722d27787596f50779bdb251043e5805e807f Mon Sep 17 00:00:00 2001
From: MelihAltintas <melihaltintas@hotmail.com>
Date: Sun, 12 Sep 2021 16:38:13 +0300
Subject: [PATCH] closes #26,closes #30 baseLayer prop is added to all layer
 and bug fix for dublicate ol-control-toggle

---
 package.json                                  |  2 +-
 src/App.vue                                   | 17 +++++-----
 .../layers/AnimatedClusterLayer.vue           |  6 +++-
 src/components/layers/ImageLayer.vue          |  6 +++-
 src/components/layers/TileLayer.vue           |  6 +++-
 src/components/layers/VectorLayer.vue         |  6 +++-
 .../mapControls/AttributionControl.vue        |  4 +--
 .../mapControls/ContextMenuControl.vue        |  4 +--
 src/components/mapControls/ControlBar.vue     |  4 +--
 .../mapControls/FullScreenControl.vue         |  4 +--
 .../mapControls/LayerSwitcherControl.vue      |  4 +--
 .../mapControls/LayerSwitcherImageControl.vue |  4 +--
 .../mapControls/MousePositionControl.vue      |  4 +--
 .../mapControls/OverviewMapControl.vue        |  4 +--
 src/components/mapControls/PrintDialog.vue    |  4 +--
 src/components/mapControls/RotateControl.vue  |  4 +--
 .../mapControls/ScaleLineControl.vue          |  4 +--
 src/components/mapControls/SwipeControl.vue   |  4 +--
 src/components/mapControls/ToggleControl.vue  |  6 ++--
 .../mapControls/VideoRecorderControl.vue      | 10 +++---
 src/components/mapControls/ZoomControl.vue    |  4 +--
 .../mapControls/ZoomSliderControl.vue         |  4 +--
 .../mapControls/ZoomToExtentControl.vue       |  4 +--
 src/composables/useControl.js                 | 34 +++++++++++++++++--
 24 files changed, 97 insertions(+), 56 deletions(-)

diff --git a/package.json b/package.json
index b14a367d..27c954b9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue3-openlayers",
-  "version": "0.1.44",
+  "version": "0.1.45",
   "description": "Openlayers Wrapper for Vue3",
   "repository": {
     "type": "git",
diff --git a/src/App.vue b/src/App.vue
index db0f65dd..9bdfdc76 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -15,15 +15,15 @@
         <ol-source-xyz crossOrigin='anonymous' url="https://c.tile.jawg.io/jawg-dark/{z}/{x}/{y}.png?access-token=87PWIbRaZAGNmYDjlYsLkeTVJpQeCfl2Y61mcHopxXqSdxXExoTLEv7dwqBwSWuJ" />
     </ol-tile-layer>
 
-    <ol-control-bar>
-        <ol-control-toggle html="<i class='fas fa-map-marker'></i>" className="edit" title="Point" :onToggle="(active)=>changeDrawType(active,'Point')" />
-        <ol-control-toggle html="<i class='fas fa-draw-polygon'></i>" className="edit" title="Polygon" :onToggle="(active)=>changeDrawType(active,'Polygon')" />
-        <ol-control-toggle html="<i class='fas fa-circle'></i>" className="edit" title="Circle" :onToggle="(active)=>changeDrawType(active,'Circle')" />
-        <ol-control-toggle html="<i class='fas fa-grip-lines'></i>" className="edit" title="LineString" :onToggle="(active)=>changeDrawType(active,'LineString')" />
-        <ol-control-videorecorder @stop="videoStopped">
+    <ol-control-bar >
+        <ol-control-toggle :order="0" html="<i class='fas fa-map-marker'></i>" className="edit" title="Point" :onToggle="(active)=>changeDrawType(active,'Point')" />
+        <ol-control-toggle :order="1" html="<i class='fas fa-draw-polygon'></i>" className="edit" title="Polygon" :onToggle="(active)=>changeDrawType(active,'Polygon')" />
+        <ol-control-toggle :order="2" html="<i class='fas fa-circle'></i>" className="edit" title="Circle" :onToggle="(active)=>changeDrawType(active,'Circle')" />
+        <ol-control-toggle :order="3" html="<i class='fas fa-grip-lines'></i>" className="edit" title="LineString" :onToggle="(active)=>changeDrawType(active,'LineString')" />
+        <ol-control-videorecorder  :order="4" @stop="videoStopped">
 
         </ol-control-videorecorder>
-        <ol-control-printdialog />
+        <ol-control-printdialog :order="5" />
     </ol-control-bar>
 
     <ol-mouseposition-control />
@@ -175,7 +175,6 @@ export default {
         const projection = ref('EPSG:4326')
         const zoom = ref(6)
         const rotation = ref(0)
-
         const format = inject('ol-format');
 
         const geoJson = new format.GeoJSON();
@@ -326,9 +325,11 @@ export default {
             layerList.value.push(osmLayer.value.tileLayer);
             console.log(layerList.value)
             console.log(animationPath.value)
+
         });
 
         return {
+
             center,
             projection,
             zoom,
diff --git a/src/components/layers/AnimatedClusterLayer.vue b/src/components/layers/AnimatedClusterLayer.vue
index f2d00ba4..08afc853 100644
--- a/src/components/layers/AnimatedClusterLayer.vue
+++ b/src/components/layers/AnimatedClusterLayer.vue
@@ -105,7 +105,11 @@ export default {
         preview: {
             type: String,
 
-        }
+        },
+        baseLayer: {
+            type: Boolean,
+
+        },
     }
 }
 </script>
diff --git a/src/components/layers/ImageLayer.vue b/src/components/layers/ImageLayer.vue
index d9f19c5a..cb725c43 100644
--- a/src/components/layers/ImageLayer.vue
+++ b/src/components/layers/ImageLayer.vue
@@ -85,7 +85,11 @@ export default {
         preview: {
             type: String,
 
-        }
+        },
+        baseLayer: {
+            type: Boolean,
+
+        },
     }
 }
 </script>
diff --git a/src/components/layers/TileLayer.vue b/src/components/layers/TileLayer.vue
index 33804f30..21a9a594 100644
--- a/src/components/layers/TileLayer.vue
+++ b/src/components/layers/TileLayer.vue
@@ -117,7 +117,11 @@ export default {
         preview: {
             type: String,
 
-        }
+        },
+        baseLayer:{
+            type: Boolean,
+
+        },
     }
 }
 </script>
diff --git a/src/components/layers/VectorLayer.vue b/src/components/layers/VectorLayer.vue
index 0bc50a3a..3580a7bc 100644
--- a/src/components/layers/VectorLayer.vue
+++ b/src/components/layers/VectorLayer.vue
@@ -106,7 +106,11 @@ export default {
         preview: {
             type: String,
 
-        }
+        },
+        baseLayer: {
+            type: Boolean,
+
+        },
     }
 }
 </script>
diff --git a/src/components/mapControls/AttributionControl.vue b/src/components/mapControls/AttributionControl.vue
index 7f3e0637..bcd1d807 100644
--- a/src/components/mapControls/AttributionControl.vue
+++ b/src/components/mapControls/AttributionControl.vue
@@ -12,10 +12,10 @@ import useControl from '@/composables/useControl'
 
 export default {
     name: 'ol-attribution-control',
-    setup(props) {
+    setup(props,context) {
         const {
             control
-        } = useControl(Attribution, props);
+        } = useControl(Attribution, props,context);
         return {
             control
         }
diff --git a/src/components/mapControls/ContextMenuControl.vue b/src/components/mapControls/ContextMenuControl.vue
index 513fb6a3..a75772fc 100644
--- a/src/components/mapControls/ContextMenuControl.vue
+++ b/src/components/mapControls/ContextMenuControl.vue
@@ -12,10 +12,10 @@ import useControl from '@/composables/useControl'
 
 export default {
     name: 'ol-context-menu',
-    setup(props) {
+    setup(props,context) {
         const {
             control
-        } = useControl(ContextMenu, props);
+        } = useControl(ContextMenu, props,context);
         return {
             control
         }
diff --git a/src/components/mapControls/ControlBar.vue b/src/components/mapControls/ControlBar.vue
index 5f1f419c..742107f6 100644
--- a/src/components/mapControls/ControlBar.vue
+++ b/src/components/mapControls/ControlBar.vue
@@ -10,10 +10,10 @@ import useControl from '@/composables/useControl'
 import {provide} from "vue"
 export default {
     name: 'ol-control-bar',
-    setup(props) {
+    setup(props,context) {
         const {
             control
-        } = useControl(Bar, props);
+        } = useControl(Bar, props,context);
 
         provide('controlBar',control)
         return {
diff --git a/src/components/mapControls/FullScreenControl.vue b/src/components/mapControls/FullScreenControl.vue
index fcc04183..e09ad444 100644
--- a/src/components/mapControls/FullScreenControl.vue
+++ b/src/components/mapControls/FullScreenControl.vue
@@ -13,11 +13,11 @@ import useControl from '@/composables/useControl'
 
 export default {
     name: 'ol-fullscreen-control',
-    setup(props) {
+    setup(props,context) {
 
         const {
             control
-        } = useControl(FullScreen, props);
+        } = useControl(FullScreen, props,context);
         return {
             control
         }
diff --git a/src/components/mapControls/LayerSwitcherControl.vue b/src/components/mapControls/LayerSwitcherControl.vue
index 6770ecc5..ca9ff2c3 100644
--- a/src/components/mapControls/LayerSwitcherControl.vue
+++ b/src/components/mapControls/LayerSwitcherControl.vue
@@ -10,10 +10,10 @@ import useControl from '@/composables/useControl'
 
 export default {
     name: 'ol-layerswitcher-control',
-    setup(props) {
+    setup(props,context) {
         const {
             control
-        } = useControl(LayerSwitcher, props);
+        } = useControl(LayerSwitcher, props,context);
         return {
             control
         }
diff --git a/src/components/mapControls/LayerSwitcherImageControl.vue b/src/components/mapControls/LayerSwitcherImageControl.vue
index 23233214..39c494c9 100644
--- a/src/components/mapControls/LayerSwitcherImageControl.vue
+++ b/src/components/mapControls/LayerSwitcherImageControl.vue
@@ -11,10 +11,10 @@ import LayerSwitcherControl from './LayerSwitcherControl'
 export default {
     name: 'ol-layerswitcherimage-control',
     extends: LayerSwitcherControl,
-    setup(props) {
+    setup(props,context) {
         const {
             control
-        } = useControl(LayerSwitcherImage, props);
+        } = useControl(LayerSwitcherImage, props,context);
         return {
             control
         }
diff --git a/src/components/mapControls/MousePositionControl.vue b/src/components/mapControls/MousePositionControl.vue
index ff1ef6b1..d57ee684 100644
--- a/src/components/mapControls/MousePositionControl.vue
+++ b/src/components/mapControls/MousePositionControl.vue
@@ -13,10 +13,10 @@ import useControl from '@/composables/useControl'
 
 export default {
     name: 'ol-mouseposition-control',
-    setup(props) {
+    setup(props,context) {
         const {
             control
-        } = useControl(MousePosition, props);
+        } = useControl(MousePosition, props,context);
         return {
             control
         }
diff --git a/src/components/mapControls/OverviewMapControl.vue b/src/components/mapControls/OverviewMapControl.vue
index 4d2f1993..65336170 100644
--- a/src/components/mapControls/OverviewMapControl.vue
+++ b/src/components/mapControls/OverviewMapControl.vue
@@ -17,13 +17,13 @@ import {
 } from 'vue'
 export default {
     name: 'ol-overviewmap-control',
-    setup(props) {
+    setup(props,context) {
 
         const map = inject('map');
 
         const {
             control
-        } = useControl(OverviewMap, props);
+        } = useControl(OverviewMap, props,context);
 
         onMounted(() => {
             control.value.setMap(map);
diff --git a/src/components/mapControls/PrintDialog.vue b/src/components/mapControls/PrintDialog.vue
index 574def33..67074e71 100644
--- a/src/components/mapControls/PrintDialog.vue
+++ b/src/components/mapControls/PrintDialog.vue
@@ -14,10 +14,10 @@ import { jsPDF } from "jspdf";
 
 export default {
     name: 'ol-control-printdialog',
-    setup(props) {
+    setup(props,context) {
         const {
             control
-        } = useControl(PrintDialog, props);
+        } = useControl(PrintDialog, props,context);
 
         control.value.on(['print','error'], function (e) {
 
diff --git a/src/components/mapControls/RotateControl.vue b/src/components/mapControls/RotateControl.vue
index 9272d012..6315bc3d 100644
--- a/src/components/mapControls/RotateControl.vue
+++ b/src/components/mapControls/RotateControl.vue
@@ -10,10 +10,10 @@ import Rotate from 'ol/control/Rotate';
 
 export default {
     name: 'ol-rotate-control',
-    setup(props) {
+    setup(props,context) {
         const {
             control
-        } = useControl(Rotate, props);
+        } = useControl(Rotate, props,context);
         return {
             control
         }
diff --git a/src/components/mapControls/ScaleLineControl.vue b/src/components/mapControls/ScaleLineControl.vue
index 1098e33d..7446600b 100644
--- a/src/components/mapControls/ScaleLineControl.vue
+++ b/src/components/mapControls/ScaleLineControl.vue
@@ -13,10 +13,10 @@ import {
 
 export default {
     name: 'ol-scaleline-control',
-    setup(props) {
+    setup(props,context) {
         const {
             control
-        } = useControl(ScaleLine, props);
+        } = useControl(ScaleLine, props,context);
         return {
             control
         }
diff --git a/src/components/mapControls/SwipeControl.vue b/src/components/mapControls/SwipeControl.vue
index 4d03f59e..6b950017 100644
--- a/src/components/mapControls/SwipeControl.vue
+++ b/src/components/mapControls/SwipeControl.vue
@@ -12,10 +12,10 @@ import {
 } from "vue"
 export default {
     name: 'ol-swipe-control',
-    setup(props) {
+    setup(props,context) {
         const {
             control
-        } = useControl(Swipe, props);
+        } = useControl(Swipe, props,context);
 
         const {
             layerList
diff --git a/src/components/mapControls/ToggleControl.vue b/src/components/mapControls/ToggleControl.vue
index 804f5008..87a9c9eb 100644
--- a/src/components/mapControls/ToggleControl.vue
+++ b/src/components/mapControls/ToggleControl.vue
@@ -8,13 +8,12 @@
 import Toggle from 'ol-ext/control/Toggle'
 
 import useControl from '@/composables/useControl'
-
 export default {
     name: 'ol-control-toggle',
-    setup(props) {
+    setup(props,context) {
         const {
             control
-        } = useControl(Toggle, props);
+        } = useControl(Toggle, props,context);
 
         return {
             control
@@ -37,7 +36,6 @@ export default {
         onToggle: {
             type: Function,
         },
-
     }
 }
 </script>
diff --git a/src/components/mapControls/VideoRecorderControl.vue b/src/components/mapControls/VideoRecorderControl.vue
index 12189b8d..39b0aa01 100644
--- a/src/components/mapControls/VideoRecorderControl.vue
+++ b/src/components/mapControls/VideoRecorderControl.vue
@@ -14,24 +14,22 @@ import {toRefs} from 'vue'
 export default {
     name: 'ol-control-videorecorder',
     emits: ['start', 'stop'],
-    setup(props, {
-        emit
-    }) {
+    setup(props, context) {
 
         const {
             control
         } =
-        useControl(VideoRecorder, props);
+        useControl(VideoRecorder, props,context);
 
         const{downloadName} = toRefs(props)
 
         control.value.on("start", (event) => {
-            emit('start', event)
+            context.emit('start', event)
 
         })
 
         control.value.on("stop", (event) => {
-            emit('stop', event)
+            context.emit('stop', event)
             saveAs(event.videoURL, downloadName.value);
         })
         return {
diff --git a/src/components/mapControls/ZoomControl.vue b/src/components/mapControls/ZoomControl.vue
index fcbbe1ad..c0b06014 100644
--- a/src/components/mapControls/ZoomControl.vue
+++ b/src/components/mapControls/ZoomControl.vue
@@ -10,10 +10,10 @@ import useControl from '@/composables/useControl'
 
 export default {
     name: 'ol-zoom-control',
-    setup(props) {
+    setup(props,context) {
         const {
             control
-        } = useControl(Zoom, props);
+        } = useControl(Zoom, props,context);
         return {
             control
         }
diff --git a/src/components/mapControls/ZoomSliderControl.vue b/src/components/mapControls/ZoomSliderControl.vue
index b3170e60..d21e51e3 100644
--- a/src/components/mapControls/ZoomSliderControl.vue
+++ b/src/components/mapControls/ZoomSliderControl.vue
@@ -10,11 +10,11 @@ import ZoomSlider from 'ol/control/ZoomSlider';
 
 export default {
     name: 'ol-zoomslider-control',
-    setup(props) {
+    setup(props,context) {
 
         const {
             control
-        } = useControl(ZoomSlider, props);
+        } = useControl(ZoomSlider, props,context);
         return {
             control
         }
diff --git a/src/components/mapControls/ZoomToExtentControl.vue b/src/components/mapControls/ZoomToExtentControl.vue
index 4fb6010c..97668291 100644
--- a/src/components/mapControls/ZoomToExtentControl.vue
+++ b/src/components/mapControls/ZoomToExtentControl.vue
@@ -11,10 +11,10 @@ import ZoomToExtent from 'ol/control/ZoomToExtent';
 
 export default {
     name: 'ol-zoomtoextent-control',
-    setup(props) {
+    setup(props,context) {
         const {
             control
-        } = useControl(ZoomToExtent, props);
+        } = useControl(ZoomToExtent, props,context);
         return {
             control
         }
diff --git a/src/composables/useControl.js b/src/composables/useControl.js
index ba632b63..3d67c59b 100644
--- a/src/composables/useControl.js
+++ b/src/composables/useControl.js
@@ -8,13 +8,16 @@ import {
 } from 'vue'
 import usePropsAsObjectProperties from '@/composables/usePropsAsObjectProperties'
 
-export default function useControl(ControlType, props) {
+export default function useControl(ControlType, props, context) {
 
     const map = inject('map');
     const controlBar = inject('controlBar', null);
 
+
     const parent = controlBar != null ? controlBar.value : map;
 
+
+
     const {
         properties
     } = usePropsAsObjectProperties(props);
@@ -23,22 +26,47 @@ export default function useControl(ControlType, props) {
         ...properties
     }));
 
+    control.value.set("order", context.attrs.order == undefined ? 0 : context.attrs.order)
+
+    
     watch(control, (newVal, oldVal) => {
         if (parent.removeControl) {
             parent.removeControl(oldVal);
+            parent.addControl(newVal);
+            map.changed()
         }
-        parent.addControl(newVal);
-        map.changed()
+
     });
 
     onMounted(() => {
+
         parent.addControl(control.value);
+        if (parent.controls_ != undefined) {
+        
+            let sortedControls = [...parent.controls_]
+            sortedControls.sort((a, b) => a.get("order") - b.get("order"))
+
+            parent.controls_ = []
+    
+            sortedControls.forEach(c => {
+                parent.addControl(c);
+            })
+
+            parent.changed()
+   
+        }
+
         map.changed();
     });
 
     onUnmounted(() => {
         if (parent.removeControl) {
             parent.removeControl(control.value);
+        } else { // ol-ext controls
+            let index = parent.controls_.findIndex(a => a == control.value);
+            parent.controls_.splice(index, 1)
+            control.value.dispose();
+
         }
         map.changed();
     });