source: main/trunk/greenstone3/web/interfaces/default/js/map-scripts-editor.js@ 32803

function MapEditor(id) {
    this.id = id;
    this.shiftKeyPressed = false;
    this.beingDragged = false;
    this.allowDeselect = true;
    this.colors = ['#1E90FF', '#FF1493', '#4B0082', '#32CD32', '#FF8C00', '#000000'];
    this.selectedColor;
    this.colorButtons = {};
    this.thicknessValue = 1;
    this.opacityValue = 0.4;
    this.overlays = [];
    this.selectedShapes = [];
    this.listenersArray = [];
    this.mapsArray = [];
    this.drawingManager;
    this.selectedShape;
    this.map = null;
    this.counter = 0;
    this.branchNum = 1;
    this.mouseState = "up";
    this.thicknessRangeListener = this.thicknessValue; // ????
    this.resizable = false;
    this.dontResize = false;
    this.polyOptions = {
        fillColor: '#CA4A2F',
        strokeWeight: this.thicknessValue,
        fillOpacity: this.opacityValue,
        editable: true,
        geodesic: false,
        draggable: true
    };
    this.mapEditorHistory = new MapEditorHistory(this);
}

MapEditor.prototype.initMapEditorControls = function () {
    var that = this;


    var draggableCB = document.querySelector("input[name=draggableCB]");
    draggableCB.addEventListener('change', function () {
        if (this.checked) {
            for (var i = 0; i < that.overlays.length; i++) {
                console.log("checked");
                that.overlays[i].draggable = false;
                that.polyOptions.draggable = false;
            }
        } else {
            for (var i = 0; i < that.overlays.length; i++) {
                console.log("not checked");
                that.overlays[i].draggable = true;
                that.polyOptions.draggable = true;
            }
        }
    });
    
    
    //Update thickness
    var thicknessSlider = document.getElementById("thicknessRange" + "-" + this.id);
    var thicknessSliderOutput = document.getElementById("thicknessRangeVal" + "-" + this.id);
    thicknessSliderOutput.innerHTML = ((thicknessSlider.value / 20) * 100) / 100;

    thicknessSlider.oninput = function () {
        that.shapeSpecsChangeMD();
        thicknessSliderOutput.innerHTML = ((this.value / 20) * 100) / 100;
        that.thicknessValue = this.value / 20;
        that.polyOptions.strokeWeight = that.thicknessValue;
        that.setSelectedThickness(that.thicknessValue);

    }
    //Update opacity
    var opacitySlider = document.getElementById("colourOpacity" + "-" + this.id);
    var opacitySliderOutput = document.getElementById("opacityRangeVal" + "-" + this.id);
    opacitySliderOutput.innerHTML = "% " + Math.round(opacitySlider.value);
    
    opacitySlider.oninput = function () {
        that.shapeSpecsChangeMD();
        opacitySliderOutput.innerHTML = "% " + Math.round(this.value * 100) / 100;
        that.opacityValue = this.value / 100;
        that.polyOptions.fillOpacity = that.opacityValue;
        that.setSelectedOpacity(that.opacityValue);
    }

    document.getElementById("color-palette1" + "-" + this.id).addEventListener("mousedown", function() { that.shapeSpecsChangeMD() });
    document.getElementById("thicknessRange" + "-" + this.id).addEventListener("mouseup", function () { that.shapeSpecsChangeMU() });
    document.getElementById("colourOpacity" + "-" + this.id).addEventListener("mouseup", function() { that.shapeSpecsChangeMU() } );
    document.onmousemove = function (ev) {
        //How can I know the state of mouse from here
        if (that.mouseState == 'down') {
            //console.log('mouse down state')
        }
        if (that.mouseState == 'up') {
            //console.log('mouse up state')
        }
    }

    document.onmousedown = function (ev) {
        that.mouseState = "down";
        //    console.log('Down State you can now start dragging');
        //do not write any code here in this function
    }

    document.onmouseup = function (ev) {
        that.mouseState = "up";
        //    console.log('up state you cannot drag now because you are not holding your mouse')
        //do not write any code here in this function
    }
    
    /* TODO: WORK IN PROGRESS
    window.onbeforeunload = function (e) {
        var collection = gs.cgiParams.c;
        var site_name = gs.xsltParams.site_name;
        var documentID = this.id;
        var metadataName = "MapOverlays";
        
        
        //functions.getArchivesMetadata = function(collection, site, documentID, metadataName, metadataPosition, responseFunction);
        
        
        //responseFunction = console.log()
        
        var savedOverlays = null;
        var enableMessage = that.overlays == savedOverlays;
        var enableMessage = true;
        var message = "Your confirmation message goes here.",
        e = e || window.event;
        // For IE and Firefox
        if (e) {
            if(enableMessage){
                e.returnValue = message;
                // For Safari
                return message;         
            }
        }
    }*/
    
}

