Changeset 32732
- Timestamp:
- 2019-01-31T17:03:19+13:00 (5 years ago)
- Location:
- gs3-extensions/map-editor/DrawingManager
- Files:
-
- 2 edited
Legend:
- Unmodified
- Added
- Removed
-
gs3-extensions/map-editor/DrawingManager/historyManager.js
r32724 r32732 2 2 var presentOverlays = []; 3 3 var undoneOverlays = []; 4 var enableSelectionFeature = false;4 var cycleComplete = true; 5 5 6 6 function undo() { 7 7 8 8 for (var i = 0; i < overlays.length; i++) { 9 9 overlays[i].setMap(null); 10 11 10 } 12 11 if (prevOverlays.length != 0) { … … 15 14 undoneOverlaysPush(); 16 15 var prev_overlay = prevOverlays.pop(); 17 18 if (prev_overlay.length > 0) {16 17 if (prev_overlay.length > 0) { 19 18 for (var i = 0; i < prev_overlay.length; i++) { 20 overlays[i] = prev_overlay[i]; 21 overlays[i].setMap(map); 22 } 23 } 24 25 26 } 27 28 //Deactivated at the moment 29 //if (enableSelectionFeature) { 30 // selectedShapes = []; 31 // var i = 0; 32 // var lastEntry = prevOverlays[prevOverlays.length - 1][i]; 33 // console.log(prevOverlays[prevOverlays.length - 1].length); 34 // 35 // for (var i = 0; i < lastEntry.length; i++) { 36 // selectedShapes.push(prevOverlays) 37 // console.log("comes here"); 38 // } 39 // 40 //} 19 overlays[i] = prev_overlay[i]; 20 overlays[i].setMap(map); 21 overlays[i].draggable = draggableState; 22 } 23 } 24 } 41 25 } 42 26 43 27 function redo() { 44 28 45 29 if (undoneOverlays.length != 0) { 46 30 selectedShapes = []; … … 48 32 overlays[i].setMap(null); 49 33 } 34 50 35 overlays = []; 51 36 var lastEntry = undoneOverlays[undoneOverlays.length - 1]; … … 53 38 overlays[i] = lastEntry[i]; 54 39 overlays[i].setMap(map); 55 } 56 var conditionPrevious = presentOverlays[presentOverlays.length - 1] !== undefined ; 57 58 if (conditionPrevious){ 59 prevOverlays.push(presentOverlays[0]); 60 } 61 40 overlays[i].draggable = draggableState; 41 } 42 43 var conditionPrevious = presentOverlays[0]; 44 if (conditionPrevious !== undefined) { 45 if (conditionPrevious.length == 0) { 46 prevOverlays.push(presentOverlays[0]); 47 } else { 48 var overlays_copy = []; 49 for (var i = 0; i < presentOverlays[0].length; i++) { 50 var clone_shape = cloneShape(presentOverlays[0][i]); 51 if (overlayItemIsShape(clone_shape)) { 52 addShapeListeners(clone_shape, null); 53 } else { 54 addMarkerListeners(clone_shape, null); 55 } 56 overlays_copy[i] = clone_shape; 57 } 58 prevOverlays.push(overlays_copy); 59 } 60 } 62 61 presentOverlays = []; 63 //console.log("last undone", undoneOverlays[undoneOverlays.length -1]);64 62 presentOverlays.push(undoneOverlays[undoneOverlays.length - 1]); 65 63 undoneOverlays.pop(); 66 67 } 68 64 } 69 65 } 70 66 … … 100 96 strokeWeight: strokeWeight, 101 97 path: clone_path, 102 draggable: true,98 draggable: draggableState, 103 99 editable: false 104 100 }); … … 128 124 fillOpacity: fillOpacity, 129 125 path: clone_path, 130 draggable: true,126 draggable: draggableState, 131 127 editable: false 132 128 }); … … 154 150 fillOpacity: fillOpacity, 155 151 bounds: bounds, 156 draggable: true,152 draggable: draggableState, 157 153 editable: false, 158 154 type: type … … 182 178 center: center, 183 179 radius: radius, 184 draggable: true,180 draggable: draggableState, 185 181 editable: false 186 182 }); … … 194 190 var position = marker.getPosition(); 195 191 var anchorPoint = marker.anchorPoint; 196 var clone_marker 197 anchorPoint: anchorPoint,198 position: position,199 clickable: true,200 draggable: true,201 editable: false202 })203 clone_marker.type = google.maps.drawing.OverlayType.MARKER;204 192 var clone_marker = new google.maps.Marker({ 193 anchorPoint: anchorPoint, 194 position: position, 195 clickable: true, 196 draggable: draggableState, 197 editable: false 198 }) 199 clone_marker.type = google.maps.drawing.OverlayType.MARKER; 200 205 201 return clone_marker; 206 202 } … … 225 221 return clone_marker; 226 222 } 227 console.log(cloneShape);228 223 } 229 224 … … 240 235 241 236 function historyOverlayPush() { 242 if(undoneOverlays.length > 0) { 243 for(var i = 0; i < undoneOverlays.length; i++) { 244 245 entryType.pop(); 246 } 247 } 248 undoneOverlays = []; 249 //if(resizeEntry){ 250 //prevOverlays.push(presentOverlays[0]); 251 252 //} else { 237 if (cycleComplete) { 253 238 var overlays_copy = []; 254 239 for (var i = 0; i < overlays.length; i++) { 255 240 var clone_shape = cloneShape(overlays[i]); 256 if(resizeEntry) { 257 //console.log("hey lol"); 258 clone_shape = cloneShape(presentOverlays[0][i]); 259 } 241 260 242 if (overlayItemIsShape(clone_shape)) { 261 243 addShapeListeners(clone_shape, null); // don't have an overlay event! … … 265 247 overlays_copy[i] = clone_shape; 266 248 } 267 prevOverlays.push(overlays_copy); 268 //} 269 } 270 249 undoneOverlays = []; 250 prevOverlays.push(overlays_copy); 251 } 252 253 cycleComplete = false; 254 } 271 255 function presentOverlayPush() { 272 273 //clean the entry type array 274 275 if(resizeEntry) { 276 entryType.push("resize"); 277 } else { 278 entryType.push("not resize"); 279 } 280 256 257 OVbeforeClearing = overlays; 258 PObeforeClearing = presentOverlays; 281 259 presentOverlays = []; 282 260 var overlays_copy = []; … … 291 269 } 292 270 presentOverlays.push(overlays_copy); 271 cycleComplete = true; 272 293 273 } 294 274 295 275 function undoneOverlaysPush() { 296 276 297 277 var conditionUndone = presentOverlays[presentOverlays.length - 1] !== undefined; 298 278 299 279 if (conditionUndone) { 300 undoneOverlays.push(presentOverlays[0]); 301 } 302 presentOverlays = []; 280 var overlays_copy = []; 281 for (var i = 0; i < presentOverlays[0].length; i++) { 282 var clone_shape = cloneShape(presentOverlays[0][i]); 283 if (overlayItemIsShape(clone_shape)) { 284 addShapeListeners(clone_shape, null); // don't have an overlay event! 285 } else { 286 addMarkerListeners(clone_shape, null); // don't have an overlay event! 287 } 288 overlays_copy[i] = clone_shape; 289 } 290 undoneOverlays.push(overlays_copy); 291 } 292 303 293 var conditionPresent = prevOverlays[prevOverlays.length - 1] !== undefined; 304 294 305 295 if (conditionPresent) { 306 presentOverlays.push(prevOverlays[prevOverlays.length - 1]); 307 } 308 } 296 presentOverlays = []; 297 var overlays_copy = []; 298 for (var i = 0; i < prevOverlays[prevOverlays.length - 1].length; i++) { 299 var clone_shape = cloneShape(prevOverlays[prevOverlays.length - 1][i]); 300 if (overlayItemIsShape(clone_shape)) { 301 addShapeListeners(clone_shape, null); // don't have an overlay event! 302 } else { 303 addMarkerListeners(clone_shape, null); // don't have an overlay event! 304 } 305 overlays_copy[i] = clone_shape; 306 } 307 presentOverlays.push(overlays_copy); 308 } 309 } -
gs3-extensions/map-editor/DrawingManager/index.js
r32724 r32732 3 3 var beingDragged = false; 4 4 var resizeEntry = false; 5 var allowDeselect = false;5 var allowDeselect = true; 6 6 var colors = ['#1E90FF', '#FF1493', '#4B0082', '#32CD32', '#FF8C00', '#000000']; 7 7 var selectedColor; … … 9 9 var thicknessValue = 1; 10 10 var opacityValue = 0.4; 11 var draggableState = true 11 12 var overlays = []; 12 13 var entryType = []; … … 15 16 var selectedShapes = []; 16 17 var map = null; 17 var faj, fal, maj, mal; 18 var polyOptions = {fillColor: '#CA4A2F', strokeWeight: thicknessValue, fillOpacity: opacityValue, editable: true, draggable: true, geodesic: false}; 19 20 21 $(document).ready(function() { 18 var dragS, dragN; 19 var dsNorth, dsSouth, dsEast, dsWest; 20 var gaj, gal, maj, mal; 21 var listenersArray = []; 22 var counter = 0; 23 var branchNum = 1; 24 var mouseState = "up"; 25 var thicknessRangeListener = thicknessValue; 26 var resizable = false; 27 var dontResize = false; 28 var 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 22 60 //Update thickness 23 61 var thicknessSlider = document.getElementById("thicknessRange"); 24 62 var thicknessSliderOutput = document.getElementById("thicknessRangeVal"); 25 63 thicknessSliderOutput.innerHTML = thicknessSlider.value / 20; 26 27 64 thicknessSlider.oninput = function () { 65 shapeSpecsChangeMD(); 28 66 thicknessSliderOutput.innerHTML = this.value / 20; 29 67 thicknessValue = this.value / 20; 30 68 polyOptions.strokeWeight = thicknessValue; 31 69 setSelectedThickness(thicknessValue); 70 32 71 } 33 72 //Update opacity … … 37 76 38 77 opacitySlider.oninput = function () { 78 shapeSpecsChangeMD(); 39 79 opacityValue = this.value / 100; 40 80 polyOptions.fillOpacity = opacityValue; … … 44 84 } 45 85 46 document.getElementById("thicknessRange").addEventListener("mousedown", shapeSpecsChangeMD);47 document.getElementById("colourOpacity").addEventListener("mousedown", shapeSpecsChangeMD);48 86 document.getElementById("color-palette1").addEventListener("mousedown", shapeSpecsChangeMD); 49 50 87 document.getElementById("thicknessRange").addEventListener("mouseup", shapeSpecsChangeMU); 51 88 document.getElementById("colourOpacity").addEventListener("mouseup", shapeSpecsChangeMU); 89 document.onmousemove = mouseMove; 90 document.onmousedown = mouseDown; 91 document.onmouseup = mouseUp; 92 52 93 }); 53 94 54 document.addEventListener("mousedown", function(){ 55 56 //console.log(document.body.style.cursor); 57 // console.log(document.getElementById("map").style.cursor); 58 }); 95 96 function 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 if (listenersArray[counter] !== undefined && listenersArray[counter] !== null) { 106 listenersArray[counter].addEventListener("mousemove", function () { 107 resizable = true; 108 shapeResize(); 109 }); 110 listenersArray[counter].addEventListener("mouseout", function () { 111 if (mouseDown) { 112 resizable = true; 113 shapeResize(); 114 } 115 }); 116 } 117 counter++; 118 } 119 branchNum++; 120 } 121 } 122 123 124 125 function shapeResize() { 126 if (mouseState == "down") { 127 if (selectedShapes.length > 0) { 128 if (resizable) { 129 if(dontResize == false){ 130 historyOverlayPush(); 131 } 132 133 } 134 } 135 } 136 } 137 59 138 function shapeSpecsChangeMD() { 139 60 140 if (selectedShapes.length > 0) { 61 141 historyOverlayPush(); … … 65 145 function shapeSpecsChangeMU() { 66 146 if (selectedShapes.length > 0) { 147 //console.log("this fires"); 67 148 presentOverlayPush(); 68 } 149 } 69 150 } 70 151 … … 119 200 120 201 map = new google.maps.Map(document.getElementById('map'), { 121 center: {lat: -34.397, lng: 150.644 202 center: { 203 lat: -37.7891, 204 lng: 175.3180 122 205 }, 123 zoom: 2,206 zoom: 14, 124 207 }); 208 209 // Add a style-selector control to the map. 210 var styleControl = document.getElementById('style-selector-control'); 211 map.controls[google.maps.ControlPosition.TOP_LEFT].push(styleControl); 212 213 // Set the map's style to the initial value of the selector. 214 var styleSelector = document.getElementById('style-selector'); 215 map.setOptions({ 216 styles: styles[styleSelector.value] 217 }); 218 219 // Apply new JSON when the user selects a different style. 220 styleSelector.addEventListener('change', function () { 221 map.setOptions({ 222 styles: styles[styleSelector.value] 223 }); 224 }); 125 225 126 226 drawingManager = new google.maps.drawing.DrawingManager({ … … 132 232 }, 133 233 markerOptions: { 134 draggable: true234 draggable: draggableState 135 235 }, 136 236 circleOptions: polyOptions, … … 142 242 drawingManager.setMap(map); 143 243 144 //overlays.push(event.overlay); // store reference to added overlay 244 google.maps.event.addListener(drawingManager, "drawingmode_changed", function () { 245 settingThePath(); 246 247 }) 248 249 // store reference to added overlay 145 250 google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) { 146 console.log(e); 251 252 allowDeselect = true; 147 253 254 //console.log(e); 148 255 historyOverlayPush(); 149 256 150 257 overlays.push(e.overlay); // store reference to added overlay 151 258 var newShape = e.overlay; 152 259 newShape.type = e.type; 153 260 //console.log("this fires"); 154 261 presentOverlayPush(); 155 262 156 263 if (e.type !== google.maps.drawing.OverlayType.MARKER) { 157 addShapeListeners(newShape, e);264 addShapeListeners(newShape, e); 158 265 setSelection(newShape, e); 159 266 } else { 160 161 addMarkerListeners(newShape, e);267 268 addMarkerListeners(newShape, e); 162 269 setSelection(newShape, e); 163 270 } … … 165 272 166 273 //Clears selection if clicked on the map when shift is not presseed 167 google.maps.event.addListener(map, 'click', function () { 274 google.maps.event.addListener(map, 'click', function (e) { 275 var c = document.body.childNodes; 276 if (e.target && e.target.matches("a.classA")) { 277 console.log("Anchor element clicked!"); 278 } 168 279 if (shiftKeyPressed == false) { 169 280 clearSelection(); 170 281 selectedShape = null; 171 } 282 } 283 }); 284 285 google.maps.event.addListener(map, 'mousedown', function (e) { 286 dontResize = true; 172 287 }); 173 288 289 google.maps.event.addListener(map, 'mouseup', function (e) { 290 dontResize = false; 291 }); 292 174 293 //Keyboard shortcuts 175 294 document.addEventListener('keydown', function () { 176 if (event.code == 'KeyY' && (event.ctrlKey || event.metaKey) || (event.code == 'KeyZ' && event.code == 'ShiftLeft' && (event.ctrlKey || event.metaKey) )){ 177 redo(); 178 179 } 180 if (event.code == 'KeyZ' && (event.ctrlKey || event.metaKey)){ 181 if(shiftKeyPressed == false) { 295 if (event.code == 'KeyY' && (event.ctrlKey || event.metaKey) || (event.code == 'KeyZ' && event.code == 'ShiftLeft' && (event.ctrlKey || event.metaKey))) { 296 redo(); 297 } 298 if (event.code == 'KeyZ' && (event.ctrlKey || event.metaKey)) { 299 if (shiftKeyPressed == false) { 182 300 undo(); 183 301 } 184 302 } 185 if (event.code == 'KeyA' && (event.ctrlKey || event.metaKey)) {186 event.preventDefault(); 303 if (event.code == 'KeyA' && (event.ctrlKey || event.metaKey)) { 304 event.preventDefault(); 187 305 selectAll(); 188 306 drawingManager.setDrawingMode(null); 189 307 } 190 if (event.code == 'KeyD' && (event.ctrlKey || event.metaKey)) {191 event.preventDefault(); 308 if (event.code == 'KeyD' && (event.ctrlKey || event.metaKey)) { 309 event.preventDefault(); 192 310 deselectAll(); 193 311 } 194 312 if (event.code == 'Digit0' || event.code == 'Numpad0' || event.code == 'Backquote') { 195 //clearSelection(); 313 196 314 drawingManager.setDrawingMode(null); 197 315 } else if (event.code == 'Digit1') { … … 208 326 printHistory(); 209 327 } 210 // console.log(event.code);328 // console.log(event.code); 211 329 }); 212 330 … … 231 349 } 232 350 233 //Deletes a vertex if clicked on it 234 function vertexAndPolyDel(e, newShape) { 235 var vertex = e.vertex; 236 //console.log(e) 237 if (e.vertex !== undefined) { 238 historyOverlayPush(); 239 if (newShape.type === google.maps.drawing.OverlayType.POLYGON) { 240 var path = newShape.getPaths().getAt(e.path); 241 path.removeAt(e.vertex); 242 if (path.length < 3) { 243 newShape.setMap(null); 244 } 245 } 246 if (newShape.type === google.maps.drawing.OverlayType.POLYLINE) { 247 var path = newShape.getPath(); 248 path.removeAt(e.vertex); 249 if (path.length < 2) { 250 newShape.setMap(null); 251 } 252 } 253 presentOverlayPush(); 254 } 255 } 256 257 function addMarkerListeners(newShape,e) 258 { 351 //Deletes a vertex if clicked on it 352 function vertexAndPolyDel(e, newShape) { 353 var vertex = e.vertex; 354 //console.log(e) 355 if (e.vertex !== undefined) { 356 //console.log("this fires"); 357 if (newShape.type === google.maps.drawing.OverlayType.POLYGON) { 358 var path = newShape.getPaths().getAt(e.path); 359 path.removeAt(e.vertex); 360 if (path.length < 3) { 361 newShape.setMap(null); 362 } 363 } 364 if (newShape.type === google.maps.drawing.OverlayType.POLYLINE) { 365 var path = newShape.getPath(); 366 path.removeAt(e.vertex); 367 if (path.length < 2) { 368 newShape.setMap(null); 369 } 370 } //console.log("this fires"); 371 } 372 } 373 374 function addMarkerListeners(newShape, e) { 259 375 //cLICK EVENT IF A MARKER IS CREATED 260 376 google.maps.event.addListener(newShape, 'click', function (e) { 261 377 setSelection(newShape, e); 262 378 }); 263 379 264 380 google.maps.event.addListener(newShape, 'dragstart', function (e) { 265 266 267 268 381 beingDragged = true; 382 //console.log("this fires"); 269 383 historyOverlayPush(); 270 384 271 }); 385 }); 386 387 google.maps.event.addListener(newShape, 'dragend', function () { 388 beingDragged = false; 389 //console.log("this fires"); 390 presentOverlayPush(); 391 allowDeselect = false; 392 }); 393 } 394 395 function applyDrag(newShape) { 396 for (var i = 0; i < selectedShapes.length; i++) { 397 //mal = 0; 398 //maj = 0; 399 //gal = 0; 400 //gaj = 0; 401 402 //mal = selectedShapes[i].bounds.ma.l - newShape.bounds.ma.l; 403 //maj = selectedShapes[i].bounds.ma.j - newShape.bounds.ma.j; 404 //gal = selectedShapes[i].bounds.ga.l - newShape.bounds.ga.l; 405 //gaj = selectedShapes[i].bounds.ga.j - newShape.bounds.ga.j; 406 407 mal = newShape.bounds.ma.l - dsNorth; 408 maj = newShape.bounds.ma.j - dsSouth; 409 gal = newShape.bounds.ga.l - dsEast; 410 gaj = newShape.bounds.ga.j - dsWest; 411 412 var north = selectedShapes[i].bounds.ma.l; 413 var south = selectedShapes[i].bounds.ma.j; 414 var east = selectedShapes[i].bounds.ga.l + gal; 415 var west = selectedShapes[i].bounds.ga.j + gaj; 416 if (!isNaN(north) && !isNaN(south) && !isNaN(west) && !isNaN(east)) { 417 var NE = new google.maps.LatLng(north, east); 418 var SW = new google.maps.LatLng(south, west); 419 var newRect = new google.maps.LatLngBounds(SW, NE); 420 selectedShapes[i].setBounds(newRect); 421 } 422 } 423 } 424 425 function addShapeListeners(newShape, e) { 426 // Add an event listener that selects the newly-drawn shape when the user 427 // mouses down on it. 428 google.maps.event.addListener(newShape, 'click', function (e) { 429 430 vertexAndPolyDel(e, newShape); 431 432 }); 433 434 google.maps.event.addListener(newShape, 'dragstart', function (e) { 435 436 437 allowDeselect = false; 438 console.log("hey"); 439 historyOverlayPush(); 440 }); 441 442 272 443 273 444 google.maps.event.addListener(newShape, 'dragend', function () { 274 445 beingDragged = false; 275 446 presentOverlayPush(); 447 settingThePath(); 448 276 449 allowDeselect = false; 277 }); 278 } 279 function addShapeListeners(newShape,e) 280 { 281 // Add an event listener that selects the newly-drawn shape when the user 282 // mouses down on it. 283 google.maps.event.addListener(newShape, 'click', function (e) { 284 vertexAndPolyDel(e, newShape); 285 }); 286 287 288 google.maps.event.addListener(newShape, 'drag', function (e) { 289 290 291 292 //for(var i = 0; i < selectedShapes.length; i++) { 293 // if(newShape.type = 'rectangle') { 294 // var newBounds = { 295 // east: selectedShapes[i].getBounds().ea.l + (selectedShapes[i].getBounds().ea.l - faj), 296 // north: selectedShapes[i].getBounds().la.l + (selectedShapes[i].getBounds().la.l - fal), 297 // south: selectedShapes[i].getBounds().la.j + (selectedShapes[i].getBounds().la.j - maj), 298 // west: selectedShapes[i].getBounds().ea.j + (selectedShapes[i].getBounds().ea.j - mal) 299 // } 300 // selectedShapes[i].setBounds 301 // } else { 302 // 303 // } 304 // 305 //} 306 307 308 }); 309 310 311 google.maps.event.addListener(newShape, 'dragstart', function (e) { 312 313 //faj = newShape.bounds.fa.j; 314 //fal = newShape.bounds.fa.l; 315 //maj = newShape.bounds.ma.j; 316 //mal = newShape.bounds.ma.l; 317 318 //console.log(faj, fal, maj, mal); 319 320 321 beingDragged = true; 322 historyOverlayPush(); 323 324 }); 325 326 google.maps.event.addListener(newShape, 'dragend', function () { 327 beingDragged = false; 328 presentOverlayPush(); 329 allowDeselect = false; 330 }); 331 450 setSelection(newShape, e); 451 }); 452 332 453 //Store information after the event ends 333 454 google.maps.event.addListener(newShape, 'bounds_changed', function (e) { 334 if (beingDragged == false){ 335 resizeEntry = true; 336 historyOverlayPush(); 455 if (beingDragged == false) { 337 456 presentOverlayPush(); 338 resizeEntry = false; 339 } 340 457 } 341 458 }); 342 459 343 460 //Add an event listener to select a shape if the mouse hovers over it 344 461 google.maps.event.addListener(newShape, 'mousedown', function (e) { 462 //console.log("this fires"); 463 if (e.target && e.target.matches("a.classA")) { 464 console.log("Anchor element clicked!"); 465 } 345 466 //console.log(e); 346 467 if (e.vertex !== undefined || e.edge !== undefined) { 468 //console.log("this fires"); 347 469 historyOverlayPush() 348 } 470 } 349 471 if (drawingManager.drawingMode == null) { 350 472 setSelection(newShape, e); … … 353 475 354 476 google.maps.event.addListener(newShape, 'mouseup', function (e) { 477 console.log("mouseup"); 355 478 if (e.vertex !== undefined || e.edge !== undefined) { 479 //console.log("this fires"); 356 480 presentOverlayPush() 357 } 358 else{359 removeFromSelectedShapes(newShape);360 }361 }); 481 } else { 482 //setSelection(newShape, e); 483 } 484 485 }); 362 486 } 363 487 function clearSelection() { 364 if (selectedShape) { 365 if (selectedShape.type !== 'marker') { 366 selectedShape.setEditable(false); 367 if (shiftKeyPressed == false) { 368 for (var i = 0; i < selectedShapes.length; i++) { 369 selectedShapes[i].setEditable(false); 370 } 371 selectedShapes = []; 488 if (selectedShape) { 489 if (selectedShape.type !== 'marker') { 490 selectedShape.setEditable(false); 491 if (shiftKeyPressed == false) { 492 for (var i = 0; i < selectedShapes.length; i++) { 493 selectedShapes[i].setEditable(false); 372 494 } 373 } 374 selectedShape = null; 375 } 376 } 377 495 selectedShapes = []; 496 } 497 } 498 selectedShape = null; 499 } 500 } 501 378 502 //Set selection for the selected overlay 379 function setSelection(shape, e) { 503 function setSelection(shape, e) { 504 console.log("this fires"); 380 505 if (shape.type !== 'marker') { 381 506 if (shiftKeyPressed == false) { 382 507 if (e.vertex == undefined) { 383 if (e.edge == undefined) {508 if (e.edge == undefined) { 384 509 clearSelection(); 385 510 shape.setEditable(true); … … 388 513 } 389 514 if (selectedShapes.includes(shape)) { 390 if(e.vertex == undefined ) { 391 if(e.edge == undefined) { 392 //removeFromSelectedShapes(shape); 515 if (e.vertex == undefined) { 516 if (e.edge == undefined) { 517 allowDeselect = true; 518 removeFromSelectedShapes(shape); 393 519 } 394 520 } 395 521 } else { 522 allowDeselect = false; 523 console.log("allowDeselect",allowDeselect); 396 524 shape.setEditable(true); 397 525 selectedShapes.push(shape); 398 526 } 399 400 527 401 528 //Send the values to be updated … … 410 537 } 411 538 selectedShape = shape; 412 } 413 414 function boundsExtraction() { 415 416 539 settingThePath(); 417 540 } 418 541 419 542 function removeFromSelectedShapes(shape) { 420 543 if (selectedShapes.includes(shape)) { 421 if (allowDeselect) {544 if (allowDeselect) { 422 545 const index = selectedShapes.indexOf(shape); 546 console.log(index); 423 547 selectedShapes.splice(index, 1); 424 548 shape.setEditable(false); 425 549 } 426 allowDeselect = false; 427 } 428 } 429 550 console.log("allowDeselect",allowDeselect); 551 allowDeselect = true; 552 } 553 console.log(selectedShapes.length); 554 } 555 430 556 //Set selected thickness 431 557 function setSelectedThickness(sWeight) { … … 451 577 //set selected fill colour 452 578 function setSelectedShapeColor(color) { 453 if (selectedShapes.length > 579 if (selectedShapes.length > 0) { 454 580 for (var i = 0; i < selectedShapes.length; i++) { 455 581 selectedShapes[i].set('fillColor', color); … … 457 583 } 458 584 } 585 } 586 function getElementByXpath(path) { 587 return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue; 459 588 } 460 589 … … 474 603 } 475 604 } 476 function selectAll() {605 function selectAll() { 477 606 shiftKeyPressed = true; 478 607 var e = new Object(); 479 608 e.vertex = undefined; 480 609 selectedShapes = []; 481 for (var i = 0; i< overlays.length; i++) {610 for (var i = 0; i < overlays.length; i++) { 482 611 setSelection(overlays[i], e); 483 612 } … … 485 614 } 486 615 487 function deselectAll() {488 for (var i = 0; i < selectedShapes.length; i++) {616 function deselectAll() { 617 for (var i = 0; i < selectedShapes.length; i++) { 489 618 selectedShapes[i].setEditable(false); 490 619 } 491 620 selectedShapes = []; 492 621 } 493 494 622 495 623 function printHistory() { … … 497 625 console.log("present ", presentOverlays); 498 626 console.log("undone ", undoneOverlays); 499 console.log(entryType); 627 console.log(mouseState); 628 629 //console.log(mal); 630 //console.log(maj); 631 //console.log(gal); 632 //console.log(gaj); 633 634 635 } 636 637 function mouseMove(ev) { 638 639 //How can I know the state of mouse from here 640 if (mouseState == 'down') { 641 //console.log('mouse down state') 642 } 643 644 if (mouseState == 'up') { 645 //console.log('mouse up state') 646 } 647 } 648 649 function mouseDown(ev) { 650 mouseState = "down"; 651 // console.log('Down State you can now start dragging'); 652 //do not write any code here in this function 653 } 654 655 function mouseUp(ev) { 656 mouseState = "up"; 657 // console.log('up state you cannot drag now because you are not holding your mouse') 658 //do not write any code here in this function 500 659 } 501 660 502 661 function deleteSelectedShape() { 662 //console.log("this fires"); 503 663 historyOverlayPush(); 504 664 for (var i = 0; i < selectedShapes.length; i++) { 505 665 selectedShapes[i].setMap(null); 506 666 507 667 if (overlays.includes(selectedShapes[i])) { 508 668 const index = overlays.indexOf(selectedShapes[i]); 509 669 overlays.splice(index, 1); 510 670 selectedShapes[i].setEditable(false); 511 } 671 } 512 672 } 513 673 selectedShapes = []; 674 //console.log("this fires"); 514 675 presentOverlayPush(); 515 676 } 516 677 517 678 function deleteAllShape() { 679 //console.log("this fires"); 518 680 historyOverlayPush(); 519 681 for (var i = 0; i < overlays.length; i++) { … … 521 683 } 522 684 overlays = []; 685 //console.log("this fires"); 523 686 presentOverlayPush(); 524 687 } 525
Note:
See TracChangeset
for help on using the changeset viewer.