mirror of
https://thingvellir.net/git/overte
synced 2025-03-27 23:52:03 +01:00
Add new property "renderWithZones"
Add the new property "renderWithZones" to the Create App. For this, a new type of renderer type has been added: "Multiple Zones Selector". (Required for the PR#78)
This commit is contained in:
Alezia Kurdis
GitHub
parent
16c5d8c051
commit
4a3405484c
1 changed files with 285 additions and 20 deletions
|
|
@ -1,15 +1,8 @@
|
|||
//VERSION 2.0
|
||||
// Modified by Alezia Kurdis on on 02/27/2020
|
||||
// for "Project Athena"
|
||||
//
|
||||
// Addition of a tab mechanism instead of collapsible sections to reduce the scrolling.
|
||||
//
|
||||
//VERSION 1.0
|
||||
// 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
|
||||
|
|
@ -122,6 +115,11 @@ const GROUPS = [
|
|||
lines: "Wireframe",
|
||||
},
|
||||
propertyID: "primitiveMode",
|
||||
},
|
||||
{
|
||||
label: "Render With Zones",
|
||||
type: "multipleZonesSelection",
|
||||
propertyID: "renderWithZones",
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -142,7 +140,17 @@ const GROUPS = [
|
|||
label: "Color",
|
||||
type: "color",
|
||||
propertyID: "color",
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "Alpha",
|
||||
type: "number-draggable",
|
||||
min: 0,
|
||||
max: 1,
|
||||
step: 0.01,
|
||||
decimals: 2,
|
||||
propertyID: "shapeAlpha",
|
||||
propertyName: "alpha",
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
@ -191,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",
|
||||
|
|
@ -288,7 +326,7 @@ const GROUPS = [
|
|||
{
|
||||
label: "Light Intensity",
|
||||
type: "number-draggable",
|
||||
min: 0,
|
||||
min: -40,
|
||||
max: 40,
|
||||
step: 0.01,
|
||||
decimals: 2,
|
||||
|
|
@ -380,7 +418,7 @@ const GROUPS = [
|
|||
{
|
||||
label: "Ambient Intensity",
|
||||
type: "number-draggable",
|
||||
min: 0,
|
||||
min: -200,
|
||||
max: 200,
|
||||
step: 0.1,
|
||||
decimals: 2,
|
||||
|
|
@ -587,7 +625,7 @@ const GROUPS = [
|
|||
propertyID: "animation.loop",
|
||||
},
|
||||
{
|
||||
label: "Allow Transition",
|
||||
label: "Allow Translation",
|
||||
type: "bool",
|
||||
propertyID: "animation.allowTranslation",
|
||||
},
|
||||
|
|
@ -651,6 +689,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",
|
||||
|
|
@ -715,6 +763,27 @@ 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",
|
||||
|
|
@ -736,7 +805,7 @@ const GROUPS = [
|
|||
{
|
||||
label: "Intensity",
|
||||
type: "number-draggable",
|
||||
min: 0,
|
||||
min: -1000,
|
||||
max: 10000,
|
||||
step: 0.1,
|
||||
decimals: 2,
|
||||
|
|
@ -1601,11 +1670,10 @@ const GROUPS_PER_TYPE = {
|
|||
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' ],
|
||||
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' ],
|
||||
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' ],
|
||||
|
|
@ -1675,7 +1743,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');
|
||||
|
|
@ -1701,6 +1769,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':
|
||||
|
|
@ -1741,6 +1811,7 @@ function disableChildren(el, selector) {
|
|||
function enableProperties() {
|
||||
enableChildren(document.getElementById("properties-list"), ENABLE_DISABLE_SELECTOR);
|
||||
enableChildren(document, ".colpick");
|
||||
enableAllMultipleZoneSelector();
|
||||
}
|
||||
|
||||
function disableProperties() {
|
||||
|
|
@ -1749,6 +1820,7 @@ function disableProperties() {
|
|||
for (let pickKey in colorPickers) {
|
||||
colorPickers[pickKey].colpickHide();
|
||||
}
|
||||
disableAllMultipleZoneSelector();
|
||||
}
|
||||
|
||||
function showPropertyElement(propertyID, show) {
|
||||
|
|
@ -1823,6 +1895,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;
|
||||
|
|
@ -1860,7 +1938,7 @@ function resetServerScriptStatus() {
|
|||
function showGroupsForType(type) {
|
||||
if (type === "Box" || type === "Sphere") {
|
||||
showGroupsForTypes(["Shape"]);
|
||||
showOnTheSamePage("Shape");
|
||||
showOnTheSamePage(["Shape"]);
|
||||
return;
|
||||
}
|
||||
if (type === "None") {
|
||||
|
|
@ -1868,7 +1946,7 @@ function showGroupsForType(type) {
|
|||
return;
|
||||
}
|
||||
showGroupsForTypes([type]);
|
||||
showOnTheSamePage(type);
|
||||
showOnTheSamePage([type]);
|
||||
}
|
||||
|
||||
function getGroupsForTypes(types) {
|
||||
|
|
@ -2972,6 +3050,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;
|
||||
|
|
@ -3464,6 +3546,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 = "<table>";
|
||||
if (selectedZones.length === 0) {
|
||||
if (!isMultiple) {
|
||||
listedZoneInner += "<tr><td class='zoneItem'> </td><td> </td></tr>";
|
||||
} else {
|
||||
listedZoneInner += "<tr><td class='zoneItem'>[ WARNING: Any changes will apply to all ]</td><td> </td></tr>";
|
||||
}
|
||||
} else {
|
||||
for ( i = 0; i < selectedZones.length; i++ ) {
|
||||
name = "{ERROR: NOT FOUND}";
|
||||
for ( j = 0; j < zonesList.length; j++ ) {
|
||||
if (selectedZones[i] === zonesList[j].id) {
|
||||
if (zonesList[j].name !== "") {
|
||||
name = zonesList[j].name;
|
||||
} else {
|
||||
name = zonesList[j].id;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (isEditable) {
|
||||
listedZoneInner += "<tr><td class='zoneItem'>" + name + "</td><td><a href='#' onClick='removeZoneFromZonesSelection(" + '"' + propertyId + '"' + ", " + '"' + selectedZones[i] + '"' + ");' >";
|
||||
listedZoneInner += "<img src='../../../html/css/img/remove_icon.png'></a></td></tr>";
|
||||
} else {
|
||||
listedZoneInner += "<tr><td class='zoneItem'>" + name + "</td><td> </td></tr>";
|
||||
}
|
||||
}
|
||||
}
|
||||
listedZoneInner += "</table>";
|
||||
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 = "<div class='multiZoneSelToolbar' id='multiZoneSelTools-" + element.id + "'><select class = 'zoneSelect' id='zones-select-" + element.id + "' >";
|
||||
let i, name;
|
||||
for ( i = 0; i < zonesList.length; i++ ) {
|
||||
if (zonesList[i].name === "") {
|
||||
name = zonesList[i].id;
|
||||
} else {
|
||||
name = zonesList[i].name;
|
||||
}
|
||||
zoneSelector += "<option value='" + zonesList[i].id + "'>" + name + "</option>";
|
||||
}
|
||||
zoneSelector += "</select> <a href='#' id='zones-select-add-" + element.id + "' onClick='addZoneToZonesSelection(" + '"' + element.id + '"' + ");' >";
|
||||
zoneSelector += "<img style='vertical-align:top' src='../../../html/css/img/add_icon.png'></a></div>";
|
||||
zoneSelector += "<div class='selected-zone-container' id='selected-zones-" + element.id + "'></div>";
|
||||
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
|
||||
|
|
@ -3637,7 +3888,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();
|
||||
|
|
@ -3692,7 +3945,7 @@ function handleEntitySelectionUpdate(selections, isPropertiesToolUpdate) {
|
|||
} else {
|
||||
enableProperties();
|
||||
disableSaveUserDataButton();
|
||||
disableSaveMaterialDataButton()
|
||||
disableSaveMaterialDataButton();
|
||||
}
|
||||
|
||||
const certificateIDMultiValue = getMultiplePropertyValue('certificateID');
|
||||
|
|
@ -3848,6 +4101,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";
|
||||
|
|
@ -4177,6 +4439,9 @@ function loaded() {
|
|||
if (data.entityID === getFirstSelectedID()) {
|
||||
setMaterialTargetData(data.materialTargetData);
|
||||
}
|
||||
} else if (data.type === 'zoneListRequest') {
|
||||
zonesList = data.zones;
|
||||
updateAllZoneSelect();
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue