Mirrors/overte-HifiExperiments
3
0
Fork 0
mirror of https://github.com/HifiExperiments/overte.git synced 2025-08-09 23:16:50 +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; box-shadow: 0 0 0 1px #00b4ef;
} }
input:disabled, textarea:disabled { input:disabled, textarea:disabled, .draggable-number.text[disabled="disabled"] {
background-color: #383838; background-color: #383838;
color: #afafaf; color: #afafaf;
} }
@ -1446,11 +1446,6 @@ input#property-scale-button-reset {
left: 250px; left: 250px;
} }
#property-userData-button-edit,
#property-materialData-button-clear {
margin: 6px 0 6px 0;
}
#property-userData-static, #property-userData-static,
#property-materialData-static { #property-materialData-static {
display: none; display: none;

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

@ -6,13 +6,14 @@
// Distributed under the Apache License, Version 2.0. // Distributed under the Apache License, Version 2.0.
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html // 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.min = min;
this.max = max; this.max = max;
this.step = step !== undefined ? step : 1; this.step = step !== undefined ? step : 1;
this.initialMouseEvent = null; this.decimals = decimals;
this.initialMouseEvent = null;
this.lastMouseEvent = null; this.lastMouseEvent = null;
this.valueChangeFunction = null; this.valueChangeFunction = null;
this.initialize(); this.initialize();
@ -20,64 +21,68 @@ function DraggableNumber(min, max, step) {
DraggableNumber.prototype = { DraggableNumber.prototype = {
mouseDown: function(event) { mouseDown: function(event) {
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.onMouseMove);
document.addEventListener("mouseup", this.onMouseUp); document.addEventListener("mouseup", this.onMouseUp);
} }
}, },
mouseMove: function(event) { mouseMove: function(event) {
if (this.lastMouseEvent) { if (this.lastMouseEvent) {
let dx = event.clientX - this.lastMouseEvent.clientX; let dx = event.clientX - this.lastMouseEvent.clientX;
let inputChanged = dx !== 0; let inputChanged = dx !== 0;
if (inputChanged) { if (inputChanged) {
while (dx !== 0) { while (dx !== 0) {
if (dx > 0) { if (dx > 0) {
this.stepUp(); this.stepUp();
--dx; --dx;
} else { } else {
this.stepDown(); this.stepDown();
++dx; ++dx;
} }
} }
if (this.valueChangeFunction) { if (this.valueChangeFunction) {
this.valueChangeFunction(); this.valueChangeFunction();
} }
} }
this.lastMouseEvent = event; this.lastMouseEvent = event;
} }
}, },
mouseUp: function(event) { mouseUp: function(event) {
if (this.initialMouseEvent) { if (this.initialMouseEvent) {
let dx = event.clientX - this.initialMouseEvent.clientX; let dx = event.clientX - this.initialMouseEvent.clientX;
if (dx <= DELTA_X_FOCUS_THRESHOLD) { if (dx <= DELTA_X_FOCUS_THRESHOLD) {
this.elInput.style.visibility = "visible"; this.elInput.style.visibility = "visible";
this.elText.style.visibility = "hidden"; this.elText.style.visibility = "hidden";
} }
this.initialMouseEvent = null; this.initialMouseEvent = null;
this.lastMouseEvent = null; this.lastMouseEvent = null;
document.removeEventListener("mousemove", this.onMouseMove); document.removeEventListener("mousemove", this.onMouseMove);
document.removeEventListener("mouseup", this.onMouseUp); 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) { setValueChangeFunction: function(valueChangeFunction) {
if (this.valueChangeFunction) { if (this.valueChangeFunction) {
@ -86,45 +91,45 @@ DraggableNumber.prototype = {
this.valueChangeFunction = valueChangeFunction.bind(this.elInput); this.valueChangeFunction = valueChangeFunction.bind(this.elInput);
this.elInput.addEventListener("change", this.valueChangeFunction); this.elInput.addEventListener("change", this.valueChangeFunction);
}, },
inputChange: function() { inputChange: function() {
this.setValue(this.elInput.value); this.setValue(this.elInput.value);
}, },
inputBlur: function() { inputBlur: function() {
this.elInput.style.visibility = "hidden"; this.elInput.style.visibility = "hidden";
this.elText.style.visibility = "visible"; this.elText.style.visibility = "visible";
}, },
initialize: function() { initialize: function() {
this.onMouseDown = this.mouseDown.bind(this); this.onMouseDown = this.mouseDown.bind(this);
this.onMouseMove = this.mouseMove.bind(this); this.onMouseMove = this.mouseMove.bind(this);
this.onMouseUp = this.mouseUp.bind(this); this.onMouseUp = this.mouseUp.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);
this.onInputBlur = this.inputBlur.bind(this); this.onInputBlur = this.inputBlur.bind(this);
this.elDiv = document.createElement('div'); this.elDiv = document.createElement('div');
this.elDiv.className = "draggable-number"; this.elDiv.className = "draggable-number";
this.elText = document.createElement('label'); this.elText = document.createElement('label');
this.elText.className = "draggable-number text"; this.elText.className = "draggable-number text";
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.elLeftArrow = document.createElement('span'); this.elLeftArrow = document.createElement('span');
this.elRightArrow = document.createElement('span'); this.elRightArrow = document.createElement('span');
this.elLeftArrow.className = 'draggable-number left-arrow'; this.elLeftArrow.className = 'draggable-number left-arrow';
this.elLeftArrow.innerHTML = 'D'; 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.className = 'draggable-number right-arrow';
this.elRightArrow.innerHTML = 'D'; this.elRightArrow.innerHTML = 'D';
this.elRightArrow.addEventListener("click", this.onStepUp); this.elRightArrow.addEventListener("click", this.onStepUp);
this.elInput = document.createElement('input'); this.elInput = document.createElement('input');
this.elInput.className = "draggable-number input"; this.elInput.className = "draggable-number input";
this.elInput.setAttribute("type", "number"); this.elInput.setAttribute("type", "number");
if (this.min !== undefined) { if (this.min !== undefined) {
this.elInput.setAttribute("min", this.min); this.elInput.setAttribute("min", this.min);
@ -135,13 +140,13 @@ DraggableNumber.prototype = {
if (this.step !== undefined) { if (this.step !== undefined) {
this.elInput.setAttribute("step", this.step); this.elInput.setAttribute("step", this.step);
} }
this.elInput.style.visibility = "hidden"; this.elInput.style.visibility = "hidden";
this.elInput.addEventListener("change", this.onInputChange); this.elInput.addEventListener("change", this.onInputChange);
this.elInput.addEventListener("blur", this.onInputBlur); this.elInput.addEventListener("blur", this.onInputBlur);
this.elText.appendChild(this.elLeftArrow); this.elText.appendChild(this.elLeftArrow);
this.elText.appendChild(this.elInput); this.elText.appendChild(this.elInput);
this.elText.appendChild(this.elRightArrow); 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() { 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"); enableChildren(document, ".colpick");
let elLocked = getPropertyInputElement("locked"); let elLocked = getPropertyInputElement("locked");
if (elLocked.checked === false) { if (elLocked.checked === false) {
removeStaticUserData(); removeStaticUserData();
removeStaticMaterialData(); removeStaticMaterialData();
@ -1461,13 +1462,14 @@ function enableProperties() {
} }
function disableProperties() { 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"); disableChildren(document, ".colpick");
for (let pickKey in colorPickers) { for (let pickKey in colorPickers) {
colorPickers[pickKey].colpickHide(); colorPickers[pickKey].colpickHide();
} }
let elLocked = getPropertyInputElement("locked"); let elLocked = getPropertyInputElement("locked");
if (elLocked.checked === true) { if (elLocked.checked === true) {
if ($('#property-userData-editor').css('display') === "block") { if ($('#property-userData-editor').css('display') === "block") {
showStaticUserData(); showStaticUserData();
@ -1797,10 +1799,12 @@ function createBoolProperty(property, elProperty) {
let subPropertyOf = propertyData.subPropertyOf; let subPropertyOf = propertyData.subPropertyOf;
if (subPropertyOf !== undefined) { if (subPropertyOf !== undefined) {
elInput.addEventListener('change', function() { elInput.addEventListener('change', function() {
updateCheckedSubProperty(subPropertyOf, selectedEntityProperties[subPropertyOf], elInput, propertyName, property.isParticleProperty); updateCheckedSubProperty(subPropertyOf, selectedEntityProperties[subPropertyOf],
elInput, propertyName, property.isParticleProperty);
}); });
} else { } else {
elInput.addEventListener('change', createEmitCheckedPropertyUpdateFunction(propertyName, propertyData.inverse, property.isParticleProperty)); elInput.addEventListener('change', createEmitCheckedPropertyUpdateFunction(propertyName, propertyData.inverse,
property.isParticleProperty));
} }
return elInput; return elInput;
@ -1813,14 +1817,16 @@ function createNumberProperty(property, elProperty) {
elProperty.className = "draggable-number"; 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; let defaultValue = propertyData.defaultValue;
if (defaultValue !== undefined) { if (defaultValue !== undefined) {
elDraggableNumber.elInput.value = defaultValue; elDraggableNumber.elInput.value = defaultValue;
} }
let valueChangeFunction = createEmitNumberPropertyUpdateFunction(propertyName, propertyData.multiplier, property.isParticleProperty); let valueChangeFunction = createEmitNumberPropertyUpdateFunction(propertyName, propertyData.multiplier,
property.isParticleProperty);
elDraggableNumber.setValueChangeFunction(valueChangeFunction); elDraggableNumber.setValueChangeFunction(valueChangeFunction);
elDraggableNumber.elInput.setAttribute("id", elementID); elDraggableNumber.elInput.setAttribute("id", elementID);
@ -1841,11 +1847,11 @@ function createVec3Property(property, elProperty) {
elProperty.className = propertyData.vec3Type + " fstuple"; elProperty.className = propertyData.vec3Type + " fstuple";
let elNumberX = createTupleNumberInput(elProperty, elementID, propertyData.subLabels[VECTOR_ELEMENTS.X_NUMBER], 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], 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], 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, let valueChangeFunction = createEmitVec3PropertyUpdateFunction(propertyName, elNumberX.elInput, elNumberY.elInput,
elNumberZ.elInput, propertyData.multiplier, elNumberZ.elInput, propertyData.multiplier,
@ -1874,9 +1880,9 @@ function createVec2Property(property, elProperty) {
elProperty.appendChild(elTuple); elProperty.appendChild(elTuple);
let elNumberX = createTupleNumberInput(elProperty, elementID, propertyData.subLabels[VECTOR_ELEMENTS.X_NUMBER], 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], 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, let valueChangeFunction = createEmitVec2PropertyUpdateFunction(propertyName, elNumberX.elInput, elNumberY.elInput,
propertyData.multiplier, property.isParticleProperty); propertyData.multiplier, property.isParticleProperty);
@ -2078,15 +2084,16 @@ function createButtonsProperty(property, elProperty, elLabel) {
return elProperty; 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 elementID = propertyElementID + "-" + subLabel.toLowerCase();
let elLabel = document.createElement('label'); let elLabel = document.createElement('label');
elLabel.className = "sublabel " + subLabel; elLabel.className = "sublabel " + subLabel;
elLabel.innerText = subLabel[0].toUpperCase() + subLabel.slice(1); elLabel.innerText = subLabel[0].toUpperCase() + subLabel.slice(1);
elLabel.setAttribute("for", elementID); 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.elInput.setAttribute("id", elementID);
elDraggableNumber.elDiv.className += " fstuple"; elDraggableNumber.elDiv.className += " fstuple";
elDraggableNumber.elText.insertBefore(elLabel, elDraggableNumber.elLeftArrow); elDraggableNumber.elText.insertBefore(elLabel, elDraggableNumber.elLeftArrow);
@ -3119,11 +3126,7 @@ function loaded() {
if (propertyData.round !== undefined) { if (propertyData.round !== undefined) {
value = Math.round(value.round) / propertyData.round; value = Math.round(value.round) / propertyData.round;
} }
if (propertyData.decimals !== undefined) { property.elNumber.setValue(value);
property.elNumber.setValue(value.toFixed(propertyData.decimals));
} else {
property.elNumber.setValue(value);
}
break; break;
} }
case 'vec3': case 'vec3':