`));
let elSpan = document.createElement('span');
elSpan.className = ".collapse-icon";
elSpan.innerText = "M";
elLegend.appendChild(elSpan);
elGroup.appendChild(elLegend);
}
group.properties.forEach(function(propertyData) {
let propertyType = propertyData.type;
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") {
elContainer = createElementFromHTML(
`
${propertyData.label}
`);
} else {
elContainer = document.createElement('div');
elContainer.setAttribute("id", "div-" + propertyElementID);
elContainer.className = 'property container';
}
if (group.twoColumn && propertyData.column !== undefined && propertyData.column !== -1) {
let columnName = group.id + "column" + propertyData.column;
let elColumn = document.getElementById(columnName);
if (!elColumn) {
let columnDivName = group.id + "columnDiv";
let elColumnDiv = document.getElementById(columnDivName);
if (!elColumnDiv) {
elColumnDiv = document.createElement('div');
elColumnDiv.className = "two-column";
elColumnDiv.setAttribute("id", group.id + "columnDiv");
elGroup.appendChild(elColumnDiv);
}
elColumn = document.createElement('fieldset');
elColumn.className = "column";
elColumn.setAttribute("id", columnName);
elColumnDiv.appendChild(elColumn);
}
elColumn.appendChild(elContainer);
} else {
elGroup.appendChild(elContainer);
}
elLabel = document.createElement('label');
elLabel.setAttribute("for", propertyElementID);
if (propertyData.indentedLabel || propertyData.showPropertyRule !== undefined) {
let elSpan = document.createElement('span');
elSpan.className = 'indented';
elSpan.innerText = propertyData.label;
elLabel.appendChild(elSpan);
} else {
elLabel.innerText = propertyData.label;
}
elContainer.appendChild(elLabel);
} else {
elContainer = document.getElementById(propertyData.replaceID);
}
if (elLabel) {
createAppTooltip.registerTooltipElement(elLabel, propertyID);
}
let elProperty = createElementFromHTML('');
elContainer.appendChild(elProperty);
if (propertyType === 'triple') {
elProperty.className = 'flex-row';
for (let i = 0; i < propertyData.properties.length; ++i) {
let innerPropertyData = propertyData.properties[i];
let elWrapper = createElementFromHTML('
');
let propertyID = innerPropertyData.propertyID;
let propertyName = innerPropertyData.propertyName !== undefined ? innerPropertyData.propertyName : propertyID;
let propertyElementID = "property-" + propertyID;
propertyElementID = propertyElementID.replace('.', '-');
elWrapper.appendChild(createElementFromHTML(`
${innerPropertyData.label}
`));
elProperty.appendChild(elWrapper);
let property = createProperty(innerPropertyData, propertyElementID, propertyName, propertyID, elWrapper.childNodes[0]);
property.isParticleProperty = group.id.includes("particles");
property.elContainer = elContainer;
property.spaceMode = propertySpaceMode;
if (property.type !== 'placeholder') {
properties[propertyID] = property;
}
}
} else {
let property = createProperty(propertyData, propertyElementID, propertyName, propertyID, elProperty);
property.isParticleProperty = group.id.includes("particles");
property.elContainer = elContainer;
property.spaceMode = propertySpaceMode;
if (property.type !== 'placeholder') {
properties[propertyID] = property;
}
let showPropertyRule = propertyData.showPropertyRule;
if (showPropertyRule !== undefined) {
let dependentProperty = Object.keys(showPropertyRule)[0];
let dependentPropertyValue = showPropertyRule[dependentProperty];
if (properties[dependentProperty] === undefined) {
properties[dependentProperty] = {};
}
if (properties[dependentProperty].showPropertyRules === undefined) {
properties[dependentProperty].showPropertyRules = {};
}
properties[dependentProperty].showPropertyRules[propertyID] = dependentPropertyValue;
}
}
});
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);
if (data.type === "server_script_status") {
let elServerScriptError = document.getElementById("property-serverScripts-error");
let elServerScriptStatus = document.getElementById("property-serverScripts-status");
elServerScriptError.value = data.errorInfo;
// If we just set elServerScriptError's diplay to block or none, we still end up with
// it's parent contributing 21px bottom padding even when elServerScriptError is display:none.
// So set it's parent to block or none
elServerScriptError.parentElement.style.display = data.errorInfo ? "block" : "none";
if (data.statusRetrieved === false) {
elServerScriptStatus.innerText = "Failed to retrieve status";
} else if (data.isRunning) {
elServerScriptStatus.innerText = ENTITY_SCRIPT_STATUS[data.status] || data.status;
} else {
elServerScriptStatus.innerText = NOT_RUNNING_SCRIPT_STATUS;
}
} else if (data.type === "update" && data.selections) {
if (data.spaceMode !== undefined) {
currentSpaceMode = data.spaceMode === "local" ? PROPERTY_SPACE_MODE.LOCAL : PROPERTY_SPACE_MODE.WORLD;
}
if (data.selections.length === 0) {
if (lastEntityID !== null) {
if (editor !== null) {
saveUserData();
deleteJSONEditor();
}
if (materialEditor !== null) {
saveMaterialData();
deleteJSONMaterialEditor();
}
}
resetProperties();
showGroupsForType("None");
let elIcon = properties.type.elSpan;
elIcon.innerText = NO_SELECTION;
elIcon.style.display = 'inline-block';
deleteJSONEditor();
getPropertyInputElement("userData").value = "";
showUserDataTextArea();
showSaveUserDataButton();
showNewJSONEditorButton();
deleteJSONMaterialEditor();
getPropertyInputElement("materialData").value = "";
showMaterialDataTextArea();
showSaveMaterialDataButton();
showNewJSONMaterialEditorButton();
disableProperties();
} else if (data.selections.length > 1) {
deleteJSONEditor();
deleteJSONMaterialEditor();
let selections = data.selections;
let ids = [];
let types = {};
let numTypes = 0;
for (let i = 0; i < selections.length; ++i) {
ids.push(selections[i].id);
let currentSelectedType = selections[i].properties.type;
if (types[currentSelectedType] === undefined) {
types[currentSelectedType] = 0;
numTypes += 1;
}
types[currentSelectedType]++;
}
let type = "Multiple";
if (numTypes === 1) {
type = selections[0].properties.type;
}
resetProperties();
showGroupsForType(type);
let typeProperty = properties["type"];
typeProperty.elSpan.innerHTML = typeProperty.data.icons[type];
typeProperty.elSpan.style.display = "inline-block";
typeProperty.elLabel.innerHTML = type + " (" + data.selections.length + ")";
disableProperties();
} else {
selectedEntityProperties = data.selections[0].properties;
if (lastEntityID !== '"' + selectedEntityProperties.id + '"' && lastEntityID !== null) {
if (editor !== null) {
saveUserData();
}
if (materialEditor !== null) {
saveMaterialData();
}
}
let doSelectElement = lastEntityID === '"' + selectedEntityProperties.id + '"';
// the event bridge and json parsing handle our avatar id string differently.
lastEntityID = '"' + selectedEntityProperties.id + '"';
// HTML workaround since image is not yet a separate entity type
let IMAGE_MODEL_NAME = 'default-image-model.fbx';
if (selectedEntityProperties.type === "Model") {
let urlParts = selectedEntityProperties.modelURL.split('/');
let propsFilename = urlParts[urlParts.length - 1];
if (propsFilename === IMAGE_MODEL_NAME) {
selectedEntityProperties.type = "Image";
}
}
showGroupsForType(selectedEntityProperties.type);
for (let propertyID in properties) {
let property = properties[propertyID];
let propertyData = property.data;
let propertyName = property.name;
let propertyValue = getPropertyValue(propertyName);
let isSubProperty = propertyData.subPropertyOf !== undefined;
if (propertyValue === undefined && !isSubProperty) {
continue;
}
let isPropertyNotNumber = false;
switch (propertyData.type) {
case 'number':
case 'slider':
isPropertyNotNumber = isNaN(propertyValue) || propertyValue === null;
break;
case 'vec3':
case 'vec2':
isPropertyNotNumber = isNaN(propertyValue.x) || propertyValue.x === null;
break;
case 'color':
isPropertyNotNumber = isNaN(propertyValue.red) || propertyValue.red === null;
break;
}
if (isPropertyNotNumber && propertyData.fallbackProperty !== undefined) {
propertyValue = getPropertyValue(propertyData.fallbackProperty);
}
switch (propertyData.type) {
case 'string': {
property.elInput.value = propertyValue;
break;
}
case 'bool': {
let inverse = propertyData.inverse !== undefined ? propertyData.inverse : false;
if (isSubProperty) {
let propertyValue = selectedEntityProperties[propertyData.subPropertyOf];
let subProperties = propertyValue.split(",");
let subPropertyValue = subProperties.indexOf(propertyName) > -1;
property.elInput.checked = inverse ? !subPropertyValue : subPropertyValue;
} else {
property.elInput.checked = inverse ? !propertyValue : propertyValue;
}
break;
}
case 'number':
case 'slider': {
let multiplier = propertyData.multiplier !== undefined ? propertyData.multiplier : 1;
let value = propertyValue / multiplier;
if (propertyData.round !== undefined) {
value = Math.round(value.round) / propertyData.round;
}
if (propertyData.decimals !== undefined) {
property.elInput.value = value.toFixed(propertyData.decimals);
} else {
property.elInput.value = value;
}
if (property.elSlider !== undefined) {
property.elSlider.value = property.elInput.value;
}
break;
}
case 'vec3':
case 'vec2': {
let multiplier = propertyData.multiplier !== undefined ? propertyData.multiplier : 1;
let valueX = propertyValue.x / multiplier;
let valueY = propertyValue.y / multiplier;
let valueZ = propertyValue.z / multiplier;
if (propertyData.round !== undefined) {
valueX = Math.round(valueX * propertyData.round) / propertyData.round;
valueY = Math.round(valueY * propertyData.round) / propertyData.round;
valueZ = Math.round(valueZ * propertyData.round) / propertyData.round;
}
if (propertyData.decimals !== undefined) {
property.elInputX.value = valueX.toFixed(propertyData.decimals);
property.elInputY.value = valueY.toFixed(propertyData.decimals);
if (property.elInputZ !== undefined) {
property.elInputZ.value = valueZ.toFixed(propertyData.decimals);
}
} else {
property.elInputX.value = valueX;
property.elInputY.value = valueY;
if (property.elInputZ !== undefined) {
property.elInputZ.value = valueZ;
}
}
break;
}
case 'color': {
property.elColorPicker.style.backgroundColor = "rgb(" + propertyValue.red + "," +
propertyValue.green + "," +
propertyValue.blue + ")";
property.elInputR.value = propertyValue.red;
property.elInputG.value = propertyValue.green;
property.elInputB.value = propertyValue.blue;
break;
}
case 'dropdown': {
property.elInput.value = propertyValue;
setDropdownText(property.elInput);
break;
}
case 'textarea': {
property.elInput.value = propertyValue;
setTextareaScrolling(property.elInput);
break;
}
case 'icon': {
property.elSpan.innerHTML = propertyData.icons[propertyValue];
property.elSpan.style.display = "inline-block";
break;
}
case 'texture': {
property.elInput.value = propertyValue;
property.elInput.imageLoad(property.elInput.value);
break;
}
}
let showPropertyRules = property.showPropertyRules;
if (showPropertyRules !== undefined) {
for (let propertyToShow in showPropertyRules) {
let showIfThisPropertyValue = showPropertyRules[propertyToShow];
let show = String(propertyValue) === String(showIfThisPropertyValue);
showPropertyElement(propertyToShow, show);
}
}
}
updateVisibleSpaceModeProperties();
if (selectedEntityProperties.type === "Image") {
let imageLink = JSON.parse(selectedEntityProperties.textures)["tex.picture"];
getPropertyInputElement("image").value = imageLink;
} else if (selectedEntityProperties.type === "Material") {
let elParentMaterialNameString = getPropertyInputElement("materialNameToReplace");
let elParentMaterialNameNumber = getPropertyInputElement("submeshToReplace");
let elParentMaterialNameCheckbox = getPropertyInputElement("selectSubmesh");
let parentMaterialName = selectedEntityProperties.parentMaterialName;
if (parentMaterialName.startsWith(MATERIAL_PREFIX_STRING)) {
elParentMaterialNameString.value = parentMaterialName.replace(MATERIAL_PREFIX_STRING, "");
showParentMaterialNameBox(false, elParentMaterialNameNumber, elParentMaterialNameString);
elParentMaterialNameCheckbox.checked = false;
} else {
elParentMaterialNameNumber.value = parseInt(parentMaterialName);
showParentMaterialNameBox(true, elParentMaterialNameNumber, elParentMaterialNameString);
elParentMaterialNameCheckbox.checked = true;
}
}
let json = null;
try {
json = JSON.parse(selectedEntityProperties.userData);
} catch (e) {
// normal text
deleteJSONEditor();
getPropertyInputElement("userData").value = selectedEntityProperties.userData;
showUserDataTextArea();
showNewJSONEditorButton();
hideSaveUserDataButton();
hideUserDataSaved();
}
if (json !== null) {
if (editor === null) {
createJSONEditor();
}
setEditorJSON(json);
showSaveUserDataButton();
hideUserDataTextArea();
hideNewJSONEditorButton();
hideUserDataSaved();
}
let materialJson = null;
try {
materialJson = JSON.parse(selectedEntityProperties.materialData);
} catch (e) {
// normal text
deleteJSONMaterialEditor();
getPropertyInputElement("materialData").value = selectedEntityProperties.materialData;
showMaterialDataTextArea();
showNewJSONMaterialEditorButton();
hideSaveMaterialDataButton();
hideMaterialDataSaved();
}
if (materialJson !== null) {
if (materialEditor === null) {
createJSONMaterialEditor();
}
setMaterialEditorJSON(materialJson);
showSaveMaterialDataButton();
hideMaterialDataTextArea();
hideNewJSONMaterialEditorButton();
hideMaterialDataSaved();
}
if (selectedEntityProperties.locked) {
disableProperties();
getPropertyInputElement("locked").removeAttribute('disabled');
} else {
enableProperties();
disableSaveUserDataButton();
disableSaveMaterialDataButton()
}
let activeElement = document.activeElement;
if (doSelectElement && typeof activeElement.select !== "undefined") {
activeElement.select();
}
}
} else if (data.type === 'tooltipsReply') {
createAppTooltip.setIsEnabled(!data.hmdActive);
createAppTooltip.setTooltipData(data.tooltips);
} else if (data.type === 'hmdActiveChanged') {
createAppTooltip.setIsEnabled(!data.hmdActive);
} else if (data.type === 'setSpaceMode') {
currentSpaceMode = data.spaceMode === "local" ? PROPERTY_SPACE_MODE.LOCAL : PROPERTY_SPACE_MODE.WORLD;
updateVisibleSpaceModeProperties();
}
});
// Request tooltips as soon as we can process a reply:
EventBridge.emitWebEvent(JSON.stringify({ type: 'tooltipsRequest' }));
}
// Server Script Status
let elServerScriptStatusOuter = document.getElementById('div-property-serverScriptStatus');
let elServerScriptStatusContainer = document.getElementById('div-property-serverScriptStatus').childNodes[1];
let serverScriptStatusElementID = 'property-serverScripts-status';
createAppTooltip.registerTooltipElement(elServerScriptStatusOuter.childNodes[0], "serverScriptsStatus");
let elServerScriptStatus = document.createElement('div');
elServerScriptStatus.setAttribute("id", serverScriptStatusElementID);
elServerScriptStatusContainer.appendChild(elServerScriptStatus);
// Server Script Error
let elServerScripts = getPropertyInputElement("serverScripts");
elDiv = document.createElement('div');
elDiv.className = "property";
let elServerScriptError = document.createElement('textarea');
let serverScriptErrorElementID = 'property-serverScripts-error';
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 elUserDataSaved = document.createElement('span');
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);
// 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 elMaterialDataSaved = document.createElement('span');
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);
// Special Property Callbacks
let elParentMaterialNameString = getPropertyInputElement("materialNameToReplace");
let elParentMaterialNameNumber = getPropertyInputElement("submeshToReplace");
let elParentMaterialNameCheckbox = getPropertyInputElement("selectSubmesh");
elParentMaterialNameString.addEventListener('change', function () {
updateProperty("parentMaterialName", MATERIAL_PREFIX_STRING + this.value, false);
});
elParentMaterialNameNumber.addEventListener('change', function () {
updateProperty("parentMaterialName", this.value, false);
});
elParentMaterialNameCheckbox.addEventListener('change', function () {
if (this.checked) {
updateProperty("parentMaterialName", elParentMaterialNameNumber.value, false);
showParentMaterialNameBox(true, elParentMaterialNameNumber, elParentMaterialNameString);
} else {
updateProperty("parentMaterialName", MATERIAL_PREFIX_STRING + elParentMaterialNameString.value, false);
showParentMaterialNameBox(false, elParentMaterialNameNumber, elParentMaterialNameString);
}
});
getPropertyInputElement("image").addEventListener('change', createImageURLUpdateFunction('textures', false));
// Collapsible sections
let elCollapsible = document.getElementsByClassName("section-header");
let toggleCollapsedEvent = function(event) {
let element = this.parentNode;
let isCollapsed = element.dataset.collapsed !== "true";
element.dataset.collapsed = isCollapsed ? "true" : false;
element.setAttribute("collapsed", isCollapsed ? "true" : "false");
element.getElementsByClassName(".collapse-icon")[0].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");
let textareaOnChangeEvent = function(event) {
setTextareaScrolling(event.target);
};
for (let textAreaIndex = 0, numTextAreas = elTextareas.length; textAreaIndex < numTextAreas; ++textAreaIndex) {
let curTextAreaElement = elTextareas[textAreaIndex];
setTextareaScrolling(curTextAreaElement);
curTextAreaElement.addEventListener("input", textareaOnChangeEvent, false);
curTextAreaElement.addEventListener("change", textareaOnChangeEvent, false);
/* FIXME: Detect and update textarea scrolling attribute on resize. Unfortunately textarea doesn't have a resize
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:
//
//
display textcarat
//
//
//
0) {
let el = elDropdowns[0];
el.parentNode.removeChild(el);
elDropdowns = document.getElementsByTagName("select");
}
document.addEventListener("keydown", function (keyDown) {
if (keyDown.keyCode === KEY_P && keyDown.ctrlKey) {
if (keyDown.shiftKey) {
EventBridge.emitWebEvent(JSON.stringify({ type: 'unparent' }));
} else {
EventBridge.emitWebEvent(JSON.stringify({ type: 'parent' }));
}
}
});
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) {
els[i].onfocus = function (e) {
e.target.select();
};
}
bindAllNonJSONEditorElements();
showGroupsForType("None");
resetProperties();
disableProperties();
});
augmentSpinButtons();
// Disable right-click context menu which is not visible in the HMD and makes it seem like the app has locked
document.addEventListener("contextmenu", function(event) {
event.preventDefault();
}, false);
setTimeout(function() {
EventBridge.emitWebEvent(JSON.stringify({ type: 'propertiesPageReady' }));
}, 1000);
}