diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html index a79edfb181..97e16fcf11 100644 --- a/examples/html/entityProperties.html +++ b/examples/html/entityProperties.html @@ -160,102 +160,102 @@ elLocked.checked = properties.locked; if (properties.locked) { - disableChildren(document.getElementById("properties"), 'input'); + disableChildren(document.getElementById("properties-table"), 'input'); elLocked.removeAttribute('disabled'); } else { - enableChildren(document.getElementById("properties"), 'input'); + enableChildren(document.getElementById("properties-table"), 'input'); + } - elVisible.checked = properties.visible; + elVisible.checked = properties.visible; - elPositionX.value = properties.position.x.toFixed(2); - elPositionY.value = properties.position.y.toFixed(2); - elPositionZ.value = properties.position.z.toFixed(2); + elPositionX.value = properties.position.x.toFixed(2); + elPositionY.value = properties.position.y.toFixed(2); + elPositionZ.value = properties.position.z.toFixed(2); - elDimensionsX.value = properties.dimensions.x.toFixed(2); - elDimensionsY.value = properties.dimensions.y.toFixed(2); - elDimensionsZ.value = properties.dimensions.z.toFixed(2); + elDimensionsX.value = properties.dimensions.x.toFixed(2); + elDimensionsY.value = properties.dimensions.y.toFixed(2); + elDimensionsZ.value = properties.dimensions.z.toFixed(2); - elRegistrationX.value = properties.registrationPoint.x.toFixed(2); - elRegistrationY.value = properties.registrationPoint.y.toFixed(2); - elRegistrationZ.value = properties.registrationPoint.z.toFixed(2); + elRegistrationX.value = properties.registrationPoint.x.toFixed(2); + elRegistrationY.value = properties.registrationPoint.y.toFixed(2); + elRegistrationZ.value = properties.registrationPoint.z.toFixed(2); - elLinearVelocityX.value = properties.velocity.x.toFixed(2); - elLinearVelocityY.value = properties.velocity.y.toFixed(2); - elLinearVelocityZ.value = properties.velocity.z.toFixed(2); - elLinearDamping.value = properties.damping.toFixed(2); + elLinearVelocityX.value = properties.velocity.x.toFixed(2); + elLinearVelocityY.value = properties.velocity.y.toFixed(2); + elLinearVelocityZ.value = properties.velocity.z.toFixed(2); + elLinearDamping.value = properties.damping.toFixed(2); - elAngularVelocityX.value = properties.angularVelocity.x.toFixed(2); - elAngularVelocityY.value = properties.angularVelocity.y.toFixed(2); - elAngularVelocityZ.value = properties.angularVelocity.z.toFixed(2); - elAngularDamping.value = properties.angularDamping.toFixed(2); + elAngularVelocityX.value = properties.angularVelocity.x.toFixed(2); + elAngularVelocityY.value = properties.angularVelocity.y.toFixed(2); + elAngularVelocityZ.value = properties.angularVelocity.z.toFixed(2); + elAngularDamping.value = properties.angularDamping.toFixed(2); - elGravityX.value = properties.gravity.x.toFixed(2); - elGravityY.value = properties.gravity.y.toFixed(2); - elGravityZ.value = properties.gravity.z.toFixed(2); + elGravityX.value = properties.gravity.x.toFixed(2); + elGravityY.value = properties.gravity.y.toFixed(2); + elGravityZ.value = properties.gravity.z.toFixed(2); - elMass.value = properties.mass.toFixed(2); - elIgnoreForCollisions.checked = properties.ignoreForCollisions; - elCollisionsWillMove.checked = properties.collisionsWillMove; - elLifetime.value = properties.lifetime; + elMass.value = properties.mass.toFixed(2); + elIgnoreForCollisions.checked = properties.ignoreForCollisions; + elCollisionsWillMove.checked = properties.collisionsWillMove; + elLifetime.value = properties.lifetime; - if (properties.type != "Box") { - elBoxSection.style.display = 'none'; - } else { - elBoxSection.style.display = 'block'; + if (properties.type != "Box") { + elBoxSection.style.display = 'none'; + } else { + elBoxSection.style.display = 'block'; - elBoxColorRed.value = properties.color.red; - elBoxColorGreen.value = properties.color.green; - elBoxColorBlue.value = properties.color.blue; - } + elBoxColorRed.value = properties.color.red; + elBoxColorGreen.value = properties.color.green; + elBoxColorBlue.value = properties.color.blue; + } - if (properties.type != "Model") { - elModelSection.style.display = 'none'; - } else { - elModelSection.style.display = 'block'; - elModelURL.value = properties.modelURL; - elModelAnimationURL.value = properties.animationURL; - elModelAnimationPlaying.checked = properties.animationIsPlaying; - elModelAnimationFPS.value = properties.animationFPS; - } + if (properties.type != "Model") { + elModelSection.style.display = 'none'; + } else { + elModelSection.style.display = 'block'; + elModelURL.value = properties.modelURL; + elModelAnimationURL.value = properties.animationURL; + elModelAnimationPlaying.checked = properties.animationIsPlaying; + elModelAnimationFPS.value = properties.animationFPS; + } - if (properties.type != "Text") { - elTextSection.style.display = 'none'; - } else { - elTextSection.style.display = 'block'; + if (properties.type != "Text") { + elTextSection.style.display = 'none'; + } else { + elTextSection.style.display = 'block'; - elTextText.value = properties.text; - elTextLineHeight.value = properties.lineHeight; - elTextTextColorRed.value = properties.textColor.red; - elTextTextColorGreen.value = properties.textColor.green; - elTextTextColorBlue.value = properties.textColor.blue; - elTextBackgroundColorRed.value = properties.backgroundColor.red; - elTextBackgroundColorGreen.value = properties.backgroundColor.green; - elTextBackgroundColorBlue.value = properties.backgroundColor.blue; - } + elTextText.value = properties.text; + elTextLineHeight.value = properties.lineHeight; + elTextTextColorRed.value = properties.textColor.red; + elTextTextColorGreen.value = properties.textColor.green; + elTextTextColorBlue.value = properties.textColor.blue; + elTextBackgroundColorRed.value = properties.backgroundColor.red; + elTextBackgroundColorGreen.value = properties.backgroundColor.green; + elTextBackgroundColorBlue.value = properties.backgroundColor.blue; + } - if (properties.type != "Light") { - elLightSection.style.display = 'none'; - } else { - elLightSection.style.display = 'block'; + if (properties.type != "Light") { + elLightSection.style.display = 'none'; + } else { + elLightSection.style.display = 'block'; - elLightDiffuseRed.value = properties.diffuseColor.red; - elLightDiffuseGreen.value = properties.diffuseColor.green; - elLightDiffuseBlue.value = properties.diffuseColor.blue; + elLightDiffuseRed.value = properties.diffuseColor.red; + elLightDiffuseGreen.value = properties.diffuseColor.green; + elLightDiffuseBlue.value = properties.diffuseColor.blue; - elLightAmbientRed.value = properties.ambientColor.red; - elLightAmbientGreen.value = properties.ambientColor.green; - elLightAmbientBlue.value = properties.ambientColor.blue; + elLightAmbientRed.value = properties.ambientColor.red; + elLightAmbientGreen.value = properties.ambientColor.green; + elLightAmbientBlue.value = properties.ambientColor.blue; - elLightSpecularRed.value = properties.specularColor.red; - elLightSpecularGreen.value = properties.specularColor.green; - elLightSpecularBlue.value = properties.specularColor.blue; + elLightSpecularRed.value = properties.specularColor.red; + elLightSpecularGreen.value = properties.specularColor.green; + elLightSpecularBlue.value = properties.specularColor.blue; - elLightConstantAttenuation.value = properties.constantAttenuation; - elLightLinearAttenuation.value = properties.linearAttenuation; - elLightQuadraticAttenuation.value = properties.quadraticAttenuation; - elLightExponent.value = properties.exponent; - elLightCutoff.value = properties.cutoff; - } + elLightConstantAttenuation.value = properties.constantAttenuation; + elLightLinearAttenuation.value = properties.linearAttenuation; + elLightQuadraticAttenuation.value = properties.quadraticAttenuation; + elLightExponent.value = properties.exponent; + elLightCutoff.value = properties.cutoff; } } } @@ -345,7 +345,7 @@ elModelAnimationPlaying.addEventListener('change', createEmitCheckedPropertyUpdateFunction('animationIsPlaying')); elModelAnimationFPS.addEventListener('change', createEmitNumberPropertyUpdateFunction('animationFPS')); elModelAnimationFrame.addEventListener('change', createEmitNumberPropertyUpdateFunction('animationFrameIndex')); - + elTextText.addEventListener('change', createEmitTextPropertyUpdateFunction('text')); elTextLineHeight.addEventListener('change', createEmitNumberPropertyUpdateFunction('lineHeight')); @@ -361,6 +361,50 @@ elTextBackgroundColorGreen.addEventListener('change', textBackgroundColorChangeFunction); elTextBackgroundColorBlue.addEventListener('change', textBackgroundColorChangeFunction); + + var resizing = false; + var startX = 0; + var originalWidth = 0; + var resizeHandleWidth = 10; + + var col1 = document.querySelector("#col-label"); + + document.body.addEventListener('mousemove', function(event) { + if (resizing) { + var dX = event.x - startX; + col1.style.width = (originalWidth + dX) + "px"; + } + }); + document.body.addEventListener('mouseup', function(event) { + resizing = false; + }); + document.body.addEventListener('mouseleave', function(event) { + resizing = false; + }); + var els = document.querySelectorAll("#properties-table td"); + for (var i = 0; i < els.length; i++) { + var el = els[i]; + el.addEventListener('mousemove', function(event) { + if (!resizing) { + var distance = this.offsetWidth - event.offsetX; + if (distance < resizeHandleWidth) { + document.body.style.cursor = "ew-resize"; + } else { + document.body.style.cursor = "initial"; + } + } + }); + el.addEventListener('mousedown', function(event) { + var distance = this.offsetWidth - event.offsetX; + if (distance < resizeHandleWidth) { + startX = event.x; + originalWidth = this.offsetWidth; + resizing = true; + target = this; + } + }); + } + } @@ -368,272 +412,269 @@
-
-
- - - -
- -
- - + + + + + + + + + + + + + -
- - +
+ + + -
- - - X - Y - Z - -
+ + + + -
- - - X - Y - Z - -
+ + + + -
- - +
+ + + + + + + + + + + -
- - - X - Y - Z - -
-
- - +
+ + + + + + + + + + + + + + + -
- - - X - Y - Z - -
+ + + + -
- - +
+ + + -
- - +
+ + + -
- - +
+ + + -
- - +
+ + + -
-
- - - Red - Green - Blue - -
-
+ + + + -
-
- - - - -
-
- - - - -
-
- - - - -
-
- - - - -
-
- - - - -
-
-
-
- - - - -
-
- - - - -
-
- - - Red - Green - Blue - -
-
- - - Red - Green - Blue - -
-
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -
-
- - - - -
-
- - - Red - Green - Blue - -
-
- - - Red - Green - Blue - -
-
- - - Red - Green - Blue - -
-
- - - - -
-
- - - - -
-
- - - - -
-
- - - - -
-
- - - - -
-
- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Type + + +
Locked - - +
Visible - - +
Position +
X
+
Y
+
Z
+
Registration +
X
+
Y
+
Z
+
Width - - -
- - +
Height - - -
- - +
Depth - - +
Linear +
X
+
Y
+
Z
+
Linear Damping - - -
- - - Pitch - Roll - Yaw - -
-
- - +
Angular +
Pitch
+
Yaw
+
Roll
+
Angular Damping - - +
Gravity +
X
+
Y
+
Z
+
Mass - - +
Ignore For Collisions - - +
Collisions Will Move - - +
Lifetime - - +
Color +
Red
+
Green
+
Blue
+
Model URL + +
Animation URL + +
Animation Playing + +
Animation FPS + +
Animation Frame + +
Text + +
Line Height + +
Text Color +
Red
+
Green
+
Blue
+
Background Color +
Red
+
Green
+
Blue
+
Spot Light + +
Diffuse +
Red
+
Green
+
Blue
+
Ambient +
Red
+
Green
+
Blue
+
Specular +
Red
+
Green
+
Blue
+
Constant Attenuation + +
Linear Attenuation + +
Quadratic Attenuation + +
Exponent + +
Cutoff (degrees) + +
diff --git a/examples/html/style.css b/examples/html/style.css index b721c31b88..424933e14e 100644 --- a/examples/html/style.css +++ b/examples/html/style.css @@ -17,15 +17,6 @@ body { user-select: none; } -input { - line-height: 2; -} - -.input-left { - display: inline-block; - width: 20px; -} - .color-box { display: inline-block; width: 20px; @@ -63,7 +54,6 @@ input { .property-section label { font-weight: bold; - vertical-align: middle; } .property-section span { @@ -89,9 +79,10 @@ input[type=button] { font-size: .9em; } -input.coord { - width: 6em; - height: 2em; +input { + padding: 2px; + border: 1px solid #999; + background-color: #eee; } table#entity-table { @@ -105,7 +96,7 @@ table#entity-table { cursor: pointer; } -tr.selected { +#entity-table tr.selected { background-color: #AAA; } @@ -130,3 +121,48 @@ th#entity-type { th#entity-url { } + + +div.input-area { + display: inline-block; +} + +input { +} + + + +table#properties-table { + border: none; + border-collapse: collapse; + width: 100%; + background-color: #efefef; + font-family: Arial; + font-size: 12px; + table-layout: fixed; +} + +#properties-table tr { + border-bottom: 1px solid #e5e5e5; +} + +#properties-table td.label { + padding-right: 10px; + border-right: 1px solid #999; + text-align: right; + font-weight: bold; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + vertical-align: middle; + height: 1.2em; +} + +#properties-table td { + padding: 5px 0px 5px 10px; +} + +col#col-label { + width: 130px; +}