Changeset 32722 for gs3-extensions


Ignore:
Timestamp:
2019-01-09T11:39:08+13:00 (5 years ago)
Author:
ak19
Message:

Redo and undo working

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

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
Note: See TracChangeset for help on using the changeset viewer.