Changeset 32721 for gs3-extensions/map-editor

Timestamp:

2019-01-07T15:12:19+13:00 (5 years ago)

Author:

ak19

Message:

Fixed selection bug and added colour, thickness and opacity change to history.

Location:

gs3-extensions/map-editor/DrawingManager

Files:

• checkpt23 (added)
• checkpt23/index.css (added)
• checkpt23/index.html (added)
• checkpt23/index.js (added)
• checkpt23/shortcuts.js (added)
• historyManager.js (modified) (10 diffs)
• index.html (modified) (1 diff)
• index.js (modified) (16 diffs)

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

@@ -1 +1 @@
 var prevOverlays = [];
 
-function undoMovement() {
-    console.log("*** undoMovement called");
+function undo() {
+
     for (var i = 0; i < overlays.length; i++) {
         overlays[i].setMap(null);
 
     }
-    
-    overlays = [];
-    
-    var prev_overlay = prevOverlays.pop();
-    
-    for (var i = 0; i < prev_overlay.length; i++) {
-        overlays[i] = prev_overlay[i];
-        overlays[i].setMap(map);
-    }
+    if (prevOverlays.length != 0){
+        overlays = [];
+        console.log(prevOverlays);
+        var prev_overlay = prevOverlays.pop();
+        
+        for (var i = 0; i < prev_overlay.length; i++) {
+            overlays[i] = prev_overlay[i];
+            overlays[i].setMap(map);
+        }
+        
+    }
+    
+    //Deactivated at the moment
+    if(enableSelectionFeature){
+        selectedShapes = [];
+        var i = 0;
+        var lastEntry = prevOverlays[prevOverlays.length-1][i];
+        console.log(prevOverlays[prevOverlays.length-1].length);
+        
+        for(var i = 0; i < lastEntry.length; i++){
+            selectedShapes.push(prevOverlays)
+            console.log("comes here");
+        }
+        
+    }
+    
     
 }
@@ -43 +60 @@
     var strokeOpacity = polyline.strokeOpacity;
     var strokeWeight  = polyline.strokeWeight;
-    
     var clone_path    = clonePath(path);
+    //var editable      = rect.editable;
     
     var clone_polyline = new google.maps.Polyline({
@@ -51 +68 @@
         strokeOpacity: strokeOpacity,
         strokeWeight: strokeWeight,
-        path: clone_path
+        path: clone_path,
+        draggable: true,
+        editable: false
     });
     
@@ -68 +87 @@
     var fillColor     = polygon.fillColor;
     var fillOpacity   = polygon.fillOpacity;
-    
     var clone_path    = clonePath(path);
+    //var editable      = rect.editable;
     
     var clone_polygon = new google.maps.Polygon({
@@ -78 +97 @@
         fillColor: fillColor,
         fillOpacity: fillOpacity,
-        path: clone_path
+        path: clone_path,
+        draggable: true,
+        editable: false
     });
     
@@ -94 +115 @@
     var fillOpacity   = rect.fillOpacity;
     var bounds        = rect.getBounds();
+    //var editable      = rect.editable;
     
     var clone_rect = new google.maps.Rectangle({
@@ -101 +123 @@
         fillColor: fillColor,
         fillOpacity: fillOpacity,
-        bounds: bounds
+        bounds: bounds,
+        draggable: true,
+        editable: false
     });
     
@@ -118 +142 @@
     var center        = circ.center;
     var radius        = circ.radius;
+    //var editable      = rect.editable;
     
     var clone_circ = new google.maps.Circle({
@@ -126 +151 @@
         fillOpacity: fillOpacity,
         center: center,
-        radius: radius
+        radius: radius,
+        draggable: true,
+        editable: false
     });
     
@@ -161 +188 @@
 }
 