MapEditor.prototype.settingThePath = function () {
    var that = this;
    this.listenersArray = []
    this.counter = 0;
    this.branchNum = 1;
    
    for (var i = 0; i < this.selectedShapes.length * 2; i++) {
        for (var j = 1; j < 6; j++) {
            var path = "//*[@id='map-" + this.id + "']/div/div/div[1]/div[3]/div/div[3]/div[" + this.branchNum + "]/div[" + j + "]/div";
            this.listenersArray[this.counter] = this.getElementByXpath(path);
            if (this.listenersArray[this.counter] !== (undefined || null)) {
                this.listenersArray[this.counter].addEventListener("mousemove", function () {
                    that.resizable = true;
                    that.shapeResize();
                });
                this.listenersArray[this.counter].addEventListener("mouseout", function () {
                    if (this.mouseDown) {
                        that.resizable = true;
                        that.shapeResize();
                    }
                });
            }
            this.counter++;
        }
        this.branchNum++;
    }
}

MapEditor.prototype.shapeResize = function () {
    if (this.mouseState == "down") {
        if (this.selectedShapes.length > 0) {
            if (this.resizable) {
                if (this.dontResize == false) {
                    this.mapEditorHistory.historyOverlayPush();
                }

            }
        }
    }
}

MapEditor.prototype.shapeSpecsChangeMD = function () {
    if (this.selectedShapes.length > 0) {
        this.mapEditorHistory.historyOverlayPush();
    }
}

MapEditor.prototype.shapeSpecsChangeMU = function () {
    if (this.selectedShapes.length > 0) {
        this.mapEditorHistory.presentOverlayPush();
    }
}

MapEditor.prototype.makeColorButton = function (color) {
    var that = this;

    var button = document.createElement('span');
    button.className = 'color-buttons1';
    button.style.backgroundColor = color;
    google.maps.event.addDomListener(button, 'click', function () {
        that.selectColor(color);
        that.setSelectedShapeColor(color);
        that.shapeSpecsChangeMU();
    });
    return button;
}

MapEditor.prototype.buildColorPalette = function () {
    var colorPalette = document.getElementById("color-palette1" + "-" + this.id);
    for (var i = 0; i < this.colors.length; ++i) {
        var currColor = this.colors[i];
        var colorButton = this.makeColorButton(currColor);
        colorPalette.appendChild(colorButton);
        this.colorButtons[currColor] = colorButton;
    }
    this.selectColor(this.colors[0]);
};

MapEditor.prototype.selectColor = function (color) {
    this.selectedColor = color;
    for (var i = 0; i < this.colors.length; ++i) {
        var currColor = this.colors[i];
        this.colorButtons[currColor].style.border = currColor == color ? '2px solid #789' : '2px solid #fff';
    }

    // Retrieves the current options from the drawing manager and replaces the
    // stroke or fill color as appropriate.
    var polylineOptions = this.drawingManager.get('polylineOptions');
    polylineOptions.strokeColor = color;
    this.drawingManager.set('polylineOptions', polylineOptions);

    var rectangleOptions = this.drawingManager.get('rectangleOptions');
    rectangleOptions.fillColor = color;
    this.drawingManager.set('rectangleOptions', rectangleOptions);

    var circleOptions = this.drawingManager.get('circleOptions');
    circleOptions.fillColor = color;
    this.drawingManager.set('circleOptions', circleOptions);

    var polygonOptions = this.drawingManager.get('polygonOptions');
    polygonOptions.fillColor = color;
    this.drawingManager.set('polygonOptions', polygonOptions);
}

