Changeset 32721 for gs3-extensions
- Timestamp:
- 2019-01-07T15:12:19+13:00 (5 years ago)
- Location:
- gs3-extensions/map-editor/DrawingManager
- Files:
-
- 5 added
- 3 edited
Legend:
- Unmodified
- Added
- Removed
-
gs3-extensions/map-editor/DrawingManager/historyManager.js
r32710 r32721 1 1 var prevOverlays = []; 2 2 3 function undo Movement() {4 console.log("*** undoMovement called"); 3 function undo() { 4 5 5 for (var i = 0; i < overlays.length; i++) { 6 6 overlays[i].setMap(null); 7 7 8 8 } 9 10 overlays = []; 11 12 var prev_overlay = prevOverlays.pop(); 13 14 for (var i = 0; i < prev_overlay.length; i++) { 15 overlays[i] = prev_overlay[i]; 16 overlays[i].setMap(map); 17 } 9 if (prevOverlays.length != 0){ 10 overlays = []; 11 console.log(prevOverlays); 12 var prev_overlay = prevOverlays.pop(); 13 14 for (var i = 0; i < prev_overlay.length; i++) { 15 overlays[i] = prev_overlay[i]; 16 overlays[i].setMap(map); 17 } 18 19 } 20 21 //Deactivated at the moment 22 if(enableSelectionFeature){ 23 selectedShapes = []; 24 var i = 0; 25 var lastEntry = prevOverlays[prevOverlays.length-1][i]; 26 console.log(prevOverlays[prevOverlays.length-1].length); 27 28 for(var i = 0; i < lastEntry.length; i++){ 29 selectedShapes.push(prevOverlays) 30 console.log("comes here"); 31 } 32 33 } 34 18 35 19 36 } … … 43 60 var strokeOpacity = polyline.strokeOpacity; 44 61 var strokeWeight = polyline.strokeWeight; 45 46 62 var clone_path = clonePath(path); 63 //var editable = rect.editable; 47 64 48 65 var clone_polyline = new google.maps.Polyline({ … … 51 68 strokeOpacity: strokeOpacity, 52 69 strokeWeight: strokeWeight, 53 path: clone_path 70 path: clone_path, 71 draggable: true, 72 editable: false 54 73 }); 55 74 … … 68 87 var fillColor = polygon.fillColor; 69 88 var fillOpacity = polygon.fillOpacity; 70 71 89 var clone_path = clonePath(path); 90 //var editable = rect.editable; 72 91 73 92 var clone_polygon = new google.maps.Polygon({ … … 78 97 fillColor: fillColor, 79 98 fillOpacity: fillOpacity, 80 path: clone_path 99 path: clone_path, 100 draggable: true, 101 editable: false 81 102 }); 82 103 … … 94 115 var fillOpacity = rect.fillOpacity; 95 116 var bounds = rect.getBounds(); 117 //var editable = rect.editable; 96 118 97 119 var clone_rect = new google.maps.Rectangle({ … … 101 123 fillColor: fillColor, 102 124 fillOpacity: fillOpacity, 103 bounds: bounds 125 bounds: bounds, 126 draggable: true, 127 editable: false 104 128 }); 105 129 … … 118 142 var center = circ.center; 119 143 var radius = circ.radius; 144 //var editable = rect.editable; 120 145 121 146 var clone_circ = new google.maps.Circle({ … … 126 151 fillOpacity: fillOpacity, 127 152 center: center, 128 radius: radius 153 radius: radius, 154 draggable: true, 155 editable: false 129 156 }); 130 157 … … 161 188 } 162 189 190 function overlayItemIsShape(overlay_item) 191 { 192 var type = overlay_item.type; 193 194 is_shape = (type === google.maps.drawing.OverlayType.POLYLINE) 195 || (type === google.maps.drawing.OverlayType.POLYGON) 196 || (type === google.maps.drawing.OverlayType.RECTANGLE) 197 || (type === google.maps.drawing.OverlayType.CIRCLE); 198 199 return is_shape; 200 } 201 163 202 function historyOverlayPush() 164 203 { 165 console.log(" historyOverlayPush()");204 console.log("comes here"); 166 205 var overlays_copy = []; 167 206 for (var i = 0; i<overlays.length; i++) { 168 207 var clone_shape = cloneShape(overlays[i]); 169 170 google.maps.event.addListener(clone_shape, 'click', function () { 171 setSelection(clone_shape); 172 }); 173 208 if (overlayItemIsShape(clone_shape)) { 209 addShapeListeners(clone_shape,null); // don't have an overlay event! 210 } 211 else { 212 addMarkerListeners(clone_shape,null); // don't have an overlay event! 213 } 174 214 overlays_copy[i] = clone_shape; 175 176 215 } 177 216 -
gs3-extensions/map-editor/DrawingManager/index.html
r32711 r32721 18 18 <button onclick="deleteAllShape()" accesskey="c">Clear All</button> 19 19 <button onclick="deleteSelectedShape()" accesskey="b">Delete Selected</button> 20 <button onclick="p olygonGetPath()" accesskey="q">Get Path</button>21 <button onclick="undo Movement()" accesskey="n">Undo</button>20 <button onclick="printHistory()" accesskey="q">Print History</button> 21 <button onclick="undo()" accesskey="n">Undo</button> 22 22 <button onclick="redoMovement()" accesskey="n">Redo</button> 23 23 -
gs3-extensions/map-editor/DrawingManager/index.js
r32711 r32721 6 6 var selectionPass = true; 7 7 var chosen; 8 9 var overlays_copy_obj = {}; 10 11 var prevEdge = { 12 east: "", 13 north: "", 14 south: "", 15 west: "" 16 } 17 var nextEdge = { 18 east: "", 19 north: "", 20 south: "", 21 west: "" 22 } 23 var prevVertex = { 24 lat: "", 25 lng: "" 26 }; 27 var nextVertex = { 28 lat: "", 29 lng: "" 30 }; 8 var enableSelectionFeature = false; 9 var beingDragged = false; 10 11 31 12 var deselectedLog = [] 32 13 var selectedShapesLog = []; … … 35 16 var prevLog = []; 36 17 var nextLog = []; 37 38 39 40 41 18 var dragged = 0; 42 19 var colors = ['#1E90FF', '#FF1493', '#4B0082', '#32CD32', '#FF8C00', '#000000']; … … 62 39 63 40 41 64 42 $(document).ready(function() { 65 43 //Update thickness … … 86 64 setSelectedOpacity(opacityValue); 87 65 } 66 67 document.getElementById("thicknessRange").addEventListener("mousedown", shapeSpecsChange); 68 document.getElementById("colourOpacity").addEventListener("mousedown", shapeSpecsChange); 69 document.getElementById("color-palette1").addEventListener("mousedown", shapeSpecsChange); 88 70 }); 89 71 90 91 92 //////////////////////////////////////////////////////////////////////////////////////// 72 function shapeSpecsChange() { 73 if (selectedShapes.length > 0) { 74 historyOverlayPush(); 75 76 } 77 } 78 93 79 function makeColorButton(color) { 94 80 var button = document.createElement('span'); … … 170 156 google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) { 171 157 172 158 console.log(e) 173 159 174 160 historyOverlayPush(); … … 177 163 var newShape = e.overlay; 178 164 newShape.type = e.type; 179 180 165 166 //historyOverlayPush(); 181 167 182 168 if (e.type !== google.maps.drawing.OverlayType.MARKER) { 183 184 // Switch back to non-drawing mode after drawing a shape. 185 //drawingManager.setDrawingMode(null); 186 187 // Add an event listener that selects the newly-drawn shape when the user 188 // mouses down on it. 189 google.maps.event.addListener(newShape, 'click', function (e) { 190 191 vertexAndPolyDel(e, newShape); 192 dragFired = false; 193 return; 194 195 }); 196 197 //Stores past event information 198 google.maps.event.addListener(newShape, 'dragstart', function () { 199 dragStartFunction(e, newShape); 200 }); 201 202 //Store information after the event ends 203 google.maps.event.addListener(newShape, 'dragend', function () { 204 historyOverlayPush(); 205 dragEndFunction(e, newShape); 206 }); 207 208 //Add an event listener to select a shape if the mouse hovers over it 209 google.maps.event.addListener(newShape, 'mousedown', function (e) { 210 if (drawingManager.drawingMode == null) { 211 setSelection(newShape, e); 212 dragFired = false; 213 } 214 }); 169 addShapeListeners(newShape,e); 215 170 setSelection(newShape, e); 216 171 } else { 217 //cLICK EVENT IF A MARKER IS CREATED 218 google.maps.event.addListener(newShape, 'click', function (e) { 219 setSelection(newShape, e); 220 }); 172 173 addMarkerListeners(newShape,e); 221 174 setSelection(newShape, e); 222 175 } 223 176 }); 224 225 //Deletes a vertex if clicked on it226 function vertexAndPolyDel(e, newShape) {227 var vertex = e.vertex;228 229 if (e.vertex !== undefined) {230 if (newShape.type === google.maps.drawing.OverlayType.POLYGON) {231 var path = newShape.getPaths().getAt(e.path);232 path.removeAt(e.vertex);233 if (path.length < 3) {234 newShape.setMap(null);235 }236 }237 if (newShape.type === google.maps.drawing.OverlayType.POLYLINE) {238 var path = newShape.getPath();239 path.removeAt(e.vertex);240 if (path.length < 2) {241 newShape.setMap(null);242 }243 }244 }245 }246 247 248 var i = 0;249 250 251 177 252 178 //Clears selection if clicked on the map when shift is not presseed … … 256 182 if (chosen !== null) { 257 183 deselectedLog.push("deselected") 258 updateHistory(deselectedLog);259 184 deselectedLog = []; 260 185 chosen = null; 186 selectedShape = null; 261 187 262 188 } … … 281 207 drawingManager.setDrawingMode('rectangle'); 282 208 } else if (event.code == 'KeyQ') { 283 p olygonGetPath();209 printHistory(); 284 210 } 285 211 // console.log(event.code); … … 306 232 } 307 233 308 234 //Deletes a vertex if clicked on it 235 function vertexAndPolyDel(e, newShape) { 236 var vertex = e.vertex; 237 238 if (e.vertex !== undefined) { 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 } 254 } 255 256 function addMarkerListeners(newShape,e) 257 { 258 //cLICK EVENT IF A MARKER IS CREATED 259 google.maps.event.addListener(newShape, 'click', function (e) { 260 setSelection(newShape, e); 261 }); 262 } 263 function addShapeListeners(newShape,e) 264 { 265 // Switch back to non-drawing mode after drawing a shape. 266 //drawingManager.setDrawingMode(null); 267 268 // Add an event listener that selects the newly-drawn shape when the user 269 // mouses down on it. 270 google.maps.event.addListener(newShape, 'click', function (e) { 271 vertexAndPolyDel(e, newShape); 272 console.log(e.edge); 273 }); 274 275 google.maps.event.addListener(newShape, 'dragstart', function () { 276 beingDragged = true; 277 historyOverlayPush(); 278 }); 279 280 google.maps.event.addListener(newShape, 'dragend', function () { 281 beingDragged = false; 282 }); 283 284 //Store information after the event ends 285 google.maps.event.addListener(newShape, 'bounds_changed', function () { 286 console.log("bounds_changed"); 287 if (beingDragged == false){ 288 historyOverlayPush(); 289 } 290 }); 291 292 google.maps.event.addListener(newShape, 'resize', function () { 293 console.log("lmao"); 294 //historyOverlayPush(); 295 296 }); 297 298 //Add an event listener to select a shape if the mouse hovers over it 299 google.maps.event.addListener(newShape, 'mousedown', function (e) { 300 if (drawingManager.drawingMode == null) { 301 setSelection(newShape, e); 302 } 303 }); 304 } 309 305 function clearSelection() { 310 306 if (selectedShape) { … … 326 322 if (shape.type !== 'marker') { 327 323 if (shiftKeyPressed == false) { 328 //if (e.vertex == undefined) { 329 console.log("**** e.vertex = " + e.vertex); 330 331 if ((shape.type != google.maps.drawing.OverlayType.POLYLINE) 332 && (shape.type != google.maps.drawing.OverlayType.POLYGON)) { 324 if (e.vertex == undefined) { 325 //if ((shape.type != google.maps.drawing.OverlayType.POLYLINE) 326 //&& (shape.type != google.maps.drawing.OverlayType.POLYGON)) { 333 327 clearSelection(); 334 328 shape.setEditable(true); … … 374 368 if (dragFired == false) { 375 369 selectedShapesLog.push("selected", shiftKeyPressed, selectedShape) 376 updateHistory(selectedShapesLog);377 370 chosen = selectedShape; 378 371 } … … 382 375 selectedShapesLog = []; 383 376 } 384 385 377 386 378 //Set selected thickness 387 379 function setSelectedThickness(sWeight) { … … 399 391 400 392 if (selectedShapes.length > 0) { 401 //historyOverlayPush();402 393 for (var i = 0; i < selectedShapes.length; i++) { 403 394 selectedShapes[i].set('fillOpacity', fOpacity); … … 409 400 function setSelectedShapeColor(color) { 410 401 if (selectedShapes.length > 0) { 411 historyOverlayPush();412 402 for (var i = 0; i < selectedShapes.length; i++) { 413 403 selectedShapes[i].set('fillColor', color); … … 432 422 selectColor(fCol); 433 423 } 434 }435 436 437 438 function undoMovementDragSelection() {439 var lastItem = prevLog[prevLog.length - 1];440 441 //If history array is not empty442 if (prevLog.length !== 0) {443 if (lastItem[0] = "dragStart") {444 //If the array has more than one index (polygons and polylines)445 if (lastItem[1] == ("polygon") || lastItem[1] == ("polyline")) {446 nextLog.push(lastItem);447 selectedShape.setPath(lastItem[2]);448 449 //If the array has only one index(rectangles and circles)450 } else {451 nextLog.push(lastItem);452 selectedShape.setBounds(lastItem[2]);453 }454 } else if (lastItem[0] = "selected") {}455 else if (lastItem[0] = "deselected") {}456 undoPressed = false;457 undoPressed = 0;458 prevLog.pop();459 }460 461 424 } 462 425 … … 492 455 } 493 456 494 function dragStartFunction(e, selectedShape) { 495 var newShape = e.overlay; 496 newShape.type = e.type; 497 if (selectedShape) { 498 var polyG = newShape.type === google.maps.drawing.OverlayType.POLYLINE; 499 var polyL = newShape.type === google.maps.drawing.OverlayType.POLYGON; 500 501 if (polyL || polyG) { 502 var latLngi = [] 503 var lati, 504 lngi; 505 for (var i = 0; i < selectedShape.getPath().length; i++) { 506 lati = selectedShape.getPath().getAt(i).lat(); 507 lngi = selectedShape.getPath().getAt(i).lng(); 508 //console.log("Vertex number",i, "'s latitude is", lati, "and longitude is", lngi); 509 prevVertex = { 510 lat: lati, 511 lng: lngi 512 }; 513 latLngi.push(prevVertex); 514 } 515 prevShape.push("dragStart", selectedShape.type, latLngi); 516 } else { 517 prevEdge = { 518 east: selectedShape.getBounds().ea.l, 519 north: selectedShape.getBounds().la.l, 520 south: selectedShape.getBounds().la.j, 521 west: selectedShape.getBounds().ea.j 522 } 523 prevShape.push("dragStart", selectedShape.type, prevEdge); 524 } 525 526 var lastItem = nextLog[nextLog.length - 1]; 527 if (lastItem[0] !== "dragEnd") { 528 prevLog.push(nextLog[nextLog.length - 1]); 529 } 530 531 prevLog.push(prevShape); 532 prevShape = []; 533 nextLog = []; 534 chosen = selectedShape; 535 dragFired = true; 536 } 537 } 538 539 function dragEndFunction(e, newShape) { 540 541 var newShape = e.overlay; 542 newShape.type = e.type; 543 if (selectedShape) { 544 var polyG = newShape.type === google.maps.drawing.OverlayType.POLYLINE; 545 var polyL = newShape.type === google.maps.drawing.OverlayType.POLYGON; 546 547 if (polyL || polyG) { 548 549 var latLngi = [] 550 var lati, 551 lngi; 552 553 for (var i = 0; i < selectedShape.getPath().length; i++) { 554 lati = selectedShape.getPath().getAt(i).lat(); 555 lngi = selectedShape.getPath().getAt(i).lng(); 556 nextVertex = { 557 lat: lati, 558 lng: lngi 559 }; 560 latLngi.push(nextVertex); 561 } 562 nextShape.push("dragEnd", selectedShape.type, latLngi); 563 } else { 564 565 nextEdge.east = selectedShape.getBounds().ea.l; 566 nextEdge.north = selectedShape.getBounds().la.l; 567 nextEdge.south = selectedShape.getBounds().la.j; 568 nextEdge.west = selectedShape.getBounds().ea.j; 569 570 nextShape.push("dragEnd", selectedShape.type, nextEdge); 571 } 572 } 573 for (var i = 0; i < prevLog.length; i++) { 574 if (prevLog[i][0] == "dragEnd") { 575 const index = i; 576 prevLog.splice(index, 1); 577 } 578 } 579 nextLog.push(nextShape); 580 nextShape = []; 581 chosen = selectedShape; 582 } 583 584 function updateHistory(eventArray) { 585 var lastItem = nextLog[nextLog.length - 1]; 586 if (nextLog.length > 0) { 587 prevLog.push(lastItem); 588 } 589 nextLog = []; 590 nextLog.push(eventArray); 591 eventArray = []; 592 dragFired = false; 593 594 } 595 596 function polygonGetPath() { 597 console.log(nextLog); 598 console.log(prevLog); 599 457 function printHistory() { 458 459 console.log(prevOverlays); 460 console.log(selectedShapes); 600 461 } 601 462
Note:
See TracChangeset
for help on using the changeset viewer.