From 64e592ba3cf5c67e7b16d0f39d748f882109ecf9 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Sun, 5 Sep 2021 23:45:39 +0200
Subject: [PATCH] New polygon field

---
 resources/js/components/fields/Polygon.vue | 96 ++++++++++++++++++++++
 resources/js/field.js                      |  1 +
 src/Polygon.php                            | 40 +++++++++
 3 files changed, 137 insertions(+)
 create mode 100644 resources/js/components/fields/Polygon.vue
 create mode 100644 src/Polygon.php

diff --git a/resources/js/components/fields/Polygon.vue b/resources/js/components/fields/Polygon.vue
new file mode 100644
index 0000000..9f42c14
--- /dev/null
+++ b/resources/js/components/fields/Polygon.vue
@@ -0,0 +1,96 @@
+<template>
+    <div @keydown.backspace="removeLastMarker">
+        <field-map :bounds="bounds" :center="center" :field="field" @click="createMarker">
+            <l-marker v-for="marker in markers" :lat-lng="marker" :draggable="edit" @dragend="triggerChange" />
+            <l-polygon :lat-lngs="value" :visible="true" />
+        </field-map>
+
+        <l-control position="bottomleft" >
+            <button @click="clickHandler">
+            I am a useless button!
+            </button>
+        </l-control>
+    </div>
+</template>
+
+<script>
+import {LMarker, LPolygon} from 'vue2-leaflet'
+
+export default {
+    props: {
+        value: {
+            type: Object,
+            default: null,
+        },
+        field: {
+            type: Object,
+            required: true,
+        },
+        edit: {
+            type: Boolean,
+            default: false,
+        }
+    },
+
+    data() {
+        return {
+            startBounds: undefined,
+        }
+    },
+
+    computed: {
+        markers() {
+            if (!this.value[0]) {
+                return [];
+            }
+
+            return this.value;
+        },
+
+        center() {
+            if (!this.markers.length) {
+                return {
+                    lat: this.field.map.center.latitude,
+                    lng: this.field.map.center.longitude,
+                };
+            }
+
+            return this.bounds.getCenter();
+        },
+
+        bounds() {
+            if (this.startBounds !== undefined) {
+                return this.startBounds;
+            }
+
+            if (!this.markers.length) {
+                return null;
+            }
+
+            return this.startBounds = new L.LatLngBounds(this.markers);
+        },
+    },
+
+    methods: {
+        triggerChange() {
+            this.$emit('input', this.markers);
+        },
+        removeLastMarker() {
+            this.markers.splice(-1,1);
+            this.triggerChange();
+        },
+        createMarker(evt) {
+            this.markers.push(evt.latlng);
+            this.triggerChange();
+        },
+        clickHandler() {
+            alert('clicked');
+        },
+    },
+
+    components: {
+        LMarker,
+        LPolyline,
+    }
+}
+</script>
diff --git a/resources/js/field.js b/resources/js/field.js
index b79122e..8d7ebc3 100755
--- a/resources/js/field.js
+++ b/resources/js/field.js
@@ -6,6 +6,7 @@ Nova.booting((Vue, router) => {
     Vue.component('field-map', require('./components/FieldMap'));
     Vue.component('field-marker', require('./components/fields/Marker'));
     Vue.component('field-polyline', require('./components/fields/Polyline'));
+    Vue.component('field-polygon', require('./components/fields/Polygon'));
 
     // Config leaflet images to load images from CDN
     L.Icon.Default.imagePath = 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/images/';
diff --git a/src/Polygon.php b/src/Polygon.php
new file mode 100644
index 0000000..1676ba8
--- /dev/null
+++ b/src/Polygon.php
@@ -0,0 +1,40 @@
+<?php
+
+namespace Lassehaslev\NovaMapFields;
+
+class Polygon extends MapField
+{
+    /**
+     * Create a new field.
+     * And set default properties.
+     *
+     * @param string      $name
+     * @param string|null $attribute
+     * @param mixed|null  $resolveCallback
+     */
+    public function __construct($name, $attribute = null, $resolveCallback = null)
+    {
+        $this->help('Click on the map to create a new point. Drag a marker to change the point. When the map is selected, you can press [backspace] to remove markers.');
+
+        parent::__construct($name, $attribute = null, $resolveCallback);
+    }
+
+    /**
+     * Resolve the attribute before sending to frontend.
+     *
+     * @param mixed      $resource
+     * @param mixed|null $attribute
+     *
+     * @return array
+     */
+    public function resolveAttribute($resource, $attribute = null)
+    {
+        $value = $resource->{$attribute};
+
+        if (is_array($value)) {
+            return $value;
+        }
+
+        return json_decode($value);
+    }
+}