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

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

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