Merge pull request #14495 from dback2/draggableNumberFixes76-master

Draggable numbers - RC76 fixes to master

scripts/system/edit.js

@@ -554,8 +554,9 @@ var toolBar = (function () {
                 }
             }
 
-            SelectionManager.saveProperties();
             entityID = Entities.addEntity(properties);
+            SelectionManager.addEntity(entityID, false, this);
+            SelectionManager.saveProperties();
             pushCommandForSelections([{
                 entityID: entityID,
                 properties: properties
@@ -1273,6 +1274,7 @@ function mouseClickEvent(event) {
             } else {
                 selectionManager.addEntity(foundEntity, true, this);
             }
+            selectionManager.saveProperties();
 
             if (wantDebug) {
                 print("Model selected: " + foundEntity);
@@ -2130,12 +2132,17 @@ function applyEntityProperties(data) {
             entityID = DELETED_ENTITY_MAP[entityID];
         }
         Entities.deleteEntity(entityID);
+        var index = selectedEntityIDs.indexOf(entityID);
+        if (index >= 0) {
+            selectedEntityIDs.splice(index, 1);
+        }
     }
 
     // We might be getting an undo while edit.js is disabled. If that is the case, don't set
     // our selections, causing the edit widgets to display.
     if (isActive) {
         selectionManager.setSelections(selectedEntityIDs, this);
+        selectionManager.saveProperties();
     }
 }
 
@@ -2324,7 +2331,6 @@ var PropertiesTool = function (opts) {
         }
         var i, properties, dY, diff, newPosition;
         if (data.type === "update") {
-            selectionManager.saveProperties();
             if (selectionManager.selections.length > 1) {
                 for (i = 0; i < selectionManager.selections.length; i++) {
                     Entities.editEntity(selectionManager.selections[i], data.properties);
@@ -2360,8 +2366,12 @@ var PropertiesTool = function (opts) {
                     entityListTool.sendUpdate();
                 }
             }
-            pushCommandForSelections();
+            if (data.onlyUpdateEntities) {
-            blockPropertyUpdates = data.blockUpdateCallback === true;
+                blockPropertyUpdates = true;
+            } else {
+                pushCommandForSelections();
+                SelectionManager.saveProperties();
+            }
             selectionManager._update(false, this);
             blockPropertyUpdates = false;
         } else if (data.type === 'saveUserData' || data.type === 'saveMaterialData') {
@@ -2473,8 +2483,6 @@ var PropertiesTool = function (opts) {
                 tooltips: Script.require('./assets/data/createAppTooltips.json'),
                 hmdActive: HMD.active,
             });
-        } else if (data.type === "updateProperties") {
-            updateSelections(true);
         }
     };
 
@@ -2739,17 +2747,16 @@ keyUpEventFromUIWindow = function(keyUpEvent) {
         selectionManager.pasteEntities();
     } else if (keyUpEvent.controlKey && keyUpEvent.keyCodeString === "D") {
         selectionManager.duplicateSelection();
-    } else if (keyUpEvent.controlKey && !keyUpEvent.shiftKey && keyUpEvent.keyCodeString === "Z") {
+    } else if (!isOnMacPlatform && keyUpEvent.controlKey && !keyUpEvent.shiftKey && keyUpEvent.keyCodeString === "Z") {
-        undoHistory.undo();
+        undoHistory.undo(); // undo is only handled via handleMenuItem on Mac
     } else if (keyUpEvent.controlKey && !keyUpEvent.shiftKey && keyUpEvent.keyCodeString === "P") {
         parentSelectedEntities();
     } else if (keyUpEvent.controlKey && keyUpEvent.shiftKey && keyUpEvent.keyCodeString === "P") {
         unparentSelectedEntities();
-    } else if (
+    } else if (!isOnMacPlatform &&
-        (keyUpEvent.controlKey && keyUpEvent.shiftKey && keyUpEvent.keyCodeString === "Z") ||
+              ((keyUpEvent.controlKey && keyUpEvent.shiftKey && keyUpEvent.keyCodeString === "Z") ||
-        (keyUpEvent.controlKey && keyUpEvent.keyCodeString === "Y")) {
+               (keyUpEvent.controlKey && keyUpEvent.keyCodeString === "Y"))) {
-
+        undoHistory.redo(); // redo is only handled via handleMenuItem on Mac
-        undoHistory.redo();
     } else if (WANT_DEBUG_MISSING_SHORTCUTS) {
         console.warn("unhandled key event: " + JSON.stringify(keyUpEvent))
     }

scripts/system/html/js/draggableNumber.js

@@ -7,6 +7,7 @@
 //  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
 
 const DELTA_X_FOCUS_THRESHOLD = 1;
+const ENTER_KEY = 13;
 
 function DraggableNumber(min, max, step, decimals, dragStart, dragEnd) {
     this.min = min;
@@ -38,7 +39,7 @@ DraggableNumber.prototype = {
     },
 
     mouseDown: function(event) {
-        if (event.target === this.elText) {
+        if (event.target === this.elText && !this.isDisabled()) {
             this.initialMouseEvent = event;
             this.lastMouseEvent = event;
             document.addEventListener("mousemove", this.onDocumentMouseMove);
@@ -47,7 +48,7 @@ DraggableNumber.prototype = {
     },
     
     mouseUp: function(event) {
-        if (event.target === this.elText && this.initialMouseEvent) {
+        if (!this.dragging && event.target === this.elText && this.initialMouseEvent) {
             let dx = event.clientX - this.initialMouseEvent.clientX;
             if (Math.abs(dx) <= DELTA_X_FOCUS_THRESHOLD) {
                 this.showInput();
@@ -58,32 +59,33 @@ DraggableNumber.prototype = {
     },
     
     documentMouseMove: function(event) {
-        if (this.initialMouseEvent) {
+        if (!this.dragging && this.initialMouseEvent) {
             let dxFromInitial = event.clientX - this.initialMouseEvent.clientX;
-            if (Math.abs(dxFromInitial) > DELTA_X_FOCUS_THRESHOLD && this.lastMouseEvent) {
+            if (Math.abs(dxFromInitial) > DELTA_X_FOCUS_THRESHOLD) {
-                let initialValue = this.elInput.value;
+                if (this.dragStartFunction) {
-                let dx = event.clientX - this.lastMouseEvent.clientX;
+                    this.dragStartFunction();
-                let changeValue = dx !== 0;
+                }
-                if (changeValue) {
+                this.dragging = true;
-                    while (dx !== 0) {
+            }
-                        if (dx > 0) {
+            this.lastMouseEvent = event;
-                            this.elInput.stepUp();
+        }
-                            --dx;
+        if (this.dragging && this.lastMouseEvent) {
-                        } else {
+            let initialValue = this.elInput.value;
-                            this.elInput.stepDown();
+            let dx = event.clientX - this.lastMouseEvent.clientX;
-                            ++dx;
+            let changeValue = dx !== 0;
-                        }
+            if (changeValue) {
-                    }
+                while (dx !== 0) {
-                    this.inputChange();
+                    if (dx > 0) {
-                    if (this.valueChangeFunction) {
+                        this.elInput.stepUp();
-                        this.valueChangeFunction();
+                        --dx;
+                    } else {
+                        this.elInput.stepDown();
+                        ++dx;
                     }
                 }
-                if (!this.dragging) {
+                this.inputChange();
-                    if (this.dragStartFunction) {
+                if (this.valueChangeFunction) {
-                        this.dragStartFunction();
+                    this.valueChangeFunction();
-                    }
-                    this.dragging = true;
                 }
             }
             this.lastMouseEvent = event;
@@ -103,18 +105,22 @@ DraggableNumber.prototype = {
     },
     
     stepUp: function() {
-        this.elInput.stepUp();
+        if (!this.isDisabled()) {
-        this.inputChange();
+            this.elInput.stepUp();
-        if (this.valueChangeFunction) {
+            this.inputChange();
-            this.valueChangeFunction();
+            if (this.valueChangeFunction) {
+                this.valueChangeFunction();
+            }
         }
     },
     
     stepDown: function() {
-        this.elInput.stepDown();
+        if (!this.isDisabled()) {
-        this.inputChange();
+            this.elInput.stepDown();
-        if (this.valueChangeFunction) {
+            this.inputChange();
-            this.valueChangeFunction();
+            if (this.valueChangeFunction) {
+                this.valueChangeFunction();
+            }
         }
     },
     
@@ -128,9 +134,6 @@ DraggableNumber.prototype = {
     },
 
     setValueChangeFunction: function(valueChangeFunction) {
-        if (this.valueChangeFunction) {
-            this.elInput.removeEventListener("change", this.valueChangeFunction);
-        }
         this.valueChangeFunction = valueChangeFunction.bind(this.elInput);
         this.elInput.addEventListener("change", this.valueChangeFunction);
     },
@@ -142,6 +145,16 @@ DraggableNumber.prototype = {
     inputBlur: function(ev) {
         this.hideInput();
     },
+
+    keyPress: function(event) {
+        if (event.keyCode === ENTER_KEY) {
+            this.inputBlur();
+        }
+    },
+    
+    isDisabled: function() {
+        return this.elText.getAttribute("disabled") === "disabled";
+    },
     
     initialize: function() {
         this.onMouseDown = this.mouseDown.bind(this);
@@ -152,6 +165,7 @@ DraggableNumber.prototype = {
         this.onStepDown = this.stepDown.bind(this);
         this.onInputChange = this.inputChange.bind(this);
         this.onInputBlur = this.inputBlur.bind(this);
+        this.onKeyPress = this.keyPress.bind(this);
         
         this.elDiv = document.createElement('div');
         this.elDiv.className = "draggable-number";
@@ -187,6 +201,7 @@ DraggableNumber.prototype = {
         this.elInput.style.opacity = 0;
         this.elInput.addEventListener("change", this.onInputChange);
         this.elInput.addEventListener("blur", this.onInputBlur);
+        this.elInput.addEventListener("keypress", this.onKeyPress);
         this.elInput.addEventListener("focus", this.showInput.bind(this));
         
         this.elDiv.appendChild(this.elLeftArrow);

scripts/system/html/js/entityProperties.js

@@ -882,7 +882,7 @@ const GROUPS = [
         properties: [
             {
                 type: "triple",
-                label: "Alpha",
+                label: "Spin",
                 properties: [
                     {
                         label: "Start",
@@ -951,8 +951,8 @@ const GROUPS = [
                     {
                         label: "Start",
                         type: "number",
-                        min: -180,
+                        min: 0,
-                        max: 0,
+                        max: 180,
                         step: 1,
                         decimals: 0,
                         multiplier: DEGREES_TO_RADIANS,
@@ -979,7 +979,7 @@ const GROUPS = [
                     {
                         label: "Start",
                         type: "number",
-                        min: 0,
+                        min: -180,
                         max: 180,
                         step: 1,
                         decimals: 0,
@@ -990,7 +990,7 @@ const GROUPS = [
                     {
                         label: "Finish",
                         type: "number",
-                        min: 0,
+                        min: -180,
                         max: 180,
                         step: 1,
                         decimals: 0,
@@ -1182,7 +1182,7 @@ const GROUPS = [
             },
             {
                 label: "Lifetime",
-                type: "number",
+                type: "string",
                 unit: "s",
                 propertyID: "lifetime",
             },
@@ -1370,6 +1370,7 @@ const GROUPS_PER_TYPE = {
 };
 
 const EDITOR_TIMEOUT_DURATION = 1500;
+const IMAGE_DEBOUNCE_TIMEOUT = 250;
 const DEBOUNCE_TIMEOUT = 125;
 
 const COLOR_MIN = 0;
@@ -1641,7 +1642,7 @@ function updateVisibleSpaceModeProperties() {
  * PROPERTY UPDATE FUNCTIONS
  */
 
-function updateProperty(originalPropertyName, propertyValue, isParticleProperty, blockUpdateCallback) {
+function updateProperty(originalPropertyName, propertyValue, isParticleProperty) {
     let propertyUpdate = {};
     // if this is a compound property name (i.e. animation.running) then split it by . up to 3 times
     let splitPropertyName = originalPropertyName.split('.');
@@ -1667,7 +1668,11 @@ function updateProperty(originalPropertyName, propertyValue, isParticleProperty,
         });
         particleSyncDebounce();
     } else {
-        updateProperties(propertyUpdate, blockUpdateCallback);
+        // only update the entity property value itself if in the middle of dragging
+        // prevent undo command push, saving new property values, and property update 
+        // callback until drag is complete (additional update sent via dragEnd callback)
+        let onlyUpdateEntity = properties[originalPropertyName] && properties[originalPropertyName].dragging === true;
+        updateProperties(propertyUpdate, onlyUpdateEntity);
     }
 }
 
@@ -1676,15 +1681,15 @@ var particleSyncDebounce = _.debounce(function () {
     particlePropertyUpdates = {};
 }, DEBOUNCE_TIMEOUT);
 
-function updateProperties(propertiesToUpdate, blockUpdateCallback) {
+function updateProperties(propertiesToUpdate, onlyUpdateEntity) {
-    if (blockUpdateCallback === undefined) {
+    if (onlyUpdateEntity === undefined) {
-        blockUpdateCallback = false;
+        onlyUpdateEntity = false;
     }
     EventBridge.emitWebEvent(JSON.stringify({
         id: lastEntityID,
         type: "update",
         properties: propertiesToUpdate,
-        blockUpdateCallback: blockUpdateCallback
+        onlyUpdateEntities: onlyUpdateEntity
     }));
 }
 
@@ -1709,9 +1714,8 @@ function createDragStartFunction(property) {
 function createDragEndFunction(property) {
     return function() {
         property.dragging = false;
-        EventBridge.emitWebEvent(JSON.stringify({
+        // send an additonal update post-dragging to consider whole property change from dragStart to dragEnd to be 1 action
-            type: "updateProperties"
+        this.valueChangeFunction();
-        }));
     };
 }
 
@@ -1722,7 +1726,7 @@ function createEmitNumberPropertyUpdateFunction(property) {
             multiplier = 1;
         }
         let value = parseFloat(this.value) * multiplier;
-        updateProperty(property.name, value, property.isParticleProperty, property.dragging);
+        updateProperty(property.name, value, property.isParticleProperty);
     };
 }
 
@@ -1736,7 +1740,7 @@ function createEmitVec2PropertyUpdateFunction(property) {
             x: property.elNumberX.elInput.value * multiplier,
             y: property.elNumberY.elInput.value * multiplier
         };
-        updateProperty(property.name, newValue, property.isParticleProperty, property.dragging);
+        updateProperty(property.name, newValue, property.isParticleProperty);
     };
 }
 
@@ -1751,7 +1755,7 @@ function createEmitVec3PropertyUpdateFunction(property) {
             y: property.elNumberY.elInput.value * multiplier,
             z: property.elNumberZ.elInput.value * multiplier
         };
-        updateProperty(property.name, newValue, property.isParticleProperty, property.dragging);
+        updateProperty(property.name, newValue, property.isParticleProperty);
     };
 }
 
@@ -1877,7 +1881,7 @@ function createNumberProperty(property, elProperty) {
     elProperty.appendChild(elDraggableNumber.elDiv);
 
     if (propertyData.buttons !== undefined) {
-        addButtons(elDraggableNumber.elText, elementID, propertyData.buttons, false);
+        addButtons(elDraggableNumber.elDiv, elementID, propertyData.buttons, false);
     }
     
     return elDraggableNumber;
@@ -2100,7 +2104,7 @@ function createTextureProperty(property, elProperty) {
             elDiv.classList.remove("no-preview");
             elDiv.classList.add("no-texture");
         }
-    }, DEBOUNCE_TIMEOUT * 2);
+    }, IMAGE_DEBOUNCE_TIMEOUT);
     elInput.imageLoad = imageLoad;
     elInput.oninput = function (event) {
         // Add throttle