Mirrors/overte-JulianGro
3
0
Fork 0
mirror of https://github.com/JulianGro/overte.git synced 2025-04-07 21:42:31 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch 'master' of https://github.com/highfidelity/hifi into MAC

Browse source
This commit is contained in:
NissimHadar 2018-11-15 10:45:05 -08:00
commit e6190eb429
8 changed files with 521 additions and 360 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
interface/resources/qml/hifi/Card.qml
View file

@ -49,7 +49,6 @@ Item {
property string defaultThumbnail: Qt.resolvedUrl("../../images/default-domain.gif");
property int shadowHeight: 10;
property bool hovered: false
property bool scrolling: false
HifiConstants { id: hifi }
@ -238,31 +237,38 @@ Item {
property var unhoverThunk: function () { };
Rectangle {
anchors.fill: parent
visible: root.hovered && !root.scrolling
visible: root.hovered
color: "transparent"
border.width: 4
border.color: hifiStyleConstants.colors.primaryHighlight
z: 1
}
MouseArea {
anchors.fill: parent;
acceptedButtons: Qt.LeftButton;
anchors.fill: parent
acceptedButtons: Qt.LeftButton
hoverEnabled: true
onContainsMouseChanged: {
// Use onContainsMouseChanged rather than onEntered and onExited because the latter aren't always
// triggered correctly - e.g., if drag rightwards from right hand side of a card to the next card
// onExited doesn't fire, in which case can end up with two cards highlighted.
if (containsMouse) {
Tablet.playSound(TabletEnums.ButtonHover);
hoverThunk();
} else {
unhoverThunk();
}
}
}
MouseArea {
// Separate MouseArea for click handling so that it doesn't interfere with hovering and interaction
// with containing ListView.
anchors.fill: parent
acceptedButtons: Qt.LeftButton
hoverEnabled: false
onClicked: {
Tablet.playSound(TabletEnums.ButtonClick);
goFunction("hifi://" + hifiUrl);
}
hoverEnabled: true;
onEntered: {
Tablet.playSound(TabletEnums.ButtonHover);
hoverThunk();
}
onExited: unhoverThunk();
onCanceled: unhoverThunk();
}
MouseArea {
// This second mouse area causes onEntered to fire on the first if you scroll just a little and the cursor stays on
// the original card. I.e., the original card is re-highlighted if the cursor is on it after scrolling finishes.
anchors.fill: parent
}
StateImage {
id: actionIcon;

1
interface/resources/qml/hifi/Feed.qml
View file

@ -141,7 +141,6 @@ Column {
textSizeSmall: root.textSizeSmall;
stackShadowNarrowing: root.stackShadowNarrowing;
shadowHeight: root.stackedCardShadowHeight;
scrolling: scroll.moving
hoverThunk: function () {
hovered = true;

5
interface/src/Application.cpp
View file

@ -4159,6 +4159,10 @@ void Application::focusOutEvent(QFocusEvent* event) {
SpacemouseManager::getInstance().ManagerFocusOutEvent();
#endif
synthesizeKeyReleasEvents();
}
void Application::synthesizeKeyReleasEvents() {
// synthesize events for keys currently pressed, since we may not get their release events
// Because our key event handlers may manipulate _keysPressed, lets swap the keys pressed into a local copy,
// clearing the existing list.
@ -4784,6 +4788,7 @@ void Application::idle() {
if (_keyboardDeviceHasFocus && activeFocusItem != offscreenUi->getRootItem()) {
_keyboardMouseDevice->pluginFocusOutEvent();
_keyboardDeviceHasFocus = false;
synthesizeKeyReleasEvents();
} else if (activeFocusItem == offscreenUi->getRootItem()) {
_keyboardDeviceHasFocus = true;
}

1
interface/src/Application.h
View file

@ -550,6 +550,7 @@ private:
void keyReleaseEvent(QKeyEvent* event);
void focusOutEvent(QFocusEvent* event);
void synthesizeKeyReleasEvents();
void focusInEvent(QFocusEvent* event);
void mouseMoveEvent(QMouseEvent* event);

95
scripts/system/html/css/edit-style.css
View file

@ -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;
}
#property-userData-button-edit,
#property-materialData-button-clear {
margin: 6px 0 6px 0;
left: 250px;
}
#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;
}

1
scripts/system/html/entityProperties.html
View file

@ -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>

158
scripts/system/html/js/draggableNumber.js Normal file
View file

@ -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);
}
};

582
scripts/system/html/js/entityProperties.js
View file

@ -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,
Y_INPUT: 1,
Z_INPUT: 2,
X_NUMBER: 0,
Y_NUMBER: 1,
Z_NUMBER: 2,
};
const COLOR_ELEMENTS = {
COLOR_PICKER: 0,
RED_INPUT: 1,
GREEN_INPUT: 2,
BLUE_INPUT: 3,
};
const SLIDER_ELEMENTS = {
SLIDER: 0,
NUMBER_INPUT: 1,
};
const ICON_ELEMENTS = {
ICON: 0,
LABEL: 1,
RED_NUMBER: 1,
GREEN_NUMBER: 2,
BLUE_NUMBER: 3,
};
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 'slider': {
case 'number': {
if (propertyData.defaultValue !== undefined) {
property.elInput.value = propertyData.defaultValue;
property.elNumber.setValue(propertyData.defaultValue);
} else {
property.elInput.value = "";
}
if (property.elSlider !== undefined) {
property.elSlider.value = property.elInput.value;
property.elNumber.setValue("");
}
break;
}
case 'vec3':
case 'vec2': {
property.elInputX.value = "";
property.elInputY.value = "";
if (property.elInputZ !== undefined) {
property.elInputZ.value = "";
property.elNumberX.setValue("");
property.elNumberY.setValue("");
if (property.elNumberZ !== undefined) {
property.elNumberZ.setValue("");
}
break;
}
case 'color': {
property.elColorPicker.style.backgroundColor = "rgb(" + 0 + "," + 0 + "," + 0 + ")";
property.elInputR.value = "";
property.elInputG.value = "";
property.elInputB.value = "";
property.elNumberR.setValue("");
property.elNumberG.setValue("");
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');
elInput.setAttribute("id", elementID);
elInput.setAttribute("type", "number");
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 defaultValue = propertyData.defaultValue;
if (defaultValue !== undefined) {
elDraggableNumber.elInput.value = defaultValue;
}
let valueChangeFunction = createEmitNumberPropertyUpdateFunction(propertyName, propertyData.multiplier,
property.isParticleProperty);
elDraggableNumber.setValueChangeFunction(valueChangeFunction);
let defaultValue = propertyData.defaultValue;
if (defaultValue !== undefined) {
elInput.value = defaultValue;
}
elInput.addEventListener('change', createEmitNumberPropertyUpdateFunction(propertyName, propertyData.multiplier, propertyData.decimals, property.isParticleProperty));
elProperty.appendChild(elInput);
elDraggableNumber.elInput.setAttribute("id", elementID);
elProperty.appendChild(elDraggableNumber.elDiv);
if (propertyData.buttons !== undefined) {
addButtons(elProperty, elementID, propertyData.buttons, true);
addButtons(elDraggableNumber.elText, elementID, propertyData.buttons, false);
}
return elInput;
}
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;
return elDraggableNumber;
}
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],
propertyData.min, propertyData.max, propertyData.step);
let elInputY = createTupleNumberInput(elProperty, elementID, propertyData.subLabels[VECTOR_ELEMENTS.Y_INPUT],
propertyData.min, propertyData.max, propertyData.step);
let elInputZ = createTupleNumberInput(elProperty, elementID, propertyData.subLabels[VECTOR_ELEMENTS.Z_INPUT],
propertyData.min, propertyData.max, propertyData.step);
let elNumberX = createTupleNumberInput(elProperty, elementID, propertyData.subLabels[VECTOR_ELEMENTS.X_NUMBER],
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.decimals);
let elNumberZ = createTupleNumberInput(elProperty, elementID, propertyData.subLabels[VECTOR_ELEMENTS.Z_NUMBER],
propertyData.min, propertyData.max, propertyData.step, propertyData.decimals);
let inputChangeFunction = createEmitVec3PropertyUpdateFunction(propertyName, elInputX, elInputY, elInputZ,
propertyData.multiplier, property.isParticleProperty);
elInputX.addEventListener('change', inputChangeFunction);
elInputY.addEventListener('change', inputChangeFunction);
elInputZ.addEventListener('change', inputChangeFunction);
let valueChangeFunction = createEmitVec3PropertyUpdateFunction(propertyName, elNumberX.elInput, elNumberY.elInput,
elNumberZ.elInput, propertyData.multiplier,
property.isParticleProperty);
elNumberX.setValueChangeFunction(valueChangeFunction);
elNumberY.setValueChangeFunction(valueChangeFunction);
elNumberZ.setValueChangeFunction(valueChangeFunction);
let elResult = [];
elResult[VECTOR_ELEMENTS.X_INPUT] = elInputX;
elResult[VECTOR_ELEMENTS.Y_INPUT] = elInputY;
elResult[VECTOR_ELEMENTS.Z_INPUT] = elInputZ;
elResult[VECTOR_ELEMENTS.X_NUMBER] = elNumberX;
elResult[VECTOR_ELEMENTS.Y_NUMBER] = elNumberY;
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],
propertyData.min, propertyData.max, propertyData.step);
let elInputY = createTupleNumberInput(elTuple, elementID, propertyData.subLabels[VECTOR_ELEMENTS.Y_INPUT],
propertyData.min, propertyData.max, propertyData.step);
let elNumberX = createTupleNumberInput(elProperty, elementID, propertyData.subLabels[VECTOR_ELEMENTS.X_NUMBER],
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.decimals);
let inputChangeFunction = createEmitVec2PropertyUpdateFunction(propertyName, elInputX, elInputY,
let valueChangeFunction = createEmitVec2PropertyUpdateFunction(propertyName, elNumberX.elInput, elNumberY.elInput,
propertyData.multiplier, property.isParticleProperty);
elInputX.addEventListener('change', inputChangeFunction);
elInputY.addEventListener('change', inputChangeFunction);
elNumberX.setValueChangeFunction(valueChangeFunction);
elNumberY.setValueChangeFunction(valueChangeFunction);
let elResult = [];
elResult[VECTOR_ELEMENTS.X_INPUT] = elInputX;
elResult[VECTOR_ELEMENTS.Y_INPUT] = elInputY;
elResult[VECTOR_ELEMENTS.X_NUMBER] = elNumberX;
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 elInputG = createTupleNumberInput(elTuple, elementID, "green", COLOR_MIN, COLOR_MAX, COLOR_STEP);
let elInputB = createTupleNumberInput(elTuple, elementID, "blue", COLOR_MIN, COLOR_MAX, COLOR_STEP);
let elNumberR = createTupleNumberInput(elTuple, elementID, "red", COLOR_MIN, COLOR_MAX, COLOR_STEP);
let elNumberG = createTupleNumberInput(elTuple, elementID, "green", 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,
property.isParticleProperty);
elInputR.addEventListener('change', inputChangeFunction);
elInputG.addEventListener('change', inputChangeFunction);
elInputB.addEventListener('change', inputChangeFunction);
let valueChangeFunction = createEmitColorPropertyUpdateFunction(propertyName, elNumberR.elInput, elNumberG.elInput,
elNumberB.elInput, property.isParticleProperty);
elNumberR.setValueChangeFunction(valueChangeFunction);
elNumberG.setValueChangeFunction(valueChangeFunction);
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,
"g": elInputG.value,
"b": elInputB.value
"r": elNumberR.elInput.value,
"g": elNumberG.elInput.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.GREEN_INPUT] = elInputG;
elResult[COLOR_ELEMENTS.BLUE_INPUT] = elInputB;
elResult[COLOR_ELEMENTS.RED_NUMBER] = elNumberR;
elResult[COLOR_ELEMENTS.GREEN_NUMBER] = elNumberG;
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');
elInput.className = subLabel + " number-slider";
elInput.setAttribute("id", elementID);
elInput.setAttribute("type", "number");
elInput.setAttribute("min", min);
elInput.setAttribute("max", max);
elInput.setAttribute("step", step);
let elDraggableNumber = new DraggableNumber(min, max, step, decimals);
elDraggableNumber.elInput.setAttribute("id", elementID);
elDraggableNumber.elDiv.className += " fstuple";
elDraggableNumber.elText.insertBefore(elLabel, elDraggableNumber.elLeftArrow);
elTuple.appendChild(elDraggableNumber.elDiv);
elDiv.appendChild(elLabel);
elDiv.appendChild(elInput);
elTuple.appendChild(elDiv);
return elInput;
return elDraggableNumber;
}
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 'slider': {
case 'number': {
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.elInput.value = value.toFixed(propertyData.decimals);
} else {
property.elInput.value = value;
}
if (property.elSlider !== undefined) {
property.elSlider.value = property.elInput.value;
}
property.elNumber.setValue(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.elInputY.value = valueY.toFixed(propertyData.decimals);
if (property.elInputZ !== undefined) {
property.elInputZ.value = valueZ.toFixed(propertyData.decimals);
property.elNumberX.setValue(valueX.toFixed(propertyData.decimals));
property.elNumberY.setValue(valueY.toFixed(propertyData.decimals));
if (property.elNumberZ !== undefined) {
property.elNumberZ.setValue(valueZ.toFixed(propertyData.decimals));
}
} else {
property.elInputX.value = valueX;
property.elInputY.value = valueY;
if (property.elInputZ !== undefined) {
property.elInputZ.value = valueZ;
property.elNumberX.setValue(valueX);
property.elNumberY.setValue(valueY);
if (property.elNumberZ !== undefined) {
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.elInputG.value = propertyValue.green;
property.elInputB.value = propertyValue.blue;
property.elNumberR.setValue(propertyValue.red);
property.elNumberG.setValue(propertyValue.green);
property.elNumberB.setValue(propertyValue.blue);
break;
}
case 'dropdown': {