Changeset 32723
- Timestamp:
- 2019-01-11T12:26:07+13:00 (5 years ago)
- Location:
- gs3-extensions/map-editor/DrawingManager
- Files:
-
- 11 added
- 1 deleted
- 3 edited
Legend:
- Unmodified
- Added
- Removed
-
gs3-extensions/map-editor/DrawingManager/historyManager.js
r32722 r32723 2 2 var presentOverlays = []; 3 3 var undoneOverlays = []; 4 var enableSelectionFeature = false; 4 5 5 6 function undo() { … … 53 54 overlays[i].setMap(map); 54 55 } 55 var conditionPrevious = presentOverlays[presentOverlays.length - 1] !== undefined && presentOverlays[presentOverlays.length - 1].length !== 0 && presentOverlays.length !== 0;56 var conditionPrevious = presentOverlays[presentOverlays.length - 1] !== undefined ; 56 57 57 58 if (conditionPrevious){ … … 186 187 187 188 return clone_circ; 189 } 190 191 function cloneMarker(marker) { 192 var position = marker.getPosition(); 193 var anchorPoint = marker.anchorPoint; 194 var clone_marker = new google.maps.Marker({ 195 anchorPoint: anchorPoint, 196 position : position, 197 clickable: true, 198 draggable: true, 199 editable: false 200 }) 201 clone_marker.type = google.maps.drawing.OverlayType.MARKER; 202 203 return clone_marker; 188 204 } 189 205 … … 204 220 205 221 } else { 206 console.error("Unrecognized shape: " +shape);207 return null;222 var clone_marker = cloneMarker(shape); 223 return clone_marker; 208 224 } 209 225 console.log(cloneShape); … … 225 241 var overlays_copy = []; 226 242 for (var i = 0; i < overlays.length; i++) { 243 227 244 var clone_shape = cloneShape(overlays[i]); 228 245 if (overlayItemIsShape(clone_shape)) { … … 257 274 258 275 function undoneOverlaysPush() { 259 var conditionUndone = presentOverlays[presentOverlays.length - 1] !== undefined && presentOverlays[presentOverlays.length - 1].length !== 0 && presentOverlays.length !== 0;276 var conditionUndone = presentOverlays[presentOverlays.length - 1] !== undefined; 260 277 261 278 if (conditionUndone) { … … 263 280 } 264 281 presentOverlays = []; 265 var conditionPresent = prevOverlays[prevOverlays.length - 1] !== undefined && prevOverlays[prevOverlays.length - 1].length !== 0 && prevOverlays.length !== 0;282 var conditionPresent = prevOverlays[prevOverlays.length - 1] !== undefined; 266 283 267 284 if (conditionPresent) { … … 269 286 270 287 } 271 //prevOverlays.pop(); 272 273 } 288 } -
gs3-extensions/map-editor/DrawingManager/index.html
r32722 r32723 18 18 <button onclick="deleteAllShape()" accesskey="c">Clear All</button> 19 19 <button onclick="deleteSelectedShape()" accesskey="b">Delete Selected</button> 20 <button onclick="printHistory()" accesskey="q">Print History</button>21 20 <button onclick="undo()" accesskey="n">Undo</button> 22 21 <button onclick="redo()" accesskey="n">Redo</button> -
gs3-extensions/map-editor/DrawingManager/index.js
r32722 r32723 1 1 var debug = false; 2 var redoPressed = false;3 var undoPressed = 0;4 2 var shiftKeyPressed = false; 5 var dragFired = false;6 var selectionPass = true;7 var chosen;8 var enableSelectionFeature = false;9 3 var beingDragged = false; 10 4 var resizeEntry = false; 11 12 var deselectedLog = [] 13 var selectedShapesLog = []; 14 var prevShape = []; 15 var nextShape = []; 16 var prevLog = []; 17 var nextLog = []; 18 var dragged = 0; 5 var allowDeselect = false; 19 6 var colors = ['#1E90FF', '#FF1493', '#4B0082', '#32CD32', '#FF8C00', '#000000']; 20 7 var selectedColor; … … 22 9 var thicknessValue = 1; 23 10 var opacityValue = 0.4; 24 var polyOptions = {25 fillColor: '#CA4A2F',26 strokeWeight: thicknessValue,27 fillOpacity: opacityValue,28 editable: true,29 draggable: true,30 geodesic: false,31 };32 33 11 var overlays = []; 34 12 var drawingManager; 35 13 var selectedShape; 36 14 var selectedShapes = []; 37 38 15 var map = null; 39 16 var faj, fal, maj, mal; 17 var polyOptions = {fillColor: '#CA4A2F', strokeWeight: thicknessValue, fillOpacity: opacityValue, editable: true, draggable: true, geodesic: false}; 40 18 41 19 … … 71 49 document.getElementById("thicknessRange").addEventListener("mouseup", shapeSpecsChangeMU); 72 50 document.getElementById("colourOpacity").addEventListener("mouseup", shapeSpecsChangeMU); 73 //document.getElementById("color-palette1").addEventListener("mouseup", shapeSpecsChangeMU);74 51 }); 75 52 … … 77 54 if (selectedShapes.length > 0) { 78 55 historyOverlayPush(); 79 80 56 } 81 57 } … … 137 113 138 114 map = new google.maps.Map(document.getElementById('map'), { 139 center: { 140 lat: -34.397, 141 lng: 150.644 115 center: {lat: -34.397, lng: 150.644 142 116 }, 143 zoom: 2, 144 //mapTypeId: 'map' 145 117 zoom: 8, 146 118 }); 147 119 148 120 drawingManager = new google.maps.drawing.DrawingManager({ 149 drawingMode: google.maps.drawing.OverlayType. RECTANGLE,121 drawingMode: google.maps.drawing.OverlayType.MARKER, 150 122 drawingControl: true, 151 123 drawingControlOptions: { … … 172 144 var newShape = e.overlay; 173 145 newShape.type = e.type; 174 146 175 147 presentOverlayPush(); 176 148 … … 189 161 if (shiftKeyPressed == false) { 190 162 clearSelection(); 191 if (chosen !== null) { 192 deselectedLog.push("deselected") 193 deselectedLog = []; 194 chosen = null; 195 selectedShape = null; 196 197 } 198 } 199 }); 200 201 //Setting drawing tool option 163 selectedShape = null; 164 } 165 }); 166 167 //Keyboard shortcuts 202 168 document.addEventListener('keydown', function () { 203 //if (event.code == 'KeyX' && (event.ctrlKey || event.metaKey)) 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 } 204 187 if (event.code == 'Digit0' || event.code == 'Numpad0' || event.code == 'Backquote') { 205 188 //clearSelection(); … … 218 201 printHistory(); 219 202 } 220 //console.log(event.code);203 // console.log(event.code); 221 204 }); 222 205 … … 261 244 } 262 245 } 246 presentOverlayPush(); 263 247 } 264 248 } … … 267 251 { 268 252 //cLICK EVENT IF A MARKER IS CREATED 269 google.maps.event.addListener(newShape, 'click', function (e) { 270 console.log("lol"); 271 setSelection(newShape, e); 272 }); 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 beingDragged = true; 260 historyOverlayPush(); 261 262 }); 263 264 google.maps.event.addListener(newShape, 'dragend', function () { 265 beingDragged = false; 266 presentOverlayPush(); 267 allowDeselect = false; 268 }); 273 269 } 274 270 function addShapeListeners(newShape,e) 275 271 { 276 // Switch back to non-drawing mode after drawing a shape. 277 //drawingManager.setDrawingMode(null); 278 279 // Add an event listener that selects the newly-drawn shape when the user 280 // mouses down on it. 281 google.maps.event.addListener(newShape, 'click', function (e) { 282 vertexAndPolyDel(e, newShape); 283 }); 284 285 google.maps.event.addListener(newShape, 'dragstart', function (e) { 286 beingDragged = true; 287 historyOverlayPush(); 288 289 }); 272 // Add an event listener that selects the newly-drawn shape when the user 273 // mouses down on it. 274 google.maps.event.addListener(newShape, 'click', function (e) { 275 vertexAndPolyDel(e, newShape); 276 }); 277 278 279 google.maps.event.addListener(newShape, 'drag', function (e) { 280 281 //for(var i = 0; i < selectedShapes.length; i++) { 282 // if(newShape.type = 'rectangle') { 283 // var newBounds = { 284 // east: selectedShapes[i].getBounds().ea.l + (selectedShapes[i].getBounds().ea.l - faj), 285 // north: selectedShapes[i].getBounds().la.l + (selectedShapes[i].getBounds().la.l - fal), 286 // south: selectedShapes[i].getBounds().la.j + (selectedShapes[i].getBounds().la.j - maj), 287 // west: selectedShapes[i].getBounds().ea.j + (selectedShapes[i].getBounds().ea.j - mal) 288 // } 289 // selectedShapes[i].set 290 // } else { 290 291 291 google.maps.event.addListener(newShape, 'dragend', function () { 292 beingDragged = false; 293 presentOverlayPush(); 294 }); 295 296 //Store information after the event ends 297 google.maps.event.addListener(newShape, 'bounds_changed', function (e) { 298 //console.log(e); 299 300 if (beingDragged == false){ 301 resizeEntry = true; 302 presentOverlayPush(); 303 resizeEntry = false; 304 } 305 }); 306 307 google.maps.event.addListener(newShape, 'resize', function () { 308 //historyOverlayPush(); 309 310 }); 311 312 //Add an event listener to select a shape if the mouse hovers over it 313 google.maps.event.addListener(newShape, 'mousedown', function (e) { 314 // console.log(e); 315 if (drawingManager.drawingMode == null) { 316 setSelection(newShape, e); 317 } 318 }); 292 // } 293 // 294 //} 295 296 297 }); 298 299 300 google.maps.event.addListener(newShape, 'dragstart', function (e) { 301 302 beingDragged = true; 303 historyOverlayPush(); 304 305 }); 306 307 google.maps.event.addListener(newShape, 'dragend', function () { 308 beingDragged = false; 309 presentOverlayPush(); 310 allowDeselect = false; 311 }); 312 313 //Store information after the event ends 314 google.maps.event.addListener(newShape, 'bounds_changed', function (e) { 315 if (beingDragged == false){ 316 resizeEntry = true; 317 presentOverlayPush(); 318 resizeEntry = false; 319 } 320 }); 321 322 //Add an event listener to select a shape if the mouse hovers over it 323 google.maps.event.addListener(newShape, 'mousedown', function (e) { 324 if (e.vertex !== undefined || e.edge !== undefined) { 325 historyOverlayPush() 326 } 327 if (drawingManager.drawingMode == null) { 328 setSelection(newShape, e); 329 } 330 }); 331 332 google.maps.event.addListener(newShape, 'mouseup', function (e) { 333 if (e.vertex !== undefined || e.edge !== undefined) { 334 presentOverlayPush() 335 } 336 else{ 337 removeFromSelectedShapes(newShape); 338 } 339 }); 319 340 } 320 341 function clearSelection() { … … 334 355 335 356 //Set selection for the selected overlay 336 function setSelection(shape, e) { 357 function setSelection(shape, e) { 337 358 if (shape.type !== 'marker') { 338 359 if (shiftKeyPressed == false) { 339 if (e.vertex == undefined) { 340 //if ((shape.type != google.maps.drawing.OverlayType.POLYLINE)341 //&& (shape.type != google.maps.drawing.OverlayType.POLYGON)) {342 clearSelection();343 shape.setEditable(true);360 if (e.vertex == undefined) { 361 if(e.edge == undefined) { 362 clearSelection(); 363 shape.setEditable(true); 364 } 344 365 } 345 366 } 346 367 if (selectedShapes.includes(shape)) { 347 348 //shape.setEditable(false); 349 const index = selectedShapes.indexOf(shape); 350 selectedShapes.splice(index, 1); 368 if(e.vertex == undefined ) { 369 if(e.edge == undefined) { 370 //removeFromSelectedShapes(shape); 371 } 372 } 351 373 } else { 352 374 shape.setEditable(true); … … 354 376 } 355 377 356 if (debug) { 357 console.log(" len = " + selectedShapes.length); 358 } 378 359 379 //Send the values to be updated 360 380 var thi = shape.strokeWeight; … … 367 387 clearSelection(); 368 388 } 369 370 389 selectedShape = shape; 371 372 if (selectionPass == true) { 373 374 selectedShapesLog.push("selected", shiftKeyPressed, selectedShape); 375 nextLog.push(selectedShapesLog); 376 chosen = selectedShape; 377 selectionPass = false 378 } 379 380 var lastItem = nextLog[nextLog.length - 1]; 381 382 if (chosen !== selectedShape) { 383 if (dragFired == false) { 384 selectedShapesLog.push("selected", shiftKeyPressed, selectedShape) 385 chosen = selectedShape; 386 } 387 } 388 389 //console.log(prevLog); 390 selectedShapesLog = []; 391 } 392 390 } 391 392 393 function removeFromSelectedShapes(shape) { 394 if (selectedShapes.includes(shape)) { 395 if(allowDeselect) { 396 const index = selectedShapes.indexOf(shape); 397 selectedShapes.splice(index, 1); 398 shape.setEditable(false); 399 } 400 allowDeselect = false; 401 } 402 403 404 } 405 393 406 //Set selected thickness 394 407 function setSelectedThickness(sWeight) { … … 423 436 424 437 function updateMenuValues(thi, opa, fCol, sCol) { 425 426 438 //Update thickness slider and value on the settings menu 427 439 var thicknessSliderOutput = document.getElementById("thicknessRangeVal"); … … 438 450 } 439 451 } 440 441 function redoMovement() { 442 443 var lastItem = nextLog[nextLog.length - 1]; 444 var secondToLastItem = nextLog[nextLog.length - 2]; 445 var correctIndex; 446 447 if (undoPressed >= 1) { 448 correctIndex = lastItem; 449 } else { 450 correctIndex = secondToLastItem; 451 undoPressed++; 452 } 453 454 //If the history log is not empty 455 if (nextLog.length > 1) { 456 prevLog.push(lastItem); 457 458 //If undo has been pressed 459 460 if (lastItem[1] == ("polygon") || lastItem[1] == ("polyline")) { 461 selectedShape.setPath(correctIndex[2]); 462 } else { 463 selectedShape.setBounds(correctIndex[2]); 464 } 465 466 undoPressed = false; 467 redoPressed = true; 468 nextLog.pop(); 469 } 452 function selectAll(){ 453 shiftKeyPressed = true; 454 var e = new Object(); 455 e.vertex = undefined; 456 selectedShapes = []; 457 for(var i = 0; i< overlays.length; i++) { 458 setSelection(overlays[i], e); 459 } 460 shiftKeyPressed = false; 461 } 462 463 function deselectAll(){ 464 for(var i = 0; i < selectedShapes.length; i++) { 465 selectedShapes[i].setEditable(false); 466 } 467 selectedShapes = []; 470 468 } 471 469 472 470 function printHistory() { 473 474 471 console.log("prev", prevOverlays); 475 472 console.log("present ", presentOverlays); 476 473 console.log("undone ", undoneOverlays); 477 478 479 //for(var i = 0; i< prevOverlays.length; i++) {480 // console.log("prev", prevOverlays[prevOverlays.length -1][0].strokeColor);481 //}482 //console.log("present ", presentOverlays[0][0].strokeColor);483 474 } 484 475 … … 487 478 for (var i = 0; i < selectedShapes.length; i++) { 488 479 selectedShapes[i].setMap(null); 480 481 if (overlays.includes(selectedShapes[i])) { 482 const index = overlays.indexOf(selectedShapes[i]); 483 overlays.splice(index, 1); 484 selectedShapes[i].setEditable(false); 485 } 489 486 } 490 487 selectedShapes = []; … … 496 493 for (var i = 0; i < overlays.length; i++) { 497 494 overlays[i].setMap(null); 498 499 495 } 500 496 overlays = [];
Note:
See TracChangeset
for help on using the changeset viewer.