Changeset 33086 for main/trunk

Timestamp:

2019-05-16T20:07:59+12:00 (5 years ago)

Author:

wy59

Message:

1. Labels sort of work (see point 2) and get saved and reloaded from archives too now. 2. Needs fixing: undo and redo in label field works only if you enter the text first before drawing the shape, whereas vice-versa the redo/undo behaviour is weird (label repeated 3 times).

File:

• main/trunk/greenstone3/web/interfaces/default/js/map-scripts-editor.js (modified) (13 diffs)

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

@@ -37 +37 @@
     this.resizable = false;
     this.dontResize = false;
+
     this.shapeOptions = {
         suppressUndo: true,
@@ -44 +45 @@
         editable: true,
         geodesic: false,
-        draggable: true
+        draggable: true,
+        description: ""
     };
     this.mapEditorHistory = new MapEditorHistory(this);
@@ -85 +87 @@
         
     thicknessSliderOutput.oninput = function () {
-        that.shapeSpecsChangeMD();
+        that.shapeSpecsChangeMD(); // TODO: DO WE NEED THIS LINE? (LINE COPIED & PASTED FROM ABOVE)
         if(this.value > that.MAX_THICKNESS) this.value = that.MAX_THICKNESS;
         if(this.value < that.MIN_THICKNESS) this.value = that.MIN_THICKNESS;
@@ -107 +109 @@
     }
     opacitySliderOutput.oninput = function () {
-        that.shapeSpecsChangeMD();
+        that.shapeSpecsChangeOnInput();
         if(this.value > that.MAX_OPACITY) this.value = that.MAX_OPACITY;
         if(this.value < that.MIN_OPACITY) this.value = that.MIN_OPACITY;
@@ -116 +118 @@
     }
     
+    var descriptionInput = document.getElementById("description" + "-" + this.id);
+    descriptionInput.oninput = function () {        
+        that.shapeSpecsChangeOnInput(); // takes care of history (undo/redo)        
+        var description = this.value;
+        that.shapeOptions.description = description;        
+        that.setSelectedDescription(that.shapeOptions.description);        
+    }
+    
+    // TODO: Do we need these listeners, when we already have onInput methods above? Test.
     document.getElementById("color-palette1" + "-" + this.id).addEventListener("mousedown", function() { that.shapeSpecsChangeMD() });
     document.getElementById("thicknessRange" + "-" + this.id).addEventListener("mouseup", function () { that.shapeSpecsChangeMU() });
-    document.getElementById("colourOpacity" + "-" + this.id).addEventListener("mouseup", function() { that.shapeSpecsChangeMU() } );
+    document.getElementById("colourOpacity" + "-" + this.id).addEventListener("mouseup", function () { that.shapeSpecsChangeMU() });
+    //document.getElementById("description" + "-" + this.id).addEventListener("keypress", function () { that.shapeSpecsChangeOnInput() });
 
     document.onmousedown = function (ev) {
@@ -214 +226 @@
 }
 
+MapEditor.prototype.shapeSpecsChangeOnInput = function () {
+    if (this.selectedShapes.length > 0) {
+        this.mapEditorHistory.presentOverlayPush();
+    }
+}
+
 MapEditor.prototype.makeColorButton = function (color) {
     var that = this;
@@ -332 +350 @@
     // store reference to added overlay
     google.maps.event.addListener(this.drawingManager, 'overlaycomplete', function (e) {
-        
+        document.getElementById("description" + "-" + that.id).value = "";
+        var value = document.getElementById("description" + "-" + that.id).value;
         that.allowDeselect = true;
         that.mapEditorHistory.historyOverlayPush();
         that.overlays.push(e.overlay); // store reference to added overlay
         var newShape = e.overlay;
-        newShape.type = e.type;
+        newShape.type = e.type;     
         that.mapEditorHistory.presentOverlayPush();
         
@@ -389 +408 @@
             //disable keyboard shortcut within the number input field
             var activeElement = $(document.activeElement);
-            if(activeElement.attr('type') == 'number'){
+            if(activeElement.attr('type') == 'number' || activeElement.attr('type') == 'text'){
                 //console.log('number detected')
                 return;
@@ -517 +536 @@
 
 MapEditor.prototype.addShapeListeners = function (newShape, e) {
-    var that = this;
+    var that = this;
     // Add an event listener that selects the newly-drawn shape when the user
     // mouses down on it.
@@ -612 +631 @@
         //Send the values to be updated
         var thi = shape.strokeWeight;
-        var opa = shape.fillOpacity;
+        var opa = shape.fillOpacity;        
         var fCol = shape.fillColor;
         var sCol = shape.strokeColor;
-        this.updateMenuValues(thi, opa, fCol, sCol);
+        var description = shape.description;
+        this.updateMenuValues(thi, opa, fCol, sCol, description);
 
     } else if (shape.type == 'marker') {
@@ -636 +656 @@
 }
 
+//Set selected label
+MapEditor.prototype.setSelectedDescription = function (label) {
+    if (this.selectedShapes.length > 0) {
+        for (var i = 0; i < this.selectedShapes.length; i++) {
+            this.selectedShapes[i].set('description', label); //SAME: this.selectedShapes[i].description = label;            
+        }
+    }
+}
+
 //Set selected thickness
 MapEditor.prototype.setSelectedThickness = function (sWeight) {
@@ -669 +698 @@
 }
 
-MapEditor.prototype.updateMenuValues = function (thi, opa, fCol, sCol) {    
+MapEditor.prototype.updateMenuValues = function (thi, opa, fCol, sCol, description) {   
     //Update thickness slider and value on the settings menu
     var thicknessSliderOutput = document.getElementById("thicknessRangeVal" + "-" + this.id);
@@ -681 +710 @@
     opacitySliderOutput.value = opa * 100;
     document.getElementById("colourOpacity" + "-" + this.id).value = opa * 100;
+
+    // Show the description in the description field
+    var descriptionInput = document.getElementById("description" + "-" + this.id);
+    descriptionInput.value = description;
 
     if (this.drawingManager.drawingMode == null) {