Changeset 32732 for gs3-extensions

Show
Ignore:
Timestamp:
31.01.2019 17:03:19 (9 months ago)
Author:
ak19
Message:

Work to eliminate a undo history bug, and fixed the selection issue.

Location:
gs3-extensions/map-editor/DrawingManager
Files:
2 modified

Legend:

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

    r32724 r32732  
    22var presentOverlays = []; 
    33var undoneOverlays = []; 
    4 var enableSelectionFeature = false; 
     4var cycleComplete = true; 
    55 
    66function undo() { 
    7      
     7 
    88    for (var i = 0; i < overlays.length; i++) { 
    99        overlays[i].setMap(null); 
    10  
    1110    } 
    1211    if (prevOverlays.length != 0) { 
     
    1514        undoneOverlaysPush(); 
    1615        var prev_overlay = prevOverlays.pop(); 
    17          
    18         if(prev_overlay.length > 0) { 
     16 
     17        if (prev_overlay.length > 0) { 
    1918            for (var i = 0; i < prev_overlay.length; i++) { 
    20             overlays[i] = prev_overlay[i]; 
    21             overlays[i].setMap(map); 
    22             } 
    23         } 
    24          
    25  
    26     } 
    27  
    28     //Deactivated at the moment 
    29     //if (enableSelectionFeature) { 
    30     //  selectedShapes = []; 
    31     //  var i = 0; 
    32     //  var lastEntry = prevOverlays[prevOverlays.length - 1][i]; 
    33     //  console.log(prevOverlays[prevOverlays.length - 1].length); 
    34     // 
    35     //  for (var i = 0; i < lastEntry.length; i++) { 
    36     //      selectedShapes.push(prevOverlays) 
    37     //      console.log("comes here"); 
    38     //  } 
    39     // 
    40     //} 
     19                overlays[i] = prev_overlay[i]; 
     20                overlays[i].setMap(map); 
     21                overlays[i].draggable = draggableState; 
     22            } 
     23        } 
     24    } 
    4125} 
    4226 
    4327function redo() { 
    44      
     28 
    4529    if (undoneOverlays.length != 0) { 
    4630        selectedShapes = []; 
     
    4832            overlays[i].setMap(null); 
    4933        } 
     34 
    5035        overlays = []; 
    5136        var lastEntry = undoneOverlays[undoneOverlays.length - 1]; 
     
    5338            overlays[i] = lastEntry[i]; 
    5439            overlays[i].setMap(map); 
    55         } 
    56         var conditionPrevious = presentOverlays[presentOverlays.length - 1] !== undefined ; 
    57          
    58         if (conditionPrevious){ 
    59             prevOverlays.push(presentOverlays[0]); 
    60         } 
    61          
     40            overlays[i].draggable = draggableState; 
     41        } 
     42 
     43        var conditionPrevious = presentOverlays[0]; 
     44        if (conditionPrevious !== undefined) { 
     45            if (conditionPrevious.length == 0) { 
     46                prevOverlays.push(presentOverlays[0]); 
     47            } else { 
     48                var overlays_copy = []; 
     49                for (var i = 0; i < presentOverlays[0].length; i++) { 
     50                    var clone_shape = cloneShape(presentOverlays[0][i]); 
     51                    if (overlayItemIsShape(clone_shape)) { 
     52                        addShapeListeners(clone_shape, null); 
     53                    } else { 
     54                        addMarkerListeners(clone_shape, null); 
     55                    } 
     56                    overlays_copy[i] = clone_shape; 
     57                } 
     58                prevOverlays.push(overlays_copy); 
     59            } 
     60        } 
    6261        presentOverlays = []; 
    63         //console.log("last undone", undoneOverlays[undoneOverlays.length -1]); 
    6462        presentOverlays.push(undoneOverlays[undoneOverlays.length - 1]); 
    6563        undoneOverlays.pop(); 
    66  
    67     } 
    68  
     64    } 
    6965} 
    7066 
     
    10096            strokeWeight: strokeWeight, 
    10197            path: clone_path, 
    102             draggable: true, 
     98            draggable: draggableState, 
    10399            editable: false 
    104100        }); 
     
    128124            fillOpacity: fillOpacity, 
    129125            path: clone_path, 
    130             draggable: true, 
     126            draggable: draggableState, 
    131127            editable: false 
    132128        }); 
     
    154150            fillOpacity: fillOpacity, 
    155151            bounds: bounds, 
    156             draggable: true, 
     152            draggable: draggableState, 
    157153            editable: false, 
    158154            type: type 
     
    182178            center: center, 
    183179            radius: radius, 
    184             draggable: true, 
     180            draggable: draggableState, 
    185181            editable: false 
    186182        }); 
     
    194190    var position = marker.getPosition(); 
    195191    var anchorPoint = marker.anchorPoint; 
    196     var clone_marker  = new google.maps.Marker({ 
    197         anchorPoint: anchorPoint, 
    198         position : position, 
    199         clickable: true, 
    200         draggable: true, 
    201         editable: false  
    202     }) 
    203     clone_marker.type = google.maps.drawing.OverlayType.MARKER; 
    204      
     192    var clone_marker = new google.maps.Marker({ 
     193            anchorPoint: anchorPoint, 
     194            position: position, 
     195            clickable: true, 
     196            draggable: draggableState, 
     197            editable: false 
     198        }) 
     199        clone_marker.type = google.maps.drawing.OverlayType.MARKER; 
     200 
    205201    return clone_marker; 
    206202} 
     
    225221        return clone_marker; 
    226222    } 
    227     console.log(cloneShape); 
    228223} 
    229224 
     
    240235 
    241236function historyOverlayPush() { 
    242     if(undoneOverlays.length > 0) {  
    243         for(var i = 0; i < undoneOverlays.length; i++) { 
    244              
    245             entryType.pop(); 
    246         }        
    247     } 
    248     undoneOverlays = []; 
    249     //if(resizeEntry){ 
    250             //prevOverlays.push(presentOverlays[0]); 
    251              
    252     //} else { 
     237    if (cycleComplete) { 
    253238        var overlays_copy = []; 
    254239        for (var i = 0; i < overlays.length; i++) { 
    255240            var clone_shape = cloneShape(overlays[i]); 
    256             if(resizeEntry) { 
    257                 //console.log("hey lol"); 
    258                 clone_shape = cloneShape(presentOverlays[0][i]); 
    259             } 
     241 
    260242            if (overlayItemIsShape(clone_shape)) { 
    261243                addShapeListeners(clone_shape, null); // don't have an overlay event! 
     
    265247            overlays_copy[i] = clone_shape; 
    266248        } 
    267         prevOverlays.push(overlays_copy);        
    268     //} 
    269 } 
    270  
     249        undoneOverlays = []; 
     250        prevOverlays.push(overlays_copy); 
     251    } 
     252 
     253    cycleComplete = false; 
     254} 
    271255function presentOverlayPush() { 
    272      
    273     //clean the entry type array 
    274  
    275     if(resizeEntry) { 
    276         entryType.push("resize"); 
    277     } else { 
    278         entryType.push("not resize"); 
    279     } 
    280      
     256 
     257    OVbeforeClearing = overlays; 
     258    PObeforeClearing = presentOverlays; 
    281259    presentOverlays = []; 
    282260    var overlays_copy = []; 
     
    291269    } 
    292270    presentOverlays.push(overlays_copy); 
     271    cycleComplete = true; 
     272 
    293273} 
    294274 
    295275function undoneOverlaysPush() { 
    296      
     276 
    297277    var conditionUndone = presentOverlays[presentOverlays.length - 1] !== undefined; 
    298278 
    299279    if (conditionUndone) { 
    300         undoneOverlays.push(presentOverlays[0]); 
    301     } 
    302     presentOverlays = []; 
     280        var overlays_copy = []; 
     281        for (var i = 0; i < presentOverlays[0].length; i++) { 
     282            var clone_shape = cloneShape(presentOverlays[0][i]); 
     283            if (overlayItemIsShape(clone_shape)) { 
     284                addShapeListeners(clone_shape, null); // don't have an overlay event! 
     285            } else { 
     286                addMarkerListeners(clone_shape, null); // don't have an overlay event! 
     287            } 
     288            overlays_copy[i] = clone_shape; 
     289        } 
     290        undoneOverlays.push(overlays_copy); 
     291    } 
     292 
    303293    var conditionPresent = prevOverlays[prevOverlays.length - 1] !== undefined; 
    304294 
    305295    if (conditionPresent) { 
    306         presentOverlays.push(prevOverlays[prevOverlays.length - 1]); 
    307     } 
    308 } 
     296        presentOverlays = []; 
     297        var overlays_copy = []; 
     298        for (var i = 0; i < prevOverlays[prevOverlays.length - 1].length; i++) { 
     299            var clone_shape = cloneShape(prevOverlays[prevOverlays.length - 1][i]); 
     300            if (overlayItemIsShape(clone_shape)) { 
     301                addShapeListeners(clone_shape, null); // don't have an overlay event! 
     302            } else { 
     303                addMarkerListeners(clone_shape, null); // don't have an overlay event! 
     304            } 
     305            overlays_copy[i] = clone_shape; 
     306        } 
     307        presentOverlays.push(overlays_copy); 
     308    } 
     309} 
  • gs3-extensions/map-editor/DrawingManager/index.js

    r32724 r32732  
    33var beingDragged = false; 
    44var resizeEntry = false; 
    5 var allowDeselect = false; 
     5var allowDeselect = true; 
    66var colors = ['#1E90FF', '#FF1493', '#4B0082', '#32CD32', '#FF8C00', '#000000']; 
    77var selectedColor; 
     
    99var thicknessValue = 1; 
    1010var opacityValue = 0.4; 
     11var draggableState = true 
    1112var overlays = []; 
    1213var entryType = []; 
     
    1516var selectedShapes = []; 
    1617var map = null; 
    17 var faj, fal, maj, mal; 
    18 var polyOptions = {fillColor: '#CA4A2F', strokeWeight: thicknessValue, fillOpacity: opacityValue, editable: true, draggable: true, geodesic: false}; 
    19  
    20  
    21 $(document).ready(function() { 
     18var dragS, dragN; 
     19var dsNorth, dsSouth, dsEast, dsWest; 
     20var gaj, gal, maj, mal; 
     21var listenersArray = []; 
     22var counter = 0; 
     23var branchNum = 1; 
     24var mouseState = "up"; 
     25var thicknessRangeListener = thicknessValue; 
     26var resizable = false; 
     27var dontResize = false; 
     28var polyOptions = { 
     29 
     30    fillColor: '#CA4A2F', 
     31    strokeWeight: thicknessValue, 
     32    fillOpacity: opacityValue, 
     33    editable: true, 
     34    draggable: draggableState, 
     35    geodesic: false 
     36}; 
     37 
     38$(function () { 
     39    //change draggable 
     40    var draggableCB = document.querySelector("input[name=draggableCB]"); 
     41    draggableCB.addEventListener('change', function () { 
     42        if (this.checked) { 
     43            draggableState = false; 
     44            for (var i = 0; i < overlays.length; i++) { 
     45                overlays[i].draggable = draggableState; 
     46                polyOptions.draggable = draggableState; 
     47                console.log("false"); 
     48            } 
     49            //console.log(overlays[i].draggable); 
     50        } else { 
     51            draggableState = true; 
     52            for (var i = 0; i < overlays.length; i++) { 
     53                overlays[i].draggable = draggableState; 
     54                polyOptions.draggable = draggableState; 
     55                console.log("true"); 
     56            } 
     57        } 
     58    }); 
     59 
    2260    //Update thickness 
    2361    var thicknessSlider = document.getElementById("thicknessRange"); 
    2462    var thicknessSliderOutput = document.getElementById("thicknessRangeVal"); 
    2563    thicknessSliderOutput.innerHTML = thicknessSlider.value / 20; 
    26  
    2764    thicknessSlider.oninput = function () { 
     65        shapeSpecsChangeMD(); 
    2866        thicknessSliderOutput.innerHTML = this.value / 20; 
    2967        thicknessValue = this.value / 20; 
    3068        polyOptions.strokeWeight = thicknessValue; 
    3169        setSelectedThickness(thicknessValue); 
     70 
    3271    } 
    3372    //Update opacity 
     
    3776 
    3877    opacitySlider.oninput = function () { 
     78        shapeSpecsChangeMD(); 
    3979        opacityValue = this.value / 100; 
    4080        polyOptions.fillOpacity = opacityValue; 
     
    4484    } 
    4585 
    46     document.getElementById("thicknessRange").addEventListener("mousedown", shapeSpecsChangeMD); 
    47     document.getElementById("colourOpacity").addEventListener("mousedown", shapeSpecsChangeMD); 
    4886    document.getElementById("color-palette1").addEventListener("mousedown", shapeSpecsChangeMD); 
    49      
    5087    document.getElementById("thicknessRange").addEventListener("mouseup", shapeSpecsChangeMU); 
    5188    document.getElementById("colourOpacity").addEventListener("mouseup", shapeSpecsChangeMU); 
     89    document.onmousemove = mouseMove; 
     90    document.onmousedown = mouseDown; 
     91    document.onmouseup = mouseUp; 
     92 
    5293}); 
    5394 
    54 document.addEventListener("mousedown", function(){ 
    55      
    56   //console.log(document.body.style.cursor); 
    57  // console.log(document.getElementById("map").style.cursor); 
    58 }); 
     95 
     96function settingThePath() { 
     97    listenersArray = [] 
     98    counter = 0; 
     99    branchNum = 1; 
     100 
     101    for (var i = 0; i < selectedShapes.length * 2; i++) { 
     102        for (var j = 1; j < 5; j++) { 
     103            var path = "//*[@id='map']/div/div/div[1]/div[3]/div/div[3]/div[" + branchNum + "]/div[" + j + "]/div"; 
     104            listenersArray[counter] = getElementByXpath(path); 
     105            if (listenersArray[counter] !== undefined && listenersArray[counter] !== null) { 
     106                listenersArray[counter].addEventListener("mousemove", function () { 
     107                    resizable = true; 
     108                    shapeResize(); 
     109                }); 
     110                listenersArray[counter].addEventListener("mouseout", function () { 
     111                    if (mouseDown) { 
     112                        resizable = true; 
     113                        shapeResize(); 
     114                    } 
     115                }); 
     116            } 
     117            counter++; 
     118        } 
     119        branchNum++; 
     120    } 
     121} 
     122 
     123 
     124 
     125function shapeResize() { 
     126    if (mouseState == "down") { 
     127        if (selectedShapes.length > 0) { 
     128            if (resizable) { 
     129                if(dontResize == false){ 
     130                    historyOverlayPush(); 
     131                } 
     132                 
     133            } 
     134        } 
     135    } 
     136} 
     137 
    59138function shapeSpecsChangeMD() { 
     139 
    60140    if (selectedShapes.length > 0) { 
    61141        historyOverlayPush(); 
     
    65145function shapeSpecsChangeMU() { 
    66146    if (selectedShapes.length > 0) { 
     147        //console.log("this fires"); 
    67148        presentOverlayPush(); 
    68     }        
     149    } 
    69150} 
    70151 
     
    119200 
    120201    map = new google.maps.Map(document.getElementById('map'), { 
    121             center: {lat: -34.397, lng: 150.644 
     202            center: { 
     203                lat: -37.7891, 
     204                lng: 175.3180 
    122205            }, 
    123             zoom: 2, 
     206            zoom: 14, 
    124207        }); 
     208 
     209    // Add a style-selector control to the map. 
     210    var styleControl = document.getElementById('style-selector-control'); 
     211    map.controls[google.maps.ControlPosition.TOP_LEFT].push(styleControl); 
     212 
     213    // Set the map's style to the initial value of the selector. 
     214    var styleSelector = document.getElementById('style-selector'); 
     215    map.setOptions({ 
     216        styles: styles[styleSelector.value] 
     217    }); 
     218 
     219    // Apply new JSON when the user selects a different style. 
     220    styleSelector.addEventListener('change', function () { 
     221        map.setOptions({ 
     222            styles: styles[styleSelector.value] 
     223        }); 
     224    }); 
    125225 
    126226    drawingManager = new google.maps.drawing.DrawingManager({ 
     
    132232            }, 
    133233            markerOptions: { 
    134                 draggable: true 
     234                draggable: draggableState 
    135235            }, 
    136236            circleOptions: polyOptions, 
     
    142242    drawingManager.setMap(map); 
    143243 
    144     //overlays.push(event.overlay); // store reference to added overlay 
     244    google.maps.event.addListener(drawingManager, "drawingmode_changed", function () { 
     245        settingThePath(); 
     246 
     247    }) 
     248 
     249    // store reference to added overlay 
    145250    google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) { 
    146         console.log(e); 
     251 
     252        allowDeselect = true; 
    147253         
     254        //console.log(e); 
    148255        historyOverlayPush(); 
    149                  
     256 
    150257        overlays.push(e.overlay); // store reference to added overlay 
    151258        var newShape = e.overlay; 
    152259        newShape.type = e.type; 
    153  
     260        //console.log("this fires"); 
    154261        presentOverlayPush(); 
    155          
     262 
    156263        if (e.type !== google.maps.drawing.OverlayType.MARKER) { 
    157             addShapeListeners(newShape,e); 
     264            addShapeListeners(newShape, e); 
    158265            setSelection(newShape, e); 
    159266        } else { 
    160              
    161             addMarkerListeners(newShape,e); 
     267 
     268            addMarkerListeners(newShape, e); 
    162269            setSelection(newShape, e); 
    163270        } 
     
    165272 
    166273    //Clears selection if clicked on the map when shift is not presseed 
    167     google.maps.event.addListener(map, 'click', function () { 
     274    google.maps.event.addListener(map, 'click', function (e) { 
     275        var c = document.body.childNodes; 
     276        if (e.target && e.target.matches("a.classA")) { 
     277            console.log("Anchor element clicked!"); 
     278        } 
    168279        if (shiftKeyPressed == false) { 
    169280            clearSelection(); 
    170281            selectedShape = null; 
    171             } 
     282        } 
     283    }); 
     284     
     285    google.maps.event.addListener(map, 'mousedown', function (e) { 
     286        dontResize = true; 
    172287    });  
    173  
     288     
     289    google.maps.event.addListener(map, 'mouseup', function (e) { 
     290        dontResize = false; 
     291    });  
     292     
    174293    //Keyboard shortcuts 
    175294    document.addEventListener('keydown', function () { 
    176         if (event.code == 'KeyY' && (event.ctrlKey || event.metaKey) || (event.code == 'KeyZ' && event.code == 'ShiftLeft'  && (event.ctrlKey || event.metaKey) )){ 
    177                 redo(); 
    178  
    179         } 
    180         if (event.code == 'KeyZ' && (event.ctrlKey || event.metaKey)){ 
    181             if(shiftKeyPressed == false) { 
     295        if (event.code == 'KeyY' && (event.ctrlKey || event.metaKey) || (event.code == 'KeyZ' && event.code == 'ShiftLeft' && (event.ctrlKey || event.metaKey))) { 
     296            redo(); 
     297        } 
     298        if (event.code == 'KeyZ' && (event.ctrlKey || event.metaKey)) { 
     299            if (shiftKeyPressed == false) { 
    182300                undo(); 
    183301            } 
    184302        } 
    185         if (event.code == 'KeyA' && (event.ctrlKey || event.metaKey)){ 
    186             event.preventDefault();  
     303        if (event.code == 'KeyA' && (event.ctrlKey || event.metaKey)) { 
     304            event.preventDefault(); 
    187305            selectAll(); 
    188306            drawingManager.setDrawingMode(null); 
    189307        } 
    190         if (event.code == 'KeyD' && (event.ctrlKey || event.metaKey)){ 
    191             event.preventDefault();  
     308        if (event.code == 'KeyD' && (event.ctrlKey || event.metaKey)) { 
     309            event.preventDefault(); 
    192310            deselectAll(); 
    193311        } 
    194312        if (event.code == 'Digit0' || event.code == 'Numpad0' || event.code == 'Backquote') { 
    195             //clearSelection(); 
     313 
    196314            drawingManager.setDrawingMode(null); 
    197315        } else if (event.code == 'Digit1') { 
     
    208326            printHistory(); 
    209327        } 
    210 //                          console.log(event.code); 
     328        //                          console.log(event.code); 
    211329    }); 
    212330 
     
    231349} 
    232350 
    233     //Deletes a vertex if clicked on it 
    234     function vertexAndPolyDel(e, newShape) { 
    235         var vertex = e.vertex; 
    236         //console.log(e) 
    237         if (e.vertex !== undefined) { 
    238             historyOverlayPush(); 
    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             presentOverlayPush(); 
    254         } 
    255     } 
    256      
    257 function addMarkerListeners(newShape,e) 
    258 { 
     351//Deletes a vertex if clicked on it 
     352function vertexAndPolyDel(e, newShape) { 
     353    var vertex = e.vertex; 
     354    //console.log(e) 
     355    if (e.vertex !== undefined) { 
     356        //console.log("this fires"); 
     357        if (newShape.type === google.maps.drawing.OverlayType.POLYGON) { 
     358            var path = newShape.getPaths().getAt(e.path); 
     359            path.removeAt(e.vertex); 
     360            if (path.length < 3) { 
     361                newShape.setMap(null); 
     362            } 
     363        } 
     364        if (newShape.type === google.maps.drawing.OverlayType.POLYLINE) { 
     365            var path = newShape.getPath(); 
     366            path.removeAt(e.vertex); 
     367            if (path.length < 2) { 
     368                newShape.setMap(null); 
     369            } 
     370        } //console.log("this fires"); 
     371    } 
     372} 
     373 
     374function addMarkerListeners(newShape, e) { 
    259375    //cLICK EVENT IF A MARKER IS CREATED 
    260376    google.maps.event.addListener(newShape, 'click', function (e) { 
    261377        setSelection(newShape, e); 
    262378    }); 
    263      
     379 
    264380    google.maps.event.addListener(newShape, 'dragstart', function (e) { 
    265          
    266          
    267          
    268381        beingDragged = true; 
     382        //console.log("this fires"); 
    269383        historyOverlayPush(); 
    270384 
    271     });  
     385    }); 
     386 
     387    google.maps.event.addListener(newShape, 'dragend', function () { 
     388        beingDragged = false; 
     389        //console.log("this fires"); 
     390        presentOverlayPush(); 
     391        allowDeselect = false; 
     392    }); 
     393} 
     394 
     395function applyDrag(newShape) { 
     396    for (var i = 0; i < selectedShapes.length; i++) { 
     397        //mal = 0; 
     398        //maj = 0; 
     399        //gal = 0; 
     400        //gaj = 0; 
     401 
     402        //mal = selectedShapes[i].bounds.ma.l - newShape.bounds.ma.l; 
     403        //maj = selectedShapes[i].bounds.ma.j - newShape.bounds.ma.j; 
     404        //gal = selectedShapes[i].bounds.ga.l - newShape.bounds.ga.l; 
     405        //gaj = selectedShapes[i].bounds.ga.j - newShape.bounds.ga.j; 
     406 
     407        mal = newShape.bounds.ma.l - dsNorth; 
     408        maj = newShape.bounds.ma.j - dsSouth; 
     409        gal = newShape.bounds.ga.l - dsEast; 
     410        gaj = newShape.bounds.ga.j - dsWest; 
     411 
     412        var north = selectedShapes[i].bounds.ma.l; 
     413        var south = selectedShapes[i].bounds.ma.j; 
     414        var east = selectedShapes[i].bounds.ga.l + gal; 
     415        var west = selectedShapes[i].bounds.ga.j + gaj; 
     416        if (!isNaN(north) && !isNaN(south) && !isNaN(west) && !isNaN(east)) { 
     417            var NE = new google.maps.LatLng(north, east); 
     418            var SW = new google.maps.LatLng(south, west); 
     419            var newRect = new google.maps.LatLngBounds(SW, NE); 
     420            selectedShapes[i].setBounds(newRect); 
     421        } 
     422    } 
     423} 
     424 
     425function addShapeListeners(newShape, e) { 
     426    // Add an event listener that selects the newly-drawn shape when the user 
     427    // mouses down on it. 
     428    google.maps.event.addListener(newShape, 'click', function (e) { 
     429 
     430        vertexAndPolyDel(e, newShape); 
     431 
     432    }); 
     433 
     434    google.maps.event.addListener(newShape, 'dragstart', function (e) { 
     435 
     436 
     437        allowDeselect = false; 
     438        console.log("hey"); 
     439        historyOverlayPush(); 
     440    }); 
     441 
     442 
    272443 
    273444    google.maps.event.addListener(newShape, 'dragend', function () { 
    274445        beingDragged = false; 
    275446        presentOverlayPush(); 
     447        settingThePath(); 
     448         
    276449        allowDeselect = false; 
    277     });  
    278 } 
    279 function addShapeListeners(newShape,e) 
    280 { 
    281     // Add an event listener that selects the newly-drawn shape when the user 
    282     // mouses down on it. 
    283     google.maps.event.addListener(newShape, 'click', function (e) { 
    284         vertexAndPolyDel(e, newShape); 
    285     }); 
    286  
    287      
    288     google.maps.event.addListener(newShape, 'drag', function (e) { 
    289          
    290          
    291  
    292         //for(var i = 0; i < selectedShapes.length; i++) { 
    293         //  if(newShape.type = 'rectangle') { 
    294         //      var newBounds = { 
    295         //          east: selectedShapes[i].getBounds().ea.l + (selectedShapes[i].getBounds().ea.l - faj), 
    296         //          north: selectedShapes[i].getBounds().la.l + (selectedShapes[i].getBounds().la.l - fal), 
    297         //          south: selectedShapes[i].getBounds().la.j + (selectedShapes[i].getBounds().la.j - maj), 
    298         //          west: selectedShapes[i].getBounds().ea.j + (selectedShapes[i].getBounds().ea.j - mal) 
    299         //      } 
    300         //      selectedShapes[i].setBounds 
    301         //  } else { 
    302         // 
    303         //  } 
    304         //   
    305         //} 
    306      
    307  
    308     }); 
    309      
    310      
    311     google.maps.event.addListener(newShape, 'dragstart', function (e) { 
    312          
    313         //faj = newShape.bounds.fa.j; 
    314         //fal = newShape.bounds.fa.l; 
    315         //maj = newShape.bounds.ma.j; 
    316         //mal = newShape.bounds.ma.l; 
    317          
    318         //console.log(faj, fal, maj, mal); 
    319      
    320          
    321         beingDragged = true; 
    322         historyOverlayPush(); 
    323  
    324     }); 
    325      
    326     google.maps.event.addListener(newShape, 'dragend', function () { 
    327         beingDragged = false; 
    328         presentOverlayPush(); 
    329         allowDeselect = false; 
    330     }); 
    331      
     450        setSelection(newShape, e); 
     451    }); 
     452 
    332453    //Store information after the event ends 
    333454    google.maps.event.addListener(newShape, 'bounds_changed', function (e) { 
    334         if (beingDragged == false){ 
    335             resizeEntry = true; 
    336             historyOverlayPush(); 
     455        if (beingDragged == false) { 
    337456            presentOverlayPush(); 
    338             resizeEntry = false; 
    339         } 
    340          
     457        } 
    341458    }); 
    342459 
    343460    //Add an event listener to select a shape if the mouse hovers over it 
    344461    google.maps.event.addListener(newShape, 'mousedown', function (e) { 
     462        //console.log("this fires"); 
     463        if (e.target && e.target.matches("a.classA")) { 
     464            console.log("Anchor element clicked!"); 
     465        } 
    345466        //console.log(e); 
    346467        if (e.vertex !== undefined || e.edge !== undefined) { 
     468            //console.log("this fires"); 
    347469            historyOverlayPush() 
    348         }    
     470        } 
    349471        if (drawingManager.drawingMode == null) { 
    350472            setSelection(newShape, e); 
     
    353475 
    354476    google.maps.event.addListener(newShape, 'mouseup', function (e) { 
     477        console.log("mouseup"); 
    355478        if (e.vertex !== undefined || e.edge !== undefined) { 
     479            //console.log("this fires"); 
    356480            presentOverlayPush() 
    357         }  
    358         else{        
    359             removeFromSelectedShapes(newShape);      
    360         } 
    361     });  
     481        } else { 
     482            //setSelection(newShape, e); 
     483        } 
     484         
     485    }); 
    362486} 
    363487function clearSelection() { 
    364         if (selectedShape) { 
    365             if (selectedShape.type !== 'marker') { 
    366                 selectedShape.setEditable(false); 
    367                 if (shiftKeyPressed == false) { 
    368                     for (var i = 0; i < selectedShapes.length; i++) { 
    369                         selectedShapes[i].setEditable(false); 
    370                     } 
    371                     selectedShapes = []; 
     488    if (selectedShape) { 
     489        if (selectedShape.type !== 'marker') { 
     490            selectedShape.setEditable(false); 
     491            if (shiftKeyPressed == false) { 
     492                for (var i = 0; i < selectedShapes.length; i++) { 
     493                    selectedShapes[i].setEditable(false); 
    372494                } 
    373             } 
    374             selectedShape = null; 
    375         } 
    376     } 
    377      
     495                selectedShapes = []; 
     496            } 
     497        } 
     498        selectedShape = null; 
     499    } 
     500} 
     501 
    378502//Set selection for the selected overlay 
    379 function setSelection(shape, e) {    
     503function setSelection(shape, e) { 
     504    console.log("this fires"); 
    380505    if (shape.type !== 'marker') { 
    381506        if (shiftKeyPressed == false) { 
    382507            if (e.vertex == undefined) { 
    383                 if(e.edge == undefined) {                    
     508                if (e.edge == undefined) { 
    384509                    clearSelection(); 
    385510                    shape.setEditable(true); 
     
    388513        } 
    389514        if (selectedShapes.includes(shape)) { 
    390             if(e.vertex == undefined ) { 
    391                 if(e.edge == undefined) { 
    392                     //removeFromSelectedShapes(shape); 
     515            if (e.vertex == undefined) { 
     516                if (e.edge == undefined) { 
     517                    allowDeselect = true; 
     518                    removeFromSelectedShapes(shape); 
    393519                } 
    394520            } 
    395521        } else { 
     522            allowDeselect = false; 
     523            console.log("allowDeselect",allowDeselect); 
    396524            shape.setEditable(true); 
    397525            selectedShapes.push(shape); 
    398526        } 
    399  
    400527 
    401528        //Send the values to be updated 
     
    410537    } 
    411538    selectedShape = shape; 
    412 } 
    413  
    414 function boundsExtraction() { 
    415      
    416      
     539    settingThePath(); 
    417540} 
    418541 
    419542function removeFromSelectedShapes(shape) { 
    420543    if (selectedShapes.includes(shape)) { 
    421         if(allowDeselect) { 
     544        if (allowDeselect) { 
    422545            const index = selectedShapes.indexOf(shape); 
     546            console.log(index); 
    423547            selectedShapes.splice(index, 1); 
    424548            shape.setEditable(false); 
    425549        } 
    426         allowDeselect = false; 
    427     }    
    428 } 
    429      
     550        console.log("allowDeselect",allowDeselect); 
     551        allowDeselect = true; 
     552    }  
     553    console.log(selectedShapes.length); 
     554} 
     555 
    430556//Set selected thickness 
    431557function setSelectedThickness(sWeight) { 
     
    451577//set selected fill colour 
    452578function setSelectedShapeColor(color) { 
    453     if (selectedShapes.length > 0) { 
     579    if (selectedShapes.length > 0) { 
    454580        for (var i = 0; i < selectedShapes.length; i++) { 
    455581            selectedShapes[i].set('fillColor', color); 
     
    457583        } 
    458584    } 
     585} 
     586function getElementByXpath(path) { 
     587    return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue; 
    459588} 
    460589 
     
    474603    } 
    475604} 
    476 function selectAll(){ 
     605function selectAll() { 
    477606    shiftKeyPressed = true; 
    478607    var e = new Object(); 
    479608    e.vertex = undefined; 
    480609    selectedShapes = []; 
    481     for(var i = 0; i< overlays.length; i++) { 
     610    for (var i = 0; i < overlays.length; i++) { 
    482611        setSelection(overlays[i], e); 
    483612    } 
     
    485614} 
    486615 
    487 function deselectAll(){  
    488     for(var i = 0; i < selectedShapes.length; i++) { 
     616function deselectAll() { 
     617    for (var i = 0; i < selectedShapes.length; i++) { 
    489618        selectedShapes[i].setEditable(false); 
    490619    } 
    491620    selectedShapes = []; 
    492621} 
    493  
    494622 
    495623function printHistory() { 
     
    497625    console.log("present ", presentOverlays); 
    498626    console.log("undone ", undoneOverlays); 
    499     console.log(entryType); 
     627    console.log(mouseState); 
     628 
     629    //console.log(mal); 
     630    //console.log(maj); 
     631    //console.log(gal); 
     632    //console.log(gaj); 
     633 
     634 
     635} 
     636 
     637function mouseMove(ev) { 
     638 
     639    //How can I know the state of mouse from here 
     640    if (mouseState == 'down') { 
     641        //console.log('mouse down state') 
     642    } 
     643 
     644    if (mouseState == 'up') { 
     645        //console.log('mouse up state') 
     646    } 
     647} 
     648 
     649function mouseDown(ev) { 
     650    mouseState = "down"; 
     651    //    console.log('Down State you can now start dragging'); 
     652    //do not write any code here in this function 
     653} 
     654 
     655function mouseUp(ev) { 
     656    mouseState = "up"; 
     657    //    console.log('up state you cannot drag now because you are not holding your mouse') 
     658    //do not write any code here in this function 
    500659} 
    501660 
    502661function deleteSelectedShape() { 
     662    //console.log("this fires"); 
    503663    historyOverlayPush(); 
    504664    for (var i = 0; i < selectedShapes.length; i++) { 
    505665        selectedShapes[i].setMap(null); 
    506          
     666 
    507667        if (overlays.includes(selectedShapes[i])) { 
    508668            const index = overlays.indexOf(selectedShapes[i]); 
    509669            overlays.splice(index, 1); 
    510670            selectedShapes[i].setEditable(false); 
    511         }    
     671        } 
    512672    } 
    513673    selectedShapes = []; 
     674    //console.log("this fires"); 
    514675    presentOverlayPush(); 
    515676} 
    516677 
    517678function deleteAllShape() { 
     679    //console.log("this fires"); 
    518680    historyOverlayPush(); 
    519681    for (var i = 0; i < overlays.length; i++) { 
     
    521683    } 
    522684    overlays = []; 
     685    //console.log("this fires"); 
    523686    presentOverlayPush(); 
    524687} 
    525