Changeset 32850

Timestamp:

2019-03-04T16:30:56+13:00 (5 years ago)

Author:

ak19

Message:

1. Zeddy introduces suppressUndo and cleaned up lots of CloneShape sectionst that were commented out. 2. Zeddy and Dr Bainbridge solved the issue whereby shapes loaded from archives_metadata were not selectable and needed a deleteAllShapes followed by Undo to make them selectable. These steps are no longer needed now, as it's solved more efficiently.

Location:

main/trunk/greenstone3/web/interfaces/default/js

Files:

• documentedit_scripts.js (modified) (3 diffs)
• documentedit_scripts_util.js (modified) (2 diffs)
• map-scripts-editor-history.js (modified) (3 diffs)
• map-scripts-editor.js (modified) (14 diffs)
• map-scripts-shapes-util.js (modified) (5 diffs)

main/trunk/greenstone3/web/interfaces/default/js/documentedit_scripts.js

@@ -81 +81 @@
         });
     newLink.click(function () {
-        console.log(metaTable.metaNameField);
         if (metaTable.css("display") == "none") {
             linkLabel.html(gs.text.de.hide_metadata);
@@ -137 +136 @@
         if(!oldMapData && newMapData !== "[]" || oldMapData && oldMapData !== newMapData) {
             var nodeID = map_editors_array[i].id;
-            console.log("old vs new mapdata for nodeID " + nodeID);
-            console.log(oldMapData);
-            console.log(newMapData);
+            //console.log("old vs new mapdata for nodeID " + nodeID);
+            //console.log("OLD: " + oldMapData);
+            //console.log("NEW: " + newMapData);
             
             modifiedMaps.push({
@@ -149 +148 @@
             });
             
+            // Save the new overlay values as the old ones for the state after saving and rebuilding is done.
+            // Ideally this should be do after saveAndRebuild has completed successfully, since if saveAndRebuild goes wrong
+            // we'd not have saved newMapData AND because savedOverlays will contain the newMapData, we won't detect these unsaved
+            // values in future attempts to save.
+            // But for now, we're doing this here *because* this is the procedure with regular metadata (works out changes,
+            // then saves those changes as initStates BEFORE saveAndRebuild is called)          
             map_editor.savedOverlays = newMapData;
         }

main/trunk/greenstone3/web/interfaces/default/js/documentedit_scripts_util.js

@@ -34 +34 @@
     // else the following pop up always ends up appearing when attempting
     // to leave a doc view page in Doc Editing Mode (when not yet actually Doc Editing)
+    
+    
     var changes = changesToUpdate();
+    
+    //console.log("#### CHANGES before page reload: ", changes);
     
     if(changes.length > 0) {
@@ -548 +552 @@
                 // collection, site, documentID, metadataName, metadataPosition, metadataValue, prevMetadataValue, metamode, responseFunction               
                 //console.log("@@@ metapos! change: ", change);
-                gs.functions.setArchivesMetadata(change.collection, gs.xsltParams.site_name, change.docID, change.name, change.metapos, change.value /*TODO: encodeDelimiters(change.value)*/, null, "override", function(){callbackFunction();});
+                gs.functions.setArchivesMetadata(change.collection, gs.xsltParams.site_name, change.docID, change.name, change.metapos, encodeDelimiters(change.value), null, "override", function(){callbackFunction();});
             }
           else if(change.orig)

main/trunk/greenstone3/web/interfaces/default/js/map-scripts-editor-history.js

@@ -20 +20 @@
         this.undoneOverlaysPush();
         var prev_overlay = this.prevOverlays.pop();
-        var draggableCB = document.querySelector("input[name=draggableCB]").checked = false;
-        
-        
+        var draggableCB = document.getElementById("draggableCB" + "-" + this.mapEditor.id).checked = false;
+
         if (prev_overlay.length > 0) {
             for (var i = 0; i < prev_overlay.length; i++) {
@@ -37 +36 @@
     if (this.undoneOverlays.length != 0) {
         if (this.undoneOverlays[this.undoneOverlays.length -1].length != 0) {
-            var draggableCB = document.querySelector("input[name=draggableCB]").checked = false;
             this.mapEditor.selectedShapes = [];
+            var draggableCB = document.getElementById("draggableCB" + "-" + this.mapEditor.id).checked = false;
+            
             for (var i = 0; i < this.mapEditor.overlays.length; i++) {
                 this.mapEditor.overlays[i].setMap(null);
@@ -75 +75 @@
     }
 }
-
-/*
-MapEditorHistory.prototype.clonePath = function (path) {
-    var clone_path = [];
-
-    for (var i = 0; i < path.length; i++) {
-        var lati = path.getAt(i).lat();
-        var lngi = path.getAt(i).lng();
-        clone_lat_lng = {
-            lat: lati,
-            lng: lngi
-        };
-        clone_path.push(clone_lat_lng);
-    }
-
-    return clone_path;
-}
-
-MapEditorHistory.prototype.clonePolyline = function (polyline) {
-    var geodesic = polyline.geodesic;
-    var strokeColor = polyline.strokeColor;
-    var strokeOpacity = polyline.strokeOpacity;
-    var strokeWeight = polyline.strokeWeight;
-    //var clone_path = clonePath(path);
-    
-    var clone_path = null;
-    
-    var JSONSave = typeof polyline.getPath !== "function";
-    //console.log(JSONSave)
-    if(JSONSave){
-        var path = polyline.latLngs.j[0].j;
-        clone_path = path;
-        
-    } else{
-        var path = polyline.getPath();
-        clone_path = this.clonePath(path);  
-    }
-    var clone_polyline = new google.maps.Polyline({
-            geodesic: geodesic,
-            strokeColor: strokeColor,
-            strokeOpacity: strokeOpacity,
-            strokeWeight: strokeWeight,
-            path: clone_path,
-            draggable: true,
-            editable: false
-        });
-
-    clone_polyline.type = google.maps.drawing.OverlayType.POLYLINE;
-
-    return clone_polyline;
-}
-
-MapEditorHistory.prototype.clonePolygon = function (polygon) {
-    var geodesic = polygon.geodesic;
-    var strokeColor = polygon.strokeColor;
-    var strokeOpacity = polygon.strokeOpacity;
-    var strokeWeight = polygon.strokeWeight;
-    var fillColor = polygon.fillColor;
-    var fillOpacity = polygon.fillOpacity;
-
-    var clone_path = null;
-    var JSONSave = typeof polygon.getPath !== "function";
-    //console.log(JSONSave)
-    if(JSONSave){
-        var path = polygon.latLngs.j[0].j;
-        clone_path = path;
-        
-    } else{
-        var path = polygon.getPath();
-        clone_path = this.clonePath(path);
-        console.log(path);  
-    }   
-    var clone_polygon = new google.maps.Polygon({
-            geodesic: geodesic,
-            strokeColor: strokeColor,
-            strokeOpacity: strokeOpacity,
-            strokeWeight: strokeWeight,
-            fillColor: fillColor,
-            fillOpacity: fillOpacity,
-            path: clone_path,
-            draggable: true,
-            editable: false
-        });
-    clone_polygon.type = google.maps.drawing.OverlayType.POLYGON;
-    return clone_polygon;
-}
-
-MapEditorHistory.prototype.cloneRectangle = function (rect) {
-    var strokeColor = rect.strokeColor;
-    var strokeOpacity = rect.strokeOpacity;
-    var strokeWeight = rect.strokeWeight;
-    var fillColor = rect.fillColor;
-    var fillOpacity = rect.fillOpacity;
-    //var bounds = rect.getBounds();
-    var type = rect.type;
-    
-    var bounds = null;
-    
-    var JSONSave = typeof rect.getBounds !== "function";
-    
-    if(JSONSave){
-        var north = rect.bounds.north;
-        var south = rect.bounds.south;
-        var east = rect.bounds.east;
-        var west = rect.bounds.west;
-        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);
-            bounds = new google.maps.LatLngBounds(SW, NE);
-        }       
-    } else {
-        bounds = rect.getBounds();
-    }
-    var clone_rect = new google.maps.Rectangle({
-            strokeColor: strokeColor,
-            strokeOpacity: strokeOpacity,
-            strokeWeight: strokeWeight,
-            fillColor: fillColor,
-            fillOpacity: fillOpacity,
-            bounds: bounds,
-            draggable: true,
-            editable: false,
-            type: type
-        });
-
-    clone_rect.type = google.maps.drawing.OverlayType.RECTANGLE;
-    return clone_rect;
-}
-
-MapEditorHistory.prototype.cloneCircle = function (circ) {
-    var strokeColor = circ.strokeColor;
-    var strokeOpacity = circ.strokeOpacity;
-    var strokeWeight = circ.strokeWeight;
-    var fillColor = circ.fillColor;
-    var fillOpacity = circ.fillOpacity;
-    var center = circ.center;
-    var radius = circ.radius;
-    
-    var clone_circ = new google.maps.Circle({
-            strokeColor: strokeColor,
-            strokeOpacity: strokeOpacity,
-            strokeWeight: strokeWeight,
-            fillColor: fillColor,
-            fillOpacity: fillOpacity,
-            center: center,
-            radius: radius,
-            draggable: true,
-            editable: false
-        });
-
-    clone_circ.type = google.maps.drawing.OverlayType.CIRCLE;
-
-    return clone_circ;
-}
-
-MapEditorHistory.prototype.cloneMarker = function (marker) {
-    var anchorPoint = marker.anchorPoint;
-    var JSONSave = typeof marker.getPosition !== "function";
-    if(JSONSave){
-        var position = marker.position;
-    } else{
-        var position = marker.getPosition();
-    }
-    var clone_marker = new google.maps.Marker({
-            anchorPoint: anchorPoint,
-            position: position,
-            clickable: true,
-            draggable: true,
-            editable: false
-        })
-        clone_marker.type = google.maps.drawing.OverlayType.MARKER;
-
-    return clone_marker;
-}
-
-MapEditorHistory.prototype.cloneShape = function (shape) {
-    if (shape.type === google.maps.drawing.OverlayType.POLYLINE) {
-        var clone_polyline = this.clonePolyline(shape);
-        return clone_polyline;
-    } else if (shape.type === google.maps.drawing.OverlayType.POLYGON) {
-        var clone_polygon = this.clonePolygon(shape);
-        return clone_polygon;
-    } else if (shape.type === google.maps.drawing.OverlayType.RECTANGLE) {
-        var clone_rect = this.cloneRectangle(shape);
-        return clone_rect;
-
-    } else if (shape.type === google.maps.drawing.OverlayType.CIRCLE) {
-        var clone_circ = this.cloneCircle(shape);
-        return clone_circ;
-
-    } else {
-        var clone_marker = this.cloneMarker(shape);
-        return clone_marker;
-    }
-}
-
-MapEditorHistory.prototype.overlayItemIsShape = function (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;
-}
-
-*/
 
 MapEditorHistory.prototype.historyOverlayPush = function () {

main/trunk/greenstone3/web/interfaces/default/js/map-scripts-editor.js

@@ -25 +25 @@
     this.resizable = false;
     this.dontResize = false;
-    this.polyOptions = {
+    this.shapeOptions = {
+        suppressUndo: true,
         fillColor: '#CA4A2F',
         strokeWeight: this.thicknessValue,
@@ -36 +37 @@
 }
 
+//draggable checkbox control
 MapEditor.prototype.initMapEditorControls = function () {
     var that = this;
 
-
-    var draggableCB = document.querySelector("input[name=draggableCB]");
+    var draggableCB = document.getElementById("draggableCB-"+ this.id);
     draggableCB.addEventListener('change', function () {
         if (this.checked) {
             for (var i = 0; i < that.overlays.length; i++) {
-                console.log("checked");
                 that.overlays[i].draggable = false;
-                that.polyOptions.draggable = false;
+                that.shapeOptions.draggable = false;
             }
         } else {
             for (var i = 0; i < that.overlays.length; i++) {
-                console.log("not checked");
                 that.overlays[i].draggable = true;
-                that.polyOptions.draggable = true;
+                that.shapeOptions.draggable = true;
             }
         }
@@ -67 +66 @@
         thicknessSliderOutput.innerHTML = ((this.value / 20) * 100) / 100;
         that.thicknessValue = this.value / 20;
-        that.polyOptions.strokeWeight = that.thicknessValue;
+        that.shapeOptions.strokeWeight = that.thicknessValue;
         that.setSelectedThickness(that.thicknessValue);
 
@@ -80 +79 @@
         opacitySliderOutput.innerHTML = "% " + Math.round(this.value * 100) / 100;
         that.opacityValue = this.value / 100;
-        that.polyOptions.fillOpacity = that.opacityValue;
+        that.shapeOptions.fillOpacity = that.opacityValue;
         that.setSelectedOpacity(that.opacityValue);
     }
@@ -106 +105 @@
         var enableMessage = currentOverlays !== that.savedOverlays;
         var message = "Changes are not saved. Are you sure you want to leave?";
-        
-        console.log("@@@ onbeforeunload. currentOverlays: " + currentOverlays);
-        console.log(that.savedOverlays);
-        console.log(enableMessage);
+
         
         // Comment out following section in entirety -- from "e = e || window.event" to end of "if(e)" -- if
@@ -150 +146 @@
                         that.resizable = true;
                         that.shapeResize();
+                        
                     }
                 });
@@ -277 +274 @@
                 draggable: true
             },
-            circleOptions: this.polyOptions,
-            polylineOptions: this.polyOptions,
-            polygonOptions: this.polyOptions,
-            rectangleOptions: this.polyOptions,
+            circleOptions: this.shapeOptions,
+            polylineOptions: this.shapeOptions,
+            polygonOptions: this.shapeOptions,
+            rectangleOptions: this.shapeOptions,
         });
 
@@ -333 +330 @@
 
     //Keyboard shortcuts            
-    var mapAndControls = document.getElementById("map-and-controls-" + this.id); 
-    console.log("@@@@ initMapEditor. mapAndControls: ", mapAndControls);
+    var mapAndControls = document.getElementById("map-and-controls-" + this.id);
     
     //Sets shift as unpressed
@@ -361 +357 @@
             }   
         }
-        
         else if (keyCode == 'A' && (event.ctrlKey || event.metaKey)) {
             event.preventDefault();
@@ -371 +366 @@
             that.deselectAll();
         }
-        else if (keyCode == '0' || keyCode == 'À' || keyCode == 'G') {
-
+        else if (keyCode == '0' || keyCode == 'À' || (keyCode == 'G'&& (event.ctrlKey || event.metaKey))) {
+            event.preventDefault(); 
             that.drawingManager.setDrawingMode(null);
         } else if (keyCode == '1') {
@@ -384 +379 @@
         } else if (keyCode == '5') {
             that.drawingManager.setDrawingMode('rectangle');
-        } else if (keyCode == 'S') {
-            that.saveToArchives();  
-        } else if (keyCode == 'Q') {            
+        } 
+        //else if (keyCode == 'S') {
+        //  that.saveToArchives();  
+        //} 
+        else if (keyCode == 'Q') { // for debugging information, press Q (easy to hit key)
             that.printHistory();
+        }
+        else if (keyCode == '.') {
+            that.deleteSelectedShapes();
         }
 //                                  console.log(keyCode);
@@ -471 +471 @@
     // mouses down on it.
     google.maps.event.addListener(newShape, 'click', function (e) {
-
         that.vertexAndPolyDel(e, newShape);
-
     });
 
@@ -689 +687 @@
     console.log("present ", this.mapEditorHistory.presentOverlays);
     console.log("undone ", this.mapEditorHistory.undoneOverlays);
-    console.log("@@@@ selectedShapes: " + this.selectedShapes);
+    console.log("@@@@ allShapes: ", this.overlays);
+    console.log("@@@@ selectedShapes: ", this.selectedShapes);
 }
 
@@ -711 +710 @@
     
     for (var i=0; i<map_editor.overlays.length; i++) {
-        map_editor.overlays[i].setMap(map_editor.map);
-    }
-    
-    this.mapEditorHistory.presentOverlayPush();
-    
-    
-    //When the overlays are loaded from the metadate, they cannot be selected when clicked on them. 
-    //One fix for this issue is to delete all the sapes present then bring them back by 'undo', then they can be normally selected
-    this.deleteAllShapes();
-    this.mapEditorHistory.undo();
-    this.mapEditorHistory.prevOverlays = [];        
+        var shape = map_editor.overlays[i];
+        if (ShapesUtil.overlayItemIsShape(shape)) {
+            map_editor.addShapeListeners(shape, null); // don't have an overlay event!
+        } else {
+            map_editor.addMarkerListeners(shape, null); // don't have an overlay event!
+        }
+        shape.setMap(map_editor.map);
+    }
+
+    this.mapEditorHistory.presentOverlayPush(); 
 }
 

