Changeset 32723

Show
Ignore:
Timestamp:
11.01.2019 12:26:07 (2 months ago)
Author:
ak19
Message:

Complete redo and undo and fixed marker drawing bug

Location:
gs3-extensions/map-editor/DrawingManager
Files:
11 added
1 removed
3 modified

Legend:

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

    r32722 r32723  
    22var presentOverlays = []; 
    33var undoneOverlays = []; 
     4var enableSelectionFeature = false; 
    45 
    56function undo() { 
     
    5354            overlays[i].setMap(map); 
    5455        } 
    55         var conditionPrevious = presentOverlays[presentOverlays.length - 1] !== undefined && presentOverlays[presentOverlays.length - 1].length !== 0 && presentOverlays.length !== 0; 
     56        var conditionPrevious = presentOverlays[presentOverlays.length - 1] !== undefined ; 
    5657         
    5758        if (conditionPrevious){ 
     
    186187 
    187188    return clone_circ; 
     189} 
     190 
     191function cloneMarker(marker) { 
     192    var position = marker.getPosition(); 
     193    var anchorPoint = marker.anchorPoint; 
     194    var clone_marker  = new google.maps.Marker({ 
     195        anchorPoint: anchorPoint, 
     196        position : position, 
     197        clickable: true, 
     198        draggable: true, 
     199        editable: false  
     200    }) 
     201    clone_marker.type = google.maps.drawing.OverlayType.MARKER; 
     202     
     203    return clone_marker; 
    188204} 
    189205 
     
    204220 
    205221    } else { 
    206         console.error("Unrecognized shape: " + shape); 
    207         return null; 
     222        var clone_marker = cloneMarker(shape); 
     223        return clone_marker; 
    208224    } 
    209225    console.log(cloneShape); 
     
    225241    var overlays_copy = []; 
    226242    for (var i = 0; i < overlays.length; i++) { 
     243         
    227244        var clone_shape = cloneShape(overlays[i]); 
    228245        if (overlayItemIsShape(clone_shape)) { 
     
    257274 
    258275function undoneOverlaysPush() { 
    259     var conditionUndone = presentOverlays[presentOverlays.length - 1] !== undefined && presentOverlays[presentOverlays.length - 1].length !== 0 && presentOverlays.length !== 0; 
     276    var conditionUndone = presentOverlays[presentOverlays.length - 1] !== undefined; 
    260277 
    261278    if (conditionUndone) { 
     
    263280    } 
    264281    presentOverlays = []; 
    265     var conditionPresent = prevOverlays[prevOverlays.length - 1] !== undefined && prevOverlays[prevOverlays.length - 1].length !== 0 && prevOverlays.length !== 0; 
     282    var conditionPresent = prevOverlays[prevOverlays.length - 1] !== undefined; 
    266283 
    267284    if (conditionPresent) { 
     
    269286 
    270287    } 
    271     //prevOverlays.pop(); 
    272  
    273 } 
     288} 
  • gs3-extensions/map-editor/DrawingManager/index.html

    r32722 r32723  
    1818    <button onclick="deleteAllShape()" accesskey="c">Clear All</button> 
    1919    <button onclick="deleteSelectedShape()" accesskey="b">Delete Selected</button> 
    20     <button onclick="printHistory()" accesskey="q">Print History</button> 
    2120    <button onclick="undo()" accesskey="n">Undo</button> 
    2221    <button onclick="redo()" accesskey="n">Redo</button> 
  • gs3-extensions/map-editor/DrawingManager/index.js

    r32722 r32723  
    11var debug = false; 
    2 var redoPressed = false; 
    3 var undoPressed = 0; 
    42var shiftKeyPressed = false; 
    5 var dragFired = false; 
    6 var selectionPass = true; 
    7 var chosen; 
    8 var enableSelectionFeature = false; 
    93var beingDragged = false; 
    104var resizeEntry = false; 
    11  
    12 var deselectedLog = [] 
    13 var selectedShapesLog = []; 
    14 var prevShape = []; 
    15 var nextShape = []; 
    16 var prevLog = []; 
    17 var nextLog = []; 
    18 var dragged = 0; 
     5var allowDeselect = false; 
    196var colors = ['#1E90FF', '#FF1493', '#4B0082', '#32CD32', '#FF8C00', '#000000']; 
    207var selectedColor; 
     
    229var thicknessValue = 1; 
    2310var opacityValue = 0.4; 
    24 var polyOptions = { 
    25     fillColor: '#CA4A2F', 
    26     strokeWeight: thicknessValue, 
    27     fillOpacity: opacityValue, 
    28     editable: true, 
    29     draggable: true, 
    30     geodesic: false, 
    31 }; 
    32  
    3311var overlays = []; 
    3412var drawingManager; 
    3513var selectedShape; 
    3614var selectedShapes = []; 
    37  
    3815var map = null; 
    39  
     16var faj, fal, maj, mal; 
     17var polyOptions = {fillColor: '#CA4A2F', strokeWeight: thicknessValue, fillOpacity: opacityValue, editable: true, draggable: true, geodesic: false}; 
    4018 
    4119 
     
    7149    document.getElementById("thicknessRange").addEventListener("mouseup", shapeSpecsChangeMU); 
    7250    document.getElementById("colourOpacity").addEventListener("mouseup", shapeSpecsChangeMU); 
    73     //document.getElementById("color-palette1").addEventListener("mouseup", shapeSpecsChangeMU);     
    7451}); 
    7552 
     
    7754    if (selectedShapes.length > 0) { 
    7855        historyOverlayPush(); 
    79  
    8056    } 
    8157} 
     
    137113 
    138114    map = new google.maps.Map(document.getElementById('map'), { 
    139             center: { 
    140                 lat: -34.397, 
    141                 lng: 150.644 
     115            center: {lat: -34.397, lng: 150.644 
    142116            }, 
    143             zoom: 2, 
    144             //mapTypeId: 'map' 
    145  
     117            zoom: 8, 
    146118        }); 
    147119 
    148120    drawingManager = new google.maps.drawing.DrawingManager({ 
    149             drawingMode: google.maps.drawing.OverlayType.RECTANGLE, 
     121            drawingMode: google.maps.drawing.OverlayType.MARKER, 
    150122            drawingControl: true, 
    151123            drawingControlOptions: { 
     
    172144        var newShape = e.overlay; 
    173145        newShape.type = e.type; 
    174          
     146 
    175147        presentOverlayPush(); 
    176148         
     
    189161        if (shiftKeyPressed == false) { 
    190162            clearSelection(); 
    191             if (chosen !== null) { 
    192                 deselectedLog.push("deselected") 
    193                 deselectedLog = []; 
    194                 chosen = null; 
    195                 selectedShape = null; 
    196  
    197             } 
    198         } 
    199     }); 
    200  
    201     //Setting drawing tool option 
     163            selectedShape = null; 
     164            } 
     165    });  
     166 
     167    //Keyboard shortcuts 
    202168    document.addEventListener('keydown', function () { 
    203         //if (event.code == 'KeyX' && (event.ctrlKey || event.metaKey)) 
     169        if (event.code == 'KeyY' && (event.ctrlKey || event.metaKey) || (event.code == 'KeyZ' && event.code == 'ShiftLeft'  && (event.ctrlKey || event.metaKey) )){ 
     170                redo(); 
     171 
     172        } 
     173        if (event.code == 'KeyZ' && (event.ctrlKey || event.metaKey)){ 
     174            if(shiftKeyPressed == false) { 
     175                undo(); 
     176            } 
     177        } 
     178        if (event.code == 'KeyA' && (event.ctrlKey || event.metaKey)){ 
     179            event.preventDefault();  
     180            selectAll(); 
     181            drawingManager.setDrawingMode(null); 
     182        } 
     183        if (event.code == 'KeyD' && (event.ctrlKey || event.metaKey)){ 
     184            event.preventDefault();  
     185            deselectAll(); 
     186        } 
    204187        if (event.code == 'Digit0' || event.code == 'Numpad0' || event.code == 'Backquote') { 
    205188            //clearSelection(); 
     
    218201            printHistory(); 
    219202        } 
    220         //                  console.log(event.code); 
     203//                          console.log(event.code); 
    221204    }); 
    222205 
     
    261244                } 
    262245            } 
     246            presentOverlayPush(); 
    263247        } 
    264248    } 
     
    267251{ 
    268252    //cLICK EVENT IF A MARKER IS CREATED 
    269             google.maps.event.addListener(newShape, 'click', function (e) { 
    270                 console.log("lol"); 
    271                 setSelection(newShape, e); 
    272             }); 
     253    google.maps.event.addListener(newShape, 'click', function (e) { 
     254        setSelection(newShape, e); 
     255    }); 
     256     
     257    google.maps.event.addListener(newShape, 'dragstart', function (e) { 
     258         
     259        beingDragged = true; 
     260        historyOverlayPush(); 
     261 
     262    });  
     263 
     264    google.maps.event.addListener(newShape, 'dragend', function () { 
     265        beingDragged = false; 
     266        presentOverlayPush(); 
     267        allowDeselect = false; 
     268    });  
    273269} 
    274270function addShapeListeners(newShape,e) 
    275271{ 
    276         // Switch back to non-drawing mode after drawing a shape. 
    277             //drawingManager.setDrawingMode(null); 
    278  
    279             // Add an event listener that selects the newly-drawn shape when the user 
    280             // mouses down on it. 
    281             google.maps.event.addListener(newShape, 'click', function (e) { 
    282                 vertexAndPolyDel(e, newShape); 
    283             }); 
    284  
    285             google.maps.event.addListener(newShape, 'dragstart', function (e) { 
    286                 beingDragged = true; 
    287                 historyOverlayPush(); 
    288  
    289             }); 
     272    // Add an event listener that selects the newly-drawn shape when the user 
     273    // mouses down on it. 
     274    google.maps.event.addListener(newShape, 'click', function (e) { 
     275        vertexAndPolyDel(e, newShape); 
     276    }); 
     277 
     278     
     279    google.maps.event.addListener(newShape, 'drag', function (e) { 
     280 
     281        //for(var i = 0; i < selectedShapes.length; i++) { 
     282        //  if(newShape.type = 'rectangle') { 
     283        //      var newBounds = { 
     284        //          east: selectedShapes[i].getBounds().ea.l + (selectedShapes[i].getBounds().ea.l - faj), 
     285        //          north: selectedShapes[i].getBounds().la.l + (selectedShapes[i].getBounds().la.l - fal), 
     286        //          south: selectedShapes[i].getBounds().la.j + (selectedShapes[i].getBounds().la.j - maj), 
     287        //          west: selectedShapes[i].getBounds().ea.j + (selectedShapes[i].getBounds().ea.j - mal) 
     288        //      } 
     289        //      selectedShapes[i].set 
     290        //  } else { 
    290291             
    291             google.maps.event.addListener(newShape, 'dragend', function () { 
    292                 beingDragged = false; 
    293                 presentOverlayPush(); 
    294             }); 
    295              
    296             //Store information after the event ends 
    297             google.maps.event.addListener(newShape, 'bounds_changed', function (e) { 
    298                 //console.log(e); 
    299                  
    300                 if (beingDragged == false){ 
    301                     resizeEntry = true; 
    302                     presentOverlayPush(); 
    303                     resizeEntry = false; 
    304                 } 
    305             }); 
    306                          
    307             google.maps.event.addListener(newShape, 'resize', function () { 
    308                 //historyOverlayPush(); 
    309                      
    310             }); 
    311  
    312             //Add an event listener to select a shape if the mouse hovers over it 
    313             google.maps.event.addListener(newShape, 'mousedown', function (e) { 
    314                 //  console.log(e); 
    315                 if (drawingManager.drawingMode == null) { 
    316                     setSelection(newShape, e); 
    317                 } 
    318             }); 
     292        //  } 
     293        //   
     294        //} 
     295     
     296 
     297    }); 
     298     
     299     
     300    google.maps.event.addListener(newShape, 'dragstart', function (e) { 
     301         
     302        beingDragged = true; 
     303        historyOverlayPush(); 
     304 
     305    }); 
     306     
     307    google.maps.event.addListener(newShape, 'dragend', function () { 
     308        beingDragged = false; 
     309        presentOverlayPush(); 
     310        allowDeselect = false; 
     311    }); 
     312     
     313    //Store information after the event ends 
     314    google.maps.event.addListener(newShape, 'bounds_changed', function (e) { 
     315        if (beingDragged == false){ 
     316            resizeEntry = true; 
     317            presentOverlayPush(); 
     318            resizeEntry = false; 
     319        } 
     320    }); 
     321 
     322    //Add an event listener to select a shape if the mouse hovers over it 
     323    google.maps.event.addListener(newShape, 'mousedown', function (e) { 
     324        if (e.vertex !== undefined || e.edge !== undefined) { 
     325            historyOverlayPush() 
     326        }    
     327        if (drawingManager.drawingMode == null) { 
     328            setSelection(newShape, e); 
     329        } 
     330    }); 
     331 
     332    google.maps.event.addListener(newShape, 'mouseup', function (e) { 
     333        if (e.vertex !== undefined || e.edge !== undefined) { 
     334            presentOverlayPush() 
     335        }  
     336        else{        
     337            removeFromSelectedShapes(newShape);      
     338        } 
     339    });  
    319340} 
    320341function clearSelection() { 
     
    334355     
    335356//Set selection for the selected overlay 
    336     function setSelection(shape, e) { 
     357    function setSelection(shape, e) {    
    337358        if (shape.type !== 'marker') { 
    338359            if (shiftKeyPressed == false) { 
    339                 if (e.vertex == undefined) {     
    340                 //if ((shape.type != google.maps.drawing.OverlayType.POLYLINE)  
    341                     //&& (shape.type != google.maps.drawing.OverlayType.POLYGON)) { 
    342                     clearSelection(); 
    343                     shape.setEditable(true); 
     360                if (e.vertex == undefined) { 
     361                    if(e.edge == undefined) {                    
     362                        clearSelection(); 
     363                        shape.setEditable(true); 
     364                    } 
    344365                } 
    345366            } 
    346367            if (selectedShapes.includes(shape)) { 
    347  
    348                 //shape.setEditable(false); 
    349                 const index = selectedShapes.indexOf(shape); 
    350                 selectedShapes.splice(index, 1); 
     368                if(e.vertex == undefined ) { 
     369                    if(e.edge == undefined) { 
     370                        //removeFromSelectedShapes(shape); 
     371                    } 
     372                } 
    351373            } else { 
    352374                shape.setEditable(true); 
     
    354376            } 
    355377 
    356             if (debug) { 
    357                 console.log(" len = " + selectedShapes.length); 
    358             } 
     378 
    359379            //Send the values to be updated 
    360380            var thi = shape.strokeWeight; 
     
    367387            clearSelection(); 
    368388        } 
    369  
    370389        selectedShape = shape; 
    371  
    372         if (selectionPass == true) { 
    373  
    374             selectedShapesLog.push("selected", shiftKeyPressed, selectedShape); 
    375             nextLog.push(selectedShapesLog); 
    376             chosen = selectedShape; 
    377             selectionPass = false 
    378         } 
    379  
    380         var lastItem = nextLog[nextLog.length - 1]; 
    381  
    382         if (chosen !== selectedShape) { 
    383             if (dragFired == false) { 
    384                 selectedShapesLog.push("selected", shiftKeyPressed, selectedShape) 
    385                 chosen = selectedShape; 
    386             } 
    387         } 
    388  
    389         //console.log(prevLog); 
    390         selectedShapesLog = []; 
    391     } 
    392          
     390    } 
     391     
     392 
     393function removeFromSelectedShapes(shape) { 
     394    if (selectedShapes.includes(shape)) { 
     395        if(allowDeselect) { 
     396            const index = selectedShapes.indexOf(shape); 
     397            selectedShapes.splice(index, 1); 
     398            shape.setEditable(false); 
     399        } 
     400        allowDeselect = false; 
     401    } 
     402     
     403     
     404} 
     405     
    393406//Set selected thickness 
    394407function setSelectedThickness(sWeight) { 
     
    423436 
    424437function updateMenuValues(thi, opa, fCol, sCol) { 
    425  
    426438    //Update thickness slider and value on the settings menu 
    427439    var thicknessSliderOutput = document.getElementById("thicknessRangeVal"); 
     
    438450    } 
    439451} 
    440  
    441 function redoMovement() { 
    442  
    443     var lastItem = nextLog[nextLog.length - 1]; 
    444     var secondToLastItem = nextLog[nextLog.length - 2]; 
    445     var correctIndex; 
    446  
    447     if (undoPressed >= 1) { 
    448         correctIndex = lastItem; 
    449     } else { 
    450         correctIndex = secondToLastItem; 
    451         undoPressed++; 
    452     } 
    453  
    454     //If the history log is not empty 
    455     if (nextLog.length > 1) { 
    456         prevLog.push(lastItem); 
    457  
    458         //If undo has been pressed 
    459  
    460         if (lastItem[1] == ("polygon") || lastItem[1] == ("polyline")) { 
    461             selectedShape.setPath(correctIndex[2]); 
    462         } else { 
    463             selectedShape.setBounds(correctIndex[2]); 
    464         } 
    465  
    466         undoPressed = false; 
    467         redoPressed = true; 
    468         nextLog.pop(); 
    469     } 
     452function selectAll(){ 
     453    shiftKeyPressed = true; 
     454    var e = new Object(); 
     455    e.vertex = undefined; 
     456    selectedShapes = []; 
     457    for(var i = 0; i< overlays.length; i++) { 
     458        setSelection(overlays[i], e); 
     459    } 
     460    shiftKeyPressed = false; 
     461} 
     462 
     463function deselectAll(){  
     464    for(var i = 0; i < selectedShapes.length; i++) { 
     465        selectedShapes[i].setEditable(false); 
     466    } 
     467    selectedShapes = []; 
    470468} 
    471469 
    472470function printHistory() { 
    473      
    474471    console.log("prev", prevOverlays); 
    475472    console.log("present ", presentOverlays); 
    476473    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);    
    483474} 
    484475 
     
    487478    for (var i = 0; i < selectedShapes.length; i++) { 
    488479        selectedShapes[i].setMap(null); 
     480         
     481        if (overlays.includes(selectedShapes[i])) { 
     482            const index = overlays.indexOf(selectedShapes[i]); 
     483            overlays.splice(index, 1); 
     484            selectedShapes[i].setEditable(false); 
     485        }    
    489486    } 
    490487    selectedShapes = []; 
     
    496493    for (var i = 0; i < overlays.length; i++) { 
    497494        overlays[i].setMap(null); 
    498  
    499495    } 
    500496    overlays = [];