source: gs3-extensions/map-editor/DrawingManager/index.js@ 32721

var debug = false;
var redoPressed = false;
var undoPressed = 0;
var shiftKeyPressed = false;
var dragFired = false;
var selectionPass = true;
var chosen;
var enableSelectionFeature = false;
var beingDragged = false;


var deselectedLog = []
var selectedShapesLog = [];
var prevShape = [];
var nextShape = [];
var prevLog = [];
var nextLog = [];
var dragged = 0;
var colors = ['#1E90FF', '#FF1493', '#4B0082', '#32CD32', '#FF8C00', '#000000'];
var selectedColor;
var colorButtons = {};
var thicknessValue = 1;
var opacityValue = 0.4;
var polyOptions = {
    fillColor: '#CA4A2F',
    strokeWeight: thicknessValue,
    fillOpacity: opacityValue,
    editable: true,
    draggable: true,
    geodesic: false,
};

var overlays = [];
var drawingManager;
var selectedShape;
var selectedShapes = [];

var map = null;



$(document).ready(function() {
    //Update thickness
    var thicknessSlider = document.getElementById("thicknessRange");
    var thicknessSliderOutput = document.getElementById("thicknessRangeVal");
    thicknessSliderOutput.innerHTML = thicknessSlider.value / 20;

    thicknessSlider.oninput = function () {
        thicknessSliderOutput.innerHTML = this.value / 20;
        thicknessValue = this.value / 20;
        polyOptions.strokeWeight = thicknessValue;
        setSelectedThickness(thicknessValue);
    }
    //Update opacity
    var opacitySlider = document.getElementById("colourOpacity");
    var opacitySliderOutput = document.getElementById("opacityRangeVal");
    opacitySliderOutput.innerHTML = "% " + Math.round(opacitySlider.value);

    opacitySlider.oninput = function () {
        opacityValue = this.value / 100;
        polyOptions.fillOpacity = opacityValue;
        opacitySliderOutput = opacityValue;
        opacityRangeVal.innerHTML = "% " + Math.round(opacitySliderOutput * 100);
        setSelectedOpacity(opacityValue);
    }
    
    document.getElementById("thicknessRange").addEventListener("mousedown", shapeSpecsChange);
    document.getElementById("colourOpacity").addEventListener("mousedown", shapeSpecsChange);
    document.getElementById("color-palette1").addEventListener("mousedown", shapeSpecsChange);
});

function shapeSpecsChange() {
    if (selectedShapes.length > 0) {
        historyOverlayPush();

    }
}

function makeColorButton(color) {
    var button = document.createElement('span');
    button.className = 'color-buttons1';
    button.style.backgroundColor = color;
    google.maps.event.addDomListener(button, 'click', function () {
        selectColor(color);
        setSelectedShapeColor(color);
    });
    return button;
}
function buildColorPalette() {
    var colorPalette = document.getElementById('color-palette1');
    for (var i = 0; i < colors.length; ++i) {
        var currColor = colors[i];
        var colorButton = makeColorButton(currColor);
        colorPalette.appendChild(colorButton);
        colorButtons[currColor] = colorButton;
    }
    selectColor(colors[0]);
};
function selectColor(color) {
    selectedColor = color;
    for (var i = 0; i < colors.length; ++i) {
        var currColor = colors[i];
        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 = drawingManager.get('polylineOptions');
    polylineOptions.strokeColor = color;
    drawingManager.set('polylineOptions', polylineOptions);

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

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

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

function initMap() {

    map = new google.maps.Map(document.getElementById('map'), {
            center: {
                lat: -34.397,
                lng: 150.644
            },
            zoom: 2,
            //mapTypeId: 'map'

        });

    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: polyOptions,
            polylineOptions: polyOptions,
            polygonOptions: polyOptions,
            rectangleOptions: polyOptions,
        });

    drawingManager.setMap(map);

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

    //Clears selection if clicked on the map when shift is not presseed
    google.maps.event.addListener(map, 'click', function () {
        if (shiftKeyPressed == false) {
            clearSelection();
            if (chosen !== null) {
                deselectedLog.push("deselected")
                deselectedLog = [];
                chosen = null;
                selectedShape = null;

            }
        }
    });

    //Setting drawing tool option
    document.addEventListener('keydown', function () {
        //if (event.code == 'KeyX' && (event.ctrlKey || event.metaKey))
        if (event.code == 'Digit0' || event.code == 'Numpad0' || event.code == 'Backquote') {
            //clearSelection();
            drawingManager.setDrawingMode(null);
        } else if (event.code == 'Digit1') {
            drawingManager.setDrawingMode('marker');
        } else if (event.code == 'Digit2') {
            drawingManager.setDrawingMode('circle');
        } else if (event.code == 'Digit3') {
            drawingManager.setDrawingMode('polygon');
        } else if (event.code == 'Digit4') {
            drawingManager.setDrawingMode('polyline');
        } else if (event.code == 'Digit5') {
            drawingManager.setDrawingMode('rectangle');
        } else if (event.code == 'KeyQ') {
            printHistory();
        }
        //                  console.log(event.code);
    });

    //Sets shift as pressed
    document.addEventListener('keydown', function () {
        if (event.code == 'ShiftLeft' || event.code == 'ShiftRight') {
            shiftKeyPressed = true;

        }

    });

    //Sets shift as unpressed
    document.addEventListener('keyup', function () {
        if (event.code == 'ShiftLeft' || event.code == 'ShiftRight') {
            shiftKeyPressed = false;
        }

    });

    buildColorPalette();
}

    //Deletes a vertex if clicked on it
    function vertexAndPolyDel(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);
                }
            }
        }
    }
    
