Changeset 32711

Timestamp:

2018-12-18T16:42:52+13:00 (5 years ago)

Author:

ak19

Message:

Updated version where history "array" can support: new shapes, moving, change of colour.

Location:

gs3-extensions/map-editor/DrawingManager

Files:

• index.html (modified) (1 diff)
• index.js (modified) (9 diffs)

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

@@ -7 +7 @@
 
     <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
+    <script src="historyManager.js"></script>   
     <script src="index.js"></script>    
     <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBzunGwIF2OwsfrOkIC_8bhh0OPGZXo52Y&libraries=drawing&callback=initMap" async defer></script>

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

@@ -36 +36 @@
 var nextLog = [];
 
-var prevOverlays = [];
+
 
 
@@ -171 +171 @@
         
         
+        
+        historyOverlayPush();
+                
         overlays.push(e.overlay); // store reference to added overlay
         var newShape = e.overlay;
         newShape.type = e.type;
 
-        newShapeCreated(e);
-        
-        historyOverlayPush();
+    
         
         if (e.type !== google.maps.drawing.OverlayType.MARKER) {
@@ -244 +245 @@
     }
 
-    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;
-        }
-    }
+    
     var i = 0;
 
-    //Set selection for the selected overlay
-    function setSelection(shape, e) {
-        if (shape.type !== 'marker') {
-            if (shiftKeyPressed == false) {
-                if (e.vertex == undefined) {
-                    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)
-                updateHistory(selectedShapesLog);
-                chosen = selectedShape;
-            }
-        }
-
-        //console.log(prevLog);
-        selectedShapesLog = [];
-    }
+    
 
     //Clears selection if clicked on the map when shift is not presseed
@@ -372 +305 @@
     buildColorPalette();
 }
+
+
+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) {
+                    console.log("**** e.vertex = " + e.vertex);
+                    
+                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)
+                updateHistory(selectedShapesLog);
+                chosen = selectedShape;
+            }
+        }
+
+        //console.log(prevLog);
+        selectedShapesLog = [];
+    }
+    
+    
 //Set selected thickness
 function setSelectedThickness(sWeight) {
-    if (selectedShape) {
-        //selectedShape.set('strokeWeight', sWeight)
-    }
-    if (selectedShapes !== 0) {
+    if (selectedShapes.length > 0) {
+        //historyOverlayPush();
         for (var i = 0; i < selectedShapes.length; i++) {
             selectedShapes[i].set('strokeWeight', sWeight);
@@ -387 +397 @@
 //Set selected opacity
 function setSelectedOpacity(fOpacity) {
-    if (selectedShape) {
-        //selectedShape.set('fillOpacity', fOpacity)
-    }
-    if (selectedShapes !== 0) {
+
+    if (selectedShapes.length > 0) {
+        //historyOverlayPush();
         for (var i = 0; i < selectedShapes.length; i++) {
             selectedShapes[i].set('fillOpacity', fOpacity);
@@ -399 +408 @@
 //set selected fill colour
 function setSelectedShapeColor(color) {
-    if (selectedShapes !== 0) {
+    if (selectedShapes.length > 0) {
+        historyOverlayPush();
         for (var i = 0; i < selectedShapes.length; i++) {
             selectedShapes[i].set('fillColor', color);
@@ -424 +434 @@
 }
 
-function undoMovement() {
-    console.log("*** undoMovement called");
-    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);
-    }
-    
-}
+
 
 function undoMovementDragSelection() {
@@ -600 +594 @@
 }
 
-function newShapeCreated(e) {
-    //nextLog
-}
-
 function polygonGetPath() {
     console.log(nextLog);
@@ -625 +615 @@
 }
 
-function historyOverlayPush()
-{
-    //console.log("historyOverlayPush()");
-    //var overlays_copy = [];
-    //for (var i = 0; i<overlays.length; i++) {
-    //  overlays_copy[i] = new google.maps.Rectangle(overlays[i]);
-    //}
-    //var overlay_copy = JSON.parse(JSON.stringify(overlays));
-    //prevOverlays.push(overlays_copy); 
-    //
-    //prevOverlays.push(overlays.slice()); // shallow copy !!!
-    
-    console.log("historyOverlayPush()");
-    var overlays_copy = [];
-    for (var i = 0; i<overlays.length; i++) {
-        
-        overlays_copy[i] = overlays[i];
-        
-    }
-    overlays_copy_obj = overlays_copy;
-    console.log(overlays_copy_obj);
-    console.log(overlays);
-    console.log(prevOverlays);
-    //console.log(JSON.stringify(overlays_copy_obj));
-    
-    var overlay_copy = overlays;
-    prevOverlays.push(overlays_copy_obj); 
-    
-    //prevOverlays.push(overlays.slice()); // shallow copy !!!
-    
-    
-}