MapEditor.prototype.initMapEditor = function () {
    var that = this;

    this.map = new google.maps.Map(document.getElementById("map-" + this.id), {
            center: {
                lat: -37.7891,
                lng: 175.3180
            },
            zoom: 14,
            mapId: this.id,
        });
    this.mapsArray.push(this.map);
    // Add a style-selector control to the map.
    var styleControl = document.getElementById('style-selector-control' + "-" + this.id);
    this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(styleControl);

    // Set the map's style to the initial value of the selector.
    var styleSelector = document.getElementById('style-selector' + "-" + this.id);
    //console.log(styleSelector);
    //map = google.maps.Map(document.getElementById('map' +"-"+ this.id));
    this.map.setOptions({
        styles: styles[styleSelector.value]

    });

    // Apply new JSON when the user selects a different style.
    styleSelector.addEventListener('change', function () {
        that.map.setOptions({
            styles: styles[styleSelector.value]
        });
    });

    this.drawingManager = new google.maps.drawing.DrawingManager({
            drawingMode: google.maps.drawing.OverlayType.RECTANGLE,
            drawingControl: true,
            drawingControlOptions: {
                position: google.maps.ControlPosition.TOP_CENTER,
                drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle']
            },
            markerOptions: {
                draggable: true
            },
            circleOptions: this.polyOptions,
            polylineOptions: this.polyOptions,
            polygonOptions: this.polyOptions,
            rectangleOptions: this.polyOptions,
        });

    this.drawingManager.setMap(this.map);

    google.maps.event.addListener(this.drawingManager, "drawingmode_changed", function () {
        if (that.shiftKeyPressed != true && that.drawingManager.drawingMode !== null) {
            that.deselectAll();
        }
        that.settingThePath();

    })

    // store reference to added overlay
    google.maps.event.addListener(this.drawingManager, 'overlaycomplete', function (e) {
        
        that.allowDeselect = true;
        that.mapEditorHistory.historyOverlayPush();
        that.overlays.push(e.overlay); // store reference to added overlay
        var newShape = e.overlay;
        newShape.type = e.type;
        that.mapEditorHistory.presentOverlayPush();
        
        if (e.type !== google.maps.drawing.OverlayType.MARKER) {
            that.addShapeListeners(newShape, e);
            that.setSelection(newShape, e);
        } else {
            that.addMarkerListeners(newShape, e);
            that.setSelection(newShape, e);
        }
        
    });

    //Clears selection if clicked on the map when shift is not presseed
    google.maps.event.addListener(this.map, 'click', function (e) {
        var c = document.body.childNodes;
        if (e.target && e.target.matches("a.classA")) {
            console.log("Anchor element clicked!");
        }
        if (that.shiftKeyPressed == false) {
            that.clearSelection();
            that.selectedShape = null;
        }
    });

    google.maps.event.addListener(this.map, 'mousedown', function (e) {
        that.dontResize = true;
    });

    google.maps.event.addListener(this.map, 'mouseup', function (e) {
        that.dontResize = false;
    });

    //Keyboard shortcuts            
    var mapAndControls = $("#map-and-controls-" + this.id);
    
    mapAndControls.keypress(function (event) {  //mapAndControls.keydown(function (event) { 
        // https://stackoverflow.com/questions/2220196/how-to-decode-character-pressed-from-jquerys-keydowns-event-handler
        //var keyCode = String.fromCharCode(event.keyCode); // for keyDown
        var keyCode = String.fromCharCode(event.which);
        //alert("Key pressed: " + keyCode);
        
        if (event.keyCode == 'shiftKey') {
            that.shiftKeyPressed = true;
        }
        else if (keyCode == 'y' && (event.ctrlKey || event.metaKey) ||
            (keyCode == 'z' && keyCode == 'shiftKey' && (event.ctrlKey || event.metaKey))) {
            that.mapEditorHistory.redo();
        }
        else if (keyCode == 'z' && (event.ctrlKey || event.metaKey)) {
            if (that.shiftKeyPressed == false) {
                that.mapEditorHistory.undo();
            }
        }
        else if (keyCode == 'a' && (event.ctrlKey || event.metaKey)) {
            event.preventDefault();
            that.drawingManager.setDrawingMode(null);
            that.selectAll();

        }
        else if (keyCode == 'd' && (event.ctrlKey || event.metaKey)) {
            event.preventDefault();
            that.deselectAll();
        }
        else if (keyCode == '0' || keyCode == '`') {

            that.drawingManager.setDrawingMode(null);
        } else if (keyCode == '1') {
            that.drawingManager.setDrawingMode('marker');
        } else if (keyCode == '2') {
            that.drawingManager.setDrawingMode('circle');
        } else if (keyCode == '3') {
            that.drawingManager.setDrawingMode('polygon');
        } else if (keyCode == '4') {
            that.drawingManager.setDrawingMode('polyline');
        } else if (keyCode == '5') {
            that.drawingManager.setDrawingMode('rectangle');
        } else if (keyCode == 's') {
            that.saveToArchives();          
        } else if (keyCode == 'q') {            
            that.printHistory();
        }
        //                          console.log(keyCode);
    });

    /*
    var mapHtml = document.getElementById("map-" + this.id);
    var controlHtml = document.getElementById("ControlPanel-" + this.id);
    controlHtml.addEventListener('click', function () {
        console.log("*** ControlPanel clicked");
        mapHtml.focus() 
    });
    */
    
    //Sets shift as pressed
    mapAndControls.keydown(function (event) {
        if (event.keyCode == 'shiftKey') {
            that.shiftKeyPressed = true;

        }

    });

    //Sets shift as unpressed
    mapAndControls.keyup(function (event) {     
        if (event.keyCode == 'shiftKey') {
            that.shiftKeyPressed = false;
        }

    });

    this.buildColorPalette();
    
    
    
    
    var collection = gs.cgiParams.c;
    var site_name = gs.xsltParams.site_name;
    var nodeID = this.id; // documentID, hopefully contains section ID too
    var metaname = "GPS.mapOverlay";
    
    // collection, site, documentID, metadataName, metadataPosition, responseFunction
    gs.functions.getArchivesMetadata(collection, site_name, nodeID, metaname, 0, function(responseText){
            // responseText is of type GSMetadata
            
            // called when data has been retrieved from archives
            var JSONString = responseText.getValue();           
            that.LOAD(JSONString);
            //var json_overlays = ShapesUtil.overlayToJSON(this.overlays);  
        }
    ); // TODO: responseFunction in setMeta call
    
    
}

