mirror of
https://github.com/overte-org/overte.git
synced 2025-08-08 18:16:45 +02: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) {
|
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');
|
||||||
|
|
|
@ -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() {
|
||||||
|
|
Loading…
Reference in a new issue