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

Timestamp:

2019-01-11T12:26:07+13:00 (5 years ago)

Author:

ak19

Message:

Complete redo and undo and fixed marker drawing bug

File:

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

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

@@ -1 +1 @@
 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 resizeEntry = false;
-
-var deselectedLog = []
-var selectedShapesLog = [];
-var prevShape = [];
-var nextShape = [];
-var prevLog = [];
-var nextLog = [];
-var dragged = 0;
+var allowDeselect = false;
 var colors = ['#1E90FF', '#FF1493', '#4B0082', '#32CD32', '#FF8C00', '#000000'];
 var selectedColor;
@@ -22 +9 @@
 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;
-
+var faj, fal, maj, mal;
+var polyOptions = {fillColor: '#CA4A2F', strokeWeight: thicknessValue, fillOpacity: opacityValue, editable: true, draggable: true, geodesic: false};
 
 
@@ -71 +49 @@
     document.getElementById("thicknessRange").addEventListener("mouseup", shapeSpecsChangeMU);
     document.getElementById("colourOpacity").addEventListener("mouseup", shapeSpecsChangeMU);
-    //document.getElementById("color-palette1").addEventListener("mouseup", shapeSpecsChangeMU);    
 });
 
@@ -77 +54 @@
     if (selectedShapes.length > 0) {
         historyOverlayPush();
-
     }
 }
@@ -137 +113 @@
 
     map = new google.maps.Map(document.getElementById('map'), {
-            center: {
-                lat: -34.397,
-                lng: 150.644
+            center: {lat: -34.397, lng: 150.644
             },
-            zoom: 2,
-            //mapTypeId: 'map'
-
+            zoom: 8,
         });
 
     drawingManager = new google.maps.drawing.DrawingManager({
-            drawingMode: google.maps.drawing.OverlayType.RECTANGLE,
+            drawingMode: google.maps.drawing.OverlayType.MARKER,
             drawingControl: true,
             drawingControlOptions: {
@@ -172 +144 @@
         var newShape = e.overlay;
         newShape.type = e.type;
-        
+
         presentOverlayPush();
         
@@ -189 +161 @@
         if (shiftKeyPressed == false) {
             clearSelection();
-            if (chosen !== null) {
-                deselectedLog.push("deselected")
-                deselectedLog = [];
-                chosen = null;
-                selectedShape = null;
-
-            }
-        }
-    });
-
-    //Setting drawing tool option
+            selectedShape = null;
+            }
+    }); 
+
+    //Keyboard shortcuts
     document.addEventListener('keydown', function () {
-        //if (event.code == 'KeyX' && (event.ctrlKey || event.metaKey))
+        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(); 
+            selectAll();
+            drawingManager.setDrawingMode(null);
+        }
+        if (event.code == 'KeyD' && (event.ctrlKey || event.metaKey)){
+            event.preventDefault(); 
+            deselectAll();
+        }
         if (event.code == 'Digit0' || event.code == 'Numpad0' || event.code == 'Backquote') {
             //clearSelection();
@@ -218 +201 @@
             printHistory();
         }
-        //                  console.log(event.code);
+//                          console.log(event.code);
     });
 
@@ -261 +244 @@
                 }
             }
+            presentOverlayPush();
         }
     }
@@ -267 +251 @@
 {
     //cLICK EVENT IF A MARKER IS CREATED
-            google.maps.event.addListener(newShape, 'click', function (e) {
-                console.log("lol");
-                setSelection(newShape, e);
-            });
+    google.maps.event.addListener(newShape, 'click', function (e) {
+        setSelection(newShape, e);
+    });
+    
+    google.maps.event.addListener(newShape, 'dragstart', function (e) {
+        
+        beingDragged = true;
+        historyOverlayPush();
+
+    }); 
+
+    google.maps.event.addListener(newShape, 'dragend', function () {
+        beingDragged = false;
+        presentOverlayPush();
+        allowDeselect = false;
+    }); 
 }
 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);
-            });
-
-            google.maps.event.addListener(newShape, 'dragstart', function (e) {
-                beingDragged = true;
-                historyOverlayPush();
-
-            });
+    // 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].set
+        //  } else {
             
