source: gs3-extensions/map-editor/DrawingManager/checkpt22/index.js@ 32709

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

Jump-start to the map-editor extension, which takes account of the 21 previous check-point versions.
File size: 16.9 KB
Line 
1var debug = false;
2var redoPressed = false;
3var undoPressed = 0;
4var shiftKeyPressed = false;
5var dragFired = false;
6var selectionPass = true;
7var chosen;
8
9var overlays_copy_obj = {};
10
11var prevEdge = {
12 east: "",
13 north: "",
14 south: "",
15 west: ""
16}
17var nextEdge = {
18 east: "",
19 north: "",
20 south: "",
21 west: ""
22}
23var prevVertex = {
24 lat: "",
25 lng: ""
26};
27var nextVertex = {
28 lat: "",
29 lng: ""
30};
31var deselectedLog = []
32var selectedShapesLog = [];
33var prevShape = [];
34var nextShape = [];
35var prevLog = [];
36var nextLog = [];
37
38var prevOverlays = [];
39
40
41var dragged = 0;
42var colors = ['#1E90FF', '#FF1493', '#4B0082', '#32CD32', '#FF8C00', '#000000'];
43var selectedColor;
44var colorButtons = {};
45var thicknessValue = 1;
46var opacityValue = 0.4;
47var polyOptions = {
48 fillColor: '#CA4A2F',
49 strokeWeight: thicknessValue,
50 fillOpacity: opacityValue,
51 editable: true,
52 draggable: true,
53 geodesic: false,
54};
55
56var overlays = [];
57var drawingManager;
58var selectedShape;
59var selectedShapes = [];
60
61var map = null;
62
63
64$(document).ready(function() {
65 //Update thickness
66 var thicknessSlider = document.getElementById("thicknessRange");
67 var thicknessSliderOutput = document.getElementById("thicknessRangeVal");
68 thicknessSliderOutput.innerHTML = thicknessSlider.value / 20;
69
70 thicknessSlider.oninput = function () {
71 thicknessSliderOutput.innerHTML = this.value / 20;
72 thicknessValue = this.value / 20;
73 polyOptions.strokeWeight = thicknessValue;
74 setSelectedThickness(thicknessValue);
75 }
76 //Update opacity
77 var opacitySlider = document.getElementById("colourOpacity");
78 var opacitySliderOutput = document.getElementById("opacityRangeVal");
79 opacitySliderOutput.innerHTML = "% " + Math.round(opacitySlider.value);
80
81 opacitySlider.oninput = function () {
82 opacityValue = this.value / 100;
83 polyOptions.fillOpacity = opacityValue;
84 opacitySliderOutput = opacityValue;
85 opacityRangeVal.innerHTML = "% " + Math.round(opacitySliderOutput * 100);
86 setSelectedOpacity(opacityValue);
87 }
88});
89
90
91
92////////////////////////////////////////////////////////////////////////////////////////
93function makeColorButton(color) {
94 var button = document.createElement('span');
95 button.className = 'color-buttons1';
96 button.style.backgroundColor = color;
97 google.maps.event.addDomListener(button, 'click', function () {
98 selectColor(color);
99 setSelectedShapeColor(color);
100 });
101 return button;
102}
103function buildColorPalette() {
104 var colorPalette = document.getElementById('color-palette1');
105 for (var i = 0; i < colors.length; ++i) {
106 var currColor = colors[i];
107 var colorButton = makeColorButton(currColor);
108 colorPalette.appendChild(colorButton);
109 colorButtons[currColor] = colorButton;
110 }
111 selectColor(colors[0]);
112};
113function selectColor(color) {
114 selectedColor = color;
115 for (var i = 0; i < colors.length; ++i) {
116 var currColor = colors[i];
117 colorButtons[currColor].style.border = currColor == color ? '2px solid #789' : '2px solid #fff';
118 }
119
120 // Retrieves the current options from the drawing manager and replaces the
121 // stroke or fill color as appropriate.
122 var polylineOptions = drawingManager.get('polylineOptions');
123 polylineOptions.strokeColor = color;
124 drawingManager.set('polylineOptions', polylineOptions);
125
126 var rectangleOptions = drawingManager.get('rectangleOptions');
127 rectangleOptions.fillColor = color;
128 drawingManager.set('rectangleOptions', rectangleOptions);
129
130 var circleOptions = drawingManager.get('circleOptions');
131 circleOptions.fillColor = color;
132 drawingManager.set('circleOptions', circleOptions);
133
134 var polygonOptions = drawingManager.get('polygonOptions');
135 polygonOptions.fillColor = color;
136 drawingManager.set('polygonOptions', polygonOptions);
137}
138
139function initMap() {
140
141 map = new google.maps.Map(document.getElementById('map'), {
142 center: {
143 lat: -34.397,
144 lng: 150.644
145 },
146 zoom: 2,
147 //mapTypeId: 'map'
148
149 });
150
151 drawingManager = new google.maps.drawing.DrawingManager({
152 drawingMode: google.maps.drawing.OverlayType.RECTANGLE,
153 drawingControl: true,
154 drawingControlOptions: {
155 position: google.maps.ControlPosition.TOP_CENTER,
156 drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle']
157 },
158 markerOptions: {
159 draggable: true
160 },
161 circleOptions: polyOptions,
162 polylineOptions: polyOptions,
163 polygonOptions: polyOptions,
164 rectangleOptions: polyOptions,
165 });
166
167 drawingManager.setMap(map);
168
169 //overlays.push(event.overlay); // store reference to added overlay
170 google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) {
171
172
173 overlays.push(e.overlay); // store reference to added overlay
174 var newShape = e.overlay;
175 newShape.type = e.type;
176
177 newShapeCreated(e);
178
179 historyOverlayPush();
180
181 if (e.type !== google.maps.drawing.OverlayType.MARKER) {
182
183 // Switch back to non-drawing mode after drawing a shape.
184 //drawingManager.setDrawingMode(null);
185
186 // Add an event listener that selects the newly-drawn shape when the user
187 // mouses down on it.
188 google.maps.event.addListener(newShape, 'click', function (e) {
189
190 vertexAndPolyDel(e, newShape);
191 dragFired = false;
192 return;
193
194 });
195
196 //Stores past event information
197 google.maps.event.addListener(newShape, 'dragstart', function () {
198 dragStartFunction(e, newShape);
199 });
200
201 //Store information after the event ends
202 google.maps.event.addListener(newShape, 'dragend', function () {
203 historyOverlayPush();
204 dragEndFunction(e, newShape);
205 });
206
207 //Add an event listener to select a shape if the mouse hovers over it
208 google.maps.event.addListener(newShape, 'mousedown', function (e) {
209 if (drawingManager.drawingMode == null) {
210 setSelection(newShape, e);
211 dragFired = false;
212 }
213 });
214 setSelection(newShape, e);
215 } else {
216 //cLICK EVENT IF A MARKER IS CREATED
217 google.maps.event.addListener(newShape, 'click', function (e) {
218 setSelection(newShape, e);
219 });
220 setSelection(newShape, e);
221 }
222 });
223
224 //Deletes a vertex if clicked on it
225 function vertexAndPolyDel(e, newShape) {
226 var vertex = e.vertex;
227
228 if (e.vertex !== undefined) {
229 if (newShape.type === google.maps.drawing.OverlayType.POLYGON) {
230 var path = newShape.getPaths().getAt(e.path);
231 path.removeAt(e.vertex);
232 if (path.length < 3) {
233 newShape.setMap(null);
234 }
235 }
236 if (newShape.type === google.maps.drawing.OverlayType.POLYLINE) {
237 var path = newShape.getPath();
238 path.removeAt(e.vertex);
239 if (path.length < 2) {
240 newShape.setMap(null);
241 }
242 }
243 }
244 }
245
246 function clearSelection() {
247 if (selectedShape) {
248 if (selectedShape.type !== 'marker') {
249 selectedShape.setEditable(false);
250 if (shiftKeyPressed == false) {
251 for (var i = 0; i < selectedShapes.length; i++) {
252 selectedShapes[i].setEditable(false);
253 }
254 selectedShapes = [];
255 }
256 }
257 selectedShape = null;
258 }
259 }
260 var i = 0;
261
262 //Set selection for the selected overlay
263 function setSelection(shape, e) {
264 if (shape.type !== 'marker') {
265 if (shiftKeyPressed == false) {
266 if (e.vertex == undefined) {
267 clearSelection();
268 shape.setEditable(true);
269 }
270 }
271 if (selectedShapes.includes(shape)) {
272
273 //shape.setEditable(false);
274 const index = selectedShapes.indexOf(shape);
275 selectedShapes.splice(index, 1);
276 } else {
277 shape.setEditable(true);
278 selectedShapes.push(shape);
279 }
280
281 if (debug) {
282 console.log(" len = " + selectedShapes.length);
283 }
284 //Send the values to be updated
285 var thi = shape.strokeWeight;
286 var opa = shape.fillOpacity;
287 var fCol = shape.fillColor;
288 var sCol = shape.strokeColor;
289 updateMenuValues(thi, opa, fCol, sCol);
290
291 } else if (shape.type == 'marker') {
292 clearSelection();
293 }
294
295 selectedShape = shape;
296
297 if (selectionPass == true) {
298
299 selectedShapesLog.push("selected", shiftKeyPressed, selectedShape);
300 nextLog.push(selectedShapesLog);
301 chosen = selectedShape;
302 selectionPass = false
303 }
304
305 var lastItem = nextLog[nextLog.length - 1];
306
307 if (chosen !== selectedShape) {
308 if (dragFired == false) {
309 selectedShapesLog.push("selected", shiftKeyPressed, selectedShape)
310 updateHistory(selectedShapesLog);
311 chosen = selectedShape;
312 }
313 }
314
315 //console.log(prevLog);
316 selectedShapesLog = [];
317 }
318
319 //Clears selection if clicked on the map when shift is not presseed
320 google.maps.event.addListener(map, 'click', function () {
321 if (shiftKeyPressed == false) {
322 clearSelection();
323 if (chosen !== null) {
324 deselectedLog.push("deselected")
325 updateHistory(deselectedLog);
326 deselectedLog = [];
327 chosen = null;
328
329 }
330 }
331 });
332
333 //Setting drawing tool option
334 document.addEventListener('keydown', function () {
335 //if (event.code == 'KeyX' && (event.ctrlKey || event.metaKey))
336 if (event.code == 'Digit0' || event.code == 'Numpad0' || event.code == 'Backquote') {
337 //clearSelection();
338 drawingManager.setDrawingMode(null);
339 } else if (event.code == 'Digit1') {
340 drawingManager.setDrawingMode('marker');
341 } else if (event.code == 'Digit2') {
342 drawingManager.setDrawingMode('circle');
343 } else if (event.code == 'Digit3') {
344 drawingManager.setDrawingMode('polygon');
345 } else if (event.code == 'Digit4') {
346 drawingManager.setDrawingMode('polyline');
347 } else if (event.code == 'Digit5') {
348 drawingManager.setDrawingMode('rectangle');
349 } else if (event.code == 'KeyQ') {
350 polygonGetPath();
351 }
352 // console.log(event.code);
353 });
354
355 //Sets shift as pressed
356 document.addEventListener('keydown', function () {
357 if (event.code == 'ShiftLeft' || event.code == 'ShiftRight') {
358 shiftKeyPressed = true;
359
360 }
361
362 });
363
364 //Sets shift as unpressed
365 document.addEventListener('keyup', function () {
366 if (event.code == 'ShiftLeft' || event.code == 'ShiftRight') {
367 shiftKeyPressed = false;
368 }
369
370 });
371
372 buildColorPalette();
373}
374//Set selected thickness
375function setSelectedThickness(sWeight) {
376 if (selectedShape) {
377 //selectedShape.set('strokeWeight', sWeight)
378 }
379 if (selectedShapes !== 0) {
380 for (var i = 0; i < selectedShapes.length; i++) {
381 selectedShapes[i].set('strokeWeight', sWeight);
382 //console.log(selectedShapes.length);
383 }
384 }
385}
386
387//Set selected opacity
388function setSelectedOpacity(fOpacity) {
389 if (selectedShape) {
390 //selectedShape.set('fillOpacity', fOpacity)
391 }
392 if (selectedShapes !== 0) {
393 for (var i = 0; i < selectedShapes.length; i++) {
394 selectedShapes[i].set('fillOpacity', fOpacity);
395 }
396 }
397}
398
399//set selected fill colour
400function setSelectedShapeColor(color) {
401 if (selectedShapes !== 0) {
402 for (var i = 0; i < selectedShapes.length; i++) {
403 selectedShapes[i].set('fillColor', color);
404 selectedShapes[i].set('strokeColor', color);
405 }
406 }
407}
408
409function updateMenuValues(thi, opa, fCol, sCol) {
410
411 //Update thickness slider and value on the settings menu
412 var thicknessSliderOutput = document.getElementById("thicknessRangeVal");
413 thicknessSliderOutput.innerHTML = thi;
414 document.getElementById("thicknessRange").value = thi * 20;
415
416 //Update the opacity slider and value on the settings menu
417 var opacitySliderOutput = document.getElementById("opacityRangeVal");
418 opacitySliderOutput.innerHTML = "% " + opa * 100;
419 document.getElementById("colourOpacity").value = opa * 100;
420
421 if (drawingManager.drawingMode == null) {
422 selectColor(fCol);
423 }
424}
425
426function undoMovement() {
427 console.log("*** undoMovement called");
428 for (var i = 0; i < overlays.length; i++) {
429 overlays[i].setMap(null);
430
431 }
432
433 overlays = [];
434
435 var prev_overlay = prevOverlays.pop();
436
437 for (var i = 0; i < prev_overlay.length; i++) {
438 overlays[i] = prev_overlay[i];
439 overlays[i].setMap(map);
440 }
441
442}
443
444function undoMovementDragSelection() {
445 var lastItem = prevLog[prevLog.length - 1];
446
447 //If history array is not empty
448 if (prevLog.length !== 0) {
449 if (lastItem[0] = "dragStart") {
450 //If the array has more than one index (polygons and polylines)
451 if (lastItem[1] == ("polygon") || lastItem[1] == ("polyline")) {
452 nextLog.push(lastItem);
453 selectedShape.setPath(lastItem[2]);
454
455 //If the array has only one index(rectangles and circles)
456 } else {
457 nextLog.push(lastItem);
458 selectedShape.setBounds(lastItem[2]);
459 }
460 } else if (lastItem[0] = "selected") {}
461 else if (lastItem[0] = "deselected") {}
462 undoPressed = false;
463 undoPressed = 0;
464 prevLog.pop();
465 }
466
467}
468
469function redoMovement() {
470
471 var lastItem = nextLog[nextLog.length - 1];
472 var secondToLastItem = nextLog[nextLog.length - 2];
473 var correctIndex;
474
475 if (undoPressed >= 1) {
476 correctIndex = lastItem;
477 } else {
478 correctIndex = secondToLastItem;
479 undoPressed++;
480 }
481
482 //If the history log is not empty
483 if (nextLog.length > 1) {
484 prevLog.push(lastItem);
485
486 //If undo has been pressed
487
488 if (lastItem[1] == ("polygon") || lastItem[1] == ("polyline")) {
489 selectedShape.setPath(correctIndex[2]);
490 } else {
491 selectedShape.setBounds(correctIndex[2]);
492 }
493
494 undoPressed = false;
495 redoPressed = true;
496 nextLog.pop();
497 }
498}
499
500function dragStartFunction(e, selectedShape) {
501 var newShape = e.overlay;
502 newShape.type = e.type;
503 if (selectedShape) {
504 var polyG = newShape.type === google.maps.drawing.OverlayType.POLYLINE;
505 var polyL = newShape.type === google.maps.drawing.OverlayType.POLYGON;
506
507 if (polyL || polyG) {
508 var latLngi = []
509 var lati,
510 lngi;
511 for (var i = 0; i < selectedShape.getPath().length; i++) {
512 lati = selectedShape.getPath().getAt(i).lat();
513 lngi = selectedShape.getPath().getAt(i).lng();
514 //console.log("Vertex number",i, "'s latitude is", lati, "and longitude is", lngi);
515 prevVertex = {
516 lat: lati,
517 lng: lngi
518 };
519 latLngi.push(prevVertex);
520 }
521 prevShape.push("dragStart", selectedShape.type, latLngi);
522 } else {
523 prevEdge = {
524 east: selectedShape.getBounds().ea.l,
525 north: selectedShape.getBounds().la.l,
526 south: selectedShape.getBounds().la.j,
527 west: selectedShape.getBounds().ea.j
528 }
529 prevShape.push("dragStart", selectedShape.type, prevEdge);
530 }
531
532 var lastItem = nextLog[nextLog.length - 1];
533 if (lastItem[0] !== "dragEnd") {
534 prevLog.push(nextLog[nextLog.length - 1]);
535 }
536
537 prevLog.push(prevShape);
538 prevShape = [];
539 nextLog = [];
540 chosen = selectedShape;
541 dragFired = true;
542 }
543}
544
545function dragEndFunction(e, newShape) {
546
547 var newShape = e.overlay;
548 newShape.type = e.type;
549 if (selectedShape) {
550 var polyG = newShape.type === google.maps.drawing.OverlayType.POLYLINE;
551 var polyL = newShape.type === google.maps.drawing.OverlayType.POLYGON;
552
553 if (polyL || polyG) {
554
555 var latLngi = []
556 var lati,
557 lngi;
558
559 for (var i = 0; i < selectedShape.getPath().length; i++) {
560 lati = selectedShape.getPath().getAt(i).lat();
561 lngi = selectedShape.getPath().getAt(i).lng();
562 nextVertex = {
563 lat: lati,
564 lng: lngi
565 };
566 latLngi.push(nextVertex);
567 }
568 nextShape.push("dragEnd", selectedShape.type, latLngi);
569 } else {
570
571 nextEdge.east = selectedShape.getBounds().ea.l;
572 nextEdge.north = selectedShape.getBounds().la.l;
573 nextEdge.south = selectedShape.getBounds().la.j;
574 nextEdge.west = selectedShape.getBounds().ea.j;
575
576 nextShape.push("dragEnd", selectedShape.type, nextEdge);
577 }
578 }
579 for (var i = 0; i < prevLog.length; i++) {
580 if (prevLog[i][0] == "dragEnd") {
581 const index = i;
582 prevLog.splice(index, 1);
583 }
584 }
585 nextLog.push(nextShape);
586 nextShape = [];
587 chosen = selectedShape;
588}
589
590function updateHistory(eventArray) {
591 var lastItem = nextLog[nextLog.length - 1];
592 if (nextLog.length > 0) {
593 prevLog.push(lastItem);
594 }
595 nextLog = [];
596 nextLog.push(eventArray);
597 eventArray = [];
598 dragFired = false;
599
600}
601
602function newShapeCreated(e) {
603 //nextLog
604}
605
606function polygonGetPath() {
607 console.log(nextLog);
608 console.log(prevLog);
609
610}
611
612function deleteSelectedShape() {
613 for (var i = 0; i < selectedShapes.length; i++) {
614 selectedShapes[i].setMap(null);
615 }
616 selectedShapes = [];
617}
618
619function deleteAllShape() {
620 for (var i = 0; i < overlays.length; i++) {
621 overlays[i].setMap(null);
622
623 }
624 overlays = [];
625}
626
627function historyOverlayPush()
628{
629 //console.log("historyOverlayPush()");
630 //var overlays_copy = [];
631 //for (var i = 0; i<overlays.length; i++) {
632 // overlays_copy[i] = new google.maps.Rectangle(overlays[i]);
633 //}
634 //var overlay_copy = JSON.parse(JSON.stringify(overlays));
635 //prevOverlays.push(overlays_copy);
636 //
637 //prevOverlays.push(overlays.slice()); // shallow copy !!!
638
639 console.log("historyOverlayPush()");
640 var overlays_copy = [];
641 for (var i = 0; i<overlays.length; i++) {
642
643 overlays_copy[i] = overlays[i];
644
645 }
646 overlays_copy_obj = overlays_copy;
647 console.log(overlays_copy_obj);
648 console.log(overlays);
649 console.log(prevOverlays);
650 //console.log(JSON.stringify(overlays_copy_obj));
651
652 var overlay_copy = overlays;
653 prevOverlays.push(overlays_copy_obj);
654
655 //prevOverlays.push(overlays.slice()); // shallow copy !!!
656
657
658}
Note: See TracBrowser for help on using the repository browser.