Merge pull request #51 from mostafaznv/dev

bugfix and improvement
mostafaznv · Mar 18, 2024 · a6eb425 · a6eb425
2 parents fccf2b4 + e05270f
commit a6eb425
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 28 deletions.
diff --git a/dist/field.css b/dist/field.css
diff --git a/dist/field.js b/dist/field.js
diff --git a/dist/mix-manifest.json b/dist/mix-manifest.json
@@ -1,6 +1,6 @@
 {
-    "/field.css": "/field.css?id=0b29f4e7358b74e4b94d6e9a649b58e6",
-    "/field.js": "/field.js?id=1301eb0d254fa29878bb04f803a816d4",
+    "/field.css": "/field.css?id=4407e68d56833eb40018d94d3aab447d",
+    "/field.js": "/field.js?id=c4eca81aee44feb2a5b6d019a1ca0a79",
     "/vendor/nova-map-field/dist/images/ic-pin-1.png": "/vendor/nova-map-field/dist/images/ic-pin-1.png?id=400bb8273d9fe0a31d86e144ef534856",
     "/vendor/nova-map-field/dist/images/ic-pin-2.png": "/vendor/nova-map-field/dist/images/ic-pin-2.png?id=e084fdbb00a78f7e6d53819e518e64ec",
     "/vendor/nova-map-field/dist/images/ic-pin-3.png": "/vendor/nova-map-field/dist/images/ic-pin-3.png?id=19780e69e0b6125989e3209759e51997"

diff --git a/package.json b/package.json
@@ -15,17 +15,17 @@
         "@vue/compiler-sfc": "^3.4.21",
         "cross-env": "^7.0.3",
         "laravel-mix": "^6.0.49",
-        "ol": "^8.1.0",
-        "ol-contextmenu": "^5.3.0",
-        "ol-ext": "^4.0.11",
-        "ol-geocoder": "4.3.1",
+        "ol": "^9.0.0",
+        "ol-contextmenu": "^5.4.0",
+        "ol-ext": "^4.0.17",
+        "ol-geocoder": "^4.3.3",
         "polylabel": "^1.1.0",
         "resolve-url-loader": "^5.0.0",
-        "sass": "^1.52.1",
-        "sass-loader": "^13.0.0",
+        "sass": "^1.72.0",
+        "sass-loader": "^14.1.1",
         "vue": "^3.4.21",
-        "vue-loader": "^16.8.3",
-        "vue-template-compiler": "^2.6.14",
-        "vue3-openlayers": "^3.1.0"
+        "vue-loader": "^17.4.2",
+        "vue-template-compiler": "^2.7.16",
+        "vue3-openlayers": "^6.1.2"
     }
 }
diff --git a/resources/js/components/form-fields/MultiPolygonFormField.vue b/resources/js/components/form-fields/MultiPolygonFormField.vue
@@ -21,7 +21,7 @@
             </ol-tile-layer>
 
             <ol-vector-layer :styles="vectorStyle">
-                <ol-source-vector ref="source" :features.sync="zones">
+                <ol-source-vector ref="source">
                     <ol-interaction-modify
                         v-if="isEditable && !exportable"
                         @modifyend="onModifyEnd"
