add min/max/step for some properties, remove duplicate createProperty, improve switch between states

This commit is contained in:
David Back 2018-11-14 14:32:17 -08:00
parent cff4c08e9f
commit d8f5e0f708
2 changed files with 46 additions and 106 deletions

View file

@ -24,16 +24,28 @@ DraggableNumber.prototype = {
if (event.target === this.elText) {
this.initialMouseEvent = event;
this.lastMouseEvent = event;
document.addEventListener("mousemove", this.onMouseMove);
document.addEventListener("mouseup", this.onMouseUp);
document.addEventListener("mousemove", this.onDocumentMouseMove);
document.addEventListener("mouseup", this.onDocumentMouseUp);
}
},
mouseMove: function(event) {
mouseUp: function(event) {
if (event.target === this.elText && this.initialMouseEvent) {
let dx = event.clientX - this.initialMouseEvent.clientX;
if (dx <= DELTA_X_FOCUS_THRESHOLD) {
this.elInput.style.visibility = "visible";
this.elText.style.visibility = "hidden";
}
this.initialMouseEvent = null;
}
},
documentMouseMove: function(event) {
if (this.lastMouseEvent) {
let initialValue = this.elInput.value;
let dx = event.clientX - this.lastMouseEvent.clientX;
let inputChanged = dx !== 0;
if (inputChanged) {
let changeValue = dx !== 0;
if (changeValue) {
while (dx !== 0) {
if (dx > 0) {
this.stepUp();
@ -51,18 +63,10 @@ DraggableNumber.prototype = {
}
},
mouseUp: function(event) {
if (this.initialMouseEvent) {
let dx = event.clientX - this.initialMouseEvent.clientX;
if (dx <= DELTA_X_FOCUS_THRESHOLD) {
this.elInput.style.visibility = "visible";
this.elText.style.visibility = "hidden";
}
this.initialMouseEvent = null;
this.lastMouseEvent = null;
document.removeEventListener("mousemove", this.onMouseMove);
document.removeEventListener("mouseup", this.onMouseUp);
}
documentMouseUp: function(event) {
this.lastMouseEvent = null;
document.removeEventListener("mousemove", this.onDocumentMouseMove);
document.removeEventListener("mouseup", this.onDocumentMouseUp);
},
stepUp: function() {
@ -103,8 +107,9 @@ DraggableNumber.prototype = {
initialize: function() {
this.onMouseDown = this.mouseDown.bind(this);
this.onMouseMove = this.mouseMove.bind(this);
this.onMouseUp = this.mouseUp.bind(this);
this.onDocumentMouseMove = this.documentMouseMove.bind(this);
this.onDocumentMouseUp = this.documentMouseUp.bind(this);
this.onStepUp = this.stepUp.bind(this);
this.onStepDown = this.stepDown.bind(this);
this.onInputChange = this.inputChange.bind(this);
@ -118,6 +123,7 @@ DraggableNumber.prototype = {
this.elText.innerText = " ";
this.elText.style.visibility = "visible";
this.elText.addEventListener("mousedown", this.onMouseDown);
this.elText.addEventListener("mouseup", this.onMouseUp);
this.elLeftArrow = document.createElement('span');
this.elRightArrow = document.createElement('span');

View file

@ -1288,24 +1288,36 @@ const GROUPS = [
{
label: "Angular Damping",
type: "number",
min: 0,
max: 1,
step: 0.01,
decimals: 4,
propertyID: "angularDamping",
},
{
label: "Bounciness",
type: "number",
min: 0,
max: 1,
step: 0.01,
decimals: 4,
propertyID: "restitution",
},
{
label: "Friction",
type: "number",
min: 0,
max: 10,
step: 0.1,
decimals: 4,
propertyID: "friction",
},
{
label: "Density",
type: "number",
min: 100,
max: 10000,
step: 1,
decimals: 4,
propertyID: "density",
},
@ -1314,6 +1326,7 @@ const GROUPS = [
type: "vec3",
vec3Type: "xyz",
subLabels: [ "x", "y", "z" ],
decimals: 4,
unit: "m/s<sup>2</sup>",
propertyID: "gravity",
},
@ -2145,28 +2158,28 @@ function createProperty(propertyData, propertyElementID, propertyName, propertyI
break;
}
case 'number': {
property.elInput = createNumberProperty(property, elProperty);
property.elNumber = createNumberProperty(property, elProperty);
break;
}
case 'vec3': {
let elVec3 = createVec3Property(property, elProperty);
property.elInputX = elVec3[VECTOR_ELEMENTS.X_INPUT];
property.elInputY = elVec3[VECTOR_ELEMENTS.Y_INPUT];
property.elInputZ = elVec3[VECTOR_ELEMENTS.Z_INPUT];
property.elNumberX = elVec3[VECTOR_ELEMENTS.X_NUMBER];
property.elNumberY = elVec3[VECTOR_ELEMENTS.Y_NUMBER];
property.elNumberZ = elVec3[VECTOR_ELEMENTS.Z_NUMBER];
break;
}
case 'vec2': {
let elVec2 = createVec2Property(property, elProperty);
property.elInputX = elVec2[VECTOR_ELEMENTS.X_INPUT];
property.elInputY = elVec2[VECTOR_ELEMENTS.Y_INPUT];
property.elNumberX = elVec2[VECTOR_ELEMENTS.X_NUMBER];
property.elNumberY = elVec2[VECTOR_ELEMENTS.Y_NUMBER];
break;
}
case 'color': {
let elColor = createColorProperty(property, elProperty);
property.elColorPicker = elColor[COLOR_ELEMENTS.COLOR_PICKER];
property.elInputR = elColor[COLOR_ELEMENTS.RED_INPUT];
property.elInputG = elColor[COLOR_ELEMENTS.GREEN_INPUT];
property.elInputB = elColor[COLOR_ELEMENTS.BLUE_INPUT];
property.elNumberR = elColor[COLOR_ELEMENTS.RED_NUMBER];
property.elNumberG = elColor[COLOR_ELEMENTS.GREEN_NUMBER];
property.elNumberB = elColor[COLOR_ELEMENTS.BLUE_NUMBER];
break;
}
case 'dropdown': {
@ -2724,85 +2737,6 @@ function showParentMaterialNameBox(number, elNumber, elString) {
}
}
function createProperty(propertyData, propertyElementID, propertyName, propertyID, elProperty) {
let property = {
data: propertyData,
elementID: propertyElementID,
name: propertyName,
elProperty: elProperty,
};
let propertyType = propertyData.type;
switch (propertyType) {
case 'string': {
property.elInput = createStringProperty(property, elProperty);
break;
}
case 'bool': {
property.elInput = createBoolProperty(property, elProperty);
break;
}
case 'number': {
property.elNumber = createNumberProperty(property, elProperty);
break;
}
case 'vec3': {
let elVec3 = createVec3Property(property, elProperty);
property.elNumberX = elVec3[VECTOR_ELEMENTS.X_NUMBER];
property.elNumberY = elVec3[VECTOR_ELEMENTS.Y_NUMBER];
property.elNumberZ = elVec3[VECTOR_ELEMENTS.Z_NUMBER];
break;
}
case 'vec2': {
let elVec2 = createVec2Property(property, elProperty);
property.elNumberX = elVec2[VECTOR_ELEMENTS.X_NUMBER];
property.elNumberY = elVec2[VECTOR_ELEMENTS.Y_NUMBER];
break;
}
case 'color': {
let elColor = createColorProperty(property, elProperty);
property.elColorPicker = elColor[COLOR_ELEMENTS.COLOR_PICKER];
property.elNumberR = elColor[COLOR_ELEMENTS.RED_NUMBER];
property.elNumberG = elColor[COLOR_ELEMENTS.GREEN_NUMBER];
property.elNumberB = elColor[COLOR_ELEMENTS.BLUE_NUMBER];
break;
}
case 'dropdown': {
property.elInput = createDropdownProperty(property, propertyID, elProperty);
break;
}
case 'textarea': {
property.elInput = createTextareaProperty(property, elProperty);
break;
}
case 'icon': {
property.elSpan = createIconProperty(property, elProperty);
break;
}
case 'texture': {
let elTexture = createTextureProperty(property, elProperty);
property.elImage = elTexture[TEXTURE_ELEMENTS.IMAGE];
property.elInput = elTexture[TEXTURE_ELEMENTS.TEXT_INPUT];
break;
}
case 'buttons': {
property.elProperty = createButtonsProperty(property, elProperty);
break;
}
case 'placeholder':
case 'sub-header': {
break;
}
default: {
console.log("EntityProperties - Unknown property type " +
propertyType + " set to property " + propertyID);
break;
}
}
return property;
}
function loaded() {
openEventBridge(function() {