Changeset 32722 for gs3-extensions/map-editor
- Timestamp:
- 2019-01-09T11:39:08+13:00 (5 years ago)
- Location:
- gs3-extensions/map-editor/DrawingManager
- Files:
-
- 12 added
- 3 edited
Legend:
- Unmodified
- Added
- Removed
-
gs3-extensions/map-editor/DrawingManager/historyManager.js
r32721 r32722 1 1 var prevOverlays = []; 2 var presentOverlays = []; 3 var undoneOverlays = []; 2 4 3 5 function undo() { 4 6 5 7 for (var i = 0; i < overlays.length; i++) { 6 8 overlays[i].setMap(null); 7 9 8 10 } 9 if (prevOverlays.length != 0){ 11 if (prevOverlays.length != 0) { 12 selectedShapes = []; 10 13 overlays = []; 11 console.log(prevOverlays);14 undoneOverlaysPush(); 12 15 var prev_overlay = prevOverlays.pop(); 13 16 14 for (var i = 0; i < prev_overlay.length; i++) { 17 if(prev_overlay.length > 0) { 18 for (var i = 0; i < prev_overlay.length; i++) { 15 19 overlays[i] = prev_overlay[i]; 16 20 overlays[i].setMap(map); 17 } 18 19 } 20 21 } 22 } 23 24 25 } 26 21 27 //Deactivated at the moment 22 if (enableSelectionFeature){28 if (enableSelectionFeature) { 23 29 selectedShapes = []; 24 30 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++){31 var lastEntry = prevOverlays[prevOverlays.length - 1][i]; 32 console.log(prevOverlays[prevOverlays.length - 1].length); 33 34 for (var i = 0; i < lastEntry.length; i++) { 29 35 selectedShapes.push(prevOverlays) 30 36 console.log("comes here"); 31 37 } 32 33 } 38 39 } 40 } 41 42 function redo() { 34 43 35 36 } 37 38 function clonePath(path) 39 { 44 if (undoneOverlays.length != 0) { 45 selectedShapes = []; 46 for (var i = 0; i < overlays.length; i++) { 47 overlays[i].setMap(null); 48 } 49 overlays = []; 50 var lastEntry = undoneOverlays[undoneOverlays.length - 1]; 51 for (var i = 0; i < lastEntry.length; i++) { 52 overlays[i] = lastEntry[i]; 53 overlays[i].setMap(map); 54 } 55 var conditionPrevious = presentOverlays[presentOverlays.length - 1] !== undefined && presentOverlays[presentOverlays.length - 1].length !== 0 && presentOverlays.length !== 0; 56 57 if (conditionPrevious){ 58 prevOverlays.push(presentOverlays[0]); 59 } 60 61 presentOverlays = []; 62 //console.log("last undone", undoneOverlays[undoneOverlays.length -1]); 63 presentOverlays.push(undoneOverlays[undoneOverlays.length - 1]); 64 undoneOverlays.pop(); 65 66 } 67 68 } 69 70 function clonePath(path) { 40 71 var clone_path = []; 41 72 42 73 for (var i = 0; i < path.length; i++) { 43 74 var lati = path.getAt(i).lat(); … … 49 80 clone_path.push(clone_lat_lng); 50 81 } 51 82 52 83 return clone_path; 53 84 } 54 85 55 function clonePolyline(polyline) 56 { 57 var path = polyline.getPath(); 58 var geodesic = polyline.geodesic; 59 var strokeColor = polyline.strokeColor; 86 function clonePolyline(polyline) { 87 var path = polyline.getPath(); 88 var geodesic = polyline.geodesic; 89 var strokeColor = polyline.strokeColor; 60 90 var strokeOpacity = polyline.strokeOpacity; 61 var strokeWeight 62 var clone_path 63 //var editable = rect.editable; 64 91 var strokeWeight = polyline.strokeWeight; 92 var clone_path = clonePath(path); 93 //var editable = rect.editable; 94 65 95 var clone_polyline = new google.maps.Polyline({ 66 geodesic: geodesic,67 strokeColor: strokeColor,68 strokeOpacity: strokeOpacity,69 strokeWeight: strokeWeight,70 path: clone_path,71 draggable: true,72 editable: false73 });74 96 geodesic: geodesic, 97 strokeColor: strokeColor, 98 strokeOpacity: strokeOpacity, 99 strokeWeight: strokeWeight, 100 path: clone_path, 101 draggable: true, 102 editable: false 103 }); 104 75 105 clone_polyline.type = google.maps.drawing.OverlayType.POLYLINE; 76 106 77 107 return clone_polyline; 78 108 } 79 109 80 function clonePolygon(polygon) 81 { 82 var path = polygon.getPath(); 83 var geodesic = polygon.geodesic; 84 var strokeColor = polygon.strokeColor; 110 function clonePolygon(polygon) { 111 var path = polygon.getPath(); 112 var geodesic = polygon.geodesic; 113 var strokeColor = polygon.strokeColor; 85 114 var strokeOpacity = polygon.strokeOpacity; 86 var strokeWeight 87 var fillColor 88 var fillOpacity 89 var clone_path 90 //var editable = rect.editable; 91 115 var strokeWeight = polygon.strokeWeight; 116 var fillColor = polygon.fillColor; 117 var fillOpacity = polygon.fillOpacity; 118 var clone_path = clonePath(path); 119 //var editable = rect.editable; 120 92 121 var clone_polygon = new google.maps.Polygon({ 93 geodesic: geodesic,94 strokeColor: strokeColor,95 strokeOpacity: strokeOpacity,96 strokeWeight: strokeWeight,97 fillColor: fillColor,98 fillOpacity: fillOpacity,99 path: clone_path,100 draggable: true,101 editable: false102 });103 122 geodesic: geodesic, 123 strokeColor: strokeColor, 124 strokeOpacity: strokeOpacity, 125 strokeWeight: strokeWeight, 126 fillColor: fillColor, 127 fillOpacity: fillOpacity, 128 path: clone_path, 129 draggable: true, 130 editable: false 131 }); 132 104 133 clone_polygon.type = google.maps.drawing.OverlayType.POLYGON; 105 134 106 135 return clone_polygon; 107 136 } 108 137 109 function cloneRectangle(rect) 110 { 111 var strokeColor = rect.strokeColor; 138 function cloneRectangle(rect) { 139 var strokeColor = rect.strokeColor; 112 140 var strokeOpacity = rect.strokeOpacity; 113 var strokeWeight 114 var fillColor 115 var fillOpacity 116 var bounds 117 //var editable = rect.editable; 118 141 var strokeWeight = rect.strokeWeight; 142 var fillColor = rect.fillColor; 143 var fillOpacity = rect.fillOpacity; 144 var bounds = rect.getBounds(); 145 //var editable = rect.editable; 146 119 147 var clone_rect = new google.maps.Rectangle({ 120 strokeColor: strokeColor,121 strokeOpacity: strokeOpacity,122 strokeWeight: strokeWeight,123 fillColor: fillColor,124 fillOpacity: fillOpacity,125 bounds: bounds,126 draggable: true,127 editable: false128 });129 148 strokeColor: strokeColor, 149 strokeOpacity: strokeOpacity, 150 strokeWeight: strokeWeight, 151 fillColor: fillColor, 152 fillOpacity: fillOpacity, 153 bounds: bounds, 154 draggable: true, 155 editable: false 156 }); 157 130 158 clone_rect.type = google.maps.drawing.OverlayType.RECTANGLE; 131 159 132 160 return clone_rect; 133 161 } 134 162 135 function cloneCircle(circ) 136 { 137 var strokeColor = circ.strokeColor; 163 function cloneCircle(circ) { 164 var strokeColor = circ.strokeColor; 138 165 var strokeOpacity = circ.strokeOpacity; 139 var strokeWeight 140 var fillColor 141 var fillOpacity 142 var center 143 var radius 144 //var editable = rect.editable; 145 166 var strokeWeight = circ.strokeWeight; 167 var fillColor = circ.fillColor; 168 var fillOpacity = circ.fillOpacity; 169 var center = circ.center; 170 var radius = circ.radius; 171 //var editable = rect.editable; 172 146 173 var clone_circ = new google.maps.Circle({ 147 strokeColor: strokeColor,148 strokeOpacity: strokeOpacity,149 strokeWeight: strokeWeight,150 fillColor: fillColor,151 fillOpacity: fillOpacity,152 center: center,153 radius: radius,154 draggable: true,155 editable: false156 });157 174 strokeColor: strokeColor, 175 strokeOpacity: strokeOpacity, 176 strokeWeight: strokeWeight, 177 fillColor: fillColor, 178 fillOpacity: fillOpacity, 179 center: center, 180 radius: radius, 181 draggable: true, 182 editable: false 183 }); 184 158 185 clone_circ.type = google.maps.drawing.OverlayType.CIRCLE; 159 186 160 187 return clone_circ; 161 188 } 162 189 163 164 function cloneShape(shape) 165 { 190 function cloneShape(shape) { 166 191 if (shape.type === google.maps.drawing.OverlayType.POLYLINE) { 167 192 var clone_polyline = clonePolyline(shape); 168 193 return clone_polyline; 169 } 170 else if (shape.type === google.maps.drawing.OverlayType.POLYGON) { 194 } else if (shape.type === google.maps.drawing.OverlayType.POLYGON) { 171 195 var clone_polygon = clonePolygon(shape); 172 196 return clone_polygon; 173 } 174 else if (shape.type === google.maps.drawing.OverlayType.RECTANGLE) { 197 } else if (shape.type === google.maps.drawing.OverlayType.RECTANGLE) { 175 198 var clone_rect = cloneRectangle(shape); 176 199 return clone_rect; 177 178 } 179 else if (shape.type === google.maps.drawing.OverlayType.CIRCLE) { 200 201 } else if (shape.type === google.maps.drawing.OverlayType.CIRCLE) { 180 202 var clone_circ = cloneCircle(shape); 181 203 return clone_circ; 182 183 } 184 else { 204 205 } else { 185 206 console.error("Unrecognized shape: " + shape); 186 207 return null; 187 208 } 188 } 189 190 function overlayItemIsShape(overlay_item) 191 {209 console.log(cloneShape); 210 } 211 212 function overlayItemIsShape(overlay_item) { 192 213 var type = overlay_item.type; 193 214 194 215 is_shape = (type === google.maps.drawing.OverlayType.POLYLINE) 195 216 || (type === google.maps.drawing.OverlayType.POLYGON) 196 217 || (type === google.maps.drawing.OverlayType.RECTANGLE) 197 218 || (type === google.maps.drawing.OverlayType.CIRCLE); 198 199 return is_shape; 200 } 201 202 function historyOverlayPush() 203 { 204 console.log("comes here"); 219 220 return is_shape; 221 } 222 223 function historyOverlayPush() { 224 undoneOverlays = []; 205 225 var overlays_copy = []; 206 for (var i = 0; i <overlays.length; i++) {226 for (var i = 0; i < overlays.length; i++) { 207 227 var clone_shape = cloneShape(overlays[i]); 208 228 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! 229 addShapeListeners(clone_shape, null); // don't have an overlay event! 230 } else { 231 addMarkerListeners(clone_shape, null); // don't have an overlay event! 213 232 } 214 233 overlays_copy[i] = clone_shape; 215 234 } 216 217 prevOverlays.push(overlays_copy); 218 } 235 236 prevOverlays.push(overlays_copy); 237 238 } 239 240 function presentOverlayPush() { 241 if (resizeEntry) { 242 prevOverlays.push(presentOverlays[0]); 243 } 244 presentOverlays = []; 245 var overlays_copy = []; 246 for (var i = 0; i < overlays.length; i++) { 247 var clone_shape = cloneShape(overlays[i]); 248 if (overlayItemIsShape(clone_shape)) { 249 addShapeListeners(clone_shape, null); // don't have an overlay event! 250 } else { 251 addMarkerListeners(clone_shape, null); // don't have an overlay event! 252 } 253 overlays_copy[i] = clone_shape; 254 } 255 presentOverlays.push(overlays_copy); 256 } 257 258 function undoneOverlaysPush() { 259 var conditionUndone = presentOverlays[presentOverlays.length - 1] !== undefined && presentOverlays[presentOverlays.length - 1].length !== 0 && presentOverlays.length !== 0; 260 261 if (conditionUndone) { 262 undoneOverlays.push(presentOverlays[0]); 263 } 264 presentOverlays = []; 265 var conditionPresent = prevOverlays[prevOverlays.length - 1] !== undefined && prevOverlays[prevOverlays.length - 1].length !== 0 && prevOverlays.length !== 0; 266 267 if (conditionPresent) { 268 presentOverlays.push(prevOverlays[prevOverlays.length - 1]); 269 270 } 271 //prevOverlays.pop(); 272 273 } -
gs3-extensions/map-editor/DrawingManager/index.html
r32721 r32722 20 20 <button onclick="printHistory()" accesskey="q">Print History</button> 21 21 <button onclick="undo()" accesskey="n">Undo</button> 22 <button onclick="redo Movement()" accesskey="n">Redo</button>22 <button onclick="redo()" accesskey="n">Redo</button> 23 23 24 24 </div> -
gs3-extensions/map-editor/DrawingManager/index.js
r32721 r32722 8 8 var enableSelectionFeature = false; 9 9 var beingDragged = false; 10 10 var resizeEntry = false; 11 11 12 12 var deselectedLog = [] … … 65 65 } 66 66 67 document.getElementById("thicknessRange").addEventListener("mousedown", shapeSpecsChange); 68 document.getElementById("colourOpacity").addEventListener("mousedown", shapeSpecsChange); 69 document.getElementById("color-palette1").addEventListener("mousedown", shapeSpecsChange); 67 document.getElementById("thicknessRange").addEventListener("mousedown", shapeSpecsChangeMD); 68 document.getElementById("colourOpacity").addEventListener("mousedown", shapeSpecsChangeMD); 69 document.getElementById("color-palette1").addEventListener("mousedown", shapeSpecsChangeMD); 70 71 document.getElementById("thicknessRange").addEventListener("mouseup", shapeSpecsChangeMU); 72 document.getElementById("colourOpacity").addEventListener("mouseup", shapeSpecsChangeMU); 73 //document.getElementById("color-palette1").addEventListener("mouseup", shapeSpecsChangeMU); 70 74 }); 71 75 72 function shapeSpecsChange () {76 function shapeSpecsChangeMD() { 73 77 if (selectedShapes.length > 0) { 74 78 historyOverlayPush(); 75 79 76 80 } 81 } 82 83 function shapeSpecsChangeMU() { 84 if (selectedShapes.length > 0) { 85 presentOverlayPush(); 86 } 77 87 } 78 88 … … 84 94 selectColor(color); 85 95 setSelectedShapeColor(color); 96 shapeSpecsChangeMU(); 86 97 }); 87 98 return button; … … 156 167 google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) { 157 168 158 console.log(e)159 160 169 historyOverlayPush(); 161 170 … … 164 173 newShape.type = e.type; 165 174 166 //historyOverlayPush();175 presentOverlayPush(); 167 176 168 177 if (e.type !== google.maps.drawing.OverlayType.MARKER) { … … 235 244 function vertexAndPolyDel(e, newShape) { 236 245 var vertex = e.vertex; 237 246 //console.log(e) 238 247 if (e.vertex !== undefined) { 248 historyOverlayPush(); 239 249 if (newShape.type === google.maps.drawing.OverlayType.POLYGON) { 240 250 var path = newShape.getPaths().getAt(e.path); … … 258 268 //cLICK EVENT IF A MARKER IS CREATED 259 269 google.maps.event.addListener(newShape, 'click', function (e) { 270 console.log("lol"); 260 271 setSelection(newShape, e); 261 272 }); … … 270 281 google.maps.event.addListener(newShape, 'click', function (e) { 271 282 vertexAndPolyDel(e, newShape); 272 console.log(e.edge); 273 }); 274 275 google.maps.event.addListener(newShape, 'dragstart', function () { 283 }); 284 285 google.maps.event.addListener(newShape, 'dragstart', function (e) { 276 286 beingDragged = true; 277 287 historyOverlayPush(); 288 278 289 }); 279 290 280 291 google.maps.event.addListener(newShape, 'dragend', function () { 281 292 beingDragged = false; 293 presentOverlayPush(); 282 294 }); 283 295 284 296 //Store information after the event ends 285 google.maps.event.addListener(newShape, 'bounds_changed', function () { 286 console.log("bounds_changed"); 297 google.maps.event.addListener(newShape, 'bounds_changed', function (e) { 298 //console.log(e); 299 287 300 if (beingDragged == false){ 288 historyOverlayPush(); 301 resizeEntry = true; 302 presentOverlayPush(); 303 resizeEntry = false; 289 304 } 290 305 }); 291 306 292 307 google.maps.event.addListener(newShape, 'resize', function () { 293 console.log("lmao");294 308 //historyOverlayPush(); 295 309 … … 298 312 //Add an event listener to select a shape if the mouse hovers over it 299 313 google.maps.event.addListener(newShape, 'mousedown', function (e) { 314 // console.log(e); 300 315 if (drawingManager.drawingMode == null) { 301 316 setSelection(newShape, e); … … 457 472 function printHistory() { 458 473 459 console.log(prevOverlays); 460 console.log(selectedShapes); 474 console.log("prev", prevOverlays); 475 console.log("present ", presentOverlays); 476 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); 461 483 } 462 484 463 485 function deleteSelectedShape() { 486 historyOverlayPush(); 464 487 for (var i = 0; i < selectedShapes.length; i++) { 465 488 selectedShapes[i].setMap(null); 466 489 } 467 490 selectedShapes = []; 491 presentOverlayPush(); 468 492 } 469 493 470 494 function deleteAllShape() { 495 historyOverlayPush(); 471 496 for (var i = 0; i < overlays.length; i++) { 472 497 overlays[i].setMap(null); … … 474 499 } 475 500 overlays = []; 476 } 477 501 presentOverlayPush(); 502 } 503
Note:
See TracChangeset
for help on using the changeset viewer.