@@ -96,7 +96,7 @@ export default {
         'field', 'readonly'
     ],
     expose: [
-        'initCenter', 'initZones', 'capture', 'isDirty'
+        'initCenter', 'initZones', 'clearZones', 'capture', 'isDirty'
     ],
     data() {
         return {
@@ -156,10 +156,12 @@ export default {
         },
 
         initZones() {
-            this.zones = new GeoJSON().readFeatures(this.geoJsonObject)
+            const zones = new GeoJSON().readFeatures(this.geoJsonObject)
 
-            if (this.zones.length) {
-                this.zones.forEach(zone => this.selectedFeatures.push(zone))
+            if (zones.length) {
+                zones.forEach(zone => this.selectedFeatures.push(zone))
+
+                this.$refs.source.source.addFeatures(zones)
             }
         },
 

diff --git a/resources/js/components/form-fields/PolygonFormField.vue b/resources/js/components/form-fields/PolygonFormField.vue
@@ -21,7 +21,7 @@
             </ol-tile-layer>
 
             <ol-vector-layer :styles="vectorStyle">
-                <ol-source-vector ref="source" :features.sync="zones">
+                <ol-source-vector ref="source">
                     <ol-interaction-modify
                         v-if="isEditable && !exportable"
                         @modifyend="onModifyEnd"
@@ -96,7 +96,7 @@ export default {
         'field', 'readonly'
     ],
     expose: [
-        'initCenter', 'initZones', 'capture', 'isDirty'
+        'initCenter', 'initZones', 'clearZones', 'capture', 'isDirty'
     ],
     methods: {
         initCenter() {
@@ -149,10 +149,12 @@ export default {
         },
 
         initZones() {
-            this.zones = new GeoJSON().readFeatures(this.geoJsonObject)
+            const zones = new GeoJSON().readFeatures(this.geoJsonObject)
 
-            if (this.zones.length) {
-                this.selectedFeatures.push(this.zones[0])
+            if (zones.length) {
+                this.selectedFeatures.push(zones[0])
+
+                this.$refs.source.source.addFeatures(zones)
             }
         },
 

diff --git a/resources/js/components/other/MapExport.vue b/resources/js/components/other/MapExport.vue
@@ -5,20 +5,23 @@
             ref="map"
             :field="currentField"
             :exportable="true"
+            :key="key"
         />
 
         <polygon-form-field
             v-else-if="currentField.mapType === 'POLYGON'"
             ref="map"
             :field="currentField"
             :exportable="true"
+            :key="key"
         />
 
         <multi-polygon-form-field
             v-else-if="currentField.mapType === 'MULTI_POLYGON'"
             ref="map"
             :field="currentField"
             :exportable="true"
+            :key="key"
         />
     </div>
 </template>
@@ -46,6 +49,7 @@ const props = defineProps({
 })
 
 const map = ref(null)
+const key = ref(1)
 const currentField = ref(props.field)
 const config = ref({
     enabled: false,
@@ -95,6 +99,7 @@ async function setValue() {
         await map.value.initCenter()
 
         if (props.field.mapType === 'POLYGON' || props.field.mapType === 'MULTI_POLYGON') {
+            await map.value.clearZones()
             await map.value.initZones()
         }
 
@@ -108,6 +113,7 @@ async function capture() {
     }
 
     const res = await map.value?.capture()
+    key.value++
 
     if (res.file) {
         emit('update:modelValue', res.file)

diff --git a/resources/js/mixins/PolygonMixin.js b/resources/js/mixins/PolygonMixin.js
@@ -10,7 +10,6 @@ export default {
         return {
             isDirty: false,
             fieldValue: '',
-            zones: [],
             selectedFeatures: new Collection(),
             drawIsEnabled: true,
             modifyIsEnabled: false,
@@ -65,10 +64,16 @@ export default {
             this.isDirty = true
         },
 
+        async clearZones(fast = true) {
+            this.selectedFeatures = []
+            await this.$refs.source.source.clear(fast)
+        },
+
         onDrawEnd(event) {
             const geometry = event.feature.getGeometry()
 
-            this.zones.push(event.feature)
+            // this.zones.push(event.feature)
+            // this.$refs.source.source.addFeature(event.feature)
             this.selectedFeatures.push(event.feature)
 
             this.drawIsEnabled = false
@@ -92,7 +97,17 @@ export default {
         }
     },
     created() {
-        this.initZones()
+        this.$nextTick(async () => {
+            await new Promise(resolve => setTimeout(resolve, 50))
+
+            try {
+                this.initZones()
+            }
+            catch (e) {
+                console.warn('error on initZones')
+                console.error(e)
+            }
+        })
 
         const selectConditions = inject('ol-selectconditions')
         this.selectCondition = selectConditions.click