main/trunk/greenstone3/web/interfaces/default/js/map-scripts-shapes-util.js

@@ -64 +64 @@
         
         clone_poly = new google.maps.Polyline({
+            suppressUndo: true,
             geodesic:      geodesic,
             strokeColor:   strokeColor,
@@ -80 +81 @@
     
         clone_poly = new google.maps.Polygon({
+            suppressUndo: true,
             geodesic:      geodesic,
             strokeColor:   strokeColor,
@@ -186 +188 @@
     
     var clone_rect = new google.maps.Rectangle({
-            strokeColor: strokeColor,
-            strokeOpacity: strokeOpacity,
-            strokeWeight: strokeWeight,
-            fillColor: fillColor,
-            fillOpacity: fillOpacity,
-            bounds: bounds,
-            draggable: true,
-            editable: false,
-            type: type
-        });
+        suppressUndo: true,
+        strokeColor: strokeColor,
+        strokeOpacity: strokeOpacity,
+        strokeWeight: strokeWeight,
+        fillColor: fillColor,
+        fillOpacity: fillOpacity,
+        bounds: bounds,
+        draggable: true,
+        editable: false,
+        type: type
+    });
     return clone_rect;
 }
@@ -267 +270 @@
     
     var clone_circ = new google.maps.Circle({
-            strokeColor: strokeColor,
-            strokeOpacity: strokeOpacity,
-            strokeWeight: strokeWeight,
-            fillColor: fillColor,
-            fillOpacity: fillOpacity,
-            center: center,
-            radius: radius,
-            draggable: true,
-            editable: false,
-            type: type
-        });
+        suppressUndo: true,
+        strokeColor: strokeColor,
+        strokeOpacity: strokeOpacity,
+        strokeWeight: strokeWeight,
+        fillColor: fillColor,
+        fillOpacity: fillOpacity,
+        center: center,
+        radius: radius,
+        draggable: true,
+        editable: false,
+        type: type
+    });
     return clone_circ;
 }
@@ -320 +324 @@
     
     var clone_marker = new google.maps.Marker({
-            position: position,
-            clickable: true,
-            draggable: true,
-            editable: true,
-            type: google.maps.drawing.OverlayType.MARKER
-        })
+        suppressUndo: true,
+        position: position,
+        clickable: true,
+        draggable: true,
+        editable: true,
+        type: google.maps.drawing.OverlayType.MARKER
+    })
     return clone_marker;
 }