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

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

Potential fix for a history bug found after resizing rectangles and circles
File size: 14.0 KB
Line 
1var debug = false;
2var shiftKeyPressed = false;
3var beingDragged = false;
4var resizeEntry = false;
5var allowDeselect = false;
6var colors = ['#1E90FF', '#FF1493', '#4B0082', '#32CD32', '#FF8C00', '#000000'];
7var selectedColor;
8var colorButtons = {};
9var thicknessValue = 1;
10var opacityValue = 0.4;
11var overlays = [];
12var drawingManager;
13var selectedShape;
14var selectedShapes = [];
15var map = null;
16var faj, fal, maj, mal;
17var polyOptions = {fillColor: '#CA4A2F', strokeWeight: thicknessValue, fillOpacity: opacityValue, editable: true, draggable: true, geodesic: false};
18
19
20$(document).ready(function() {
21 //Update thickness
22 var thicknessSlider = document.getElementById("thicknessRange");
23 var thicknessSliderOutput = document.getElementById("thicknessRangeVal");
24 thicknessSliderOutput.innerHTML = thicknessSlider.value / 20;
25
26 thicknessSlider.oninput = function () {
27 thicknessSliderOutput.innerHTML = this.value / 20;
28 thicknessValue = this.value / 20;
29 polyOptions.strokeWeight = thicknessValue;
30 setSelectedThickness(thicknessValue);
31 }
32 //Update opacity
33 var opacitySlider = document.getElementById("colourOpacity");
34 var opacitySliderOutput = document.getElementById("opacityRangeVal");
35 opacitySliderOutput.innerHTML = "% " + Math.round(opacitySlider.value);
36
37 opacitySlider.oninput = function () {
38 opacityValue = this.value / 100;
39 polyOptions.fillOpacity = opacityValue;
40 opacitySliderOutput = opacityValue;
41 opacityRangeVal.innerHTML = "% " + Math.round(opacitySliderOutput * 100);
42 setSelectedOpacity(opacityValue);
43 }
44
45 document.getElementById("thicknessRange").addEventListener("mousedown", shapeSpecsChangeMD);
46 document.getElementById("colourOpacity").addEventListener("mousedown", shapeSpecsChangeMD);
47 document.getElementById("color-palette1").addEventListener("mousedown", shapeSpecsChangeMD);
48
49 document.getElementById("thicknessRange").addEventListener("mouseup", shapeSpecsChangeMU);
50 document.getElementById("colourOpacity").addEventListener("mouseup", shapeSpecsChangeMU);
51});
52
53function shapeSpecsChangeMD() {
54 if (selectedShapes.length > 0) {
55 historyOverlayPush();
56 }
57}
58
59function shapeSpecsChangeMU() {
60 if (selectedShapes.length > 0) {
61 presentOverlayPush();
62 }
63}
64
65function makeColorButton(color) {
66 var button = document.createElement('span');
67 button.className = 'color-buttons1';
68 button.style.backgroundColor = color;
69 google.maps.event.addDomListener(button, 'click', function () {
70 selectColor(color);
71 setSelectedShapeColor(color);
72 shapeSpecsChangeMU();
73 });
74 return button;
75}
76function buildColorPalette() {
77 var colorPalette = document.getElementById('color-palette1');
78 for (var i = 0; i < colors.length; ++i) {
79 var currColor = colors[i];
80 var colorButton = makeColorButton(currColor);
81 colorPalette.appendChild(colorButton);
82 colorButtons[currColor] = colorButton;
83 }
84 selectColor(colors[0]);
85};
86function selectColor(color) {
87 selectedColor = color;
88 for (var i = 0; i < colors.length; ++i) {
89 var currColor = colors[i];
90 colorButtons[currColor].style.border = currColor == color ? '2px solid #789' : '2px solid #fff';
91 }
92
93 // Retrieves the current options from the drawing manager and replaces the
94 // stroke or fill color as appropriate.
95 var polylineOptions = drawingManager.get('polylineOptions');
96 polylineOptions.strokeColor = color;
97 drawingManager.set('polylineOptions', polylineOptions);
98
99 var rectangleOptions = drawingManager.get('rectangleOptions');
100 rectangleOptions.fillColor = color;
101 drawingManager.set('rectangleOptions', rectangleOptions);
102
103 var circleOptions = drawingManager.get('circleOptions');
104 circleOptions.fillColor = color;
105 drawingManager.set('circleOptions', circleOptions);
106
107 var polygonOptions = drawingManager.get('polygonOptions');
108 polygonOptions.fillColor = color;
109 drawingManager.set('polygonOptions', polygonOptions);
110}
111
112function initMap() {
113
114 map = new google.maps.Map(document.getElementById('map'), {
115 center: {lat: -34.397, lng: 150.644
116 },
117 zoom: 8,
118 });
119
120 drawingManager = new google.maps.drawing.DrawingManager({
121 drawingMode: google.maps.drawing.OverlayType.MARKER,
122 drawingControl: true,
123 drawingControlOptions: {
124 position: google.maps.ControlPosition.TOP_CENTER,
125 drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle']
126 },
127 markerOptions: {
128 draggable: true
129 },
130 circleOptions: polyOptions,
131 polylineOptions: polyOptions,
132 polygonOptions: polyOptions,
133 rectangleOptions: polyOptions,
134 });
135
136 drawingManager.setMap(map);
137
138 //overlays.push(event.overlay); // store reference to added overlay
139 google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) {
140
141 historyOverlayPush();
142
143 overlays.push(e.overlay); // store reference to added overlay
144 var newShape = e.overlay;
145 newShape.type = e.type;
146
147 presentOverlayPush();
148
149 if (e.type !== google.maps.drawing.OverlayType.MARKER) {
150 addShapeListeners(newShape,e);
151 setSelection(newShape, e);
152 } else {
153
154 addMarkerListeners(newShape,e);
155 setSelection(newShape, e);
156 }
157 });
158
159 //Clears selection if clicked on the map when shift is not presseed
160 google.maps.event.addListener(map, 'click', function () {
161 if (shiftKeyPressed == false) {
162 clearSelection();
163 selectedShape = null;
164 }
165 });
166
167 //Keyboard shortcuts
168 document.addEventListener('keydown', function () {
169 if (event.code == 'KeyY' && (event.ctrlKey || event.metaKey) || (event.code == 'KeyZ' && event.code == 'ShiftLeft' && (event.ctrlKey || event.metaKey) )){
170 redo();
171
172 }
173 if (event.code == 'KeyZ' && (event.ctrlKey || event.metaKey)){
174 if(shiftKeyPressed == false) {
175 undo();
176 }
177 }
178 if (event.code == 'KeyA' && (event.ctrlKey || event.metaKey)){
179 event.preventDefault();
180 selectAll();
181 drawingManager.setDrawingMode(null);
182 }
183 if (event.code == 'KeyD' && (event.ctrlKey || event.metaKey)){
184 event.preventDefault();
185 deselectAll();
186 }
187 if (event.code == 'Digit0' || event.code == 'Numpad0' || event.code == 'Backquote') {
188 //clearSelection();
189 drawingManager.setDrawingMode(null);
190 } else if (event.code == 'Digit1') {
191 drawingManager.setDrawingMode('marker');
192 } else if (event.code == 'Digit2') {
193 drawingManager.setDrawingMode('circle');
194 } else if (event.code == 'Digit3') {
195 drawingManager.setDrawingMode('polygon');
196 } else if (event.code == 'Digit4') {
197 drawingManager.setDrawingMode('polyline');
198 } else if (event.code == 'Digit5') {
199 drawingManager.setDrawingMode('rectangle');
200 } else if (event.code == 'KeyQ') {
201 printHistory();
202 }
203// console.log(event.code);
204 });
205
206 //Sets shift as pressed
207 document.addEventListener('keydown', function () {
208 if (event.code == 'ShiftLeft' || event.code == 'ShiftRight') {
209 shiftKeyPressed = true;
210
211 }
212
213 });
214
215 //Sets shift as unpressed
216 document.addEventListener('keyup', function () {
217 if (event.code == 'ShiftLeft' || event.code == 'ShiftRight') {
218 shiftKeyPressed = false;
219 }
220
221 });
222
223 buildColorPalette();
224}
225
226 //Deletes a vertex if clicked on it
227 function vertexAndPolyDel(e, newShape) {
228 var vertex = e.vertex;
229 //console.log(e)
230 if (e.vertex !== undefined) {
231 historyOverlayPush();
232 if (newShape.type === google.maps.drawing.OverlayType.POLYGON) {
233 var path = newShape.getPaths().getAt(e.path);
234 path.removeAt(e.vertex);
235 if (path.length < 3) {
236 newShape.setMap(null);
237 }
238 }
239 if (newShape.type === google.maps.drawing.OverlayType.POLYLINE) {
240 var path = newShape.getPath();
241 path.removeAt(e.vertex);
242 if (path.length < 2) {
243 newShape.setMap(null);
244 }
245 }
246 presentOverlayPush();
247 }
248 }
249
250function addMarkerListeners(newShape,e)
251{
252 //cLICK EVENT IF A MARKER IS CREATED
253 google.maps.event.addListener(newShape, 'click', function (e) {
254 setSelection(newShape, e);
255 });
256
257 google.maps.event.addListener(newShape, 'dragstart', function (e) {
258
259
260
261 beingDragged = true;
262 historyOverlayPush();
263
264 });
265
266 google.maps.event.addListener(newShape, 'dragend', function () {
267 beingDragged = false;
268 presentOverlayPush();
269 allowDeselect = false;
270 });
271}
272function addShapeListeners(newShape,e)
273{
274 // Add an event listener that selects the newly-drawn shape when the user
275 // mouses down on it.
276 google.maps.event.addListener(newShape, 'click', function (e) {
277 vertexAndPolyDel(e, newShape);
278 });
279
280
281 google.maps.event.addListener(newShape, 'drag', function (e) {
282
283
284
285 //for(var i = 0; i < selectedShapes.length; i++) {
286 // if(newShape.type = 'rectangle') {
287 // var newBounds = {
288 // east: selectedShapes[i].getBounds().ea.l + (selectedShapes[i].getBounds().ea.l - faj),
289 // north: selectedShapes[i].getBounds().la.l + (selectedShapes[i].getBounds().la.l - fal),
290 // south: selectedShapes[i].getBounds().la.j + (selectedShapes[i].getBounds().la.j - maj),
291 // west: selectedShapes[i].getBounds().ea.j + (selectedShapes[i].getBounds().ea.j - mal)
292 // }
293 // selectedShapes[i].set
294 // } else {
295
296 // }
297 //
298 //}
299
300
301 });
302
303
304 google.maps.event.addListener(newShape, 'dragstart', function (e) {
305
306 //console.log(newShape.bounds);
307 beingDragged = true;
308 historyOverlayPush();
309
310 });
311
312 google.maps.event.addListener(newShape, 'dragend', function () {
313 beingDragged = false;
314 presentOverlayPush();
315 allowDeselect = false;
316 });
317
318 //Store information after the event ends
319 google.maps.event.addListener(newShape, 'bounds_changed', function (e) {
320 if (beingDragged == false){
321 resizeEntry = true;
322 presentOverlayPush();
323 resizeEntry = false;
324 }
325 });
326
327 //Add an event listener to select a shape if the mouse hovers over it
328 google.maps.event.addListener(newShape, 'mousedown', function (e) {
329 if (e.vertex !== undefined || e.edge !== undefined) {
330 historyOverlayPush()
331 }
332 if (drawingManager.drawingMode == null) {
333 setSelection(newShape, e);
334 }
335 });
336
337 google.maps.event.addListener(newShape, 'mouseup', function (e) {
338 if (e.vertex !== undefined || e.edge !== undefined) {
339 presentOverlayPush()
340 }
341 else{
342 removeFromSelectedShapes(newShape);
343 }
344 });
345}
346function clearSelection() {
347 if (selectedShape) {
348 if (selectedShape.type !== 'marker') {
349 selectedShape.setEditable(false);
350 if (shiftKeyPressed == false) {
351 for (var i = 0; i < selectedShapes.length; i++) {
352 selectedShapes[i].setEditable(false);
353 }
354 selectedShapes = [];
355 }
356 }
357 selectedShape = null;
358 }
359 }
360
361//Set selection for the selected overlay
362 function setSelection(shape, e) {
363 if (shape.type !== 'marker') {
364 if (shiftKeyPressed == false) {
365 if (e.vertex == undefined) {
366 if(e.edge == undefined) {
367 clearSelection();
368 shape.setEditable(true);
369 }
370 }
371 }
372 if (selectedShapes.includes(shape)) {
373 if(e.vertex == undefined ) {
374 if(e.edge == undefined) {
375 //removeFromSelectedShapes(shape);
376 }
377 }
378 } else {
379 shape.setEditable(true);
380 selectedShapes.push(shape);
381 }
382
383
384 //Send the values to be updated
385 var thi = shape.strokeWeight;
386 var opa = shape.fillOpacity;
387 var fCol = shape.fillColor;
388 var sCol = shape.strokeColor;
389 updateMenuValues(thi, opa, fCol, sCol);
390
391 } else if (shape.type == 'marker') {
392 clearSelection();
393 }
394 selectedShape = shape;
395 }
396
397
398function removeFromSelectedShapes(shape) {
399 if (selectedShapes.includes(shape)) {
400 if(allowDeselect) {
401 const index = selectedShapes.indexOf(shape);
402 selectedShapes.splice(index, 1);
403 shape.setEditable(false);
404 }
405 allowDeselect = false;
406 }
407
408
409}
410
411//Set selected thickness
412function setSelectedThickness(sWeight) {
413 if (selectedShapes.length > 0) {
414 //historyOverlayPush();
415 for (var i = 0; i < selectedShapes.length; i++) {
416 selectedShapes[i].set('strokeWeight', sWeight);
417 //console.log(selectedShapes.length);
418 }
419 }
420}
421
422//Set selected opacity
423function setSelectedOpacity(fOpacity) {
424
425 if (selectedShapes.length > 0) {
426 for (var i = 0; i < selectedShapes.length; i++) {
427 selectedShapes[i].set('fillOpacity', fOpacity);
428 }
429 }
430}
431
432//set selected fill colour
433function setSelectedShapeColor(color) {
434 if (selectedShapes.length > 0) {
435 for (var i = 0; i < selectedShapes.length; i++) {
436 selectedShapes[i].set('fillColor', color);
437 selectedShapes[i].set('strokeColor', color);
438 }
439 }
440}
441
442function updateMenuValues(thi, opa, fCol, sCol) {
443 //Update thickness slider and value on the settings menu
444 var thicknessSliderOutput = document.getElementById("thicknessRangeVal");
445 thicknessSliderOutput.innerHTML = thi;
446 document.getElementById("thicknessRange").value = thi * 20;
447
448 //Update the opacity slider and value on the settings menu
449 var opacitySliderOutput = document.getElementById("opacityRangeVal");
450 opacitySliderOutput.innerHTML = "% " + opa * 100;
451 document.getElementById("colourOpacity").value = opa * 100;
452
453 if (drawingManager.drawingMode == null) {
454 selectColor(fCol);
455 }
456}
457function selectAll(){
458 shiftKeyPressed = true;
459 var e = new Object();
460 e.vertex = undefined;
461 selectedShapes = [];
462 for(var i = 0; i< overlays.length; i++) {
463 setSelection(overlays[i], e);
464 }
465 shiftKeyPressed = false;
466}
467
468function deselectAll(){
469 for(var i = 0; i < selectedShapes.length; i++) {
470 selectedShapes[i].setEditable(false);
471 }
472 selectedShapes = [];
473}
474
475function printHistory() {
476 console.log("prev", prevOverlays);
477 console.log("present ", presentOverlays);
478 console.log("undone ", undoneOverlays);
479}
480
481function deleteSelectedShape() {
482 historyOverlayPush();
483 for (var i = 0; i < selectedShapes.length; i++) {
484 selectedShapes[i].setMap(null);
485
486 if (overlays.includes(selectedShapes[i])) {
487 const index = overlays.indexOf(selectedShapes[i]);
488 overlays.splice(index, 1);
489 selectedShapes[i].setEditable(false);
490 }
491 }
492 selectedShapes = [];
493 presentOverlayPush();
494}
495
496function deleteAllShape() {
497 historyOverlayPush();
498 for (var i = 0; i < overlays.length; i++) {
499 overlays[i].setMap(null);
500 }
501 overlays = [];
502 presentOverlayPush();
503}
504
Note: See TracBrowser for help on using the repository browser.