+function overlayItemIsShape(overlay_item)
+{
+    var type = overlay_item.type;
+    
+    is_shape = (type === google.maps.drawing.OverlayType.POLYLINE)
+     || (type === google.maps.drawing.OverlayType.POLYGON)
+     || (type === google.maps.drawing.OverlayType.RECTANGLE)
+     || (type === google.maps.drawing.OverlayType.CIRCLE);
+     
+     return is_shape;
+}
+
 function historyOverlayPush()
 {
-    console.log("historyOverlayPush()");
+    console.log("comes here");
     var overlays_copy = [];
     for (var i = 0; i<overlays.length; i++) {
         var clone_shape = cloneShape(overlays[i]);
-        
-        google.maps.event.addListener(clone_shape, 'click', function () {
-            setSelection(clone_shape);
-        });
-            
+        if (overlayItemIsShape(clone_shape)) {
+            addShapeListeners(clone_shape,null); // don't have an overlay event!
+        }
+        else {
+            addMarkerListeners(clone_shape,null); // don't have an overlay event!
+        }
         overlays_copy[i] = clone_shape;
-        
     }
     

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

@@ -18 +18 @@
     <button onclick="deleteAllShape()" accesskey="c">Clear All</button>
     <button onclick="deleteSelectedShape()" accesskey="b">Delete Selected</button>
-    <button onclick="polygonGetPath()" accesskey="q">Get Path</button>
-    <button onclick="undoMovement()" accesskey="n">Undo</button>
+    <button onclick="printHistory()" accesskey="q">Print History</button>
+    <button onclick="undo()" accesskey="n">Undo</button>
     <button onclick="redoMovement()" accesskey="n">Redo</button>
     

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

@@ -6 +6 @@
 var selectionPass = true;
 var chosen;
-
-var overlays_copy_obj = {};
-
-var prevEdge = {
-    east: "",
-    north: "",
-    south: "",
-    west: ""
-}
-var nextEdge = {
-    east: "",
-    north: "",
-    south: "",
-    west: ""
-}
-var prevVertex = {
-    lat: "",
-    lng: ""
-};
-var nextVertex = {
-    lat: "",
-    lng: ""
-};
+var enableSelectionFeature = false;
+var beingDragged = false;
+
+
 var deselectedLog = []
 var selectedShapesLog = [];
@@ -35 +16 @@
 var prevLog = [];
 var nextLog = [];
-
-
-
-
 var dragged = 0;
 var colors = ['#1E90FF', '#FF1493', '#4B0082', '#32CD32', '#FF8C00', '#000000'];
@@ -62 +39 @@
 
 
+
 $(document).ready(function() {
     //Update thickness
@@ -86 +64 @@
         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');
@@ -170 +156 @@
     google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) {
         
-        
+        console.log(e)
         
         historyOverlayPush();
@@ -177 +163 @@
         var newShape = e.overlay;
         newShape.type = e.type;
-
-    
+        
+        //historyOverlayPush();
         
         if (e.type !== google.maps.drawing.OverlayType.MARKER) {
-
-            // 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);
-                dragFired = false;
-                return;
-
-            });
-
-            //Stores past event information
-            google.maps.event.addListener(newShape, 'dragstart', function () {
-                dragStartFunction(e, newShape);
-            });
-
-            //Store information after the event ends
-            google.maps.event.addListener(newShape, 'dragend', function () {
-                historyOverlayPush();
-                dragEndFunction(e, newShape);
-            });
-
-            //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);
-                    dragFired = false;
-                }
-            });
+            addShapeListeners(newShape,e);
             setSelection(newShape, e);
         } else {
-            //cLICK EVENT IF A MARKER IS CREATED
-            google.maps.event.addListener(newShape, 'click', function (e) {
-                setSelection(newShape, e);
-            });
+            
+            addMarkerListeners(newShape,e);
             setSelection(newShape, e);
         }
     });
-
-    //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);
-                }
-            }
-        }
-    }
-
-    
-    var i = 0;
-
-    
 
     //Clears selection if clicked on the map when shift is not presseed
@@ -256 +182 @@
             if (chosen !== null) {
                 deselectedLog.push("deselected")
-                updateHistory(deselectedLog);
                 deselectedLog = [];
                 chosen = null;
+                selectedShape = null;
 
             }
@@ -281 +207 @@
             drawingManager.setDrawingMode('rectangle');
         } else if (event.code == 'KeyQ') {
-            polygonGetPath();
+            printHistory();
         }
         //                  console.log(event.code);
@@ -306 +232 @@
 }
 
