Changeset 32721

Show
Ignore:
Timestamp:
07.01.2019 15:12:19 (10 days ago)
Author:
ak19
Message:

Fixed selection bug and added colour, thickness and opacity change to history.

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

Legend:

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

    r32710 r32721  
    11var prevOverlays = []; 
    22 
    3 function undoMovement() { 
    4     console.log("*** undoMovement called"); 
     3function undo() { 
     4 
    55    for (var i = 0; i < overlays.length; i++) { 
    66        overlays[i].setMap(null); 
    77 
    88    } 
    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     
    1835     
    1936} 
     
    4360    var strokeOpacity = polyline.strokeOpacity; 
    4461    var strokeWeight  = polyline.strokeWeight; 
    45      
    4662    var clone_path    = clonePath(path); 
     63    //var editable      = rect.editable; 
    4764     
    4865    var clone_polyline = new google.maps.Polyline({ 
     
    5168        strokeOpacity: strokeOpacity, 
    5269        strokeWeight: strokeWeight, 
    53         path: clone_path 
     70        path: clone_path, 
     71        draggable: true, 
     72        editable: false 
    5473    }); 
    5574     
     
    6887    var fillColor     = polygon.fillColor; 
    6988    var fillOpacity   = polygon.fillOpacity; 
    70      
    7189    var clone_path    = clonePath(path); 
     90    //var editable      = rect.editable; 
    7291     
    7392    var clone_polygon = new google.maps.Polygon({ 
     
    7897        fillColor: fillColor, 
    7998        fillOpacity: fillOpacity, 
    80         path: clone_path 
     99        path: clone_path, 
     100        draggable: true, 
     101        editable: false 
    81102    }); 
    82103     
     
    94115    var fillOpacity   = rect.fillOpacity; 
    95116    var bounds        = rect.getBounds(); 
     117    //var editable      = rect.editable; 
    96118     
    97119    var clone_rect = new google.maps.Rectangle({ 
     
    101123        fillColor: fillColor, 
    102124        fillOpacity: fillOpacity, 
    103         bounds: bounds 
     125        bounds: bounds, 
     126        draggable: true, 
     127        editable: false 
    104128    }); 
    105129     
     
    118142    var center        = circ.center; 
    119143    var radius        = circ.radius; 
     144    //var editable      = rect.editable; 
    120145     
    121146    var clone_circ = new google.maps.Circle({ 
     
    126151        fillOpacity: fillOpacity, 
    127152        center: center, 
    128         radius: radius 
     153        radius: radius, 
     154        draggable: true, 
     155        editable: false 
    129156    }); 
    130157     
     
    161188} 
    162189 
     190function 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 
    163202function historyOverlayPush() 
    164203{ 
    165     console.log("historyOverlayPush()"); 
     204    console.log("comes here"); 
    166205    var overlays_copy = []; 
    167206    for (var i = 0; i<overlays.length; i++) { 
    168207        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        } 
    174214        overlays_copy[i] = clone_shape; 
    175          
    176215    } 
    177216     
  • gs3-extensions/map-editor/DrawingManager/index.html

    r32711 r32721  
    1818    <button onclick="deleteAllShape()" accesskey="c">Clear All</button> 
    1919    <button onclick="deleteSelectedShape()" accesskey="b">Delete Selected</button> 
    20     <button onclick="polygonGetPath()" accesskey="q">Get Path</button> 
    21     <button onclick="undoMovement()" accesskey="n">Undo</button> 
     20    <button onclick="printHistory()" accesskey="q">Print History</button> 
     21    <button onclick="undo()" accesskey="n">Undo</button> 
    2222    <button onclick="redoMovement()" accesskey="n">Redo</button> 
    2323     
  • gs3-extensions/map-editor/DrawingManager/index.js

    r32711 r32721  
    66var selectionPass = true; 
    77var 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 }; 
     8var enableSelectionFeature = false; 
     9var beingDragged = false; 
     10 
     11 
    3112var deselectedLog = [] 
    3213var selectedShapesLog = []; 
     
    3516var prevLog = []; 
    3617var nextLog = []; 
    37  
    38  
    39  
    40  
    4118var dragged = 0; 
    4219var colors = ['#1E90FF', '#FF1493', '#4B0082', '#32CD32', '#FF8C00', '#000000']; 
     
    6239 
    6340 
     41 
    6442$(document).ready(function() { 
    6543    //Update thickness 
     
    8664        setSelectedOpacity(opacityValue); 
    8765    } 
     66     
     67    document.getElementById("thicknessRange").addEventListener("mousedown", shapeSpecsChange); 
     68    document.getElementById("colourOpacity").addEventListener("mousedown", shapeSpecsChange); 
     69    document.getElementById("color-palette1").addEventListener("mousedown", shapeSpecsChange); 
    8870}); 
    8971 
    90  
    91  
    92 //////////////////////////////////////////////////////////////////////////////////////// 
     72function shapeSpecsChange() { 
     73    if (selectedShapes.length > 0) { 
     74        historyOverlayPush(); 
     75 
     76    } 
     77} 
     78 
    9379function makeColorButton(color) { 
    9480    var button = document.createElement('span'); 
     
    170156    google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) { 
    171157         
    172          
     158        console.log(e) 
    173159         
    174160        historyOverlayPush(); 
     
    177163        var newShape = e.overlay; 
    178164        newShape.type = e.type; 
    179  
    180      
     165         
     166        //historyOverlayPush(); 
    181167         
    182168        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); 
    215170            setSelection(newShape, e); 
    216171        } 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); 
    221174            setSelection(newShape, e); 
    222175        } 
    223176    }); 
    224  
    225     //Deletes a vertex if clicked on it 
    226     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      
    251177 
    252178    //Clears selection if clicked on the map when shift is not presseed 
     
    256182            if (chosen !== null) { 
    257183                deselectedLog.push("deselected") 
    258                 updateHistory(deselectedLog); 
    259184                deselectedLog = []; 
    260185                chosen = null; 
     186                selectedShape = null; 
    261187 
    262188            } 
     
    281207            drawingManager.setDrawingMode('rectangle'); 
    282208        } else if (event.code == 'KeyQ') { 
    283             polygonGetPath(); 
     209            printHistory(); 
    284210        } 
    285211        //                  console.log(event.code); 
     
    306232} 
    307233 
    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     
     256function 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} 
     263function 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} 
    309305function clearSelection() { 
    310306        if (selectedShape) { 
     
    326322        if (shape.type !== 'marker') { 
    327323            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)) { 
    333327                    clearSelection(); 
    334328                    shape.setEditable(true); 
     
    374368            if (dragFired == false) { 
    375369                selectedShapesLog.push("selected", shiftKeyPressed, selectedShape) 
    376                 updateHistory(selectedShapesLog); 
    377370                chosen = selectedShape; 
    378371            } 
     
    382375        selectedShapesLog = []; 
    383376    } 
    384      
    385      
     377         
    386378//Set selected thickness 
    387379function setSelectedThickness(sWeight) { 
     
    399391 
    400392    if (selectedShapes.length > 0) { 
    401         //historyOverlayPush(); 
    402393        for (var i = 0; i < selectedShapes.length; i++) { 
    403394            selectedShapes[i].set('fillOpacity', fOpacity); 
     
    409400function setSelectedShapeColor(color) { 
    410401    if (selectedShapes.length > 0) { 
    411         historyOverlayPush(); 
    412402        for (var i = 0; i < selectedShapes.length; i++) { 
    413403            selectedShapes[i].set('fillColor', color); 
     
    432422        selectColor(fCol); 
    433423    } 
    434 } 
    435  
    436  
    437  
    438 function undoMovementDragSelection() { 
    439     var lastItem = prevLog[prevLog.length - 1]; 
    440  
    441     //If history array is not empty 
    442     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  
    461424} 
    462425 
     
    492455} 
    493456 
    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  
     457function printHistory() { 
     458     
     459    console.log(prevOverlays); 
     460    console.log(selectedShapes); 
    600461} 
    601462