From 1aa048f4d61d1c8f506349eb446daa05f8f88312 Mon Sep 17 00:00:00 2001 From: David Back Date: Tue, 13 Nov 2018 17:56:31 -0800 Subject: [PATCH] style and decimal fixes --- scripts/system/html/css/edit-style.css | 7 +- scripts/system/html/js/draggableNumber.js | 163 +++++++++++---------- scripts/system/html/js/entityProperties.js | 43 +++--- 3 files changed, 108 insertions(+), 105 deletions(-) diff --git a/scripts/system/html/css/edit-style.css b/scripts/system/html/css/edit-style.css index 84f01e6205..3a291bf27b 100644 --- a/scripts/system/html/css/edit-style.css +++ b/scripts/system/html/css/edit-style.css @@ -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; diff --git a/scripts/system/html/js/draggableNumber.js b/scripts/system/html/js/draggableNumber.js index 326854bc92..7e5d9d524a 100644 --- a/scripts/system/html/js/draggableNumber.js +++ b/scripts/system/html/js/draggableNumber.js @@ -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); } }; diff --git a/scripts/system/html/js/entityProperties.js b/scripts/system/html/js/entityProperties.js index cf7360b927..a9233f0dce 100644 --- a/scripts/system/html/js/entityProperties.js +++ b/scripts/system/html/js/entityProperties.js @@ -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':