Merge pull request #14382 from dback2/newPropertySliders

Entity properties - new draggable numbers

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;
 }
@@ -889,6 +889,9 @@ div.refresh input[type="button"] {
     border-color: #afafaf;
 }
 
+.colpick {
+    z-index: 3;
+}
 .colpick[disabled="disabled"] {
     display: none !important;
 }
@@ -911,6 +914,79 @@ div.refresh input[type="button"] {
     clear: both;
 }
 
+.draggable-number {
+    position: relative;
+}
+.draggable-number div {
+    height: 28px;
+    width: 92px;
+}
+.draggable-number.text {
+    display: inline-block;
+    color: #afafaf;
+    background-color: #252525;
+    font-family: FiraSans-SemiBold;
+    font-size: 15px;   
+    margin: 0;
+    padding: 0 16px;
+    height: 28px;
+    width: 100%;
+    line-height: 2;
+}
+.draggable-number.text:hover {
+    cursor: ew-resize;
+}
+.draggable-number span {
+    position: absolute;
+    display: inline-block;
+    font-family: HiFi-Glyphs;
+    font-size: 20px;
+    z-index: 2;
+}
+.draggable-number span:hover {
+    cursor: default;
+}
+.draggable-number.left-arrow {
+    top: -5px;
+    right: 106px;
+    transform: rotate(180deg);
+}
+.draggable-number.right-arrow {
+    top: -5px;
+    left: 106px;
+}
+.draggable-number input[type=number] {
+    position: absolute;
+    right: 0;
+    width: 100%;
+}
+.draggable-number input[type=button] {
+    position: absolute;
+    top: 0;
+}
+.draggable-number input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    visibility: hidden;
+}
+.draggable-number.fstuple {
+    height: 28px;
+    width: 124px;
+    left: 12px;
+}
+.draggable-number.fstuple + .draggable-number.fstuple {
+    padding-left: 28px;
+}
+.draggable-number.fstuple input {
+    right: -10px;
+}
+.draggable-number.fstuple .sublabel {
+    position: absolute;
+    top: 0;
+    left: -16px;
+    font-family: FiraSans-SemiBold;
+    font-size: 15px;
+}
+
 .row .property {
     width: auto;
     display: inline-block;
@@ -927,10 +1003,10 @@ div.refresh input[type="button"] {
 .property.texture {
     display: block;
 }
-.property.texture input{
+.property.texture input {
     margin: 0.4rem 0;
 }
-.texture-image img{
+.texture-image img {
     padding: 0;
     margin: 0;
     width: 100%;
@@ -1362,17 +1438,12 @@ input[type=button]#export {
 }
 
 input#property-scale-button-rescale {
-    margin-top: 6px;
     min-width: 50px;
+    left: 152px;
 }
 input#property-scale-button-reset {
-    margin-top: 6px;
     margin-right: 0;
-}
+    left: 250px;
-
-#property-userData-button-edit,
-#property-materialData-button-clear {
-    margin: 6px 0 6px 0;
 }
 
 #property-userData-static,
@@ -1557,6 +1628,10 @@ input.number-slider {
     flex-flow: column;
 }
 
+.flex-column + .flex-column {
+    padding-left: 50px;
+}
+
 .flex-center {
     align-items: center;
 }

scripts/system/html/entityProperties.html

@@ -22,6 +22,7 @@
     <script type="text/javascript" src="js/spinButtons.js"></script>
     <script type="text/javascript" src="js/underscore-min.js"></script>
     <script type="text/javascript" src="js/createAppTooltip.js"></script>
+    <script type="text/javascript" src="js/draggableNumber.js"></script>
     <script type="text/javascript" src="js/entityProperties.js"></script>
     <script src="js/jsoneditor.min.js"></script>
 </head>

scripts/system/html/js/draggableNumber.js

@@ -0,0 +1,158 @@
+//  draggableNumber.js
+//
+//  Created by David Back on 7 Nov 2018
+//  Copyright 2018 High Fidelity, Inc.
+//
+//  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 = 1;
+
+function DraggableNumber(min, max, step, decimals) {
+    this.min = min;
+    this.max = max;
+    this.step = step !== undefined ? step : 1;
+    this.decimals = decimals;
+    this.initialMouseEvent = null;
+    this.lastMouseEvent = null;
+    this.valueChangeFunction = null;
+    this.initialize();
+}
+
+DraggableNumber.prototype = {
+    mouseDown: function(event) {
+        if (event.target === this.elText) {
+            this.initialMouseEvent = event;
+            this.lastMouseEvent = event;
+            document.addEventListener("mousemove", this.onDocumentMouseMove);
+            document.addEventListener("mouseup", this.onDocumentMouseUp);
+        }
+    },
+    
+    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) {
+            let initialValue = this.elInput.value;
+            let dx = event.clientX - this.lastMouseEvent.clientX;
+            let changeValue = dx !== 0;
+            if (changeValue) {
+                while (dx !== 0) {
+                    if (dx > 0) {
+                        this.stepUp();
+                        --dx;
+                    } else {
+                        this.stepDown();
+                        ++dx;
+                    }
+                }
+                if (this.valueChangeFunction) {
+                    this.valueChangeFunction();
+                }
+            }
+            this.lastMouseEvent = event;
+        }
+    },
+    
+    documentMouseUp: function(event) {
+        this.lastMouseEvent = null;
+        document.removeEventListener("mousemove", this.onDocumentMouseMove);
+        document.removeEventListener("mouseup", this.onDocumentMouseUp);
+    },
+    
+    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;
+    },
+
+    setValueChangeFunction: function(valueChangeFunction) {
+        if (this.valueChangeFunction) {
+            this.elInput.removeEventListener("change", this.valueChangeFunction);
+        }
+        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";
+    },
+    
+    initialize: function() {
+        this.onMouseDown = this.mouseDown.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.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.elText.addEventListener("mouseup", this.onMouseUp);
+        
+        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.elRightArrow.className = 'draggable-number right-arrow';
+        this.elRightArrow.innerHTML = 'D';
+        this.elRightArrow.addEventListener("click", this.onStepUp);
+        
+        this.elInput = document.createElement('input');
+        this.elInput.className = "draggable-number input";
+        this.elInput.setAttribute("type", "number");
+        if (this.min !== undefined) {
+            this.elInput.setAttribute("min", this.min);
+        }
+        if (this.max !== undefined) {
+            this.elInput.setAttribute("max", this.max);
+        }
+        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.elText.appendChild(this.elLeftArrow);
+        this.elText.appendChild(this.elInput);
+        this.elText.appendChild(this.elRightArrow);
+        this.elDiv.appendChild(this.elText);
+    }
+};

