Mirrors/overte
3
0
Fork 0
mirror of https://github.com/overte-org/overte.git synced 2025-04-20 03:44:02 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

style and decimal fixes

Browse source
This commit is contained in:
David Back 2018-11-13 17:56:31 -08:00
parent a349bac01c
commit 1aa048f4d6
3 changed files with 108 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
scripts/system/html/css/edit-style.css
View file

@ -252,7 +252,7 @@ input.search:focus {
box-shadow: 0 0 0 1px #00b4ef;
}
input:disabled, textarea:disabled {
input:disabled, textarea:disabled, .draggable-number.text[disabled="disabled"] {
background-color: #383838;
color: #afafaf;
}
@ -1446,11 +1446,6 @@ input#property-scale-button-reset {
left: 250px;
}
#property-userData-button-edit,
#property-materialData-button-clear {
margin: 6px 0 6px 0;
}
#property-userData-static,
#property-materialData-static {
display: none;

163
scripts/system/html/js/draggableNumber.js
View file

@ -6,13 +6,14 @@
// Distributed under the Apache License, Version 2.0.
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
const DELTA_X_FOCUS_THRESHOLD = 2;
const DELTA_X_FOCUS_THRESHOLD = 1;
function DraggableNumber(min, max, step) {
function DraggableNumber(min, max, step, decimals) {
this.min = min;
this.max = max;
this.step = step !== undefined ? step : 1;
this.initialMouseEvent = null;
this.decimals = decimals;
this.initialMouseEvent = null;
this.lastMouseEvent = null;
this.valueChangeFunction = null;
this.initialize();
@ -20,64 +21,68 @@ function DraggableNumber(min, max, step) {
DraggableNumber.prototype = {
mouseDown: function(event) {
if (event.target === this.elText) {
this.initialMouseEvent = event;
this.lastMouseEvent = event;
document.addEventListener("mousemove", this.onMouseMove);
document.addEventListener("mouseup", this.onMouseUp);
}
if (event.target === this.elText) {
this.initialMouseEvent = event;
this.lastMouseEvent = event;
document.addEventListener("mousemove", this.onMouseMove);
document.addEventListener("mouseup", this.onMouseUp);
}
},
mouseMove: function(event) {
if (this.lastMouseEvent) {
let dx = event.clientX - this.lastMouseEvent.clientX;
let inputChanged = dx !== 0;
if (inputChanged) {
while (dx !== 0) {
if (dx > 0) {
this.stepUp();
--dx;
} else {
this.stepDown();
++dx;
}
}
if (this.valueChangeFunction) {
this.valueChangeFunction();
}
}
let inputChanged = dx !== 0;
if (inputChanged) {
while (dx !== 0) {
if (dx > 0) {
this.stepUp();
--dx;
} else {
this.stepDown();
++dx;
}
}
if (this.valueChangeFunction) {
this.valueChangeFunction();
}
}
this.lastMouseEvent = event;
}
},
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);
}
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);
}
},
stepUp: function() {
this.elInput.stepUp();
this.inputChange();
},
stepDown: function() {
this.elInput.stepDown();
this.inputChange();
},
setValue: function(newValue) {
if (newValue !== "" && this.decimals !== undefined) {
this.elInput.value = parseFloat(newValue).toFixed(this.decimals);
} else {
this.elInput.value = newValue;
}
this.elText.firstChild.data = this.elInput.value;
},
stepUp: function() {
this.elInput.stepUp();
this.inputChange();
},
stepDown: function() {
this.elInput.stepDown();
this.inputChange();
},
setValue: function(newValue) {
this.elInput.value = newValue;
this.elText.firstChild.data = newValue;
},
setValueChangeFunction: function(valueChangeFunction) {
if (this.valueChangeFunction) {
@ -86,45 +91,45 @@ DraggableNumber.prototype = {
this.valueChangeFunction = valueChangeFunction.bind(this.elInput);
this.elInput.addEventListener("change", this.valueChangeFunction);
},
inputChange: function() {
this.setValue(this.elInput.value);
},
inputBlur: function() {
this.elInput.style.visibility = "hidden";
this.elText.style.visibility = "visible";
},
inputChange: function() {
this.setValue(this.elInput.value);
},
inputBlur: function() {
this.elInput.style.visibility = "hidden";
this.elText.style.visibility = "visible";
},
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.onStepUp = this.stepUp.bind(this);
this.onStepDown = this.stepDown.bind(this);
this.onInputChange = this.inputChange.bind(this);
this.onInputBlur = this.inputBlur.bind(this);
this.onStepUp = this.stepUp.bind(this);
this.onStepDown = this.stepDown.bind(this);
this.onInputChange = this.inputChange.bind(this);
this.onInputBlur = this.inputBlur.bind(this);
this.elDiv = document.createElement('div');
this.elDiv.className = "draggable-number";
this.elText = document.createElement('label');
this.elText.className = "draggable-number text";
this.elText.innerText = " ";
this.elText.style.visibility = "visible";
this.elText.addEventListener("mousedown", this.onMouseDown);
this.elLeftArrow = document.createElement('span');
this.elText = document.createElement('label');
this.elText.className = "draggable-number text";
this.elText.innerText = " ";
this.elText.style.visibility = "visible";
this.elText.addEventListener("mousedown", this.onMouseDown);
this.elLeftArrow = document.createElement('span');
this.elRightArrow = document.createElement('span');
this.elLeftArrow.className = 'draggable-number left-arrow';
this.elLeftArrow.innerHTML = 'D';
this.elLeftArrow.addEventListener("click", this.onStepDown);
this.elLeftArrow.addEventListener("click", this.onStepDown);
this.elRightArrow.className = 'draggable-number right-arrow';
this.elRightArrow.innerHTML = 'D';
this.elRightArrow.addEventListener("click", this.onStepUp);
this.elRightArrow.addEventListener("click", this.onStepUp);
this.elInput = document.createElement('input');
this.elInput.className = "draggable-number input";
this.elInput.className = "draggable-number input";
this.elInput.setAttribute("type", "number");
if (this.min !== undefined) {
this.elInput.setAttribute("min", this.min);
@ -135,13 +140,13 @@ DraggableNumber.prototype = {
if (this.step !== undefined) {
this.elInput.setAttribute("step", this.step);
}
this.elInput.style.visibility = "hidden";
this.elInput.addEventListener("change", this.onInputChange);
this.elInput.addEventListener("blur", this.onInputBlur);
this.elInput.style.visibility = "hidden";
this.elInput.addEventListener("change", this.onInputChange);
this.elInput.addEventListener("blur", this.onInputBlur);
this.elText.appendChild(this.elLeftArrow);
this.elText.appendChild(this.elInput);
this.elText.appendChild(this.elRightArrow);
this.elDiv.appendChild(this.elText);
this.elDiv.appendChild(this.elText);
}
};

43
scripts/system/html/js/entityProperties.js
View file

@ -1450,10 +1450,11 @@ function disableChildren(el, selector) {
}
function enableProperties() {
enableChildren(document.getElementById("properties-list"), "input, textarea, checkbox, .dropdown dl, .color-picker");
enableChildren(document.getElementById("properties-list"),
"input, textarea, checkbox, .dropdown dl, .color-picker , .draggable-number.text");
enableChildren(document, ".colpick");
let elLocked = getPropertyInputElement("locked");
if (elLocked.checked === false) {
removeStaticUserData();
removeStaticMaterialData();
@ -1461,13 +1462,14 @@ function enableProperties() {
}
function disableProperties() {
disableChildren(document.getElementById("properties-list"), "input, textarea, checkbox, .dropdown dl, .color-picker");
disableChildren(document.getElementById("properties-list"),
"input, textarea, checkbox, .dropdown dl, .color-picker, .draggable-number.text");
disableChildren(document, ".colpick");
for (let pickKey in colorPickers) {
colorPickers[pickKey].colpickHide();
}
let elLocked = getPropertyInputElement("locked");
if (elLocked.checked === true) {
if ($('#property-userData-editor').css('display') === "block") {
showStaticUserData();
@ -1797,10 +1799,12 @@ function createBoolProperty(property, elProperty) {
let subPropertyOf = propertyData.subPropertyOf;
if (subPropertyOf !== undefined) {
elInput.addEventListener('change', function() {
updateCheckedSubProperty(subPropertyOf, selectedEntityProperties[subPropertyOf], elInput, propertyName, property.isParticleProperty);
updateCheckedSubProperty(subPropertyOf, selectedEntityProperties[subPropertyOf],
elInput, propertyName, property.isParticleProperty);
});
} else {
elInput.addEventListener('change', createEmitCheckedPropertyUpdateFunction(propertyName, propertyData.inverse, property.isParticleProperty));
elInput.addEventListener('change', createEmitCheckedPropertyUpdateFunction(propertyName, propertyData.inverse,
property.isParticleProperty));
}
return elInput;
@ -1813,14 +1817,16 @@ function createNumberProperty(property, elProperty) {
elProperty.className = "draggable-number";
let elDraggableNumber = new DraggableNumber(propertyData.min, propertyData.max, propertyData.step);
let elDraggableNumber = new DraggableNumber(propertyData.min, propertyData.max,
propertyData.step, propertyData.decimals);
let defaultValue = propertyData.defaultValue;
if (defaultValue !== undefined) {
elDraggableNumber.elInput.value = defaultValue;
}
let valueChangeFunction = createEmitNumberPropertyUpdateFunction(propertyName, propertyData.multiplier, property.isParticleProperty);
let valueChangeFunction = createEmitNumberPropertyUpdateFunction(propertyName, propertyData.multiplier,
property.isParticleProperty);
elDraggableNumber.setValueChangeFunction(valueChangeFunction);
elDraggableNumber.elInput.setAttribute("id", elementID);
@ -1841,11 +1847,11 @@ function createVec3Property(property, elProperty) {
elProperty.className = propertyData.vec3Type + " fstuple";
let elNumberX = createTupleNumberInput(elProperty, elementID, propertyData.subLabels[VECTOR_ELEMENTS.X_NUMBER],
propertyData.min, propertyData.max, propertyData.step);
propertyData.min, propertyData.max, propertyData.step, propertyData.decimals);
let elNumberY = createTupleNumberInput(elProperty, elementID, propertyData.subLabels[VECTOR_ELEMENTS.Y_NUMBER],
propertyData.min, propertyData.max, propertyData.step);
propertyData.min, propertyData.max, propertyData.step, propertyData.decimals);
let elNumberZ = createTupleNumberInput(elProperty, elementID, propertyData.subLabels[VECTOR_ELEMENTS.Z_NUMBER],
propertyData.min, propertyData.max, propertyData.step);
propertyData.min, propertyData.max, propertyData.step, propertyData.decimals);
let valueChangeFunction = createEmitVec3PropertyUpdateFunction(propertyName, elNumberX.elInput, elNumberY.elInput,
elNumberZ.elInput, propertyData.multiplier,
@ -1874,9 +1880,9 @@ function createVec2Property(property, elProperty) {
elProperty.appendChild(elTuple);
let elNumberX = createTupleNumberInput(elProperty, elementID, propertyData.subLabels[VECTOR_ELEMENTS.X_NUMBER],
propertyData.min, propertyData.max, propertyData.step);
propertyData.min, propertyData.max, propertyData.step, propertyData.decimals);
let elNumberY = createTupleNumberInput(elProperty, elementID, propertyData.subLabels[VECTOR_ELEMENTS.Y_NUMBER],
propertyData.min, propertyData.max, propertyData.step);
propertyData.min, propertyData.max, propertyData.step, propertyData.decimals);
let valueChangeFunction = createEmitVec2PropertyUpdateFunction(propertyName, elNumberX.elInput, elNumberY.elInput,
propertyData.multiplier, property.isParticleProperty);
@ -2078,15 +2084,16 @@ function createButtonsProperty(property, elProperty, elLabel) {
return elProperty;
}
function createTupleNumberInput(elTuple, propertyElementID, subLabel, min, max, step) {
function createTupleNumberInput(elTuple, propertyElementID, subLabel, min, max, step, decimals) {
let elementID = propertyElementID + "-" + subLabel.toLowerCase();
let elLabel = document.createElement('label');
elLabel.className = "sublabel " + subLabel;
elLabel.innerText = subLabel[0].toUpperCase() + subLabel.slice(1);
elLabel.setAttribute("for", elementID);
elLabel.style.visibility = "visible";
let elDraggableNumber = new DraggableNumber(min, max, step);
let elDraggableNumber = new DraggableNumber(min, max, step, decimals);
elDraggableNumber.elInput.setAttribute("id", elementID);
elDraggableNumber.elDiv.className += " fstuple";
elDraggableNumber.elText.insertBefore(elLabel, elDraggableNumber.elLeftArrow);
@ -3119,11 +3126,7 @@ function loaded() {
if (propertyData.round !== undefined) {
value = Math.round(value.round) / propertyData.round;
}
if (propertyData.decimals !== undefined) {
property.elNumber.setValue(value.toFixed(propertyData.decimals));
} else {
property.elNumber.setValue(value);
}
property.elNumber.setValue(value);
break;
}
case 'vec3':