Ignore:
Timestamp:
02/22/19 11:20:14 (21 months ago)
Author:
ak19
Message:

Map Scripts Editor transformed into a class

File:
1 edited

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