-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/scripts/system/html/js/entityProperties.js b/scripts/system/html/js/entityProperties.js
index de9027586e..03dad80be6 100644
--- a/scripts/system/html/js/entityProperties.js
+++ b/scripts/system/html/js/entityProperties.js
@@ -1,4 +1,5 @@
// entityProperties.js
+// entityProperties.js
//
// Created by Ryan Huffman on 13 Nov 2014
// Copyright 2014 High Fidelity, Inc.
@@ -8,11 +9,8 @@
/* global alert, augmentSpinButtons, clearTimeout, console, document, Element, EventBridge,
HifiEntityUI, JSONEditor, openEventBridge, setTimeout, window, _ $ */
-
-var PI = 3.14159265358979;
-var DEGREES_TO_RADIANS = PI / 180.0;
-var RADIANS_TO_DEGREES = 180.0 / PI;
-var ICON_FOR_TYPE = {
+
+const ICON_FOR_TYPE = {
Box: "V",
Sphere: "n",
Shape: "n",
@@ -27,17 +25,901 @@ var ICON_FOR_TYPE = {
Multiple: "",
PolyLine: "",
Material: ""
+};
+
+const PI = 3.14159265358979;
+const DEGREES_TO_RADIANS = PI / 180.0;
+const RADIANS_TO_DEGREES = 180.0 / PI;
+
+const NO_SELECTION = "
No selection";
+
+const GROUPS = [
+ {
+ id: "base",
+ properties: [
+ {
+ label: NO_SELECTION,
+ type: "icon",
+ icons: ICON_FOR_TYPE,
+ propertyName: "type",
+ },
+ {
+ label: "Name",
+ type: "string",
+ propertyName: "name",
+ },
+ {
+ label: "ID",
+ type: "string",
+ propertyName: "id",
+ readOnly: true,
+ },
+ {
+ label: "Parent",
+ type: "string",
+ propertyName: "parentID",
+ },
+ {
+ label: "Locked",
+ glyph: "",
+ type: "bool",
+ propertyName: "locked",
+ },
+ {
+ label: "Visible",
+ glyph: "",
+ type: "bool",
+ propertyName: "visible",
+ },
+ ]
+ },
+ {
+ id: "shape",
+ addToGroup: "base",
+ properties: [
+ {
+ label: "Shape",
+ type: "dropdown",
+ options: { Cube: "Box", Sphere: "Sphere", Tetrahedron: "Tetrahedron", Octahedron: "Octahedron", Icosahedron: "Icosahedron", Dodecahedron: "Dodecahedron", Hexagon: "Hexagon", Triangle: "Triangle", Octagon: "Octagon", Cylinder: "Cylinder", Cone: "Cone", Circle: "Circle", Quad: "Quad" },
+ propertyName: "shape",
+ },
+ {
+ label: "Color",
+ type: "color",
+ propertyName: "color",
+ },
+ /*
+ {
+ label: "Material",
+ type: "string",
+ propertyName: "",
+ },
+ */
+ ]
+ },
+ {
+ id: "text",
+ addToGroup: "base",
+ properties: [
+ {
+ label: "Text",
+ type: "string",
+ propertyName: "text",
+ },
+ {
+ label: "Text Color",
+ type: "color",
+ propertyName: "textColor",
+ },
+ {
+ label: "Background Color",
+ type: "color",
+ propertyName: "backgroundColor",
+ },
+ /*
+ {
+ label: "Transparent Background",
+ type: "bool",
+ propertyName: ""
+ },
+ */
+ {
+ label: "Line Height",
+ type: "number",
+ min: 0,
+ step: 0.005,
+ fixedDecimals: 4,
+ unit: "m",
+ propertyName: "lineHeight"
+ },
+ {
+ label: "Face Camera",
+ type: "bool",
+ propertyName: "faceCamera"
+ },
+ ]
+ },
+ {
+ id: "zone",
+ addToGroup: "base",
+ properties: [
+ {
+ label: "Flying Allowed",
+ type: "bool",
+ propertyName: "flyingAllowed",
+ },
+ {
+ label: "Ghosting Allowed",
+ type: "bool",
+ propertyName: "ghostingAllowed",
+ },
+ {
+ label: "Filter",
+ type: "string",
+ propertyName: "filterURL",
+ },
+ {
+ label: "Key Light",
+ type: "dropdown",
+ options: { inherit: "Inherit", disabled: "Off", enabled: "On" },
+ propertyName: "keyLightMode",
+
+ },
+ {
+ label: "Key Light Color",
+ type: "color",
+ propertyName: "keyLight.color",
+ showPropertyRule: { "keyLightMode": "enabled" },
+ },
+ {
+ label: "Light Intensity",
+ type: "number",
+ min: 0,
+ max: 10,
+ step: 0.1,
+ fixedDecimals: 2,
+ propertyName: "keyLight.intensity",
+ showPropertyRule: { "keyLightMode": "enabled" },
+ },
+ {
+ label: "Light Altitude",
+ type: "number",
+ fixedDecimals: 2,
+ unit: "deg",
+ propertyName: "keyLight.direction.y",
+ showPropertyRule: { "keyLightMode": "enabled" },
+ },
+ {
+ label: "Light Azimuth",
+ type: "number",
+ fixedDecimals: 2,
+ unit: "deg",
+ propertyName: "keyLight.direction.x",
+ showPropertyRule: { "keyLightMode": "enabled" },
+ },
+ {
+ label: "Cast Shadows",
+ type: "bool",
+ propertyName: "keyLight.castShadows",
+ showPropertyRule: { "keyLightMode": "enabled" },
+ },
+ {
+ label: "Skybox",
+ type: "dropdown",
+ options: { inherit: "Inherit", disabled: "Off", enabled: "On" },
+ propertyName: "skyboxMode",
+ },
+ {
+ label: "Skybox Color",
+ type: "color",
+ propertyName: "skybox.color",
+ showPropertyRule: { "skyboxMode": "enabled" },
+ },
+ {
+ label: "Skybox URL",
+ type: "string",
+ propertyName: "skybox.url",
+ showPropertyRule: { "skyboxMode": "enabled" },
+ },
+ {
+ type: "buttons",
+ buttons: [ { id: "copy", label: "Copy URL To Ambient", className: "black", onClick: copySkyboxURLToAmbientURL } ],
+ propertyName: "copyURLToAmbient",
+ showPropertyRule: { "skyboxMode": "enabled" },
+ },
+ {
+ label: "Ambient Light",
+ type: "dropdown",
+ options: { inherit: "Inherit", disabled: "Off", enabled: "On" },
+ propertyName: "ambientLightMode",
+ },
+ {
+ label: "Ambient Intensity",
+ type: "number",
+ min: 0,
+ max: 10,
+ step: 0.1,
+ fixedDecimals: 2,
+ propertyName: "ambientLight.ambientIntensity",
+ showPropertyRule: { "ambientLightMode": "enabled" },
+ },
+ {
+ label: "Ambient URL",
+ type: "string",
+ propertyName: "ambientLight.ambientURL",
+ showPropertyRule: { "ambientLightMode": "enabled" },
+ },
+ {
+ label: "Haze",
+ type: "dropdown",
+ options: { inherit: "Inherit", disabled: "Off", enabled: "On" },
+ propertyName: "hazeMode",
+ },
+ {
+ label: "Range",
+ type: "number",
+ min: 5,
+ max: 10000,
+ step: 5,
+ fixedDecimals: 0,
+ unit: "m",
+ propertyName: "haze.hazeRange",
+ showPropertyRule: { "hazeMode": "enabled" },
+ },
+ {
+ label: "Use Altitude",
+ type: "bool",
+ propertyName: "haze.hazeAltitudeEffect",
+ showPropertyRule: { "hazeMode": "enabled" },
+ },
+ {
+ label: "Base",
+ type: "number",
+ min: -1000,
+ max: 1000,
+ step: 10,
+ fixedDecimals: 0,
+ unit: "m",
+ propertyName: "haze.hazeBaseRef",
+ showPropertyRule: { "hazeMode": "enabled" },
+ },
+ {
+ label: "Ceiling",
+ type: "number",
+ min: -1000,
+ max: 5000,
+ step: 10,
+ fixedDecimals: 0,
+ unit: "m",
+ propertyName: "haze.hazeCeiling",
+ showPropertyRule: { "hazeMode": "enabled" },
+ },
+ {
+ label: "Haze Color",
+ type: "color",
+ propertyName: "haze.hazeColor",
+ showPropertyRule: { "hazeMode": "enabled" },
+ },
+ {
+ label: "Background Blend",
+ type: "number",
+ min: 0.0,
+ max: 1.0,
+ step: 0.01,
+ fixedDecimals: 2,
+ propertyName: "haze.hazeBackgroundBlend",
+ showPropertyRule: { "hazeMode": "enabled" },
+ },
+ {
+ label: "Enable Glare",
+ type: "bool",
+ propertyName: "haze.hazeEnableGlare",
+ showPropertyRule: { "hazeMode": "enabled" },
+ },
+ {
+ label: "Glare Color",
+ type: "color",
+ propertyName: "haze.hazeGlareColor",
+ showPropertyRule: { "hazeMode": "enabled" },
+ },
+ {
+ label: "Glare Angle",
+ type: "number",
+ min: 0,
+ max: 180,
+ step: 1,
+ fixedDecimals: 0,
+ propertyName: "haze.hazeGlareAngle",
+ showPropertyRule: { "hazeMode": "enabled" },
+ },
+ {
+ label: "Bloom",
+ type: "dropdown",
+ options: { inherit: "Inherit", disabled: "Off", enabled: "On" },
+ propertyName: "bloomMode",
+ },
+ {
+ label: "Bloom Intensity",
+ type: "number",
+ min: 0,
+ max: 1,
+ step: 0.01,
+ fixedDecimals: 2,
+ propertyName: "bloom.bloomIntensity",
+ showPropertyRule: { "bloomMode": "enabled" },
+ },
+ {
+ label: "Bloom Threshold",
+ type: "number",
+ min: 0,
+ min: 1,
+ step: 0.01,
+ fixedDecimals: 2,
+ propertyName: "bloom.bloomThreshold",
+ showPropertyRule: { "bloomMode": "enabled" },
+ },
+ {
+ label: "Bloom Size",
+ type: "number",
+ min: 0,
+ min: 2,
+ step: 0.01,
+ fixedDecimals: 2,
+ propertyName: "bloom.bloomSize",
+ showPropertyRule: { "bloomMode": "enabled" },
+ },
+ ]
+ },
+ {
+ id: "model",
+ addToGroup: "base",
+ properties: [
+ {
+ label: "Model",
+ type: "string",
+ propertyName: "modelURL",
+ },
+ {
+ label: "Collision Shape",
+ type: "dropdown",
+ options: { "none": "No Collision", "box": "Box", "sphere": "Sphere", "compound": "Compound" , "simple-hull": "Basic - Whole model", "simple-compound": "Good - Sub-meshes" , "static-mesh": "Exact - All polygons (non-dynamic only)" },
+ propertyName: "shapeType",
+ },
+ {
+ label: "Compound Shape",
+ type: "string",
+ propertyName: "compoundShapeURL",
+ },
+ {
+ label: "Animation",
+ type: "string",
+ propertyName: "animation.url",
+ },
+ {
+ label: "Play Automatically",
+ type: "bool",
+ propertyName: "animation.running",
+ },
+ {
+ label: "Allow Transition",
+ type: "bool",
+ propertyName: "animation.allowTranslation",
+ },
+ {
+ label: "Loop",
+ type: "bool",
+ propertyName: "animation.loop",
+ },
+ {
+ label: "Hold",
+ type: "bool",
+ propertyName: "animation.hold",
+ },
+ {
+ label: "Animation Frame",
+ type: "number",
+ propertyName: "animation.currentFrame",
+ },
+ {
+ label: "First Frame",
+ type: "number",
+ propertyName: "animation.firstFrame",
+ },
+ {
+ label: "Last Frame",
+ type: "number",
+ propertyName: "animation.lastFrame",
+ },
+ {
+ label: "Animation FPS",
+ type: "number",
+ propertyName: "animation.fps",
+ },
+ {
+ label: "Texture",
+ type: "textarea",
+ propertyName: "textures",
+ },
+ {
+ label: "Original Texture",
+ type: "textarea",
+ propertyName: "originalTextures",
+ readOnly: true,
+ },
+ ]
+ },
+ {
+ id: "image",
+ addToGroup: "base",
+ properties: [
+ {
+ label: "Image",
+ type: "string",
+ propertyName: "image",
+ },
+ ]
+ },
+ {
+ id: "web",
+ addToGroup: "base",
+ properties: [
+ {
+ label: "Source",
+ type: "string",
+ propertyName: "sourceUrl",
+ },
+ {
+ label: "Source Resolution",
+ type: "number",
+ propertyName: "dpi",
+ },
+ ]
+ },
+ {
+ id: "light",
+ addToGroup: "base",
+ properties: [
+ {
+ label: "Light Color",
+ type: "color",
+ propertyName: "lightColor", // this actually shares "color" property with shape Color
+ // but separating naming here to separate property fields
+ },
+ {
+ label: "Intensity",
+ type: "number",
+ min: 0,
+ step: 0.1,
+ fixedDecimals: 1,
+ propertyName: "intensity",
+ },
+ {
+ label: "Fall-Off Radius",
+ type: "number",
+ min: 0,
+ step: 0.1,
+ fixedDecimals: 1,
+ unit: "m",
+ propertyName: "falloffRadius",
+ },
+ {
+ label: "Spotlight",
+ type: "bool",
+ propertyName: "isSpotlight",
+ },
+ {
+ label: "Spotlight Exponent",
+ type: "number",
+ step: 0.01,
+ fixedDecimals: 2,
+ propertyName: "exponent",
+ },
+ {
+ label: "Spotlight Cut-Off",
+ type: "number",
+ step: 0.01,
+ fixedDecimals: 2,
+ propertyName: "cutoff",
+ },
+ ]
+ },
+ {
+ id: "material",
+ addToGroup: "base",
+ properties: [
+ {
+ label: "Material URL",
+ type: "string",
+ propertyName: "materialURL",
+ },
+ {
+ label: "Material Data",
+ type: "textarea",
+ buttons: [ { id: "clear", label: "Clear Material Data", className: "red", onClick: clearMaterialData },
+ { id: "edit", label: "Edit as JSON", className: "blue", onClick: newJSONMaterialEditor },
+ { id: "save", label: "Save Material Data", className: "black", onClick: saveMaterialData } ],
+ propertyName: "materialData",
+ },
+ {
+ label: "Submesh to Replace",
+ type: "number",
+ min: 0,
+ step: 1,
+ propertyName: "submeshToReplace",
+ },
+ {
+ label: "Material Name to Replace",
+ type: "string",
+ propertyName: "materialNameToReplace",
+ },
+ {
+ label: "Select Submesh",
+ type: "bool",
+ propertyName: "selectSubmesh",
+ },
+ {
+ label: "Priority",
+ type: "number",
+ min: 0,
+ propertyName: "priority",
+ },
+ {
+ label: "Material Position",
+ type: "vec2",
+ min: 0,
+ min: 1,
+ step: 0.1,
+ vec2Type: "xy",
+ subLabels: [ "x", "y" ],
+ propertyName: "materialMappingPos",
+ },
+ {
+ label: "Material Scale",
+ type: "vec2",
+ min: 0,
+ step: 0.1,
+ vec2Type: "wh",
+ subLabels: [ "width", "height" ],
+ propertyName: "materialMappingScale",
+ },
+ {
+ label: "Material Rotation",
+ type: "number",
+ step: 0.1,
+ fixedDecimals: 2,
+ unit: "deg",
+ propertyName: "materialMappingRot",
+ },
+ ]
+ },
+ {
+ id: "spatial",
+ label: "SPATIAL",
+ properties: [
+ {
+ label: "Position",
+ type: "vec3",
+ vec3Type: "xyz",
+ subLabels: [ "x", "y", "z" ],
+ unit: "m",
+ propertyName: "position",
+ },
+ {
+ label: "Rotation",
+ type: "vec3",
+ step: 0.1,
+ vec3Type: "pyr",
+ subLabels: [ "pitch", "yaw", "roll" ],
+ unit: "deg",
+ propertyName: "rotation",
+ },
+ {
+ label: "Dimension",
+ type: "vec3",
+ step: 0.1,
+ vec3Type: "xyz",
+ subLabels: [ "x", "y", "z" ],
+ unit: "m",
+ propertyName: "dimensions",
+ },
+ {
+ label: "Scale",
+ type: "number",
+ defaultValue: 100,
+ unit: "%",
+ buttons: [ { id: "rescale", label: "Rescale", className: "blue", onClick: rescaleDimensions },
+ { id: "reset", label: "Reset Dimensions", className: "red", onClick: resetToNaturalDimensions } ],
+ propertyName: "scale",
+ },
+ {
+ label: "Pivot",
+ type: "vec3",
+ step: 0.1,
+ vec3Type: "xyz",
+ subLabels: [ "x", "y", "z" ],
+ unit: "(ratio of dimension)",
+ propertyName: "registrationPoint",
+ },
+ {
+ label: "Align",
+ type: "buttons",
+ buttons: [ { id: "selection", label: "Selection to Grid", className: "black", onClick: moveSelectionToGrid },
+ { id: "all", label: "All to Grid", className: "black", onClick: moveAllToGrid } ],
+ propertyName: "alignToGrid",
+ },
+ ]
+ },
+ {
+ id: "collision",
+ label: "COLLISION",
+ twoColumn: true,
+ properties: [
+ {
+ label: "Collides",
+ type: "bool",
+ propertyName: "collisionless",
+ inverse: true,
+ column: -1, // before two columns div
+ },
+ {
+ label: "Dynamic",
+ type: "bool",
+ propertyName: "dynamic",
+ column: -1, // before two columns div
+ },
+ {
+ label: "Collides With",
+ type: "sub-header",
+ propertyName: "collidesWithHeader",
+ showPropertyRule: { "collisionless": "false" },
+ column: 1,
+ },
+ {
+ label: "",
+ type: "sub-header",
+ propertyName: "collidesWithHeaderHelper",
+ showPropertyRule: { "collisionless": "false" },
+ column: 2,
+ },
+ {
+ label: "Static Entities",
+ type: "bool",
+ propertyName: "static",
+ subPropertyOf: "collidesWith",
+ showPropertyRule: { "collisionless": "false" },
+ column: 1,
+ },
+ {
+ label: "Dynamic Entities",
+ type: "bool",
+ propertyName: "dynamic",
+ subPropertyOf: "collidesWith",
+ showPropertyRule: { "collisionless": "false" },
+ column: 2,
+ },
+ {
+ label: "Kinematic Entities",
+ type: "bool",
+ propertyName: "kinematic",
+ subPropertyOf: "collidesWith",
+ showPropertyRule: { "collisionless": "false" },
+ column: 1,
+ },
+ {
+ label: "My Avatar",
+ type: "bool",
+ propertyName: "myAvatar",
+ subPropertyOf: "collidesWith",
+ showPropertyRule: { "collisionless": "false" },
+ column: 2,
+ },
+ {
+ label: "Other Avatars",
+ type: "bool",
+ propertyName: "otherAvatar",
+ subPropertyOf: "collidesWith",
+ showPropertyRule: { "collisionless": "false" },
+ column: 1,
+ },
+ {
+ label: "Collision sound URL",
+ type: "string",
+ propertyName: "collisionSoundURL",
+ showPropertyRule: { "collisionless": "false" },
+ },
+ ]
+ },
+ {
+ id: "behavior",
+ label: "BEHAVIOR",
+ twoColumn: true,
+ properties: [
+ {
+ label: "Grabbable",
+ type: "bool",
+ propertyName: "grabbable",
+ column: 1,
+ },
+ {
+ label: "Triggerable",
+ type: "bool",
+ propertyName: "triggerable",
+ column: 2,
+ },
+ {
+ label: "Cloneable",
+ type: "bool",
+ propertyName: "cloneable",
+ column: 1,
+ },
+ {
+ label: "Ignore inverse kinematics",
+ type: "bool",
+ propertyName: "ignoreIK",
+ column: 2,
+ },
+ {
+ label: "Clone Lifetime",
+ type: "number",
+ unit: "s",
+ propertyName: "cloneLifetime",
+ showPropertyRule: { "cloneable": "true" },
+ column: 1,
+ },
+ {
+ label: "Clone Limit",
+ type: "number",
+ propertyName: "cloneLimit",
+ showPropertyRule: { "cloneable": "true" },
+ column: 1,
+ },
+ {
+ label: "Clone Dynamic",
+ type: "bool",
+ propertyName: "cloneDynamic",
+ showPropertyRule: { "cloneable": "true" },
+ column: 1,
+ },
+ {
+ label: "Clone Avatar Entity",
+ type: "bool",
+ propertyName: "cloneAvatarEntity",
+ showPropertyRule: { "cloneable": "true" },
+ column: 1,
+ },
+ {
+ label: "Can cast shadow",
+ type: "bool",
+ propertyName: "castShadow",
+ },
+ {
+ label: "Script",
+ type: "string",
+ buttons: [ { id: "reload", label: "F", className: "glyph", onClick: reloadScripts } ],
+ propertyName: "script",
+ },
+ {
+ label: "Server Script",
+ type: "string",
+ buttons: [ { id: "reload", label: "F", className: "glyph", onClick: reloadServerScripts } ],
+ propertyName: "serverScripts",
+ },
+ {
+ label: "Lifetime",
+ type: "number",
+ unit: "s",
+ propertyName: "lifetime",
+ },
+ {
+ label: "User Data",
+ type: "textarea",
+ buttons: [ { id: "clear", label: "Clear User Data", className: "red", onClick: clearUserData },
+ { id: "edit", label: "Edit as JSON", className: "blue", onClick: newJSONEditor },
+ { id: "save", label: "Save User Data", className: "black", onClick: saveUserData } ],
+ propertyName: "userData",
+ },
+ ]
+ },
+ {
+ id: "physics",
+ label: "PHYSICS",
+ properties: [
+ {
+ label: "Linear Velocity",
+ type: "vec3",
+ vec3Type: "xyz",
+ subLabels: [ "x", "y", "z" ],
+ unit: "m/s",
+ propertyName: "velocity",
+ },
+ {
+ label: "Linear Damping",
+ type: "number",
+ fixedDecimals: 2,
+ propertyName: "damping",
+ },
+ {
+ label: "Angular Velocity",
+ type: "vec3",
+ multiplier: DEGREES_TO_RADIANS,
+ vec3Type: "pyr",
+ subLabels: [ "pitch", "yaw", "roll" ],
+ unit: "deg/s",
+ propertyName: "angularVelocity",
+ },
+ {
+ label: "Angular Damping",
+ type: "number",
+ fixedDecimals: 4,
+ propertyName: "angularDamping",
+ },
+ {
+ label: "Bounciness",
+ type: "number",
+ fixedDecimals: 4,
+ propertyName: "restitution",
+ },
+ {
+ label: "Friction",
+ type: "number",
+ fixedDecimals: 4,
+ propertyName: "friction",
+ },
+ {
+ label: "Density",
+ type: "number",
+ fixedDecimals: 4,
+ propertyName: "density",
+ },
+ {
+ label: "Gravity",
+ type: "vec3",
+ vec3Type: "xyz",
+ subLabels: [ "x", "y", "z" ],
+ unit: "m/s
2",
+ propertyName: "gravity",
+ },
+ {
+ label: "Acceleration",
+ type: "vec3",
+ vec3Type: "xyz",
+ subLabels: [ "x", "y", "z" ],
+ unit: "m/s
2",
+ propertyName: "acceleration",
+ },
+ ]
+ },
+];
+
+const GROUPS_PER_TYPE = {
+ None: [ 'base', 'spatial', 'collision', 'behavior', 'physics' ],
+ Shape: [ 'base', 'shape', 'spatial', 'collision', 'behavior', 'physics' ],
+ Text: [ 'base', 'text', 'spatial', 'collision', 'behavior', 'physics' ],
+ Zone: [ 'base', 'zone', 'spatial', 'collision', 'behavior', 'physics' ],
+ Model: [ 'base', 'model', 'spatial', 'collision', 'behavior', 'physics' ],
+ Image: [ 'base', 'image', 'spatial', 'collision', 'behavior', 'physics' ],
+ Web: [ 'base', 'web', 'spatial', 'collision', 'behavior', 'physics' ],
+ Light: [ 'base', 'light', 'spatial', 'collision', 'behavior', 'physics' ],
+ Material: [ 'base', 'material', 'spatial', 'behavior' ],
+ ParticleEffect: [ 'base', 'spatial', 'behavior', 'physics' ],
+ Multiple: [ 'base', 'spatial', 'collision', 'behavior', 'physics' ],
};
-var EDITOR_TIMEOUT_DURATION = 1500;
-var KEY_P = 80; // Key code for letter p used for Parenting hotkey.
+const EDITOR_TIMEOUT_DURATION = 1500;
+const KEY_P = 80; // Key code for letter p used for Parenting hotkey.
+
+const MATERIAL_PREFIX_STRING = "mat::";
+
+const PENDING_SCRIPT_STATUS = "[ Fetching status ]";
+
+var elGroups = {};
+var elPropertyElements = {};
+var showPropertyRules = {};
+var subProperties = [];
+var icons = {};
var colorPickers = {};
var lastEntityID = null;
-var MATERIAL_PREFIX_STRING = "mat::";
-
-var PENDING_SCRIPT_STATUS = "[ Fetching status ]";
-
function debugPrint(message) {
EventBridge.emitWebEvent(
JSON.stringify({
@@ -64,7 +946,7 @@ function disableChildren(el, selector) {
function enableProperties() {
enableChildren(document.getElementById("properties-list"), "input, textarea, checkbox, .dropdown dl, .color-picker");
enableChildren(document, ".colpick");
- var elLocked = document.getElementById("property-locked");
+ var elLocked = elPropertyElements["locked"];
if (elLocked.checked === false) {
removeStaticUserData();
@@ -72,20 +954,19 @@ function enableProperties() {
}
}
-
function disableProperties() {
disableChildren(document.getElementById("properties-list"), "input, textarea, checkbox, .dropdown dl, .color-picker");
disableChildren(document, ".colpick");
for (var pickKey in colorPickers) {
colorPickers[pickKey].colpickHide();
}
- var elLocked = document.getElementById("property-locked");
+ var elLocked = elPropertyElements["locked"];
if (elLocked.checked === true) {
- if ($('#userdata-editor').css('display') === "block") {
+ if ($('#property-userData-editor').css('display') === "block") {
showStaticUserData();
}
- if ($('#materialdata-editor').css('display') === "block") {
+ if ($('#property-materialData-editor').css('display') === "block") {
showStaticMaterialData();
}
}
@@ -99,7 +980,21 @@ function showElements(els, show) {
function updateProperty(propertyName, propertyValue) {
var properties = {};
- properties[propertyName] = propertyValue;
+ let splitPropertyName = propertyName.split('.');
+ if (splitPropertyName.length > 1) {
+ let propertyGroupName = splitPropertyName[0];
+ let subPropertyName = splitPropertyName[1];
+ properties[propertyGroupName] = {};
+ if (splitPropertyName.length === 3) {
+ let subSubPropertyName = splitPropertyName[2];
+ properties[propertyGroupName][subPropertyName] = {};
+ properties[propertyGroupName][subPropertyName][subSubPropertyName] = propertyValue;
+ } else {
+ properties[propertyGroupName][subPropertyName] = propertyValue;
+ }
+ } else {
+ properties[propertyName] = propertyValue;
+ }
updateProperties(properties);
}
@@ -111,18 +1006,9 @@ function updateProperties(properties) {
}));
}
-function createEmitCheckedPropertyUpdateFunction(propertyName) {
+function createEmitCheckedPropertyUpdateFunction(propertyName, inverse) {
return function() {
- updateProperty(propertyName, this.checked);
- };
-}
-
-function createEmitGroupCheckedPropertyUpdateFunction(group, propertyName) {
- return function() {
- var properties = {};
- properties[group] = {};
- properties[group][propertyName] = this.checked;
- updateProperties(properties);
+ updateProperty(propertyName, inverse ? !this.checked : this.checked);
};
}
@@ -134,15 +1020,6 @@ function createEmitNumberPropertyUpdateFunction(propertyName, decimals) {
};
}
-function createEmitGroupNumberPropertyUpdateFunction(group, propertyName) {
- return function() {
- var properties = {};
- properties[group] = {};
- properties[group][propertyName] = this.value;
- updateProperties(properties);
- };
-}
-
function createImageURLUpdateFunction(propertyName) {
return function () {
var newTextures = JSON.stringify({ "tex.picture": this.value });
@@ -156,33 +1033,6 @@ function createEmitTextPropertyUpdateFunction(propertyName) {
};
}
-function createZoneComponentModeChangedFunction(zoneComponent, zoneComponentModeInherit,
- zoneComponentModeDisabled, zoneComponentModeEnabled) {
-
- return function() {
- var zoneComponentMode;
-
- if (zoneComponentModeInherit.checked) {
- zoneComponentMode = 'inherit';
- } else if (zoneComponentModeDisabled.checked) {
- zoneComponentMode = 'disabled';
- } else if (zoneComponentModeEnabled.checked) {
- zoneComponentMode = 'enabled';
- }
-
- updateProperty(zoneComponent, zoneComponentMode);
- };
-}
-
-function createEmitGroupTextPropertyUpdateFunction(group, propertyName) {
- return function() {
- var properties = {};
- properties[group] = {};
- properties[group][propertyName] = this.value;
- updateProperties(properties);
- };
-}
-
function createEmitVec2PropertyUpdateFunction(property, elX, elY) {
return function () {
var properties = {};
@@ -194,23 +1044,21 @@ function createEmitVec2PropertyUpdateFunction(property, elX, elY) {
};
}
-function createEmitVec3PropertyUpdateFunction(property, elX, elY, elZ) {
- return function() {
+function createEmitVec2PropertyUpdateFunctionWithMultiplier(property, elX, elY, multiplier) {
+ return function () {
var properties = {};
properties[property] = {
- x: elX.value,
- y: elY.value,
- z: elZ.value
+ x: elX.value * multiplier,
+ y: elY.value * multiplier
};
updateProperties(properties);
};
}
-function createEmitGroupVec3PropertyUpdateFunction(group, property, elX, elY, elZ) {
+function createEmitVec3PropertyUpdateFunction(property, elX, elY, elZ) {
return function() {
var properties = {};
- properties[group] = {};
- properties[group][property] = {
+ properties[property] = {
x: elX.value,
y: elY.value,
z: elZ ? elZ.value : 0
@@ -256,20 +1104,6 @@ function emitColorPropertyUpdate(property, red, green, blue, group) {
updateProperties(properties);
}
-
-function createEmitGroupColorPropertyUpdateFunction(group, property, elRed, elGreen, elBlue) {
- return function() {
- var properties = {};
- properties[group] = {};
- properties[group][property] = {
- red: elRed.value,
- green: elGreen.value,
- blue: elBlue.value
- };
- updateProperties(properties);
- };
-}
-
function updateCheckedSubProperty(propertyName, propertyValue, subPropertyElement, subPropertyString) {
if (subPropertyElement.checked) {
if (propertyValue.indexOf(subPropertyString)) {
@@ -282,6 +1116,30 @@ function updateCheckedSubProperty(propertyName, propertyValue, subPropertyElemen
updateProperty(propertyName, propertyValue);
}
+function clearUserData() {
+ let elUserData = elPropertyElements["userData"];
+ deleteJSONEditor();
+ elUserData.value = "";
+ showUserDataTextArea();
+ showNewJSONEditorButton();
+ hideSaveUserDataButton();
+ updateProperty('userData', elUserData.value);
+}
+
+function newJSONEditor() {
+ deleteJSONEditor();
+ createJSONEditor();
+ var data = {};
+ setEditorJSON(data);
+ hideUserDataTextArea();
+ hideNewJSONEditorButton();
+ showSaveUserDataButton();
+}
+
+function saveUserData() {
+ saveJSONUserData(true);
+}
+
function setUserDataFromEditor(noUpdate) {
var json = null;
try {
@@ -315,7 +1173,7 @@ function multiDataUpdater(groupName, updateKeyPair, userDataElement, defaults, r
var parsedData = {};
var keysToBeRemoved = removeKeys ? removeKeys : [];
try {
- if ($('#userdata-editor').css('height') !== "0px") {
+ if ($('#property-userData-editor').css('height') !== "0px") {
// if there is an expanded, we want to use its json.
parsedData = getEditorJSON();
} else {
@@ -371,6 +1229,135 @@ function userDataChanger(groupName, keyName, values, userDataElement, defaultVal
multiDataUpdater(groupName, val, userDataElement, def, removeKeys);
}
+var editor = null;
+
+function createJSONEditor() {
+ var container = document.getElementById("property-userData-editor");
+ var options = {
+ search: false,
+ mode: 'tree',
+ modes: ['code', 'tree'],
+ name: 'userData',
+ onModeChange: function() {
+ $('.jsoneditor-poweredBy').remove();
+ },
+ onError: function(e) {
+ alert('JSON editor:' + e);
+ },
+ onChange: function() {
+ var currentJSONString = editor.getText();
+
+ if (currentJSONString === '{"":""}') {
+ return;
+ }
+ $('#property-userData-button-save').attr('disabled', false);
+
+
+ }
+ };
+ editor = new JSONEditor(container, options);
+}
+
+function showSaveUserDataButton() {
+ $('#property-userData-button-save').show();
+}
+
+function hideSaveUserDataButton() {
+ $('#property-userData-button-save').hide();
+}
+
+function disableSaveUserDataButton() {
+ $('#property-userData-button-save').attr('disabled', true);
+}
+
+function showNewJSONEditorButton() {
+ $('#property-userData-button-edit').show();
+}
+
+function hideNewJSONEditorButton() {
+ $('#property-userData-button-edit').hide();
+}
+
+function showUserDataTextArea() {
+ $('#property-userData').show();
+}
+
+function hideUserDataTextArea() {
+ $('#property-userData').hide();
+}
+
+function hideUserDataSaved() {
+ $('#property-userData-saved').hide();
+}
+
+function showStaticUserData() {
+ if (editor !== null) {
+ $('#property-userData-static').show();
+ $('#property-userData-static').css('height', $('#property-userData-editor').height());
+ $('#property-userData-static').text(editor.getText());
+ }
+}
+
+function removeStaticUserData() {
+ $('#property-userData-static').hide();
+}
+
+function setEditorJSON(json) {
+ editor.set(json);
+ if (editor.hasOwnProperty('expandAll')) {
+ editor.expandAll();
+ }
+}
+
+function getEditorJSON() {
+ return editor.get();
+}
+
+function deleteJSONEditor() {
+ if (editor !== null) {
+ editor.destroy();
+ editor = null;
+ }
+}
+
+var savedJSONTimer = null;
+
+function saveJSONUserData(noUpdate) {
+ setUserDataFromEditor(noUpdate);
+ $('#property-userData-saved').show();
+ $('#property-userData-button-save').attr('disabled', true);
+ if (savedJSONTimer !== null) {
+ clearTimeout(savedJSONTimer);
+ }
+ savedJSONTimer = setTimeout(function() {
+ hideUserDataSaved();
+ }, EDITOR_TIMEOUT_DURATION);
+}
+
+function clearMaterialData() {
+ let elMaterialData = elPropertyElements["materialData"];
+ deleteJSONMaterialEditor();
+ elMaterialData.value = "";
+ showMaterialDataTextArea();
+ showNewJSONMaterialEditorButton();
+ hideSaveMaterialDataButton();
+ updateProperty('materialData', elMaterialData.value);
+}
+
+function newJSONMaterialEditor() {
+ deleteJSONMaterialEditor();
+ createJSONMaterialEditor();
+ var data = {};
+ setMaterialEditorJSON(data);
+ hideMaterialDataTextArea();
+ hideNewJSONMaterialEditorButton();
+ showSaveMaterialDataButton();
+}
+
+function saveMaterialData() {
+ saveJSONMaterialData(true);
+}
+
function setMaterialDataFromEditor(noUpdate) {
var json = null;
try {
@@ -399,16 +1386,10 @@ function setMaterialDataFromEditor(noUpdate) {
}
}
-function setTextareaScrolling(element) {
- var isScrolling = element.scrollHeight > element.offsetHeight;
- element.setAttribute("scrolling", isScrolling ? "true" : "false");
-}
-
-
var materialEditor = null;
function createJSONMaterialEditor() {
- var container = document.getElementById("materialdata-editor");
+ var container = document.getElementById("property-materialData-editor");
var options = {
search: false,
mode: 'tree',
@@ -426,7 +1407,7 @@ function createJSONMaterialEditor() {
if (currentJSONString === '{"":""}') {
return;
}
- $('#materialdata-save').attr('disabled', false);
+ $('#property-materialData-button-save').attr('disabled', false);
}
@@ -434,40 +1415,48 @@ function createJSONMaterialEditor() {
materialEditor = new JSONEditor(container, options);
}
-function hideNewJSONMaterialEditorButton() {
- $('#materialdata-new-editor').hide();
-}
-
function showSaveMaterialDataButton() {
- $('#materialdata-save').show();
+ $('#property-materialData-button-save').show();
}
function hideSaveMaterialDataButton() {
- $('#materialdata-save').hide();
+ $('#property-materialData-button-save').hide();
+}
+
+function disableSaveMaterialDataButton() {
+ $('#property-materialData-button-save').attr('disabled', true);
}
function showNewJSONMaterialEditorButton() {
- $('#materialdata-new-editor').show();
+ $('#property-materialData-button-edit').show();
+}
+
+function hideNewJSONMaterialEditorButton() {
+ $('#property-materialData-button-edit').hide();
}
function showMaterialDataTextArea() {
- $('#property-material-data').show();
+ $('#property-materialData').show();
}
function hideMaterialDataTextArea() {
- $('#property-material-data').hide();
+ $('#property-materialData').hide();
+}
+
+function hideMaterialDataSaved() {
+ $('#property-materialData-saved').hide();
}
function showStaticMaterialData() {
if (materialEditor !== null) {
- $('#static-materialdata').show();
- $('#static-materialdata').css('height', $('#materialdata-editor').height());
- $('#static-materialdata').text(materialEditor.getText());
+ $('#property-materialData-static').show();
+ $('#property-materialData-static').css('height', $('#property-materialData-editor').height());
+ $('#property-materialData-static').text(materialEditor.getText());
}
}
function removeStaticMaterialData() {
- $('#static-materialdata').hide();
+ $('#property-materialData-static').hide();
}
function setMaterialEditorJSON(json) {
@@ -492,112 +1481,13 @@ var savedMaterialJSONTimer = null;
function saveJSONMaterialData(noUpdate) {
setMaterialDataFromEditor(noUpdate);
- $('#materialdata-saved').show();
- $('#materialdata-save').attr('disabled', true);
+ $('#property-materialData-saved').show();
+ $('#property-materialData-button-save').attr('disabled', true);
if (savedMaterialJSONTimer !== null) {
clearTimeout(savedMaterialJSONTimer);
}
savedMaterialJSONTimer = setTimeout(function() {
- $('#materialdata-saved').hide();
-
- }, EDITOR_TIMEOUT_DURATION);
-}
-
-var editor = null;
-
-function createJSONEditor() {
- var container = document.getElementById("userdata-editor");
- var options = {
- search: false,
- mode: 'tree',
- modes: ['code', 'tree'],
- name: 'userData',
- onModeChange: function() {
- $('.jsoneditor-poweredBy').remove();
- },
- onError: function(e) {
- alert('JSON editor:' + e);
- },
- onChange: function() {
- var currentJSONString = editor.getText();
-
- if (currentJSONString === '{"":""}') {
- return;
- }
- $('#userdata-save').attr('disabled', false);
-
-
- }
- };
- editor = new JSONEditor(container, options);
-}
-
-function hideNewJSONEditorButton() {
- $('#userdata-new-editor').hide();
-}
-
-function showSaveUserDataButton() {
- $('#userdata-save').show();
-}
-
-function hideSaveUserDataButton() {
- $('#userdata-save').hide();
-}
-
-function showNewJSONEditorButton() {
- $('#userdata-new-editor').show();
-}
-
-function showUserDataTextArea() {
- $('#property-user-data').show();
-}
-
-function hideUserDataTextArea() {
- $('#property-user-data').hide();
-}
-
-function showStaticUserData() {
- if (editor !== null) {
- $('#static-userdata').show();
- $('#static-userdata').css('height', $('#userdata-editor').height());
- $('#static-userdata').text(editor.getText());
- }
-}
-
-function removeStaticUserData() {
- $('#static-userdata').hide();
-}
-
-function setEditorJSON(json) {
- editor.set(json);
- if (editor.hasOwnProperty('expandAll')) {
- editor.expandAll();
- }
-}
-
-function getEditorJSON() {
- return editor.get();
-}
-
-function deleteJSONEditor() {
- if (editor !== null) {
- editor.destroy();
- editor = null;
- }
-}
-
-var savedJSONTimer = null;
-
-function saveJSONUserData(noUpdate) {
- setUserDataFromEditor(noUpdate);
- $('#userdata-saved').show();
- $('#userdata-save').attr('disabled', true);
- if (savedJSONTimer !== null) {
- clearTimeout(savedJSONTimer);
- }
- savedJSONTimer = setTimeout(function() {
- $('#userdata-saved').hide();
-
+ hideMaterialDataSaved();
}, EDITOR_TIMEOUT_DURATION);
}
@@ -610,14 +1500,14 @@ function bindAllNonJSONEditorElements() {
// TODO FIXME: (JSHint) Functions declared within loops referencing
// an outer scoped variable may lead to confusing semantics.
field.on('focus', function(e) {
- if (e.target.id === "userdata-new-editor" || e.target.id === "userdata-clear" || e.target.id === "materialdata-new-editor" || e.target.id === "materialdata-clear") {
+ if (e.target.id === "property-userData-button-edit" || e.target.id === "property-userData-button-clear" || e.target.id === "property-materialData-button-edit" || e.target.id === "property-materialData-button-clear") {
return;
} else {
- if ($('#userdata-editor').css('height') !== "0px") {
- saveJSONUserData(true);
+ if ($('#property-userData-editor').css('height') !== "0px") {
+ saveUserData();
}
- if ($('#materialdata-editor').css('height') !== "0px") {
- saveJSONMaterialData(true);
+ if ($('#property-materialData-editor').css('height') !== "0px") {
+ saveMaterialData();
}
}
});
@@ -634,264 +1524,575 @@ function unbindAllInputs() {
}
}
+function setTextareaScrolling(element) {
+ var isScrolling = element.scrollHeight > element.offsetHeight;
+ element.setAttribute("scrolling", isScrolling ? "true" : "false");
+}
+
function showParentMaterialNameBox(number, elNumber, elString) {
if (number) {
- $('#property-parent-material-id-number-container').show();
- $('#property-parent-material-id-string-container').hide();
+ $('#property-submeshToReplace').parent().show();
+ $('#property-materialNameToReplace').parent().hide();
elString.value = "";
} else {
- $('#property-parent-material-id-string-container').show();
- $('#property-parent-material-id-number-container').hide();
+ $('#property-materialNameToReplace').parent().show();
+ $('#property-submeshToReplace').parent().hide();
elNumber.value = 0;
}
}
+function rescaleDimensions() {
+ EventBridge.emitWebEvent(JSON.stringify({
+ type: "action",
+ action: "rescaleDimensions",
+ percentage: parseFloat(document.getElementById("property-scale").value)
+ }));
+}
+
+function moveSelectionToGrid() {
+ EventBridge.emitWebEvent(JSON.stringify({
+ type: "action",
+ action: "moveSelectionToGrid"
+ }));
+}
+
+function moveAllToGrid() {
+ EventBridge.emitWebEvent(JSON.stringify({
+ type: "action",
+ action: "moveAllToGrid"
+ }));
+}
+
+function resetToNaturalDimensions() {
+ EventBridge.emitWebEvent(JSON.stringify({
+ type: "action",
+ action: "resetToNaturalDimensions"
+ }));
+}
+
+function reloadScripts() {
+ EventBridge.emitWebEvent(JSON.stringify({
+ type: "action",
+ action: "reloadClientScripts"
+ }));
+}
+
+function reloadServerScripts() {
+ // invalidate the current status (so that same-same updates can still be observed visually)
+ document.getElementById("property-serverScripts-status").innerText = PENDING_SCRIPT_STATUS;
+ EventBridge.emitWebEvent(JSON.stringify({
+ type: "action",
+ action: "reloadServerScripts"
+ }));
+}
+
+function copySkyboxURLToAmbientURL() {
+ let skyboxURL = elPropertyElements["skybox.url"].value;
+ elPropertyElements["ambientLight.ambientURL"].value = skyboxURL;
+ updateProperty("ambientLight.ambientURL", skyboxURL);
+}
+
+function createTupleNumberInput(elTuple, propertyID, subLabel, min, max, step) {
+ let elementPropertyID = propertyID + "-" + subLabel.toLowerCase();
+ let elDiv = document.createElement('div');
+ let elLabel = document.createElement('label');
+ elLabel.innerText = subLabel[0].toUpperCase() + subLabel.slice(1) + ":";
+ elLabel.setAttribute("for", elementPropertyID);
+ let elInput = document.createElement('input');
+ elInput.setAttribute("id", elementPropertyID);
+ elInput.setAttribute("type", "number");
+ elInput.setAttribute("class", subLabel);
+ if (min !== undefined) {
+ elInput.setAttribute("min", min);
+ }
+ if (max !== undefined) {
+ elInput.setAttribute("max", max);
+ }
+ if (step !== undefined) {
+ elInput.setAttribute("step", step);
+ }
+ elDiv.appendChild(elInput);
+ elDiv.appendChild(elLabel);
+ elTuple.appendChild(elDiv);
+ return elInput;
+}
+
+function addUnit(unit, elLabel) {
+ if (unit !== undefined) {
+ let elSpan = document.createElement('span');
+ elSpan.setAttribute("class", "unit");
+ elSpan.innerHTML = unit;
+ elLabel.appendChild(elSpan);
+ }
+}
+
+function addButtons(elProperty, propertyID, buttons, newRow) {
+ let elDiv = document.createElement('div');
+ elDiv.setAttribute("class", "row");
+
+ buttons.forEach(function(button) {
+ let elButton = document.createElement('input');
+ elButton.setAttribute("type", "button");
+ elButton.setAttribute("class", button.className);
+ elButton.setAttribute("id", propertyID + "-button-" + button.id);
+ elButton.setAttribute("value", button.label);
+ elButton.addEventListener("click", button.onClick);
+ if (newRow) {
+ elDiv.appendChild(elButton);
+ } else {
+ elProperty.appendChild(elButton);
+ }
+ });
+
+ if (newRow) {
+ elProperty.appendChild(document.createElement('br'));
+ elProperty.appendChild(elDiv);
+ }
+}
+
+function showGroupsForType(type) {
+ if (type === "Box" || type === "Sphere") {
+ type = "Shape";
+ }
+
+ let typeGroups = GROUPS_PER_TYPE[type];
+
+ for (let groupKey in elGroups) {
+ let elGroup = elGroups[groupKey];
+ if (typeGroups && typeGroups.indexOf(groupKey) > -1) {
+ elGroup.style.display = "block";
+ } else {
+ elGroup.style.display = "none";
+ }
+ }
+}
+
+function resetProperties() {
+ for (let propertyName in elPropertyElements) {
+ let elProperty = elPropertyElements[propertyName];
+ if (elProperty instanceof Array) {
+ if (elProperty.length === 2 || elProperty.length === 3) {
+ // vec2/vec3 are array of 2/3 input numbers
+ elProperty[0].value = "";
+ elProperty[1].value = "";
+ if (elProperty[2] !== undefined) {
+ elProperty[2].value = "";
+ }
+ } else if (elProperty.length === 4) {
+ // color is array of color picker and 3 input numbers
+ elProperty[0].style.backgroundColor = "rgb(" + 0 + "," + 0 + "," + 0 + ")";
+ elProperty[1].value = "";
+ elProperty[2].value = "";
+ elProperty[3].value = "";
+ }
+ } else if (elProperty.getAttribute("type") === "number") {
+ if (elProperty.getAttribute("defaultValue")) {
+ elProperty.value = elProperty.getAttribute("defaultValue");
+ } else {
+ elProperty.value = "";
+ }
+ } else if (elProperty.getAttribute("type") === "checkbox") {
+ elProperty.checked = false;
+ } else {
+ elProperty.value = "";
+ }
+ }
+
+ for (let showPropertyRule in showPropertyRules) {
+ let propertyShowRules = showPropertyRules[showPropertyRule];
+ for (let propertyToHide in propertyShowRules) {
+ let elPropertyToHide = elPropertyElements[propertyToHide];
+ if (elPropertyToHide) {
+ let parentNode = elPropertyToHide.parentNode;
+ if (parentNode === undefined && elPropertyToHide instanceof Array) {
+ parentNode = elPropertyToHide[0].parentNode;
+ }
+ parentNode.style.display = "none";
+ }
+ }
+ }
+}
+
function loaded() {
- openEventBridge(function() {
+ openEventBridge(function() {
+ let elPropertiesList = document.getElementById("properties-list");
+
+ GROUPS.forEach(function(group) {
+ let elGroup;
+ if (group.addToGroup !== undefined) {
+ let fieldset = document.getElementById(group.addToGroup);
+ elGroup = document.createElement('div');
+ fieldset.appendChild(elGroup);
+ } else {
+ elGroup = document.createElement('fieldset');
+ elGroup.setAttribute("class", "major");
+ elGroup.setAttribute("id", group.id);
+ elPropertiesList.appendChild(elGroup);
+ }
- var elPropertiesList = document.getElementById("properties-list");
- var elID = document.getElementById("property-id");
- var elType = document.getElementById("property-type");
- var elTypeIcon = document.getElementById("type-icon");
- var elName = document.getElementById("property-name");
- var elLocked = document.getElementById("property-locked");
- var elVisible = document.getElementById("property-visible");
- var elPositionX = document.getElementById("property-pos-x");
- var elPositionY = document.getElementById("property-pos-y");
- var elPositionZ = document.getElementById("property-pos-z");
- var elMoveSelectionToGrid = document.getElementById("move-selection-to-grid");
- var elMoveAllToGrid = document.getElementById("move-all-to-grid");
+ if (group.label !== undefined) {
+ let elLegend = document.createElement('legend');
+ elLegend.innerText = group.label;
+ elLegend.setAttribute("class", "section-header");
+ let elSpan = document.createElement('span');
+ elSpan.setAttribute("class", ".collapse-icon");
+ elSpan.innerText = "M";
+ elLegend.appendChild(elSpan);
+ elGroup.appendChild(elLegend);
+ }
+
+ group.properties.forEach(function(property) {
+ let propertyType = property.type;
+ let propertyName = property.propertyName;
+ let propertyID = "property-" + propertyName;
+ propertyID = propertyID.replace(".", "-");
+
+ let elProperty;
+ if (propertyType === "sub-header") {
+ elProperty = document.createElement('legend');
+ elProperty.innerText = property.label;
+ elProperty.setAttribute("class", "sub-section-header");
+ } else {
+ elProperty = document.createElement('div');
+ elProperty.setAttribute("id", "div-" + propertyName);
+ }
+
+ if (group.twoColumn && property.column !== undefined && property.column !== -1) {
+ let columnName = group.id + "column" + property.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.setAttribute("class", "two-column");
+ elColumnDiv.setAttribute("id", group.id + "columnDiv");
+ elGroup.appendChild(elColumnDiv);
+ }
+ elColumn = document.createElement('fieldset');
+ elColumn.setAttribute("class", "column");
+ elColumn.setAttribute("id", columnName);
+ elColumnDiv.appendChild(elColumn);
+ }
+ elColumn.appendChild(elProperty);
+ } else {
+ elGroup.appendChild(elProperty);
+ }
+
+ let elLabel = document.createElement('label');
+ elLabel.innerText = property.label;
+ elLabel.setAttribute("for", propertyID);
+
+ switch (propertyType) {
+ case 'vec3': {
+ elProperty.setAttribute("class", "property " + property.vec3Type + " fstuple");
+
+ let elTuple = document.createElement('div');
+ elTuple.setAttribute("class", "tuple");
+
+ addUnit(property.unit, elLabel);
+
+ elProperty.appendChild(elLabel);
+ elProperty.appendChild(elTuple);
+
+ let elInputX = createTupleNumberInput(elTuple, propertyID, property.subLabels[0], property.min, property.max, property.step);
+ let elInputY = createTupleNumberInput(elTuple, propertyID, property.subLabels[1], property.min, property.max, property.step);
+ let elInputZ = createTupleNumberInput(elTuple, propertyID, property.subLabels[2], property.min, property.max, property.step);
+
+ let inputChangeFunction;
+ let multiplier = 1;
+ if (property.multiplier !== undefined) {
+ multiplier = property.multiplier;
+ inputChangeFunction = createEmitVec3PropertyUpdateFunction(propertyName, elInputX, elInputY, elInputZ);
+ } else {
+ inputChangeFunction = createEmitVec3PropertyUpdateFunctionWithMultiplier(propertyName, elInputX, elInputY, elInputZ, property.multiplier);
+ }
+ elInputX.setAttribute("multiplier", multiplier);
+ elInputY.setAttribute("multiplier", multiplier);
+ elInputZ.setAttribute("multiplier", multiplier);
+ elInputX.addEventListener('change', inputChangeFunction);
+ elInputY.addEventListener('change', inputChangeFunction);
+ elInputZ.addEventListener('change', inputChangeFunction);
+
+ elPropertyElements[propertyName] = [elInputX, elInputY, elInputZ];
+ break;
+ }
+ case 'vec2': {
+ elProperty.setAttribute("class", "property " + property.vec2Type + " fstuple");
+
+ let elTuple = document.createElement('div');
+ elTuple.setAttribute("class", "tuple");
+
+ addUnit(property.unit, elLabel);
+
+ elProperty.appendChild(elLabel);
+ elProperty.appendChild(elTuple);
+
+ let elInputX = createTupleNumberInput(elTuple, propertyID, property.subLabels[0], property.min, property.max, property.step);
+ let elInputY = createTupleNumberInput(elTuple, propertyID, property.subLabels[1], property.min, property.max, property.step);
+
+ let inputChangeFunction;
+ let multiplier = 1;
+ if (property.multiplier !== undefined) {
+ multiplier = property.multiplier;
+ inputChangeFunction = createEmitVec2PropertyUpdateFunction(propertyName, elInputX, elInputY);
+ } else {
+ inputChangeFunction = createEmitVec2PropertyUpdateFunctionWithMultiplier(propertyName, elInputX, elInputY, property.multiplier);
+ }
+ elInputX.setAttribute("multiplier", multiplier);
+ elInputY.setAttribute("multiplier", multiplier);
+ elInputX.addEventListener('change', inputChangeFunction);
+ elInputY.addEventListener('change', inputChangeFunction);
+
+ elPropertyElements[propertyName] = [elInputX, elInputY];
+ break;
+ }
+ case 'color': {
+ elProperty.setAttribute("class", "property rgb fstuple");
+
+ let elColorPicker = document.createElement('div');
+ elColorPicker.setAttribute("class", "color-picker");
+ elColorPicker.setAttribute("id", propertyID);
+
+ let elTuple = document.createElement('div');
+ elTuple.setAttribute("class", "tuple");
+
+ elProperty.appendChild(elColorPicker);
+ elProperty.appendChild(elLabel);
+ elProperty.appendChild(elTuple);
+
+ let elInputR = createTupleNumberInput(elTuple, propertyID, "red", 0, 255, 1);
+ let elInputG = createTupleNumberInput(elTuple, propertyID, "green", 0, 255, 1);
+ let elInputB = createTupleNumberInput(elTuple, propertyID, "blue", 0, 255, 1);
+
+ let inputChangeFunction = createEmitColorPropertyUpdateFunction(propertyName, elInputR, elInputG, elInputB);
+ elInputR.addEventListener('change', inputChangeFunction);
+ elInputG.addEventListener('change', inputChangeFunction);
+ elInputB.addEventListener('change', inputChangeFunction);
+
+ let colorPickerID = "#" + propertyID;
+ colorPickers[colorPickerID] = $(colorPickerID).colpick({
+ colorScheme: 'dark',
+ layout: 'hex',
+ color: '000000',
+ submit: false, // We don't want to have a submission button
+ onShow: function(colpick) {
+ $(colorPickerID).attr('active', 'true');
+ // The original color preview within the picker needs to be updated on show because
+ // prior to the picker being shown we don't have access to the selections' starting color.
+ colorPickers[colorPickerID].colpickSetColor({
+ "r": elInputR.value,
+ "g": elInputG.value,
+ "b": elInputB.value
+ });
+ },
+ onHide: function(colpick) {
+ $(colorPickerID).attr('active', 'false');
+ },
+ onChange: function(hsb, hex, rgb, el) {
+ $(el).css('background-color', '#' + hex);
+ emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b);
+ }
+ });
+
+ elPropertyElements[propertyName] = [elColorPicker, elInputR, elInputG, elInputB];
+ break;
+ }
+ case 'string': {
+ elProperty.setAttribute("class", "property text");
+
+ let elInput = document.createElement('input');
+ elInput.setAttribute("id", propertyID);
+ elInput.setAttribute("type", "text");
+ if (property.readOnly) {
+ elInput.readOnly = true;
+ }
+
+ elInput.addEventListener('change', createEmitTextPropertyUpdateFunction(propertyName));
+
+ elProperty.appendChild(elLabel);
+ elProperty.appendChild(elInput);
+
+ if (property.buttons !== undefined) {
+ addButtons(elProperty, propertyID, property.buttons, false);
+ }
+
+ elPropertyElements[propertyName] = elInput;
+ break;
+ }
+ case 'bool': {
+ elProperty.setAttribute("class", "property checkbox");
+
+ if (property.glyph !== undefined) {
+ elLabel.innerText = " " + property.label;
+ let elSpan = document.createElement('span');
+ elSpan.innerHTML = property.glyph;
+ elLabel.insertBefore(elSpan, elLabel.firstChild);
+ }
+
+ let elInput = document.createElement('input');
+ elInput.setAttribute("id", propertyID);
+ elInput.setAttribute("type", "checkbox");
+
+ let inverse = property.inverse;
+ elInput.setAttribute("inverse", inverse ? "true" : "false");
+
+ elProperty.appendChild(elInput);
+ elProperty.appendChild(elLabel);
+
+ let subPropertyOf = property.subPropertyOf;
+ if (subPropertyOf !== undefined) {
+ elInput.setAttribute("subPropertyOf", subPropertyOf);
+ elPropertyElements[propertyName] = elInput;
+ subProperties.push(propertyName);
+ elInput.addEventListener('change', function() {
+ updateCheckedSubProperty(subPropertyOf, properties[subPropertyOf], elInput, propertyName);
+ });
+ } else {
+ elPropertyElements[propertyName] = elInput;
+ elInput.addEventListener('change', createEmitCheckedPropertyUpdateFunction(propertyName, inverse));
+ }
+ break;
+ }
+ case 'dropdown': {
+ elProperty.setAttribute("class", "property dropdown");
+
+ let elInput = document.createElement('select');
+ elInput.setAttribute("id", propertyID);
+
+ for (let optionKey in property.options) {
+ let option = document.createElement('option');
+ option.value = optionKey;
+ option.text = property.options[optionKey];
+ elInput.add(option);
+ }
+
+ elInput.addEventListener('change', createEmitTextPropertyUpdateFunction(propertyName));
+
+ elProperty.appendChild(elLabel);
+ elProperty.appendChild(elInput);
+ elPropertyElements[propertyName] = elInput;
+ break;
+ }
+ case 'number': {
+ elProperty.setAttribute("class", "property number");
+
+ addUnit(property.unit, elLabel);
+
+ let elInput = document.createElement('input');
+ elInput.setAttribute("id", propertyID);
+ elInput.setAttribute("type", "number");
+ if (property.min !== undefined) {
+ elInput.setAttribute("min", property.min);
+ }
+ if (property.max !== undefined) {
+ elInput.setAttribute("max", property.max);
+ }
+ if (property.step !== undefined) {
+ elInput.setAttribute("step", property.step);
+ }
+
+ let fixedDecimals = property.fixedDecimals !== undefined ? property.fixedDecimals : 0;
+ elInput.setAttribute("fixedDecimals", fixedDecimals);
+
+ let defaultValue = property.defaultValue;
+ if (defaultValue !== undefined) {
+ elInput.setAttribute("defaultValue", defaultValue);
+ elInput.value = defaultValue;
+ }
+
+ elInput.addEventListener('change', createEmitNumberPropertyUpdateFunction(propertyName, fixedDecimals));
+
+ elProperty.appendChild(elLabel);
+ elProperty.appendChild(elInput);
+
+ if (property.buttons !== undefined) {
+ addButtons(elProperty, propertyID, property.buttons, true);
+ }
+
+ elPropertyElements[propertyName] = elInput;
+ break;
+ }
+ case 'textarea': {
+ elProperty.setAttribute("class", "property textarea");
+
+ elProperty.appendChild(elLabel);
+
+ if (property.buttons !== undefined) {
+ addButtons(elProperty, propertyID, property.buttons, true);
+ }
+
+ let elInput = document.createElement('textarea');
+ elInput.setAttribute("id", propertyID);
+ if (property.readOnly) {
+ elInput.readOnly = true;
+ }
+
+ elInput.addEventListener('change', createEmitTextPropertyUpdateFunction(propertyName));
+
+ elProperty.appendChild(elInput);
+ elPropertyElements[propertyName] = elInput;
+ break;
+ }
+ case 'icon': {
+ elProperty.setAttribute("class", "property value");
+
+ elLabel.setAttribute("id", propertyID);
+ elLabel.innerHTML = " " + property.label;
+
+ let elSpan = document.createElement('span');
+ elSpan.setAttribute("id", propertyID + "-icon");
+ icons[propertyName] = property.icons;
- var elDimensionsX = document.getElementById("property-dim-x");
- var elDimensionsY = document.getElementById("property-dim-y");
- var elDimensionsZ = document.getElementById("property-dim-z");
- var elResetToNaturalDimensions = document.getElementById("reset-to-natural-dimensions");
- var elRescaleDimensionsPct = document.getElementById("dimension-rescale-pct");
- var elRescaleDimensionsButton = document.getElementById("dimension-rescale-button");
-
- var elParentID = document.getElementById("property-parent-id");
- var elParentJointIndex = document.getElementById("property-parent-joint-index");
-
- var elRegistrationX = document.getElementById("property-reg-x");
- var elRegistrationY = document.getElementById("property-reg-y");
- var elRegistrationZ = document.getElementById("property-reg-z");
-
- var elRotationX = document.getElementById("property-rot-x");
- var elRotationY = document.getElementById("property-rot-y");
- var elRotationZ = document.getElementById("property-rot-z");
-
- var elLinearVelocityX = document.getElementById("property-lvel-x");
- var elLinearVelocityY = document.getElementById("property-lvel-y");
- var elLinearVelocityZ = document.getElementById("property-lvel-z");
- var elLinearDamping = document.getElementById("property-ldamping");
-
- var elAngularVelocityX = document.getElementById("property-avel-x");
- var elAngularVelocityY = document.getElementById("property-avel-y");
- var elAngularVelocityZ = document.getElementById("property-avel-z");
- var elAngularDamping = document.getElementById("property-adamping");
-
- var elRestitution = document.getElementById("property-restitution");
- var elFriction = document.getElementById("property-friction");
-
- var elGravityX = document.getElementById("property-grav-x");
- var elGravityY = document.getElementById("property-grav-y");
- var elGravityZ = document.getElementById("property-grav-z");
-
- var elAccelerationX = document.getElementById("property-lacc-x");
- var elAccelerationY = document.getElementById("property-lacc-y");
- var elAccelerationZ = document.getElementById("property-lacc-z");
-
- var elDensity = document.getElementById("property-density");
- var elCollisionless = document.getElementById("property-collisionless");
- var elDynamic = document.getElementById("property-dynamic");
- var elCollideStatic = document.getElementById("property-collide-static");
- var elCollideDynamic = document.getElementById("property-collide-dynamic");
- var elCollideKinematic = document.getElementById("property-collide-kinematic");
- var elCollideMyAvatar = document.getElementById("property-collide-myAvatar");
- var elCollideOtherAvatar = document.getElementById("property-collide-otherAvatar");
- var elCollisionSoundURL = document.getElementById("property-collision-sound-url");
-
- var elGrabbable = document.getElementById("property-grabbable");
-
- var elCloneable = document.getElementById("property-cloneable");
- var elCloneableDynamic = document.getElementById("property-cloneable-dynamic");
- var elCloneableAvatarEntity = document.getElementById("property-cloneable-avatarEntity");
- var elCloneableGroup = document.getElementById("group-cloneable-group");
- var elCloneableLifetime = document.getElementById("property-cloneable-lifetime");
- var elCloneableLimit = document.getElementById("property-cloneable-limit");
-
- var elTriggerable = document.getElementById("property-triggerable");
- var elIgnoreIK = document.getElementById("property-ignore-ik");
-
- var elLifetime = document.getElementById("property-lifetime");
- var elScriptURL = document.getElementById("property-script-url");
- var elScriptTimestamp = document.getElementById("property-script-timestamp");
- var elReloadScriptsButton = document.getElementById("reload-script-button");
- var elServerScripts = document.getElementById("property-server-scripts");
- var elReloadServerScriptsButton = document.getElementById("reload-server-scripts-button");
- var elServerScriptStatus = document.getElementById("server-script-status");
- var elServerScriptError = document.getElementById("server-script-error");
- var elUserData = document.getElementById("property-user-data");
- var elClearUserData = document.getElementById("userdata-clear");
- var elSaveUserData = document.getElementById("userdata-save");
- var elNewJSONEditor = document.getElementById('userdata-new-editor');
- var elColorControlVariant2 = document.getElementById("property-color-control2");
- var elColorRed = document.getElementById("property-color-red");
- var elColorGreen = document.getElementById("property-color-green");
- var elColorBlue = document.getElementById("property-color-blue");
-
- var elShape = document.getElementById("property-shape");
-
- var elCanCastShadow = document.getElementById("property-can-cast-shadow");
-
- var elLightSpotLight = document.getElementById("property-light-spot-light");
- var elLightColor = document.getElementById("property-light-color");
- var elLightColorRed = document.getElementById("property-light-color-red");
- var elLightColorGreen = document.getElementById("property-light-color-green");
- var elLightColorBlue = document.getElementById("property-light-color-blue");
-
- var elLightIntensity = document.getElementById("property-light-intensity");
- var elLightFalloffRadius = document.getElementById("property-light-falloff-radius");
- var elLightExponent = document.getElementById("property-light-exponent");
- var elLightCutoff = document.getElementById("property-light-cutoff");
-
- var elModelURL = document.getElementById("property-model-url");
- var elShapeType = document.getElementById("property-shape-type");
- var elCompoundShapeURL = document.getElementById("property-compound-shape-url");
- var elModelAnimationURL = document.getElementById("property-model-animation-url");
- var elModelAnimationPlaying = document.getElementById("property-model-animation-playing");
- var elModelAnimationFPS = document.getElementById("property-model-animation-fps");
- var elModelAnimationFrame = document.getElementById("property-model-animation-frame");
- var elModelAnimationFirstFrame = document.getElementById("property-model-animation-first-frame");
- var elModelAnimationLastFrame = document.getElementById("property-model-animation-last-frame");
- var elModelAnimationLoop = document.getElementById("property-model-animation-loop");
- var elModelAnimationHold = document.getElementById("property-model-animation-hold");
- var elModelAnimationAllowTranslation = document.getElementById("property-model-animation-allow-translation");
- var elModelTextures = document.getElementById("property-model-textures");
- var elModelOriginalTextures = document.getElementById("property-model-original-textures");
-
- var elMaterialURL = document.getElementById("property-material-url");
- //var elMaterialMappingMode = document.getElementById("property-material-mapping-mode");
- var elPriority = document.getElementById("property-priority");
- var elParentMaterialNameString = document.getElementById("property-parent-material-id-string");
- var elParentMaterialNameNumber = document.getElementById("property-parent-material-id-number");
- var elParentMaterialNameCheckbox = document.getElementById("property-parent-material-id-checkbox");
- var elMaterialMappingPosX = document.getElementById("property-material-mapping-pos-x");
- var elMaterialMappingPosY = document.getElementById("property-material-mapping-pos-y");
- var elMaterialMappingScaleX = document.getElementById("property-material-mapping-scale-x");
- var elMaterialMappingScaleY = document.getElementById("property-material-mapping-scale-y");
- var elMaterialMappingRot = document.getElementById("property-material-mapping-rot");
- var elMaterialData = document.getElementById("property-material-data");
- var elClearMaterialData = document.getElementById("materialdata-clear");
- var elSaveMaterialData = document.getElementById("materialdata-save");
- var elNewJSONMaterialEditor = document.getElementById('materialdata-new-editor');
-
- var elImageURL = document.getElementById("property-image-url");
-
- var elWebSourceURL = document.getElementById("property-web-source-url");
- var elWebDPI = document.getElementById("property-web-dpi");
-
- var elDescription = document.getElementById("property-description");
-
- var elHyperlinkHref = document.getElementById("property-hyperlink-href");
-
- var elTextText = document.getElementById("property-text-text");
- var elTextLineHeight = document.getElementById("property-text-line-height");
- var elTextTextColor = document.getElementById("property-text-text-color");
- var elTextFaceCamera = document.getElementById("property-text-face-camera");
- var elTextTextColorRed = document.getElementById("property-text-text-color-red");
- var elTextTextColorGreen = document.getElementById("property-text-text-color-green");
- var elTextTextColorBlue = document.getElementById("property-text-text-color-blue");
- var elTextBackgroundColor = document.getElementById("property-text-background-color");
- var elTextBackgroundColorRed = document.getElementById("property-text-background-color-red");
- var elTextBackgroundColorGreen = document.getElementById("property-text-background-color-green");
- var elTextBackgroundColorBlue = document.getElementById("property-text-background-color-blue");
-
- // Key light
- var elZoneKeyLightModeInherit = document.getElementById("property-zone-key-light-mode-inherit");
- var elZoneKeyLightModeDisabled = document.getElementById("property-zone-key-light-mode-disabled");
- var elZoneKeyLightModeEnabled = document.getElementById("property-zone-key-light-mode-enabled");
-
- var elZoneKeyLightColor = document.getElementById("property-zone-key-light-color");
- var elZoneKeyLightColorRed = document.getElementById("property-zone-key-light-color-red");
- var elZoneKeyLightColorGreen = document.getElementById("property-zone-key-light-color-green");
- var elZoneKeyLightColorBlue = document.getElementById("property-zone-key-light-color-blue");
- var elZoneKeyLightIntensity = document.getElementById("property-zone-key-intensity");
- var elZoneKeyLightDirectionX = document.getElementById("property-zone-key-light-direction-x");
- var elZoneKeyLightDirectionY = document.getElementById("property-zone-key-light-direction-y");
-
- var elZoneKeyLightCastShadows = document.getElementById("property-zone-key-light-cast-shadows");
-
- // Skybox
- var elZoneSkyboxModeInherit = document.getElementById("property-zone-skybox-mode-inherit");
- var elZoneSkyboxModeDisabled = document.getElementById("property-zone-skybox-mode-disabled");
- var elZoneSkyboxModeEnabled = document.getElementById("property-zone-skybox-mode-enabled");
-
- // Ambient light
- var elCopySkyboxURLToAmbientURL = document.getElementById("copy-skybox-url-to-ambient-url");
-
- var elZoneAmbientLightModeInherit = document.getElementById("property-zone-ambient-light-mode-inherit");
- var elZoneAmbientLightModeDisabled = document.getElementById("property-zone-ambient-light-mode-disabled");
- var elZoneAmbientLightModeEnabled = document.getElementById("property-zone-ambient-light-mode-enabled");
-
- var elZoneAmbientLightIntensity = document.getElementById("property-zone-key-ambient-intensity");
- var elZoneAmbientLightURL = document.getElementById("property-zone-key-ambient-url");
-
- // Haze
- var elZoneHazeModeInherit = document.getElementById("property-zone-haze-mode-inherit");
- var elZoneHazeModeDisabled = document.getElementById("property-zone-haze-mode-disabled");
- var elZoneHazeModeEnabled = document.getElementById("property-zone-haze-mode-enabled");
-
- var elZoneHazeRange = document.getElementById("property-zone-haze-range");
- var elZoneHazeColor = document.getElementById("property-zone-haze-color");
- var elZoneHazeColorRed = document.getElementById("property-zone-haze-color-red");
- var elZoneHazeColorGreen = document.getElementById("property-zone-haze-color-green");
- var elZoneHazeColorBlue = document.getElementById("property-zone-haze-color-blue");
- var elZoneHazeGlareColor = document.getElementById("property-zone-haze-glare-color");
- var elZoneHazeGlareColorRed = document.getElementById("property-zone-haze-glare-color-red");
- var elZoneHazeGlareColorGreen = document.getElementById("property-zone-haze-glare-color-green");
- var elZoneHazeGlareColorBlue = document.getElementById("property-zone-haze-glare-color-blue");
- var elZoneHazeEnableGlare = document.getElementById("property-zone-haze-enable-light-blend");
- var elZoneHazeGlareAngle = document.getElementById("property-zone-haze-blend-angle");
-
- var elZoneHazeAltitudeEffect = document.getElementById("property-zone-haze-altitude-effect");
- var elZoneHazeBaseRef = document.getElementById("property-zone-haze-base");
- var elZoneHazeCeiling = document.getElementById("property-zone-haze-ceiling");
-
- var elZoneHazeBackgroundBlend = document.getElementById("property-zone-haze-background-blend");
-
- // Bloom
- var elZoneBloomModeInherit = document.getElementById("property-zone-bloom-mode-inherit");
- var elZoneBloomModeDisabled = document.getElementById("property-zone-bloom-mode-disabled");
- var elZoneBloomModeEnabled = document.getElementById("property-zone-bloom-mode-enabled");
-
- var elZoneBloomIntensity = document.getElementById("property-zone-bloom-intensity");
- var elZoneBloomThreshold = document.getElementById("property-zone-bloom-threshold");
- var elZoneBloomSize = document.getElementById("property-zone-bloom-size");
-
- var elZoneSkyboxColor = document.getElementById("property-zone-skybox-color");
- var elZoneSkyboxColorRed = document.getElementById("property-zone-skybox-color-red");
- var elZoneSkyboxColorGreen = document.getElementById("property-zone-skybox-color-green");
- var elZoneSkyboxColorBlue = document.getElementById("property-zone-skybox-color-blue");
- var elZoneSkyboxURL = document.getElementById("property-zone-skybox-url");
-
- var elZoneFlyingAllowed = document.getElementById("property-zone-flying-allowed");
- var elZoneGhostingAllowed = document.getElementById("property-zone-ghosting-allowed");
- var elZoneFilterURL = document.getElementById("property-zone-filter-url");
-
- var elVoxelVolumeSizeX = document.getElementById("property-voxel-volume-size-x");
- var elVoxelVolumeSizeY = document.getElementById("property-voxel-volume-size-y");
- var elVoxelVolumeSizeZ = document.getElementById("property-voxel-volume-size-z");
- var elVoxelSurfaceStyle = document.getElementById("property-voxel-surface-style");
- var elXTextureURL = document.getElementById("property-x-texture-url");
- var elYTextureURL = document.getElementById("property-y-texture-url");
- var elZTextureURL = document.getElementById("property-z-texture-url");
-
- if (window.EventBridge !== undefined) {
+ elProperty.appendChild(elSpan);
+ elProperty.appendChild(elLabel);
+ elPropertyElements[propertyName] = [ elSpan, elLabel ];
+ break;
+ }
+ case 'buttons': {
+ elProperty.setAttribute("class", "property Text");
+
+ let hasLabel = property.label !== undefined;
+ if (hasLabel) {
+ elProperty.appendChild(elLabel);
+ }
+
+ if (property.buttons !== undefined) {
+ addButtons(elProperty, propertyID, property.buttons, hasLabel);
+ }
+
+ elPropertyElements[propertyName] = elProperty;
+ break;
+ }
+ case 'sub-header': {
+ if (propertyName !== undefined) {
+ elPropertyElements[propertyName] = elProperty;
+ }
+ break;
+ }
+ }
+
+ let showPropertyRule = property.showPropertyRule;
+ if (showPropertyRule !== undefined) {
+ let dependentProperty = Object.keys(showPropertyRule)[0];
+ let dependentPropertyValue = showPropertyRule[dependentProperty];
+ if (!showPropertyRules[dependentProperty]) {
+ showPropertyRules[dependentProperty] = [];
+ }
+ showPropertyRules[dependentProperty][propertyName] = dependentPropertyValue;
+ }
+ });
+
+ elGroups[group.id] = elGroup;
+ });
+
+ if (window.EventBridge !== undefined) {
var properties;
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.
@@ -913,218 +2114,33 @@ function loaded() {
elServerScriptStatus.innerText = "Not running";
}
} else if (data.type === "update" && data.selections) {
-
if (data.selections.length === 0) {
if (lastEntityID !== null) {
if (editor !== null) {
- saveJSONUserData(true);
+ saveUserData();
deleteJSONEditor();
}
if (materialEditor !== null) {
- saveJSONMaterialData(true);
+ saveMaterialData();
deleteJSONMaterialEditor();
}
}
-
- elTypeIcon.style.display = "none";
- elType.innerHTML = "
No selection";
- elPropertiesList.className = '';
-
- elID.value = "";
- elName.value = "";
- elLocked.checked = false;
- elVisible.checked = false;
-
- elParentID.value = "";
- elParentJointIndex.value = "";
-
- elColorRed.value = "";
- elColorGreen.value = "";
- elColorBlue.value = "";
- elColorControlVariant2.style.backgroundColor = "rgb(" + 0 + "," + 0 + "," + 0 + ")";
-
- elPositionX.value = "";
- elPositionY.value = "";
- elPositionZ.value = "";
-
- elRotationX.value = "";
- elRotationY.value = "";
- elRotationZ.value = "";
-
- elDimensionsX.value = "";
- elDimensionsY.value = "";
- elDimensionsZ.value = "";
-
- elRegistrationX.value = "";
- elRegistrationY.value = "";
- elRegistrationZ.value = "";
-
- elLinearVelocityX.value = "";
- elLinearVelocityY.value = "";
- elLinearVelocityZ.value = "";
- elLinearDamping.value = "";
-
- elAngularVelocityX.value = "";
- elAngularVelocityY.value = "";
- elAngularVelocityZ.value = "";
- elAngularDamping.value = "";
-
- elGravityX.value = "";
- elGravityY.value = "";
- elGravityZ.value = "";
-
- elAccelerationX.value = "";
- elAccelerationY.value = "";
- elAccelerationZ.value = "";
-
- elRestitution.value = "";
- elFriction.value = "";
- elDensity.value = "";
-
- elCollisionless.checked = false;
- elDynamic.checked = false;
-
- elCollideStatic.checked = false;
- elCollideKinematic.checked = false;
- elCollideDynamic.checked = false;
- elCollideMyAvatar.checked = false;
- elCollideOtherAvatar.checked = false;
-
- elGrabbable.checked = false;
- elTriggerable.checked = false;
- elIgnoreIK.checked = false;
-
- elCloneable.checked = false;
- elCloneableDynamic.checked = false;
- elCloneableAvatarEntity.checked = false;
- elCloneableGroup.style.display = "none";
- elCloneableLimit.value = "";
- elCloneableLifetime.value = "";
-
- showElements(document.getElementsByClassName('can-cast-shadow-section'), true);
- elCanCastShadow.checked = false;
-
- elCollisionSoundURL.value = "";
- elLifetime.value = "";
- elScriptURL.value = "";
- elServerScripts.value = "";
- elHyperlinkHref.value = "";
- elDescription.value = "";
-
- deleteJSONEditor();
- elUserData.value = "";
+
+ elPropertyElements["type"][0].style.display = "none";
+ elPropertyElements["type"][1].innerHTML = NO_SELECTION;
+ elPropertiesList.className = '';
+ showGroupsForType("None");
+
+ resetProperties();
+
+ deleteJSONEditor();
+ elPropertyElements["userData"].value = "";
showUserDataTextArea();
showSaveUserDataButton();
showNewJSONEditorButton();
-
- // Shape Properties
- elShape.value = "Cube";
- setDropdownText(elShape);
-
- // Light Properties
- elLightSpotLight.checked = false;
- elLightColor.style.backgroundColor = "rgb(" + 0 + "," + 0 + "," + 0 + ")";
- elLightColorRed.value = "";
- elLightColorGreen.value = "";
- elLightColorBlue.value = "";
- elLightIntensity.value = "";
- elLightFalloffRadius.value = "";
- elLightExponent.value = "";
- elLightCutoff.value = "";
-
- // Model Properties
- elModelURL.value = "";
- elCompoundShapeURL.value = "";
- elShapeType.value = "none";
- setDropdownText(elShapeType);
- elModelAnimationURL.value = ""
- elModelAnimationPlaying.checked = false;
- elModelAnimationFPS.value = "";
- elModelAnimationFrame.value = "";
- elModelAnimationFirstFrame.value = "";
- elModelAnimationLastFrame.value = "";
- elModelAnimationLoop.checked = false;
- elModelAnimationHold.checked = false;
- elModelAnimationAllowTranslation.checked = false;
- elModelTextures.value = "";
- elModelOriginalTextures.value = "";
-
- // Zone Properties
- elZoneFlyingAllowed.checked = false;
- elZoneGhostingAllowed.checked = false;
- elZoneFilterURL.value = "";
- elZoneKeyLightColor.style.backgroundColor = "rgb(" + 0 + "," + 0 + "," + 0 + ")";
- elZoneKeyLightColorRed.value = "";
- elZoneKeyLightColorGreen.value = "";
- elZoneKeyLightColorBlue.value = "";
- elZoneKeyLightIntensity.value = "";
- elZoneKeyLightDirectionX.value = "";
- elZoneKeyLightDirectionY.value = "";
- elZoneKeyLightCastShadows.checked = false;
- elZoneAmbientLightIntensity.value = "";
- elZoneAmbientLightURL.value = "";
- elZoneHazeRange.value = "";
- elZoneHazeColor.style.backgroundColor = "rgb(" + 0 + "," + 0 + "," + 0 + ")";
- elZoneHazeColorRed.value = "";
- elZoneHazeColorGreen.value = "";
- elZoneHazeColorBlue.value = "";
- elZoneHazeBackgroundBlend.value = 0;
- elZoneHazeGlareColor.style.backgroundColor = "rgb(" + 0 + "," + 0 + "," + 0 + ")";
- elZoneHazeGlareColorRed.value = "";
- elZoneHazeGlareColorGreen.value = "";
- elZoneHazeGlareColorBlue.value = "";
- elZoneHazeEnableGlare.checked = false;
- elZoneHazeGlareAngle.value = "";
- elZoneHazeAltitudeEffect.checked = false;
- elZoneHazeBaseRef.value = "";
- elZoneHazeCeiling.value = "";
- elZoneBloomIntensity.value = "";
- elZoneBloomThreshold.value = "";
- elZoneBloomSize.value = "";
- elZoneSkyboxColor.style.backgroundColor = "rgb(" + 0 + "," + 0 + "," + 0 + ")";
- elZoneSkyboxColorRed.value = "";
- elZoneSkyboxColorGreen.value = "";
- elZoneSkyboxColorBlue.value = "";
- elZoneSkyboxURL.value = "";
- showElements(document.getElementsByClassName('keylight-section'), true);
- showElements(document.getElementsByClassName('skybox-section'), true);
- showElements(document.getElementsByClassName('ambient-section'), true);
- showElements(document.getElementsByClassName('haze-section'), true);
- showElements(document.getElementsByClassName('bloom-section'), true);
-
- // Text Properties
- elTextText.value = "";
- elTextLineHeight.value = "";
- elTextFaceCamera.checked = false;
- elTextTextColor.style.backgroundColor = "rgb(" + 0 + "," + 0 + "," + 0 + ")";
- elTextTextColorRed.value = "";
- elTextTextColorGreen.value = "";
- elTextTextColorBlue.value = "";
- elTextBackgroundColor.style.backgroundColor = "rgb(" + 0 + "," + 0 + "," + 0 + ")";
- elTextBackgroundColorRed.value = "";
- elTextBackgroundColorGreen.value = "";
- elTextBackgroundColorBlue.value = "";
-
- // Image Properties
- elImageURL.value = "";
-
- // Web Properties
- elWebSourceURL.value = "";
- elWebDPI.value = "";
-
- // Material Properties
- elMaterialURL.value = "";
- elParentMaterialNameNumber.value = "";
- elParentMaterialNameCheckbox.checked = false;
- elPriority.value = "";
- elMaterialMappingPosX.value = "";
- elMaterialMappingPosY.value = "";
- elMaterialMappingScaleX.value = "";
- elMaterialMappingScaleY.value = "";
- elMaterialMappingRot.value = "";
-
- deleteJSONMaterialEditor();
- elMaterialData.value = "";
+
+ deleteJSONMaterialEditor();
+ elPropertyElements["materialData"].value = "";
showMaterialDataTextArea();
showSaveMaterialDataButton();
showNewJSONMaterialEditorButton();
@@ -1133,15 +2149,16 @@ function loaded() {
} else if (data.selections.length > 1) {
deleteJSONEditor();
deleteJSONMaterialEditor();
- var selections = data.selections;
+
+ let selections = data.selections;
- var ids = [];
- var types = {};
- var numTypes = 0;
+ let ids = [];
+ let types = {};
+ let numTypes = 0;
- for (var i = 0; i < selections.length; i++) {
+ for (let i = 0; i < selections.length; i++) {
ids.push(selections[i].id);
- var currentSelectedType = selections[i].properties.type;
+ let currentSelectedType = selections[i].properties.type;
if (types[currentSelectedType] === undefined) {
types[currentSelectedType] = 0;
numTypes += 1;
@@ -1149,400 +2166,188 @@ function loaded() {
types[currentSelectedType]++;
}
- var type = "Multiple";
+ let type = "Multiple";
if (numTypes === 1) {
type = selections[0].properties.type;
}
-
- elType.innerHTML = type + " (" + data.selections.length + ")";
- elTypeIcon.innerHTML = ICON_FOR_TYPE[type];
- elTypeIcon.style.display = "inline-block";
- elPropertiesList.className = '';
-
- elID.value = "";
-
- disableProperties();
+
+ elPropertyElements["type"][0].innerHTML = ICON_FOR_TYPE[type];
+ elPropertyElements["type"][0].style.display = "inline-block";
+ elPropertyElements["type"][1].innerHTML = type + " (" + data.selections.length + ")";
+ elPropertiesList.className = '';
+ showGroupsForType(type);
+
+ resetProperties();
+ disableProperties();
} else {
-
properties = data.selections[0].properties;
- if (lastEntityID !== '"' + properties.id + '"' && lastEntityID !== null) {
+
+ if (lastEntityID !== '"' + properties.id + '"' && lastEntityID !== null) {
if (editor !== null) {
- saveJSONUserData(true);
+ saveUserData();
}
if (materialEditor !== null) {
- saveJSONMaterialData(true);
+ saveMaterialData();
}
}
- var doSelectElement = lastEntityID === '"' + properties.id + '"';
+ let doSelectElement = lastEntityID === '"' + properties.id + '"';
// the event bridge and json parsing handle our avatar id string differently.
lastEntityID = '"' + properties.id + '"';
- elID.value = properties.id;
// HTML workaround since image is not yet a separate entity type
- var IMAGE_MODEL_NAME = 'default-image-model.fbx';
+ let IMAGE_MODEL_NAME = 'default-image-model.fbx';
if (properties.type === "Model") {
- var urlParts = properties.modelURL.split('/');
- var propsFilename = urlParts[urlParts.length - 1];
+ let urlParts = properties.modelURL.split('/');
+ let propsFilename = urlParts[urlParts.length - 1];
if (propsFilename === IMAGE_MODEL_NAME) {
properties.type = "Image";
}
}
-
+
// Create class name for css ruleset filtering
elPropertiesList.className = properties.type + 'Menu';
+ showGroupsForType(properties.type);
+
+ for (let propertyName in elPropertyElements) {
+ let elProperty = elPropertyElements[propertyName];
+
+ let propertyValue;
+ let splitPropertyName = propertyName.split('.');
+ if (splitPropertyName.length > 1) {
+ let propertyGroupName = splitPropertyName[0];
+ let subPropertyName = splitPropertyName[1];
+ if (properties[propertyGroupName] === undefined || properties[propertyGroupName][subPropertyName] === undefined) {
+ continue;
+ }
+ if (splitPropertyName.length === 3) {
+ let subSubPropertyName = splitPropertyName[2];
+ propertyValue = properties[propertyGroupName][subPropertyName][subSubPropertyName];
+ } else {
+ propertyValue = properties[propertyGroupName][subPropertyName];
+ }
+ } else {
+ propertyValue = properties[propertyName];
+ }
- elType.innerHTML = properties.type;
- elTypeIcon.innerHTML = ICON_FOR_TYPE[properties.type];
- elTypeIcon.style.display = "inline-block";
-
- elLocked.checked = properties.locked;
-
- elName.value = properties.name;
-
- elVisible.checked = properties.visible;
-
- elPositionX.value = properties.position.x.toFixed(4);
- elPositionY.value = properties.position.y.toFixed(4);
- elPositionZ.value = properties.position.z.toFixed(4);
-
- elDimensionsX.value = properties.dimensions.x.toFixed(4);
- elDimensionsY.value = properties.dimensions.y.toFixed(4);
- elDimensionsZ.value = properties.dimensions.z.toFixed(4);
-
- elParentID.value = properties.parentID;
- elParentJointIndex.value = properties.parentJointIndex;
-
- elRegistrationX.value = properties.registrationPoint.x.toFixed(4);
- elRegistrationY.value = properties.registrationPoint.y.toFixed(4);
- elRegistrationZ.value = properties.registrationPoint.z.toFixed(4);
-
- elRotationX.value = properties.rotation.x.toFixed(4);
- elRotationY.value = properties.rotation.y.toFixed(4);
- elRotationZ.value = properties.rotation.z.toFixed(4);
-
- elLinearVelocityX.value = properties.velocity.x.toFixed(4);
- elLinearVelocityY.value = properties.velocity.y.toFixed(4);
- elLinearVelocityZ.value = properties.velocity.z.toFixed(4);
- elLinearDamping.value = properties.damping.toFixed(2);
-
- elAngularVelocityX.value = (properties.angularVelocity.x * RADIANS_TO_DEGREES).toFixed(4);
- elAngularVelocityY.value = (properties.angularVelocity.y * RADIANS_TO_DEGREES).toFixed(4);
- elAngularVelocityZ.value = (properties.angularVelocity.z * RADIANS_TO_DEGREES).toFixed(4);
- elAngularDamping.value = properties.angularDamping.toFixed(4);
-
- elRestitution.value = properties.restitution.toFixed(4);
- elFriction.value = properties.friction.toFixed(4);
-
- elGravityX.value = properties.gravity.x.toFixed(4);
- elGravityY.value = properties.gravity.y.toFixed(4);
- elGravityZ.value = properties.gravity.z.toFixed(4);
-
- elAccelerationX.value = properties.acceleration.x.toFixed(4);
- elAccelerationY.value = properties.acceleration.y.toFixed(4);
- elAccelerationZ.value = properties.acceleration.z.toFixed(4);
-
- elDensity.value = properties.density.toFixed(4);
- elCollisionless.checked = properties.collisionless;
- elDynamic.checked = properties.dynamic;
-
- elCollideStatic.checked = properties.collidesWith.indexOf("static") > -1;
- elCollideKinematic.checked = properties.collidesWith.indexOf("kinematic") > -1;
- elCollideDynamic.checked = properties.collidesWith.indexOf("dynamic") > -1;
- elCollideMyAvatar.checked = properties.collidesWith.indexOf("myAvatar") > -1;
- elCollideOtherAvatar.checked = properties.collidesWith.indexOf("otherAvatar") > -1;
-
- elGrabbable.checked = properties.dynamic;
-
- elTriggerable.checked = false;
- elIgnoreIK.checked = true;
-
- elCloneable.checked = properties.cloneable;
- elCloneableDynamic.checked = properties.cloneDynamic;
- elCloneableAvatarEntity.checked = properties.cloneAvatarEntity;
- elCloneableGroup.style.display = elCloneable.checked ? "block": "none";
- elCloneableLimit.value = properties.cloneLimit;
- elCloneableLifetime.value = properties.cloneLifetime;
-
- var grabbablesSet = false;
- var parsedUserData = {};
- try {
- parsedUserData = JSON.parse(properties.userData);
-
- if ("grabbableKey" in parsedUserData) {
- grabbablesSet = true;
- var grabbableData = parsedUserData.grabbableKey;
- if ("grabbable" in grabbableData) {
- elGrabbable.checked = grabbableData.grabbable;
- } else {
- elGrabbable.checked = true;
- }
- if ("triggerable" in grabbableData) {
- elTriggerable.checked = grabbableData.triggerable;
- } else if ("wantsTrigger" in grabbableData) {
- elTriggerable.checked = grabbableData.wantsTrigger;
- } else {
- elTriggerable.checked = false;
- }
- if ("ignoreIK" in grabbableData) {
- elIgnoreIK.checked = grabbableData.ignoreIK;
- } else {
- elIgnoreIK.checked = true;
- }
- }
- } catch (e) {
- // TODO: What should go here?
- }
- if (!grabbablesSet) {
- elGrabbable.checked = true;
- elTriggerable.checked = false;
- elIgnoreIK.checked = true;
- elCloneable.checked = false;
- }
-
- elCollisionSoundURL.value = properties.collisionSoundURL;
- elLifetime.value = properties.lifetime;
- elScriptURL.value = properties.script;
- elScriptTimestamp.value = properties.scriptTimestamp;
- elServerScripts.value = properties.serverScripts;
-
- var json = null;
- try {
- json = JSON.parse(properties.userData);
- } catch (e) {
- // normal text
- deleteJSONEditor();
- elUserData.value = properties.userData;
- showUserDataTextArea();
- showNewJSONEditorButton();
- hideSaveUserDataButton();
- }
- if (json !== null) {
- if (editor === null) {
- createJSONEditor();
- }
-
- setEditorJSON(json);
- showSaveUserDataButton();
- hideUserDataTextArea();
- hideNewJSONEditorButton();
- }
-
- var materialJson = null;
- try {
- materialJson = JSON.parse(properties.materialData);
- } catch (e) {
- // normal text
- deleteJSONMaterialEditor();
- elMaterialData.value = properties.materialData;
- showMaterialDataTextArea();
- showNewJSONMaterialEditorButton();
- hideSaveMaterialDataButton();
- }
- if (materialJson !== null) {
- if (materialEditor === null) {
- createJSONMaterialEditor();
- }
-
- setMaterialEditorJSON(materialJson);
- showSaveMaterialDataButton();
- hideMaterialDataTextArea();
- hideNewJSONMaterialEditorButton();
- }
-
- elHyperlinkHref.value = properties.href;
- elDescription.value = properties.description;
-
-
- if (properties.type === "Shape" || properties.type === "Box" || properties.type === "Sphere") {
- elShape.value = properties.shape;
- setDropdownText(elShape);
- }
-
- if (properties.type === "Shape" || properties.type === "Box" ||
- properties.type === "Sphere" || properties.type === "ParticleEffect") {
- elColorRed.value = properties.color.red;
- elColorGreen.value = properties.color.green;
- elColorBlue.value = properties.color.blue;
- elColorControlVariant2.style.backgroundColor = "rgb(" + properties.color.red + "," +
- properties.color.green + "," + properties.color.blue + ")";
- }
-
- if (properties.type === "Model" ||
- properties.type === "Shape" || properties.type === "Box" || properties.type === "Sphere") {
-
- elCanCastShadow.checked = properties.canCastShadow;
- }
-
- if (properties.type === "Model") {
- elModelURL.value = properties.modelURL;
- elShapeType.value = properties.shapeType;
- setDropdownText(elShapeType);
- elCompoundShapeURL.value = properties.compoundShapeURL;
- elModelAnimationURL.value = properties.animation.url;
- elModelAnimationPlaying.checked = properties.animation.running;
- elModelAnimationFPS.value = properties.animation.fps;
- elModelAnimationFrame.value = properties.animation.currentFrame;
- elModelAnimationFirstFrame.value = properties.animation.firstFrame;
- elModelAnimationLastFrame.value = properties.animation.lastFrame;
- elModelAnimationLoop.checked = properties.animation.loop;
- elModelAnimationHold.checked = properties.animation.hold;
- elModelAnimationAllowTranslation.checked = properties.animation.allowTranslation;
- elModelTextures.value = properties.textures;
- setTextareaScrolling(elModelTextures);
- elModelOriginalTextures.value = properties.originalTextures;
- setTextareaScrolling(elModelOriginalTextures);
- } else if (properties.type === "Web") {
- elWebSourceURL.value = properties.sourceUrl;
- elWebDPI.value = properties.dpi;
- } else if (properties.type === "Image") {
+ // workaround for shape Color & Light Color property fields sharing same property value "color"
+ if (propertyValue === undefined && propertyName === "lightColor") {
+ propertyValue = properties["color"]
+ }
+
+ let isSubProperty = subProperties.indexOf(propertyName) > -1;
+ if (elProperty === undefined || (propertyValue === undefined && !isSubProperty)) {
+ continue;
+ }
+
+ if (elProperty instanceof Array) {
+ if (elProperty[1].getAttribute("type") === "number") { // vectors
+ if (elProperty.length === 2 || elProperty.length === 3) {
+ // vec2/vec3 are array of 2/3 input numbers
+ elProperty[0].value = (propertyValue.x * 1 / elProperty[0].getAttribute("multiplier")).toFixed(4);
+ elProperty[1].value = (propertyValue.y * 1 / elProperty[1].getAttribute("multiplier")).toFixed(4);
+ if (elProperty[2] !== undefined) {
+ elProperty[2].value = (propertyValue.z * 1 / elProperty[1].getAttribute("multiplier")).toFixed(4);
+ }
+ } else if (elProperty.length === 4) {
+ // color is array of color picker and 3 input numbers
+ elProperty[0].style.backgroundColor = "rgb(" + propertyValue.red + "," + propertyValue.green + "," + propertyValue.blue + ")";
+ elProperty[1].value = propertyValue.red;
+ elProperty[2].value = propertyValue.green;
+ elProperty[3].value = propertyValue.blue;
+ }
+ } else if (elProperty[0].nodeName === "SPAN") { // icons
+ // icon is array of elSpan (icon glyph) and elLabel
+ elProperty[0].innerHTML = icons[propertyName][propertyValue];
+ elProperty[0].style.display = "inline-block";
+ elProperty[1].innerHTML = propertyValue; //+ " (" + data.selections.length + ")";
+ }
+ } else if (elProperty.getAttribute("subPropertyOf")) {
+ let propertyValue = properties[elProperty.getAttribute("subPropertyOf")];
+ let subProperties = propertyValue.split(",");
+ elProperty.checked = subProperties.indexOf(propertyName) > -1;
+ } else if (elProperty.getAttribute("type") === "number") {
+ let fixedDecimals = elProperty.getAttribute("fixedDecimals");
+ elProperty.value = propertyValue.toFixed(fixedDecimals);
+ } else if (elProperty.getAttribute("type") === "checkbox") {
+ let inverse = elProperty.getAttribute("inverse") === "true";
+ elProperty.checked = inverse ? !propertyValue : propertyValue;
+ } else if (elProperty.nodeName === "TEXTAREA") {
+ elProperty.value = propertyValue;
+ setTextareaScrolling(elProperty);
+ } else if (elProperty.nodeName === "SELECT") { // dropdown
+ elProperty.value = propertyValue;
+ } else {
+ elProperty.value = propertyValue;
+ }
+
+ let propertyShowRules = showPropertyRules[propertyName];
+ if (propertyShowRules !== undefined) {
+ for (let propertyToShow in propertyShowRules) {
+ let showIfThisPropertyValue = propertyShowRules[propertyToShow];
+ let show = String(propertyValue) === String(showIfThisPropertyValue);
+ let elPropertyToShow = elPropertyElements[propertyToShow];
+ if (elPropertyToShow) {
+ let parentNode = elPropertyToShow.parentNode;
+ if (parentNode === undefined && elPropertyToShow instanceof Array) {
+ parentNode = elPropertyToShow[0].parentNode;
+ }
+ parentNode.style.display = show ? "block" : "none";
+ }
+ }
+ }
+ }
+
+ let elGrabbable = elPropertyElements["grabbable"];
+ let elTriggerable = elPropertyElements["triggerable"];
+ let elIgnoreIK = elPropertyElements["ignoreIK"];
+ elGrabbable.checked = elPropertyElements["dynamic"].checked;
+ elTriggerable.checked = false;
+ elIgnoreIK.checked = true;
+ let grabbablesSet = false;
+ let parsedUserData = {};
+ try {
+ parsedUserData = JSON.parse(properties.userData);
+ if ("grabbableKey" in parsedUserData) {
+ grabbablesSet = true;
+ let grabbableData = parsedUserData.grabbableKey;
+ if ("grabbable" in grabbableData) {
+ elGrabbable.checked = grabbableData.grabbable;
+ } else {
+ elGrabbable.checked = true;
+ }
+ if ("triggerable" in grabbableData) {
+ elTriggerable.checked = grabbableData.triggerable;
+ } else if ("wantsTrigger" in grabbableData) {
+ elTriggerable.checked = grabbableData.wantsTrigger;
+ } else {
+ elTriggerable.checked = false;
+ }
+ if ("ignoreIK" in grabbableData) {
+ elIgnoreIK.checked = grabbableData.ignoreIK;
+ } else {
+ elIgnoreIK.checked = true;
+ }
+ }
+ } catch (e) {
+ // TODO: What should go here?
+ }
+ if (!grabbablesSet) {
+ elGrabbable.checked = true;
+ elTriggerable.checked = false;
+ elIgnoreIK.checked = true;
+ }
+
+ if (properties.type === "Image") {
var imageLink = JSON.parse(properties.textures)["tex.picture"];
- elImageURL.value = imageLink;
- } else if (properties.type === "Text") {
- elTextText.value = properties.text;
- elTextLineHeight.value = properties.lineHeight.toFixed(4);
- elTextFaceCamera.checked = properties.faceCamera;
- elTextTextColor.style.backgroundColor = "rgb(" + properties.textColor.red + "," +
- properties.textColor.green + "," +
- properties.textColor.blue + ")";
- elTextTextColorRed.value = properties.textColor.red;
- elTextTextColorGreen.value = properties.textColor.green;
- elTextTextColorBlue.value = properties.textColor.blue;
- elTextBackgroundColor.style.backgroundColor = "rgb(" + properties.backgroundColor.red + "," +
- properties.backgroundColor.green + "," +
- properties.backgroundColor.blue + ")";
- elTextBackgroundColorRed.value = properties.backgroundColor.red;
- elTextBackgroundColorGreen.value = properties.backgroundColor.green;
- elTextBackgroundColorBlue.value = properties.backgroundColor.blue;
- } else if (properties.type === "Light") {
- elLightSpotLight.checked = properties.isSpotlight;
-
- elLightColor.style.backgroundColor = "rgb(" + properties.color.red + "," +
- properties.color.green + "," + properties.color.blue + ")";
- elLightColorRed.value = properties.color.red;
- elLightColorGreen.value = properties.color.green;
- elLightColorBlue.value = properties.color.blue;
-
- elLightIntensity.value = properties.intensity.toFixed(1);
- elLightFalloffRadius.value = properties.falloffRadius.toFixed(1);
- elLightExponent.value = properties.exponent.toFixed(2);
- elLightCutoff.value = properties.cutoff.toFixed(2);
- } else if (properties.type === "Zone") {
- // Key light
- elZoneKeyLightModeInherit.checked = (properties.keyLightMode === 'inherit');
- elZoneKeyLightModeDisabled.checked = (properties.keyLightMode === 'disabled');
- elZoneKeyLightModeEnabled.checked = (properties.keyLightMode === 'enabled');
-
- elZoneKeyLightColor.style.backgroundColor = "rgb(" + properties.keyLight.color.red + "," +
- properties.keyLight.color.green + "," + properties.keyLight.color.blue + ")";
- elZoneKeyLightColorRed.value = properties.keyLight.color.red;
- elZoneKeyLightColorGreen.value = properties.keyLight.color.green;
- elZoneKeyLightColorBlue.value = properties.keyLight.color.blue;
- elZoneKeyLightIntensity.value = properties.keyLight.intensity.toFixed(2);
- elZoneKeyLightDirectionX.value = properties.keyLight.direction.x.toFixed(2);
- elZoneKeyLightDirectionY.value = properties.keyLight.direction.y.toFixed(2);
-
- elZoneKeyLightCastShadows.checked = properties.keyLight.castShadows;
-
- // Skybox
- elZoneSkyboxModeInherit.checked = (properties.skyboxMode === 'inherit');
- elZoneSkyboxModeDisabled.checked = (properties.skyboxMode === 'disabled');
- elZoneSkyboxModeEnabled.checked = (properties.skyboxMode === 'enabled');
-
- // Ambient light
- elZoneAmbientLightModeInherit.checked = (properties.ambientLightMode === 'inherit');
- elZoneAmbientLightModeDisabled.checked = (properties.ambientLightMode === 'disabled');
- elZoneAmbientLightModeEnabled.checked = (properties.ambientLightMode === 'enabled');
-
- elZoneAmbientLightIntensity.value = properties.ambientLight.ambientIntensity.toFixed(2);
- elZoneAmbientLightURL.value = properties.ambientLight.ambientURL;
-
- // Haze
- elZoneHazeModeInherit.checked = (properties.hazeMode === 'inherit');
- elZoneHazeModeDisabled.checked = (properties.hazeMode === 'disabled');
- elZoneHazeModeEnabled.checked = (properties.hazeMode === 'enabled');
-
- elZoneHazeRange.value = properties.haze.hazeRange.toFixed(0);
- elZoneHazeColor.style.backgroundColor = "rgb(" +
- properties.haze.hazeColor.red + "," +
- properties.haze.hazeColor.green + "," +
- properties.haze.hazeColor.blue + ")";
-
- elZoneHazeColorRed.value = properties.haze.hazeColor.red;
- elZoneHazeColorGreen.value = properties.haze.hazeColor.green;
- elZoneHazeColorBlue.value = properties.haze.hazeColor.blue;
- elZoneHazeBackgroundBlend.value = properties.haze.hazeBackgroundBlend.toFixed(2);
-
- elZoneHazeGlareColor.style.backgroundColor = "rgb(" +
- properties.haze.hazeGlareColor.red + "," +
- properties.haze.hazeGlareColor.green + "," +
- properties.haze.hazeGlareColor.blue + ")";
-
- elZoneHazeGlareColorRed.value = properties.haze.hazeGlareColor.red;
- elZoneHazeGlareColorGreen.value = properties.haze.hazeGlareColor.green;
- elZoneHazeGlareColorBlue.value = properties.haze.hazeGlareColor.blue;
-
- elZoneHazeEnableGlare.checked = properties.haze.hazeEnableGlare;
- elZoneHazeGlareAngle.value = properties.haze.hazeGlareAngle.toFixed(0);
-
- elZoneHazeAltitudeEffect.checked = properties.haze.hazeAltitudeEffect;
- elZoneHazeBaseRef.value = properties.haze.hazeBaseRef.toFixed(0);
- elZoneHazeCeiling.value = properties.haze.hazeCeiling.toFixed(0);
-
- elZoneBloomModeInherit.checked = (properties.bloomMode === 'inherit');
- elZoneBloomModeDisabled.checked = (properties.bloomMode === 'disabled');
- elZoneBloomModeEnabled.checked = (properties.bloomMode === 'enabled');
-
- elZoneBloomIntensity.value = properties.bloom.bloomIntensity.toFixed(2);
- elZoneBloomThreshold.value = properties.bloom.bloomThreshold.toFixed(2);
- elZoneBloomSize.value = properties.bloom.bloomSize.toFixed(2);
-
- elShapeType.value = properties.shapeType;
- elCompoundShapeURL.value = properties.compoundShapeURL;
-
- elZoneSkyboxColor.style.backgroundColor = "rgb(" + properties.skybox.color.red + "," +
- properties.skybox.color.green + "," + properties.skybox.color.blue + ")";
- elZoneSkyboxColorRed.value = properties.skybox.color.red;
- elZoneSkyboxColorGreen.value = properties.skybox.color.green;
- elZoneSkyboxColorBlue.value = properties.skybox.color.blue;
- elZoneSkyboxURL.value = properties.skybox.url;
-
- elZoneFlyingAllowed.checked = properties.flyingAllowed;
- elZoneGhostingAllowed.checked = properties.ghostingAllowed;
- elZoneFilterURL.value = properties.filterURL;
-
- // Show/hide sections as required
- showElements(document.getElementsByClassName('skybox-section'),
- elZoneSkyboxModeEnabled.checked);
-
- showElements(document.getElementsByClassName('keylight-section'),
- elZoneKeyLightModeEnabled.checked);
-
- showElements(document.getElementsByClassName('ambient-section'),
- elZoneAmbientLightModeEnabled.checked);
-
- showElements(document.getElementsByClassName('haze-section'),
- elZoneHazeModeEnabled.checked);
-
- showElements(document.getElementsByClassName('bloom-section'),
- elZoneBloomModeEnabled.checked);
- } else if (properties.type === "PolyVox") {
- elVoxelVolumeSizeX.value = properties.voxelVolumeSize.x.toFixed(2);
- elVoxelVolumeSizeY.value = properties.voxelVolumeSize.y.toFixed(2);
- elVoxelVolumeSizeZ.value = properties.voxelVolumeSize.z.toFixed(2);
- elVoxelSurfaceStyle.value = properties.voxelSurfaceStyle;
- setDropdownText(elVoxelSurfaceStyle);
- elXTextureURL.value = properties.xTextureURL;
- elYTextureURL.value = properties.yTextureURL;
- elZTextureURL.value = properties.zTextureURL;
- } else if (properties.type === "Material") {
- elMaterialURL.value = properties.materialURL;
- //elMaterialMappingMode.value = properties.materialMappingMode;
- //setDropdownText(elMaterialMappingMode);
- elPriority.value = properties.priority;
- if (properties.parentMaterialName.startsWith(MATERIAL_PREFIX_STRING)) {
+ elPropertyElements["image"].value = imageLink;
+ } else if (properties.type === "Material") {
+ let elParentMaterialNameString = elPropertyElements["materialNameToReplace"];
+ let elParentMaterialNameNumber = elPropertyElements["submeshToReplace"];
+ let elParentMaterialNameCheckbox = elPropertyElements["selectSubmesh"];
+ if (properties.parentMaterialName.startsWith(MATERIAL_PREFIX_STRING)) {
elParentMaterialNameString.value = properties.parentMaterialName.replace(MATERIAL_PREFIX_STRING, "");
showParentMaterialNameBox(false, elParentMaterialNameNumber, elParentMaterialNameString);
elParentMaterialNameCheckbox.checked = false;
@@ -1551,32 +2356,64 @@ function loaded() {
showParentMaterialNameBox(true, elParentMaterialNameNumber, elParentMaterialNameString);
elParentMaterialNameCheckbox.checked = true;
}
- elMaterialMappingPosX.value = properties.materialMappingPos.x.toFixed(4);
- elMaterialMappingPosY.value = properties.materialMappingPos.y.toFixed(4);
- elMaterialMappingScaleX.value = properties.materialMappingScale.x.toFixed(4);
- elMaterialMappingScaleY.value = properties.materialMappingScale.y.toFixed(4);
- elMaterialMappingRot.value = properties.materialMappingRot.toFixed(2);
+ }
+
+ let json = null;
+ try {
+ json = JSON.parse(properties.userData);
+ } catch (e) {
+ // normal text
+ deleteJSONEditor();
+ elPropertyElements["userData"].value = properties.userData;
+ showUserDataTextArea();
+ showNewJSONEditorButton();
+ hideSaveUserDataButton();
+ hideUserDataSaved();
+ }
+ if (json !== null) {
+ if (editor === null) {
+ createJSONEditor();
+ }
+ setEditorJSON(json);
+ showSaveUserDataButton();
+ hideUserDataTextArea();
+ hideNewJSONEditorButton();
+ hideUserDataSaved();
}
- // Only these types can cast a shadow
- if (properties.type === "Model" ||
- properties.type === "Shape" || properties.type === "Box" || properties.type === "Sphere") {
-
- showElements(document.getElementsByClassName('can-cast-shadow-section'), true);
- } else {
- showElements(document.getElementsByClassName('can-cast-shadow-section'), false);
+ let materialJson = null;
+ try {
+ materialJson = JSON.parse(properties.materialData);
+ } catch (e) {
+ // normal text
+ deleteJSONMaterialEditor();
+ elPropertyElements["materialData"].value = properties.materialData;
+ showMaterialDataTextArea();
+ showNewJSONMaterialEditorButton();
+ hideSaveMaterialDataButton();
+ hideMaterialDataSaved();
}
-
- if (properties.locked) {
- disableProperties();
- elLocked.removeAttribute('disabled');
- } else {
- enableProperties();
- elSaveUserData.disabled = true;
- elSaveMaterialData.disabled = true;
+ if (materialJson !== null) {
+ if (materialEditor === null) {
+ createJSONMaterialEditor();
+ }
+ setMaterialEditorJSON(materialJson);
+ showSaveMaterialDataButton();
+ hideMaterialDataTextArea();
+ hideNewJSONMaterialEditorButton();
+ hideMaterialDataSaved();
}
-
- var activeElement = document.activeElement;
+
+ if (properties.locked) {
+ disableProperties();
+ elPropertyElements["locked"].removeAttribute('disabled');
+ } else {
+ enableProperties();
+ disableSaveUserDataButton();
+ disableSaveMaterialDataButton()
+ }
+
+ var activeElement = document.activeElement;
if (doSelectElement && typeof activeElement.select !== "undefined") {
activeElement.select();
}
@@ -1584,270 +2421,79 @@ function loaded() {
}
});
}
-
- elLocked.addEventListener('change', createEmitCheckedPropertyUpdateFunction('locked'));
- elName.addEventListener('change', createEmitTextPropertyUpdateFunction('name'));
- elHyperlinkHref.addEventListener('change', createEmitTextPropertyUpdateFunction('href'));
- elDescription.addEventListener('change', createEmitTextPropertyUpdateFunction('description'));
- elVisible.addEventListener('change', createEmitCheckedPropertyUpdateFunction('visible'));
-
- var positionChangeFunction = createEmitVec3PropertyUpdateFunction(
- 'position', elPositionX, elPositionY, elPositionZ);
- elPositionX.addEventListener('change', positionChangeFunction);
- elPositionY.addEventListener('change', positionChangeFunction);
- elPositionZ.addEventListener('change', positionChangeFunction);
-
- var dimensionsChangeFunction = createEmitVec3PropertyUpdateFunction(
- 'dimensions', elDimensionsX, elDimensionsY, elDimensionsZ);
- elDimensionsX.addEventListener('change', dimensionsChangeFunction);
- elDimensionsY.addEventListener('change', dimensionsChangeFunction);
- elDimensionsZ.addEventListener('change', dimensionsChangeFunction);
-
- elParentID.addEventListener('change', createEmitTextPropertyUpdateFunction('parentID'));
- elParentJointIndex.addEventListener('change', createEmitNumberPropertyUpdateFunction('parentJointIndex', 0));
-
- var registrationChangeFunction = createEmitVec3PropertyUpdateFunction(
- 'registrationPoint', elRegistrationX, elRegistrationY, elRegistrationZ);
- elRegistrationX.addEventListener('change', registrationChangeFunction);
- elRegistrationY.addEventListener('change', registrationChangeFunction);
- elRegistrationZ.addEventListener('change', registrationChangeFunction);
-
- var rotationChangeFunction = createEmitVec3PropertyUpdateFunction(
- 'rotation', elRotationX, elRotationY, elRotationZ);
- elRotationX.addEventListener('change', rotationChangeFunction);
- elRotationY.addEventListener('change', rotationChangeFunction);
- elRotationZ.addEventListener('change', rotationChangeFunction);
-
- var velocityChangeFunction = createEmitVec3PropertyUpdateFunction(
- 'velocity', elLinearVelocityX, elLinearVelocityY, elLinearVelocityZ);
- elLinearVelocityX.addEventListener('change', velocityChangeFunction);
- elLinearVelocityY.addEventListener('change', velocityChangeFunction);
- elLinearVelocityZ.addEventListener('change', velocityChangeFunction);
- elLinearDamping.addEventListener('change', createEmitNumberPropertyUpdateFunction('damping'));
-
- var angularVelocityChangeFunction = createEmitVec3PropertyUpdateFunctionWithMultiplier(
- 'angularVelocity', elAngularVelocityX, elAngularVelocityY, elAngularVelocityZ, DEGREES_TO_RADIANS);
- elAngularVelocityX.addEventListener('change', angularVelocityChangeFunction);
- elAngularVelocityY.addEventListener('change', angularVelocityChangeFunction);
- elAngularVelocityZ.addEventListener('change', angularVelocityChangeFunction);
- elAngularDamping.addEventListener('change', createEmitNumberPropertyUpdateFunction('angularDamping'));
-
- elRestitution.addEventListener('change', createEmitNumberPropertyUpdateFunction('restitution'));
- elFriction.addEventListener('change', createEmitNumberPropertyUpdateFunction('friction'));
-
- var gravityChangeFunction = createEmitVec3PropertyUpdateFunction(
- 'gravity', elGravityX, elGravityY, elGravityZ);
- elGravityX.addEventListener('change', gravityChangeFunction);
- elGravityY.addEventListener('change', gravityChangeFunction);
- elGravityZ.addEventListener('change', gravityChangeFunction);
-
- var accelerationChangeFunction = createEmitVec3PropertyUpdateFunction(
- 'acceleration', elAccelerationX, elAccelerationY, elAccelerationZ);
- elAccelerationX.addEventListener('change', accelerationChangeFunction);
- elAccelerationY.addEventListener('change', accelerationChangeFunction);
- elAccelerationZ.addEventListener('change', accelerationChangeFunction);
-
- elDensity.addEventListener('change', createEmitNumberPropertyUpdateFunction('density'));
- elCollisionless.addEventListener('change', createEmitCheckedPropertyUpdateFunction('collisionless'));
- elDynamic.addEventListener('change', createEmitCheckedPropertyUpdateFunction('dynamic'));
-
- elCollideDynamic.addEventListener('change', function() {
- updateCheckedSubProperty("collidesWith", properties.collidesWith, elCollideDynamic, 'dynamic');
- });
-
- elCollideKinematic.addEventListener('change', function() {
- updateCheckedSubProperty("collidesWith", properties.collidesWith, elCollideKinematic, 'kinematic');
- });
-
- elCollideStatic.addEventListener('change', function() {
- updateCheckedSubProperty("collidesWith", properties.collidesWith, elCollideStatic, 'static');
- });
- elCollideMyAvatar.addEventListener('change', function() {
- updateCheckedSubProperty("collidesWith", properties.collidesWith, elCollideMyAvatar, 'myAvatar');
- });
- elCollideOtherAvatar.addEventListener('change', function() {
- updateCheckedSubProperty("collidesWith", properties.collidesWith, elCollideOtherAvatar, 'otherAvatar');
- });
-
- elGrabbable.addEventListener('change', function() {
- if (elCloneable.checked) {
- elGrabbable.checked = false;
- }
+
+ // Server Script Status
+ let elServerScript = elPropertyElements["serverScripts"];
+ let elDiv = document.createElement('div');
+ elDiv.setAttribute("class", "property");
+ let elLabel = document.createElement('label');
+ elLabel.setAttribute("for", "property-serverScripts-status");
+ elLabel.innerText = "Server Script Status";
+ let elServerScriptStatus = document.createElement('span');
+ elServerScriptStatus.setAttribute("id", "property-serverScripts-status");
+ elDiv.appendChild(elLabel);
+ elDiv.appendChild(elServerScriptStatus);
+ elServerScript.parentNode.appendChild(elDiv);
+
+ // Server Script Error
+ elDiv = document.createElement('div');
+ elDiv.setAttribute("class", "property");
+ let elServerScriptError = document.createElement('textarea');
+ elServerScriptError.setAttribute("id", "property-serverScripts-error");
+ elDiv.appendChild(elServerScriptError);
+ elServerScript.parentNode.appendChild(elDiv);
+
+ let elScript = elPropertyElements["script"];
+ elScript.parentNode.setAttribute("class", "property url refresh");
+ elServerScript.parentNode.setAttribute("class", "property url refresh");
+
+ // User Data
+ let elUserData = elPropertyElements["userData"];
+ elDiv = elUserData.parentNode;
+ let elStaticUserData = document.createElement('div');
+ elStaticUserData.setAttribute("id", "property-userData-static");
+ let elUserDataEditor = document.createElement('div');
+ elUserDataEditor.setAttribute("id", "property-userData-editor");
+ let elUserDataSaved = document.createElement('span');
+ elUserDataSaved.setAttribute("id", "property-userData-saved");
+ elUserDataSaved.innerText = "Saved!";
+ elDiv.childNodes[2].appendChild(elUserDataSaved);
+ elDiv.insertBefore(elStaticUserData, elUserData);
+ elDiv.insertBefore(elUserDataEditor, elUserData);
+
+ // Material Data
+ let elMaterialData = elPropertyElements["materialData"];
+ elDiv = elMaterialData.parentNode;
+ let elStaticMaterialData = document.createElement('div');
+ elStaticMaterialData.setAttribute("id", "property-materialData-static");
+ let elMaterialDataEditor = document.createElement('div');
+ elMaterialDataEditor.setAttribute("id", "property-materialData-editor");
+ let elMaterialDataSaved = document.createElement('span');
+ elMaterialDataSaved.setAttribute("id", "property-materialData-saved");
+ elMaterialDataSaved.innerText = "Saved!";
+ elDiv.childNodes[2].appendChild(elMaterialDataSaved);
+ elDiv.insertBefore(elStaticMaterialData, elMaterialData);
+ elDiv.insertBefore(elMaterialDataEditor, elMaterialData);
+
+ // User Data Fields
+ let elGrabbable = elPropertyElements["grabbable"];
+ let elTriggerable = elPropertyElements["triggerable"];
+ let elIgnoreIK = elPropertyElements["ignoreIK"];
+ elGrabbable.addEventListener('change', function() {
userDataChanger("grabbableKey", "grabbable", elGrabbable, elUserData, true);
});
-
- elCloneable.addEventListener('change', createEmitCheckedPropertyUpdateFunction('cloneable'));
- elCloneableDynamic.addEventListener('change', createEmitCheckedPropertyUpdateFunction('cloneDynamic'));
- elCloneableAvatarEntity.addEventListener('change', createEmitCheckedPropertyUpdateFunction('cloneAvatarEntity'));
- elCloneableLifetime.addEventListener('change', createEmitNumberPropertyUpdateFunction('cloneLifetime'));
- elCloneableLimit.addEventListener('change', createEmitNumberPropertyUpdateFunction('cloneLimit'));
-
- elTriggerable.addEventListener('change', function() {
+ elTriggerable.addEventListener('change', function() {
userDataChanger("grabbableKey", "triggerable", elTriggerable, elUserData, false, ['wantsTrigger']);
});
elIgnoreIK.addEventListener('change', function() {
userDataChanger("grabbableKey", "ignoreIK", elIgnoreIK, elUserData, true);
});
-
- elCollisionSoundURL.addEventListener('change', createEmitTextPropertyUpdateFunction('collisionSoundURL'));
-
- elLifetime.addEventListener('change', createEmitNumberPropertyUpdateFunction('lifetime'));
- elScriptURL.addEventListener('change', createEmitTextPropertyUpdateFunction('script'));
- elScriptTimestamp.addEventListener('change', createEmitNumberPropertyUpdateFunction('scriptTimestamp'));
- elServerScripts.addEventListener('change', createEmitTextPropertyUpdateFunction('serverScripts'));
- elServerScripts.addEventListener('change', function() {
- // invalidate the current status (so that same-same updates can still be observed visually)
- elServerScriptStatus.innerText = PENDING_SCRIPT_STATUS;
- });
-
- elClearUserData.addEventListener("click", function() {
- deleteJSONEditor();
- elUserData.value = "";
- showUserDataTextArea();
- showNewJSONEditorButton();
- hideSaveUserDataButton();
- updateProperty('userData', elUserData.value);
- });
-
- elSaveUserData.addEventListener("click", function() {
- saveJSONUserData(true);
- });
-
- elUserData.addEventListener('change', createEmitTextPropertyUpdateFunction('userData'));
-
- elNewJSONEditor.addEventListener('click', function() {
- deleteJSONEditor();
- createJSONEditor();
- var data = {};
- setEditorJSON(data);
- hideUserDataTextArea();
- hideNewJSONEditorButton();
- showSaveUserDataButton();
- });
-
- elClearMaterialData.addEventListener("click", function() {
- deleteJSONMaterialEditor();
- elMaterialData.value = "";
- showMaterialDataTextArea();
- showNewJSONMaterialEditorButton();
- hideSaveMaterialDataButton();
- updateProperty('materialData', elMaterialData.value);
- });
-
- elSaveMaterialData.addEventListener("click", function() {
- saveJSONMaterialData(true);
- });
-
- elMaterialData.addEventListener('change', createEmitTextPropertyUpdateFunction('materialData'));
-
- elNewJSONMaterialEditor.addEventListener('click', function() {
- deleteJSONMaterialEditor();
- createJSONMaterialEditor();
- var data = {};
- setMaterialEditorJSON(data);
- hideMaterialDataTextArea();
- hideNewJSONMaterialEditorButton();
- showSaveMaterialDataButton();
- });
-
- var colorChangeFunction = createEmitColorPropertyUpdateFunction(
- 'color', elColorRed, elColorGreen, elColorBlue);
- elColorRed.addEventListener('change', colorChangeFunction);
- elColorGreen.addEventListener('change', colorChangeFunction);
- elColorBlue.addEventListener('change', colorChangeFunction);
- colorPickers['#property-color-control2'] = $('#property-color-control2').colpick({
- colorScheme: 'dark',
- layout: 'hex',
- color: '000000',
- submit: false, // We don't want to have a submission button
- onShow: function(colpick) {
- $('#property-color-control2').attr('active', 'true');
- // The original color preview within the picker needs to be updated on show because
- // prior to the picker being shown we don't have access to the selections' starting color.
- colorPickers['#property-color-control2'].colpickSetColor({
- "r": elColorRed.value,
- "g": elColorGreen.value,
- "b": elColorBlue.value});
- },
- onHide: function(colpick) {
- $('#property-color-control2').attr('active', 'false');
- },
- onChange: function(hsb, hex, rgb, el) {
- $(el).css('background-color', '#' + hex);
- emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b);
- }
- });
-
- elLightSpotLight.addEventListener('change', createEmitCheckedPropertyUpdateFunction('isSpotlight'));
-
- var lightColorChangeFunction = createEmitColorPropertyUpdateFunction(
- 'color', elLightColorRed, elLightColorGreen, elLightColorBlue);
- elLightColorRed.addEventListener('change', lightColorChangeFunction);
- elLightColorGreen.addEventListener('change', lightColorChangeFunction);
- elLightColorBlue.addEventListener('change', lightColorChangeFunction);
- colorPickers['#property-light-color'] = $('#property-light-color').colpick({
- colorScheme: 'dark',
- layout: 'hex',
- color: '000000',
- submit: false, // We don't want to have a submission button
- onShow: function(colpick) {
- $('#property-light-color').attr('active', 'true');
- // The original color preview within the picker needs to be updated on show because
- // prior to the picker being shown we don't have access to the selections' starting color.
- colorPickers['#property-light-color'].colpickSetColor({
- "r": elLightColorRed.value,
- "g": elLightColorGreen.value,
- "b": elLightColorBlue.value
- });
- },
- onHide: function(colpick) {
- $('#property-light-color').attr('active', 'false');
- },
- onChange: function(hsb, hex, rgb, el) {
- $(el).css('background-color', '#' + hex);
- emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b);
- }
- });
-
- elLightIntensity.addEventListener('change', createEmitNumberPropertyUpdateFunction('intensity', 1));
- elLightFalloffRadius.addEventListener('change', createEmitNumberPropertyUpdateFunction('falloffRadius', 1));
- elLightExponent.addEventListener('change', createEmitNumberPropertyUpdateFunction('exponent', 2));
- elLightCutoff.addEventListener('change', createEmitNumberPropertyUpdateFunction('cutoff', 2));
-
- elShape.addEventListener('change', createEmitTextPropertyUpdateFunction('shape'));
-
- elCanCastShadow.addEventListener('change', createEmitCheckedPropertyUpdateFunction('canCastShadow'));
-
- elImageURL.addEventListener('change', createImageURLUpdateFunction('textures'));
-
- elWebSourceURL.addEventListener('change', createEmitTextPropertyUpdateFunction('sourceUrl'));
- elWebDPI.addEventListener('change', createEmitNumberPropertyUpdateFunction('dpi', 0));
-
- elModelURL.addEventListener('change', createEmitTextPropertyUpdateFunction('modelURL'));
- elShapeType.addEventListener('change', createEmitTextPropertyUpdateFunction('shapeType'));
- elCompoundShapeURL.addEventListener('change', createEmitTextPropertyUpdateFunction('compoundShapeURL'));
-
- elModelAnimationURL.addEventListener('change', createEmitGroupTextPropertyUpdateFunction('animation', 'url'));
- elModelAnimationPlaying.addEventListener('change',createEmitGroupCheckedPropertyUpdateFunction('animation', 'running'));
- elModelAnimationFPS.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('animation', 'fps'));
- elModelAnimationFrame.addEventListener('change',
- createEmitGroupNumberPropertyUpdateFunction('animation', 'currentFrame'));
- elModelAnimationFirstFrame.addEventListener('change',
- createEmitGroupNumberPropertyUpdateFunction('animation', 'firstFrame'));
- elModelAnimationLastFrame.addEventListener('change',
- createEmitGroupNumberPropertyUpdateFunction('animation', 'lastFrame'));
- elModelAnimationLoop.addEventListener('change', createEmitGroupCheckedPropertyUpdateFunction('animation', 'loop'));
- elModelAnimationHold.addEventListener('change', createEmitGroupCheckedPropertyUpdateFunction('animation', 'hold'));
- elModelAnimationAllowTranslation.addEventListener('change',
- createEmitGroupCheckedPropertyUpdateFunction('animation', 'allowTranslation'));
-
- elModelTextures.addEventListener('change', createEmitTextPropertyUpdateFunction('textures'));
-
- elMaterialURL.addEventListener('change', createEmitTextPropertyUpdateFunction('materialURL'));
- //elMaterialMappingMode.addEventListener('change', createEmitTextPropertyUpdateFunction('materialMappingMode'));
- elPriority.addEventListener('change', createEmitNumberPropertyUpdateFunction('priority', 0));
-
- elParentMaterialNameString.addEventListener('change', function () { updateProperty("parentMaterialName", MATERIAL_PREFIX_STRING + this.value); });
+
+ // Special Property Callbacks
+ let elParentMaterialNameString = elPropertyElements["materialNameToReplace"];
+ let elParentMaterialNameNumber = elPropertyElements["submeshToReplace"];
+ let elParentMaterialNameCheckbox = elPropertyElements["selectSubmesh"];
+ elParentMaterialNameString.addEventListener('change', function () { updateProperty("parentMaterialName", MATERIAL_PREFIX_STRING + this.value); });
elParentMaterialNameNumber.addEventListener('change', function () { updateProperty("parentMaterialName", this.value); });
elParentMaterialNameCheckbox.addEventListener('change', function () {
if (this.checked) {
@@ -1858,339 +2504,43 @@ function loaded() {
showParentMaterialNameBox(false, elParentMaterialNameNumber, elParentMaterialNameString);
}
});
+
+ elPropertyElements["image"].addEventListener('change', createImageURLUpdateFunction('textures'));
+
+ // Collapsible sections
+ let elCollapsible = document.getElementsByClassName("section-header");
- var materialMappingPosChangeFunction = createEmitVec2PropertyUpdateFunction('materialMappingPos', elMaterialMappingPosX, elMaterialMappingPosY);
- elMaterialMappingPosX.addEventListener('change', materialMappingPosChangeFunction);
- elMaterialMappingPosY.addEventListener('change', materialMappingPosChangeFunction);
- var materialMappingScaleChangeFunction = createEmitVec2PropertyUpdateFunction('materialMappingScale', elMaterialMappingScaleX, elMaterialMappingScaleY);
- elMaterialMappingScaleX.addEventListener('change', materialMappingScaleChangeFunction);
- elMaterialMappingScaleY.addEventListener('change', materialMappingScaleChangeFunction);
- elMaterialMappingRot.addEventListener('change', createEmitNumberPropertyUpdateFunction('materialMappingRot', 2));
+ let toggleCollapsedEvent = function(event) {
+ let element = event.target.parentNode.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";
+ };
- elTextText.addEventListener('change', createEmitTextPropertyUpdateFunction('text'));
- elTextFaceCamera.addEventListener('change', createEmitCheckedPropertyUpdateFunction('faceCamera'));
- elTextLineHeight.addEventListener('change', createEmitNumberPropertyUpdateFunction('lineHeight'));
- var textTextColorChangeFunction = createEmitColorPropertyUpdateFunction(
- 'textColor', elTextTextColorRed, elTextTextColorGreen, elTextTextColorBlue);
- elTextTextColorRed.addEventListener('change', textTextColorChangeFunction);
- elTextTextColorGreen.addEventListener('change', textTextColorChangeFunction);
- elTextTextColorBlue.addEventListener('change', textTextColorChangeFunction);
- colorPickers['#property-text-text-color'] = $('#property-text-text-color').colpick({
- colorScheme: 'dark',
- layout: 'hex',
- color: '000000',
- submit: false, // We don't want to have a submission button
- onShow: function(colpick) {
- $('#property-text-text-color').attr('active', 'true');
- // The original color preview within the picker needs to be updated on show because
- // prior to the picker being shown we don't have access to the selections' starting color.
- colorPickers['#property-text-text-color'].colpickSetColor({
- "r": elTextTextColorRed.value,
- "g": elTextTextColorGreen.value,
- "b": elTextTextColorBlue.value
- });
- },
- onHide: function(colpick) {
- $('#property-text-text-color').attr('active', 'false');
- },
- onChange: function(hsb, hex, rgb, el) {
- $(el).css('background-color', '#' + hex);
- $(el).attr('active', 'false');
- emitColorPropertyUpdate('textColor', rgb.r, rgb.g, rgb.b);
- }
- });
+ for (let collapseIndex = 0, numCollapsibles = elCollapsible.length; collapseIndex < numCollapsibles; ++collapseIndex) {
+ let curCollapsibleElement = elCollapsible[collapseIndex];
+ curCollapsibleElement.getElementsByTagName('span')[0].addEventListener("click", toggleCollapsedEvent, true);
+ }
+
+ // Textarea scrollbars
+ let elTextareas = document.getElementsByTagName("TEXTAREA");
- var textBackgroundColorChangeFunction = createEmitColorPropertyUpdateFunction(
- 'backgroundColor', elTextBackgroundColorRed, elTextBackgroundColorGreen, elTextBackgroundColorBlue);
+ let textareaOnChangeEvent = function(event) {
+ setTextareaScrolling(event.target);
+ };
- elTextBackgroundColorRed.addEventListener('change', textBackgroundColorChangeFunction);
- elTextBackgroundColorGreen.addEventListener('change', textBackgroundColorChangeFunction);
- elTextBackgroundColorBlue.addEventListener('change', textBackgroundColorChangeFunction);
- colorPickers['#property-text-background-color'] = $('#property-text-background-color').colpick({
- colorScheme: 'dark',
- layout: 'hex',
- color: '000000',
- submit: false, // We don't want to have a submission button
- onShow: function(colpick) {
- $('#property-text-background-color').attr('active', 'true');
- // The original color preview within the picker needs to be updated on show because
- // prior to the picker being shown we don't have access to the selections' starting color.
- colorPickers['#property-text-background-color'].colpickSetColor({
- "r": elTextBackgroundColorRed.value,
- "g": elTextBackgroundColorGreen.value,
- "b": elTextBackgroundColorBlue.value
- });
- },
- onHide: function(colpick) {
- $('#property-text-background-color').attr('active', 'false');
- },
- onChange: function(hsb, hex, rgb, el) {
- $(el).css('background-color', '#' + hex);
- emitColorPropertyUpdate('backgroundColor', rgb.r, rgb.g, rgb.b);
- }
- });
-
- // Key light
- var keyLightModeChanged = createZoneComponentModeChangedFunction('keyLightMode',
- elZoneKeyLightModeInherit, elZoneKeyLightModeDisabled, elZoneKeyLightModeEnabled);
-
- elZoneKeyLightModeInherit.addEventListener('change', keyLightModeChanged);
- elZoneKeyLightModeDisabled.addEventListener('change', keyLightModeChanged);
- elZoneKeyLightModeEnabled.addEventListener('change', keyLightModeChanged);
-
- colorPickers['#property-zone-key-light-color'] = $('#property-zone-key-light-color').colpick({
- colorScheme: 'dark',
- layout: 'hex',
- color: '000000',
- submit: false, // We don't want to have a submission button
- onShow: function(colpick) {
- $('#property-zone-key-light-color').attr('active', 'true');
- // The original color preview within the picker needs to be updated on show because
- // prior to the picker being shown we don't have access to the selections' starting color.
- colorPickers['#property-zone-key-light-color'].colpickSetColor({
- "r": elZoneKeyLightColorRed.value,
- "g": elZoneKeyLightColorGreen.value,
- "b": elZoneKeyLightColorBlue.value
- });
- },
- onHide: function(colpick) {
- $('#property-zone-key-light-color').attr('active', 'false');
- },
- onChange: function(hsb, hex, rgb, el) {
- $(el).css('background-color', '#' + hex);
- emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b, 'keyLight');
- }
- });
- var zoneKeyLightColorChangeFunction = createEmitGroupColorPropertyUpdateFunction('keyLight', 'color',
- elZoneKeyLightColorRed, elZoneKeyLightColorGreen, elZoneKeyLightColorBlue);
-
- elZoneKeyLightColorRed.addEventListener('change', zoneKeyLightColorChangeFunction);
- elZoneKeyLightColorGreen.addEventListener('change', zoneKeyLightColorChangeFunction);
- elZoneKeyLightColorBlue.addEventListener('change', zoneKeyLightColorChangeFunction);
- elZoneKeyLightIntensity.addEventListener('change',
- createEmitGroupNumberPropertyUpdateFunction('keyLight', 'intensity'));
-
- var zoneKeyLightDirectionChangeFunction = createEmitGroupVec3PropertyUpdateFunction('keyLight', 'direction',
- elZoneKeyLightDirectionX, elZoneKeyLightDirectionY);
-
- elZoneKeyLightDirectionX.addEventListener('change', zoneKeyLightDirectionChangeFunction);
- elZoneKeyLightDirectionY.addEventListener('change', zoneKeyLightDirectionChangeFunction);
-
- elZoneKeyLightCastShadows.addEventListener('change',
- createEmitGroupCheckedPropertyUpdateFunction('keyLight', 'castShadows'));
-
- // Skybox
- var skyboxModeChanged = createZoneComponentModeChangedFunction('skyboxMode',
- elZoneSkyboxModeInherit, elZoneSkyboxModeDisabled, elZoneSkyboxModeEnabled);
-
- elZoneSkyboxModeInherit.addEventListener('change', skyboxModeChanged);
- elZoneSkyboxModeDisabled.addEventListener('change', skyboxModeChanged);
- elZoneSkyboxModeEnabled.addEventListener('change', skyboxModeChanged);
-
- // Ambient light
- elCopySkyboxURLToAmbientURL.addEventListener("click", function () {
- document.getElementById("property-zone-key-ambient-url").value = properties.skybox.url;
- properties.ambientLight.ambientURL = properties.skybox.url;
- updateProperties(properties);
- });
-
- var ambientLightModeChanged = createZoneComponentModeChangedFunction('ambientLightMode',
- elZoneAmbientLightModeInherit, elZoneAmbientLightModeDisabled, elZoneAmbientLightModeEnabled);
-
- elZoneAmbientLightModeInherit.addEventListener('change', ambientLightModeChanged);
- elZoneAmbientLightModeDisabled.addEventListener('change', ambientLightModeChanged);
- elZoneAmbientLightModeEnabled.addEventListener('change', ambientLightModeChanged);
-
- elZoneAmbientLightIntensity.addEventListener('change',
- createEmitGroupNumberPropertyUpdateFunction('ambientLight', 'ambientIntensity'));
-
- elZoneAmbientLightURL.addEventListener('change',
- createEmitGroupTextPropertyUpdateFunction('ambientLight', 'ambientURL'));
-
- // Haze
- var hazeModeChanged = createZoneComponentModeChangedFunction('hazeMode',
- elZoneHazeModeInherit, elZoneHazeModeDisabled, elZoneHazeModeEnabled);
-
- elZoneHazeModeInherit.addEventListener('change', hazeModeChanged);
- elZoneHazeModeDisabled.addEventListener('change', hazeModeChanged);
- elZoneHazeModeEnabled.addEventListener('change', hazeModeChanged);
-
- elZoneHazeRange.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('haze', 'hazeRange'));
-
- colorPickers['#property-zone-haze-color'] = $('#property-zone-haze-color').colpick({
- colorScheme: 'dark',
- layout: 'hex',
- color: '000000',
- submit: false, // We don't want to have a submission button
- onShow: function(colpick) {
- $('#property-zone-haze-color').attr('active', 'true');
- // The original color preview within the picker needs to be updated on show because
- // prior to the picker being shown we don't have access to the selections' starting color.
- colorPickers['#property-zone-haze-color'].colpickSetColor({
- "r": elZoneHazeColorRed.value,
- "g": elZoneHazeColorGreen.value,
- "b": elZoneHazeColorBlue.value
- });
- },
- onHide: function(colpick) {
- $('#property-zone-haze-color').attr('active', 'false');
- },
- onChange: function(hsb, hex, rgb, el) {
- $(el).css('background-color', '#' + hex);
- emitColorPropertyUpdate('hazeColor', rgb.r, rgb.g, rgb.b, 'haze');
- }
- });
- var zoneHazeColorChangeFunction = createEmitGroupColorPropertyUpdateFunction('haze', 'hazeColor',
- elZoneHazeColorRed,
- elZoneHazeColorGreen,
- elZoneHazeColorBlue);
-
- elZoneHazeColorRed.addEventListener('change', zoneHazeColorChangeFunction);
- elZoneHazeColorGreen.addEventListener('change', zoneHazeColorChangeFunction);
- elZoneHazeColorBlue.addEventListener('change', zoneHazeColorChangeFunction);
-
- colorPickers['#property-zone-haze-glare-color'] = $('#property-zone-haze-glare-color').colpick({
- colorScheme: 'dark',
- layout: 'hex',
- color: '000000',
- submit: false, // We don't want to have a submission button
- onShow: function(colpick) {
- $('#property-zone-haze-glare-color').attr('active', 'true');
- // The original color preview within the picker needs to be updated on show because
- // prior to the picker being shown we don't have access to the selections' starting color.
- colorPickers['#property-zone-haze-glare-color'].colpickSetColor({
- "r": elZoneHazeGlareColorRed.value,
- "g": elZoneHazeGlareColorGreen.value,
- "b": elZoneHazeGlareColorBlue.value
- });
- },
- onHide: function(colpick) {
- $('#property-zone-haze-glare-color').attr('active', 'false');
- },
- onChange: function(hsb, hex, rgb, el) {
- $(el).css('background-color', '#' + hex);
- emitColorPropertyUpdate('hazeGlareColor', rgb.r, rgb.g, rgb.b, 'haze');
- }
- });
- var zoneHazeGlareColorChangeFunction = createEmitGroupColorPropertyUpdateFunction('haze', 'hazeGlareColor',
- elZoneHazeGlareColorRed,
- elZoneHazeGlareColorGreen,
- elZoneHazeGlareColorBlue);
-
- elZoneHazeGlareColorRed.addEventListener('change', zoneHazeGlareColorChangeFunction);
- elZoneHazeGlareColorGreen.addEventListener('change', zoneHazeGlareColorChangeFunction);
- elZoneHazeGlareColorBlue.addEventListener('change', zoneHazeGlareColorChangeFunction);
-
- elZoneHazeEnableGlare.addEventListener('change',
- createEmitGroupCheckedPropertyUpdateFunction('haze', 'hazeEnableGlare'));
- elZoneHazeGlareAngle.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('haze', 'hazeGlareAngle'));
-
- elZoneHazeAltitudeEffect.addEventListener('change',
- createEmitGroupCheckedPropertyUpdateFunction('haze', 'hazeAltitudeEffect'));
- elZoneHazeCeiling.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('haze', 'hazeCeiling'));
- elZoneHazeBaseRef.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('haze', 'hazeBaseRef'));
-
- elZoneHazeBackgroundBlend.addEventListener('change',
- createEmitGroupNumberPropertyUpdateFunction('haze', 'hazeBackgroundBlend'));
-
- // Bloom
- var bloomModeChanged = createZoneComponentModeChangedFunction('bloomMode',
- elZoneBloomModeInherit, elZoneBloomModeDisabled, elZoneBloomModeEnabled);
-
- elZoneBloomModeInherit.addEventListener('change', bloomModeChanged);
- elZoneBloomModeDisabled.addEventListener('change', bloomModeChanged);
- elZoneBloomModeEnabled.addEventListener('change', bloomModeChanged);
-
- elZoneBloomIntensity.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('bloom', 'bloomIntensity'));
- elZoneBloomThreshold.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('bloom', 'bloomThreshold'));
- elZoneBloomSize.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('bloom', 'bloomSize'));
-
- var zoneSkyboxColorChangeFunction = createEmitGroupColorPropertyUpdateFunction('skybox', 'color',
- elZoneSkyboxColorRed, elZoneSkyboxColorGreen, elZoneSkyboxColorBlue);
- elZoneSkyboxColorRed.addEventListener('change', zoneSkyboxColorChangeFunction);
- elZoneSkyboxColorGreen.addEventListener('change', zoneSkyboxColorChangeFunction);
- elZoneSkyboxColorBlue.addEventListener('change', zoneSkyboxColorChangeFunction);
- colorPickers['#property-zone-skybox-color'] = $('#property-zone-skybox-color').colpick({
- colorScheme: 'dark',
- layout: 'hex',
- color: '000000',
- submit: false, // We don't want to have a submission button
- onShow: function(colpick) {
- $('#property-zone-skybox-color').attr('active', 'true');
- // The original color preview within the picker needs to be updated on show because
- // prior to the picker being shown we don't have access to the selections' starting color.
- colorPickers['#property-zone-skybox-color'].colpickSetColor({
- "r": elZoneSkyboxColorRed.value,
- "g": elZoneSkyboxColorGreen.value,
- "b": elZoneSkyboxColorBlue.value
- });
- },
- onHide: function(colpick) {
- $('#property-zone-skybox-color').attr('active', 'false');
- },
- onChange: function(hsb, hex, rgb, el) {
- $(el).css('background-color', '#' + hex);
- emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b, 'skybox');
- }
- });
-
- elZoneSkyboxURL.addEventListener('change', createEmitGroupTextPropertyUpdateFunction('skybox', 'url'));
-
- elZoneFlyingAllowed.addEventListener('change', createEmitCheckedPropertyUpdateFunction('flyingAllowed'));
- elZoneGhostingAllowed.addEventListener('change', createEmitCheckedPropertyUpdateFunction('ghostingAllowed'));
- elZoneFilterURL.addEventListener('change', createEmitTextPropertyUpdateFunction('filterURL'));
-
- var voxelVolumeSizeChangeFunction = createEmitVec3PropertyUpdateFunction(
- 'voxelVolumeSize', elVoxelVolumeSizeX, elVoxelVolumeSizeY, elVoxelVolumeSizeZ);
- elVoxelVolumeSizeX.addEventListener('change', voxelVolumeSizeChangeFunction);
- elVoxelVolumeSizeY.addEventListener('change', voxelVolumeSizeChangeFunction);
- elVoxelVolumeSizeZ.addEventListener('change', voxelVolumeSizeChangeFunction);
- elVoxelSurfaceStyle.addEventListener('change', createEmitTextPropertyUpdateFunction('voxelSurfaceStyle'));
- elXTextureURL.addEventListener('change', createEmitTextPropertyUpdateFunction('xTextureURL'));
- elYTextureURL.addEventListener('change', createEmitTextPropertyUpdateFunction('yTextureURL'));
- elZTextureURL.addEventListener('change', createEmitTextPropertyUpdateFunction('zTextureURL'));
-
- elMoveSelectionToGrid.addEventListener("click", function() {
- EventBridge.emitWebEvent(JSON.stringify({
- type: "action",
- action: "moveSelectionToGrid"
- }));
- });
- elMoveAllToGrid.addEventListener("click", function() {
- EventBridge.emitWebEvent(JSON.stringify({
- type: "action",
- action: "moveAllToGrid"
- }));
- });
- elResetToNaturalDimensions.addEventListener("click", function() {
- EventBridge.emitWebEvent(JSON.stringify({
- type: "action",
- action: "resetToNaturalDimensions"
- }));
- });
- elRescaleDimensionsButton.addEventListener("click", function() {
- EventBridge.emitWebEvent(JSON.stringify({
- type: "action",
- action: "rescaleDimensions",
- percentage: parseFloat(elRescaleDimensionsPct.value)
- }));
- });
- elReloadScriptsButton.addEventListener("click", function() {
- EventBridge.emitWebEvent(JSON.stringify({
- type: "action",
- action: "reloadClientScripts"
- }));
- });
- elReloadServerScriptsButton.addEventListener("click", function() {
- // invalidate the current status (so that same-same updates can still be observed visually)
- elServerScriptStatus.innerText = PENDING_SCRIPT_STATUS;
- EventBridge.emitWebEvent(JSON.stringify({
- type: "action",
- action: "reloadServerScripts"
- }));
- });
-
- document.addEventListener("keydown", function (keyDown) {
+ 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);
+ }
+
+ document.addEventListener("keydown", function (keyDown) {
if (keyDown.keyCode === KEY_P && keyDown.ctrlKey) {
if (keyDown.shiftKey) {
EventBridge.emitWebEvent(JSON.stringify({ type: 'unparent' }));
@@ -2199,155 +2549,28 @@ function loaded() {
}
}
});
+
window.onblur = function() {
// Fake a change event
- var ev = document.createEvent("HTMLEvents");
+ 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
- var els = document.querySelectorAll("input, textarea");
- for (var i = 0; i < els.length; i++) {
+
+ // 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();
- bindAllNonJSONEditorElements();
- });
-
- // Collapsible sections
- var elCollapsible = document.getElementsByClassName("section-header");
-
- var toggleCollapsedEvent = function(event) {
- var element = event.target.parentNode.parentNode;
- var 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 (var collapseIndex = 0, numCollapsibles = elCollapsible.length; collapseIndex < numCollapsibles; ++collapseIndex) {
- var curCollapsibleElement = elCollapsible[collapseIndex];
- curCollapsibleElement.getElementsByTagName('span')[0].addEventListener("click", toggleCollapsedEvent, true);
- }
-
-
- // Textarea scrollbars
- var elTextareas = document.getElementsByTagName("TEXTAREA");
-
- var textareaOnChangeEvent = function(event) {
- setTextareaScrolling(event.target);
- };
-
- for (var textAreaIndex = 0, numTextAreas = elTextareas.length; textAreaIndex < numTextAreas; ++textAreaIndex) {
- var 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) {
- var el = elDropdowns[0];
- el.parentNode.removeChild(el);
- elDropdowns = document.getElementsByTagName("select");
- }
+ showGroupsForType("None");
+ resetProperties();
+ disableProperties();
+ });
augmentSpinButtons();