Merge branch 'dev'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "digitalbacon",
-  "version": "0.3.7",
+  "version": "0.3.8",
   "type": "module",
   "description": "Content management system for 3D websites",
   "main": "/build/DigitalBacon.min.js",
@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "@rollup/plugin-node-resolve": "^15.3.0",
-    "digitalbacon-ui": "^0.1.5",
+    "digitalbacon-ui": "^0.1.6",
     "file-saver": "2.0.5",
     "jest-environment-jsdom": "^29.7.0",
     "jszip": "3.10.1",

resources/api-documentation.html

@@ -143,7 +143,7 @@
         <a class="only-large-screen" href="/">
           <img src="/images/digital_bacon_pig_compressed.png" alt="Digital Bacon logo" class="logo">
         </a>
-        <h1>DigitalBacon (0.3.7)</h1>
+        <h1>DigitalBacon (0.3.8)</h1>
         <p>This API document is meant for software developers using the DigitalBacon JavaScript module. <a href="/resources/documentation">Looking for the Application Guide?</a></p>
         <p>For past versions of this document, please checkout the version you need from <a href="https://github.com/kalegd/DigitalBacon">GitHub</a></p>
         <h1 id="section/Introduction">Introduction</h1>
@@ -440,6 +440,9 @@ <h5>Functions</h5>
         <p class="bold">getDeviceType()</p>
         <p>Should only be run after Promise from setup() or setupEditor() resolves</p>
         <p class="return-data pb-40">Returns one of "XR", "MOBILE", or "POINTER"</p>
+        <p class="bold">getMenuController()</p>
+        <p>Should only be run after Promise from setup() or setupEditor() resolves</p>
+        <p class="return-data pb-40">Returns the Menu Controller</p>
         <p class="bold">getRenderer()</p>
         <p class="return-data pb-40">Returns the Renderer <a href="https://threejs.org/docs/#api/en/renderers/WebGLRenderer">(See Three.js WebGLRenderer Documentation for more details)</a></p>
         <p class="bold">isImmersionDisabled()</p>

scripts/core/DigitalBacon.js

@@ -21,7 +21,8 @@ import * as EditorHelpers from '/scripts/core/helpers/editor/EditorHelpers.js';
 import * as DigitalBaconUI from '/node_modules/digitalbacon-ui/build/DigitalBacon-UI.min.js';
 import * as THREE from 'three';
 
-const version = "0.3.7";
+const version = "0.3.8";
+const dynamicAssets = global.dynamicAssets;
 
 global.version = version;
 
@@ -33,6 +34,10 @@ function getDeviceType() {
     return global.deviceType;
 }
 
+function getMenuController() {
+    return global.menuController;
+}
+
 function getRenderer() {
     return global.renderer;
 }
