Changeset 32732 for gs3-extensions/map-editor/DrawingManager/index.js

Timestamp:

2019-01-31T17:03:19+13:00 (5 years ago)

Author:

ak19

Message:

Work to eliminate a undo history bug, and fixed the selection issue.

File:

• gs3-extensions/map-editor/DrawingManager/index.js (modified) (21 diffs)

gs3-extensions/map-editor/DrawingManager/index.js

@@ -3 +3 @@
 var beingDragged = false;
 var resizeEntry = false;
-var allowDeselect = false;
+var allowDeselect = true;
 var colors = ['#1E90FF', '#FF1493', '#4B0082', '#32CD32', '#FF8C00', '#000000'];
 var selectedColor;
@@ -9 +9 @@
 var thicknessValue = 1;
 var opacityValue = 0.4;
+var draggableState = true
 var overlays = [];
 var entryType = [];
@@ -15 +16 @@
 var selectedShapes = [];
 var map = null;
-var faj, fal, maj, mal;
-var polyOptions = {fillColor: '#CA4A2F', strokeWeight: thicknessValue, fillOpacity: opacityValue, editable: true, draggable: true, geodesic: false};
-
-
-$(document).ready(function() {
+var dragS, dragN;
+var dsNorth, dsSouth, dsEast, dsWest;
+var gaj, gal, maj, mal;
+var listenersArray = [];
+var counter = 0;
+var branchNum = 1;
+var mouseState = "up";
+var thicknessRangeListener = thicknessValue;
+var resizable = false;
+var dontResize = false;
+var polyOptions = {
+
+    fillColor: '#CA4A2F',
+    strokeWeight: thicknessValue,
+    fillOpacity: opacityValue,
+    editable: true,
+    draggable: draggableState,
+    geodesic: false
+};
+
+$(function () {
+    //change draggable
+    var draggableCB = document.querySelector("input[name=draggableCB]");
+    draggableCB.addEventListener('change', function () {
+        if (this.checked) {
+            draggableState = false;
+            for (var i = 0; i < overlays.length; i++) {
+                overlays[i].draggable = draggableState;
+                polyOptions.draggable = draggableState;
+                console.log("false");
+            }
+            //console.log(overlays[i].draggable);
+        } else {
+            draggableState = true;
+            for (var i = 0; i < overlays.length; i++) {
+                overlays[i].draggable = draggableState;
+                polyOptions.draggable = draggableState;
+                console.log("true");
+            }
+        }
+    });
+
     //Update thickness
     var thicknessSlider = document.getElementById("thicknessRange");
     var thicknessSliderOutput = document.getElementById("thicknessRangeVal");
     thicknessSliderOutput.innerHTML = thicknessSlider.value / 20;
-
     thicknessSlider.oninput = function () {
+        shapeSpecsChangeMD();
         thicknessSliderOutput.innerHTML = this.value / 20;
         thicknessValue = this.value / 20;
         polyOptions.strokeWeight = thicknessValue;
         setSelectedThickness(thicknessValue);
+
     }
     //Update opacity
@@ -37 +76 @@
 
     opacitySlider.oninput = function () {
+        shapeSpecsChangeMD();
         opacityValue = this.value / 100;
         polyOptions.fillOpacity = opacityValue;
@@ -44 +84 @@
     }
 
-    document.getElementById("thicknessRange").addEventListener("mousedown", shapeSpecsChangeMD);
-    document.getElementById("colourOpacity").addEventListener("mousedown", shapeSpecsChangeMD);
     document.getElementById("color-palette1").addEventListener("mousedown", shapeSpecsChangeMD);
-    
     document.getElementById("thicknessRange").addEventListener("mouseup", shapeSpecsChangeMU);
     document.getElementById("colourOpacity").addEventListener("mouseup", shapeSpecsChangeMU);
+    document.onmousemove = mouseMove;
+    document.onmousedown = mouseDown;
+    document.onmouseup = mouseUp;
+
 });
 
-document.addEventListener("mousedown", function(){
-    
-  //console.log(document.body.style.cursor);
- // console.log(document.getElementById("map").style.cursor);
-});
+
+function settingThePath() {
+    listenersArray = []
+    counter = 0;
+    branchNum = 1;
+
+    for (var i = 0; i < selectedShapes.length * 2; i++) {
+        for (var j = 1; j < 5; j++) {
+            var path = "//*[@id='map']/div/div/div[1]/div[3]/div/div[3]/div[" + branchNum + "]/div[" + j + "]/div";
+            listenersArray[counter] = getElementByXpath(path);
+            if (listenersArray[counter] !== undefined && listenersArray[counter] !== null) {
+                listenersArray[counter].addEventListener("mousemove", function () {
+                    resizable = true;
+                    shapeResize();
+                });
+                listenersArray[counter].addEventListener("mouseout", function () {
+                    if (mouseDown) {
+                        resizable = true;
+                        shapeResize();
+                    }
+                });
+            }
+            counter++;
+        }
+        branchNum++;
+    }
+}
+
+
+
+function shapeResize() {
+    if (mouseState == "down") {
+        if (selectedShapes.length > 0) {
+            if (resizable) {
+                if(dontResize == false){
+                    historyOverlayPush();
+                }
+                
+            }
+        }
+    }
+}
+
 function shapeSpecsChangeMD() {
+
     if (selectedShapes.length > 0) {
         historyOverlayPush();
@@ -65 +145 @@
 function shapeSpecsChangeMU() {
     if (selectedShapes.length > 0) {
+        //console.log("this fires");
         presentOverlayPush();
-    }       
+    }
 }
 
@@ -119 +200 @@
 
     map = new google.maps.Map(document.getElementById('map'), {
-            center: {lat: -34.397, lng: 150.644
+            center: {
+                lat: -37.7891,
+                lng: 175.3180
             },
-            zoom: 2,
+            zoom: 14,
         });
+
+    // Add a style-selector control to the map.
+    var styleControl = document.getElementById('style-selector-control');
+    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');
+    map.setOptions({
+        styles: styles[styleSelector.value]
+    });
+
+    // Apply new JSON when the user selects a different style.
+    styleSelector.addEventListener('change', function () {
+        map.setOptions({
+            styles: styles[styleSelector.value]
+        });
+    });
 
     drawingManager = new google.maps.drawing.DrawingManager({
@@ -132 +232 @@
             },
             markerOptions: {
-                draggable: true
+                draggable: draggableState
             },
             circleOptions: polyOptions,
@@ -142 +242 @@
     drawingManager.setMap(map);
 
-    //overlays.push(event.overlay); // store reference to added overlay
+    google.maps.event.addListener(drawingManager, "drawingmode_changed", function () {
+        settingThePath();
+
+    })
+
+    // store reference to added overlay
     google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) {
-        console.log(e);
+
+        allowDeselect = true;
         
+        //console.log(e);
         historyOverlayPush();
-                
+
         overlays.push(e.overlay); // store reference to added overlay
         var newShape = e.overlay;
         newShape.type = e.type;
-
+        //console.log("this fires");
         presentOverlayPush();
-        
+
         if (e.type !== google.maps.drawing.OverlayType.MARKER) {
-            addShapeListeners(newShape,e);
+            addShapeListeners(newShape, e);
             setSelection(newShape, e);
         } else {
-            
-            addMarkerListeners(newShape,e);
+
+            addMarkerListeners(newShape, e);
             setSelection(newShape, e);
         }
@@ -165 +272 @@
 
     //Clears selection if clicked on the map when shift is not presseed
-    google.maps.event.addListener(map, 'click', function () {
+    google.maps.event.addListener(map, 'click', function (e) {
+        var c = document.body.childNodes;
+        if (e.target && e.target.matches("a.classA")) {
+            console.log("Anchor element clicked!");
+        }
         if (shiftKeyPressed == false) {
             clearSelection();
             selectedShape = null;
-            }
+        }
+    });
+    
+    google.maps.event.addListener(map, 'mousedown', function (e) {
+        dontResize = true;
     }); 
-
+    
+    google.maps.event.addListener(map, 'mouseup', function (e) {
+        dontResize = false;
+    }); 
+    
     //Keyboard shortcuts
     document.addEventListener('keydown', function () {
-        if (event.code == 'KeyY' && (event.ctrlKey || event.metaKey) || (event.code == 'KeyZ' && event.code == 'ShiftLeft'  && (event.ctrlKey || event.metaKey) )){
-                redo();
-
-        }
-        if (event.code == 'KeyZ' && (event.ctrlKey || event.metaKey)){
-            if(shiftKeyPressed == false) {
+        if (event.code == 'KeyY' && (event.ctrlKey || event.metaKey) || (event.code == 'KeyZ' && event.code == 'ShiftLeft' && (event.ctrlKey || event.metaKey))) {
+            redo();
+        }
+        if (event.code == 'KeyZ' && (event.ctrlKey || event.metaKey)) {
+            if (shiftKeyPressed == false) {
                 undo();
             }
         }
-        if (event.code == 'KeyA' && (event.ctrlKey || event.metaKey)){
-            event.preventDefault(); 
+        if (event.code == 'KeyA' && (event.ctrlKey || event.metaKey)) {
+            event.preventDefault();
             selectAll();
             drawingManager.setDrawingMode(null);
         }
-        if (event.code == 'KeyD' && (event.ctrlKey || event.metaKey)){
-            event.preventDefault(); 
+        if (event.code == 'KeyD' && (event.ctrlKey || event.metaKey)) {
+            event.preventDefault();
             deselectAll();
         }
         if (event.code == 'Digit0' || event.code == 'Numpad0' || event.code == 'Backquote') {
-            //clearSelection();
+
             drawingManager.setDrawingMode(null);
         } else if (event.code == 'Digit1') {
@@ -208 +326 @@
             printHistory();
         }
-//                          console.log(event.code);
+        //                          console.log(event.code);
     });
 
@@ -231 +349 @@
 }
 
-    //Deletes a vertex if clicked on it
-    function vertexAndPolyDel(e, newShape) {
-        var vertex = e.vertex;
-        //console.log(e)
-        if (e.vertex !== undefined) {
-            historyOverlayPush();
-            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);
-                }
-            }
-            presentOverlayPush();
-        }
-    }
-    
-function addMarkerListeners(newShape,e)
-{
+//Deletes a vertex if clicked on it
+function vertexAndPolyDel(e, newShape) {
+    var vertex = e.vertex;
+    //console.log(e)
+    if (e.vertex !== undefined) {
+        //console.log("this fires");
+        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);
+            }
+        } //console.log("this fires");
+    }
+}
+
+function addMarkerListeners(newShape, e) {
     //cLICK EVENT IF A MARKER IS CREATED
     google.maps.event.addListener(newShape, 'click', function (e) {
         setSelection(newShape, e);
     });
-    
+
     google.maps.event.addListener(newShape, 'dragstart', function (e) {
-        
-        
-        
         beingDragged = true;
+        //console.log("this fires");
         historyOverlayPush();
 
-    }); 
+    });
+
+    google.maps.event.addListener(newShape, 'dragend', function () {
+        beingDragged = false;
+        //console.log("this fires");
+        presentOverlayPush();
+        allowDeselect = false;
+    });
+}
+
+function applyDrag(newShape) {
+    for (var i = 0; i < selectedShapes.length; i++) {
+        //mal = 0;
+        //maj = 0;
+        //gal = 0;
+        //gaj = 0;
+
+        //mal = selectedShapes[i].bounds.ma.l - newShape.bounds.ma.l;
+        //maj = selectedShapes[i].bounds.ma.j - newShape.bounds.ma.j;
+        //gal = selectedShapes[i].bounds.ga.l - newShape.bounds.ga.l;
+        //gaj = selectedShapes[i].bounds.ga.j - newShape.bounds.ga.j;
+
+        mal = newShape.bounds.ma.l - dsNorth;
+        maj = newShape.bounds.ma.j - dsSouth;
+        gal = newShape.bounds.ga.l - dsEast;
+        gaj = newShape.bounds.ga.j - dsWest;
+
+        var north = selectedShapes[i].bounds.ma.l;
+        var south = selectedShapes[i].bounds.ma.j;
+        var east = selectedShapes[i].bounds.ga.l + gal;
+        var west = selectedShapes[i].bounds.ga.j + gaj;
+        if (!isNaN(north) && !isNaN(south) && !isNaN(west) && !isNaN(east)) {
+            var NE = new google.maps.LatLng(north, east);
+            var SW = new google.maps.LatLng(south, west);
+            var newRect = new google.maps.LatLngBounds(SW, NE);
+            selectedShapes[i].setBounds(newRect);
+        }
+    }
+}
+
+function addShapeListeners(newShape, e) {
+    // 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);
+
+    });
+
+    google.maps.event.addListener(newShape, 'dragstart', function (e) {
+
+
+        allowDeselect = false;
+        console.log("hey");
+        historyOverlayPush();
+    });
+
+
 
     google.maps.event.addListener(newShape, 'dragend', function () {
         beingDragged = false;
         presentOverlayPush();
+        settingThePath();
+        
         allowDeselect = false;
-    }); 
-}
-function addShapeListeners(newShape,e)
-{
-    // 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);
-    });
-
-    
-    google.maps.event.addListener(newShape, 'drag', function (e) {
-        
-        
-
-        //for(var i = 0; i < selectedShapes.length; i++) {
-        //  if(newShape.type = 'rectangle') {
-        //      var newBounds = {
-        //          east: selectedShapes[i].getBounds().ea.l + (selectedShapes[i].getBounds().ea.l - faj),
-        //          north: selectedShapes[i].getBounds().la.l + (selectedShapes[i].getBounds().la.l - fal),
-        //          south: selectedShapes[i].getBounds().la.j + (selectedShapes[i].getBounds().la.j - maj),
-        //          west: selectedShapes[i].getBounds().ea.j + (selectedShapes[i].getBounds().ea.j - mal)
-        //      }
-        //      selectedShapes[i].setBounds
-        //  } else {
-        //
-        //  }
-        //  
-        //}
-    
-
-    });
-    
-    
-    google.maps.event.addListener(newShape, 'dragstart', function (e) {
-        
-        //faj = newShape.bounds.fa.j;
-        //fal = newShape.bounds.fa.l;
-        //maj = newShape.bounds.ma.j;
-        //mal = newShape.bounds.ma.l;
-        
-        //console.log(faj, fal, maj, mal);
-    
-        
-        beingDragged = true;
-        historyOverlayPush();
-
-    });
-    
-    google.maps.event.addListener(newShape, 'dragend', function () {
-        beingDragged = false;
-        presentOverlayPush();
-        allowDeselect = false;
-    });
-    
+        setSelection(newShape, e);
+    });
+
     //Store information after the event ends
     google.maps.event.addListener(newShape, 'bounds_changed', function (e) {
-        if (beingDragged == false){
-            resizeEntry = true;
-            historyOverlayPush();
+        if (beingDragged == false) {
             presentOverlayPush();
-            resizeEntry = false;
-        }
-        
+        }
     });
 
     //Add an event listener to select a shape if the mouse hovers over it
     google.maps.event.addListener(newShape, 'mousedown', function (e) {
+        //console.log("this fires");
+        if (e.target && e.target.matches("a.classA")) {
+            console.log("Anchor element clicked!");
+        }
         //console.log(e);
         if (e.vertex !== undefined || e.edge !== undefined) {
+            //console.log("this fires");
             historyOverlayPush()
-        }   
+        }
         if (drawingManager.drawingMode == null) {
             setSelection(newShape, e);
@@ -353 +475 @@
 
     google.maps.event.addListener(newShape, 'mouseup', function (e) {
+        console.log("mouseup");
         if (e.vertex !== undefined || e.edge !== undefined) {
+            //console.log("this fires");
             presentOverlayPush()
-        } 
-        else{       
-            removeFromSelectedShapes(newShape);     
-        }
-    }); 
+        } else {
+            //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 = [];
+    if (selectedShape) {
+        if (selectedShape.type !== 'marker') {
+            selectedShape.setEditable(false);
+            if (shiftKeyPressed == false) {
+                for (var i = 0; i < selectedShapes.length; i++) {
+                    selectedShapes[i].setEditable(false);
                 }
-            }
-            selectedShape = null;
-        }
-    }
-    
+                selectedShapes = [];
+            }
+        }
+        selectedShape = null;
+    }
+}
+
 //Set selection for the selected overlay