scripts/system/html/js/entityProperties.js

@@ -260,7 +260,7 @@ const GROUPS = [
                 buttons: [ { id: "copy", label: "Copy from Skybox", 
                              className: "black", onClick: copySkyboxURLToAmbientURL } ],
                 propertyID: "copyURLToAmbient",
-                showPropertyRule: { "skyboxMode": "enabled" },
+                showPropertyRule: { "ambientLightMode": "enabled" },
             },
             {
                 label: "Haze",
@@ -315,7 +315,7 @@ const GROUPS = [
             },
             {
                 label: "Background Blend",
-                type: "slider",
+                type: "number",
                 min: 0,
                 max: 1,
                 step: 0.01,
@@ -337,7 +337,7 @@ const GROUPS = [
             },
             {
                 label: "Glare Angle",
-                type: "slider",
+                type: "number",
                 min: 0,
                 max: 180,
                 step: 1,
@@ -353,7 +353,7 @@ const GROUPS = [
             },
             {
                 label: "Bloom Intensity",
-                type: "slider",
+                type: "number",
                 min: 0,
                 max: 1,
                 step: 0.01,
@@ -363,7 +363,7 @@ const GROUPS = [
             },
             {
                 label: "Bloom Threshold",
-                type: "slider",
+                type: "number",
                 min: 0,
                 max: 1,
                 step: 0.01,
@@ -373,7 +373,7 @@ const GROUPS = [
             },
             {
                 label: "Bloom Size",
-                type: "slider",
+                type: "number",
                 min: 0,
                 max: 2,
                 step: 0.01,
@@ -621,7 +621,7 @@ const GROUPS = [
             },
             {
                 label: "Lifespan",
-                type: "slider",
+                type: "number",
                 unit: "s",
                 min: 0.01,
                 max: 10,
@@ -631,7 +631,7 @@ const GROUPS = [
             },
             {
                 label: "Max Particles",
-                type: "slider",
+                type: "number",
                 min: 1,
                 max: 10000,
                 step: 1,
@@ -652,7 +652,7 @@ const GROUPS = [
         properties: [
             {
                 label: "Emit Rate",
-                type: "slider",
+                type: "number",
                 min: 1,
                 max: 1000,
                 step: 1,
@@ -660,7 +660,7 @@ const GROUPS = [
             },
             {
                 label: "Emit Speed",
-                type: "slider",
+                type: "number",
                 min: 0,
                 max: 5,
                 step: 0.01,
@@ -669,7 +669,7 @@ const GROUPS = [
             },
             {
                 label: "Speed Spread",
-                type: "slider",
+                type: "number",
                 min: 0,
                 max: 5,
                 step: 0.01,
@@ -688,7 +688,7 @@ const GROUPS = [
             },
             {
                 label: "Emit Radius Start",
-                type: "slider",
+                type: "number",
                 min: 0,
                 max: 1,
                 step: 0.01,
@@ -723,7 +723,7 @@ const GROUPS = [
                 properties: [
                     {
                         label: "Start",
-                        type: "slider",
+                        type: "number",
                         min: 0,
                         max: 4,
                         step: 0.01,
@@ -733,7 +733,7 @@ const GROUPS = [
                     },
                     {
                         label: "Middle",
-                        type: "slider",
+                        type: "number",
                         min: 0,
                         max: 4,
                         step: 0.01,
@@ -742,7 +742,7 @@ const GROUPS = [
                     },
                     {
                         label: "Finish",
-                        type: "slider",
+                        type: "number",
                         min: 0,
                         max: 4,
                         step: 0.01,
@@ -754,7 +754,7 @@ const GROUPS = [
             },
             {
                 label: "Size Spread",
-                type: "slider",
+                type: "number",
                 min: 0,
                 max: 4,
                 step: 0.01,
@@ -810,7 +810,7 @@ const GROUPS = [
                 properties: [
                     {
                         label: "Start",
-                        type: "slider",
+                        type: "number",
                         min: 0,
                         max: 1,
                         step: 0.01,
@@ -820,7 +820,7 @@ const GROUPS = [
                     },
                     {
                         label: "Middle",
-                        type: "slider",
+                        type: "number",
                         min: 0,
                         max: 1,
                         step: 0.01,
@@ -829,7 +829,7 @@ const GROUPS = [
                     },
                     {
                         label: "Finish",
-                        type: "slider",
+                        type: "number",
                         min: 0,
                         max: 1,
                         step: 0.01,
@@ -841,7 +841,7 @@ const GROUPS = [
             },
             {
                 label: "Alpha Spread",
-                type: "slider",
+                type: "number",
                 min: 0,
                 max: 1,
                 step: 0.01,
@@ -886,7 +886,7 @@ const GROUPS = [
                 properties: [
                     {
                         label: "Start",
-                        type: "slider",
+                        type: "number",
                         min: -360,
                         max: 360,
                         step: 1,
@@ -898,7 +898,7 @@ const GROUPS = [
                     },
                     {
                         label: "Middle",
-                        type: "slider",
+                        type: "number",
                         min: -360,
                         max: 360,
                         step: 1,
@@ -909,7 +909,7 @@ const GROUPS = [
                     },
                     {
                         label: "Finish",
-                        type: "slider",
+                        type: "number",
                         min: -360,
                         max: 360,
                         step: 1,
@@ -923,7 +923,7 @@ const GROUPS = [
             },
             {
                 label: "Spin Spread",
-                type: "slider",
+                type: "number",
                 min: 0,
                 max: 360,
                 step: 1,
@@ -950,7 +950,7 @@ const GROUPS = [
                 properties: [
                     {
                         label: "Start",
-                        type: "slider",
+                        type: "number",
                         min: -180,
                         max: 0,
                         step: 1,
@@ -961,7 +961,7 @@ const GROUPS = [
                     },
                     {
                         label: "Finish",
-                        type: "slider",
+                        type: "number",
                         min: 0,
                         max: 180,
                         step: 1,
@@ -978,7 +978,7 @@ const GROUPS = [
                 properties: [
                     {
                         label: "Start",
-                        type: "slider",
+                        type: "number",
                         min: 0,
                         max: 180,
                         step: 1,
@@ -989,7 +989,7 @@ const GROUPS = [
                     },
                     {
                         label: "Finish",
-                        type: "slider",
+                        type: "number",
                         min: 0,
                         max: 180,
                         step: 1,
@@ -1264,6 +1264,7 @@ const GROUPS = [
                 label: "Linear Velocity",
                 type: "vec3",
                 vec3Type: "xyz",
+                step: 0.1,
                 decimals: 4,
                 subLabels: [ "x", "y", "z" ],
                 unit: "m/s",
@@ -1272,6 +1273,9 @@ const GROUPS = [
             {
                 label: "Linear Damping",
                 type: "number",
+                min: 0,
+                max: 1,
+                step: 0.01,
                 decimals: 2,
                 propertyID: "damping",
             },
@@ -1288,24 +1292,36 @@ const GROUPS = [
             {
                 label: "Angular Damping",
                 type: "number",
+                min: 0,
+                max: 1,
+                step: 0.01,
                 decimals: 4,
                 propertyID: "angularDamping",
             },
             {
                 label: "Bounciness",
                 type: "number",
+                min: 0,
+                max: 1,
+                step: 0.01,
                 decimals: 4,
                 propertyID: "restitution",
             },
             {
                 label: "Friction",
                 type: "number",
+                min: 0,
+                max: 10,
+                step: 0.1,
                 decimals: 4,
                 propertyID: "friction",
             },
             {
                 label: "Density",
                 type: "number",
+                min: 100,
+                max: 10000,
+                step: 1,
                 decimals: 4,
                 propertyID: "density",
             },
@@ -1314,6 +1330,8 @@ const GROUPS = [
                 type: "vec3",
                 vec3Type: "xyz",
                 subLabels: [ "x", "y", "z" ],
+                step: 0.1,
+                decimals: 4,
                 unit: "m/s<sup>2</sup>",
                 propertyID: "gravity",
             },
@@ -1374,26 +1392,16 @@ const PROPERTY_NAME_DIVISION = {
 };
 
 const VECTOR_ELEMENTS = {
-    X_INPUT: 0,
+    X_NUMBER: 0,
-    Y_INPUT: 1,
+    Y_NUMBER: 1,
-    Z_INPUT: 2,
+    Z_NUMBER: 2,
 };
 
 const COLOR_ELEMENTS = {
     COLOR_PICKER: 0,
-    RED_INPUT: 1,
+    RED_NUMBER: 1,
-    GREEN_INPUT: 2,
+    GREEN_NUMBER: 2,
-    BLUE_INPUT: 3,
+    BLUE_NUMBER: 3,
-};
-
-const SLIDER_ELEMENTS = {
-    SLIDER: 0,
-    NUMBER_INPUT: 1,
-};
-
-const ICON_ELEMENTS = {
-    ICON: 0,
-    LABEL: 1,
 };
 
 const TEXTURE_ELEMENTS = {
@@ -1427,17 +1435,17 @@ function getPropertyInputElement(propertyID) {
     switch (property.data.type) {
         case 'string':
         case 'bool':
-        case 'number':
-        case 'slider':
         case 'dropdown':
         case 'textarea':
         case 'texture':
             return property.elInput;
+        case 'number':
+            return property.elNumber.elInput;
         case 'vec3': 
         case 'vec2':
-            return { x: property.elInputX, y: property.elInputY, z: property.elInputZ };
+            return { x: property.elNumberX.elInput, y: property.elNumberY.elInput, z: property.elNumberZ.elInput };
         case 'color':
-            return { red: property.elInputR, green: property.elInputG, blue: property.elInputB };
+            return { red: property.elNumberR.elInput, green: property.elNumberG.elInput, blue: property.elNumberB.elInput };
         case 'icon':
             return property.elLabel;
         default:
@@ -1460,10 +1468,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();
@@ -1471,13 +1480,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();
@@ -1507,32 +1517,28 @@ function resetProperties() {
                 property.elInput.checked = false;
                 break;
             }
-            case 'number':
+            case 'number': {
-            case 'slider': {
                 if (propertyData.defaultValue !== undefined) {
-                    property.elInput.value = propertyData.defaultValue;
+                    property.elNumber.setValue(propertyData.defaultValue);
                 } else { 
-                    property.elInput.value = "";
+                    property.elNumber.setValue("");
-                }
-                if (property.elSlider !== undefined) {
-                    property.elSlider.value = property.elInput.value;   
                 }
                 break;
             }
             case 'vec3': 
             case 'vec2': {
-                property.elInputX.value = "";
+                property.elNumberX.setValue("");
-                property.elInputY.value = "";
+                property.elNumberY.setValue("");
-                if (property.elInputZ !== undefined) {
+                if (property.elNumberZ !== undefined) {
-                    property.elInputZ.value = "";
+                    property.elNumberZ.setValue("");
                 }
                 break;
             }
             case 'color': {
                 property.elColorPicker.style.backgroundColor = "rgb(" + 0 + "," + 0 + "," + 0 + ")";
-                property.elInputR.value = "";
+                property.elNumberR.setValue("");
-                property.elInputG.value = "";
+                property.elNumberG.setValue("");
-                property.elInputB.value = "";
+                property.elNumberB.setValue("");
                 break;
             }
             case 'dropdown': {
@@ -1611,6 +1617,20 @@ function getPropertyValue(originalPropertyName) {
     return propertyValue;
 }
 
+function updateVisibleSpaceModeProperties() {
+    for (let propertyID in properties) {
+        if (properties.hasOwnProperty(propertyID)) {
+            let property = properties[propertyID];
+            let propertySpaceMode = property.spaceMode;
+            if (propertySpaceMode !== PROPERTY_SPACE_MODE.ALL) {
+                showPropertyElement(propertyID, propertySpaceMode === currentSpaceMode);
+            } else {
+                showPropertyElement(propertyID, true);
+            }
+        }
+    }
+}
+
 
 /**
  * PROPERTY UPDATE FUNCTIONS
@@ -1797,10 +1817,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;
@@ -1811,98 +1833,28 @@ function createNumberProperty(property, elProperty) {
     let elementID = property.elementID;
     let propertyData = property.data;
     
-    elProperty.className = "number";
+    elProperty.className = "draggable-number";
+
+    let elDraggableNumber = new DraggableNumber(propertyData.min, propertyData.max, 
+                                                propertyData.step, propertyData.decimals);
     
-    let elInput = document.createElement('input');
+    let defaultValue = propertyData.defaultValue;   
-    elInput.setAttribute("id", elementID);
+    if (defaultValue !== undefined) {   
-    elInput.setAttribute("type", "number");
+        elDraggableNumber.elInput.value = defaultValue; 
-    if (propertyData.min !== undefined) {
-        elInput.setAttribute("min", propertyData.min);
-    }
-    if (propertyData.max !== undefined) {
-        elInput.setAttribute("max", propertyData.max);
-    }
-    if (propertyData.step !== undefined) {
-        elInput.setAttribute("step", propertyData.step);
     }
+
+    let valueChangeFunction = createEmitNumberPropertyUpdateFunction(propertyName, propertyData.multiplier, 
+                                                                     property.isParticleProperty);
+    elDraggableNumber.setValueChangeFunction(valueChangeFunction);
     
-    let defaultValue = propertyData.defaultValue;
+    elDraggableNumber.elInput.setAttribute("id", elementID);
-    if (defaultValue !== undefined) {
+    elProperty.appendChild(elDraggableNumber.elDiv);
-        elInput.value = defaultValue;
+
-    }
-    
-    elInput.addEventListener('change', createEmitNumberPropertyUpdateFunction(propertyName, propertyData.multiplier, propertyData.decimals, property.isParticleProperty));
-    
-    elProperty.appendChild(elInput);
-    
     if (propertyData.buttons !== undefined) {
-        addButtons(elProperty, elementID, propertyData.buttons, true);
+        addButtons(elDraggableNumber.elText, elementID, propertyData.buttons, false);
     }
     
-    return elInput;
+    return elDraggableNumber;
-}
-
-function createSliderProperty(property, elProperty) {  
-    let propertyData = property.data;
-    
-    elProperty.className = "range";
-    
-    let elDiv = document.createElement("div");
-    elDiv.className = "slider-wrapper";
-    
-    let elSlider = document.createElement("input");
-    elSlider.setAttribute("type", "range");
-
-    let elInput = document.createElement("input");
-    elInput.setAttribute("type", "number");
-
-    if (propertyData.min !== undefined) {
-        elInput.setAttribute("min", propertyData.min);
-        elSlider.setAttribute("min", propertyData.min);
-    }
-    if (propertyData.max !== undefined) {
-        elInput.setAttribute("max", propertyData.max);
-        elSlider.setAttribute("max", propertyData.max);
-        elSlider.setAttribute("data-max", propertyData.max);
-    }
-    if (propertyData.step !== undefined) {
-        elInput.setAttribute("step", propertyData.step);
-        elSlider.setAttribute("step", propertyData.step);
-    }
-    
-    elInput.onchange = function (event) {
-        let inputValue = event.target.value;
-        elSlider.value = inputValue;
-        if (propertyData.multiplier !== undefined) {
-            inputValue *= propertyData.multiplier;
-        }
-        updateProperty(property.name, inputValue, property.isParticleProperty);
-    };
-    elSlider.oninput = function (event) {
-        let sliderValue = event.target.value;
-        if (propertyData.step === 1) {
-            if (sliderValue > 0) {
-                elInput.value = Math.floor(sliderValue);
-            } else {
-                elInput.value = Math.ceil(sliderValue);
-            }
-        } else {
-            elInput.value = sliderValue;
-        }
-        if (propertyData.multiplier !== undefined) {
-            sliderValue *= propertyData.multiplier;
-        }
-        updateProperty(property.name, sliderValue, property.isParticleProperty);
-    };
-
-    elDiv.appendChild(elSlider);
-    elDiv.appendChild(elInput);
-    elProperty.appendChild(elDiv);
-    
-    let elResult = [];
-    elResult[SLIDER_ELEMENTS.SLIDER] = elSlider;
-    elResult[SLIDER_ELEMENTS.NUMBER_INPUT] = elInput;
-    return elResult;
 }
 
 function createVec3Property(property, elProperty) {
@@ -1912,23 +1864,24 @@ function createVec3Property(property, elProperty) {
 
     elProperty.className = propertyData.vec3Type + " fstuple";
     
-    let elInputX = createTupleNumberInput(elProperty, elementID, propertyData.subLabels[VECTOR_ELEMENTS.X_INPUT], 
+    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 elInputY = createTupleNumberInput(elProperty, elementID, propertyData.subLabels[VECTOR_ELEMENTS.Y_INPUT], 
+    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 elInputZ = createTupleNumberInput(elProperty, elementID, propertyData.subLabels[VECTOR_ELEMENTS.Z_INPUT], 
+    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 inputChangeFunction = createEmitVec3PropertyUpdateFunction(propertyName, elInputX, elInputY, elInputZ, 
+    let valueChangeFunction = createEmitVec3PropertyUpdateFunction(propertyName, elNumberX.elInput, elNumberY.elInput, 
-                                                                   propertyData.multiplier, property.isParticleProperty);
+                                                                   elNumberZ.elInput, propertyData.multiplier, 
-    elInputX.addEventListener('change', inputChangeFunction);
+                                                                   property.isParticleProperty);    
-    elInputY.addEventListener('change', inputChangeFunction);
+    elNumberX.setValueChangeFunction(valueChangeFunction);
-    elInputZ.addEventListener('change', inputChangeFunction);
+    elNumberY.setValueChangeFunction(valueChangeFunction);
+    elNumberZ.setValueChangeFunction(valueChangeFunction);
     
     let elResult = [];
-    elResult[VECTOR_ELEMENTS.X_INPUT] = elInputX;
+    elResult[VECTOR_ELEMENTS.X_NUMBER] = elNumberX;
-    elResult[VECTOR_ELEMENTS.Y_INPUT] = elInputY;
+    elResult[VECTOR_ELEMENTS.Y_NUMBER] = elNumberY;
-    elResult[VECTOR_ELEMENTS.Z_INPUT] = elInputZ;
+    elResult[VECTOR_ELEMENTS.Z_NUMBER] = elNumberZ;
     return elResult;
 }
 
@@ -1944,19 +1897,19 @@ function createVec2Property(property, elProperty) {
     
     elProperty.appendChild(elTuple);
     
-    let elInputX = createTupleNumberInput(elTuple, elementID, propertyData.subLabels[VECTOR_ELEMENTS.X_INPUT], 
+    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 elInputY = createTupleNumberInput(elTuple, elementID, propertyData.subLabels[VECTOR_ELEMENTS.Y_INPUT], 
+    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 inputChangeFunction = createEmitVec2PropertyUpdateFunction(propertyName, elInputX, elInputY, 
+    let valueChangeFunction = createEmitVec2PropertyUpdateFunction(propertyName, elNumberX.elInput, elNumberY.elInput,
                                                                    propertyData.multiplier, property.isParticleProperty);
-    elInputX.addEventListener('change', inputChangeFunction);
+    elNumberX.setValueChangeFunction(valueChangeFunction);
-    elInputY.addEventListener('change', inputChangeFunction);
+    elNumberY.setValueChangeFunction(valueChangeFunction);
     
     let elResult = [];
-    elResult[VECTOR_ELEMENTS.X_INPUT] = elInputX;
+    elResult[VECTOR_ELEMENTS.X_NUMBER] = elNumberX;
-    elResult[VECTOR_ELEMENTS.Y_INPUT] = elInputY;
+    elResult[VECTOR_ELEMENTS.Y_NUMBER] = elNumberY;
     return elResult;
 }
 
@@ -1976,15 +1929,15 @@ function createColorProperty(property, elProperty) {
     elProperty.appendChild(elColorPicker);
     elProperty.appendChild(elTuple);
     
-    let elInputR = createTupleNumberInput(elTuple, elementID, "red", COLOR_MIN, COLOR_MAX, COLOR_STEP);
+    let elNumberR = createTupleNumberInput(elTuple, elementID, "red", COLOR_MIN, COLOR_MAX, COLOR_STEP);
-    let elInputG = createTupleNumberInput(elTuple, elementID, "green", COLOR_MIN, COLOR_MAX, COLOR_STEP);
+    let elNumberG = createTupleNumberInput(elTuple, elementID, "green", COLOR_MIN, COLOR_MAX, COLOR_STEP);
-    let elInputB = createTupleNumberInput(elTuple, elementID, "blue", COLOR_MIN, COLOR_MAX, COLOR_STEP);
+    let elNumberB = createTupleNumberInput(elTuple, elementID, "blue", COLOR_MIN, COLOR_MAX, COLOR_STEP);
     
-    let inputChangeFunction = createEmitColorPropertyUpdateFunction(propertyName, elInputR, elInputG, elInputB, 
+    let valueChangeFunction = createEmitColorPropertyUpdateFunction(propertyName, elNumberR.elInput, elNumberG.elInput,
-                                                                    property.isParticleProperty);  
+                                                                    elNumberB.elInput, property.isParticleProperty);
-    elInputR.addEventListener('change', inputChangeFunction);
+    elNumberR.setValueChangeFunction(valueChangeFunction);
-    elInputG.addEventListener('change', inputChangeFunction);
+    elNumberG.setValueChangeFunction(valueChangeFunction);
-    elInputB.addEventListener('change', inputChangeFunction);
+    elNumberB.setValueChangeFunction(valueChangeFunction);
     
     let colorPickerID = "#" + elementID;
     colorPickers[colorPickerID] = $(colorPickerID).colpick({
@@ -1997,9 +1950,9 @@ function createColorProperty(property, elProperty) {
             // The original color preview within the picker needs to be updated on show because
             // prior to the picker being shown we don't have access to the selections' starting color.
             colorPickers[colorPickerID].colpickSetColor({
-                "r": elInputR.value,
+                "r": elNumberR.elInput.value,
-                "g": elInputG.value,
+                "g": elNumberG.elInput.value,
-                "b": elInputB.value
+                "b": elNumberB.elInput.value
             });
         },
         onHide: function(colpick) {
@@ -2013,9 +1966,9 @@ function createColorProperty(property, elProperty) {
     
     let elResult = [];
     elResult[COLOR_ELEMENTS.COLOR_PICKER] = elColorPicker;
-    elResult[COLOR_ELEMENTS.RED_INPUT] = elInputR;
+    elResult[COLOR_ELEMENTS.RED_NUMBER] = elNumberR;
-    elResult[COLOR_ELEMENTS.GREEN_INPUT] = elInputG;
+    elResult[COLOR_ELEMENTS.GREEN_NUMBER] = elNumberG;
-    elResult[COLOR_ELEMENTS.BLUE_INPUT] = elInputB;
+    elResult[COLOR_ELEMENTS.BLUE_NUMBER] = elNumberB;
     return elResult;
 }
 
@@ -2141,37 +2094,30 @@ function createButtonsProperty(property, elProperty, elLabel) {
     let propertyData = property.data;
     
     elProperty.className = "text";
-                        
+
-    let hasLabel = propertyData.label !== undefined;
     if (propertyData.buttons !== undefined) {
-        addButtons(elProperty, elementID, propertyData.buttons, hasLabel);
+        addButtons(elProperty, elementID, propertyData.buttons, false);
     }
     
     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 elDiv = document.createElement('div');
     let elLabel = document.createElement('label');
-    elLabel.className = subLabel;
+    elLabel.className = "sublabel " + subLabel;
     elLabel.innerText = subLabel[0].toUpperCase() + subLabel.slice(1);
     elLabel.setAttribute("for", elementID);
+    elLabel.style.visibility = "visible";
     
-    let elInput = document.createElement('input');
+    let elDraggableNumber = new DraggableNumber(min, max, step, decimals);
-    elInput.className = subLabel + " number-slider";
+    elDraggableNumber.elInput.setAttribute("id", elementID);
-    elInput.setAttribute("id", elementID);
+    elDraggableNumber.elDiv.className += " fstuple";
-    elInput.setAttribute("type", "number");
+    elDraggableNumber.elText.insertBefore(elLabel, elDraggableNumber.elLeftArrow);
-    elInput.setAttribute("min", min);
+    elTuple.appendChild(elDraggableNumber.elDiv);
-    elInput.setAttribute("max", max);
-    elInput.setAttribute("step", step);
     
-    elDiv.appendChild(elLabel);
+    return elDraggableNumber;
-    elDiv.appendChild(elInput);
-    elTuple.appendChild(elDiv);
-    
-    return elInput;
 }
 
 function addButtons(elProperty, propertyID, buttons, newRow) {
@@ -2198,6 +2144,85 @@ function addButtons(elProperty, propertyID, buttons, newRow) {
     }
 }
 
+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;
+}
+
 
 /**
  * BUTTON CALLBACKS
@@ -2717,104 +2742,6 @@ function showParentMaterialNameBox(number, elNumber, elString) {
     }
 }
 
-function updateVisibleSpaceModeProperties() {
-    for (let propertyID in properties) {
-        if (properties.hasOwnProperty(propertyID)) {
-            let property = properties[propertyID];
-            let propertySpaceMode = property.spaceMode;
-            if (propertySpaceMode !== PROPERTY_SPACE_MODE.ALL) {
-                showPropertyElement(propertyID, propertySpaceMode === currentSpaceMode);
-            } else {
-                showPropertyElement(propertyID, true);
-            }
-        }
-    }
-}
-
-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.elInput = createNumberProperty(property, elProperty);
-            break;
-        }
-        case 'slider': {
-            let elSlider = createSliderProperty(property, elProperty);
-            property.elSlider = elSlider[SLIDER_ELEMENTS.SLIDER];
-            property.elInput = elSlider[SLIDER_ELEMENTS.NUMBER_INPUT];
-            break;
-        }
-        case 'vec3': {
-            let elVec3 = createVec3Property(property, elProperty);  
-            property.elInputX = elVec3[VECTOR_ELEMENTS.X_INPUT];
-            property.elInputY = elVec3[VECTOR_ELEMENTS.Y_INPUT];
-            property.elInputZ = elVec3[VECTOR_ELEMENTS.Z_INPUT];
-            break;
-        }
-        case 'vec2': {
-            let elVec2 = createVec2Property(property, elProperty);  
-            property.elInputX = elVec2[VECTOR_ELEMENTS.X_INPUT];
-            property.elInputY = elVec2[VECTOR_ELEMENTS.Y_INPUT];
-            break;
-        }
-        case 'color': {
-            let elColor = createColorProperty(property, elProperty);  
-            property.elColorPicker = elColor[COLOR_ELEMENTS.COLOR_PICKER];
-            property.elInputR = elColor[COLOR_ELEMENTS.RED_INPUT];
-            property.elInputG = elColor[COLOR_ELEMENTS.GREEN_INPUT];
-            property.elInputB = elColor[COLOR_ELEMENTS.BLUE_INPUT]; 
-            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() {
     openEventBridge(function() {
@@ -2896,17 +2823,16 @@ function loaded() {
                     if (propertyData.indentedLabel || propertyData.showPropertyRule !== undefined) {
                         let elSpan = document.createElement('span');
                         elSpan.className = 'indented';
-                        elSpan.innerText = propertyData.label;
+                        elSpan.innerText = propertyData.label !== undefined ? propertyData.label : "";
                         elLabel.appendChild(elSpan);
                     } else {
-                        elLabel.innerText = propertyData.label;
+                        elLabel.innerText = propertyData.label !== undefined ? propertyData.label : "";
                     }
                     elContainer.appendChild(elLabel);
                 } else {
                     elContainer = document.getElementById(propertyData.replaceID);
                 }
 
-
                 if (elLabel) {
                     createAppTooltip.registerTooltipElement(elLabel, propertyID);
                 }
@@ -3056,7 +2982,6 @@ function loaded() {
                         let typeProperty = properties["type"];
                         typeProperty.elSpan.innerHTML = typeProperty.data.icons[type];
                         typeProperty.elSpan.style.display = "inline-block";
-                        typeProperty.elLabel.innerHTML = type + " (" + data.selections.length + ")";
                         
                         disableProperties();
                     } else {
@@ -3103,7 +3028,6 @@ function loaded() {
                             let isPropertyNotNumber = false;
                             switch (propertyData.type) {
                                 case 'number':
-                                case 'slider':
                                     isPropertyNotNumber = isNaN(propertyValue) || propertyValue === null;
                                     break;
                                 case 'vec3':
@@ -3135,21 +3059,13 @@ function loaded() {
                                     }
                                     break;
                                 }
-                                case 'number':
+                                case 'number': {
-                                case 'slider': {
                                     let multiplier = propertyData.multiplier !== undefined ? propertyData.multiplier : 1;
                                     let value = propertyValue / multiplier;
                                     if (propertyData.round !== undefined) {
                                         value = Math.round(value.round) / propertyData.round;
                                     }
-                                    if (propertyData.decimals !== undefined) {
+                                    property.elNumber.setValue(value);
-                                        property.elInput.value = value.toFixed(propertyData.decimals);
-                                    } else {
-                                        property.elInput.value = value;
-                                    }
-                                    if (property.elSlider !== undefined) {
-                                        property.elSlider.value = property.elInput.value;
-                                    }
                                     break;
                                 }
                                 case 'vec3':
@@ -3164,16 +3080,16 @@ function loaded() {
                                         valueZ = Math.round(valueZ * propertyData.round) / propertyData.round;
                                     }
                                     if (propertyData.decimals !== undefined) {
-                                        property.elInputX.value = valueX.toFixed(propertyData.decimals);
+                                        property.elNumberX.setValue(valueX.toFixed(propertyData.decimals));
-                                        property.elInputY.value = valueY.toFixed(propertyData.decimals);
+                                        property.elNumberY.setValue(valueY.toFixed(propertyData.decimals));
-                                        if (property.elInputZ !== undefined) {
+                                        if (property.elNumberZ !== undefined) {
-                                            property.elInputZ.value = valueZ.toFixed(propertyData.decimals);
+                                            property.elNumberZ.setValue(valueZ.toFixed(propertyData.decimals));
                                         }
                                     } else {
-                                        property.elInputX.value = valueX;
+                                        property.elNumberX.setValue(valueX);
-                                        property.elInputY.value = valueY;
+                                        property.elNumberY.setValue(valueY);
-                                        if (property.elInputZ !== undefined) {
+                                        if (property.elNumberZ !== undefined) {
-                                            property.elInputZ.value = valueZ;
+                                            property.elNumberZ.setValue(valueZ);
                                         }
                                     }
                                     break;
@@ -3182,9 +3098,9 @@ function loaded() {
                                     property.elColorPicker.style.backgroundColor = "rgb(" + propertyValue.red + "," + 
                                                                                      propertyValue.green + "," + 
                                                                                      propertyValue.blue + ")";
-                                    property.elInputR.value = propertyValue.red;
+                                    property.elNumberR.setValue(propertyValue.red);
-                                    property.elInputG.value = propertyValue.green;
+                                    property.elNumberG.setValue(propertyValue.green);
-                                    property.elInputB.value = propertyValue.blue;
+                                    property.elNumberB.setValue(propertyValue.blue);
                                     break;
                                 }
                                 case 'dropdown': {