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

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

Zeddy stuff 1. saving shapes on map on S press; 2. reloading on map load (init); 3. Zeddy fixed other stuff.
File size: 25.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.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 mapAndControls.keypress(function (event) { //mapAndControls.keydown(function (event) {
346 // https://stackoverflow.com/questions/2220196/how-to-decode-character-pressed-from-jquerys-keydowns-event-handler
347 //var keyCode = String.fromCharCode(event.keyCode); // for keyDown
348 var keyCode = String.fromCharCode(event.which);
349 //alert("Key pressed: " + keyCode);
350
351 if (event.keyCode == 'shiftKey') {
352 that.shiftKeyPressed = true;
353 }
354 else if (keyCode == 'y' && (event.ctrlKey || event.metaKey) ||
355 (keyCode == 'z' && keyCode == 'shiftKey' && (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 else if (keyCode == 'a' && (event.ctrlKey || event.metaKey)) {
364 event.preventDefault();
365 that.drawingManager.setDrawingMode(null);
366 that.selectAll();
367
368 }
369 else if (keyCode == 'd' && (event.ctrlKey || event.metaKey)) {
370 event.preventDefault();
371 that.deselectAll();
372 }
373 else if (keyCode == '0' || keyCode == '`') {
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 var mapHtml = document.getElementById("map-" + this.id);
396 var controlHtml = document.getElementById("ControlPanel-" + this.id);
397 controlHtml.addEventListener('click', function () {
398 console.log("*** ControlPanel clicked");
399 mapHtml.focus()
400 });
401 */
402
403 //Sets shift as pressed
404 mapAndControls.keydown(function (event) {
405 if (event.keyCode == 'shiftKey') {
406 that.shiftKeyPressed = true;
407
408 }
409
410 });
411
412 //Sets shift as unpressed
413 mapAndControls.keyup(function (event) {
414 if (event.keyCode == 'shiftKey') {
415 that.shiftKeyPressed = false;
416 }
417
418 });
419
420 this.buildColorPalette();
421
422
423
424
425 var collection = gs.cgiParams.c;
426 var site_name = gs.xsltParams.site_name;
427 var nodeID = this.id; // documentID, hopefully contains section ID too
428 var metaname = "GPS.mapOverlay";
429
430 // collection, site, documentID, metadataName, metadataPosition, responseFunction
431 gs.functions.getArchivesMetadata(collection, site_name, nodeID, metaname, 0, function(responseText){
432 // responseText is of type GSMetadata
433
434 // called when data has been retrieved from archives
435 var JSONString = responseText.getValue();
436 that.LOAD(JSONString);
437 //var json_overlays = ShapesUtil.overlayToJSON(this.overlays);
438 }
439 ); // TODO: responseFunction in setMeta call
440
441
442}
443
444//Deletes a vertex if clicked on it
445MapEditor.prototype.vertexAndPolyDel = function (e, newShape) {
446 var vertex = e.vertex;
447 if (e.vertex !== undefined) {
448 if (newShape.type === google.maps.drawing.OverlayType.POLYGON) {
449 var path = newShape.getPaths().getAt(e.path);
450 path.removeAt(e.vertex);
451 if (path.length < 3) {
452 newShape.setMap(null);
453 }
454 }
455 if (newShape.type === google.maps.drawing.OverlayType.POLYLINE) {
456 var path = newShape.getPath();
457 path.removeAt(e.vertex);
458 if (path.length < 2) {
459 newShape.setMap(null);
460 }
461 }
462 }
463}
464
465MapEditor.prototype.addMarkerListeners = function (newShape, e) {
466 var that = this;
467 //cLICK EVENT IF A MARKER IS CREATED
468 google.maps.event.addListener(newShape, 'click', function (e) {
469 that.setSelection(newShape, e);
470 });
471
472 google.maps.event.addListener(newShape, 'dragstart', function (e) {
473 that.beingDragged = true;
474 that.mapEditorHistory.historyOverlayPush();
475
476 });
477
478 google.maps.event.addListener(newShape, 'dragend', function () {
479 that.beingDragged = false;
480 that.mapEditorHistory.presentOverlayPush();
481 that.allowDeselect = false;
482 });
483}
484
485MapEditor.prototype.addShapeListeners = function (newShape, e) {
486 var that = this;
487 // Add an event listener that selects the newly-drawn shape when the user
488 // mouses down on it.
489 google.maps.event.addListener(newShape, 'click', function (e) {
490
491 that.vertexAndPolyDel(e, newShape);
492
493 });
494
495 google.maps.event.addListener(newShape, 'dragstart', function (e) {
496 that.allowDeselect = false;
497 that.mapEditorHistory.historyOverlayPush();
498 });
499
500 google.maps.event.addListener(newShape, 'dragend', function () {
501 that.beingDragged = false;
502 that.mapEditorHistory.presentOverlayPush();
503 that.settingThePath();
504
505 that.allowDeselect = false;
506 that.setSelection(newShape, e);
507 });
508
509 //Store information after the event ends
510 google.maps.event.addListener(newShape, 'bounds_changed', function (e) {
511 if (that.beingDragged == false) {
512 that.mapEditorHistory.presentOverlayPush();
513 }
514 });
515
516 //Add an event listener to select a shape if the mouse hovers over it
517 google.maps.event.addListener(newShape, 'mousedown', function (e) {
518 if (e.target && e.target.matches("a.classA")) {
519 console.log("Anchor element clicked!");
520 }
521 if (e.vertex !== undefined || e.edge !== undefined) {
522 that.mapEditorHistory.historyOverlayPush()
523 }
524 if (that.drawingManager.drawingMode == null) {
525 that.setSelection(newShape, e);
526 }
527 });
528
529 google.maps.event.addListener(newShape, 'mouseup', function (e) {
530 if (e.vertex !== undefined || e.edge !== undefined) {
531 that.mapEditorHistory.presentOverlayPush()
532 } else {
533 //that.setSelection(newShape, e);
534 }
535
536 });
537}
538MapEditor.prototype.clearSelection = function () {
539 if (this.selectedShape) {
540 if (this.selectedShape.type !== 'marker') {
541 this.selectedShape.setEditable(false);
542 if (this.shiftKeyPressed == false) {
543 for (var i = 0; i < this.selectedShapes.length; i++) {
544 this.selectedShapes[i].setEditable(false);
545 }
546 this.selectedShapes = [];
547 }
548 }
549 this.selectedShape = null;
550 }
551}
552
553//Set selection for the selected overlay
554MapEditor.prototype.setSelection = function (shape, e) {
555 //var that = this;
556 if (shape.type !== 'marker') {
557 if (this.shiftKeyPressed == false) {
558 if (e !== null) {
559 if (e.vertex == undefined) {
560 if (e.edge == undefined) {
561 this.clearSelection();
562 shape.setEditable(true);
563 }
564 }
565 }
566 }
567 if (this.selectedShapes.includes(shape)) {
568 if (e !== null) {
569 if (e.vertex == undefined) {
570 if (e.edge == undefined) {
571 this.allowDeselect = true;
572 this.removeFromSelectedShapes(shape);
573 }
574 }
575 }
576 } else {
577 this.allowDeselect = false;
578 shape.setEditable(true);
579 this.selectedShapes.push(shape);
580 }
581
582 //Send the values to be updated
583 var thi = shape.strokeWeight;
584 var opa = shape.fillOpacity;
585 var fCol = shape.fillColor;
586 var sCol = shape.strokeColor;
587 this.updateMenuValues(thi, opa, fCol, sCol);
588
589 } else if (shape.type == 'marker') {
590 this.clearSelection();
591 }
592 this.selectedShape = shape;
593 this.settingThePath();
594}
595
596MapEditor.prototype.removeFromSelectedShapes = function (shape) {
597 if (this.selectedShapes.includes(shape)) {
598 if (this.allowDeselect) {
599 const index = this.selectedShapes.indexOf(shape);
600 this.selectedShapes.splice(index, 1);
601 shape.setEditable(false);
602 }
603 this.allowDeselect = true;
604 }
605}
606
607//Set selected thickness
608MapEditor.prototype.setSelectedThickness = function (sWeight) {
609 if (this.selectedShapes.length > 0) {
610 for (var i = 0; i < this.selectedShapes.length; i++) {
611 this.selectedShapes[i].set('strokeWeight', sWeight);
612 }
613 }
614}
615
616//Set selected opacity
617MapEditor.prototype.setSelectedOpacity = function (fOpacity) {
618
619 if (this.selectedShapes.length > 0) {
620 for (var i = 0; i < this.selectedShapes.length; i++) {
621 this.selectedShapes[i].set('fillOpacity', fOpacity);
622 }
623 }
624}
625
626//set selected fill colour
627MapEditor.prototype.setSelectedShapeColor = function (color) {
628 if (this.selectedShapes.length > 0) {
629 for (var i = 0; i < this.selectedShapes.length; i++) {
630 this.selectedShapes[i].set('fillColor', color);
631 this.selectedShapes[i].set('strokeColor', color);
632 }
633 }
634}
635
636MapEditor.prototype.getElementByXpath = function (path) {
637 return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
638}
639
640MapEditor.prototype.updateMenuValues = function (thi, opa, fCol, sCol) {
641 //Update thickness slider and value on the settings menu
642 var thicknessSliderOutput = document.getElementById("thicknessRangeVal" + "-" + this.id);
643 thicknessSliderOutput.innerHTML = thi;
644 document.getElementById("thicknessRange" + "-" + this.id).value = Math.round((thi * 20) * 100) / 100;
645
646 //Update the opacity slider and value on the settings menu
647 var opacitySliderOutput = document.getElementById("opacityRangeVal" + "-" + this.id);
648 opacitySliderOutput.innerHTML = "% " + Math.round(opa * 100) * 100 / 100;
649 document.getElementById("colourOpacity" + "-" + this.id).value = (opa * 100) * 100 / 100;
650
651 if (this.drawingManager.drawingMode == null) {
652 this.selectColor(fCol);
653 }
654}
655MapEditor.prototype.selectAll = function () {
656 this.shiftKeyPressed = true;
657 var e = new Object();
658 e.vertex = undefined;
659 this.selectedShapes = [];
660 for (var i = 0; i < this.overlays.length; i++) {
661 this.setSelection(this.overlays[i], e);
662 }
663 this.shiftKeyPressed = false;
664}
665MapEditor.prototype.deselectAll = function () {
666 for (var i = 0; i < this.selectedShapes.length; i++) {
667 this.selectedShapes[i].setEditable(false);
668 }
669 this.selectedShapes = [];
670}
671
672
673MapEditor.prototype.saveToArchives = function () {
674 alert("Save pressed");
675
676 var json_overlays = ShapesUtil.overlayToJSON(this.overlays);
677 var collection = gs.cgiParams.c;
678 var site_name = gs.xsltParams.site_name;
679 var nodeID = this.id; // documentID, hopefully contains section ID too
680 var metaname = "GPS.mapOverlay";
681
682 // collection, site, documentID, metadataName, metadataPosition, metadataValue, prevMetadataValue, metamode, responseFunction
683 gs.functions.setArchivesMetadata(collection, site_name, nodeID, metaname, 0, JSON.stringify(json_overlays), null, "override", function(){
684 alert("SAVED");
685 }
686 );
687}
688
689
690MapEditor.prototype.printHistory = function () {
691 console.log("prev", this.mapEditorHistory.prevOverlays);
692 console.log("present ", this.mapEditorHistory.presentOverlays);
693 console.log("undone ", this.mapEditorHistory.undoneOverlays);
694 //console.log(this.selectedShapes);
695 var collection = gs.cgiParams.c;
696 console.log(collection);
697 console.log(this.overlays);
698 var json_overlays = ShapesUtil.overlayToJSON(this.overlays);
699
700 console.log("JSON overlay:\n" + JSON.stringify(json_overlays));
701
702 /*
703 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"}]');
704 */
705
706}
707
708// to be called after reading back in stored JSON from archives meta
709MapEditor.prototype.LOAD = function (json_str) {
710 this.mapEditorHistory.historyOverlayPush();
711
712 var map_editor = Object.values(gsmap_store)[0];
713 var new_overlays = ShapesUtil.JSONToOverlays(json_str);
714 for (var i=0; i<map_editor.overlays.length; i++) {
715 map_editor.overlays[i].setMap(null);
716 }
717
718 map_editor.overlays = new_overlays;
719
720 for (var i=0; i<map_editor.overlays.length; i++) {
721 map_editor.overlays[i].setMap(map_editor.map);
722 }
723
724 this.mapEditorHistory.presentOverlayPush();
725
726}
727
728MapEditor.prototype.deleteSelectedShapes = function () {
729 //console.log("this fires");
730 this.mapEditorHistory.historyOverlayPush();
731 for (var i = 0; i < this.selectedShapes.length; i++) {
732 this.selectedShapes[i].setMap(null);
733
734 if (this.overlays.includes(this.selectedShapes[i])) {
735 const index = this.overlays.indexOf(this.selectedShapes[i]);
736 this.overlays.splice(index, 1);
737 this.selectedShapes[i].setEditable(false);
738 }
739 }
740 this.selectedShapes = [];
741 //console.log("this fires");
742 this.mapEditorHistory.presentOverlayPush();
743}
744
745MapEditor.prototype.draggableState = function () {
746
747 var draggableCB = document.querySelector("input[name=draggableCB]");
748 draggableCB.addEventListener('change', function () {
749 if (this.checked) {
750 this.overlays.draggable = false;
751 } else {
752 this.overlays.draggable = false;
753 }
754 });
755}
756
757MapEditor.prototype.deleteAllShapes = function () {
758 //console.log("deleteAllShape() this.id = " + this.id);
759 this.mapEditorHistory.historyOverlayPush();
760 for (var i = 0; i < this.overlays.length; i++) {
761 this.overlays[i].setMap(null);
762 }
763 this.overlays = [];
764 this.mapEditorHistory.presentOverlayPush();
765}
Note: See TracBrowser for help on using the repository browser.