-function setSelection(shape, e) {   
+function setSelection(shape, e) {
+    console.log("this fires");
     if (shape.type !== 'marker') {
         if (shiftKeyPressed == false) {
             if (e.vertex == undefined) {
-                if(e.edge == undefined) {                   
+                if (e.edge == undefined) {
                     clearSelection();
                     shape.setEditable(true);
@@ -388 +513 @@
         }
         if (selectedShapes.includes(shape)) {
-            if(e.vertex == undefined ) {
-                if(e.edge == undefined) {
-                    //removeFromSelectedShapes(shape);
+            if (e.vertex == undefined) {
+                if (e.edge == undefined) {
+                    allowDeselect = true;
+                    removeFromSelectedShapes(shape);
                 }
             }
         } else {
+            allowDeselect = false;
+            console.log("allowDeselect",allowDeselect);
             shape.setEditable(true);
             selectedShapes.push(shape);
         }
-
 
         //Send the values to be updated
@@ -410 +537 @@
     }
     selectedShape = shape;
-}
-
-function boundsExtraction() {
-    
-    
+    settingThePath();
 }
 
 function removeFromSelectedShapes(shape) {
     if (selectedShapes.includes(shape)) {
-        if(allowDeselect) {
+        if (allowDeselect) {
             const index = selectedShapes.indexOf(shape);
+            console.log(index);
             selectedShapes.splice(index, 1);
             shape.setEditable(false);
         }
-        allowDeselect = false;
-    }   
-}
-    
+        console.log("allowDeselect",allowDeselect);
+        allowDeselect = true;
+    } 
+    console.log(selectedShapes.length);
+}
+
 //Set selected thickness
 function setSelectedThickness(sWeight) {
@@ -451 +577 @@
 //set selected fill colour
 function setSelectedShapeColor(color) {
-    if (selectedShapes.length > 0) {
+    if (selectedShapes.length > 0) {
         for (var i = 0; i < selectedShapes.length; i++) {
             selectedShapes[i].set('fillColor', color);
@@ -457 +583 @@
         }
     }
+}
+function getElementByXpath(path) {
+    return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
 }
 
@@ -474 +603 @@
     }
 }
-function selectAll(){
+function selectAll() {
     shiftKeyPressed = true;
     var e = new Object();
     e.vertex = undefined;
     selectedShapes = [];
-    for(var i = 0; i< overlays.length; i++) {
+    for (var i = 0; i < overlays.length; i++) {
         setSelection(overlays[i], e);
     }
@@ -485 +614 @@
 }
 
-function deselectAll(){ 
-    for(var i = 0; i < selectedShapes.length; i++) {
+function deselectAll() {
+    for (var i = 0; i < selectedShapes.length; i++) {
         selectedShapes[i].setEditable(false);
     }
     selectedShapes = [];
 }
-
 
 function printHistory() {
@@ -497 +625 @@
     console.log("present ", presentOverlays);
     console.log("undone ", undoneOverlays);
-    console.log(entryType);
+    console.log(mouseState);
+
+    //console.log(mal);
+    //console.log(maj);
+    //console.log(gal);
+    //console.log(gaj);
+
+
+}
+
+function mouseMove(ev) {
+
+    //How can I know the state of mouse from here
+    if (mouseState == 'down') {
+        //console.log('mouse down state')
+    }
+
+    if (mouseState == 'up') {
+        //console.log('mouse up state')
+    }
+}
+
+function mouseDown(ev) {
+    mouseState = "down";
+    //    console.log('Down State you can now start dragging');
+    //do not write any code here in this function
+}
+
+function mouseUp(ev) {
+    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
 }
 
 function deleteSelectedShape() {
+    //console.log("this fires");
     historyOverlayPush();
     for (var i = 0; i < selectedShapes.length; i++) {
         selectedShapes[i].setMap(null);
-        
+
         if (overlays.includes(selectedShapes[i])) {
             const index = overlays.indexOf(selectedShapes[i]);
             overlays.splice(index, 1);
             selectedShapes[i].setEditable(false);
-        }   
+        }
     }
     selectedShapes = [];
+    //console.log("this fires");
     presentOverlayPush();
 }
 
 function deleteAllShape() {
+    //console.log("this fires");
     historyOverlayPush();
     for (var i = 0; i < overlays.length; i++) {
@@ -521 +683 @@
     }
     overlays = [];
+    //console.log("this fires");
     presentOverlayPush();
 }
-