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

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

Discovered bug when testing sectioned documents like solr-demo/lucene-demo coll. Old map-editor LOAD() function always loaded saved metadata of subsections into the map editor of the topsection. That's not what we want. We want each (sub)section's stored GPS map data to be loaded into that (sub)section's map editor.
File size: 23.6 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, nodeID);
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, nodeID) {
691 this.mapEditorHistory.historyOverlayPush();
692
693
694 // This seems to convert the map_store object into an array and forces array index access, instead of convenient property access using nodeID
695 //Object.values(gsmap_store)[0]; // Always gets top level section's map-editor, not what we want.
696
697 // Get the map editor for the nodeID, as we're asked to load that editor
698 var map_editor = gsmap_store["map-"+nodeID];
699
700 var new_overlays = ShapesUtil.JSONToOverlays(json_str);
701 for (var i=0; i<map_editor.overlays.length; i++) {
702 map_editor.overlays[i].setMap(null);
703 }
704
705 map_editor.overlays = new_overlays;
706
707 for (var i=0; i<map_editor.overlays.length; i++) {
708 map_editor.overlays[i].setMap(map_editor.map);
709 }
710
711 this.mapEditorHistory.presentOverlayPush();
712
713
714 //When the overlays are loaded from the metadate, they cannot be selected when clicked on them.
715 //One fix for this issue is to delete all the sapes present then bring them back by 'undo', then they can be normally selected
716 this.deleteAllShapes();
717 this.mapEditorHistory.undo();
718 this.mapEditorHistory.prevOverlays = [];
719}
720
721MapEditor.prototype.deleteSelectedShapes = function () {
722 if(this.selectedShapes.length !== 0) {
723 this.mapEditorHistory.historyOverlayPush();
724 for (var i = 0; i < this.selectedShapes.length; i++) {
725 this.selectedShapes[i].setMap(null);
726
727 if (this.overlays.includes(this.selectedShapes[i])) {
728 const index = this.overlays.indexOf(this.selectedShapes[i]);
729 this.overlays.splice(index, 1);
730// this.selectedShapes[i].setEditable(false);
731 }
732 }
733 this.selectedShapes = [];
734 this.mapEditorHistory.presentOverlayPush();
735 }
736}
737
738MapEditor.prototype.draggableState = function () {
739
740 var draggableCB = document.querySelector("input[name=draggableCB]");
741 draggableCB.addEventListener('change', function () {
742 if (this.checked) {
743 this.overlays.draggable = false;
744 } else {
745 this.overlays.draggable = false;
746 }
747 });
748}
749
750MapEditor.prototype.deleteAllShapes = function () {
751 if(this.overlays.length !== 0) {
752 //console.log("deleteAllShape() this.id = " + this.id);
753 this.mapEditorHistory.historyOverlayPush();
754 for (var i = 0; i < this.overlays.length; i++) {
755 this.overlays[i].setMap(null);
756 }
757 this.overlays = [];
758 this.mapEditorHistory.presentOverlayPush();
759 }
760}
Note: See TracBrowser for help on using the repository browser.