-
+    //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) {
@@ -326 +322 @@
         if (shape.type !== 'marker') {
             if (shiftKeyPressed == false) {
-                //if (e.vertex == undefined) {
-                    console.log("**** e.vertex = " + e.vertex);
-                    
-                if ((shape.type != google.maps.drawing.OverlayType.POLYLINE) 
-                    && (shape.type != google.maps.drawing.OverlayType.POLYGON)) {
+                if (e.vertex == undefined) {    
+                //if ((shape.type != google.maps.drawing.OverlayType.POLYLINE) 
+                    //&& (shape.type != google.maps.drawing.OverlayType.POLYGON)) {
                     clearSelection();
                     shape.setEditable(true);
@@ -374 +368 @@
             if (dragFired == false) {
                 selectedShapesLog.push("selected", shiftKeyPressed, selectedShape)
-                updateHistory(selectedShapesLog);
                 chosen = selectedShape;
             }
@@ -382 +375 @@
         selectedShapesLog = [];
     }
-    
-    
+        
 //Set selected thickness
 function setSelectedThickness(sWeight) {
@@ -399 +391 @@
 
     if (selectedShapes.length > 0) {
-        //historyOverlayPush();
         for (var i = 0; i < selectedShapes.length; i++) {
             selectedShapes[i].set('fillOpacity', fOpacity);
@@ -409 +400 @@
 function setSelectedShapeColor(color) {
     if (selectedShapes.length > 0) {
-        historyOverlayPush();
         for (var i = 0; i < selectedShapes.length; i++) {
             selectedShapes[i].set('fillColor', color);
@@ -432 +422 @@
         selectColor(fCol);
     }
-}
-
-
-
-function undoMovementDragSelection() {
-    var lastItem = prevLog[prevLog.length - 1];
-
-    //If history array is not empty
-    if (prevLog.length !== 0) {
-        if (lastItem[0] = "dragStart") {
-            //If the array has more than one index (polygons and polylines)
-            if (lastItem[1] == ("polygon") || lastItem[1] == ("polyline")) {
-                nextLog.push(lastItem);
-                selectedShape.setPath(lastItem[2]);
-
-                //If the array has only one index(rectangles and circles)
-            } else {
-                nextLog.push(lastItem);
-                selectedShape.setBounds(lastItem[2]);
-            }
-        } else if (lastItem[0] = "selected") {}
-        else if (lastItem[0] = "deselected") {}
-        undoPressed = false;
-        undoPressed = 0;
-        prevLog.pop();
-    }
-
 }
 
@@ -492 +455 @@
 }
 
-function dragStartFunction(e, selectedShape) {
-    var newShape = e.overlay;
-    newShape.type = e.type;
-    if (selectedShape) {
-        var polyG = newShape.type === google.maps.drawing.OverlayType.POLYLINE;
-        var polyL = newShape.type === google.maps.drawing.OverlayType.POLYGON;
-
-        if (polyL || polyG) {
-            var latLngi = []
-            var lati,
-            lngi;
-            for (var i = 0; i < selectedShape.getPath().length; i++) {
-                lati = selectedShape.getPath().getAt(i).lat();
-                lngi = selectedShape.getPath().getAt(i).lng();
-                //console.log("Vertex number",i, "'s latitude is", lati, "and longitude is", lngi);
-                prevVertex = {
-                    lat: lati,
-                    lng: lngi
-                };
-                latLngi.push(prevVertex);
-            }
-            prevShape.push("dragStart", selectedShape.type, latLngi);
-        } else {
-            prevEdge = {
-                east: selectedShape.getBounds().ea.l,
-                north: selectedShape.getBounds().la.l,
-                south: selectedShape.getBounds().la.j,
-                west: selectedShape.getBounds().ea.j
-            }
-            prevShape.push("dragStart", selectedShape.type, prevEdge);
-        }
-
-        var lastItem = nextLog[nextLog.length - 1];
-        if (lastItem[0] !== "dragEnd") {
-            prevLog.push(nextLog[nextLog.length - 1]);
-        }
-
-        prevLog.push(prevShape);
-        prevShape = [];
-        nextLog = [];
-        chosen = selectedShape;
-        dragFired = true;
-    }
-}
-
-function dragEndFunction(e, newShape) {
-
-    var newShape = e.overlay;
-    newShape.type = e.type;
-    if (selectedShape) {
-        var polyG = newShape.type === google.maps.drawing.OverlayType.POLYLINE;
-        var polyL = newShape.type === google.maps.drawing.OverlayType.POLYGON;
-
-        if (polyL || polyG) {
-
-            var latLngi = []
-            var lati,
-            lngi;
-
-            for (var i = 0; i < selectedShape.getPath().length; i++) {
-                lati = selectedShape.getPath().getAt(i).lat();
-                lngi = selectedShape.getPath().getAt(i).lng();
-                nextVertex = {
-                    lat: lati,
-                    lng: lngi
-                };
-                latLngi.push(nextVertex);
-            }
-            nextShape.push("dragEnd", selectedShape.type, latLngi);
-        } else {
-
-            nextEdge.east = selectedShape.getBounds().ea.l;
-            nextEdge.north = selectedShape.getBounds().la.l;
-            nextEdge.south = selectedShape.getBounds().la.j;
-            nextEdge.west = selectedShape.getBounds().ea.j;
-
-            nextShape.push("dragEnd", selectedShape.type, nextEdge);
-        }
-    }
-    for (var i = 0; i < prevLog.length; i++) {
-        if (prevLog[i][0] == "dragEnd") {
-            const index = i;
-            prevLog.splice(index, 1);
-        }
-    }
-    nextLog.push(nextShape);
-    nextShape = [];
-    chosen = selectedShape;
-}
-
-function updateHistory(eventArray) {
-    var lastItem = nextLog[nextLog.length - 1];
-    if (nextLog.length > 0) {
-        prevLog.push(lastItem);
-    }
-    nextLog = [];
-    nextLog.push(eventArray);
-    eventArray = [];
-    dragFired = false;
-
-}
-
-function polygonGetPath() {
-    console.log(nextLog);
-    console.log(prevLog);
-
+function printHistory() {
+    
+    console.log(prevOverlays);
+    console.log(selectedShapes);
 }