@@ -64,8 +69,10 @@ if(window != null) {
         SettingsHandler: SettingsHandler,
         THREE: THREE,
         UserController: UserController,
+        dynamicAssets: dynamicAssets,
         getCamera: getCamera,
         getDeviceType: getDeviceType,
+        getMenuController: getMenuController,
         getRenderer: getRenderer,
         isEditor: isEditor,
         isImmersionDisabled: isImmersionDisabled,
@@ -90,8 +97,10 @@ export { Scene };
 export { SettingsHandler };
 export { THREE };
 export { UserController };
+export { dynamicAssets };
 export { getCamera };
 export { getDeviceType };
+export { getMenuController };
 export { getRenderer };
 export { isEditor };
 export { isImmersionDisabled };

scripts/core/assets/Asset.js

@@ -30,15 +30,11 @@ export default class Asset {
     }
 
     exportParams() {
-        let componentIds = [];
-        for(let component of this._components) {
-            componentIds.push(component.id);
-        }
         return {
             "id": this._id,
             "name": this._name,
             "assetId": this._assetId,
-            "components": componentIds,
+            "components": this.components,
             "isPrivate": this._isPrivate,
         };
     }

scripts/core/assets/Assets.js

@@ -2,6 +2,7 @@ import Asset from '/scripts/core/assets/Asset.js';
 import AssetEntity from '/scripts/core/assets/AssetEntity.js';
 import AudioAsset from '/scripts/core/assets/AudioAsset.js';
 import ImageAsset from '/scripts/core/assets/ImageAsset.js';
+import VideoAsset from '/scripts/core/assets/VideoAsset.js';
 import CustomAsset from '/scripts/core/assets/CustomAsset.js';
 import CustomAssetEntity from '/scripts/core/assets/CustomAssetEntity.js';
 import Component from '/scripts/core/assets/components/Component.js';
@@ -36,6 +37,7 @@ export { Asset };
 export { AssetEntity };
 export { AudioAsset };
 export { ImageAsset };
+export { VideoAsset };
 export { CustomAsset };
 export { CustomAssetEntity };
 export { Component };

scripts/core/assets/VideoAsset.js

@@ -30,6 +30,7 @@ export default class VideoAsset extends PlayableMediaAsset {
         let videoUrl = LibraryHandler.getUrl(assetId);
         if(!videoUrl) return;
         this._media = document.createElement('video');
+        this._media.playsInline = true;
         this._media.onloadedmetadata = () => {
             let texture = new THREE.VideoTexture(this._media);
             texture.colorSpace = THREE.SRGBColorSpace;
@@ -51,6 +52,10 @@ export default class VideoAsset extends PlayableMediaAsset {
         this._media.crossOrigin = "anonymous";
         this._media.src = videoUrl;
         this._media.loop = this._loop;
+        if(global.immersionDisabled && this._autoplay) {
+            this._media.muted = true;
+            this._media.play();
+        }
         this._updateBVH();
     }
 

scripts/core/handlers/LibraryHandler.js

@@ -16,6 +16,7 @@ import PubSub from '/scripts/core/handlers/PubSub.js';
 import { defaultImageSize } from '/scripts/core/helpers/constants.js';
 import { blobToHash, buildBVH, uuidv4 } from '/scripts/core/helpers/utils.module.js';
 import * as THREE from 'three';
+import { DRACOLoader } from '/node_modules/three/examples/jsm/loaders/DRACOLoader.js';
 import { GLTFLoader } from '/node_modules/three/examples/jsm/loaders/GLTFLoader.js';
 import { clone } from '/node_modules/three/examples/jsm/utils/SkeletonUtils.js';
 
@@ -301,6 +302,9 @@ class LibraryHandler {
         return new Promise((resolve, reject) => {
             let objectURL = URL.createObjectURL(blob);
             let gltfLoader = new GLTFLoader();
+            let dracoLoader = new DRACOLoader();
+            dracoLoader.setDecoderPath('https://cdn.jsdelivr.net/npm/three@0.169.0/examples/jsm/libs/draco/');
+            gltfLoader.setDRACOLoader(dracoLoader);
             gltfLoader.load(objectURL, (gltf) => {
                 this.library[assetId]['Mesh'] = gltf.scene;
                 this.library[assetId]['Animations'] = gltf.animations;

scripts/core/handlers/ProjectHandler.js

@@ -178,7 +178,7 @@ class ProjectHandler {
                 pendingAssets[id].handler.loadAsset(pendingAssets[id].params,
                     isDiff);
                 for(let dependencyId of pendingAssets[id].dependedOnBy) {
-                    pendingAssets[dependencyId].dependsOn.delete(id);
+                    pendingAssets[dependencyId]?.dependsOn?.delete?.(id);
                 }
                 delete pendingAssets[id];
                 loadedSomething = true;
@@ -187,8 +187,8 @@ class ProjectHandler {
                 let pendingAsset = pendingAssets[maxDependedOnByAssetId];
                 this._loadAssetWithoutDependencies(pendingAsset, isDiff);
                 for(let dependencyId of pendingAsset.dependedOnBy) {
-                    pendingAssets[dependencyId].dependsOn
-                        .delete(maxDependedOnByAssetId);
+                    pendingAssets[dependencyId]?.dependsOn
+                        ?.delete?.(maxDependedOnByAssetId);
                 }
                 assetsPendingUpdates[maxDependedOnByAssetId] = pendingAsset;
                 delete pendingAssets[maxDependedOnByAssetId];

scripts/core/helpers/constants.js

@@ -138,7 +138,7 @@ export const Colors = {
 
 export const FontSizes = {
     "header": 0.03,
-    "body": 0.02,
+    "body": 0.019,
 };
 
 let titleStyle = new Style({

scripts/core/helpers/editor/AssetEntityHelper.js

@@ -23,7 +23,7 @@ import EditorHelperFactory from '/scripts/core/helpers/editor/EditorHelperFactor
 import { InteractableStates } from '/node_modules/digitalbacon-ui/build/DigitalBacon-UI.min.js';
 import * as THREE from 'three';
 
-const { AssetEntityField, CheckboxField, EulerField, NumberField, Vector3Field } = EditorHelper.FieldTypes;
+const { AssetField, CheckboxField, EulerField, NumberField, Vector3Field } = EditorHelper.FieldTypes;
 const OBJECT_TRANSFORM_PARAMS = ['position', 'rotation', 'scale'];
 const TRANSFORM_PUBLISH_FUNCTIONS = {
     position: 'publishPosition',
@@ -35,6 +35,9 @@ const TRS_HANDLERS = [
     { handler: RotateHandler, tool: InteractionTools.ROTATE },
     { handler: ScaleHandler, tool: InteractionTools.SCALE },
 ];
+const assetFieldFilter = (asset) => {
+    return asset instanceof AssetEntity;
+};
 
 export default class AssetEntityHelper extends EditorHelper {
     constructor(asset, updatedTopic) {
@@ -444,7 +447,7 @@ export default class AssetEntityHelper extends EditorHelper {
 
     static fields = [
         { "parameter": "parentId", "name": "Parent", "includeScene": true,
-            "type": AssetEntityField },
+            "filter": assetFieldFilter, "type": AssetField },
         { "parameter": "position", "name": "Position", "type": Vector3Field },
         { "parameter": "rotation", "name": "Rotation", "type": EulerField },
         { "parameter": "scale", "name": "Scale", "type": Vector3Field },

scripts/core/helpers/editor/EditorHelper.js

@@ -10,9 +10,10 @@ import ProjectHandler from '/scripts/core/handlers/ProjectHandler.js';
 import PubSub from '/scripts/core/handlers/PubSub.js';
 import UndoRedoHandler from '/scripts/core/handlers/UndoRedoHandler.js';
 import EditorHelperFactory from '/scripts/core/helpers/editor/EditorHelperFactory.js';
-import AssetEntityField from '/scripts/core/menu/input/AssetEntityField.js';
+import AssetField from '/scripts/core/menu/input/AssetField.js';
 import AssetSetField from '/scripts/core/menu/input/AssetSetField.js';
 import AudioField from '/scripts/core/menu/input/AudioField.js';
+import ButtonField from '/scripts/core/menu/input/ButtonField.js';
 import CheckboxField from '/scripts/core/menu/input/CheckboxField.js';
 import ColorField from '/scripts/core/menu/input/ColorField.js';
 import CubeImageField from '/scripts/core/menu/input/CubeImageField.js';
@@ -27,9 +28,10 @@ import Vector2Field from '/scripts/core/menu/input/Vector2Field.js';
 import Vector3Field from '/scripts/core/menu/input/Vector3Field.js';
 
 const INPUT_TYPE_TO_CREATE_FUNCTION = {
-    AssetEntityField: "_createAssetEntityField",
+    AssetField: "_createAssetField",
     AssetSetField: "_createAssetSetField",
     AudioField: "_createAudioField",
+    ButtonField: "_createButtonField",
     CheckboxField: "_createCheckboxField",
     ColorField: "_createColorField",
     CubeImageField: "_createCubeImageField",
@@ -84,7 +86,7 @@ export default class EditorHelper {
     }
 
     _parameterValuesEqual(value1, value2) {
-        if(Array.isArray(value1) || Array.isArray(value2)) {
+        if(Array.isArray(value1) && Array.isArray(value2)) {
             return value1.reduce((a, v, i) => a && value2[i] == v, true);
         } else {
             return value1 == value2;
@@ -296,13 +298,16 @@ export default class EditorHelper {
     }
 
     _createStandardField(field) {
-        if(field.type.name in INPUT_TYPE_TO_CREATE_FUNCTION) {
-            return this[INPUT_TYPE_TO_CREATE_FUNCTION[field.type.name]](field);
+        let type = typeof field.type == 'string'
+            ? field.type
+            : field.type.name;
+        if(type in INPUT_TYPE_TO_CREATE_FUNCTION) {
+            return this[INPUT_TYPE_TO_CREATE_FUNCTION[type]](field);
         }
     }
 
-    _createAssetEntityField(field) {
-        return new AssetEntityField({
+    _createAssetField(field) {
+        return new AssetField({
             'title': field.name,
             'exclude': field.includeSelf ? null : this._id,
             'filter': typeof field.filter == 'function' ? field.filter : null,
@@ -347,6 +352,16 @@ export default class EditorHelper {
         });
     }
 
+    _createButtonField(field) {
+        return new ButtonField({
+            'title': field.name,
+            'onClick': () => {
+                if(typeof this[field.parameter] == 'function')
+                    this[field.parameter]();
+            },
+        });
+    }
+
     _createCheckboxField(field) {
         return new CheckboxField({
             'title': field.name,
@@ -518,9 +533,10 @@ export default class EditorHelper {
     }
 
     static FieldTypes = {
-        AssetEntityField: AssetEntityField,
+        AssetField: AssetField,
         AssetSetField: AssetSetField,
         AudioField: AudioField,
+        ButtonField: ButtonField,
         CheckboxField: CheckboxField,
         ColorField: ColorField,
         CubeImageField: CubeImageField,

scripts/core/helpers/editor/PlainTextHelper.js

@@ -23,6 +23,7 @@ export default class PlainTextHelper extends TextAssetHelper {
             "type": NumberField },
         "fontColor",
         "textAlign",
+        "parentId",
         "position",
         "rotation",
         "scale",

scripts/core/helpers/editor/TextOverlayHelper.js

@@ -36,6 +36,7 @@ export default class TextOverlayHelper extends TextAssetHelper {
             "map": { "Start": "start", "Center": "center", "End": "end" },
             "type": EnumField },
         "textAlign",
+        "parentId",
         "position",
         "rotation",
         "scale",

scripts/core/menu/NotificationHub.js

@@ -38,7 +38,8 @@ class NotificationHub extends Span {
     }
 
     _createNotification() {
-        this._textComponent = new Text('Placeholder', Styles.bodyText);
+        this._textComponent = new Text('Placeholder', Styles.bodyText,
+            { textAlign: 'center', maxWidth: 0.3 });
         this.add(this._textComponent);
         this.visible = false;
     }