source: main/trunk/greenstone3/web/interfaces/default/js/map-scripts-editor.js@ 32804

Last change on this file since 32804 was 32804, checked in by ak19, 5 years ago

Previous commit additional description: Section setting up keyboard shortcuts has been shifted to using jQuery so that key mappings don't just work on Chrome but on Firefox too (and hopefully Edge, Safari, etc)
File size: 26.0 KB
Line 
1
2
3function MapEditor(id) {
4 this.id = id;
5 this.shiftKeyPressed = false;
6 this.beingDragged = false;
7 this.allowDeselect = true;
8 this.colors = ['#1E90FF', '#FF1493', '#4B0082', '#32CD32', '#FF8C00', '#000000'];
9 this.selectedColor;
10 this.colorButtons = {};
11 this.thicknessValue = 1;
12 this.opacityValue = 0.4;
13 this.overlays = [];
14 this.selectedShapes = [];
15 this.listenersArray = [];
16 this.mapsArray = [];
17 this.drawingManager;
18 this.selectedShape;
19 this.map = null;
20 this.counter = 0;
21 this.branchNum = 1;
22 this.mouseState = "up";
23 this.thicknessRangeListener = this.thicknessValue; // ????
24 this.resizable = false;
25 this.dontResize = false;
26 this.polyOptions = {
27 fillColor: '#CA4A2F',
28 strokeWeight: this.thicknessValue,
29 fillOpacity: this.opacityValue,
30 editable: true,
31 geodesic: false,
32 draggable: true
33 };
34 this.mapEditorHistory = new MapEditorHistory(this);
35}
36
37MapEditor.prototype.initMapEditorControls = function () {
38 var that = this;
39
40
41 var draggableCB = document.querySelector("input[name=draggableCB]");
42 draggableCB.addEventListener('change', function () {
43 if (this.checked) {
44 for (var i = 0; i < that.overlays.length; i++) {
45 console.log("checked");
46 that.overlays[i].draggable = false;
47 that.polyOptions.draggable = false;
48 }
49 } else {
50 for (var i = 0; i < that.overlays.length; i++) {
51 console.log("not checked");
52 that.overlays[i].draggable = true;
53 that.polyOptions.draggable = true;
54 }
55 }
56 });
57
58
59 //Update thickness
60 var thicknessSlider = document.getElementById("thicknessRange" + "-" + this.id);
61 var thicknessSliderOutput = document.getElementById("thicknessRangeVal" + "-" + this.id);
62 thicknessSliderOutput.innerHTML = ((thicknessSlider.value / 20) * 100) / 100;
63
64 thicknessSlider.oninput = function () {
65 that.shapeSpecsChangeMD();
66 thicknessSliderOutput.innerHTML = ((this.value / 20) * 100) / 100;
67 that.thicknessValue = this.value / 20;
68 that.polyOptions.strokeWeight = that.thicknessValue;
69 that.setSelectedThickness(that.thicknessValue);
70
71 }
72 //Update opacity
73 var opacitySlider = document.getElementById("colourOpacity" + "-" + this.id);
74 var opacitySliderOutput = document.getElementById("opacityRangeVal" + "-" + this.id);
75 opacitySliderOutput.innerHTML = "% " + Math.round(opacitySlider.value);
76
77 opacitySlider.oninput = function () {
78 that.shapeSpecsChangeMD();
79 opacitySliderOutput.innerHTML = "% " + Math.round(this.value * 100) / 100;
80 that.opacityValue = this.value / 100;
81 that.polyOptions.fillOpacity = that.opacityValue;
82 that.setSelectedOpacity(that.opacityValue);
83 }
84
85 document.getElementById("color-palette1" + "-" + this.id).addEventListener("mousedown", function() { that.shapeSpecsChangeMD() });
86 document.getElementById("thicknessRange" + "-" + this.id).addEventListener("mouseup", function () { that.shapeSpecsChangeMU() });
87 document.getElementById("colourOpacity" + "-" + this.id).addEventListener("mouseup", function() { that.shapeSpecsChangeMU() } );
88 document.onmousemove = function (ev) {
89 //How can I know the state of mouse from here
90 if (that.mouseState == 'down') {
91 //console.log('mouse down state')
92 }
93 if (that.mouseState == 'up') {
94 //console.log('mouse up state')
95 }
96 }
97
98 document.onmousedown = function (ev) {
99 that.mouseState = "down";
100 // console.log('Down State you can now start dragging');
101 //do not write any code here in this function
102 }
103
104 document.onmouseup = function (ev) {
105 that.mouseState = "up";
106 // console.log('up state you cannot drag now because you are not holding your mouse')
107 //do not write any code here in this function
108 }
109
110 /* TODO: WORK IN PROGRESS
111 window.onbeforeunload = function (e) {
112 var collection = gs.cgiParams.c;
113 var site_name = gs.xsltParams.site_name;
114 var documentID = this.id;
115 var metadataName = "MapOverlays";
116
117
118 //functions.getArchivesMetadata = function(collection, site, documentID, metadataName, metadataPosition, responseFunction);
119
120
121 //responseFunction = console.log()
122
123 var savedOverlays = null;
124 var enableMessage = that.overlays == savedOverlays;
125 var enableMessage = true;
126 var message = "Your confirmation message goes here.",
127 e = e || window.event;
128 // For IE and Firefox
129 if (e) {
130 if(enableMessage){
131 e.returnValue = message;
132 // For Safari
133 return message;
134 }
135 }
136 }*/
137
138}
139
140MapEditor.prototype.settingThePath = function () {
141 var that = this;
142 this.listenersArray = []
143 this.counter = 0;
144 this.branchNum = 1;
145
146 for (var i = 0; i < this.selectedShapes.length * 2; i++) {
147 for (var j = 1; j < 6; j++) {
148 var path = "//*[@id='map-" + this.id + "']/div/div/div[1]/div[3]/div/div[3]/div[" + this.branchNum + "]/div[" + j + "]/div";
149 this.listenersArray[this.counter] = this.getElementByXpath(path);
150 if (this.listenersArray[this.counter] !== (undefined || null)) {
151 this.listenersArray[this.counter].addEventListener("mousemove", function () {
152 that.resizable = true;
153 that.shapeResize();
154 });
155 this.listenersArray[this.counter].addEventListener("mouseout", function () {
156 if (this.mouseDown) {
157 that.resizable = true;
158 that.shapeResize();
159 }
160 });
161 }
162 this.counter++;
163 }
164 this.branchNum++;
165 }
166}
167
168MapEditor.prototype.shapeResize = function () {
169 if (this.mouseState == "down") {
170 if (this.selectedShapes.length > 0) {
171 if (this.resizable) {
172 if (this.dontResize == false) {
173 this.mapEditorHistory.historyOverlayPush();
174 }
175
176 }
177 }
178 }
179}
180
181MapEditor.prototype.shapeSpecsChangeMD = function () {
182 if (this.selectedShapes.length > 0) {
183 this.mapEditorHistory.historyOverlayPush();
184 }
185}
186
187MapEditor.prototype.shapeSpecsChangeMU = function () {
188 if (this.selectedShapes.length > 0) {
189 this.mapEditorHistory.presentOverlayPush();
190 }
191}
192
193MapEditor.prototype.makeColorButton = function (color) {
194 var that = this;
195
196 var button = document.createElement('span');
197 button.className = 'color-buttons1';
198 button.style.backgroundColor = color;
199 google.maps.event.addDomListener(button, 'click', function () {
200 that.selectColor(color);
201 that.setSelectedShapeColor(color);
202 that.shapeSpecsChangeMU();
203 });
204 return button;
205}
206
207MapEditor.prototype.buildColorPalette = function () {
208 var colorPalette = document.getElementById("color-palette1" + "-" + this.id);
209 for (var i = 0; i < this.colors.length; ++i) {
210 var currColor = this.colors[i];
211 var colorButton = this.makeColorButton(currColor);
212 colorPalette.appendChild(colorButton);
213 this.colorButtons[currColor] = colorButton;
214 }
215 this.selectColor(this.colors[0]);
216};
217
218MapEditor.prototype.selectColor = function (color) {
219 this.selectedColor = color;
220 for (var i = 0; i < this.colors.length; ++i) {
221 var currColor = this.colors[i];
222 this.colorButtons[currColor].style.border = currColor == color ? '2px solid #789' : '2px solid #fff';
223 }
224
225 // Retrieves the current options from the drawing manager and replaces the
226 // stroke or fill color as appropriate.
227 var polylineOptions = this.drawingManager.get('polylineOptions');
228 polylineOptions.strokeColor = color;
229 this.drawingManager.set('polylineOptions', polylineOptions);
230
231 var rectangleOptions = this.drawingManager.get('rectangleOptions');
232 rectangleOptions.fillColor = color;
233 this.drawingManager.set('rectangleOptions', rectangleOptions);
234
235 var circleOptions = this.drawingManager.get('circleOptions');
236 circleOptions.fillColor = color;
237 this.drawingManager.set('circleOptions', circleOptions);
238
239 var polygonOptions = this.drawingManager.get('polygonOptions');
240 polygonOptions.fillColor = color;
241 this.drawingManager.set('polygonOptions', polygonOptions);
242}
243
244MapEditor.prototype.initMapEditor = function () {
245 var that = this;
246
247 this.map = new google.maps.Map(document.getElementById("map-" + this.id), {
248 center: {
249 lat: -37.7891,
250 lng: 175.3180
251 },
252 zoom: 14,
253 mapId: this.id,
254 });
255 this.mapsArray.push(this.map);
256 // Add a style-selector control to the map.
257 var styleControl = document.getElementById('style-selector-control' + "-" + this.id);
258 this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(styleControl);
259
260 // Set the map's style to the initial value of the selector.
261 var styleSelector = document.getElementById('style-selector' + "-" + this.id);
262 //console.log(styleSelector);
263 //map = google.maps.Map(document.getElementById('map' +"-"+ this.id));
264 this.map.setOptions({
265 styles: styles[styleSelector.value]
266
267 });
268
269 // Apply new JSON when the user selects a different style.
270 styleSelector.addEventListener('change', function () {
271 that.map.setOptions({
272 styles: styles[styleSelector.value]
273 });
274 });
275
276 this.drawingManager = new google.maps.drawing.DrawingManager({
277 drawingMode: google.maps.drawing.OverlayType.RECTANGLE,
278 drawingControl: true,
279 drawingControlOptions: {
280 position: google.maps.ControlPosition.TOP_CENTER,
281 drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle']
282 },
283 markerOptions: {
284 draggable: true
285 },
286 circleOptions: this.polyOptions,
287 polylineOptions: this.polyOptions,
288 polygonOptions: this.polyOptions,
289 rectangleOptions: this.polyOptions,
290 });
291
292 this.drawingManager.setMap(this.map);
293
294 google.maps.event.addListener(this.drawingManager, "drawingmode_changed", function () {
295 if (that.shiftKeyPressed != true && that.drawingManager.drawingMode !== null) {
296 that.deselectAll();
297 }
298 that.settingThePath();
299
300 })
301
302 // store reference to added overlay
303 google.maps.event.addListener(this.drawingManager, 'overlaycomplete', function (e) {
304
305 that.allowDeselect = true;
306 that.mapEditorHistory.historyOverlayPush();
307 that.overlays.push(e.overlay); // store reference to added overlay
308 var newShape = e.overlay;
309 newShape.type = e.type;
310 that.mapEditorHistory.presentOverlayPush();
311
312 if (e.type !== google.maps.drawing.OverlayType.MARKER) {
313 that.addShapeListeners(newShape, e);
314 that.setSelection(newShape, e);
315 } else {
316 that.addMarkerListeners(newShape, e);
317 that.setSelection(newShape, e);
318 }
319
320 });
321
322 //Clears selection if clicked on the map when shift is not presseed
323 google.maps.event.addListener(this.map, 'click', function (e) {
324 var c = document.body.childNodes;
325 if (e.target && e.target.matches("a.classA")) {
326 console.log("Anchor element clicked!");
327 }
328 if (that.shiftKeyPressed == false) {
329 that.clearSelection();
330 that.selectedShape = null;
331 }
332 });
333
334 google.maps.event.addListener(this.map, 'mousedown', function (e) {
335 that.dontResize = true;
336 });
337
338 google.maps.event.addListener(this.map, 'mouseup', function (e) {
339 that.dontResize = false;
340 });
341
342 //Keyboard shortcuts
343 var mapAndControls = $("#map-and-controls-" + this.id);
344
345 // Shifted to using jQuery so that key mappings don't just work on Chrome but on Firefox too (and hopefully Edge, Safari, etc)
346 mapAndControls.keypress(function (event) { //mapAndControls.keydown(function (event) {
347 // https://stackoverflow.com/questions/2220196/how-to-decode-character-pressed-from-jquerys-keydowns-event-handler
348 //var keyCode = String.fromCharCode(event.keyCode); // for keyDown
349 var keyCode = String.fromCharCode(event.which);
350 //alert("Key pressed: " + keyCode);
351
352 if (event.keyCode == 'shiftKey') {
353 that.shiftKeyPressed = true;
354 }
355 else if (keyCode == 'y' && (event.ctrlKey || event.metaKey) ||
356 (keyCode == 'z' && keyCode == 'shiftKey' && (event.ctrlKey || event.metaKey))) {
357 that.mapEditorHistory.redo();
358 }
359 else if (keyCode == 'z' && (event.ctrlKey || event.metaKey)) {
360 if (that.shiftKeyPressed == false) {
361 that.mapEditorHistory.undo();
362 }
363 }
364 else if (keyCode == 'a' && (event.ctrlKey || event.metaKey)) {
365 event.preventDefault();
366 that.drawingManager.setDrawingMode(null);
367 that.selectAll();
368
369 }
370 else if (keyCode == 'd' && (event.ctrlKey || event.metaKey)) {
371 event.preventDefault();
372 that.deselectAll();
373 }
374 else if (keyCode == '0' || keyCode == '`') {
375
376 that.drawingManager.setDrawingMode(null);
377 } else if (keyCode == '1') {
378 that.drawingManager.setDrawingMode('marker');
379 } else if (keyCode == '2') {
380 that.drawingManager.setDrawingMode('circle');
381 } else if (keyCode == '3') {
382 that.drawingManager.setDrawingMode('polygon');
383 } else if (keyCode == '4') {
384 that.drawingManager.setDrawingMode('polyline');
385 } else if (keyCode == '5') {
386 that.drawingManager.setDrawingMode('rectangle');
387 } else if (keyCode == 's') {
388 that.saveToArchives();
389 } else if (keyCode == 'q') {
390 that.printHistory();
391 }
392 // console.log(keyCode);
393 });
394
395 /*
396 var mapHtml = document.getElementById("map-" + this.id);
397 var controlHtml = document.getElementById("ControlPanel-" + this.id);
398 controlHtml.addEventListener('click', function () {
399 console.log("*** ControlPanel clicked");
400 mapHtml.focus()
401 });
402 */
403
404 //Sets shift as pressed
405 mapAndControls.keydown(function (event) {
406 if (event.keyCode == 'shiftKey') {
407 that.shiftKeyPressed = true;
408
409 }
410
411 });
412
413 //Sets shift as unpressed
414 mapAndControls.keyup(function (event) {
415 if (event.keyCode == 'shiftKey') {
416 that.shiftKeyPressed = false;
417 }
418
419 });
420
421 this.buildColorPalette();
422
423
424
425
426 var collection = gs.cgiParams.c;
427 var site_name = gs.xsltParams.site_name;
428 var nodeID = this.id; // documentID, hopefully contains section ID too
429 var metaname = "GPS.mapOverlay";
430
431 // collection, site, documentID, metadataName, metadataPosition, responseFunction
432 gs.functions.getArchivesMetadata(collection, site_name, nodeID, metaname, 0, function(responseText){
433 // responseText is of type GSMetadata
434
435 // called when data has been retrieved from archives
436 var JSONString = responseText.getValue();
437 that.LOAD(JSONString);
438 //var json_overlays = ShapesUtil.overlayToJSON(this.overlays);
439 }
440 ); // TODO: responseFunction in setMeta call
441
442
443}
444
445//Deletes a vertex if clicked on it
446MapEditor.prototype.vertexAndPolyDel = function (e, newShape) {
447 var vertex = e.vertex;
448 if (e.vertex !== undefined) {
449 if (newShape.type === google.maps.drawing.OverlayType.POLYGON) {
450 var path = newShape.getPaths().getAt(e.path);
451 path.removeAt(e.vertex);
452 if (path.length < 3) {
453 newShape.setMap(null);
454 }
455 }
456 if (newShape.type === google.maps.drawing.OverlayType.POLYLINE) {
457 var path = newShape.getPath();
458 path.removeAt(e.vertex);
459 if (path.length < 2) {
460 newShape.setMap(null);
461 }
462 }
463 }
464}
465
466MapEditor.prototype.addMarkerListeners = function (newShape, e) {
467 var that = this;
468 //cLICK EVENT IF A MARKER IS CREATED
469 google.maps.event.addListener(newShape, 'click', function (e) {
470 that.setSelection(newShape, e);
471 });
472
473 google.maps.event.addListener(newShape, 'dragstart', function (e) {
474 that.beingDragged = true;
475 that.mapEditorHistory.historyOverlayPush();
476
477 });
478
479 google.maps.event.addListener(newShape, 'dragend', function () {
480 that.beingDragged = false;
481 that.mapEditorHistory.presentOverlayPush();
482 that.allowDeselect = false;
483 });
484}
485
486MapEditor.prototype.addShapeListeners = function (newShape, e) {
487 var that = this;
488 // Add an event listener that selects the newly-drawn shape when the user
489 // mouses down on it.
490 google.maps.event.addListener(newShape, 'click', function (e) {
491
492 that.vertexAndPolyDel(e, newShape);
493
494 });
495
496 google.maps.event.addListener(newShape, 'dragstart', function (e) {
497 that.allowDeselect = false;
498 that.mapEditorHistory.historyOverlayPush();
499 });
500
501 google.maps.event.addListener(newShape, 'dragend', function () {
502 that.beingDragged = false;
503 that.mapEditorHistory.presentOverlayPush();
504 that.settingThePath();
505
506 that.allowDeselect = false;
507 that.setSelection(newShape, e);
508 });
509
510 //Store information after the event ends
511 google.maps.event.addListener(newShape, 'bounds_changed', function (e) {
512 if (that.beingDragged == false) {
513 that.mapEditorHistory.presentOverlayPush();
514 }
515 });
516
517 //Add an event listener to select a shape if the mouse hovers over it
518 google.maps.event.addListener(newShape, 'mousedown', function (e) {
519 if (e.target && e.target.matches("a.classA")) {
520 console.log("Anchor element clicked!");
521 }
522 if (e.vertex !== undefined || e.edge !== undefined) {
523 that.mapEditorHistory.historyOverlayPush()
524 }
525 if (that.drawingManager.drawingMode == null) {
526 that.setSelection(newShape, e);
527 }
528 });
529
530 google.maps.event.addListener(newShape, 'mouseup', function (e) {
531 if (e.vertex !== undefined || e.edge !== undefined) {
532 that.mapEditorHistory.presentOverlayPush()
533 } else {
534 //that.setSelection(newShape, e);
535 }
536
537 });
538}
539MapEditor.prototype.clearSelection = function () {
540 if (this.selectedShape) {
541 if (this.selectedShape.type !== 'marker') {
542 this.selectedShape.setEditable(false);
543 if (this.shiftKeyPressed == false) {
544 for (var i = 0; i < this.selectedShapes.length; i++) {
545 this.selectedShapes[i].setEditable(false);
546 }
547 this.selectedShapes = [];
548 }
549 }
550 this.selectedShape = null;
551 }
552}
553
554//Set selection for the selected overlay
555MapEditor.prototype.setSelection = function (shape, e) {
556 //var that = this;
557 if (shape.type !== 'marker') {
558 if (this.shiftKeyPressed == false) {
559 if (e !== null) {
560 if (e.vertex == undefined) {
561 if (e.edge == undefined) {
562 this.clearSelection();
563 shape.setEditable(true);
564 }
565 }
566 }
567 }
568 if (this.selectedShapes.includes(shape)) {
569 if (e !== null) {
570 if (e.vertex == undefined) {
571 if (e.edge == undefined) {
572 this.allowDeselect = true;
573 this.removeFromSelectedShapes(shape);
574 }
575 }
576 }
577 } else {
578 this.allowDeselect = false;
579 shape.setEditable(true);
580 this.selectedShapes.push(shape);
581 }
582
583 //Send the values to be updated
584 var thi = shape.strokeWeight;
585 var opa = shape.fillOpacity;
586 var fCol = shape.fillColor;
587 var sCol = shape.strokeColor;
588 this.updateMenuValues(thi, opa, fCol, sCol);
589
590 } else if (shape.type == 'marker') {
591 this.clearSelection();
592 }
593 this.selectedShape = shape;
594 this.settingThePath();
595}
596
597MapEditor.prototype.removeFromSelectedShapes = function (shape) {
598 if (this.selectedShapes.includes(shape)) {
599 if (this.allowDeselect) {
600 const index = this.selectedShapes.indexOf(shape);
601 this.selectedShapes.splice(index, 1);
602 shape.setEditable(false);
603 }
604 this.allowDeselect = true;
605 }
606}
607
608//Set selected thickness
609MapEditor.prototype.setSelectedThickness = function (sWeight) {
610 if (this.selectedShapes.length > 0) {
611 for (var i = 0; i < this.selectedShapes.length; i++) {
612 this.selectedShapes[i].set('strokeWeight', sWeight);
613 }
614 }
615}
616
617//Set selected opacity
618MapEditor.prototype.setSelectedOpacity = function (fOpacity) {
619
620 if (this.selectedShapes.length > 0) {
621 for (var i = 0; i < this.selectedShapes.length; i++) {
622 this.selectedShapes[i].set('fillOpacity', fOpacity);
623 }
624 }
625}
626
627//set selected fill colour
628MapEditor.prototype.setSelectedShapeColor = function (color) {
629 if (this.selectedShapes.length > 0) {
630 for (var i = 0; i < this.selectedShapes.length; i++) {
631 this.selectedShapes[i].set('fillColor', color);
632 this.selectedShapes[i].set('strokeColor', color);
633 }
634 }
635}
636
637MapEditor.prototype.getElementByXpath = function (path) {
638 return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
639}
640
641MapEditor.prototype.updateMenuValues = function (thi, opa, fCol, sCol) {
642 //Update thickness slider and value on the settings menu
643 var thicknessSliderOutput = document.getElementById("thicknessRangeVal" + "-" + this.id);
644 thicknessSliderOutput.innerHTML = thi;
645 document.getElementById("thicknessRange" + "-" + this.id).value = Math.round((thi * 20) * 100) / 100;
646
647 //Update the opacity slider and value on the settings menu
648 var opacitySliderOutput = document.getElementById("opacityRangeVal" + "-" + this.id);
649 opacitySliderOutput.innerHTML = "% " + Math.round(opa * 100) * 100 / 100;
650 document.getElementById("colourOpacity" + "-" + this.id).value = (opa * 100) * 100 / 100;
651
652 if (this.drawingManager.drawingMode == null) {
653 this.selectColor(fCol);
654 }
655}
656MapEditor.prototype.selectAll = function () {
657 this.shiftKeyPressed = true;
658 var e = new Object();
659 e.vertex = undefined;
660 this.selectedShapes = [];
661 for (var i = 0; i < this.overlays.length; i++) {
662 this.setSelection(this.overlays[i], e);
663 }
664 this.shiftKeyPressed = false;
665}
666MapEditor.prototype.deselectAll = function () {
667 for (var i = 0; i < this.selectedShapes.length; i++) {
668 this.selectedShapes[i].setEditable(false);
669 }
670 this.selectedShapes = [];
671}
672
673
674MapEditor.prototype.saveToArchives = function () {
675 alert("Save pressed");
676
677 var json_overlays = ShapesUtil.overlayToJSON(this.overlays);
678 var collection = gs.cgiParams.c;
679 var site_name = gs.xsltParams.site_name;
680 var nodeID = this.id; // documentID, hopefully contains section ID too
681 var metaname = "GPS.mapOverlay";
682
683 // collection, site, documentID, metadataName, metadataPosition, metadataValue, prevMetadataValue, metamode, responseFunction
684 gs.functions.setArchivesMetadata(collection, site_name, nodeID, metaname, 0, JSON.stringify(json_overlays), null, "override", function(){
685 alert("SAVED");
686 }
687 );
688}
689
690
691MapEditor.prototype.printHistory = function () {
692 console.log("prev", this.mapEditorHistory.prevOverlays);
693 console.log("present ", this.mapEditorHistory.presentOverlays);
694 console.log("undone ", this.mapEditorHistory.undoneOverlays);
695 //console.log(this.selectedShapes);
696 var collection = gs.cgiParams.c;
697 console.log(collection);
698 console.log(this.overlays);
699 var json_overlays = ShapesUtil.overlayToJSON(this.overlays);
700
701 console.log("JSON overlay:\n" + JSON.stringify(json_overlays));
702
703 /*
704 this.LOAD('[{"strokeColor":"#32CD32","strokeWeight":1,"fillColor":"#32CD32","fillOpacity":0.4,"bounds":{"north":-37.78190971734986,"south":-37.787200748043546,"east":175.33850727431195,"west":175.3324991261186},"type":"rectangle"},{"strokeColor":"#FF8C00","strokeWeight":1,"fillColor":"#FF8C00","fillOpacity":0.4,"bounds":{"north":-37.78550494611987,"south":-37.791270513892385,"east":175.33764896742719,"west":175.3284650837602},"type":"rectangle"},{"strokeColor":"#000000","strokeWeight":1,"fillColor":"#000000","fillOpacity":0.4,"bounds":{"north":-37.793034009483115,"south":-37.79723909833998,"east":175.3225427662553,"west":175.31498966566937},"type":"rectangle"},{"strokeColor":"#4B0082","strokeWeight":5,"fillColor":"#4B0082","fillOpacity":0.62,"bounds":{"north":-37.78991395018121,"south":-37.79737474238258,"east":175.30846653334515,"west":175.2955060993852},"type":"rectangle"},{"strokeColor":"#000000","strokeWeight":1,"fillColor":"#000000","fillOpacity":0.4,"bounds":{"north":-37.79961283312584,"south":-37.80700483276894,"east":175.3281217610063,"west":175.31241474501508},"type":"rectangle"},{"geodesic":false,"strokeColor":"#FF8C00","strokeWeight":1,"path":[{"lat":-37.77824647420985,"lng":175.31842289320844},{"lat":-37.792627052698045,"lng":175.32425938002484},{"lat":-37.79079571942646,"lng":175.31061230055707},{"lat":-37.78597977458094,"lng":175.2910429035844},{"lat":-37.78055298179892,"lng":175.29413280836957},{"lat":-37.77912838266847,"lng":175.3034883534135},{"lat":-37.77668614885508,"lng":175.30537662856},{"lat":-37.78218106147165,"lng":175.3079515492143}],"type":"polygon","fillColor":"#FF8C00","fillOpacity":0.4},{"strokeColor":"#FF8C00","strokeWeight":1,"fillColor":"#FF8C00","fillOpacity":0.4,"center":{"lat":-37.7737689305036,"lng":175.33549693998134},"radius":811.9768269278177,"type":"circle"},{"position":{"lat":-37.77431167751719,"lng":175.3143825906161},"type":"marker"},{"position":{"lat":-37.782452404597294,"lng":175.3337803262118},"type":"marker"},{"geodesic":false,"strokeColor":"#4B0082","strokeOpacity":1,"strokeWeight":5,"path":[{"lat":-37.759203725669785,"lng":175.33033457820488},{"lat":-37.771688357854,"lng":175.35162058894707},{"lat":-37.79339574144619,"lng":175.3646668535955},{"lat":-37.81536797134891,"lng":175.35436717097832},{"lat":-37.819978597019684,"lng":175.32861796443535},{"lat":-37.81970739171663,"lng":175.2929123980291},{"lat":-37.806688365360884,"lng":175.26235667293145},{"lat":-37.795294834173575,"lng":175.25789347713066},{"lat":-37.78389954558992,"lng":175.2541169268377},{"lat":-37.77033143470697,"lng":175.26132670466973},{"lat":-37.760018005052494,"lng":175.27746287410332},{"lat":-37.75757514001425,"lng":175.31076518123223},{"lat":-37.759203725669785,"lng":175.33033457820488}],"type":"polyline"}]');
705 */
706
707}
708
709// to be called after reading back in stored JSON from archives meta
710MapEditor.prototype.LOAD = function (json_str) {
711 this.mapEditorHistory.historyOverlayPush();
712
713 var map_editor = Object.values(gsmap_store)[0];
714 var new_overlays = ShapesUtil.JSONToOverlays(json_str);
715 for (var i=0; i<map_editor.overlays.length; i++) {
716 map_editor.overlays[i].setMap(null);
717 }
718
719 map_editor.overlays = new_overlays;
720
721 for (var i=0; i<map_editor.overlays.length; i++) {
722 map_editor.overlays[i].setMap(map_editor.map);
723 }
724
725 this.mapEditorHistory.presentOverlayPush();
726
727}
728
729MapEditor.prototype.deleteSelectedShapes = function () {
730 //console.log("this fires");
731 this.mapEditorHistory.historyOverlayPush();
732 for (var i = 0; i < this.selectedShapes.length; i++) {
733 this.selectedShapes[i].setMap(null);
734
735 if (this.overlays.includes(this.selectedShapes[i])) {
736 const index = this.overlays.indexOf(this.selectedShapes[i]);
737 this.overlays.splice(index, 1);
738 this.selectedShapes[i].setEditable(false);
739 }
740 }
741 this.selectedShapes = [];
742 //console.log("this fires");
743 this.mapEditorHistory.presentOverlayPush();
744}
745
746MapEditor.prototype.draggableState = function () {
747
748 var draggableCB = document.querySelector("input[name=draggableCB]");
749 draggableCB.addEventListener('change', function () {
750 if (this.checked) {
751 this.overlays.draggable = false;
752 } else {
753 this.overlays.draggable = false;
754 }
755 });
756}
757
758MapEditor.prototype.deleteAllShapes = function () {
759 //console.log("deleteAllShape() this.id = " + this.id);
760 this.mapEditorHistory.historyOverlayPush();
761 for (var i = 0; i < this.overlays.length; i++) {
762 this.overlays[i].setMap(null);
763 }
764 this.overlays = [];
765 this.mapEditorHistory.presentOverlayPush();
766}
767
Note: See TracBrowser for help on using the repository browser.