//Deletes a vertex if clicked on it
MapEditor.prototype.vertexAndPolyDel = function (e, newShape) {
    var vertex = e.vertex;
    if (e.vertex !== undefined) {
        if (newShape.type === google.maps.drawing.OverlayType.POLYGON) {
            var path = newShape.getPaths().getAt(e.path);
            path.removeAt(e.vertex);
            if (path.length < 3) {
                newShape.setMap(null);
            }
        }
        if (newShape.type === google.maps.drawing.OverlayType.POLYLINE) {
            var path = newShape.getPath();
            path.removeAt(e.vertex);
            if (path.length < 2) {
                newShape.setMap(null);
            }
        }
    }
}

MapEditor.prototype.addMarkerListeners = function (newShape, e) {
    var that = this;
    //cLICK EVENT IF A MARKER IS CREATED
    google.maps.event.addListener(newShape, 'click', function (e) {
        that.setSelection(newShape, e);
    });

    google.maps.event.addListener(newShape, 'dragstart', function (e) {
        that.beingDragged = true;
        that.mapEditorHistory.historyOverlayPush();

    });

    google.maps.event.addListener(newShape, 'dragend', function () {
        that.beingDragged = false;
        that.mapEditorHistory.presentOverlayPush();
        that.allowDeselect = false;
    });
}

