Skip to content

Commit 339b26c

Browse files
cheesegritscheesegrits
committed
First cut at making drawing overlays editable. Problem with click events.
1 parent af53d15 commit 339b26c

File tree

6 files changed

+142
-24
lines changed

6 files changed

+142
-24
lines changed

‎.idea/blade.xml‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/cheesegrits/filament-google-maps/filament-google-geocomplete.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/cheesegrits/filament-google-maps/filament-google-maps.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/mix-manifest.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
2-
"/cheesegrits/filament-google-maps/filament-google-maps.js": "/cheesegrits/filament-google-maps/filament-google-maps.js?id=88f06ff14a765eea72d97f84440dfb08",
3-
"/cheesegrits/filament-google-maps/filament-google-geocomplete.js": "/cheesegrits/filament-google-maps/filament-google-geocomplete.js?id=cd8fe786af4bda7aca6eda17e4754ce1",
2+
"/cheesegrits/filament-google-maps/filament-google-maps.js": "/cheesegrits/filament-google-maps/filament-google-maps.js?id=886c944bf44a516ea68b1b3830333b16",
3+
"/cheesegrits/filament-google-maps/filament-google-geocomplete.js": "/cheesegrits/filament-google-maps/filament-google-geocomplete.js?id=5d52cfd69c0e21b001a597235937535a",
44
"/cheesegrits/filament-google-maps/filament-google-maps-widget.js": "/cheesegrits/filament-google-maps/filament-google-maps-widget.js?id=e376c9c6da02692bec1b65587e069cc2",
55
"/cheesegrits/filament-google-maps/filament-google-maps.css": "/cheesegrits/filament-google-maps/filament-google-maps.css?id=a68ba88f31be3de468ee58f07c4ee0ee"
66
}

‎resources/js/filament-google-maps.js‎

Lines changed: 137 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -63,15 +63,19 @@ window.filamentGoogleMaps = ($wire, config) => {
6363
'%C': ["country"],
6464
'%c': ["country"],
6565
},
66+
drawingManager: null,
6667
overlays: [],
6768
dataLayer: null,
6869
polyOptions: {
6970
strokeWeight: 0,
7071
fillOpacity: 0.45,
71-
draggable: false,
72-
editable: false,
72+
draggable: true,
73+
editable: true,
74+
clickable: true,
75+
clickable: true,
7376
zIndex: 1,
7477
},
78+
selectedShape: null,
7579

