diff --git a/scripts/system/html/css/edit-style.css b/scripts/system/html/css/edit-style.css
index c5979c41e2..6a0e7c8343 100644
--- a/scripts/system/html/css/edit-style.css
+++ b/scripts/system/html/css/edit-style.css
@@ -956,12 +956,12 @@ div.refresh input[type="button"] {
}
.draggable-number .left-arrow {
top: 3px;
- left: 0px;
+ left: 0;
transform: rotate(180deg);
}
.draggable-number .right-arrow {
top: 3px;
- right: 0px;
+ right: 0;
}
.draggable-number input[type=number] {
position: absolute;
@@ -995,6 +995,10 @@ div.refresh input[type="button"] {
font-size: 15px;
}
+.rect .rect-row {
+ margin-bottom: 8px;
+}
+
.row .property {
width: auto;
display: inline-block;
@@ -1602,10 +1606,10 @@ input.rename-entity {
margin-left: 4px;
margin-right: 10px;
}
-.fstuple label.red, .fstuple label.x {
+.fstuple label.red, .fstuple label.x, .fstuple label.w {
color: #C62147;
}
-.fstuple label.green, .fstuple label.y {
+.fstuple label.green, .fstuple label.y, .fstuple label.h {
color: #359D85;
}
.fstuple label.blue, .fstuple label.z {
diff --git a/scripts/system/html/js/entityProperties.js b/scripts/system/html/js/entityProperties.js
index 78ef8ac313..66dcecc83e 100644
--- a/scripts/system/html/js/entityProperties.js
+++ b/scripts/system/html/js/entityProperties.js
@@ -140,12 +140,14 @@ const GROUPS = [
step: 0.005,
decimals: 4,
unit: "m",
- propertyID: "lineHeight"
+ propertyID: "lineHeight",
},
{
- label: "Face Camera",
- type: "bool",
- propertyID: "faceCamera"
+ label: "Billboard Mode",
+ type: "dropdown",
+ options: { none: "None", yaw: "Yaw", full: "Full"},
+ propertyID: "textBillboardMode",
+ propertyName: "billboardMode", // actual entity property name
},
]
},
@@ -478,6 +480,37 @@ const GROUPS = [
placeholder: "URL",
propertyID: "imageURL",
},
+ {
+ label: "Color",
+ type: "color",
+ propertyID: "imageColor",
+ propertyName: "color", // actual entity property name
+ },
+ {
+ label: "Emissive",
+ type: "bool",
+ propertyID: "emissive",
+ },
+ {
+ label: "Sub Image",
+ type: "rect",
+ min: 0,
+ step: 1,
+ subLabels: [ "x", "y", "w", "h" ],
+ propertyID: "subImage",
+ },
+ {
+ label: "Billboard Mode",
+ type: "dropdown",
+ options: { none: "None", yaw: "Yaw", full: "Full"},
+ propertyID: "imageBillboardMode",
+ propertyName: "billboardMode", // actual entity property name
+ },
+ {
+ label: "Keep Aspect Ratio",
+ type: "bool",
+ propertyID: "keepAspectRatio",
+ },
]
},
{
@@ -1424,6 +1457,13 @@ const PROPERTY_NAME_DIVISION = {
SUBPROPERTY: 2,
};
+const RECT_ELEMENTS = {
+ X_NUMBER: 0,
+ Y_NUMBER: 1,
+ WIDTH_NUMBER: 2,
+ HEIGHT_NUMBER: 3,
+};
+
const VECTOR_ELEMENTS = {
X_NUMBER: 0,
Y_NUMBER: 1,
@@ -1475,6 +1515,13 @@ function getPropertyInputElement(propertyID) {
return property.elInput;
case 'number-draggable':
return property.elNumber.elInput;
+ case 'rect':
+ return {
+ x: property.elNumberX.elInput,
+ y: property.elNumberY.elInput,
+ width: property.elNumberWidth.elInput,
+ height: property.elNumberHeight.elInput
+ };
case 'vec3':
case 'vec2':
return { x: property.elNumberX.elInput, y: property.elNumberY.elInput, z: property.elNumberZ.elInput };
@@ -1564,6 +1611,13 @@ function resetProperties() {
}
break;
}
+ case 'rect': {
+ property.elNumberX.setValue("");
+ property.elNumberY.setValue("");
+ property.elNumberWidth.setValue("");
+ property.elNumberHeight.setValue("");
+ break;
+ }
case 'vec3':
case 'vec2': {
property.elNumberX.setValue("");
@@ -1748,7 +1802,7 @@ function createDragStartFunction(property) {
function createDragEndFunction(property) {
return function() {
property.dragging = false;
- // send an additonal update post-dragging to consider whole property change from dragStart to dragEnd to be 1 action
+ // send an additional update post-dragging to consider whole property change from dragStart to dragEnd to be 1 action
this.valueChangeFunction();
};
}
@@ -1793,6 +1847,18 @@ function createEmitVec3PropertyUpdateFunction(property) {
};
}
+function createEmitRectPropertyUpdateFunction(property) {
+ return function() {
+ let newValue = {
+ x: property.elNumberX.elInput.value,
+ y: property.elNumberY.elInput.value,
+ width: property.elNumberWidth.elInput.value,
+ height: property.elNumberHeight.elInput.value,
+ };
+ updateProperty(property.name, newValue, property.isParticleProperty);
+ };
+}
+
function createEmitColorPropertyUpdateFunction(property) {
return function() {
emitColorPropertyUpdate(property.name, property.elNumberR.elInput.value, property.elNumberG.elInput.value,
@@ -1951,6 +2017,44 @@ function createNumberDraggableProperty(property, elProperty) {
return elDraggableNumber;
}
+function createRectProperty(property, elProperty) {
+ let propertyData = property.data;
+
+ elProperty.className = "rect";
+
+ let elXYRow = document.createElement('div');
+ elXYRow.className = "rect-row fstuple";
+ elProperty.appendChild(elXYRow);
+
+ let elWidthHeightRow = document.createElement('div');
+ elWidthHeightRow.className = "rect-row fstuple";
+ elProperty.appendChild(elWidthHeightRow);
+
+
+ let elNumberX = createTupleNumberInput(property, propertyData.subLabels[RECT_ELEMENTS.X_NUMBER]);
+ let elNumberY = createTupleNumberInput(property, propertyData.subLabels[RECT_ELEMENTS.Y_NUMBER]);
+ let elNumberWidth = createTupleNumberInput(property, propertyData.subLabels[RECT_ELEMENTS.WIDTH_NUMBER]);
+ let elNumberHeight = createTupleNumberInput(property, propertyData.subLabels[RECT_ELEMENTS.HEIGHT_NUMBER]);
+
+ elXYRow.appendChild(elNumberX.elDiv);
+ elXYRow.appendChild(elNumberY.elDiv);
+ elWidthHeightRow.appendChild(elNumberWidth.elDiv);
+ elWidthHeightRow.appendChild(elNumberHeight.elDiv);
+
+ let valueChangeFunction = createEmitRectPropertyUpdateFunction(property);
+ elNumberX.setValueChangeFunction(valueChangeFunction);
+ elNumberY.setValueChangeFunction(valueChangeFunction);
+ elNumberWidth.setValueChangeFunction(valueChangeFunction);
+ elNumberHeight.setValueChangeFunction(valueChangeFunction);
+
+ let elResult = [];
+ elResult[RECT_ELEMENTS.X_NUMBER] = elNumberX;
+ elResult[RECT_ELEMENTS.Y_NUMBER] = elNumberY;
+ elResult[RECT_ELEMENTS.WIDTH_NUMBER] = elNumberWidth;
+ elResult[RECT_ELEMENTS.HEIGHT_NUMBER] = elNumberHeight;
+ return elResult;
+}
+
function createVec3Property(property, elProperty) {
let propertyData = property.data;
@@ -2273,6 +2377,14 @@ function createProperty(propertyData, propertyElementID, propertyName, propertyI
property.elNumber = createNumberDraggableProperty(property, elProperty);
break;
}
+ case 'rect': {
+ let elRect = createRectProperty(property, elProperty);
+ property.elNumberX = elRect[RECT_ELEMENTS.X_NUMBER];
+ property.elNumberY = elRect[RECT_ELEMENTS.Y_NUMBER];
+ property.elNumberWidth = elRect[RECT_ELEMENTS.WIDTH_NUMBER];
+ property.elNumberHeight = elRect[RECT_ELEMENTS.HEIGHT_NUMBER];
+ break;
+ }
case 'vec3': {
let elVec3 = createVec3Property(property, elProperty);
property.elNumberX = elVec3[VECTOR_ELEMENTS.X_NUMBER];
@@ -3160,6 +3272,7 @@ function loaded() {
case 'number-draggable':
isPropertyNotNumber = isNaN(propertyValue) || propertyValue === null;
break;
+ case 'rect':
case 'vec3':
case 'vec2':
isPropertyNotNumber = isNaN(propertyValue.x) || propertyValue.x === null;
@@ -3202,6 +3315,12 @@ function loaded() {
property.elNumber.setValue(value);
break;
}
+ case 'rect':
+ property.elNumberX.setValue(propertyValue.x);
+ property.elNumberY.setValue(propertyValue.y);
+ property.elNumberWidth.setValue(propertyValue.width);
+ property.elNumberHeight.setValue(propertyValue.height);
+ break;
case 'vec3':
case 'vec2': {
let multiplier = propertyData.multiplier !== undefined ? propertyData.multiplier : 1;