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

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

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