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)

scripts/system/create/entityProperties/html/js/entityProperties.js

@@ -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'>&nbsp;</td><td>&nbsp;</td></tr>";
+        } else {
+            listedZoneInner += "<tr><td class='zoneItem'>[ WARNING: Any changes will apply to all ]</td><td>&nbsp;</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>&nbsp;</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>&nbsp;<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();
                 }
             });