MapEditor.prototype.addShapeListeners = function (newShape, e) {
    var that = this;
    // Add an event listener that selects the newly-drawn shape when the user
    // mouses down on it.
    google.maps.event.addListener(newShape, 'click', function (e) {

        that.vertexAndPolyDel(e, newShape);

    });

    google.maps.event.addListener(newShape, 'dragstart', function (e) {
        that.allowDeselect = false;
        that.mapEditorHistory.historyOverlayPush();
    });

    google.maps.event.addListener(newShape, 'dragend', function () {
        that.beingDragged = false;
        that.mapEditorHistory.presentOverlayPush();
        that.settingThePath();

        that.allowDeselect = false;
        that.setSelection(newShape, e);
    });

    //Store information after the event ends
    google.maps.event.addListener(newShape, 'bounds_changed', function (e) {
        if (that.beingDragged == false) {
            that.mapEditorHistory.presentOverlayPush();
        }
    });

    //Add an event listener to select a shape if the mouse hovers over it
    google.maps.event.addListener(newShape, 'mousedown', function (e) {
        if (e.target && e.target.matches("a.classA")) {
            console.log("Anchor element clicked!");
        }
        if (e.vertex !== undefined || e.edge !== undefined) {
            that.mapEditorHistory.historyOverlayPush()
        }
        if (that.drawingManager.drawingMode == null) {
            that.setSelection(newShape, e);
        }
    });

    google.maps.event.addListener(newShape, 'mouseup', function (e) {
        if (e.vertex !== undefined || e.edge !== undefined) {
            that.mapEditorHistory.presentOverlayPush()
        } else {
            //that.setSelection(newShape, e);
        }

    });
}
MapEditor.prototype.clearSelection = function () {
    if (this.selectedShape) {
        if (this.selectedShape.type !== 'marker') {
            this.selectedShape.setEditable(false);
            if (this.shiftKeyPressed == false) {
                for (var i = 0; i < this.selectedShapes.length; i++) {
                    this.selectedShapes[i].setEditable(false);
                }
                this.selectedShapes = [];
            }
        }
        this.selectedShape = null;
    }
}

//Set selection for the selected overlay
MapEditor.prototype.setSelection = function (shape, e) {
    //var that = this;
    if (shape.type !== 'marker') {
        if (this.shiftKeyPressed == false) {
            if (e !== null) {
                if (e.vertex == undefined) {
                    if (e.edge == undefined) {
                        this.clearSelection();
                        shape.setEditable(true);
                    }
                }
            }
        }
        if (this.selectedShapes.includes(shape)) {
            if (e !== null) {
                if (e.vertex == undefined) {
                    if (e.edge == undefined) {
                        this.allowDeselect = true;
                        this.removeFromSelectedShapes(shape);
                    }
                }
            }
        } else {
            this.allowDeselect = false;
            shape.setEditable(true);
            this.selectedShapes.push(shape);
        }

        //Send the values to be updated
        var thi = shape.strokeWeight;
        var opa = shape.fillOpacity;
        var fCol = shape.fillColor;
        var sCol = shape.strokeColor;
        this.updateMenuValues(thi, opa, fCol, sCol);

    } else if (shape.type == 'marker') {
        this.clearSelection();
    }
    this.selectedShape = shape;
    this.settingThePath();
}

MapEditor.prototype.removeFromSelectedShapes = function (shape) {
    if (this.selectedShapes.includes(shape)) {
        if (this.allowDeselect) {
            const index = this.selectedShapes.indexOf(shape);
            this.selectedShapes.splice(index, 1);
            shape.setEditable(false);
        }
        this.allowDeselect = true;
    }
}

//Set selected thickness
MapEditor.prototype.setSelectedThickness = function (sWeight) {
    if (this.selectedShapes.length > 0) {
        for (var i = 0; i < this.selectedShapes.length; i++) {
            this.selectedShapes[i].set('strokeWeight', sWeight);
        }
    }
}

//Set selected opacity
MapEditor.prototype.setSelectedOpacity = function (fOpacity) {

    if (this.selectedShapes.length > 0) {
        for (var i = 0; i < this.selectedShapes.length; i++) {
            this.selectedShapes[i].set('fillOpacity', fOpacity);
        }
    }
}

//set selected fill colour
MapEditor.prototype.setSelectedShapeColor = function (color) {
    if (this.selectedShapes.length > 0) {
        for (var i = 0; i < this.selectedShapes.length; i++) {
            this.selectedShapes[i].set('fillColor', color);
            this.selectedShapes[i].set('strokeColor', color);
        }
    }
}