-            google.maps.event.addListener(newShape, 'dragend', function () {
-                beingDragged = false;
-                presentOverlayPush();
-            });
-            
-            //Store information after the event ends
-            google.maps.event.addListener(newShape, 'bounds_changed', function (e) {
-                //console.log(e);
-                
-                if (beingDragged == false){
-                    resizeEntry = true;
-                    presentOverlayPush();
-                    resizeEntry = false;
-                }
-            });
-                        
-            google.maps.event.addListener(newShape, 'resize', function () {
-                //historyOverlayPush();
-                    
-            });
-
-            //Add an event listener to select a shape if the mouse hovers over it
-            google.maps.event.addListener(newShape, 'mousedown', function (e) {
-                //  console.log(e);
-                if (drawingManager.drawingMode == null) {
-                    setSelection(newShape, e);
-                }
-            });
+        //  }
+        //  
+        //}
+    
+
+    });
+    
+    
+    google.maps.event.addListener(newShape, 'dragstart', function (e) {
+        
+        beingDragged = true;
+        historyOverlayPush();
+
+    });
+    
+    google.maps.event.addListener(newShape, 'dragend', function () {
+        beingDragged = false;
+        presentOverlayPush();
+        allowDeselect = false;
+    });
+    
+    //Store information after the event ends
+    google.maps.event.addListener(newShape, 'bounds_changed', function (e) {
+        if (beingDragged == false){
+            resizeEntry = true;
+            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) {
+        if (e.vertex !== undefined || e.edge !== undefined) {
+            historyOverlayPush()
+        }   
+        if (drawingManager.drawingMode == null) {
+            setSelection(newShape, e);
+        }
+    });
+
+    google.maps.event.addListener(newShape, 'mouseup', function (e) {
+        if (e.vertex !== undefined || e.edge !== undefined) {
+            presentOverlayPush()
+        } 
+        else{       
+            removeFromSelectedShapes(newShape);     
+        }
+    }); 
 }
 function clearSelection() {
@@ -334 +355 @@
     
 //Set selection for the selected overlay
-    function setSelection(shape, e) {
+    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 (e.vertex == undefined) {
+                    if(e.edge == undefined) {                   
+                        clearSelection();
+                        shape.setEditable(true);
+                    }
                 }
             }
             if (selectedShapes.includes(shape)) {
-
-                //shape.setEditable(false);
-                const index = selectedShapes.indexOf(shape);
-                selectedShapes.splice(index, 1);
+                if(e.vertex == undefined ) {
+                    if(e.edge == undefined) {
+                        //removeFromSelectedShapes(shape);
+                    }
+                }
             } else {
                 shape.setEditable(true);
@@ -354 +376 @@
             }
 
-            if (debug) {
-                console.log(" len = " + selectedShapes.length);
-            }
+
             //Send the values to be updated
             var thi = shape.strokeWeight;
@@ -367 +387 @@
             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 = [];
-    }
-        
+    }
+    
+
+function removeFromSelectedShapes(shape) {
+    if (selectedShapes.includes(shape)) {
+        if(allowDeselect) {
+            const index = selectedShapes.indexOf(shape);
+            selectedShapes.splice(index, 1);
+            shape.setEditable(false);
+        }
+        allowDeselect = false;
+    }
+    
+    
+}
+    
 //Set selected thickness
 function setSelectedThickness(sWeight) {
@@ -423 +436 @@
 
 function updateMenuValues(thi, opa, fCol, sCol) {
-
     //Update thickness slider and value on the settings menu
     var thicknessSliderOutput = document.getElementById("thicknessRangeVal");
@@ -438 +450 @@
     }
 }
-
-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 selectAll(){
+    shiftKeyPressed = true;
+    var e = new Object();
+    e.vertex = undefined;
+    selectedShapes = [];
+    for(var i = 0; i< overlays.length; i++) {
+        setSelection(overlays[i], e);
+    }
+    shiftKeyPressed = false;
+}
+
+function deselectAll(){ 
+    for(var i = 0; i < selectedShapes.length; i++) {
+        selectedShapes[i].setEditable(false);
+    }
+    selectedShapes = [];
 }
 
 function printHistory() {
-    
     console.log("prev", prevOverlays);
     console.log("present ", presentOverlays);
     console.log("undone ", undoneOverlays);
-
-    
-    //for(var i = 0; i< prevOverlays.length; i++) {
-    //  console.log("prev", prevOverlays[prevOverlays.length -1][0].strokeColor);
-    //}
-    //console.log("present ", presentOverlays[0][0].strokeColor);   
 }
 
@@ -487 +478 @@
     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 = [];
@@ -496 +493 @@
     for (var i = 0; i < overlays.length; i++) {
         overlays[i].setMap(null);
-
     }
     overlays = [];