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

View file

@ -1288,24 +1288,36 @@ const GROUPS = [
{ {
label: "Angular Damping", label: "Angular Damping",
type: "number", type: "number",
min: 0,
max: 1,
step: 0.01,
decimals: 4, decimals: 4,
propertyID: "angularDamping", propertyID: "angularDamping",
}, },
{ {
label: "Bounciness", label: "Bounciness",
type: "number", type: "number",
min: 0,
max: 1,
step: 0.01,
decimals: 4, decimals: 4,
propertyID: "restitution", propertyID: "restitution",
}, },
{ {
label: "Friction", label: "Friction",
type: "number", type: "number",
min: 0,
max: 10,
step: 0.1,
decimals: 4, decimals: 4,
propertyID: "friction", propertyID: "friction",
}, },
{ {
label: "Density", label: "Density",
type: "number", type: "number",
min: 100,
max: 10000,
step: 1,
decimals: 4, decimals: 4,
propertyID: "density", propertyID: "density",
}, },
@ -1314,6 +1326,7 @@ const GROUPS = [
type: "vec3", type: "vec3",
vec3Type: "xyz", vec3Type: "xyz",
subLabels: [ "x", "y", "z" ], subLabels: [ "x", "y", "z" ],
decimals: 4,
unit: "m/s<sup>2</sup>", unit: "m/s<sup>2</sup>",
propertyID: "gravity", propertyID: "gravity",
}, },
@ -2145,28 +2158,28 @@ function createProperty(propertyData, propertyElementID, propertyName, propertyI
break; break;
} }
case 'number': { case 'number': {
property.elInput = createNumberProperty(property, elProperty); property.elNumber = createNumberProperty(property, elProperty);
break; break;
} }
case 'vec3': { case 'vec3': {
let elVec3 = createVec3Property(property, elProperty); let elVec3 = createVec3Property(property, elProperty);
property.elInputX = elVec3[VECTOR_ELEMENTS.X_INPUT]; property.elNumberX = elVec3[VECTOR_ELEMENTS.X_NUMBER];
property.elInputY = elVec3[VECTOR_ELEMENTS.Y_INPUT]; property.elNumberY = elVec3[VECTOR_ELEMENTS.Y_NUMBER];
property.elInputZ = elVec3[VECTOR_ELEMENTS.Z_INPUT]; property.elNumberZ = elVec3[VECTOR_ELEMENTS.Z_NUMBER];
break; break;
} }
case 'vec2': { case 'vec2': {
let elVec2 = createVec2Property(property, elProperty); let elVec2 = createVec2Property(property, elProperty);
property.elInputX = elVec2[VECTOR_ELEMENTS.X_INPUT]; property.elNumberX = elVec2[VECTOR_ELEMENTS.X_NUMBER];
property.elInputY = elVec2[VECTOR_ELEMENTS.Y_INPUT]; property.elNumberY = elVec2[VECTOR_ELEMENTS.Y_NUMBER];
break; break;
} }
case 'color': { case 'color': {
let elColor = createColorProperty(property, elProperty); let elColor = createColorProperty(property, elProperty);
property.elColorPicker = elColor[COLOR_ELEMENTS.COLOR_PICKER]; property.elColorPicker = elColor[COLOR_ELEMENTS.COLOR_PICKER];
property.elInputR = elColor[COLOR_ELEMENTS.RED_INPUT]; property.elNumberR = elColor[COLOR_ELEMENTS.RED_NUMBER];
property.elInputG = elColor[COLOR_ELEMENTS.GREEN_INPUT]; property.elNumberG = elColor[COLOR_ELEMENTS.GREEN_NUMBER];
property.elInputB = elColor[COLOR_ELEMENTS.BLUE_INPUT]; property.elNumberB = elColor[COLOR_ELEMENTS.BLUE_NUMBER];
break; break;
} }
case 'dropdown': { 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() { function loaded() {
openEventBridge(function() { openEventBridge(function() {