From 818339823c64a65fd21a120a9c7da38a4d4da7d5 Mon Sep 17 00:00:00 2001
From: Ryan Huffman <ryanhuffman@gmail.com>
Date: Thu, 6 Dec 2018 14:50:16 -0800
Subject: [PATCH] Add new number type in Create
---
scripts/system/html/css/edit-style.css | 5 +
scripts/system/html/js/entityProperties.js | 159 +++++++++++++--------
2 files changed, 103 insertions(+), 61 deletions(-)
diff --git a/scripts/system/html/css/edit-style.css b/scripts/system/html/css/edit-style.css
index 13825119ce..5bfa5c0609 100644
--- a/scripts/system/html/css/edit-style.css
+++ b/scripts/system/html/css/edit-style.css
@@ -1697,3 +1697,8 @@ input.number-slider {
display: none;
cursor: pointer;
}
+
+input[type=number].hide-spinner::-webkit-inner-spin-button {
+ -webkit-appearance: none;
+ visibility: hidden;
+}
diff --git a/scripts/system/html/js/entityProperties.js b/scripts/system/html/js/entityProperties.js
index 84a1ab2a12..972c5f63be 100644
--- a/scripts/system/html/js/entityProperties.js
+++ b/scripts/system/html/js/entityProperties.js
@@ -75,7 +75,7 @@ const GROUPS = [
},
{
label: "Parent Joint Index",
- type: "number",
+ type: "number-draggable",
propertyID: "parentJointIndex",
},
{
@@ -135,7 +135,7 @@ const GROUPS = [
},
{
label: "Line Height",
- type: "number",
+ type: "number-draggable",
min: 0,
step: 0.005,
decimals: 4,
@@ -183,7 +183,7 @@ const GROUPS = [
},
{
label: "Light Intensity",
- type: "number",
+ type: "number-draggable",
min: 0,
max: 10,
step: 0.1,
@@ -193,7 +193,7 @@ const GROUPS = [
},
{
label: "Light Horizontal Angle",
- type: "number",
+ type: "number-draggable",
multiplier: DEGREES_TO_RADIANS,
decimals: 2,
unit: "deg",
@@ -202,7 +202,7 @@ const GROUPS = [
},
{
label: "Light Vertical Angle",
- type: "number",
+ type: "number-draggable",
multiplier: DEGREES_TO_RADIANS,
decimals: 2,
unit: "deg",
@@ -241,7 +241,7 @@ const GROUPS = [
},
{
label: "Ambient Intensity",
- type: "number",
+ type: "number-draggable",
min: 0,
max: 10,
step: 0.1,
@@ -270,7 +270,7 @@ const GROUPS = [
},
{
label: "Range",
- type: "number",
+ type: "number-draggable",
min: 5,
max: 10000,
step: 5,
@@ -287,7 +287,7 @@ const GROUPS = [
},
{
label: "Base",
- type: "number",
+ type: "number-draggable",
min: -1000,
max: 1000,
step: 10,
@@ -298,7 +298,7 @@ const GROUPS = [
},
{
label: "Ceiling",
- type: "number",
+ type: "number-draggable",
min: -1000,
max: 5000,
step: 10,
@@ -315,7 +315,7 @@ const GROUPS = [
},
{
label: "Background Blend",
- type: "number",
+ type: "number-draggable",
min: 0,
max: 1,
step: 0.01,
@@ -337,7 +337,7 @@ const GROUPS = [
},
{
label: "Glare Angle",
- type: "number",
+ type: "number-draggable",
min: 0,
max: 180,
step: 1,
@@ -353,7 +353,7 @@ const GROUPS = [
},
{
label: "Bloom Intensity",
- type: "number",
+ type: "number-draggable",
min: 0,
max: 1,
step: 0.01,
@@ -363,7 +363,7 @@ const GROUPS = [
},
{
label: "Bloom Threshold",
- type: "number",
+ type: "number-draggable",
min: 0,
max: 1,
step: 0.01,
@@ -373,7 +373,7 @@ const GROUPS = [
},
{
label: "Bloom Size",
- type: "number",
+ type: "number-draggable",
min: 0,
max: 2,
step: 0.01,
@@ -432,22 +432,22 @@ const GROUPS = [
},
{
label: "Animation Frame",
- type: "number",
+ type: "number-draggable",
propertyID: "animation.currentFrame",
},
{
label: "First Frame",
- type: "number",
+ type: "number-draggable",
propertyID: "animation.firstFrame",
},
{
label: "Last Frame",
- type: "number",
+ type: "number-draggable",
propertyID: "animation.lastFrame",
},
{
label: "Animation FPS",
- type: "number",
+ type: "number-draggable",
propertyID: "animation.fps",
},
{
@@ -486,7 +486,7 @@ const GROUPS = [
},
{
label: "Source Resolution",
- type: "number",
+ type: "number-draggable",
propertyID: "dpi",
},
]
@@ -503,7 +503,7 @@ const GROUPS = [
},
{
label: "Intensity",
- type: "number",
+ type: "number-draggable",
min: 0,
step: 0.1,
decimals: 1,
@@ -511,7 +511,7 @@ const GROUPS = [
},
{
label: "Fall-Off Radius",
- type: "number",
+ type: "number-draggable",
min: 0,
step: 0.1,
decimals: 1,
@@ -525,14 +525,14 @@ const GROUPS = [
},
{
label: "Spotlight Exponent",
- type: "number",
+ type: "number-draggable",
step: 0.01,
decimals: 2,
propertyID: "exponent",
},
{
label: "Spotlight Cut-Off",
- type: "number",
+ type: "number-draggable",
step: 0.01,
decimals: 2,
propertyID: "cutoff",
@@ -563,7 +563,7 @@ const GROUPS = [
},
{
label: "Submesh to Replace",
- type: "number",
+ type: "number-draggable",
min: 0,
step: 1,
propertyID: "submeshToReplace",
@@ -577,7 +577,7 @@ const GROUPS = [
},
{
label: "Priority",
- type: "number",
+ type: "number-draggable",
min: 0,
propertyID: "priority",
},
@@ -612,7 +612,7 @@ const GROUPS = [
},
{
label: "Material Rotation",
- type: "number",
+ type: "number-draggable",
step: 0.1,
decimals: 2,
unit: "deg",
@@ -636,7 +636,7 @@ const GROUPS = [
},
{
label: "Lifespan",
- type: "number",
+ type: "number-draggable",
unit: "s",
min: 0.01,
max: 10,
@@ -646,7 +646,7 @@ const GROUPS = [
},
{
label: "Max Particles",
- type: "number",
+ type: "number-draggable",
min: 1,
max: 10000,
step: 1,
@@ -667,7 +667,7 @@ const GROUPS = [
properties: [
{
label: "Emit Rate",
- type: "number",
+ type: "number-draggable",
min: 1,
max: 1000,
step: 1,
@@ -675,7 +675,7 @@ const GROUPS = [
},
{
label: "Emit Speed",
- type: "number",
+ type: "number-draggable",
min: 0,
max: 5,
step: 0.01,
@@ -684,7 +684,7 @@ const GROUPS = [
},
{
label: "Speed Spread",
- type: "number",
+ type: "number-draggable",
min: 0,
max: 5,
step: 0.01,
@@ -703,7 +703,7 @@ const GROUPS = [
},
{
label: "Emit Radius Start",
- type: "number",
+ type: "number-draggable",
min: 0,
max: 1,
step: 0.01,
@@ -738,7 +738,7 @@ const GROUPS = [
properties: [
{
label: "Start",
- type: "number",
+ type: "number-draggable",
min: 0,
max: 4,
step: 0.01,
@@ -748,7 +748,7 @@ const GROUPS = [
},
{
label: "Middle",
- type: "number",
+ type: "number-draggable",
min: 0,
max: 4,
step: 0.01,
@@ -757,7 +757,7 @@ const GROUPS = [
},
{
label: "Finish",
- type: "number",
+ type: "number-draggable",
min: 0,
max: 4,
step: 0.01,
@@ -769,7 +769,7 @@ const GROUPS = [
},
{
label: "Size Spread",
- type: "number",
+ type: "number-draggable",
min: 0,
max: 4,
step: 0.01,
@@ -825,7 +825,7 @@ const GROUPS = [
properties: [
{
label: "Start",
- type: "number",
+ type: "number-draggable",
min: 0,
max: 1,
step: 0.01,
@@ -835,7 +835,7 @@ const GROUPS = [
},
{
label: "Middle",
- type: "number",
+ type: "number-draggable",
min: 0,
max: 1,
step: 0.01,
@@ -844,7 +844,7 @@ const GROUPS = [
},
{
label: "Finish",
- type: "number",
+ type: "number-draggable",
min: 0,
max: 1,
step: 0.01,
@@ -856,7 +856,7 @@ const GROUPS = [
},
{
label: "Alpha Spread",
- type: "number",
+ type: "number-draggable",
min: 0,
max: 1,
step: 0.01,
@@ -901,7 +901,7 @@ const GROUPS = [
properties: [
{
label: "Start",
- type: "number",
+ type: "number-draggable",
min: -360,
max: 360,
step: 1,
@@ -913,7 +913,7 @@ const GROUPS = [
},
{
label: "Middle",
- type: "number",
+ type: "number-draggable",
min: -360,
max: 360,
step: 1,
@@ -924,7 +924,7 @@ const GROUPS = [
},
{
label: "Finish",
- type: "number",
+ type: "number-draggable",
min: -360,
max: 360,
step: 1,
@@ -938,7 +938,7 @@ const GROUPS = [
},
{
label: "Spin Spread",
- type: "number",
+ type: "number-draggable",
min: 0,
max: 360,
step: 1,
@@ -965,7 +965,7 @@ const GROUPS = [
properties: [
{
label: "Start",
- type: "number",
+ type: "number-draggable",
min: 0,
max: 180,
step: 1,
@@ -976,7 +976,7 @@ const GROUPS = [
},
{
label: "Finish",
- type: "number",
+ type: "number-draggable",
min: 0,
max: 180,
step: 1,
@@ -993,7 +993,7 @@ const GROUPS = [
properties: [
{
label: "Start",
- type: "number",
+ type: "number-draggable",
min: -180,
max: 180,
step: 1,
@@ -1004,7 +1004,7 @@ const GROUPS = [
},
{
label: "Finish",
- type: "number",
+ type: "number-draggable",
min: -180,
max: 180,
step: 1,
@@ -1089,7 +1089,7 @@ const GROUPS = [
},
{
label: "Scale",
- type: "number",
+ type: "number-draggable",
defaultValue: 100,
unit: "%",
buttons: [ { id: "rescale", label: "Rescale", className: "blue", onClick: rescaleDimensions },
@@ -1131,14 +1131,14 @@ const GROUPS = [
},
{
label: "Clone Lifetime",
- type: "number",
+ type: "number-draggable",
unit: "s",
propertyID: "cloneLifetime",
showPropertyRule: { "cloneable": "true" },
},
{
label: "Clone Limit",
- type: "number",
+ type: "number-draggable",
propertyID: "cloneLimit",
showPropertyRule: { "cloneable": "true" },
},
@@ -1197,7 +1197,7 @@ const GROUPS = [
},
{
label: "Lifetime",
- type: "string",
+ type: "number",
unit: "s",
propertyID: "lifetime",
},
@@ -1291,7 +1291,7 @@ const GROUPS = [
},
{
label: "Linear Damping",
- type: "number",
+ type: "number-draggable",
min: 0,
max: 1,
step: 0.01,
@@ -1310,7 +1310,7 @@ const GROUPS = [
},
{
label: "Angular Damping",
- type: "number",
+ type: "number-draggable",
min: 0,
max: 1,
step: 0.01,
@@ -1319,7 +1319,7 @@ const GROUPS = [
},
{
label: "Bounciness",
- type: "number",
+ type: "number-draggable",
min: 0,
max: 1,
step: 0.01,
@@ -1328,7 +1328,7 @@ const GROUPS = [
},
{
label: "Friction",
- type: "number",
+ type: "number-draggable",
min: 0,
max: 10,
step: 0.1,
@@ -1337,7 +1337,7 @@ const GROUPS = [
},
{
label: "Density",
- type: "number",
+ type: "number-draggable",
min: 100,
max: 10000,
step: 1,
@@ -1454,12 +1454,13 @@ function getPropertyInputElement(propertyID) {
let property = properties[propertyID];
switch (property.data.type) {
case 'string':
+ case 'number':
case 'bool':
case 'dropdown':
case 'textarea':
case 'texture':
return property.elInput;
- case 'number':
+ case 'number-draggable':
return property.elNumber.elInput;
case 'vec3':
case 'vec2':
@@ -1529,6 +1530,7 @@ function resetProperties() {
let propertyData = property.data;
switch (propertyData.type) {
+ case 'number':
case 'string': {
property.elInput.value = "";
break;
@@ -1537,7 +1539,7 @@ function resetProperties() {
property.elInput.checked = false;
break;
}
- case 'number': {
+ case 'number-draggable': {
if (propertyData.defaultValue !== undefined) {
property.elNumber.setValue(propertyData.defaultValue);
} else {
@@ -1873,7 +1875,33 @@ function createBoolProperty(property, elProperty) {
return elInput;
}
-function createNumberProperty(property, elProperty) {
+function createNumberProperty(property, elProperty) {
+ let elementID = property.elementID;
+ let propertyData = property.data;
+
+ elProperty.className = "text";
+
+ let elInput = createElementFromHTML(`
+ <input id="${elementID}"
+ class='hide-spinner'
+ type="number"
+ ${propertyData.placeholder ? 'placeholder="' + propertyData.placeholder + '"' : ''}
+ ${propertyData.readOnly ? 'readonly' : ''}></input>
+ `)
+
+
+ elInput.addEventListener('change', createEmitTextPropertyUpdateFunction(property));
+
+ elProperty.appendChild(elInput);
+
+ if (propertyData.buttons !== undefined) {
+ addButtons(elProperty, elementID, propertyData.buttons, false);
+ }
+
+ return elInput;
+}
+
+function createNumberSpinnerProperty(property, elProperty) {
let elementID = property.elementID;
let propertyData = property.data;
@@ -2217,7 +2245,11 @@ function createProperty(propertyData, propertyElementID, propertyName, propertyI
break;
}
case 'number': {
- property.elNumber = createNumberProperty(property, elProperty);
+ property.elInput = createNumberProperty(property, elProperty);
+ break;
+ }
+ case 'number-draggable': {
+ property.elNumber = createNumberSpinnerProperty(property, elProperty);
break;
}
case 'vec3': {
@@ -3098,6 +3130,7 @@ function loaded() {
let isPropertyNotNumber = false;
switch (propertyData.type) {
case 'number':
+ case 'number-draggable':
isPropertyNotNumber = isNaN(propertyValue) || propertyValue === null;
break;
case 'vec3':
@@ -3130,6 +3163,10 @@ function loaded() {
break;
}
case 'number': {
+ property.elInput.value = propertyValue;
+ break;
+ }
+ case 'number-draggable': {
let multiplier = propertyData.multiplier !== undefined ? propertyData.multiplier : 1;
let value = propertyValue / multiplier;
if (propertyData.round !== undefined) {