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