From e5f4f67c1066368e5bdaf1323aff5627174a1922 Mon Sep 17 00:00:00 2001 From: David Back Date: Wed, 28 Nov 2018 17:30:18 -0800 Subject: [PATCH] RC76 draggable number fixes --- scripts/system/edit.js | 33 ++++---- scripts/system/html/js/draggableNumber.js | 87 +++++++++++++--------- scripts/system/html/js/entityProperties.js | 41 +++++----- 3 files changed, 92 insertions(+), 69 deletions(-) diff --git a/scripts/system/edit.js b/scripts/system/edit.js index 077d50ddde..039f4f1e22 100644 --- a/scripts/system/edit.js +++ b/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(); - blockPropertyUpdates = data.blockUpdateCallback === true; + if (data.onlyUpdateEntities) { + 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") { - undoHistory.undo(); + } else if (!isOnMacPlatform && keyUpEvent.controlKey && !keyUpEvent.shiftKey && keyUpEvent.keyCodeString === "Z") { + 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 ( - (keyUpEvent.controlKey && keyUpEvent.shiftKey && keyUpEvent.keyCodeString === "Z") || - (keyUpEvent.controlKey && keyUpEvent.keyCodeString === "Y")) { - - undoHistory.redo(); + } else if (!isOnMacPlatform && + ((keyUpEvent.controlKey && keyUpEvent.shiftKey && keyUpEvent.keyCodeString === "Z") || + (keyUpEvent.controlKey && keyUpEvent.keyCodeString === "Y"))) { + undoHistory.redo(); // redo is only handled via handleMenuItem on Mac } else if (WANT_DEBUG_MISSING_SHORTCUTS) { console.warn("unhandled key event: " + JSON.stringify(keyUpEvent)) } diff --git a/scripts/system/html/js/draggableNumber.js b/scripts/system/html/js/draggableNumber.js index c08cac2ce4..104088ac48 100644 --- a/scripts/system/html/js/draggableNumber.js +++ b/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; @@ -24,7 +25,7 @@ function DraggableNumber(min, max, step, decimals, dragStart, dragEnd) { 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); @@ -33,7 +34,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.elInput.style.visibility = "visible"; @@ -44,32 +45,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) { - let initialValue = this.elInput.value; - let dx = event.clientX - this.lastMouseEvent.clientX; - let changeValue = dx !== 0; - if (changeValue) { - while (dx !== 0) { - if (dx > 0) { - this.elInput.stepUp(); - --dx; - } else { - this.elInput.stepDown(); - ++dx; - } - } - this.inputChange(); - if (this.valueChangeFunction) { - this.valueChangeFunction(); + if (Math.abs(dxFromInitial) > DELTA_X_FOCUS_THRESHOLD) { + if (this.dragStartFunction) { + this.dragStartFunction(); + } + this.dragging = true; + } + this.lastMouseEvent = event; + } + if (this.dragging && this.lastMouseEvent) { + let initialValue = this.elInput.value; + let dx = event.clientX - this.lastMouseEvent.clientX; + let changeValue = dx !== 0; + if (changeValue) { + while (dx !== 0) { + if (dx > 0) { + this.elInput.stepUp(); + --dx; + } else { + this.elInput.stepDown(); + ++dx; } } - if (!this.dragging) { - if (this.dragStartFunction) { - this.dragStartFunction(); - } - this.dragging = true; + this.inputChange(); + if (this.valueChangeFunction) { + this.valueChangeFunction(); } } this.lastMouseEvent = event; @@ -89,18 +91,22 @@ DraggableNumber.prototype = { }, stepUp: function() { - this.elInput.stepUp(); - this.inputChange(); - if (this.valueChangeFunction) { - this.valueChangeFunction(); + if (!this.isDisabled()) { + this.elInput.stepUp(); + this.inputChange(); + if (this.valueChangeFunction) { + this.valueChangeFunction(); + } } }, stepDown: function() { - this.elInput.stepDown(); - this.inputChange(); - if (this.valueChangeFunction) { - this.valueChangeFunction(); + if (!this.isDisabled()) { + this.elInput.stepDown(); + this.inputChange(); + if (this.valueChangeFunction) { + this.valueChangeFunction(); + } } }, @@ -114,9 +120,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); }, @@ -129,6 +132,16 @@ DraggableNumber.prototype = { this.elInput.style.visibility = "hidden"; this.elText.style.visibility = "visible"; }, + + 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); @@ -139,6 +152,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"; @@ -174,6 +188,7 @@ DraggableNumber.prototype = { this.elInput.style.visibility = "hidden"; this.elInput.addEventListener("change", this.onInputChange); this.elInput.addEventListener("blur", this.onInputBlur); + this.elInput.addEventListener("keypress", this.onKeyPress); this.elText.appendChild(this.elLeftArrow); this.elText.appendChild(this.elInput); diff --git a/scripts/system/html/js/entityProperties.js b/scripts/system/html/js/entityProperties.js index 78e3cd4dc8..0aabb300de 100644 --- a/scripts/system/html/js/entityProperties.js +++ b/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, - max: 0, + min: 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,8 @@ function updateProperty(originalPropertyName, propertyValue, isParticleProperty, }); particleSyncDebounce(); } else { - updateProperties(propertyUpdate, blockUpdateCallback); + let onlyUpdateEntity = properties[originalPropertyName].dragging === true; + updateProperties(propertyUpdate, onlyUpdateEntity); } } @@ -1676,15 +1678,15 @@ var particleSyncDebounce = _.debounce(function () { particlePropertyUpdates = {}; }, DEBOUNCE_TIMEOUT); -function updateProperties(propertiesToUpdate, blockUpdateCallback) { - if (blockUpdateCallback === undefined) { - blockUpdateCallback = false; +function updateProperties(propertiesToUpdate, onlyUpdateEntity) { + if (onlyUpdateEntity === undefined) { + onlyUpdateEntity = false; } EventBridge.emitWebEvent(JSON.stringify({ id: lastEntityID, type: "update", properties: propertiesToUpdate, - blockUpdateCallback: blockUpdateCallback + onlyUpdateEntities: onlyUpdateEntity })); } @@ -1709,9 +1711,8 @@ function createDragStartFunction(property) { function createDragEndFunction(property) { return function() { property.dragging = false; - EventBridge.emitWebEvent(JSON.stringify({ - type: "updateProperties" - })); + // send an additonal update post-dragging to consider whole property change from dragStart to dragEnd to be 1 action + this.valueChangeFunction(); }; } @@ -1722,7 +1723,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 +1737,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 +1752,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 +1878,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 +2101,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