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

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

Final version before merging with GLI
File size: 19.0 KB
Line 
1var debug = false;
2var shiftKeyPressed = false;
3var beingDragged = false;
4var resizeEntry = false;
5var allowDeselect = true;
6var colors = ['#1E90FF', '#FF1493', '#4B0082', '#32CD32', '#FF8C00', '#000000'];
7var selectedColor;
8var colorButtons = {};
9var thicknessValue = 1;
10var opacityValue = 0.4;
11var draggableState = true
12var overlays = [];
13var entryType = [];
14var drawingManager;
15var selectedShape;
16var selectedShapes = [];
17var map = null;
18var dragS, dragN;
19var dsNorth, dsSouth, dsEast, dsWest;
20var gaj, gal, maj, mal;
21var listenersArray = [];
22var counter = 0;
23var branchNum = 1;
24var mouseState = "up";
25var thicknessRangeListener = thicknessValue;
26var resizable = false;
27var dontResize = false;
28var polyOptions = {
29
30 fillColor: '#CA4A2F',
31 strokeWeight: thicknessValue,
32 fillOpacity: opacityValue,
33 editable: true,
34 draggable: draggableState,
35 geodesic: false
36};
37
38$(function () {
39 //change draggable
40 var draggableCB = document.querySelector("input[name=draggableCB]");
41 draggableCB.addEventListener('change', function () {
42 if (this.checked) {
43 draggableState = false;
44 for (var i = 0; i < overlays.length; i++) {
45 overlays[i].draggable = draggableState;
46 polyOptions.draggable = draggableState;
47 console.log("false");
48 }
49 //console.log(overlays[i].draggable);
50 } else {
51 draggableState = true;
52 for (var i = 0; i < overlays.length; i++) {
53 overlays[i].draggable = draggableState;
54 polyOptions.draggable = draggableState;
55 console.log("true");
56 }
57 }
58 });
59
60 //Update thickness
61 var thicknessSlider = document.getElementById("thicknessRange");
62 var thicknessSliderOutput = document.getElementById("thicknessRangeVal");
63 thicknessSliderOutput.innerHTML = thicknessSlider.value / 20;
64 thicknessSlider.oninput = function () {
65 shapeSpecsChangeMD();
66 thicknessSliderOutput.innerHTML = this.value / 20;
67 thicknessValue = this.value / 20;
68 polyOptions.strokeWeight = thicknessValue;
69 setSelectedThickness(thicknessValue);
70
71 }
72 //Update opacity
73 var opacitySlider = document.getElementById("colourOpacity");
74 var opacitySliderOutput = document.getElementById("opacityRangeVal");
75 opacitySliderOutput.innerHTML = "% " + Math.round(opacitySlider.value);
76
77 opacitySlider.oninput = function () {
78 shapeSpecsChangeMD();
79 opacityValue = this.value / 100;
80 polyOptions.fillOpacity = opacityValue;
81 opacitySliderOutput = opacityValue;
82 opacityRangeVal.innerHTML = "% " + Math.round(opacitySliderOutput * 100);
83 setSelectedOpacity(opacityValue);
84 }
85
86 document.getElementById("color-palette1").addEventListener("mousedown", shapeSpecsChangeMD);
87 document.getElementById("thicknessRange").addEventListener("mouseup", shapeSpecsChangeMU);
88 document.getElementById("colourOpacity").addEventListener("mouseup", shapeSpecsChangeMU);
89 document.onmousemove = mouseMove;
90 document.onmousedown = mouseDown;
91 document.onmouseup = mouseUp;
92
93});
94
95
96function settingThePath() {
97 listenersArray = []
98 counter = 0;
99 branchNum = 1;
100
101 for (var i = 0; i < selectedShapes.length * 2; i++) {
102 for (var j = 1; j < 5; j++) {
103 var path = "//*[@id='map']/div/div/div[1]/div[3]/div/div[3]/div[" + branchNum + "]/div[" + j + "]/div";
104 listenersArray[counter] = getElementByXpath(path);
105 console.log(listenersArray[counter]);
106 if (listenersArray[counter] !== (undefined || null)) {
107 listenersArray[counter].addEventListener("mousemove", function () {
108 resizable = true;
109 shapeResize();
110 });
111 listenersArray[counter].addEventListener("mouseout", function () {
112 if (mouseDown) {
113 resizable = true;
114 shapeResize();
115 }
116 });
117 }
118 counter++;
119 }
120 branchNum++;
121 }
122}
123
124
125
126function shapeResize() {
127 if (mouseState == "down") {
128 if (selectedShapes.length > 0) {
129 if (resizable) {
130 if(dontResize == false){
131 historyOverlayPush();
132 }
133
134 }
135 }
136 }
137}
138
139function shapeSpecsChangeMD() {
140
141 if (selectedShapes.length > 0) {
142 historyOverlayPush();
143 }
144}
145
146function shapeSpecsChangeMU() {
147 if (selectedShapes.length > 0) {
148 //console.log("this fires");
149 presentOverlayPush();
150 }
151}
152
153function makeColorButton(color) {
154 var button = document.createElement('span');
155 button.className = 'color-buttons1';
156 button.style.backgroundColor = color;
157 google.maps.event.addDomListener(button, 'click', function () {
158 selectColor(color);
159 setSelectedShapeColor(color);
160 shapeSpecsChangeMU();
161 });
162 return button;
163}
164function buildColorPalette() {
165 var colorPalette = document.getElementById('color-palette1');
166 //var para = document.createElement("p");
167 //var node = document.createTextNode("This is new.");
168 //para.appendChild(node);
169 //colorPalette.appendChild(para);
170
171 for (var i = 0; i < colors.length; ++i) {
172 var currColor = colors[i];
173 var colorButton = makeColorButton(currColor);
174 colorPalette.appendChild(colorButton);
175 colorButtons[currColor] = colorButton;
176 }
177 selectColor(colors[0]);
178};
179function selectColor(color) {
180 selectedColor = color;
181 for (var i = 0; i < colors.length; ++i) {
182 var currColor = colors[i];
183 colorButtons[currColor].style.border = currColor == color ? '2px solid #789' : '2px solid #fff';
184 }
185
186 // Retrieves the current options from the drawing manager and replaces the
187 // stroke or fill color as appropriate.
188 var polylineOptions = drawingManager.get('polylineOptions');
189 polylineOptions.strokeColor = color;
190 drawingManager.set('polylineOptions', polylineOptions);
191
192 var rectangleOptions = drawingManager.get('rectangleOptions');
193 rectangleOptions.fillColor = color;
194 drawingManager.set('rectangleOptions', rectangleOptions);
195
196 var circleOptions = drawingManager.get('circleOptions');
197 circleOptions.fillColor = color;
198 drawingManager.set('circleOptions', circleOptions);
199
200 var polygonOptions = drawingManager.get('polygonOptions');
201 polygonOptions.fillColor = color;
202 drawingManager.set('polygonOptions', polygonOptions);
203}
204
205function initMap() {
206
207 map = new google.maps.Map(document.getElementById('map'), {
208 center: {
209 lat: -37.7891,
210 lng: 175.3180
211 },
212 zoom: 14,
213 });
214
215 // Add a style-selector control to the map.
216 var styleControl = document.getElementById('style-selector-control');
217 map.controls[google.maps.ControlPosition.TOP_LEFT].push(styleControl);
218
219 // Set the map's style to the initial value of the selector.
220 var styleSelector = document.getElementById('style-selector');
221 map.setOptions({
222 styles: styles[styleSelector.value]
223 });
224
225 // Apply new JSON when the user selects a different style.
226 styleSelector.addEventListener('change', function () {
227 map.setOptions({
228 styles: styles[styleSelector.value]
229 });
230 });
231
232 drawingManager = new google.maps.drawing.DrawingManager({
233 drawingMode: google.maps.drawing.OverlayType.RECTANGLE,
234 drawingControl: true,
235 drawingControlOptions: {
236 position: google.maps.ControlPosition.TOP_CENTER,
237 drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle']
238 },
239 markerOptions: {
240 draggable: draggableState
241 },
242 circleOptions: polyOptions,
243 polylineOptions: polyOptions,
244 polygonOptions: polyOptions,
245 rectangleOptions: polyOptions,
246 });
247
248 drawingManager.setMap(map);
249
250 google.maps.event.addListener(drawingManager, "drawingmode_changed", function () {
251 if(shiftKeyPressed != true && drawingManager.drawingMode !== null){
252 deselectAll();
253 }
254 settingThePath();
255
256 })
257
258 // store reference to added overlay
259 google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) {
260
261 allowDeselect = true;
262
263 //console.log(e);
264 historyOverlayPush();
265
266 overlays.push(e.overlay); // store reference to added overlay
267 var newShape = e.overlay;
268 newShape.type = e.type;
269 //console.log("this fires");
270 presentOverlayPush();
271
272 if (e.type !== google.maps.drawing.OverlayType.MARKER) {
273 addShapeListeners(newShape, e);
274 setSelection(newShape, e);
275 } else {
276
277 addMarkerListeners(newShape, e);
278 setSelection(newShape, e);
279 }
280 });
281
282 //Clears selection if clicked on the map when shift is not presseed
283 google.maps.event.addListener(map, 'click', function (e) {
284 var c = document.body.childNodes;
285 if (e.target && e.target.matches("a.classA")) {
286 console.log("Anchor element clicked!");
287 }
288 if (shiftKeyPressed == false) {
289 clearSelection();
290 selectedShape = null;
291 }
292 });
293
294 google.maps.event.addListener(map, 'mousedown', function (e) {
295 dontResize = true;
296 });
297
298 google.maps.event.addListener(map, 'mouseup', function (e) {
299 dontResize = false;
300 });
301
302 //Keyboard shortcuts
303 document.addEventListener('keydown', function () {
304 if (event.code == 'KeyY' && (event.ctrlKey || event.metaKey) || (event.code == 'KeyZ' && event.code == 'ShiftLeft' && (event.ctrlKey || event.metaKey))) {
305 redo();
306 }
307 if (event.code == 'KeyZ' && (event.ctrlKey || event.metaKey)) {
308 if (shiftKeyPressed == false) {
309 undo();
310 }
311 }
312 if (event.code == 'KeyA' && (event.ctrlKey || event.metaKey)) {
313 event.preventDefault();
314 drawingManager.setDrawingMode(null);
315 selectAll();
316
317 }
318 if (event.code == 'KeyD' && (event.ctrlKey || event.metaKey)) {
319 event.preventDefault();
320 deselectAll();
321 }
322 if (event.code == 'Digit0' || event.code == 'Numpad0' || event.code == 'Backquote') {
323
324 drawingManager.setDrawingMode(null);
325 } else if (event.code == 'Digit1') {
326 drawingManager.setDrawingMode('marker');
327 } else if (event.code == 'Digit2') {
328 drawingManager.setDrawingMode('circle');
329 } else if (event.code == 'Digit3') {
330 drawingManager.setDrawingMode('polygon');
331 } else if (event.code == 'Digit4') {
332 drawingManager.setDrawingMode('polyline');
333 } else if (event.code == 'Digit5') {
334 drawingManager.setDrawingMode('rectangle');
335 } else if (event.code == 'KeyQ') {
336 printHistory();
337 }
338 // console.log(event.code);
339 });
340
341 //Sets shift as pressed
342 document.addEventListener('keydown', function () {
343 if (event.code == 'ShiftLeft' || event.code == 'ShiftRight') {
344 shiftKeyPressed = true;
345
346 }
347
348 });
349
350 //Sets shift as unpressed
351 document.addEventListener('keyup', function () {
352 if (event.code == 'ShiftLeft' || event.code == 'ShiftRight') {
353 shiftKeyPressed = false;
354 }
355
356 });
357
358 buildColorPalette();
359}
360
361//Deletes a vertex if clicked on it
362function vertexAndPolyDel(e, newShape) {
363 var vertex = e.vertex;
364 //console.log(e)
365 if (e.vertex !== undefined) {
366 //console.log("this fires");
367 if (newShape.type === google.maps.drawing.OverlayType.POLYGON) {
368 var path = newShape.getPaths().getAt(e.path);
369 path.removeAt(e.vertex);
370 if (path.length < 3) {
371 newShape.setMap(null);
372 }
373 }
374 if (newShape.type === google.maps.drawing.OverlayType.POLYLINE) {
375 var path = newShape.getPath();
376 path.removeAt(e.vertex);
377 if (path.length < 2) {
378 newShape.setMap(null);
379 }
380 } //console.log("this fires");
381 }
382}
383
384function addMarkerListeners(newShape, e) {
385 //cLICK EVENT IF A MARKER IS CREATED
386 google.maps.event.addListener(newShape, 'click', function (e) {
387 setSelection(newShape, e);
388 });
389
390 google.maps.event.addListener(newShape, 'dragstart', function (e) {
391 beingDragged = true;
392 //console.log("this fires");
393 historyOverlayPush();
394
395 });
396
397 google.maps.event.addListener(newShape, 'dragend', function () {
398 beingDragged = false;
399 //console.log("this fires");
400 presentOverlayPush();
401 allowDeselect = false;
402 });
403}
404
405function applyDrag(newShape) {
406 for (var i = 0; i < selectedShapes.length; i++) {
407 //mal = 0;
408 //maj = 0;
409 //gal = 0;
410 //gaj = 0;
411
412 //mal = selectedShapes[i].bounds.ma.l - newShape.bounds.ma.l;
413 //maj = selectedShapes[i].bounds.ma.j - newShape.bounds.ma.j;
414 //gal = selectedShapes[i].bounds.ga.l - newShape.bounds.ga.l;
415 //gaj = selectedShapes[i].bounds.ga.j - newShape.bounds.ga.j;
416
417 mal = newShape.bounds.ma.l - dsNorth;
418 maj = newShape.bounds.ma.j - dsSouth;
419 gal = newShape.bounds.ga.l - dsEast;
420 gaj = newShape.bounds.ga.j - dsWest;
421
422 var north = selectedShapes[i].bounds.ma.l;
423 var south = selectedShapes[i].bounds.ma.j;
424 var east = selectedShapes[i].bounds.ga.l + gal;
425 var west = selectedShapes[i].bounds.ga.j + gaj;
426 if (!isNaN(north) && !isNaN(south) && !isNaN(west) && !isNaN(east)) {
427 var NE = new google.maps.LatLng(north, east);
428 var SW = new google.maps.LatLng(south, west);
429 var newRect = new google.maps.LatLngBounds(SW, NE);
430 selectedShapes[i].setBounds(newRect);
431 }
432 }
433}
434
435function addShapeListeners(newShape, e) {
436 // Add an event listener that selects the newly-drawn shape when the user
437 // mouses down on it.
438 google.maps.event.addListener(newShape, 'click', function (e) {
439
440 vertexAndPolyDel(e, newShape);
441
442 });
443
444 google.maps.event.addListener(newShape, 'dragstart', function (e) {
445
446
447 allowDeselect = false;
448 console.log("hey");
449 historyOverlayPush();
450 });
451
452
453
454 google.maps.event.addListener(newShape, 'dragend', function () {
455 beingDragged = false;
456 presentOverlayPush();
457 settingThePath();
458
459 allowDeselect = false;
460 setSelection(newShape, e);
461 });
462
463 //Store information after the event ends
464 google.maps.event.addListener(newShape, 'bounds_changed', function (e) {
465 if (beingDragged == false) {
466 presentOverlayPush();
467 }
468 });
469
470 //Add an event listener to select a shape if the mouse hovers over it
471 google.maps.event.addListener(newShape, 'mousedown', function (e) {
472 //console.log("this fires");
473 if (e.target && e.target.matches("a.classA")) {
474 console.log("Anchor element clicked!");
475 }
476 //console.log(e);
477 if (e.vertex !== undefined || e.edge !== undefined) {
478 //console.log("this fires");
479 historyOverlayPush()
480 }
481 if (drawingManager.drawingMode == null) {
482 setSelection(newShape, e);
483 }
484 });
485
486 google.maps.event.addListener(newShape, 'mouseup', function (e) {
487 console.log("mouseup");
488 if (e.vertex !== undefined || e.edge !== undefined) {
489 //console.log("this fires");
490 presentOverlayPush()
491 } else {
492 //setSelection(newShape, e);
493 }
494
495 });
496}
497function clearSelection() {
498 if (selectedShape) {
499 if (selectedShape.type !== 'marker') {
500 selectedShape.setEditable(false);
501 if (shiftKeyPressed == false) {
502 for (var i = 0; i < selectedShapes.length; i++) {
503 selectedShapes[i].setEditable(false);
504 }
505 selectedShapes = [];
506 }
507 }
508 selectedShape = null;
509 }
510}
511
512//Set selection for the selected overlay
513function setSelection(shape, e) {
514 console.log("this fires");
515 if (shape.type !== 'marker') {
516 if (shiftKeyPressed == false) {
517 if(e !== null) {
518 if (e.vertex == undefined) {
519 if (e.edge == undefined) {
520 clearSelection();
521 shape.setEditable(true);
522 }
523 }
524 }
525 }
526 if (selectedShapes.includes(shape)) {
527 if(e !== null){
528 if (e.vertex == undefined) {
529 if (e.edge == undefined) {
530 allowDeselect = true;
531 removeFromSelectedShapes(shape);
532 }
533 }
534 }
535 } else {
536 allowDeselect = false;
537 console.log("allowDeselect",allowDeselect);
538 shape.setEditable(true);
539 selectedShapes.push(shape);
540 }
541
542 //Send the values to be updated
543 var thi = shape.strokeWeight;
544 var opa = shape.fillOpacity;
545 var fCol = shape.fillColor;
546 var sCol = shape.strokeColor;
547 updateMenuValues(thi, opa, fCol, sCol);
548
549 } else if (shape.type == 'marker') {
550 clearSelection();
551 }
552 selectedShape = shape;
553 settingThePath();
554}
555
556function removeFromSelectedShapes(shape) {
557 if (selectedShapes.includes(shape)) {
558 if (allowDeselect) {
559 const index = selectedShapes.indexOf(shape);
560 console.log(index);
561 selectedShapes.splice(index, 1);
562 shape.setEditable(false);
563 }
564 console.log("allowDeselect",allowDeselect);
565 allowDeselect = true;
566 }
567 console.log(selectedShapes.length);
568}
569
570//Set selected thickness
571function setSelectedThickness(sWeight) {
572 if (selectedShapes.length > 0) {
573 //historyOverlayPush();
574 for (var i = 0; i < selectedShapes.length; i++) {
575 selectedShapes[i].set('strokeWeight', sWeight);
576 //console.log(selectedShapes.length);
577 }
578 }
579}
580
581//Set selected opacity
582function setSelectedOpacity(fOpacity) {
583
584 if (selectedShapes.length > 0) {
585 for (var i = 0; i < selectedShapes.length; i++) {
586 selectedShapes[i].set('fillOpacity', fOpacity);
587 }
588 }
589}
590
591//set selected fill colour
592function setSelectedShapeColor(color) {
593 if (selectedShapes.length > 0) {
594 for (var i = 0; i < selectedShapes.length; i++) {
595 selectedShapes[i].set('fillColor', color);
596 selectedShapes[i].set('strokeColor', color);
597 }
598 }
599}
600function getElementByXpath(path) {
601 return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
602}
603
604function updateMenuValues(thi, opa, fCol, sCol) {
605 //Update thickness slider and value on the settings menu
606 var thicknessSliderOutput = document.getElementById("thicknessRangeVal");
607 thicknessSliderOutput.innerHTML = thi;
608 document.getElementById("thicknessRange").value = thi * 20;
609
610 //Update the opacity slider and value on the settings menu
611 var opacitySliderOutput = document.getElementById("opacityRangeVal");
612 opacitySliderOutput.innerHTML = "% " + opa * 100;
613 document.getElementById("colourOpacity").value = opa * 100;
614
615 if (drawingManager.drawingMode == null) {
616 selectColor(fCol);
617 }
618}
619function selectAll() {
620 shiftKeyPressed = true;
621 var e = new Object();
622 e.vertex = undefined;
623 selectedShapes = [];
624 for (var i = 0; i < overlays.length; i++) {
625 setSelection(overlays[i], e);
626 }
627 shiftKeyPressed = false;
628}
629
630function deselectAll() {
631 for (var i = 0; i < selectedShapes.length; i++) {
632 selectedShapes[i].setEditable(false);
633 }
634 selectedShapes = [];
635}
636
637function printHistory() {
638 console.log("prev", prevOverlays);
639 console.log("present ", presentOverlays);
640 console.log("undone ", undoneOverlays);
641 console.log(mouseState);
642
643 //console.log(mal);
644 //console.log(maj);
645 //console.log(gal);
646 //console.log(gaj);
647
648
649}
650
651function mouseMove(ev) {
652
653 //How can I know the state of mouse from here
654 if (mouseState == 'down') {
655 //console.log('mouse down state')
656 }
657
658 if (mouseState == 'up') {
659 //console.log('mouse up state')
660 }
661}
662
663function mouseDown(ev) {
664 mouseState = "down";
665 // console.log('Down State you can now start dragging');
666 //do not write any code here in this function
667}
668
669function mouseUp(ev) {
670 mouseState = "up";
671 // console.log('up state you cannot drag now because you are not holding your mouse')
672 //do not write any code here in this function
673}
674
675function deleteSelectedShape() {
676 //console.log("this fires");
677 historyOverlayPush();
678 for (var i = 0; i < selectedShapes.length; i++) {
679 selectedShapes[i].setMap(null);
680
681 if (overlays.includes(selectedShapes[i])) {
682 const index = overlays.indexOf(selectedShapes[i]);
683 overlays.splice(index, 1);
684 selectedShapes[i].setEditable(false);
685 }
686 }
687 selectedShapes = [];
688 //console.log("this fires");
689 presentOverlayPush();
690}
691
692function deleteAllShape() {
693 //console.log("this fires");
694 historyOverlayPush();
695 for (var i = 0; i < overlays.length; i++) {
696 overlays[i].setMap(null);
697 }
698 overlays = [];
699 //console.log("this fires");
700 presentOverlayPush();
701}
Note: See TracBrowser for help on using the repository browser.