Merge pull request #14495 from dback2/draggableNumberFixes76-master

Draggable numbers - RC76 fixes to master
This commit is contained in:
Ryan Huffman 2018-12-06 09:47:38 -08:00 committed by GitHub
commit 13c3b410d8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 95 additions and 69 deletions

View file

@ -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))
}

View file

@ -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) {
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;
@ -103,18 +105,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();
}
}
},
@ -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);

View file

@ -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,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) {
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 +1714,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 +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