Changeset 32732


Ignore:
Timestamp:
01/31/19 17:03:19 (22 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 edited

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