7680
loadGMaps: function () {
7781
if (!document.getElementById('filament-google-maps-google-maps-js')) {
@@ -233,8 +237,8 @@ window.filamentGoogleMaps = ($wire, config) => {
233237
}
234238

235239
if (this.config.drawingControl) {
236-
const drawingManager = new google.maps.drawing.DrawingManager({
237-
drawingMode: google.maps.drawing.OverlayType.MARKER,
240+
this.drawingManager = new google.maps.drawing.DrawingManager({
241+
drawingMode: null,
238242
drawingControl: true,
239243
drawingControlOptions: {
240244
position: google.maps.ControlPosition.TOP_CENTER,
@@ -246,24 +250,44 @@ window.filamentGoogleMaps = ($wire, config) => {
246250
...(this.config.drawingModes.rectangle ? [google.maps.drawing.OverlayType.RECTANGLE] : []),
247251
],
248252
},
253+
markerOptions: {
254+
draggable: true
255+
},
256+
polylineOptions: {
257+
draggable: true,
258+
editable: true
259+
},
260+
rectangleOptions: this.polyOptions,
261+
circleOptions: this.polyOptions,
262+
polygonOptions: this.polyOptions,
249263
});
250264

251-
drawingManager.setMap(this.map);
265+
this.drawingManager.setMap(this.map);
266+
google.maps.event.addListener(this.drawingManager, 'drawingmode_changed', () => {
267+
this.clearSelection()
268+
});
269+
google.maps.event.addListener(this.map, 'click', () => {
270+
this.clearSelection()
271+
});
252272

253273
if (this.config.drawingField) {
254-
this.dataLayer = new google.maps.Data();
274+
// this.dataLayer = new google.maps.Data();
255275

256276
let geoJSON = $wire.get(this.config.drawingField);
257277
geoJSON && this.loadFeaturesCollection(JSON.parse(geoJSON));
258278

259-
google.maps.event.addListener(drawingManager, 'overlaycomplete', (event) => {
279+
google.maps.event.addListener(this.drawingManager, 'overlaycomplete', (event) => {
260280
event.overlay.type = event.type;
261281
event.overlay.feature = this.instanceFeature(event.overlay);
262282
this.overlays.push(event.overlay);
263283

264-
this.dataLayer.toGeoJson((obj) => {
265-
$wire.set(this.config.drawingField, JSON.stringify(obj));
266-
});
284+
if (event.type != google.maps.drawing.OverlayType.MARKER) {
285+
// Switch back to non-drawing mode after drawing a shape.
286+
this.drawingManager.setDrawingMode(null);
287+
this.setSelection(event.overlay);
288+
}
289+
290+
this.drawingModified();
267291
});
268292
}
269293
}
@@ -411,7 +435,7 @@ window.filamentGoogleMaps = ($wire, config) => {
411435

412436
instanceFeature: function (overlay) {
413437
var calculatedOverlay = this.calculateGeometry(overlay);
414-
return this.dataLayer.add(new google.maps.Data.Feature({
438+
return this.map.data.add(new google.maps.Data.Feature({
415439
id: this.guid(),
416440
geometry: calculatedOverlay.geometry,
417441
properties: Object.assign({
@@ -427,7 +451,7 @@ window.filamentGoogleMaps = ($wire, config) => {
427451
geometry: new google.maps.Data.Point(overlay.getPosition())
428452
};
429453
case google.maps.drawing.OverlayType.RECTANGLE:
430-
var b = overlay.getBounds(),
454+
let b = overlay.getBounds(),
431455
p = [b.getSouthWest(), {
432456
lat: b.getSouthWest().lat(),
433457
lng: b.getNorthEast().lng()
@@ -457,12 +481,12 @@ window.filamentGoogleMaps = ($wire, config) => {
457481
},
458482

459483
transformToMVCArray: function (a) {
460-
var clone = new google.maps.MVCArray();
484+
let clone = new google.maps.MVCArray();
461485

462486
function transform($a, parent) {
463487
if ($a.length == 2 && (!Array.isArray($a[0]) && !Array.isArray($a[1])))
464488
parent.push(new google.maps.LatLng($a[1], $a[0]));
465-
for (var a = 0; a < $a.length; a++) {
489+
for (let a = 0; a < $a.length; a++) {
466490
if (!Array.isArray($a[a])) continue;
467491
transform($a[a], (parent) ? ($a[a].length == 2 && (!Array.isArray($a[a][0]) && !Array.isArray($a[a][1]))) ? parent : parent.getAt(parent.push(new google.maps.MVCArray()) - 1) : clone.getAt(clone.push(new google.maps.MVCArray()) - 1));
468492
}
@@ -479,11 +503,13 @@ window.filamentGoogleMaps = ($wire, config) => {
479503

480504
loadFeaturesCollection: function (geoJSON) {
481505
if (Array.isArray(geoJSON.features) && geoJSON.features.length > 0) {
482-
var bounds = new google.maps.LatLngBounds();
483-
var overlay = null;
484-
for (var f = 0; f < geoJSON.features.length; f++) {
506+
let bounds = new google.maps.LatLngBounds();
507+
let overlay = null;
508+
for (let f = 0; f < geoJSON.features.length; f++) {
485509
overlay = this.instanceOverlay(geoJSON.features[f]);
486510
overlay.feature = this.instanceFeature(overlay);
511+
this.addOverlayEvents(overlay);
512+
487513
// overlay.feature.getGeometry().forEachLatLng(function (latlng) {
488514
// bounds.extend(latlng);
489515
// });
@@ -494,6 +520,85 @@ window.filamentGoogleMaps = ($wire, config) => {
494520
}
495521
},
496522

523+
addOverlayEvents: function (overlay) {
524+
switch (overlay.type) {
525+
case google.maps.drawing.OverlayType.POLYLINE:
526+
google.maps.event.addListener(overlay.getPath(), 'set_at', () => {
527+
if (!overlay.drag) {
528+
overlay.feature.setGeometry(this.calculateGeometry(overlay, true));
529+
this.drawingModified();
530+
}
531+
});
532+
google.maps.event.addListener(overlay.getPath(), 'insert_at', () => {
533+
overlay.feature.setGeometry(this.calculateGeometry(overlay, true));
534+
this.drawingModified();
535+
});
536+
google.maps.event.addListener(overlay.getPath(), 'remove_at', () => {
537+
overlay.feature.setGeometry(this.calculateGeometry(overlay, true));
538+
this.drawingModified();
539+
});
540+
break;
541+
case google.maps.drawing.OverlayType.POLYGON:
542+
const paths = overlay.getPaths();
543+
for (let p = 0; p < paths.getLength(); p++)
544+
for (let sp = 0; sp < paths.getAt(p).getLength(); sp++) {
545+
google.maps.event.addListener(paths.getAt(p), 'set_at', () => {
546+
if (!overlay.drag) {
547+
overlay.feature.setGeometry(this.calculateGeometry(overlay, true));
548+
this.drawingModified();
549+
}
550+
});
551+
google.maps.event.addListener(paths.getAt(p), 'insert_at', () => {
552+
overlay.feature.setGeometry(this.calculateGeometry(overlay, true));
553+
this.drawingModified();
554+
});
555+
google.maps.event.addListener(paths.getAt(p), 'remove_at', () => {
556+
overlay.feature.setGeometry(this.calculateGeometry(overlay, true));
557+
this.drawingModified();
558+
});
559+
}
560+
break;
561+
case google.maps.drawing.OverlayType.RECTANGLE:
562+
google.maps.event.addListener(overlay, 'bounds_changed', () => {
563+
if (!overlay.drag) {
564+
overlay.feature.setGeometry(this.calculateGeometry(overlay, true));
565+
this.drawingModified();
566+
}
567+
});
568+
break;
569+
case google.maps.drawing.OverlayType.CIRCLE:
570+
google.maps.event.addListener(overlay, 'radius_changed', () => {
571+
overlay.feature.setProperty('radius', this.calculateGeometry(overlay).properties.radius);
572+
this.drawingModified();
573+
});
574+
break;
575+
}
576+
if (overlay.type !== google.maps.drawing.OverlayType.MARKER) {
577+
let self = this;
578+
google.maps.event.addListener(overlay, 'click', function (event) {
579+
self.setSelection(this);
580+
});
581+
}
582+
google.maps.event.addListener(overlay, 'dragstart', () => {
583+
overlay.drag = true;
584+
});
585+
google.maps.event.addListener(overlay, 'mouseup', () => {
586+
if (overlay.drag) {
587+
overlay.drag = false;
588+
overlay.feature.setGeometry(this.calculateGeometry(overlay, true));
589+
this.drawingModified();
590+
}
591+
});
592+
},
593+
594+
drawingModified: function () {
595+
if (this.config.drawingField) {
596+
this.map.data.toGeoJson((obj) => {
597+
$wire.set(this.config.drawingField, JSON.stringify(obj));
598+
});
599+
}
600+
},
601+
497602
guid: function () {
498603
function s4() {
499604
return Math.floor((1 + Math.random()) * 0x10000)
@@ -503,6 +608,20 @@ window.filamentGoogleMaps = ($wire, config) => {
503608

504609
return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
505610
s4() + '-' + s4() + s4() + s4();
506-
}
611+
},
612+
613+
setSelection: function (shape) {
614+
this.clearSelection();
615+
this.selectedShape = shape;
616+
shape.setEditable(true);
617+
// selectColor(shape.get('fillColor') || shape.get('strokeColor'));
618+
},
619+
620+
clearSelection: function () {
621+
if (this.selectedShape) {
622+
this.selectedShape.setEditable(false);
623+
this.selectedShape = null;
624+
}
625+
},
507626
}
508627
}

‎src/Fields/Map.php‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -422,8 +422,6 @@ public function getMapControls(): string
422422
$controls = $this->evaluate($this->mapControls);
423423

424424
return json_encode(array_merge($this->controls, $controls), JSON_THROW_ON_ERROR);
425-
426-
return json_encode(array_merge($this->controls, $controls), JSON_THROW_ON_ERROR);
427425
}
428426

429427
public function layers(Closure|array $layers): static

0 commit comments

Comments
 (0)