Ensure that edited map range and expression properties are sent to the network if user clicks away from editor.

Author: malloch

js/MapProperties.js

@@ -7,6 +7,7 @@ class MapProperties {
         this.mapModes = ["Linear", "Expression"];
         this.mapProtocols = ["UDP", "TCP"];
         this.boundaryIcons = ["none", "right", "left", "mute", "clamp", "wrap"];
+        this.cachedProperty = { "key": null, "value": null };
 
         $(this.container).append(
             "<div' class='topMenu' id='mapPropsContainer' style='width:calc(100% - 605px);'>"+
@@ -74,12 +75,17 @@ class MapProperties {
 
         // The range input handler
         $('#mapPropsContainer').on({
-            keydown: function(e) {
+            keydown: function(e) { e.stopPropagation(); },
+            keyup: function(e) {
                 e.stopPropagation();
                 if (e.which == 13 || e.which == 9) { //'enter' or 'tab' key
                     self.setMapProperty($(this).attr('id').split(' ')[0],
                                          this.value);
                 }
+                else {
+                    self.cacheMapProperty($(this).attr('id').split(' ')[0],
+                                          this.value);
+                }
             },
             click: function(e) { e.stopPropagation(); },
             focusout: function(e) {
@@ -91,19 +97,27 @@ class MapProperties {
 
         // The expression input handler
         $('#mapPropsContainer').on({
-            keydown: function(e) {
+            keydown: function(e) { e.stopPropagation(); },
+            keyup: function(e) {
                 e.stopPropagation();
                 if (e.which == 13) { //'enter' key
-                    if (counter >= 1) {
+                    // check if expression contains a semicolon
+                    if (this.value.indexOf(';') == -1 || counter >= 1) {
                         self.setMapProperty($(this).attr('id').split(' ')[0],
                                             this.value);
-                         counter = 0;
+                        counter = 0;
                     }
-                    else
+                    else {
                         counter += 1;
+                        self.cacheMapProperty($(this).attr('id').split(' ')[0],
+                                              this.value);
+                    }
                 }
-                else
+                else {
                     counter = 0;
+                    self.cacheMapProperty($(this).attr('id').split(' ')[0],
+                                          this.value);
+                }
             },
             click: function(e) { e.stopPropagation(); },
             focusout: function(e) {
@@ -344,8 +358,19 @@ class MapProperties {
             this.updateMapProperties();
     }
 
+    cacheMapProperty(key, value) {
+        this.cachedProperty.key = key;
+        this.cachedProperty.value = value;
+    }
+
+    sendCachedProperty() {
+        if (!this.cachedProperty.key || !this.cachedProperty.value)
+            return;
+        this.setMapProperty(this.cachedProperty.key, this.cachedProperty.value);
+    }
+
     setMapProperty(key, value) {
-        let container = $(this.container);
+        this.cacheMapProperty();
         let modes = this.mapModeCommands;
         this.database.maps.filter(this.selected).forEach(function(map) {
             if (map[key] && (map[key] == value || map[key] == parseFloat(value)))

js/ViewManager.js

@@ -228,6 +228,7 @@ class ViewManager
         $('#svgDiv').on('mousedown', function(e) {
             if (self.views[self.currentView].dragging)
                 return;
+            $('#container').trigger("sendCachedProperty");
             if (e.shiftKey == false) {
                 deselectAllMaps(self.tables);
             }

js/main.js

@@ -64,12 +64,6 @@ function init() {
                         "</div>"+
                      "</div>");
 
-    // init the view
-    $('#container').empty();
-    tooltip = new Tooltip();
-    viewManager = new ViewManager(document.getElementById('container'), database,
-                                  tooltip);
-
     // init the top menu
     $('#TopMenuWrapper').empty()
     saverLoader = new SaverLoader(document.getElementById("TopMenuWrapper"),
@@ -83,6 +77,12 @@ function init() {
     netSelector = new NetworkSelector(document.getElementById("TopMenuWrapper"),
                                       database, viewManager);
 
+    // init the view
+    $('#container').empty();
+    tooltip = new Tooltip();
+    viewManager = new ViewManager(document.getElementById('container'), database,
+                                  tooltip);
+
     // init controller
     initMonitorCommands();
     initViewCommands();
@@ -259,7 +259,7 @@ function initViewCommands()
 
 // allows anyone to call updateMapProperties by triggering an event on #container
 function initMapPropertiesCommands() {
-    // asks the view for the selected maps and updates the edit bar
+    // asks the database for the selected maps and updates the edit bar
     $("#container").on("updateMapProperties", function(e) {
         mapProperties.updateMapProperties();
     });
@@ -268,6 +268,11 @@ function initMapPropertiesCommands() {
     $("#container").on("updateMapPropertiesFor", function(e, key) {
         mapProperties.updateMapPropertiesFor(key);
     });
+
+    // send out any partially-edited properties when maps are deselected
+    $("#container").on("sendCachedProperty", function(e) {
+        mapProperties.sendCachedProperty();
+    });
 }
 
 function select_obj(obj) {