Changeset 32722

Show
Ignore:
Timestamp:
09.01.2019 11:39:08 (6 months ago)
Author:
ak19
Message:

Redo and undo working

Location:
gs3-extensions/map-editor/DrawingManager
Files:
12 added
3 modified

Legend:

Unmodified
Added
Removed
  • gs3-extensions/map-editor/DrawingManager/historyManager.js

    r32721 r32722  
    11var prevOverlays = []; 
     2var presentOverlays = []; 
     3var undoneOverlays = []; 
    24 
    35function undo() { 
    4  
     6     
    57    for (var i = 0; i < overlays.length; i++) { 
    68        overlays[i].setMap(null); 
    79 
    810    } 
    9     if (prevOverlays.length != 0){ 
     11    if (prevOverlays.length != 0) { 
     12        selectedShapes = []; 
    1013        overlays = []; 
    11         console.log(prevOverlays); 
     14        undoneOverlaysPush(); 
    1215        var prev_overlay = prevOverlays.pop(); 
    1316         
    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++) { 
    1519            overlays[i] = prev_overlay[i]; 
    1620            overlays[i].setMap(map); 
    17         } 
    18          
    19     } 
    20      
     21            } 
     22        } 
     23         
     24 
     25    } 
     26 
    2127    //Deactivated at the moment 
    22     if(enableSelectionFeature){ 
     28    if (enableSelectionFeature) { 
    2329        selectedShapes = []; 
    2430        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++) { 
    2935            selectedShapes.push(prevOverlays) 
    3036            console.log("comes here"); 
    3137        } 
    32          
    33     } 
     38 
     39    } 
     40} 
     41 
     42function redo() { 
    3443     
    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 
     70function clonePath(path) { 
    4071    var clone_path = []; 
    41      
     72 
    4273    for (var i = 0; i < path.length; i++) { 
    4374        var lati = path.getAt(i).lat(); 
     
    4980        clone_path.push(clone_lat_lng); 
    5081    } 
    51      
     82 
    5283    return clone_path; 
    5384} 
    5485 
    55 function clonePolyline(polyline) 
    56 { 
    57     var path          = polyline.getPath(); 
    58     var geodesic      = polyline.geodesic; 
    59     var strokeColor   = polyline.strokeColor; 
     86function clonePolyline(polyline) { 
     87    var path = polyline.getPath(); 
     88    var geodesic = polyline.geodesic; 
     89    var strokeColor = polyline.strokeColor; 
    6090    var strokeOpacity = polyline.strokeOpacity; 
    61     var strokeWeight  = polyline.strokeWeight; 
    62     var clone_path    = clonePath(path); 
    63     //var editable      = rect.editable; 
    64      
     91    var strokeWeight = polyline.strokeWeight; 
     92    var clone_path = clonePath(path); 
     93    //var editable      = rect.editable; 
     94 
    6595    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: false 
    73     }); 
    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 
    75105    clone_polyline.type = google.maps.drawing.OverlayType.POLYLINE; 
    76      
     106 
    77107    return clone_polyline; 
    78108} 
    79109 
    80 function clonePolygon(polygon) 
    81 { 
    82     var path          = polygon.getPath(); 
    83     var geodesic      = polygon.geodesic; 
    84     var strokeColor   = polygon.strokeColor; 
     110function clonePolygon(polygon) { 
     111    var path = polygon.getPath(); 
     112    var geodesic = polygon.geodesic; 
     113    var strokeColor = polygon.strokeColor; 
    85114    var strokeOpacity = polygon.strokeOpacity; 
    86     var strokeWeight  = polygon.strokeWeight; 
    87     var fillColor     = polygon.fillColor; 
    88     var fillOpacity   = polygon.fillOpacity; 
    89     var clone_path    = clonePath(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 
    92121    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: false 
    102     }); 
    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 
    104133    clone_polygon.type = google.maps.drawing.OverlayType.POLYGON; 
    105      
     134 
    106135    return clone_polygon; 
    107136} 
    108137 
    109 function cloneRectangle(rect) 
    110 { 
    111     var strokeColor   = rect.strokeColor; 
     138function cloneRectangle(rect) { 
     139    var strokeColor = rect.strokeColor; 
    112140    var strokeOpacity = rect.strokeOpacity; 
    113     var strokeWeight  = rect.strokeWeight; 
    114     var fillColor     = rect.fillColor; 
    115     var fillOpacity   = rect.fillOpacity; 
    116     var bounds        = rect.getBounds(); 
    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 
    119147    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: false 
    128     }); 
    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 
    130158    clone_rect.type = google.maps.drawing.OverlayType.RECTANGLE; 
    131      
     159 
    132160    return clone_rect; 
    133161} 
    134162 
    135 function cloneCircle(circ) 
    136 { 
    137     var strokeColor   = circ.strokeColor; 
     163function cloneCircle(circ) { 
     164    var strokeColor = circ.strokeColor; 
    138165    var strokeOpacity = circ.strokeOpacity; 
    139     var strokeWeight  = circ.strokeWeight; 
    140     var fillColor     = circ.fillColor; 
    141     var fillOpacity   = circ.fillOpacity; 
    142     var center        = circ.center; 
    143     var radius        = circ.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 
    146173    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: false 
    156     }); 
    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 
    158185    clone_circ.type = google.maps.drawing.OverlayType.CIRCLE; 
    159      
     186 
    160187    return clone_circ; 
    161188} 
    162189 
    163  
    164 function cloneShape(shape) 
    165 { 
     190function cloneShape(shape) { 
    166191    if (shape.type === google.maps.drawing.OverlayType.POLYLINE) { 
    167192        var clone_polyline = clonePolyline(shape); 
    168193        return clone_polyline; 
    169     } 
    170     else if (shape.type === google.maps.drawing.OverlayType.POLYGON) { 
     194    } else if (shape.type === google.maps.drawing.OverlayType.POLYGON) { 
    171195        var clone_polygon = clonePolygon(shape); 
    172196        return clone_polygon; 
    173     } 
    174     else if (shape.type === google.maps.drawing.OverlayType.RECTANGLE) { 
     197    } else if (shape.type === google.maps.drawing.OverlayType.RECTANGLE) { 
    175198        var clone_rect = cloneRectangle(shape); 
    176199        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) { 
    180202        var clone_circ = cloneCircle(shape); 
    181203        return clone_circ; 
    182      
    183     } 
    184     else { 
     204 
     205    } else { 
    185206        console.error("Unrecognized shape: " + shape); 
    186207        return null; 
    187208    } 
    188 } 
    189  
    190 function overlayItemIsShape(overlay_item) 
    191 { 
     209    console.log(cloneShape); 
     210} 
     211 
     212function overlayItemIsShape(overlay_item) { 
    192213    var type = overlay_item.type; 
    193      
     214 
    194215    is_shape = (type === google.maps.drawing.OverlayType.POLYLINE) 
    195216     || (type === google.maps.drawing.OverlayType.POLYGON) 
    196217     || (type === google.maps.drawing.OverlayType.RECTANGLE) 
    197218     || (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 
     223function historyOverlayPush() { 
     224    undoneOverlays = []; 
    205225    var overlays_copy = []; 
    206     for (var i = 0; i<overlays.length; i++) { 
     226    for (var i = 0; i < overlays.length; i++) { 
    207227        var clone_shape = cloneShape(overlays[i]); 
    208228        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! 
    213232        } 
    214233        overlays_copy[i] = clone_shape; 
    215234    } 
    216      
    217     prevOverlays.push(overlays_copy);  
    218 } 
     235 
     236    prevOverlays.push(overlays_copy); 
     237 
     238} 
     239 
     240function 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 
     258function 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  
    2020    <button onclick="printHistory()" accesskey="q">Print History</button> 
    2121    <button onclick="undo()" accesskey="n">Undo</button> 
    22     <button onclick="redoMovement()" accesskey="n">Redo</button> 
     22    <button onclick="redo()" accesskey="n">Redo</button> 
    2323     
    2424    </div> 
  • gs3-extensions/map-editor/DrawingManager/index.js

    r32721 r32722  
    88var enableSelectionFeature = false; 
    99var beingDragged = false; 
    10  
     10var resizeEntry = false; 
    1111 
    1212var deselectedLog = [] 
     
    6565    } 
    6666     
    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);     
    7074}); 
    7175 
    72 function shapeSpecsChange() { 
     76function shapeSpecsChangeMD() { 
    7377    if (selectedShapes.length > 0) { 
    7478        historyOverlayPush(); 
    7579 
    7680    } 
     81} 
     82 
     83function shapeSpecsChangeMU() { 
     84    if (selectedShapes.length > 0) { 
     85        presentOverlayPush(); 
     86    }        
    7787} 
    7888 
     
    8494        selectColor(color); 
    8595        setSelectedShapeColor(color); 
     96        shapeSpecsChangeMU(); 
    8697    }); 
    8798    return button; 
     
    156167    google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) { 
    157168         
    158         console.log(e) 
    159          
    160169        historyOverlayPush(); 
    161170                 
     
    164173        newShape.type = e.type; 
    165174         
    166         //historyOverlayPush(); 
     175        presentOverlayPush(); 
    167176         
    168177        if (e.type !== google.maps.drawing.OverlayType.MARKER) { 
     
    235244    function vertexAndPolyDel(e, newShape) { 
    236245        var vertex = e.vertex; 
    237  
     246        //console.log(e) 
    238247        if (e.vertex !== undefined) { 
     248            historyOverlayPush(); 
    239249            if (newShape.type === google.maps.drawing.OverlayType.POLYGON) { 
    240250                var path = newShape.getPaths().getAt(e.path); 
     
    258268    //cLICK EVENT IF A MARKER IS CREATED 
    259269            google.maps.event.addListener(newShape, 'click', function (e) { 
     270                console.log("lol"); 
    260271                setSelection(newShape, e); 
    261272            }); 
     
    270281            google.maps.event.addListener(newShape, 'click', function (e) { 
    271282                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) { 
    276286                beingDragged = true; 
    277287                historyOverlayPush(); 
     288 
    278289            }); 
    279290             
    280291            google.maps.event.addListener(newShape, 'dragend', function () { 
    281292                beingDragged = false; 
     293                presentOverlayPush(); 
    282294            }); 
    283295             
    284296            //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                 
    287300                if (beingDragged == false){ 
    288                     historyOverlayPush(); 
     301                    resizeEntry = true; 
     302                    presentOverlayPush(); 
     303                    resizeEntry = false; 
    289304                } 
    290305            }); 
    291306                         
    292307            google.maps.event.addListener(newShape, 'resize', function () { 
    293                 console.log("lmao"); 
    294308                //historyOverlayPush(); 
    295309                     
     
    298312            //Add an event listener to select a shape if the mouse hovers over it 
    299313            google.maps.event.addListener(newShape, 'mousedown', function (e) { 
     314                //  console.log(e); 
    300315                if (drawingManager.drawingMode == null) { 
    301316                    setSelection(newShape, e); 
     
    457472function printHistory() { 
    458473     
    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);    
    461483} 
    462484 
    463485function deleteSelectedShape() { 
     486    historyOverlayPush(); 
    464487    for (var i = 0; i < selectedShapes.length; i++) { 
    465488        selectedShapes[i].setMap(null); 
    466489    } 
    467490    selectedShapes = []; 
     491    presentOverlayPush(); 
    468492} 
    469493 
    470494function deleteAllShape() { 
     495    historyOverlayPush(); 
    471496    for (var i = 0; i < overlays.length; i++) { 
    472497        overlays[i].setMap(null); 
     
    474499    } 
    475500    overlays = []; 
    476 } 
    477  
     501    presentOverlayPush(); 
     502} 
     503