mirror of
https://thingvellir.net/git/overte
synced 2025-03-27 23:52:03 +01:00
add min/max/step for some properties, remove duplicate createProperty, improve switch between states
This commit is contained in:
parent
cff4c08e9f
commit
d8f5e0f708
2 changed files with 46 additions and 106 deletions
|
@ -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');
|
||||
|
|
|
@ -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() {
|
||||
|
|
Loading…
Reference in a new issue