Show
Ignore:
Timestamp:
22.02.2019 11:20:14 (10 months ago)
Author:
ak19
Message:

Map Scripts Editor transformed into a class

Files:
1 modified

Legend:

Unmodified
Added
Removed
  • main/trunk/greenstone3/web/interfaces/default/js/map-scripts-editor.js

    r32769 r32798  
    1 var debug = false; 
    2 var shiftKeyPressed = false; 
    3 var beingDragged = false; 
    4 var resizeEntry = false; 
    5 var allowDeselect = true; 
    6 var colors = ['#1E90FF', '#FF1493', '#4B0082', '#32CD32', '#FF8C00', '#000000']; 
    7 var selectedColor; 
    8 var colorButtons = {}; 
    9 var thicknessValue = 1; 
    10 var opacityValue = 0.4; 
    11 var draggableState = true 
    12 var overlays = []; 
    13 var entryType = []; 
    14 var selectedShapes = []; 
    15 var listenersArray = []; 
    16 var mapsArray = []; 
    17 var controlsId = null; 
    18 var drawingManager; 
    19 var selectedShape; 
    20 var map = null; 
    21 var dragS, dragN; 
    22 var dsNorth, dsSouth, dsEast, dsWest; 
    23 //var gaj, gal, maj, mal; 
    24 var counter = 0; 
    25 var branchNum = 1; 
    26 var mouseState = "up"; 
    27 var thicknessRangeListener = thicknessValue; 
    28 var resizable = false; 
    29 var dontResize = false; 
    30  
    31 var mapEditorHistory = new MapEditorHistory(); 
    32  
    33 var polyOptions = { 
    34     fillColor: '#CA4A2F', 
    35     strokeWeight: thicknessValue, 
    36     fillOpacity: opacityValue, 
    37     editable: true, 
    38     draggable: draggableState, 
    39     geodesic: false 
    40 }; 
    41  
    42 function MapEditor() { 
     1 
     2 
     3function MapEditor(id) { 
     4    this.id = id; 
    435    this.shiftKeyPressed = false; 
    446    this.beingDragged = false; 
    45     this.resizeEntry = false; 
    467    this.allowDeselect = true; 
    478    this.colors = ['#1E90FF', '#FF1493', '#4B0082', '#32CD32', '#FF8C00', '#000000']; 
     
    5011    this.thicknessValue = 1; 
    5112    this.opacityValue = 0.4; 
    52     this.draggableState = true 
    5313    this.overlays = []; 
    54     this.entryType = []; 
    5514    this.selectedShapes = []; 
    5615    this.listenersArray = []; 
    5716    this.mapsArray = []; 
    58     this.controlsId = null; 
    5917    this.drawingManager; 
    6018    this.selectedShape; 
    6119    this.map = null; 
    62     this.dragS, dragN; 
    63     this.dsNorth, dsSouth, dsEast, dsWest; 
    64     // gaj, gal, maj, mal; 
    6520    this.counter = 0; 
    6621    this.branchNum = 1; 
    6722    this.mouseState = "up"; 
    68     this.thicknessRangeListener = thicknessValue; 
     23    this.thicknessRangeListener = this.thicknessValue; // ???? 
    6924    this.resizable = false; 
    7025    this.dontResize = false; 
    71      
    72     this.mapEditorHistory = new MapEditorHistory(); 
    73      
    7426    this.polyOptions = { 
    7527        fillColor: '#CA4A2F', 
    76         strokeWeight: thicknessValue, 
    77         fillOpacity: opacityValue, 
     28        strokeWeight: this.thicknessValue, 
     29        fillOpacity: this.opacityValue, 
    7830        editable: true, 
    79         draggable: this.draggableState, 
    80         geodesic: false 
    81 }; 
    82 } 
    83  
    84 //MapEditor.prototype.initMapEditorControls = function(id) { 
    85 //}; 
    86  
    87      
    88 function initMapEditorControls(id) { 
    89     console.log(id); 
    90     //change draggable 
    91     var draggableCB = document.querySelector("input[name=draggableCB]");     
    92      
     31        geodesic: false, 
     32        draggable: true 
     33    }; 
     34    this.mapEditorHistory = new MapEditorHistory(this); 
     35} 
     36 
     37MapEditor.prototype.initMapEditorControls = function () { 
     38    var that = this; 
     39    console.log(this.id); 
     40 
     41    var draggableCB = document.querySelector("input[name=draggableCB]"); 
    9342    draggableCB.addEventListener('change', function () { 
    9443        if (this.checked) { 
    95             draggableState = false; 
    96             for (var i = 0; i < overlays.length; i++) { 
    97                 overlays[i].draggable = draggableState; 
    98                 polyOptions.draggable = draggableState; 
     44            for (var i = 0; i < that.overlays.length; i++) { 
     45                console.log("checked"); 
     46                that.overlays[i].draggable = false; 
     47                that.polyOptions.draggable = false; 
    9948            } 
    10049        } else { 
    101             draggableState = true; 
    102             for (var i = 0; i < overlays.length; i++) { 
    103                 overlays[i].draggable = draggableState; 
    104                 polyOptions.draggable = draggableState; 
    105             } 
    106         } 
    107     }); 
    108  
     50            for (var i = 0; i < that.overlays.length; i++) { 
     51                console.log("not checked"); 
     52                that.overlays[i].draggable = true; 
     53                that.polyOptions.draggable = true; 
     54            } 
     55        } 
     56    }); 
     57     
     58     
    10959    //Update thickness 
    110     var thicknessSlider = document.getElementById("thicknessRange" +"-"+ id); 
    111     var thicknessSliderOutput = document.getElementById("thicknessRangeVal" +"-"+ id); 
     60    var thicknessSlider = document.getElementById("thicknessRange" + "-" + this.id); 
     61    var thicknessSliderOutput = document.getElementById("thicknessRangeVal" + "-" + this.id); 
    11262    thicknessSliderOutput.innerHTML = thicknessSlider.value / 20; 
    113      
     63 
    11464    thicknessSlider.oninput = function () { 
    115         shapeSpecsChangeMD(); 
     65        that.shapeSpecsChangeMD(); 
    11666        thicknessSliderOutput.innerHTML = this.value / 20; 
    117         thicknessValue = this.value / 20;        
    118         polyOptions.strokeWeight = thicknessValue; 
    119         setSelectedThickness(thicknessValue); 
     67        that.thicknessValue = this.value / 20; 
     68        that.polyOptions.strokeWeight = that.thicknessValue; 
     69        that.setSelectedThickness(that.thicknessValue); 
    12070 
    12171    } 
    12272    //Update opacity 
    123     var opacitySlider = document.getElementById("colourOpacity" +"-"+ id); 
    124     var opacitySliderOutput = document.getElementById("opacityRangeVal" +"-"+ id); 
    125     opacitySliderOutput.innerHTML = Math.round(opacitySlider.value) /100; 
     73    var opacitySlider = document.getElementById("colourOpacity" + "-" + this.id); 
     74    var opacitySliderOutput = document.getElementById("opacityRangeVal" + "-" + this.id); 
     75    opacitySliderOutput.innerHTML = Math.round(opacitySlider.value) / 100; 
    12676 
    12777    opacitySlider.oninput = function () { 
    128         shapeSpecsChangeMD(); 
     78        that.shapeSpecsChangeMD(); 
    12979        opacitySliderOutput.innerHTML = "% " + this.value; 
    130         opacityValue = this.value / 100;         
    131         polyOptions.fillOpacity = opacityValue; 
    132         setSelectedOpacity(opacityValue); 
    133     } 
    134  
    135     document.getElementById("color-palette1" +"-"+ id).addEventListener("mousedown", shapeSpecsChangeMD); 
    136     document.getElementById("thicknessRange" +"-"+ id).addEventListener("mouseup", shapeSpecsChangeMU); 
    137     document.getElementById("colourOpacity"  +"-"+ id).addEventListener("mouseup", shapeSpecsChangeMU); 
    138     document.onmousemove = mouseMove; 
    139     document.onmousedown = mouseDown; 
    140     document.onmouseup = mouseUp; 
    141 } 
    142  
    143  
    144 function settingThePath() { 
    145     listenersArray = [] 
    146     counter = 0; 
    147     branchNum = 1; 
    148  
    149     for (var i = 0; i < selectedShapes.length * 2; i++) { 
    150         for (var j = 1; j < 5; j++) { 
    151             var path = "//*[@id='map']/div/div/div[1]/div[3]/div/div[3]/div[" + branchNum + "]/div[" + j + "]/div"; 
    152             listenersArray[counter] = getElementByXpath(path); 
    153             if (listenersArray[counter] !== undefined && listenersArray[counter] !== null) { 
    154                 listenersArray[counter].addEventListener("mousemove", function () { 
    155                     resizable = true; 
    156                     shapeResize(); 
     80        that.opacityValue = this.value / 100; 
     81        that.polyOptions.fillOpacity = that.opacityValue; 
     82        that.setSelectedOpacity(that.opacityValue); 
     83    } 
     84 
     85    document.getElementById("color-palette1" + "-" + this.id).addEventListener("mousedown", function() { that.shapeSpecsChangeMD() }); 
     86    document.getElementById("thicknessRange" + "-" + this.id).addEventListener("mouseup", function () { that.shapeSpecsChangeMU() }); 
     87    document.getElementById("colourOpacity" + "-" + this.id).addEventListener("mouseup", function() { that.shapeSpecsChangeMU() } ); 
     88    document.onmousemove = function (ev) { 
     89        //How can I know the state of mouse from here 
     90        if (that.mouseState == 'down') { 
     91            //console.log('mouse down state') 
     92        } 
     93        if (that.mouseState == 'up') { 
     94            //console.log('mouse up state') 
     95        } 
     96    } 
     97 
     98    document.onmousedown = function (ev) { 
     99        that.mouseState = "down"; 
     100        //    console.log('Down State you can now start dragging'); 
     101        //do not write any code here in this function 
     102    } 
     103 
     104    document.onmouseup = function (ev) { 
     105        that.mouseState = "up"; 
     106        //    console.log('up state you cannot drag now because you are not holding your mouse') 
     107        //do not write any code here in this function 
     108    } 
     109} 
     110 
     111MapEditor.prototype.settingThePath = function () { 
     112    var that = this; 
     113    this.listenersArray = [] 
     114    this.counter = 0; 
     115    this.branchNum = 1; 
     116     
     117    for (var i = 0; i < this.selectedShapes.length * 2; i++) { 
     118        for (var j = 1; j < 6; j++) { 
     119            var path = "//*[@id='map-" + this.id + "']/div/div/div[1]/div[3]/div/div[3]/div[" + this.branchNum + "]/div[" + j + "]/div"; 
     120            this.listenersArray[this.counter] = this.getElementByXpath(path); 
     121            if (this.listenersArray[this.counter] !== (undefined || null)) { 
     122                this.listenersArray[this.counter].addEventListener("mousemove", function () { 
     123                    that.resizable = true; 
     124                    that.shapeResize(); 
    157125                }); 
    158                 listenersArray[counter].addEventListener("mouseout", function () { 
    159                     if (mouseDown) { 
    160                         resizable = true; 
    161                         shapeResize(); 
     126                this.listenersArray[this.counter].addEventListener("mouseout", function () { 
     127                    if (this.mouseDown) { 
     128                        that.resizable = true; 
     129                        that.shapeResize(); 
    162130                    } 
    163131                }); 
    164132            } 
    165             counter++; 
    166         } 
    167         branchNum++; 
    168     } 
    169 } 
    170  
    171  
    172  
    173 function shapeResize() { 
    174     if (mouseState == "down") { 
    175         if (selectedShapes.length > 0) { 
    176             if (resizable) { 
    177                 if(dontResize == false){ 
    178                     mapEditorHistory.historyOverlayPush(); 
     133            this.counter++; 
     134        } 
     135        this.branchNum++; 
     136    } 
     137} 
     138 
     139MapEditor.prototype.shapeResize = function () { 
     140    if (this.mouseState == "down") { 
     141        if (this.selectedShapes.length > 0) { 
     142            if (this.resizable) { 
     143                if (this.dontResize == false) { 
     144                    this.mapEditorHistory.historyOverlayPush(); 
    179145                } 
    180                  
    181             } 
    182         } 
    183     } 
    184 } 
    185  
    186 function shapeSpecsChangeMD() { 
    187  
    188     if (selectedShapes.length > 0) { 
    189         mapEditorHistory.historyOverlayPush(); 
    190     } 
    191 } 
    192  
    193 function shapeSpecsChangeMU() { 
    194     if (selectedShapes.length > 0) { 
    195         mapEditorHistory.presentOverlayPush (); 
    196     } 
    197 } 
    198  
    199 function makeColorButton(color) { 
     146 
     147            } 
     148        } 
     149    } 
     150} 
     151 
     152MapEditor.prototype.shapeSpecsChangeMD = function () { 
     153    console.log(this.selectedShapes); 
     154 
     155    if (this.selectedShapes.length > 0) { 
     156        this.mapEditorHistory.historyOverlayPush(); 
     157    } 
     158} 
     159 
     160MapEditor.prototype.shapeSpecsChangeMU = function () { 
     161    if (this.selectedShapes.length > 0) { 
     162        this.mapEditorHistory.presentOverlayPush(); 
     163    } 
     164} 
     165 
     166MapEditor.prototype.makeColorButton = function (color) { 
     167    var that = this; 
     168 
    200169    var button = document.createElement('span'); 
    201170    button.className = 'color-buttons1'; 
    202171    button.style.backgroundColor = color; 
    203172    google.maps.event.addDomListener(button, 'click', function () { 
    204         selectColor(color); 
    205         setSelectedShapeColor(color); 
    206         shapeSpecsChangeMU(); 
     173        that.selectColor(color); 
     174        that.setSelectedShapeColor(color); 
     175        that.shapeSpecsChangeMU(); 
    207176    }); 
    208177    return button; 
    209178} 
    210 function buildColorPalette(id) { 
    211     console.log("colour palette build"); 
    212     var colorPalette = document.getElementById("color-palette1" +"-"+ id); 
    213     for (var i = 0; i < colors.length; ++i) { 
    214         var currColor = colors[i]; 
    215         var colorButton = makeColorButton(currColor); 
     179 
     180MapEditor.prototype.buildColorPalette = function () { 
     181    var colorPalette = document.getElementById("color-palette1" + "-" + this.id); 
     182    for (var i = 0; i < this.colors.length; ++i) { 
     183        var currColor = this.colors[i]; 
     184        var colorButton = this.makeColorButton(currColor); 
    216185        colorPalette.appendChild(colorButton); 
    217         colorButtons[currColor] = colorButton; 
    218     } 
    219     selectColor(colors[0]); 
     186        this.colorButtons[currColor] = colorButton; 
     187    } 
     188    this.selectColor(this.colors[0]); 
    220189}; 
    221 function selectColor(color) { 
    222     selectedColor = color; 
    223     for (var i = 0; i < colors.length; ++i) { 
    224         var currColor = colors[i]; 
    225         colorButtons[currColor].style.border = currColor == color ? '2px solid #789' : '2px solid #fff'; 
     190 
     191MapEditor.prototype.selectColor = function (color) { 
     192    this.selectedColor = color; 
     193    for (var i = 0; i < this.colors.length; ++i) { 
     194        var currColor = this.colors[i]; 
     195        this.colorButtons[currColor].style.border = currColor == color ? '2px solid #789' : '2px solid #fff'; 
    226196    } 
    227197 
    228198    // Retrieves the current options from the drawing manager and replaces the 
    229199    // stroke or fill color as appropriate. 
    230     var polylineOptions = drawingManager.get('polylineOptions'); 
     200    var polylineOptions = this.drawingManager.get('polylineOptions'); 
    231201    polylineOptions.strokeColor = color; 
    232     drawingManager.set('polylineOptions', polylineOptions); 
    233  
    234     var rectangleOptions = drawingManager.get('rectangleOptions'); 
     202    this.drawingManager.set('polylineOptions', polylineOptions); 
     203 
     204    var rectangleOptions = this.drawingManager.get('rectangleOptions'); 
    235205    rectangleOptions.fillColor = color; 
    236     drawingManager.set('rectangleOptions', rectangleOptions); 
    237  
    238     var circleOptions = drawingManager.get('circleOptions'); 
     206    this.drawingManager.set('rectangleOptions', rectangleOptions); 
     207 
     208    var circleOptions = this.drawingManager.get('circleOptions'); 
    239209    circleOptions.fillColor = color; 
    240     drawingManager.set('circleOptions', circleOptions); 
    241  
    242     var polygonOptions = drawingManager.get('polygonOptions'); 
     210    this.drawingManager.set('circleOptions', circleOptions); 
     211 
     212    var polygonOptions = this.drawingManager.get('polygonOptions'); 
    243213    polygonOptions.fillColor = color; 
    244     drawingManager.set('polygonOptions', polygonOptions); 
    245 } 
    246  
    247 function initMapEditor(id) { 
     214    this.drawingManager.set('polygonOptions', polygonOptions); 
     215} 
     216 
     217MapEditor.prototype.initMapEditor = function () { 
    248218    var that = this; 
    249      
    250     map = new google.maps.Map(document.getElementById("map-" + id), { 
     219 
     220    this.map = new google.maps.Map(document.getElementById("map-" + this.id), { 
    251221            center: { 
    252222                lat: -37.7891, 
     
    254224            }, 
    255225            zoom: 14, 
    256             mapId: id, 
     226            mapId: this.id, 
    257227        }); 
    258     mapsArray.push(map);     
    259     console.log(map);    
     228    this.mapsArray.push(this.map); 
    260229    // Add a style-selector control to the map. 
    261     var styleControl = document.getElementById('style-selector-control' +"-"+ id); 
    262     map.controls[google.maps.ControlPosition.TOP_LEFT].push(styleControl); 
     230    var styleControl = document.getElementById('style-selector-control' + "-" + this.id); 
     231    this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(styleControl); 
    263232 
    264233    // Set the map's style to the initial value of the selector. 
    265     var styleSelector = document.getElementById('style-selector' +"-"+ id); 
    266     console.log(styleSelector); 
    267     //map = google.maps.Map(document.getElementById('map' +"-"+ id)); 
    268     console.log(map); 
    269     map.setOptions({ 
     234    var styleSelector = document.getElementById('style-selector' + "-" + this.id); 
     235    //console.log(styleSelector); 
     236    //map = google.maps.Map(document.getElementById('map' +"-"+ this.id)); 
     237    this.map.setOptions({ 
    270238        styles: styles[styleSelector.value] 
    271          
    272     }); 
    273      
     239 
     240    }); 
     241 
    274242    // Apply new JSON when the user selects a different style. 
    275243    styleSelector.addEventListener('change', function () { 
    276         console.log(id); 
    277         mapsArray.indexOf(map).setOptions({ 
     244        that.map.setOptions({ 
    278245            styles: styles[styleSelector.value] 
    279246        }); 
    280247    }); 
    281248 
    282     drawingManager = new google.maps.drawing.DrawingManager({ 
     249    this.drawingManager = new google.maps.drawing.DrawingManager({ 
    283250            drawingMode: google.maps.drawing.OverlayType.RECTANGLE, 
    284251            drawingControl: true, 
     
    288255            }, 
    289256            markerOptions: { 
    290                 draggable: draggableState 
     257                draggable: true 
    291258            }, 
    292             circleOptions: polyOptions, 
    293             polylineOptions: polyOptions, 
    294             polygonOptions: polyOptions, 
    295             rectangleOptions: polyOptions, 
     259            circleOptions: this.polyOptions, 
     260            polylineOptions: this.polyOptions, 
     261            polygonOptions: this.polyOptions, 
     262            rectangleOptions: this.polyOptions, 
    296263        }); 
    297264 
    298     drawingManager.setMap(map); 
    299  
    300     google.maps.event.addListener(drawingManager, "drawingmode_changed", function () { 
    301         if(shiftKeyPressed != true && drawingManager.drawingMode !== null){ 
    302             deselectAll(); 
    303         } 
    304         settingThePath(); 
     265    this.drawingManager.setMap(this.map); 
     266 
     267    google.maps.event.addListener(this.drawingManager, "drawingmode_changed", function () { 
     268        if (that.shiftKeyPressed != true && that.drawingManager.drawingMode !== null) { 
     269            that.deselectAll(); 
     270        } 
     271        that.settingThePath(); 
    305272 
    306273    }) 
    307274 
    308275    // store reference to added overlay 
    309     google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) { 
    310         allowDeselect = true; 
    311         mapEditorHistory.historyOverlayPush(); 
    312         overlays.push(e.overlay); // store reference to added overlay 
     276    google.maps.event.addListener(this.drawingManager, 'overlaycomplete', function (e) { 
     277         
     278        that.allowDeselect = true; 
     279        that.mapEditorHistory.historyOverlayPush(); 
     280        that.overlays.push(e.overlay); // store reference to added overlay 
    313281        var newShape = e.overlay; 
    314282        newShape.type = e.type; 
    315         mapEditorHistory.presentOverlayPush(); 
    316  
     283        that.mapEditorHistory.presentOverlayPush(); 
     284         
    317285        if (e.type !== google.maps.drawing.OverlayType.MARKER) { 
    318             addShapeListeners(newShape, e); 
    319             setSelection(newShape, e); 
     286            that.addShapeListeners(newShape, e); 
     287            that.setSelection(newShape, e); 
    320288        } else { 
    321  
    322             addMarkerListeners(newShape, e); 
    323             setSelection(newShape, e); 
    324         } 
     289            that.addMarkerListeners(newShape, e); 
     290            that.setSelection(newShape, e); 
     291        } 
     292         
    325293    }); 
    326294 
    327295    //Clears selection if clicked on the map when shift is not presseed 
    328     google.maps.event.addListener(map, 'click', function (e) { 
     296    google.maps.event.addListener(this.map, 'click', function (e) { 
    329297        var c = document.body.childNodes; 
    330298        if (e.target && e.target.matches("a.classA")) { 
    331299            console.log("Anchor element clicked!"); 
    332300        } 
    333         if (shiftKeyPressed == false) { 
    334             clearSelection(); 
    335             selectedShape = null; 
    336         } 
    337     }); 
    338      
    339     google.maps.event.addListener(map, 'mousedown', function (e) { 
    340         dontResize = true; 
    341     });  
    342      
    343     google.maps.event.addListener(map, 'mouseup', function (e) { 
    344         dontResize = false; 
    345     });  
    346      
    347     //Keyboard shortcuts 
    348     document.addEventListener('keydown', function () { 
    349         if (event.code == 'KeyY' && (event.ctrlKey || event.metaKey) || (event.code == 'KeyZ' && event.code == 'ShiftLeft' && (event.ctrlKey || event.metaKey))) { 
    350             mapEditorHistory.redo(); 
     301        if (that.shiftKeyPressed == false) { 
     302            that.clearSelection(); 
     303            that.selectedShape = null; 
     304        } 
     305    }); 
     306 
     307    google.maps.event.addListener(this.map, 'mousedown', function (e) { 
     308        that.dontResize = true; 
     309    }); 
     310 
     311    google.maps.event.addListener(this.map, 'mouseup', function (e) { 
     312        that.dontResize = false; 
     313    }); 
     314 
     315    //Keyboard shortcuts         
     316    var mapAndControls = document.getElementById("map-and-controls-" + this.id); 
     317    mapAndControls.addEventListener('keydown', function () { 
     318        if (event.code == 'KeyY' && (event.ctrlKey || event.metaKey) || 
     319            (event.code == 'KeyZ' && event.code == 'ShiftLeft' && (event.ctrlKey || event.metaKey))) { 
     320            that.mapEditorHistory.redo(); 
    351321        } 
    352322        if (event.code == 'KeyZ' && (event.ctrlKey || event.metaKey)) { 
    353             if (shiftKeyPressed == false) { 
    354                 //undo(); 
    355                 mapEditorHistory.undo(); 
    356                 //mapEditorHistory.undo(overlays, draggableState); // ***** when we only have MapEditorHistory as a class 
    357                 //that.mapEditorHistory.undo(that.overlays); // ***** when we have both MapEditorHistory and MapEditor as classes 
    358                  
     323            if (that.shiftKeyPressed == false) { 
     324                that.mapEditorHistory.undo(); 
    359325            } 
    360326        } 
    361327        if (event.code == 'KeyA' && (event.ctrlKey || event.metaKey)) { 
    362328            event.preventDefault(); 
    363             drawingManager.setDrawingMode(null); 
    364             selectAll(); 
    365              
     329            that.drawingManager.setDrawingMode(null); 
     330            that.selectAll(); 
     331 
    366332        } 
    367333        if (event.code == 'KeyD' && (event.ctrlKey || event.metaKey)) { 
    368334            event.preventDefault(); 
    369             deselectAll(); 
     335            that.deselectAll(); 
    370336        } 
    371337        if (event.code == 'Digit0' || event.code == 'Numpad0' || event.code == 'Backquote') { 
    372338 
    373             drawingManager.setDrawingMode(null); 
     339            that.drawingManager.setDrawingMode(null); 
    374340        } else if (event.code == 'Digit1') { 
    375             drawingManager.setDrawingMode('marker'); 
     341            that.drawingManager.setDrawingMode('marker'); 
    376342        } else if (event.code == 'Digit2') { 
    377             drawingManager.setDrawingMode('circle'); 
     343            that.drawingManager.setDrawingMode('circle'); 
    378344        } else if (event.code == 'Digit3') { 
    379             drawingManager.setDrawingMode('polygon'); 
     345            that.drawingManager.setDrawingMode('polygon'); 
    380346        } else if (event.code == 'Digit4') { 
    381             drawingManager.setDrawingMode('polyline'); 
     347            that.drawingManager.setDrawingMode('polyline'); 
    382348        } else if (event.code == 'Digit5') { 
    383             drawingManager.setDrawingMode('rectangle'); 
     349            that.drawingManager.setDrawingMode('rectangle'); 
    384350        } else if (event.code == 'KeyQ') { 
    385             printHistory(); 
     351            that.printHistory(); 
    386352        } 
    387353        //                          console.log(event.code); 
    388354    }); 
    389355 
     356    /* 
     357    var mapHtml = document.getElementById("map-" + this.id); 
     358    var controlHtml = document.getElementById("ControlPanel-" + this.id); 
     359    controlHtml.addEventListener('click', function () { 
     360        console.log("*** ControlPanel clicked"); 
     361        mapHtml.focus()  
     362    }); 
     363    */ 
     364     
    390365    //Sets shift as pressed 
    391     document.addEventListener('keydown', function () { 
     366    mapAndControls.addEventListener('keydown', function () { 
    392367        if (event.code == 'ShiftLeft' || event.code == 'ShiftRight') { 
    393             shiftKeyPressed = true; 
     368            that.shiftKeyPressed = true; 
    394369 
    395370        } 
     
    398373 
    399374    //Sets shift as unpressed 
    400     document.addEventListener('keyup', function () { 
     375    mapAndControls.addEventListener('keyup', function () { 
    401376        if (event.code == 'ShiftLeft' || event.code == 'ShiftRight') { 
    402             shiftKeyPressed = false; 
    403         } 
    404  
    405     }); 
    406  
    407     buildColorPalette(id); 
     377            that.shiftKeyPressed = false; 
     378        } 
     379 
     380    }); 
     381 
     382    this.buildColorPalette(); 
    408383} 
    409384 
    410385//Deletes a vertex if clicked on it 
    411 function vertexAndPolyDel(e, newShape) { 
     386MapEditor.prototype.vertexAndPolyDel = function (e, newShape) { 
    412387    var vertex = e.vertex; 
    413388    if (e.vertex !== undefined) { 
     
    429404} 
    430405 
    431 function addMarkerListeners(newShape, e) { 
     406MapEditor.prototype.addMarkerListeners = function (newShape, e) { 
     407    var that = this; 
    432408    //cLICK EVENT IF A MARKER IS CREATED 
    433409    google.maps.event.addListener(newShape, 'click', function (e) { 
    434         setSelection(newShape, e); 
     410        that.setSelection(newShape, e); 
    435411    }); 
    436412 
    437413    google.maps.event.addListener(newShape, 'dragstart', function (e) { 
    438         beingDragged = true; 
    439         mapEditorHistory.historyOverlayPush(); 
     414        that.beingDragged = true; 
     415        that.mapEditorHistory.historyOverlayPush(); 
    440416 
    441417    }); 
    442418 
    443419    google.maps.event.addListener(newShape, 'dragend', function () { 
    444         beingDragged = false; 
    445         mapEditorHistory.presentOverlayPush (); 
    446         allowDeselect = false; 
    447     }); 
    448 } 
    449  
    450 function addShapeListeners(newShape, e) { 
     420        that.beingDragged = false; 
     421        that.mapEditorHistory.presentOverlayPush(); 
     422        that.allowDeselect = false; 
     423    }); 
     424} 
     425 
     426MapEditor.prototype.addShapeListeners = function (newShape, e) { 
     427    var that = this; 
    451428    // Add an event listener that selects the newly-drawn shape when the user 
    452429    // mouses down on it. 
    453430    google.maps.event.addListener(newShape, 'click', function (e) { 
    454431 
    455         vertexAndPolyDel(e, newShape); 
     432        that.vertexAndPolyDel(e, newShape); 
    456433 
    457434    }); 
    458435 
    459436    google.maps.event.addListener(newShape, 'dragstart', function (e) { 
    460         allowDeselect = false; 
    461         mapEditorHistory.historyOverlayPush(); 
    462     }); 
    463  
    464  
     437        that.allowDeselect = false; 
     438        that.mapEditorHistory.historyOverlayPush(); 
     439    }); 
    465440 
    466441    google.maps.event.addListener(newShape, 'dragend', function () { 
    467         beingDragged = false; 
    468         mapEditorHistory.presentOverlayPush (); 
    469         settingThePath(); 
    470          
    471         allowDeselect = false; 
    472         setSelection(newShape, e); 
     442        that.beingDragged = false; 
     443        that.mapEditorHistory.presentOverlayPush(); 
     444        that.settingThePath(); 
     445 
     446        that.allowDeselect = false; 
     447        that.setSelection(newShape, e); 
    473448    }); 
    474449 
    475450    //Store information after the event ends 
    476451    google.maps.event.addListener(newShape, 'bounds_changed', function (e) { 
    477         if (beingDragged == false) { 
    478             mapEditorHistory.presentOverlayPush (); 
     452        if (that.beingDragged == false) { 
     453            that.mapEditorHistory.presentOverlayPush(); 
    479454        } 
    480455    }); 
     
    486461        } 
    487462        if (e.vertex !== undefined || e.edge !== undefined) { 
    488             mapEditorHistory.historyOverlayPush() 
    489         } 
    490         if (drawingManager.drawingMode == null) { 
    491             setSelection(newShape, e); 
     463            that.mapEditorHistory.historyOverlayPush() 
     464        } 
     465        if (that.drawingManager.drawingMode == null) { 
     466            that.setSelection(newShape, e); 
    492467        } 
    493468    }); 
     
    495470    google.maps.event.addListener(newShape, 'mouseup', function (e) { 
    496471        if (e.vertex !== undefined || e.edge !== undefined) { 
    497             mapEditorHistory.presentOverlayPush () 
     472            that.mapEditorHistory.presentOverlayPush() 
    498473        } else { 
    499             //setSelection(newShape, e); 
    500         } 
    501          
    502     }); 
    503 } 
    504 function clearSelection() { 
    505     if (selectedShape) { 
    506         if (selectedShape.type !== 'marker') { 
    507             selectedShape.setEditable(false); 
    508             if (shiftKeyPressed == false) { 
    509                 for (var i = 0; i < selectedShapes.length; i++) { 
    510                     selectedShapes[i].setEditable(false); 
     474            //that.setSelection(newShape, e); 
     475        } 
     476 
     477    }); 
     478} 
     479MapEditor.prototype.clearSelection = function () { 
     480    if (this.selectedShape) { 
     481        if (this.selectedShape.type !== 'marker') { 
     482            this.selectedShape.setEditable(false); 
     483            if (this.shiftKeyPressed == false) { 
     484                for (var i = 0; i < this.selectedShapes.length; i++) { 
     485                    this.selectedShapes[i].setEditable(false); 
    511486                } 
    512                 selectedShapes = []; 
    513             } 
    514         } 
    515         selectedShape = null; 
     487                this.selectedShapes = []; 
     488            } 
     489        } 
     490        this.selectedShape = null; 
    516491    } 
    517492} 
    518493 
    519494//Set selection for the selected overlay 
    520 function setSelection(shape, e) { 
     495MapEditor.prototype.setSelection = function (shape, e) { 
     496    //var that = this; 
    521497    if (shape.type !== 'marker') { 
    522         if (shiftKeyPressed == false) { 
    523             if(e !== null) { 
     498        if (this.shiftKeyPressed == false) { 
     499            if (e !== null) { 
    524500                if (e.vertex == undefined) { 
    525501                    if (e.edge == undefined) { 
    526                         clearSelection(); 
     502                        this.clearSelection(); 
    527503                        shape.setEditable(true); 
    528504                    } 
    529                 }                
    530             } 
    531         } 
    532         if (selectedShapes.includes(shape)) { 
    533             if(e !== null){ 
     505                } 
     506            } 
     507        } 
     508        if (this.selectedShapes.includes(shape)) { 
     509            if (e !== null) { 
    534510                if (e.vertex == undefined) { 
    535511                    if (e.edge == undefined) { 
    536                         allowDeselect = true; 
    537                         removeFromSelectedShapes(shape); 
     512                        this.allowDeselect = true; 
     513                        this.removeFromSelectedShapes(shape); 
    538514                    } 
    539515                } 
    540516            } 
    541517        } else { 
    542             allowDeselect = false; 
     518            this.allowDeselect = false; 
    543519            shape.setEditable(true); 
    544             selectedShapes.push(shape); 
     520            this.selectedShapes.push(shape); 
    545521        } 
    546522 
     
    550526        var fCol = shape.fillColor; 
    551527        var sCol = shape.strokeColor; 
    552         //updateMenuValues(thi, opa, fCol, sCol); 
     528        this.updateMenuValues(thi, opa, fCol, sCol); 
    553529 
    554530    } else if (shape.type == 'marker') { 
    555         clearSelection(); 
    556     } 
    557     selectedShape = shape; 
    558     settingThePath(); 
    559 } 
    560  
    561 function removeFromSelectedShapes(shape) { 
    562     if (selectedShapes.includes(shape)) { 
    563         if (allowDeselect) { 
    564             const index = selectedShapes.indexOf(shape); 
    565             selectedShapes.splice(index, 1); 
     531        this.clearSelection(); 
     532    } 
     533    this.selectedShape = shape; 
     534    this.settingThePath(); 
     535} 
     536 
     537MapEditor.prototype.removeFromSelectedShapes = function (shape) { 
     538    if (this.selectedShapes.includes(shape)) { 
     539        if (this.allowDeselect) { 
     540            const index = this.selectedShapes.indexOf(shape); 
     541            this.selectedShapes.splice(index, 1); 
    566542            shape.setEditable(false); 
    567543        } 
    568         allowDeselect = true; 
    569     }  
     544        this.allowDeselect = true; 
     545    } 
    570546} 
    571547 
    572548//Set selected thickness 
    573 function setSelectedThickness(sWeight) { 
    574     if (selectedShapes.length > 0) { 
    575         //mapEditorHistory.historyOverlayPush(); 
    576         for (var i = 0; i < selectedShapes.length; i++) { 
    577             selectedShapes[i].set('strokeWeight', sWeight); 
     549MapEditor.prototype.setSelectedThickness = function (sWeight) { 
     550    if (this.selectedShapes.length > 0) { 
     551        for (var i = 0; i < this.selectedShapes.length; i++) { 
     552            this.selectedShapes[i].set('strokeWeight', sWeight); 
    578553        } 
    579554    } 
     
    581556 
    582557//Set selected opacity 
    583 function setSelectedOpacity(fOpacity) { 
    584  
    585     if (selectedShapes.length > 0) { 
    586         for (var i = 0; i < selectedShapes.length; i++) { 
    587             selectedShapes[i].set('fillOpacity', fOpacity); 
     558MapEditor.prototype.setSelectedOpacity = function (fOpacity) { 
     559 
     560    if (this.selectedShapes.length > 0) { 
     561        for (var i = 0; i < this.selectedShapes.length; i++) { 
     562            this.selectedShapes[i].set('fillOpacity', fOpacity); 
    588563        } 
    589564    } 
     
    591566 
    592567//set selected fill colour 
    593 function setSelectedShapeColor(color) { 
    594     if (selectedShapes.length > 0) { 
    595         for (var i = 0; i < selectedShapes.length; i++) { 
    596             selectedShapes[i].set('fillColor', color); 
    597             selectedShapes[i].set('strokeColor', color); 
    598         } 
    599     } 
    600 } 
    601 function getElementByXpath(path) { 
     568MapEditor.prototype.setSelectedShapeColor = function (color) { 
     569    if (this.selectedShapes.length > 0) { 
     570        for (var i = 0; i < this.selectedShapes.length; i++) { 
     571            this.selectedShapes[i].set('fillColor', color); 
     572            this.selectedShapes[i].set('strokeColor', color); 
     573        } 
     574    } 
     575} 
     576 
     577MapEditor.prototype.getElementByXpath = function (path) { 
    602578    return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue; 
    603579} 
    604580 
    605 function updateMenuValues(thi, opa, fCol, sCol, id) { 
     581MapEditor.prototype.updateMenuValues = function (thi, opa, fCol, sCol) { 
    606582    //Update thickness slider and value on the settings menu 
    607     var thicknessSliderOutput = document.getElementById("thicknessRangeVal" +"-"+ id); 
     583    var thicknessSliderOutput = document.getElementById("thicknessRangeVal" + "-" + this.id); 
    608584    thicknessSliderOutput.innerHTML = thi; 
    609     document.getElementById("thicknessRange" +"-"+ id).value = thi * 20; 
     585    document.getElementById("thicknessRange" + "-" + this.id).value = thi * 20; 
    610586 
    611587    //Update the opacity slider and value on the settings menu 
    612     var opacitySliderOutput = document.getElementById("opacityRangeVal" +"-"+ id); 
     588    var opacitySliderOutput = document.getElementById("opacityRangeVal" + "-" + this.id); 
    613589    opacitySliderOutput.innerHTML = "% " + opa * 100; 
    614     document.getElementById("colourOpacity" +"-"+ id).value = opa * 100; 
    615  
    616     if (drawingManager.drawingMode == null) { 
    617         selectColor(fCol); 
    618     } 
    619 } 
    620 function selectAll() { 
    621     shiftKeyPressed = true; 
     590    document.getElementById("colourOpacity" + "-" + this.id).value = opa * 100; 
     591 
     592    if (this.drawingManager.drawingMode == null) { 
     593        this.selectColor(fCol); 
     594    } 
     595} 
     596MapEditor.prototype.selectAll = function () { 
     597    this.shiftKeyPressed = true; 
    622598    var e = new Object(); 
    623599    e.vertex = undefined; 
    624     selectedShapes = []; 
    625     for (var i = 0; i < overlays.length; i++) { 
    626         setSelection(overlays[i], e); 
    627     } 
    628     shiftKeyPressed = false; 
    629 } 
    630  
    631 function deselectAll() { 
    632     for (var i = 0; i < selectedShapes.length; i++) { 
    633         selectedShapes[i].setEditable(false); 
    634     } 
    635     selectedShapes = []; 
    636 } 
    637  
    638 function printHistory() { 
    639     console.log("prev", mapEditorHistory.prevOverlays); 
    640     console.log("present ", mapEditorHistory.presentOverlays); 
    641     console.log("undone ", mapEditorHistory.undoneOverlays); 
    642     console.log(mouseState); 
    643 } 
    644  
    645 function mouseMove(ev) { 
    646  
    647     //How can I know the state of mouse from here 
    648     if (mouseState == 'down') { 
    649         //console.log('mouse down state') 
    650     } 
    651  
    652     if (mouseState == 'up') { 
    653         //console.log('mouse up state') 
    654     } 
    655 } 
    656  
    657 function mouseDown(ev) { 
    658     mouseState = "down"; 
    659     //    console.log('Down State you can now start dragging'); 
    660     //do not write any code here in this function 
    661 } 
    662  
    663 function mouseUp(ev) { 
    664     mouseState = "up"; 
    665     //    console.log('up state you cannot drag now because you are not holding your mouse') 
    666     //do not write any code here in this function 
    667 } 
    668  
    669 function deleteSelectedShape() { 
     600    this.selectedShapes = []; 
     601    for (var i = 0; i < this.overlays.length; i++) { 
     602        this.setSelection(this.overlays[i], e); 
     603    } 
     604    this.shiftKeyPressed = false; 
     605} 
     606MapEditor.prototype.deselectAll = function () { 
     607    for (var i = 0; i < this.selectedShapes.length; i++) { 
     608        this.selectedShapes[i].setEditable(false); 
     609    } 
     610    this.selectedShapes = []; 
     611} 
     612 
     613MapEditor.prototype.printHistory = function () { 
     614    //console.log("prev", this.mapEditorHistory.prevOverlays); 
     615    //console.log("present ", this.mapEditorHistory.presentOverlays); 
     616    //console.log("undone ", this.mapEditorHistory.undoneOverlays); 
     617    //console.log(this.selectedShapes); 
     618    console.log(this.overlays); 
     619     
     620    var json_overlays = ShapesUtil.overlayToJSON(this.overlays); 
     621     
     622    console.log("JSON overlay:\n" + JSON.stringify(json_overlays)); 
     623     
     624} 
     625 
     626MapEditor.LOAD = function (json_str) { 
     627     
     628    var map_editor = Object.values(gsmap_store)[0] 
     629     
     630    var new_overlays = ShapesUtil.JSONToOverlays(json_str); 
     631     
     632    for (var i=0; i<map_editor.overlays.length; i++) { 
     633        map_editor.overlays[i].setMap(null); 
     634    } 
     635     
     636    map_editor.overlays = new_overlays; 
     637     
     638    for (var i=0; i<map_editor.overlays.length; i++) { 
     639        map_editor.overlays[i].setMap(map_editor.map); 
     640    } 
     641     
     642} 
     643 
     644MapEditor.prototype.deleteSelectedShapes = function () { 
    670645    //console.log("this fires"); 
    671     mapEditorHistory.historyOverlayPush(); 
    672     for (var i = 0; i < selectedShapes.length; i++) { 
    673         selectedShapes[i].setMap(null); 
    674  
    675         if (overlays.includes(selectedShapes[i])) { 
    676             const index = overlays.indexOf(selectedShapes[i]); 
    677             overlays.splice(index, 1); 
    678             selectedShapes[i].setEditable(false); 
    679         } 
    680     } 
    681     selectedShapes = []; 
     646    this.mapEditorHistory.historyOverlayPush(); 
     647    for (var i = 0; i < this.selectedShapes.length; i++) { 
     648        this.selectedShapes[i].setMap(null); 
     649 
     650        if (this.overlays.includes(this.selectedShapes[i])) { 
     651            const index = this.overlays.indexOf(this.selectedShapes[i]); 
     652            this.overlays.splice(index, 1); 
     653            this.selectedShapes[i].setEditable(false); 
     654        } 
     655    } 
     656    this.selectedShapes = []; 
    682657    //console.log("this fires"); 
    683     mapEditorHistory.presentOverlayPush (); 
    684 } 
    685  
    686 function deleteAllShape(nId) { 
    687     console.log(nId); 
    688     //console.log("this fires"); 
    689     mapEditorHistory.historyOverlayPush(); 
    690     for (var i = 0; i < overlays.length; i++) { 
    691         overlays[i].setMap(null); 
    692     } 
    693     overlays = []; 
    694     //console.log("this fires"); 
    695     mapEditorHistory.presentOverlayPush (); 
    696 } 
     658    this.mapEditorHistory.presentOverlayPush(); 
     659} 
     660 
     661MapEditor.prototype.draggableState = function () { 
     662     
     663    var draggableCB = document.querySelector("input[name=draggableCB]"); 
     664    draggableCB.addEventListener('change', function () { 
     665        if (this.checked) { 
     666            this.overlays.draggable = false; 
     667        } else { 
     668            this.overlays.draggable = false; 
     669        } 
     670    }); 
     671} 
     672 
     673MapEditor.prototype.deleteAllShapes = function () { 
     674    //console.log("deleteAllShape() this.id = " + this.id); 
     675    this.mapEditorHistory.historyOverlayPush(); 
     676    for (var i = 0; i < this.overlays.length; i++) { 
     677        this.overlays[i].setMap(null); 
     678    } 
     679    this.overlays = []; 
     680    this.mapEditorHistory.presentOverlayPush(); 
     681}