MapEditor.prototype.getElementByXpath = function (path) {
    return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
}

MapEditor.prototype.updateMenuValues = function (thi, opa, fCol, sCol) {
    //Update thickness slider and value on the settings menu
    var thicknessSliderOutput = document.getElementById("thicknessRangeVal" + "-" + this.id);
    thicknessSliderOutput.innerHTML = thi;
    document.getElementById("thicknessRange" + "-" + this.id).value = Math.round((thi * 20) * 100) / 100;

    //Update the opacity slider and value on the settings menu
    var opacitySliderOutput = document.getElementById("opacityRangeVal" + "-" + this.id);
    opacitySliderOutput.innerHTML = "% " + Math.round(opa * 100) * 100 / 100;
    document.getElementById("colourOpacity" + "-" + this.id).value = (opa * 100) * 100 / 100;

    if (this.drawingManager.drawingMode == null) {
        this.selectColor(fCol);
    }
}
MapEditor.prototype.selectAll = function () {
    this.shiftKeyPressed = true;
    var e = new Object();
    e.vertex = undefined;
    this.selectedShapes = [];
    for (var i = 0; i < this.overlays.length; i++) {
        this.setSelection(this.overlays[i], e);
    }
    this.shiftKeyPressed = false;
}
MapEditor.prototype.deselectAll = function () {
    for (var i = 0; i < this.selectedShapes.length; i++) {
        this.selectedShapes[i].setEditable(false);
    }
    this.selectedShapes = [];
}


MapEditor.prototype.saveToArchives = function () {
    alert("Save pressed");
    
    var json_overlays = ShapesUtil.overlayToJSON(this.overlays);
    var collection = gs.cgiParams.c;
    var site_name = gs.xsltParams.site_name;
    var nodeID = this.id; // documentID, hopefully contains section ID too
    var metaname = "GPS.mapOverlay";
    
    // collection, site, documentID, metadataName, metadataPosition, metadataValue, prevMetadataValue, metamode, responseFunction   
    gs.functions.setArchivesMetadata(collection, site_name, nodeID, metaname, 0, JSON.stringify(json_overlays), null, "override", function(){
            alert("SAVED");
        }
    );
}