function addMarkerListeners(newShape,e)
{
    //cLICK EVENT IF A MARKER IS CREATED
            google.maps.event.addListener(newShape, 'click', function (e) {
                setSelection(newShape, e);
            });
}
function addShapeListeners(newShape,e)
{
        // Switch back to non-drawing mode after drawing a shape.
            //drawingManager.setDrawingMode(null);

            // 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) {
                vertexAndPolyDel(e, newShape);
                console.log(e.edge);
            });

            google.maps.event.addListener(newShape, 'dragstart', function () {
                beingDragged = true;
                historyOverlayPush();
            });
            
            google.maps.event.addListener(newShape, 'dragend', function () {
                beingDragged = false;
            });
            
            //Store information after the event ends
            google.maps.event.addListener(newShape, 'bounds_changed', function () {
                console.log("bounds_changed");
                if (beingDragged == false){
                    historyOverlayPush();
                }
            });
                        
            google.maps.event.addListener(newShape, 'resize', function () {
                console.log("lmao");
                //historyOverlayPush();
                    
            });

            //Add an event listener to select a shape if the mouse hovers over it
            google.maps.event.addListener(newShape, 'mousedown', function (e) {
                if (drawingManager.drawingMode == null) {
                    setSelection(newShape, e);
                }
            });
}
function clearSelection() {
        if (selectedShape) {
            if (selectedShape.type !== 'marker') {
                selectedShape.setEditable(false);
                if (shiftKeyPressed == false) {
                    for (var i = 0; i < selectedShapes.length; i++) {
                        selectedShapes[i].setEditable(false);
                    }
                    selectedShapes = [];
                }
            }
            selectedShape = null;
        }
    }
    
//Set selection for the selected overlay
    function setSelection(shape, e) {
        if (shape.type !== 'marker') {
            if (shiftKeyPressed == false) {
                if (e.vertex == undefined) {    
                //if ((shape.type != google.maps.drawing.OverlayType.POLYLINE) 
                    //&& (shape.type != google.maps.drawing.OverlayType.POLYGON)) {
                    clearSelection();
                    shape.setEditable(true);
                }
            }
            if (selectedShapes.includes(shape)) {

                //shape.setEditable(false);
                const index = selectedShapes.indexOf(shape);
                selectedShapes.splice(index, 1);
            } else {
                shape.setEditable(true);
                selectedShapes.push(shape);
            }

            if (debug) {
                console.log(" len = " + selectedShapes.length);
            }
            //Send the values to be updated
            var thi = shape.strokeWeight;
            var opa = shape.fillOpacity;
            var fCol = shape.fillColor;
            var sCol = shape.strokeColor;
            updateMenuValues(thi, opa, fCol, sCol);

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

        selectedShape = shape;

        if (selectionPass == true) {

            selectedShapesLog.push("selected", shiftKeyPressed, selectedShape);
            nextLog.push(selectedShapesLog);
            chosen = selectedShape;
            selectionPass = false
        }

        var lastItem = nextLog[nextLog.length - 1];

        if (chosen !== selectedShape) {
            if (dragFired == false) {
                selectedShapesLog.push("selected", shiftKeyPressed, selectedShape)
                chosen = selectedShape;
            }
        }

        //console.log(prevLog);
        selectedShapesLog = [];
    }
        
//Set selected thickness
function setSelectedThickness(sWeight) {
    if (selectedShapes.length > 0) {
        //historyOverlayPush();
        for (var i = 0; i < selectedShapes.length; i++) {
            selectedShapes[i].set('strokeWeight', sWeight);
            //console.log(selectedShapes.length);
        }
    }
}

//Set selected opacity
function setSelectedOpacity(fOpacity) {

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

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

function updateMenuValues(thi, opa, fCol, sCol) {

    //Update thickness slider and value on the settings menu
    var thicknessSliderOutput = document.getElementById("thicknessRangeVal");
    thicknessSliderOutput.innerHTML = thi;
    document.getElementById("thicknessRange").value = thi * 20;

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

    if (drawingManager.drawingMode == null) {
        selectColor(fCol);
    }
}

function redoMovement() {

    var lastItem = nextLog[nextLog.length - 1];
    var secondToLastItem = nextLog[nextLog.length - 2];
    var correctIndex;

    if (undoPressed >= 1) {
        correctIndex = lastItem;
    } else {
        correctIndex = secondToLastItem;
        undoPressed++;
    }

    //If the history log is not empty
    if (nextLog.length > 1) {
        prevLog.push(lastItem);

        //If undo has been pressed

        if (lastItem[1] == ("polygon") || lastItem[1] == ("polyline")) {
            selectedShape.setPath(correctIndex[2]);
        } else {
            selectedShape.setBounds(correctIndex[2]);
        }

        undoPressed = false;
        redoPressed = true;
        nextLog.pop();
    }
}

function printHistory() {
    
    console.log(prevOverlays);
    console.log(selectedShapes);
}

function deleteSelectedShape() {
    for (var i = 0; i < selectedShapes.length; i++) {
        selectedShapes[i].setMap(null);
    }
    selectedShapes = [];
}

function deleteAllShape() {
    for (var i = 0; i < overlays.length; i++) {
        overlays[i].setMap(null);

    }
    overlays = [];
}