-
-
- ";
+ if (selectedZones.length === 0) {
+ if (!isMultiple) {
+ listedZoneInner += "
";
+ document.getElementById("selected-zones-" + propertyId).innerHTML = listedZoneInner;
+ if (isEditable) {
+ document.getElementById("multiZoneSelTools-" + propertyId).style.display = "block";
+ } else {
+ document.getElementById("multiZoneSelTools-" + propertyId).style.display = "none";
+ }
+}
+
+function createZonesSelection(property, elProperty) {
+ let elementID = property.elementID;
+ requestZoneList();
+ elProperty.className = "multipleZonesSelection";
+ let elInput = document.createElement('input');
+ elInput.setAttribute("id", elementID);
+ elInput.setAttribute("type", "hidden");
+ elInput.className = "hiddenMultiZonesSelection";
+
+ let elZonesSelector = document.createElement('div');
+ elZonesSelector.setAttribute("id", "zones-selector-" + elementID);
+
+ let elMultiDiff = document.createElement('span');
+ elMultiDiff.className = "multi-diff";
+
+ elProperty.appendChild(elInput);
+ elProperty.appendChild(elZonesSelector);
+ elProperty.appendChild(elMultiDiff);
+
+ return elInput;
+}
+
+function setZonesSelectionData(element, isEditable) {
+ let zoneSelectorContainer = document.getElementById("zones-selector-" + element.id);
+ let zoneSelector = "";
+ zoneSelector += "";
+ zoneSelectorContainer.innerHTML = zoneSelector;
+ displaySelectedZones(element.id, isEditable);
+}
+
+function updateAllZoneSelect() {
+ let allZoneSelects = document.querySelectorAll(".zoneSelect");
+ let i, j, name, propId;
+ for (i = 0; i < allZoneSelects.length; i++) {
+ allZoneSelects[i].options.length = 0;
+ for (j = 0; j < zonesList.length; j++) {
+ if (zonesList[j].name === "") {
+ name = zonesList[j].id;
+ } else {
+ name = zonesList[j].name;
+ }
+ allZoneSelects[i].options[j] = new Option(name, zonesList[j].id, false , false);
+ }
+ propId = allZoneSelects[i].id.replace("zones-select-", "");
+ if (document.getElementById("multiZoneSelTools-" + propId).style.display === "block") {
+ displaySelectedZones(propId, true);
+ } else {
+ displaySelectedZones(propId, false);
+ }
+ }
+}
/**
* MATERIAL TARGET FUNCTIONS
@@ -3467,15 +3732,15 @@ function requestMaterialTarget() {
entityID: getFirstSelectedID(),
}));
}
-
+
function setMaterialTargetData(materialTargetData) {
let elDivOptions = getPropertyInputElement("parentMaterialName");
resetDynamicMultiselectProperty(elDivOptions);
-
+
if (materialTargetData === undefined) {
return;
}
-
+
elDivOptions.firstChild.style.display = "none"; // hide "No Options" text
elDivOptions.parentNode.lastChild.style.display = null; // show Select/Clear all buttons
@@ -3483,7 +3748,7 @@ function setMaterialTargetData(materialTargetData) {
for (let i = 0; i < numMeshes; ++i) {
addMaterialTarget(elDivOptions, i, false);
}
-
+
let materialNames = materialTargetData.materialNames;
let materialNamesAdded = [];
for (let i = 0; i < materialNames.length; ++i) {
@@ -3493,7 +3758,7 @@ function setMaterialTargetData(materialTargetData) {
materialNamesAdded.push(materialName);
}
}
-
+
materialTargetPropertyUpdate(elDivOptions.propertyValue);
}
@@ -3501,12 +3766,12 @@ function addMaterialTarget(elDivOptions, targetID, isMaterialName) {
let elementID = elDivOptions.getAttribute("id");
elementID += isMaterialName ? "-material-" : "-mesh-";
elementID += targetID;
-
+
let elDiv = document.createElement('div');
elDiv.className = "materialTargetDiv";
elDiv.onclick = onToggleMaterialTarget;
elDivOptions.appendChild(elDiv);
-
+
let elInput = document.createElement('input');
elInput.className = "materialTargetInput";
elInput.setAttribute("type", "checkbox");
@@ -3514,12 +3779,12 @@ function addMaterialTarget(elDivOptions, targetID, isMaterialName) {
elInput.setAttribute("targetID", targetID);
elInput.setAttribute("isMaterialName", isMaterialName);
elDiv.appendChild(elInput);
-
+
let elLabel = document.createElement('label');
elLabel.setAttribute("for", elementID);
elLabel.innerText = isMaterialName ? "Material " + targetID : "Mesh Index " + targetID;
elDiv.appendChild(elLabel);
-
+
return elDiv;
}
@@ -3552,7 +3817,7 @@ function clearAllMaterialTarget() {
function sendMaterialTargetProperty() {
let elDivOptions = getPropertyInputElement("parentMaterialName");
let elInputs = elDivOptions.getElementsByClassName("materialTargetInput");
-
+
let materialTargetList = [];
for (let i = 0; i < elInputs.length; ++i) {
let elInput = elInputs[i];
@@ -3565,26 +3830,26 @@ function sendMaterialTargetProperty() {
}
}
}
-
+
let propertyValue = materialTargetList.join(",");
if (propertyValue.length > 1) {
propertyValue = "[" + propertyValue + "]";
}
-
+
updateProperty("parentMaterialName", propertyValue, false);
}
function materialTargetPropertyUpdate(propertyValue) {
let elDivOptions = getPropertyInputElement("parentMaterialName");
let elInputs = elDivOptions.getElementsByClassName("materialTargetInput");
-
+
if (propertyValue.startsWith('[')) {
propertyValue = propertyValue.substring(1, propertyValue.length);
}
if (propertyValue.endsWith(']')) {
propertyValue = propertyValue.substring(0, propertyValue.length - 1);
}
-
+
let materialTargets = propertyValue.split(",");
for (let i = 0; i < elInputs.length; ++i) {
let elInput = elInputs[i];
@@ -3595,7 +3860,7 @@ function materialTargetPropertyUpdate(propertyValue) {
}
elInput.checked = materialTargets.indexOf(materialTargetName) >= 0;
}
-
+
elDivOptions.propertyValue = propertyValue;
}
@@ -3629,7 +3894,9 @@ function handleEntitySelectionUpdate(selections, isPropertiesToolUpdate) {
selectedEntityIDs = new Set(selections.map(selection => selection.id));
const multipleSelections = currentSelections.length > 1;
const hasSelectedEntityChanged = !areSetsEqual(selectedEntityIDs, previouslySelectedEntityIDs);
-
+
+ requestZoneList();
+
if (selections.length === 0) {
deleteJSONEditor();
deleteJSONMaterialEditor();
@@ -3674,6 +3941,7 @@ function handleEntitySelectionUpdate(selections, isPropertiesToolUpdate) {
const shownGroups = getGroupsForTypes(entityTypes);
showGroupsForTypes(entityTypes);
+ showOnTheSamePage(entityTypes);
const lockedMultiValue = getMultiplePropertyValue('locked');
@@ -3683,7 +3951,7 @@ function handleEntitySelectionUpdate(selections, isPropertiesToolUpdate) {
} else {
enableProperties();
disableSaveUserDataButton();
- disableSaveMaterialDataButton()
+ disableSaveMaterialDataButton();
}
const certificateIDMultiValue = getMultiplePropertyValue('certificateID');
@@ -3839,6 +4107,15 @@ function handleEntitySelectionUpdate(selections, isPropertiesToolUpdate) {
setTextareaScrolling(property.elInput);
break;
}
+ case 'multipleZonesSelection': {
+ property.elInput.value = JSON.stringify(propertyValue);
+ if (lockedMultiValue.isMultiDiffValue || lockedMultiValue.value) {
+ setZonesSelectionData(property.elInput, false);
+ } else {
+ setZonesSelectionData(property.elInput, true);
+ }
+ break;
+ }
case 'icon': {
property.elSpan.innerHTML = propertyData.icons[propertyValue];
property.elSpan.style.display = "inline-block";
@@ -3884,7 +4161,7 @@ function handleEntitySelectionUpdate(selections, isPropertiesToolUpdate) {
}
}
- if (json !== null) {
+ if (json !== null && !lockedMultiValue.isMultiDiffValue && !lockedMultiValue.value) {
if (editor === null) {
createJSONEditor();
}
@@ -3916,7 +4193,7 @@ function handleEntitySelectionUpdate(selections, isPropertiesToolUpdate) {
}
}
- if (materialJson !== null) {
+ if (materialJson !== null && !lockedMultiValue.isMultiDiffValue && !lockedMultiValue.value) {
if (materialEditor === null) {
createJSONMaterialEditor();
}
@@ -3950,44 +4227,35 @@ function handleEntitySelectionUpdate(selections, isPropertiesToolUpdate) {
function loaded() {
openEventBridge(function() {
- let elPropertiesList = document.getElementById("properties-list");
-
+ let elPropertiesList = document.getElementById("properties-pages");
+ let elTabs = document.getElementById("tabs");
+
GROUPS.forEach(function(group) {
let elGroup;
- if (group.addToGroup !== undefined) {
- let fieldset = document.getElementById("properties-" + group.addToGroup);
- elGroup = document.createElement('div');
- fieldset.appendChild(elGroup);
- } else {
- elGroup = document.createElement('div');
- elGroup.className = 'section ' + (group.isMinor ? "minor" : "major");
- elGroup.setAttribute("id", "properties-" + group.id);
- elPropertiesList.appendChild(elGroup);
- }
+
+ elGroup = document.createElement('div');
+ elGroup.className = 'section ' + "major";
+ elGroup.setAttribute("id", "properties-" + group.id);
+ elPropertiesList.appendChild(elGroup);
if (group.label !== undefined) {
let elLegend = document.createElement('div');
- elLegend.className = "section-header";
-
- elLegend.appendChild(createElementFromHTML(`...
//
//
- //
+ //
let elDropdowns = document.getElementsByTagName("select");
for (let dropDownIndex = 0; dropDownIndex < elDropdowns.length; ++dropDownIndex) {
let elDropdown = elDropdowns[dropDownIndex];
@@ -4342,7 +4588,7 @@ function loaded() {
li.addEventListener("click", setDropdownValue);
ul.appendChild(li);
}
-
+
let propertyID = elDropdown.getAttribute("propertyID");
let property = properties[propertyID];
property.elInput = dt;
@@ -4403,14 +4649,14 @@ function loaded() {
}
}));
}, false);
-
+
window.onblur = function() {
// Fake a change event
let ev = document.createEvent("HTMLEvents");
ev.initEvent("change", true, true);
document.activeElement.dispatchEvent(ev);
};
-
+
// For input and textarea elements, select all of the text on focus
let els = document.querySelectorAll("input, textarea");
for (let i = 0; i < els.length; ++i) {
@@ -4418,12 +4664,14 @@ function loaded() {
e.target.select();
};
}
-
- bindAllNonJSONEditorElements();
+
+ bindAllNonJSONEditorElements();
showGroupsForType("None");
+ showPage("base");
resetProperties();
- disableProperties();
+ disableProperties();
+
});
augmentSpinButtons();
@@ -4438,3 +4686,30 @@ function loaded() {
EventBridge.emitWebEvent(JSON.stringify({ type: 'propertiesPageReady' }));
}, 1000);
}
+
+function showOnTheSamePage(entityType) {
+ let numberOfTypes = entityType.length;
+ let matchingType = 0;
+ for (let i = 0; i < numberOfTypes; i++) {
+ if (GROUPS_PER_TYPE[entityType[i]].includes(currentTab)) {
+ matchingType = matchingType + 1;
+ }
+ }
+ if (matchingType !== numberOfTypes) {
+ currentTab = "base";
+ }
+ showPage(currentTab);
+}
+
+function showPage(id) {
+ currentTab = id;
+ Object.entries(elGroups).forEach(([groupKey, elGroup]) => {
+ if (groupKey === id) {
+ elGroup.style.display = "block";
+ document.getElementById("tab-" + groupKey).style.backgroundColor = "#2E2E2E";
+ } else {
+ elGroup.style.display = "none";
+ document.getElementById("tab-" + groupKey).style.backgroundColor = "#404040";
+ }
+ });
+}
diff --git a/scripts/system/create/entityProperties/html/tabs/base.png b/scripts/system/create/entityProperties/html/tabs/base.png
new file mode 100644
index 0000000000..9f656abe27
Binary files /dev/null and b/scripts/system/create/entityProperties/html/tabs/base.png differ
diff --git a/scripts/system/create/entityProperties/html/tabs/behavior.png b/scripts/system/create/entityProperties/html/tabs/behavior.png
new file mode 100644
index 0000000000..12662b8a1d
Binary files /dev/null and b/scripts/system/create/entityProperties/html/tabs/behavior.png differ
diff --git a/scripts/system/create/entityProperties/html/tabs/collision.png b/scripts/system/create/entityProperties/html/tabs/collision.png
new file mode 100644
index 0000000000..c9bed39385
Binary files /dev/null and b/scripts/system/create/entityProperties/html/tabs/collision.png differ
diff --git a/scripts/system/create/entityProperties/html/tabs/grid.png b/scripts/system/create/entityProperties/html/tabs/grid.png
new file mode 100644
index 0000000000..d9b8afb1ae
Binary files /dev/null and b/scripts/system/create/entityProperties/html/tabs/grid.png differ
diff --git a/scripts/system/create/entityProperties/html/tabs/image.png b/scripts/system/create/entityProperties/html/tabs/image.png
new file mode 100644
index 0000000000..ebd03648f6
Binary files /dev/null and b/scripts/system/create/entityProperties/html/tabs/image.png differ
diff --git a/scripts/system/create/entityProperties/html/tabs/light.png b/scripts/system/create/entityProperties/html/tabs/light.png
new file mode 100644
index 0000000000..bed097d54e
Binary files /dev/null and b/scripts/system/create/entityProperties/html/tabs/light.png differ
diff --git a/scripts/system/create/entityProperties/html/tabs/material.png b/scripts/system/create/entityProperties/html/tabs/material.png
new file mode 100644
index 0000000000..458c6bad48
Binary files /dev/null and b/scripts/system/create/entityProperties/html/tabs/material.png differ
diff --git a/scripts/system/create/entityProperties/html/tabs/model.png b/scripts/system/create/entityProperties/html/tabs/model.png
new file mode 100644
index 0000000000..79aa6b3830
Binary files /dev/null and b/scripts/system/create/entityProperties/html/tabs/model.png differ
diff --git a/scripts/system/create/entityProperties/html/tabs/particles.png b/scripts/system/create/entityProperties/html/tabs/particles.png
new file mode 100644
index 0000000000..6a0d47cacb
Binary files /dev/null and b/scripts/system/create/entityProperties/html/tabs/particles.png differ
diff --git a/scripts/system/create/entityProperties/html/tabs/particles_alpha.png b/scripts/system/create/entityProperties/html/tabs/particles_alpha.png
new file mode 100644
index 0000000000..8df2981f14
Binary files /dev/null and b/scripts/system/create/entityProperties/html/tabs/particles_alpha.png differ
diff --git a/scripts/system/create/entityProperties/html/tabs/particles_behavior.png b/scripts/system/create/entityProperties/html/tabs/particles_behavior.png
new file mode 100644
index 0000000000..6be9f90638
Binary files /dev/null and b/scripts/system/create/entityProperties/html/tabs/particles_behavior.png differ
diff --git a/scripts/system/create/entityProperties/html/tabs/particles_color.png b/scripts/system/create/entityProperties/html/tabs/particles_color.png
new file mode 100644
index 0000000000..ac66a902cf
Binary files /dev/null and b/scripts/system/create/entityProperties/html/tabs/particles_color.png differ
diff --git a/scripts/system/create/entityProperties/html/tabs/particles_constraints.png b/scripts/system/create/entityProperties/html/tabs/particles_constraints.png
new file mode 100644
index 0000000000..9c783acc9b
Binary files /dev/null and b/scripts/system/create/entityProperties/html/tabs/particles_constraints.png differ
diff --git a/scripts/system/create/entityProperties/html/tabs/particles_emit.png b/scripts/system/create/entityProperties/html/tabs/particles_emit.png
new file mode 100644
index 0000000000..223baa5d56
Binary files /dev/null and b/scripts/system/create/entityProperties/html/tabs/particles_emit.png differ
diff --git a/scripts/system/create/entityProperties/html/tabs/particles_size.png b/scripts/system/create/entityProperties/html/tabs/particles_size.png
new file mode 100644
index 0000000000..b51fe65cdf
Binary files /dev/null and b/scripts/system/create/entityProperties/html/tabs/particles_size.png differ
diff --git a/scripts/system/create/entityProperties/html/tabs/physics.png b/scripts/system/create/entityProperties/html/tabs/physics.png
new file mode 100644
index 0000000000..f0fc451d37
Binary files /dev/null and b/scripts/system/create/entityProperties/html/tabs/physics.png differ
diff --git a/scripts/system/create/entityProperties/html/tabs/scripts.png b/scripts/system/create/entityProperties/html/tabs/scripts.png
new file mode 100644
index 0000000000..2249af165b
Binary files /dev/null and b/scripts/system/create/entityProperties/html/tabs/scripts.png differ
diff --git a/scripts/system/create/entityProperties/html/tabs/shape.png b/scripts/system/create/entityProperties/html/tabs/shape.png
new file mode 100644
index 0000000000..5f3722caf7
Binary files /dev/null and b/scripts/system/create/entityProperties/html/tabs/shape.png differ
diff --git a/scripts/system/create/entityProperties/html/tabs/spatial.png b/scripts/system/create/entityProperties/html/tabs/spatial.png
new file mode 100644
index 0000000000..a280d0e822
Binary files /dev/null and b/scripts/system/create/entityProperties/html/tabs/spatial.png differ
diff --git a/scripts/system/create/entityProperties/html/tabs/text.png b/scripts/system/create/entityProperties/html/tabs/text.png
new file mode 100644
index 0000000000..405d8e4104
Binary files /dev/null and b/scripts/system/create/entityProperties/html/tabs/text.png differ
diff --git a/scripts/system/create/entityProperties/html/tabs/web.png b/scripts/system/create/entityProperties/html/tabs/web.png
new file mode 100644
index 0000000000..c1fc573619
Binary files /dev/null and b/scripts/system/create/entityProperties/html/tabs/web.png differ
diff --git a/scripts/system/create/entityProperties/html/tabs/zone.png b/scripts/system/create/entityProperties/html/tabs/zone.png
new file mode 100644
index 0000000000..276ba26799
Binary files /dev/null and b/scripts/system/create/entityProperties/html/tabs/zone.png differ
diff --git a/scripts/system/create/entityProperties/html/tabs/zone_ambient_light.png b/scripts/system/create/entityProperties/html/tabs/zone_ambient_light.png
new file mode 100644
index 0000000000..ff01b16aaf
Binary files /dev/null and b/scripts/system/create/entityProperties/html/tabs/zone_ambient_light.png differ
diff --git a/scripts/system/create/entityProperties/html/tabs/zone_avatar_priority.png b/scripts/system/create/entityProperties/html/tabs/zone_avatar_priority.png
new file mode 100644
index 0000000000..e91111fb9b
Binary files /dev/null and b/scripts/system/create/entityProperties/html/tabs/zone_avatar_priority.png differ
diff --git a/scripts/system/create/entityProperties/html/tabs/zone_bloom.png b/scripts/system/create/entityProperties/html/tabs/zone_bloom.png
new file mode 100644
index 0000000000..925654df81
Binary files /dev/null and b/scripts/system/create/entityProperties/html/tabs/zone_bloom.png differ
diff --git a/scripts/system/create/entityProperties/html/tabs/zone_haze.png b/scripts/system/create/entityProperties/html/tabs/zone_haze.png
new file mode 100644
index 0000000000..0cf96692f8
Binary files /dev/null and b/scripts/system/create/entityProperties/html/tabs/zone_haze.png differ
diff --git a/scripts/system/create/entityProperties/html/tabs/zone_key_light.png b/scripts/system/create/entityProperties/html/tabs/zone_key_light.png
new file mode 100644
index 0000000000..6527c65320
Binary files /dev/null and b/scripts/system/create/entityProperties/html/tabs/zone_key_light.png differ
diff --git a/scripts/system/create/entityProperties/html/tabs/zone_skybox.png b/scripts/system/create/entityProperties/html/tabs/zone_skybox.png
new file mode 100644
index 0000000000..17697a817b
Binary files /dev/null and b/scripts/system/create/entityProperties/html/tabs/zone_skybox.png differ
diff --git a/scripts/system/html/css/tabs.css b/scripts/system/html/css/tabs.css
new file mode 100644
index 0000000000..87e1c11ee8
--- /dev/null
+++ b/scripts/system/html/css/tabs.css
@@ -0,0 +1,77 @@
+/*
+// tabs.css
+//
+// Created by Alezia Kurdis on 27 Feb 2020
+// Copyright 2020 Project Athena contributors.
+//
+// Distributed under the Apache License, Version 2.0.
+// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+*/
+
+div.tabsContainer {
+ float: left;
+ width: 32px;
+ padding: 0px;
+}
+
+.tabsContainer button {
+ padding: 4px;
+ text-align: center;
+ cursor: pointer;
+ transition: 0.4s;
+ font-size: 14px;
+ background-color: #404040;
+ border-color: #404040;
+ border-width: 1px 0px 1px 1px;
+ border-radius: 5px 0px 0px 5px;
+ outline: none;
+}
+
+.tabsContainer button:hover {
+ background-color: #575757;
+}
+
+.tabsContainer button.active {
+ background-color: #2E2E2E;
+}
+
+div.labelTabHeader {
+ font-size: 20px;
+ font-weight: 700;
+ height: 40px;
+ color: #ffffff;
+}
+
+div.tab-section-header {
+ width: 100%;
+ padding: 5px;
+}
+
+table.tabsTableFrame {
+ width: 100%;
+ min-height: 352px;
+ display: block;
+}
+
+tr.tabsTrFrame {
+ width: 100%;
+}
+
+td.tabsFrame {
+ width: 32px;
+ vertical-align: top;
+ background-color: #575757;
+ padding: 0px;
+ border: 0px;
+}
+
+td.tabsPropertiesFrame {
+ width: 100%;
+ vertical-align: top;
+ border:0px;
+}
+
+div.tabsPropertiesPage {
+ min-height: 352px;
+ display: block;
+}
-
-
-
-
-
-
+
+ Properties
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
diff --git a/scripts/system/create/entityProperties/html/js/entityProperties.js b/scripts/system/create/entityProperties/html/js/entityProperties.js
index 64d44cc270..8c041d2563 100644
--- a/scripts/system/create/entityProperties/html/js/entityProperties.js
+++ b/scripts/system/create/entityProperties/html/js/entityProperties.js
@@ -1,8 +1,8 @@
// entityProperties.js
//
// Created by Ryan Huffman on 13 Nov 2014
-// Modified by David Back on 19 Oct 2018
// Copyright 2014 High Fidelity, Inc.
+// Copyright 2020 Vircadia contributors.
//
// Distributed under the Apache License, Version 2.0.
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
@@ -10,6 +10,8 @@
/* global alert, augmentSpinButtons, clearTimeout, console, document, Element,
EventBridge, JSONEditor, openEventBridge, setTimeout, window, _, $ */
+var currentTab = "base";
+
const DEGREES_TO_RADIANS = Math.PI / 180.0;
const NO_SELECTION = ",";
@@ -24,7 +26,7 @@ const PROPERTY_SELECTION_VISIBILITY = Object.freeze({
SINGLE_SELECTION: 1,
MULTIPLE_SELECTIONS: 2,
MULTI_DIFF_SELECTIONS: 4,
- ANY_SELECTIONS: 7, /* SINGLE_SELECTION | MULTIPLE_SELECTIONS | MULTI_DIFF_SELECTIONS */
+ ANY_SELECTIONS: 7 /* SINGLE_SELECTION | MULTIPLE_SELECTIONS | MULTI_DIFF_SELECTIONS */
});
// Multiple-selection behavior
@@ -34,12 +36,13 @@ const PROPERTY_MULTI_DISPLAY_MODE = Object.freeze({
* Comma separated values
* Limited for properties with type "string" or "textarea" and readOnly enabled
*/
- COMMA_SEPARATED_VALUES: 1,
+ COMMA_SEPARATED_VALUES: 1
});
const GROUPS = [
{
id: "base",
+ label: "ENTITY",
properties: [
{
label: NO_SELECTION,
@@ -112,12 +115,17 @@ const GROUPS = [
lines: "Wireframe",
},
propertyID: "primitiveMode",
- },
+ }/*,
+ {
+ label: "Render With Zones",
+ type: "multipleZonesSelection",
+ propertyID: "renderWithZones",
+ }*/
]
},
{
id: "shape",
- addToGroup: "base",
+ label: "SHAPE",
properties: [
{
label: "Shape",
@@ -133,11 +141,21 @@ const GROUPS = [
type: "color",
propertyID: "color",
},
+ {
+ label: "Alpha",
+ type: "number-draggable",
+ min: 0,
+ max: 1,
+ step: 0.01,
+ decimals: 2,
+ propertyID: "shapeAlpha",
+ propertyName: "alpha",
+ },
]
},
{
id: "text",
- addToGroup: "base",
+ label: "TEXT",
properties: [
{
label: "Text",
@@ -181,6 +199,36 @@ const GROUPS = [
unit: "m",
propertyID: "lineHeight",
},
+ {
+ label: "Font",
+ type: "string",
+ propertyID: "font",
+ },
+ {
+ label: "Effect",
+ type: "dropdown",
+ options: {
+ none: "None",
+ outline: "Outline",
+ "outline fill": "Outline with fill",
+ shadow: "Shadow"
+ },
+ propertyID: "textEffect",
+ },
+ {
+ label: "Effect Color",
+ type: "color",
+ propertyID: "textEffectColor",
+ },
+ {
+ label: "Effect Thickness",
+ type: "number-draggable",
+ min: 0.0,
+ max: 0.5,
+ step: 0.01,
+ decimals: 2,
+ propertyID: "textEffectThickness",
+ },
{
label: "Billboard Mode",
type: "dropdown",
@@ -220,12 +268,12 @@ const GROUPS = [
label: "Unlit",
type: "bool",
propertyID: "unlit",
- },
+ }
]
},
{
id: "zone",
- addToGroup: "base",
+ label: "ZONE",
properties: [
{
label: "Shape Type",
@@ -255,7 +303,13 @@ const GROUPS = [
label: "Filter",
type: "string",
propertyID: "filterURL",
- },
+ }
+ ]
+ },
+ {
+ id: "zone_key_light",
+ label: "ZONE KEY LIGHT",
+ properties: [
{
label: "Key Light",
type: "dropdown",
@@ -272,7 +326,7 @@ const GROUPS = [
{
label: "Light Intensity",
type: "number-draggable",
- min: 0,
+ min: -40,
max: 40,
step: 0.01,
decimals: 2,
@@ -324,7 +378,13 @@ const GROUPS = [
decimals: 2,
propertyID: "keyLight.shadowMaxDistance",
showPropertyRule: { "keyLightMode": "enabled" },
- },
+ }
+ ]
+ },
+ {
+ id: "zone_skybox",
+ label: "ZONE SKYBOX",
+ properties: [
{
label: "Skybox",
type: "dropdown",
@@ -342,7 +402,13 @@ const GROUPS = [
type: "string",
propertyID: "skybox.url",
showPropertyRule: { "skyboxMode": "enabled" },
- },
+ }
+ ]
+ },
+ {
+ id: "zone_ambient_light",
+ label: "ZONE AMBIENT LIGHT",
+ properties: [
{
label: "Ambient Light",
type: "dropdown",
@@ -352,7 +418,7 @@ const GROUPS = [
{
label: "Ambient Intensity",
type: "number-draggable",
- min: 0,
+ min: -200,
max: 200,
step: 0.1,
decimals: 2,
@@ -371,7 +437,13 @@ const GROUPS = [
className: "black", onClick: copySkyboxURLToAmbientURL } ],
propertyID: "copyURLToAmbient",
showPropertyRule: { "ambientLightMode": "enabled" },
- },
+ }
+ ]
+ },
+ {
+ id: "zone_haze",
+ label: "ZONE HAZE",
+ properties: [
{
label: "Haze",
type: "dropdown",
@@ -454,7 +526,13 @@ const GROUPS = [
decimals: 0,
propertyID: "haze.hazeGlareAngle",
showPropertyRule: { "hazeMode": "enabled" },
- },
+ }
+ ]
+ },
+ {
+ id: "zone_bloom",
+ label: "ZONE BLOOM",
+ properties: [
{
label: "Bloom",
type: "dropdown",
@@ -490,7 +568,13 @@ const GROUPS = [
decimals: 3,
propertyID: "bloom.bloomSize",
showPropertyRule: { "bloomMode": "enabled" },
- },
+ }
+ ]
+ },
+ {
+ id: "zone_avatar_priority",
+ label: "ZONE AVATAR PRIORITY",
+ properties: [
{
label: "Avatar Priority",
type: "dropdown",
@@ -503,12 +587,11 @@ const GROUPS = [
options: { inherit: "Inherit", disabled: "Off", enabled: "On" },
propertyID: "screenshare",
}
-
]
},
{
id: "model",
- addToGroup: "base",
+ label: "MODEL",
properties: [
{
label: "Model",
@@ -548,7 +631,7 @@ const GROUPS = [
propertyID: "animation.loop",
},
{
- label: "Allow Transition",
+ label: "Allow Translation",
type: "bool",
propertyID: "animation.allowTranslation",
},
@@ -593,12 +676,12 @@ const GROUPS = [
label: "Group Culled",
type: "bool",
propertyID: "groupCulled",
- },
+ }
]
},
{
id: "image",
- addToGroup: "base",
+ label: "IMAGE",
properties: [
{
label: "Image",
@@ -612,6 +695,16 @@ const GROUPS = [
propertyID: "imageColor",
propertyName: "color", // actual entity property name
},
+ {
+ label: "Alpha",
+ type: "number-draggable",
+ min: 0,
+ max: 1,
+ step: 0.01,
+ decimals: 2,
+ propertyID: "imageAlpha",
+ propertyName: "alpha",
+ },
{
label: "Emissive",
type: "bool",
@@ -636,12 +729,12 @@ const GROUPS = [
label: "Keep Aspect Ratio",
type: "bool",
propertyID: "keepAspectRatio",
- },
+ }
]
},
{
id: "web",
- addToGroup: "base",
+ label: "WEB",
properties: [
{
label: "Source",
@@ -676,17 +769,38 @@ const GROUPS = [
decimals: 0,
propertyID: "maxFPS",
},
+ {
+ label: "Billboard Mode",
+ type: "dropdown",
+ options: { none: "None", yaw: "Yaw", full: "Full"},
+ propertyID: "webBillboardMode",
+ propertyName: "billboardMode", // actual entity property name
+ },
+ {
+ label: "Input Mode",
+ type: "dropdown",
+ options: {
+ touch: "Touch events",
+ mouse: "Mouse events"
+ },
+ propertyID: "inputMode",
+ },
+ {
+ label: "Focus Highlight",
+ type: "bool",
+ propertyID: "showKeyboardFocusHighlight",
+ },
{
label: "Script URL",
type: "string",
propertyID: "scriptURL",
placeholder: "URL",
- },
+ }
]
},
{
id: "light",
- addToGroup: "base",
+ label: "LIGHT",
properties: [
{
label: "Light Color",
@@ -697,7 +811,7 @@ const GROUPS = [
{
label: "Intensity",
type: "number-draggable",
- min: 0,
+ min: -1000,
max: 10000,
step: 0.1,
decimals: 2,
@@ -732,12 +846,12 @@ const GROUPS = [
step: 0.01,
decimals: 2,
propertyID: "cutoff",
- },
+ }
]
},
{
id: "material",
- addToGroup: "base",
+ label: "MATERIAL",
properties: [
{
label: "Material URL",
@@ -806,12 +920,12 @@ const GROUPS = [
label: "Material Repeat",
type: "bool",
propertyID: "materialRepeat",
- },
+ }
]
},
{
id: "grid",
- addToGroup: "base",
+ label: "GRID",
properties: [
{
label: "Color",
@@ -839,12 +953,12 @@ const GROUPS = [
step: 0.01,
decimals: 2,
propertyID: "minorGridEvery",
- },
+ }
]
},
{
id: "particles",
- addToGroup: "base",
+ label: "PARTICLES",
properties: [
{
label: "Emit",
@@ -870,13 +984,12 @@ const GROUPS = [
type: "texture",
propertyID: "particleTextures",
propertyName: "textures", // actual entity property name
- },
+ }
]
},
{
id: "particles_emit",
- label: "EMIT",
- isMinor: true,
+ label: "PARTICLES EMIT",
properties: [
{
label: "Emit Rate",
@@ -943,13 +1056,12 @@ const GROUPS = [
label: "Trails",
type: "bool",
propertyID: "emitterShouldTrail",
- },
+ }
]
},
{
id: "particles_size",
- label: "SIZE",
- isMinor: true,
+ label: "PARTICLES SIZE",
properties: [
{
type: "triple",
@@ -978,7 +1090,7 @@ const GROUPS = [
decimals: 2,
propertyID: "radiusFinish",
fallbackProperty: "particleRadius",
- },
+ }
]
},
{
@@ -987,13 +1099,12 @@ const GROUPS = [
step: 0.01,
decimals: 2,
propertyID: "radiusSpread",
- },
+ }
]
},
{
id: "particles_color",
- label: "COLOR",
- isMinor: true,
+ label: "PARTICLES COLOR",
properties: [
{
type: "triple",
@@ -1017,7 +1128,7 @@ const GROUPS = [
type: "color",
propertyID: "colorFinish",
fallbackProperty: "color",
- },
+ }
]
},
{
@@ -1025,13 +1136,6 @@ const GROUPS = [
type: "color",
propertyID: "colorSpread",
},
- ]
- },
- {
- id: "particles_alpha",
- label: "ALPHA",
- isMinor: true,
- properties: [
{
type: "triple",
label: "Alpha",
@@ -1059,7 +1163,7 @@ const GROUPS = [
decimals: 3,
propertyID: "alphaFinish",
fallbackProperty: "alpha",
- },
+ }
]
},
{
@@ -1068,13 +1172,12 @@ const GROUPS = [
step: 0.001,
decimals: 3,
propertyID: "alphaSpread",
- },
+ }
]
},
{
- id: "particles_acceleration",
- label: "ACCELERATION",
- isMinor: true,
+ id: "particles_behavior",
+ label: "PARTICLES BEHAVIOR",
properties: [
{
label: "Emit Acceleration",
@@ -1094,13 +1197,6 @@ const GROUPS = [
subLabels: [ "x", "y", "z" ],
propertyID: "accelerationSpread",
},
- ]
- },
- {
- id: "particles_spin",
- label: "SPIN",
- isMinor: true,
- properties: [
{
type: "triple",
label: "Spin",
@@ -1134,7 +1230,7 @@ const GROUPS = [
unit: "deg",
propertyID: "spinFinish",
fallbackProperty: "particleSpin",
- },
+ }
]
},
{
@@ -1150,13 +1246,12 @@ const GROUPS = [
label: "Rotate with Entity",
type: "bool",
propertyID: "rotateWithEntity",
- },
+ }
]
},
{
id: "particles_constraints",
- label: "CONSTRAINTS",
- isMinor: true,
+ label: "PARTICLES CONSTRAINTS",
properties: [
{
type: "triple",
@@ -1180,7 +1275,7 @@ const GROUPS = [
multiplier: DEGREES_TO_RADIANS,
unit: "deg",
propertyID: "polarFinish",
- },
+ }
],
},
{
@@ -1205,7 +1300,7 @@ const GROUPS = [
multiplier: DEGREES_TO_RADIANS,
unit: "deg",
propertyID: "azimuthFinish",
- },
+ }
]
}
]
@@ -1305,7 +1400,7 @@ const GROUPS = [
buttons: [ { id: "selection", label: "Selection to Grid", className: "black", onClick: moveSelectionToGrid },
{ id: "all", label: "All to Grid", className: "black", onClick: moveAllToGrid } ],
propertyID: "alignToGrid",
- },
+ }
]
},
{
@@ -1375,6 +1470,18 @@ const GROUPS = [
type: "bool",
propertyID: "ignorePickIntersection",
},
+ {
+ label: "Lifetime",
+ type: "number",
+ unit: "s",
+ propertyID: "lifetime",
+ }
+ ]
+ },
+ {
+ id: "scripts",
+ label: "SCRIPTS",
+ properties: [
{
label: "Script",
type: "string",
@@ -1397,12 +1504,6 @@ const GROUPS = [
propertyID: "serverScriptStatus",
selectionVisibility: PROPERTY_SELECTION_VISIBILITY.SINGLE_SELECTION,
},
- {
- label: "Lifetime",
- type: "number",
- unit: "s",
- propertyID: "lifetime",
- },
{
label: "User Data",
type: "textarea",
@@ -1410,7 +1511,7 @@ const GROUPS = [
{ id: "edit", label: "Edit as JSON", className: "blue", onClick: newJSONEditor },
{ id: "save", label: "Save User Data", className: "black", onClick: saveUserData } ],
propertyID: "userData",
- },
+ }
]
},
{
@@ -1475,7 +1576,7 @@ const GROUPS = [
label: "Dynamic",
type: "bool",
propertyID: "dynamic",
- },
+ }
]
},
{
@@ -1551,26 +1652,37 @@ const GROUPS = [
unit: "m/s2",
propertyID: "gravity",
},
+ {
+ label: "Acceleration",
+ type: "vec3",
+ vec3Type: "xyz",
+ subLabels: [ "x", "y", "z" ],
+ step: 0.1,
+ decimals: 4,
+ unit: "m/s2",
+ propertyID: "acceleration",
+ }
]
},
];
const GROUPS_PER_TYPE = {
- None: [ 'base', 'spatial', 'behavior', 'collision', 'physics' ],
- Shape: [ 'base', 'shape', 'spatial', 'behavior', 'collision', 'physics' ],
- Text: [ 'base', 'text', 'spatial', 'behavior', 'collision', 'physics' ],
- Zone: [ 'base', 'zone', 'spatial', 'behavior', 'physics' ],
- Model: [ 'base', 'model', 'spatial', 'behavior', 'collision', 'physics' ],
- Image: [ 'base', 'image', 'spatial', 'behavior', 'collision', 'physics' ],
- Web: [ 'base', 'web', 'spatial', 'behavior', 'collision', 'physics' ],
- Light: [ 'base', 'light', 'spatial', 'behavior', 'collision', 'physics' ],
- Material: [ 'base', 'material', 'spatial', 'behavior' ],
- ParticleEffect: [ 'base', 'particles', 'particles_emit', 'particles_size', 'particles_color', 'particles_alpha',
- 'particles_acceleration', 'particles_spin', 'particles_constraints', 'spatial', 'behavior', 'physics' ],
- PolyLine: [ 'base', 'spatial', 'behavior', 'collision', 'physics' ],
- PolyVox: [ 'base', 'spatial', 'behavior', 'collision', 'physics' ],
- Grid: [ 'base', 'grid', 'spatial', 'behavior', 'physics' ],
- Multiple: [ 'base', 'spatial', 'behavior', 'collision', 'physics' ],
+ None: [ 'base', 'spatial', 'behavior', 'scripts', 'collision', 'physics' ],
+ Shape: [ 'base', 'shape', 'spatial', 'behavior', 'scripts', 'collision', 'physics' ],
+ Text: [ 'base', 'text', 'spatial', 'behavior', 'scripts', 'collision', 'physics' ],
+ Zone: [ 'base', 'zone', 'zone_key_light', 'zone_skybox', 'zone_ambient_light', 'zone_haze',
+ 'zone_bloom', 'zone_avatar_priority', 'spatial', 'behavior', 'scripts', 'physics' ],
+ Model: [ 'base', 'model', 'spatial', 'behavior', 'scripts', 'collision', 'physics' ],
+ Image: [ 'base', 'image', 'spatial', 'behavior', 'scripts', 'collision', 'physics' ],
+ Web: [ 'base', 'web', 'spatial', 'behavior', 'scripts', 'collision', 'physics' ],
+ Light: [ 'base', 'light', 'spatial', 'behavior', 'scripts', 'collision', 'physics' ],
+ Material: [ 'base', 'material', 'spatial', 'behavior', 'scripts', 'physics' ],
+ ParticleEffect: [ 'base', 'particles', 'particles_emit', 'particles_size', 'particles_color',
+ 'particles_behavior', 'particles_constraints', 'spatial', 'behavior', 'scripts', 'physics' ],
+ PolyLine: [ 'base', 'spatial', 'behavior', 'scripts', 'collision', 'physics' ],
+ PolyVox: [ 'base', 'spatial', 'behavior', 'scripts', 'collision', 'physics' ],
+ Grid: [ 'base', 'grid', 'spatial', 'behavior', 'scripts', 'physics' ],
+ Multiple: [ 'base', 'spatial', 'behavior', 'scripts', 'collision', 'physics' ],
};
const EDITOR_TIMEOUT_DURATION = 1500;
@@ -1637,7 +1749,7 @@ let selectedEntityIDs = new Set();
let currentSelections = [];
let createAppTooltip = new CreateAppTooltip();
let currentSpaceMode = PROPERTY_SPACE_MODE.LOCAL;
-
+let zonesList = [];
function createElementFromHTML(htmlString) {
let elTemplate = document.createElement('template');
@@ -1654,7 +1766,7 @@ function isFlagSet(value, flag) {
*/
function getPropertyInputElement(propertyID) {
- let property = properties[propertyID];
+ let property = properties[propertyID];
switch (property.data.type) {
case 'string':
case 'number':
@@ -1663,6 +1775,8 @@ function getPropertyInputElement(propertyID) {
case 'textarea':
case 'texture':
return property.elInput;
+ case 'multipleZonesSelection':
+ return property.elInput;
case 'number-draggable':
return property.elNumber.elInput;
case 'rect':
@@ -1703,12 +1817,7 @@ function disableChildren(el, selector) {
function enableProperties() {
enableChildren(document.getElementById("properties-list"), ENABLE_DISABLE_SELECTOR);
enableChildren(document, ".colpick");
-
- let elLocked = getPropertyInputElement("locked");
- if (elLocked.checked === false) {
- removeStaticUserData();
- removeStaticMaterialData();
- }
+ enableAllMultipleZoneSelector();
}
function disableProperties() {
@@ -1717,16 +1826,7 @@ function disableProperties() {
for (let pickKey in colorPickers) {
colorPickers[pickKey].colpickHide();
}
-
- let elLocked = getPropertyInputElement("locked");
- if (elLocked.checked === true) {
- if ($('#property-userData-editor').css('display') === "block") {
- showStaticUserData();
- }
- if ($('#property-materialData-editor').css('display') === "block") {
- showStaticMaterialData();
- }
- }
+ disableAllMultipleZoneSelector();
}
function showPropertyElement(propertyID, show) {
@@ -1739,7 +1839,7 @@ function setPropertyVisibility(property, visible) {
function resetProperties() {
for (let propertyID in properties) {
- let property = properties[propertyID];
+ let property = properties[propertyID];
let propertyData = property.data;
switch (propertyData.type) {
@@ -1801,6 +1901,12 @@ function resetProperties() {
setTextareaScrolling(property.elInput);
break;
}
+ case 'multipleZonesSelection': {
+ property.elInput.classList.remove('multi-diff');
+ property.elInput.value = "[]";
+ setZonesSelectionData(property.elInput, false);
+ break;
+ }
case 'icon': {
property.elSpan.style.display = "none";
break;
@@ -1816,7 +1922,7 @@ function resetProperties() {
break;
}
}
-
+
let showPropertyRules = properties[propertyID].showPropertyRules;
if (showPropertyRules !== undefined) {
for (let propertyToHide in showPropertyRules) {
@@ -1838,9 +1944,15 @@ function resetServerScriptStatus() {
function showGroupsForType(type) {
if (type === "Box" || type === "Sphere") {
showGroupsForTypes(["Shape"]);
+ showOnTheSamePage(["Shape"]);
return;
}
+ if (type === "None") {
+ showGroupsForTypes(["None"]);
+ return;
+ }
showGroupsForTypes([type]);
+ showOnTheSamePage([type]);
}
function getGroupsForTypes(types) {
@@ -1854,9 +1966,15 @@ function getGroupsForTypes(types) {
function showGroupsForTypes(types) {
Object.entries(elGroups).forEach(([groupKey, elGroup]) => {
if (types.map(type => GROUPS_PER_TYPE[type].includes(groupKey)).every(function (hasGroup) { return hasGroup; })) {
- elGroup.style.display = "block";
+ elGroup.style.display = "none";
+ if (types !== "None") {
+ document.getElementById("tab-" + groupKey).style.display = "block";
+ } else {
+ document.getElementById("tab-" + groupKey).style.display = "none";
+ }
} else {
elGroup.style.display = "none";
+ document.getElementById("tab-" + groupKey).style.display = "none";
}
});
}
@@ -2253,7 +2371,7 @@ function updateCheckedSubProperty(propertyName, propertyMultiValue, subPropertyE
* PROPERTY ELEMENT CREATION FUNCTIONS
*/
-function createStringProperty(property, elProperty) {
+function createStringProperty(property, elProperty) {
let elementID = property.elementID;
let propertyData = property.data;
@@ -2266,12 +2384,12 @@ function createStringProperty(property, elProperty) {
${propertyData.readOnly ? 'readonly' : ''}/>
`);
-
+
elInput.addEventListener('change', createEmitTextPropertyUpdateFunction(property));
if (propertyData.onChange !== undefined) {
elInput.addEventListener('change', propertyData.onChange);
}
-
+
let elMultiDiff = document.createElement('span');
elMultiDiff.className = "multi-diff";
@@ -2282,7 +2400,7 @@ function createStringProperty(property, elProperty) {
if (propertyData.buttons !== undefined) {
addButtons(elProperty, elementID, propertyData.buttons, false);
}
-
+
return elInput;
}
@@ -2290,9 +2408,9 @@ function createBoolProperty(property, elProperty) {
let propertyName = property.name;
let elementID = property.elementID;
let propertyData = property.data;
-
+
elProperty.className = "checkbox";
-
+
if (propertyData.glyph !== undefined) {
let elSpan = document.createElement('span');
elSpan.innerHTML = propertyData.glyph;
@@ -2521,7 +2639,7 @@ function createVec3Property(property, elProperty) {
let propertyData = property.data;
elProperty.className = propertyData.vec3Type + " fstuple";
-
+
let elNumberX = createTupleNumberInput(property, propertyData.subLabels[VECTOR_ELEMENTS.X_NUMBER]);
let elNumberY = createTupleNumberInput(property, propertyData.subLabels[VECTOR_ELEMENTS.Y_NUMBER]);
let elNumberZ = createTupleNumberInput(property, propertyData.subLabels[VECTOR_ELEMENTS.Z_NUMBER]);
@@ -2536,7 +2654,7 @@ function createVec3Property(property, elProperty) {
elNumberX.setMultiDiffStepFunction(createMultiDiffStepFunction(property, 'x'));
elNumberY.setMultiDiffStepFunction(createMultiDiffStepFunction(property, 'y'));
elNumberZ.setMultiDiffStepFunction(createMultiDiffStepFunction(property, 'z'));
-
+
let elResult = [];
elResult[VECTOR_ELEMENTS.X_NUMBER] = elNumberX;
elResult[VECTOR_ELEMENTS.Y_NUMBER] = elNumberY;
@@ -2544,11 +2662,11 @@ function createVec3Property(property, elProperty) {
return elResult;
}
-function createVec2Property(property, elProperty) {
+function createVec2Property(property, elProperty) {
let propertyData = property.data;
elProperty.className = propertyData.vec2Type + " fstuple";
-
+
let elTuple = document.createElement('div');
elTuple.className = "tuple";
@@ -2585,19 +2703,19 @@ function createColorProperty(property, elProperty) {
let propertyName = property.name;
let elementID = property.elementID;
let propertyData = property.data;
-
+
elProperty.className += " rgb fstuple";
-
+
let elColorPicker = document.createElement('div');
elColorPicker.className = "color-picker";
elColorPicker.setAttribute("id", elementID);
-
+
let elTuple = document.createElement('div');
elTuple.className = "tuple";
-
+
elProperty.appendChild(elColorPicker);
elProperty.appendChild(elTuple);
-
+
if (propertyData.min === undefined) {
propertyData.min = COLOR_MIN;
}
@@ -2607,19 +2725,19 @@ function createColorProperty(property, elProperty) {
if (propertyData.step === undefined) {
propertyData.step = COLOR_STEP;
}
-
+
let elNumberR = createTupleNumberInput(property, "red");
let elNumberG = createTupleNumberInput(property, "green");
let elNumberB = createTupleNumberInput(property, "blue");
elTuple.appendChild(elNumberR.elDiv);
elTuple.appendChild(elNumberG.elDiv);
elTuple.appendChild(elNumberB.elDiv);
-
+
let valueChangeFunction = createEmitColorPropertyUpdateFunction(property);
elNumberR.setValueChangeFunction(valueChangeFunction);
elNumberG.setValueChangeFunction(valueChangeFunction);
elNumberB.setValueChangeFunction(valueChangeFunction);
-
+
let colorPickerID = "#" + elementID;
colorPickers[colorPickerID] = $(colorPickerID).colpick({
colorScheme: 'dark',
@@ -2648,7 +2766,7 @@ function createColorProperty(property, elProperty) {
}
}
});
-
+
let elResult = [];
elResult[COLOR_ELEMENTS.COLOR_PICKER] = elColorPicker;
elResult[COLOR_ELEMENTS.RED_NUMBER] = elNumberR;
@@ -2673,26 +2791,26 @@ function createDropdownProperty(property, propertyID, elProperty) {
option.text = propertyData.options[optionKey];
elInput.add(option);
}
-
+
elInput.addEventListener('change', createEmitTextPropertyUpdateFunction(property));
elProperty.appendChild(elInput);
-
+
return elInput;
}
-function createTextareaProperty(property, elProperty) {
+function createTextareaProperty(property, elProperty) {
let elementID = property.elementID;
let propertyData = property.data;
-
+
elProperty.className = "textarea";
-
+
let elInput = document.createElement('textarea');
elInput.setAttribute("id", elementID);
if (propertyData.readOnly) {
elInput.readOnly = true;
- }
-
+ }
+
elInput.addEventListener('change', createEmitTextPropertyUpdateFunction(property));
let elMultiDiff = document.createElement('span');
@@ -2700,42 +2818,42 @@ function createTextareaProperty(property, elProperty) {
elProperty.appendChild(elInput);
elProperty.appendChild(elMultiDiff);
-
+
if (propertyData.buttons !== undefined) {
addButtons(elProperty, elementID, propertyData.buttons, true);
}
-
+
return elInput;
}
-function createIconProperty(property, elProperty) {
+function createIconProperty(property, elProperty) {
let elementID = property.elementID;
elProperty.className = "value";
-
+
let elSpan = document.createElement('span');
elSpan.setAttribute("id", elementID + "-icon");
elSpan.className = 'icon';
elProperty.appendChild(elSpan);
-
+
return elSpan;
}
-function createTextureProperty(property, elProperty) {
+function createTextureProperty(property, elProperty) {
let elementID = property.elementID;
-
+
elProperty.className = "texture";
-
+
let elDiv = document.createElement("div");
let elImage = document.createElement("img");
elDiv.className = "texture-image no-texture";
elDiv.appendChild(elImage);
-
+
let elInput = document.createElement('input');
elInput.setAttribute("id", elementID);
elInput.setAttribute("type", "text");
-
+
let imageLoad = function(url) {
elDiv.style.display = null;
if (url.slice(0, 5).toLowerCase() === "atp:/") {
@@ -2772,7 +2890,7 @@ function createTextureProperty(property, elProperty) {
elMultiDiff.className = "multi-diff";
elProperty.appendChild(elMultiDiff);
elProperty.appendChild(elDiv);
-
+
let elResult = [];
elResult[TEXTURE_ELEMENTS.IMAGE] = elImage;
elResult[TEXTURE_ELEMENTS.TEXT_INPUT] = elInput;
@@ -2788,23 +2906,23 @@ function createButtonsProperty(property, elProperty) {
if (propertyData.buttons !== undefined) {
addButtons(elProperty, elementID, propertyData.buttons, false);
}
-
+
return elProperty;
}
function createDynamicMultiselectProperty(property, elProperty) {
let elementID = property.elementID;
let propertyData = property.data;
-
+
elProperty.className = "dynamic-multiselect";
-
+
let elDivOptions = document.createElement('div');
elDivOptions.setAttribute("id", elementID + "-options");
elDivOptions.style = "overflow-y:scroll;max-height:160px;";
-
+
let elDivButtons = document.createElement('div');
elDivButtons.setAttribute("id", elDivOptions.getAttribute("id") + "-buttons");
-
+
let elLabel = document.createElement('label');
elLabel.innerText = "No Options";
elDivOptions.appendChild(elLabel);
@@ -2812,10 +2930,10 @@ function createDynamicMultiselectProperty(property, elProperty) {
let buttons = [ { id: "selectAll", label: "Select All", className: "black", onClick: selectAllMaterialTarget },
{ id: "clearAll", label: "Clear All", className: "black", onClick: clearAllMaterialTarget } ];
addButtons(elDivButtons, elementID, buttons, false);
-
+
elProperty.appendChild(elDivOptions);
elProperty.appendChild(elDivButtons);
-
+
return elDivOptions;
}
@@ -2833,13 +2951,13 @@ function createTupleNumberInput(property, subLabel) {
let propertyElementID = property.elementID;
let propertyData = property.data;
let elementID = propertyElementID + "-" + subLabel.toLowerCase();
-
+
let elLabel = document.createElement('label');
elLabel.className = "sublabel " + subLabel;
elLabel.innerText = subLabel[0].toUpperCase() + subLabel.slice(1);
elLabel.setAttribute("for", elementID);
elLabel.style.visibility = "visible";
-
+
let dragStartFunction = createDragStartFunction(property);
let dragEndFunction = createDragEndFunction(property);
let elDraggableNumber = new DraggableNumber(propertyData.min, propertyData.max, propertyData.step,
@@ -2847,14 +2965,14 @@ function createTupleNumberInput(property, subLabel) {
elDraggableNumber.elInput.setAttribute("id", elementID);
elDraggableNumber.elDiv.className += " fstuple";
elDraggableNumber.elDiv.insertBefore(elLabel, elDraggableNumber.elLeftArrow);
-
+
return elDraggableNumber;
}
function addButtons(elProperty, propertyID, buttons, newRow) {
let elDiv = document.createElement('div');
elDiv.className = "row";
-
+
buttons.forEach(function(button) {
let elButton = document.createElement('input');
elButton.className = button.className;
@@ -2876,7 +2994,7 @@ function addButtons(elProperty, propertyID, buttons, newRow) {
}
function createProperty(propertyData, propertyElementID, propertyName, propertyID, elProperty) {
- let property = {
+ let property = {
data: propertyData,
elementID: propertyElementID,
name: propertyName,
@@ -2938,6 +3056,10 @@ function createProperty(propertyData, propertyElementID, propertyName, propertyI
property.elInput = createTextareaProperty(property, elProperty);
break;
}
+ case 'multipleZonesSelection': {
+ property.elInput = createZonesSelection(property, elProperty);
+ break;
+ }
case 'icon': {
property.elSpan = createIconProperty(property, elProperty);
break;
@@ -3167,19 +3289,6 @@ function hideUserDataSaved() {
$('#property-userData-saved').hide();
}
-function showStaticUserData() {
- if (editor !== null) {
- let $propertyUserDataStatic = $('#property-userData-static');
- $propertyUserDataStatic.show();
- $propertyUserDataStatic.css('height', $('#property-userData-editor').height());
- $propertyUserDataStatic.text(editor.getText());
- }
-}
-
-function removeStaticUserData() {
- $('#property-userData-static').hide();
-}
-
function setEditorJSON(json) {
editor.set(json);
if (editor.hasOwnProperty('expandAll')) {
@@ -3332,19 +3441,6 @@ function hideMaterialDataSaved() {
$('#property-materialData-saved').hide();
}
-function showStaticMaterialData() {
- if (materialEditor !== null) {
- let $propertyMaterialDataStatic = $('#property-materialData-static');
- $propertyMaterialDataStatic.show();
- $propertyMaterialDataStatic.css('height', $('#property-materialData-editor').height());
- $propertyMaterialDataStatic.text(materialEditor.getText());
- }
-}
-
-function removeStaticMaterialData() {
- $('#property-materialData-static').hide();
-}
-
function setMaterialEditorJSON(json) {
materialEditor.set(json);
if (materialEditor.hasOwnProperty('expandAll')) {
@@ -3456,6 +3552,175 @@ function setTextareaScrolling(element) {
element.setAttribute("scrolling", isScrolling ? "true" : "false");
}
+/**
+ * ZONE SELECTOR FUNCTIONS
+ */
+
+function enableAllMultipleZoneSelector() {
+ let allMultiZoneSelectors = document.querySelectorAll(".hiddenMultiZonesSelection");
+ let i, propId;
+ for (i = 0; i < allMultiZoneSelectors.length; i++) {
+ propId = allMultiZoneSelectors[i].id;
+ displaySelectedZones(propId, true);
+ }
+}
+
+function disableAllMultipleZoneSelector() {
+ let allMultiZoneSelectors = document.querySelectorAll(".hiddenMultiZonesSelection");
+ let i, propId;
+ for (i = 0; i < allMultiZoneSelectors.length; i++) {
+ propId = allMultiZoneSelectors[i].id;
+ displaySelectedZones(propId, false);
+ }
+}
+
+function requestZoneList() {
+ EventBridge.emitWebEvent(JSON.stringify({
+ type: "zoneListRequest"
+ }));
+}
+
+function addZoneToZonesSelection(propertyId) {
+ let hiddenField = document.getElementById(propertyId);
+ if (JSON.stringify(hiddenField.value) === '"undefined"') {
+ hiddenField.value = "[]";
+ }
+ let selectedZones = JSON.parse(hiddenField.value);
+ let zoneToAdd = document.getElementById("zones-select-" + propertyId).value;
+ if (!selectedZones.includes(zoneToAdd)) {
+ selectedZones.push(zoneToAdd);
+ }
+ hiddenField.value = JSON.stringify(selectedZones);
+ displaySelectedZones(propertyId, true);
+ let propertyName = propertyId.replace("property-", "");
+ updateProperty(propertyName, selectedZones, false);
+}
+
+function removeZoneFromZonesSelection(propertyId, zoneId) {
+ let hiddenField = document.getElementById(propertyId);
+ if (JSON.stringify(hiddenField.value) === '"undefined"') {
+ hiddenField.value = "[]";
+ }
+ let selectedZones = JSON.parse(hiddenField.value);
+ let index = selectedZones.indexOf(zoneId);
+ if (index > -1) {
+ selectedZones.splice(index, 1);
+ }
+ hiddenField.value = JSON.stringify(selectedZones);
+ displaySelectedZones(propertyId, true);
+ let propertyName = propertyId.replace("property-", "");
+ updateProperty(propertyName, selectedZones, false);
+}
+
+function displaySelectedZones(propertyId, isEditable) {
+ let i,j, name, listedZoneInner, hiddenData, isMultiple;
+ hiddenData = document.getElementById(propertyId).value;
+ if (JSON.stringify(hiddenData) === '"undefined"') {
+ isMultiple = true;
+ hiddenData = "[]";
+ } else {
+ isMultiple = false;
+ }
+ let selectedZones = JSON.parse(hiddenData);
+ listedZoneInner = "
+
+
-
-
+
+
+
+
+
+
+
+
+
+
+
| + + | +
+
+
+
+ |
+
| [ WARNING: Any changes will apply to all. ] | |
| " + name + " | ";
+ listedZoneInner += " |
| " + name + " |
${group.label}
`));
-
- let elSpan = document.createElement('span');
- elSpan.className = "collapse-icon";
- elSpan.innerText = "M";
- elLegend.appendChild(elSpan);
+ elLegend.className = "tab-section-header";
+ elLegend.appendChild(createElementFromHTML(`${group.label}
`));
elGroup.appendChild(elLegend);
+ elTabs.appendChild(createElementFromHTML(''));
}
-
+
group.properties.forEach(function(propertyData) {
let propertyType = propertyData.type;
- let propertyID = propertyData.propertyID;
+ let propertyID = propertyData.propertyID;
let propertyName = propertyData.propertyName !== undefined ? propertyData.propertyName : propertyID;
let propertySpaceMode = propertyData.spaceMode !== undefined ? propertyData.spaceMode : PROPERTY_SPACE_MODE.ALL;
let propertyElementID = "property-" + propertyID;
propertyElementID = propertyElementID.replace('.', '-');
-
+
let elContainer, elLabel;
-
+
if (propertyData.replaceID === undefined) {
// Create subheader, or create new property and append it.
if (propertyType === "sub-header") {
@@ -4077,15 +4345,15 @@ function loaded() {
property.elContainer = elContainer;
property.spaceMode = propertySpaceMode;
property.group_id = group.id;
-
+
if (property.type !== 'placeholder') {
properties[propertyID] = property;
- }
+ }
if (propertyData.type === 'number' || propertyData.type === 'number-draggable' ||
propertyData.type === 'vec2' || propertyData.type === 'vec3' || propertyData.type === 'rect') {
propertyRangeRequests.push(propertyID);
}
-
+
let showPropertyRule = propertyData.showPropertyRule;
if (showPropertyRule !== undefined) {
let dependentProperty = Object.keys(showPropertyRule)[0];
@@ -4100,15 +4368,12 @@ function loaded() {
}
}
});
-
+
elGroups[group.id] = elGroup;
});
- let minorSections = document.querySelectorAll(".section.minor");
- minorSections[minorSections.length - 1].className += " last";
-
updateVisibleSpaceModeProperties();
-
+
if (window.EventBridge !== undefined) {
EventBridge.scriptEventReceived.connect(function(data) {
data = JSON.parse(data);
@@ -4180,6 +4445,9 @@ function loaded() {
if (data.entityID === getFirstSelectedID()) {
setMaterialTargetData(data.materialTargetData);
}
+ } else if (data.type === 'zoneListRequest') {
+ zonesList = data.zones;
+ updateAllZoneSelect();
}
});
@@ -4187,7 +4455,7 @@ function loaded() {
EventBridge.emitWebEvent(JSON.stringify({ type: 'tooltipsRequest' }));
EventBridge.emitWebEvent(JSON.stringify({ type: 'propertyRangeRequest', properties: propertyRangeRequests }));
}
-
+
// Server Script Status
let elServerScriptStatusOuter = document.getElementById('div-property-serverScriptStatus');
let elServerScriptStatusContainer = document.getElementById('div-property-serverScriptStatus').childNodes[1];
@@ -4196,7 +4464,7 @@ function loaded() {
let elServerScriptStatus = document.createElement('div');
elServerScriptStatus.setAttribute("id", serverScriptStatusElementID);
elServerScriptStatusContainer.appendChild(elServerScriptStatus);
-
+
// Server Script Error
let elServerScripts = getPropertyInputElement("serverScripts");
let elDiv = document.createElement('div');
@@ -4206,18 +4474,16 @@ function loaded() {
elServerScriptError.setAttribute("id", serverScriptErrorElementID);
elDiv.appendChild(elServerScriptError);
elServerScriptStatusContainer.appendChild(elDiv);
-
+
let elScript = getPropertyInputElement("script");
elScript.parentNode.className = "url refresh";
elServerScripts.parentNode.className = "url refresh";
-
+
// User Data
let userDataProperty = properties["userData"];
let elUserData = userDataProperty.elInput;
let userDataElementID = userDataProperty.elementID;
elDiv = elUserData.parentNode;
- let elStaticUserData = document.createElement('div');
- elStaticUserData.setAttribute("id", userDataElementID + "-static");
let elUserDataEditor = document.createElement('div');
elUserDataEditor.setAttribute("id", userDataElementID + "-editor");
let elUserDataEditorStatus = document.createElement('div');
@@ -4226,17 +4492,14 @@ function loaded() {
elUserDataSaved.setAttribute("id", userDataElementID + "-saved");
elUserDataSaved.innerText = "Saved!";
elDiv.childNodes[JSON_EDITOR_ROW_DIV_INDEX].appendChild(elUserDataSaved);
- elDiv.insertBefore(elStaticUserData, elUserData);
elDiv.insertBefore(elUserDataEditor, elUserData);
elDiv.insertBefore(elUserDataEditorStatus, elUserData);
-
+
// Material Data
let materialDataProperty = properties["materialData"];
let elMaterialData = materialDataProperty.elInput;
let materialDataElementID = materialDataProperty.elementID;
elDiv = elMaterialData.parentNode;
- let elStaticMaterialData = document.createElement('div');
- elStaticMaterialData.setAttribute("id", materialDataElementID + "-static");
let elMaterialDataEditor = document.createElement('div');
elMaterialDataEditor.setAttribute("id", materialDataElementID + "-editor");
let elMaterialDataEditorStatus = document.createElement('div');
@@ -4245,26 +4508,9 @@ function loaded() {
elMaterialDataSaved.setAttribute("id", materialDataElementID + "-saved");
elMaterialDataSaved.innerText = "Saved!";
elDiv.childNodes[JSON_EDITOR_ROW_DIV_INDEX].appendChild(elMaterialDataSaved);
- elDiv.insertBefore(elStaticMaterialData, elMaterialData);
elDiv.insertBefore(elMaterialDataEditor, elMaterialData);
elDiv.insertBefore(elMaterialDataEditorStatus, elMaterialData);
-
- // Collapsible sections
- let elCollapsible = document.getElementsByClassName("collapse-icon");
- let toggleCollapsedEvent = function(event) {
- let element = this.parentNode.parentNode;
- let isCollapsed = element.dataset.collapsed !== "true";
- element.dataset.collapsed = isCollapsed ? "true" : false;
- element.setAttribute("collapsed", isCollapsed ? "true" : "false");
- this.textContent = isCollapsed ? "L" : "M";
- };
-
- for (let collapseIndex = 0, numCollapsibles = elCollapsible.length; collapseIndex < numCollapsibles; ++collapseIndex) {
- let curCollapsibleElement = elCollapsible[collapseIndex];
- curCollapsibleElement.addEventListener("click", toggleCollapsedEvent, true);
- }
-
// Textarea scrollbars
let elTextareas = document.getElementsByTagName("TEXTAREA");
@@ -4281,7 +4527,7 @@ function loaded() {
event; mouseup is a partial stand-in but doesn't handle resizing if mouse moves outside textarea rectangle. */
curTextAreaElement.addEventListener("mouseup", textareaOnChangeEvent, false);
}
-
+
// Dropdowns
// For each dropdown the following replacement is created in place of the original dropdown...
// Structure created:
@@ -4293,7 +4539,7 @@ function loaded() {
//