MapEditor.prototype.printHistory = function () {
    console.log("prev", this.mapEditorHistory.prevOverlays);
    console.log("present ", this.mapEditorHistory.presentOverlays);
    console.log("undone ", this.mapEditorHistory.undoneOverlays);
    //console.log(this.selectedShapes);
    var collection = gs.cgiParams.c;
    console.log(collection);
    console.log(this.overlays);
    var json_overlays = ShapesUtil.overlayToJSON(this.overlays);
    
    console.log("JSON overlay:\n" + JSON.stringify(json_overlays));
    
    /*
    this.LOAD('[{"strokeColor":"#32CD32","strokeWeight":1,"fillColor":"#32CD32","fillOpacity":0.4,"bounds":{"north":-37.78190971734986,"south":-37.787200748043546,"east":175.33850727431195,"west":175.3324991261186},"type":"rectangle"},{"strokeColor":"#FF8C00","strokeWeight":1,"fillColor":"#FF8C00","fillOpacity":0.4,"bounds":{"north":-37.78550494611987,"south":-37.791270513892385,"east":175.33764896742719,"west":175.3284650837602},"type":"rectangle"},{"strokeColor":"#000000","strokeWeight":1,"fillColor":"#000000","fillOpacity":0.4,"bounds":{"north":-37.793034009483115,"south":-37.79723909833998,"east":175.3225427662553,"west":175.31498966566937},"type":"rectangle"},{"strokeColor":"#4B0082","strokeWeight":5,"fillColor":"#4B0082","fillOpacity":0.62,"bounds":{"north":-37.78991395018121,"south":-37.79737474238258,"east":175.30846653334515,"west":175.2955060993852},"type":"rectangle"},{"strokeColor":"#000000","strokeWeight":1,"fillColor":"#000000","fillOpacity":0.4,"bounds":{"north":-37.79961283312584,"south":-37.80700483276894,"east":175.3281217610063,"west":175.31241474501508},"type":"rectangle"},{"geodesic":false,"strokeColor":"#FF8C00","strokeWeight":1,"path":[{"lat":-37.77824647420985,"lng":175.31842289320844},{"lat":-37.792627052698045,"lng":175.32425938002484},{"lat":-37.79079571942646,"lng":175.31061230055707},{"lat":-37.78597977458094,"lng":175.2910429035844},{"lat":-37.78055298179892,"lng":175.29413280836957},{"lat":-37.77912838266847,"lng":175.3034883534135},{"lat":-37.77668614885508,"lng":175.30537662856},{"lat":-37.78218106147165,"lng":175.3079515492143}],"type":"polygon","fillColor":"#FF8C00","fillOpacity":0.4},{"strokeColor":"#FF8C00","strokeWeight":1,"fillColor":"#FF8C00","fillOpacity":0.4,"center":{"lat":-37.7737689305036,"lng":175.33549693998134},"radius":811.9768269278177,"type":"circle"},{"position":{"lat":-37.77431167751719,"lng":175.3143825906161},"type":"marker"},{"position":{"lat":-37.782452404597294,"lng":175.3337803262118},"type":"marker"},{"geodesic":false,"strokeColor":"#4B0082","strokeOpacity":1,"strokeWeight":5,"path":[{"lat":-37.759203725669785,"lng":175.33033457820488},{"lat":-37.771688357854,"lng":175.35162058894707},{"lat":-37.79339574144619,"lng":175.3646668535955},{"lat":-37.81536797134891,"lng":175.35436717097832},{"lat":-37.819978597019684,"lng":175.32861796443535},{"lat":-37.81970739171663,"lng":175.2929123980291},{"lat":-37.806688365360884,"lng":175.26235667293145},{"lat":-37.795294834173575,"lng":175.25789347713066},{"lat":-37.78389954558992,"lng":175.2541169268377},{"lat":-37.77033143470697,"lng":175.26132670466973},{"lat":-37.760018005052494,"lng":175.27746287410332},{"lat":-37.75757514001425,"lng":175.31076518123223},{"lat":-37.759203725669785,"lng":175.33033457820488}],"type":"polyline"}]');
    */
     
}

// to be called after reading back in stored JSON from archives meta
MapEditor.prototype.LOAD = function (json_str) {
    this.mapEditorHistory.historyOverlayPush();
    
    var map_editor = Object.values(gsmap_store)[0];
    var new_overlays = ShapesUtil.JSONToOverlays(json_str);
    for (var i=0; i<map_editor.overlays.length; i++) {
        map_editor.overlays[i].setMap(null);
    }
    
    map_editor.overlays = new_overlays;
    
    for (var i=0; i<map_editor.overlays.length; i++) {
        map_editor.overlays[i].setMap(map_editor.map);
    }
    
    this.mapEditorHistory.presentOverlayPush();
    
}

MapEditor.prototype.deleteSelectedShapes = function () {
    //console.log("this fires");
    this.mapEditorHistory.historyOverlayPush();
    for (var i = 0; i < this.selectedShapes.length; i++) {
        this.selectedShapes[i].setMap(null);

        if (this.overlays.includes(this.selectedShapes[i])) {
            const index = this.overlays.indexOf(this.selectedShapes[i]);
            this.overlays.splice(index, 1);
            this.selectedShapes[i].setEditable(false);
        }
    }
    this.selectedShapes = [];
    //console.log("this fires");
    this.mapEditorHistory.presentOverlayPush();
}

MapEditor.prototype.draggableState = function () {
    
    var draggableCB = document.querySelector("input[name=draggableCB]");
    draggableCB.addEventListener('change', function () {
        if (this.checked) {
            this.overlays.draggable = false;
        } else {
            this.overlays.draggable = false;
        }
    });
}

MapEditor.prototype.deleteAllShapes = function () {
    //console.log("deleteAllShape() this.id = " + this.id);
    this.mapEditorHistory.historyOverlayPush();
    for (var i = 0; i < this.overlays.length; i++) {
        this.overlays[i].setMap(null);
    }
    this.overlays = [];
    this.mapEditorHistory.presentOverlayPush();
}