From e2f5b24dd486386d0a29b0af79616b9dffc5eda2 Mon Sep 17 00:00:00 2001 From: Michael Gutensohn Date: Wed, 14 Feb 2024 11:03:27 -0800 Subject: [PATCH] published dist, removed debug flags. --- dist/mr.js | 8 ++++---- package.json | 2 +- samples/examples/anchors.html | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/dist/mr.js b/dist/mr.js index 889a9368..aca38a40 100644 --- a/dist/mr.js +++ b/dist/mr.js @@ -27,7 +27,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `mr-app {\n display: block;\n height: 100vh;\n width: 100%;\n}\n\n.inXR {\n width: 100vw;\n}\n\nmr-app * {\n box-sizing: border-box;\n opacity: 0%;\n}\n\nmr-app > canvas {\n position:fixed;\n visibility:visible;\n opacity: 100%;\n z-index: 999;\n}\n\nmr-panel {\n background-color: #fff;\n border-radius: 2%;\n position: fixed;\n overflow: auto;\n height: 100vh;\n width: 100vw;\n}\n\nmr-div, mr-button, mr-img, mr-a, mr-text{\n display: inline-block;\n position: relative;\n z-index: inherit;\n opacity: 100%;\n}\n\nmr-img {\n /* z-index: inherit; */\n width: 100%;\n object-fit: cover;\n}\n\nmr-button {\n padding: 5px;\n text-align: center;\n vertical-align: middle;\n background-color: #8a8a8a;\n border-radius: 0.5%;\n z-index: 1;\n /* animation: back 0.25s ease-out forwards; */\n}\n\nmr-button.hover {\n background-color: #333;\n z-index: 5; /* end */\n /* animation: forward 0.25s ease-in forwards; */\n}\n\nmr-a {\n color: darkblue;\n}\n\nmr-a.hover {\n color: blue;\n z-index: 5;\n}\n\nmr-a.active {\n color: purple;\n\n}\n\n/* these work differently from in XR than expected, laurent should look into it */\n/* button animation! */\n\n@keyframes forward {\n to {\n z-index: 5; /* end */\n }\n}\n\n@keyframes back {\n to {\n z-index: 1; /* end */\n }\n}\n\n\nbody {\n margin: 0; /* unclear why we need this */\n}\n`, \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://mrjs/./src/defaultStyle.css?./node_modules/css-loader/dist/cjs.js"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `mr-app {\n display: block;\n height: 100vh;\n width: 100%;\n}\n\n.inXR {\n width: 100vw;\n}\n\nmr-app * {\n box-sizing: border-box;\n opacity: 0%;\n}\n\nmr-app > canvas {\n position:fixed;\n visibility:visible;\n opacity: 100%;\n z-index: 999;\n}\n\nmr-panel {\n background-color: #fff;\n border-radius: 2%;\n position: fixed;\n overflow: auto;\n height: 100vh;\n width: 100vw;\n}\n\nmr-div, mr-button, mr-img, mr-a, mr-text{\n display: inline-block;\n position: relative;\n z-index: inherit;\n opacity: 100%;\n}\n\nmr-img {\n /* z-index: inherit; */\n width: 100%;\n object-fit: cover;\n}\n\nmr-button {\n padding: 5px;\n text-align: center;\n vertical-align: middle;\n background-color: #8a8a8a;\n border-radius: 0.5%;\n /* animation: back 0.25s ease-out forwards; */\n}\n\nmr-button.hover {\n background-color: #333;\n z-index: 5; /* end */\n /* animation: forward 0.25s ease-in forwards; */\n}\n\nmr-a {\n color: darkblue;\n}\n\nmr-a.hover {\n color: blue;\n z-index: 5;\n}\n\nmr-a.active {\n color: purple;\n\n}\n\n/* these work differently from in XR than expected, laurent should look into it */\n/* button animation! */\n\n@keyframes forward {\n to {\n z-index: 5; /* end */\n }\n}\n\n@keyframes back {\n to {\n z-index: 1; /* end */\n }\n}\n\n\nbody {\n margin: 0; /* unclear why we need this */\n}\n`, \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://mrjs/./src/defaultStyle.css?./node_modules/css-loader/dist/cjs.js"); /***/ }), @@ -554,7 +554,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ LayoutSystem: () => (/* binding */ LayoutSystem)\n/* harmony export */ });\n/* harmony import */ var three__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! three */ \"./node_modules/three/build/three.module.js\");\n/* harmony import */ var mrjs_core_MRSystem__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! mrjs/core/MRSystem */ \"./src/core/MRSystem.js\");\n/* harmony import */ var mrjs_core_MREntity__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! mrjs/core/MREntity */ \"./src/core/MREntity.js\");\n/* harmony import */ var mrjs_core_MRDivEntity__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! mrjs/core/MRDivEntity */ \"./src/core/MRDivEntity.js\");\n/* harmony import */ var mrjs_core_entities_MRPanel__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! mrjs/core/entities/MRPanel */ \"./src/core/entities/MRPanel.js\");\n\n\n\n\n\n\n\n/**\n * @class LayoutSystem\n * @classdesc System that allows for setup and handling of changing layout.\n * @augments MRSystem\n */\nclass LayoutSystem extends mrjs_core_MRSystem__WEBPACK_IMPORTED_MODULE_0__.MRSystem {\n /**\n * @class\n * @description Constructor for the layout system. Uses the default System setup.\n */\n constructor() {\n super(false);\n this.tempPosition = new three__WEBPACK_IMPORTED_MODULE_4__.Vector3();\n }\n\n /**\n * @function\n * @description Called when a new entity is added to this system\n * @param {MREntity} entity - the entity being added.\n */\n onNewEntity(entity) {\n if (entity instanceof mrjs_core_entities_MRPanel__WEBPACK_IMPORTED_MODULE_3__.MRPanel) {\n return;\n }\n if (entity instanceof mrjs_core_MRDivEntity__WEBPACK_IMPORTED_MODULE_2__.MRDivEntity) {\n this.registry.add(entity);\n this.setLayoutPosition(entity);\n }\n }\n\n /**\n * @function\n * @description Getter to checks if we need to run this system's update call. Overridden implementation returns true if there are any items in this\n * systems registry that need to be run AND the default systemUpdateCheck is true\n * (see [MRSystem.needsSystemUpdate](https://docs.mrjs.io/javascript-api/#mrsystem.needssystemupdate) for default).\n * @returns {boolean} true if the system is in a state where this system is needed to update, false otherwise\n */\n get needsSystemUpdate() {\n return this.registry.size > 0 && super.needsSystemUpdate;\n }\n\n /**\n * @function\n * @description Since this class overrides the default `get` for the `needsSystemUpdate` call, the `set` pair is needed for javascript to be happy.\n * Relies on the parent's implementation. (see [MRSystem.needsSystemUpdate](https://docs.mrjs.io/javascript-api/#mrsystem.needssystemupdate) for default).\n */\n set needsSystemUpdate(bool) {\n super.needsSystemUpdate = bool;\n }\n\n /**\n * @function\n * @description The generic system update call. Handles updating all 3D items to match whatever layout position is expected.\n * @param {number} deltaTime - given timestep to be used for any feature changes\n * @param {object} frame - given frame information to be used for any feature changes\n */\n update(deltaTime, frame) {\n for (const entity of this.registry) {\n this.setLayoutPosition(entity);\n }\n }\n\n /**\n * @function\n * @description Helper function for the update call. Sets the entity's appropriate 3D layout position based on window and entity expectations.\n * @param {MREntity} entity - the entity being updated.\n */\n setLayoutPosition(entity) {\n const rect = entity.getBoundingClientRect();\n\n const panel = entity.closest('mr-panel');\n if (!panel) {\n return;\n }\n const panelRect = panel.getBoundingClientRect();\n\n let innerWidth = parseFloat(panel.compStyle.width.split('px')[0]);\n let innerHeight = parseFloat(panel.compStyle.height.split('px')[0]);\n let centerX = innerWidth / 2;\n let centerY = innerHeight / 2;\n\n let windowWidth = panel.width;\n let windowHeight = panel.height;\n let centeredX = rect.left - panelRect.left - centerX;\n let centeredY = rect.top - panelRect.top - centerY;\n\n let threeX = (centeredX / innerWidth) * windowWidth;\n let threeY = (centeredY / innerHeight) * windowHeight;\n\n threeX += entity.width / 2;\n threeY += entity.height / 2;\n\n entity.object3D.position.setX(threeX);\n entity.object3D.position.setY(-threeY);\n\n if (entity.compStyle.zIndex != 'auto') {\n // default zIndex values in css are in the 1000s - using this arbitrary divide to convert to an actual usable threejs value.\n entity.object3D.position.setZ(parseFloat(entity.compStyle.zIndex) / 1000);\n\n if (entity.compStyle.zIndex == entity.parentElement.compStyle.zIndex) {\n entity.object3D.position.z += 0.0001;\n }\n } else {\n entity.object3D.position.z = 0;\n }\n }\n}\n\n\n//# sourceURL=webpack://mrjs/./src/core/componentSystems/LayoutSystem.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ LayoutSystem: () => (/* binding */ LayoutSystem)\n/* harmony export */ });\n/* harmony import */ var three__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! three */ \"./node_modules/three/build/three.module.js\");\n/* harmony import */ var mrjs_core_MRSystem__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! mrjs/core/MRSystem */ \"./src/core/MRSystem.js\");\n/* harmony import */ var mrjs_core_MREntity__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! mrjs/core/MREntity */ \"./src/core/MREntity.js\");\n/* harmony import */ var mrjs_core_MRDivEntity__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! mrjs/core/MRDivEntity */ \"./src/core/MRDivEntity.js\");\n/* harmony import */ var mrjs_core_entities_MRPanel__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! mrjs/core/entities/MRPanel */ \"./src/core/entities/MRPanel.js\");\n\n\n\n\n\n\n\n/**\n * @class LayoutSystem\n * @classdesc System that allows for setup and handling of changing layout.\n * @augments MRSystem\n */\nclass LayoutSystem extends mrjs_core_MRSystem__WEBPACK_IMPORTED_MODULE_0__.MRSystem {\n /**\n * @class\n * @description Constructor for the layout system. Uses the default System setup.\n */\n constructor() {\n super(false);\n this.tempPosition = new three__WEBPACK_IMPORTED_MODULE_4__.Vector3();\n }\n\n /**\n * @function\n * @description Called when a new entity is added to this system\n * @param {MREntity} entity - the entity being added.\n */\n onNewEntity(entity) {\n if (entity instanceof mrjs_core_entities_MRPanel__WEBPACK_IMPORTED_MODULE_3__.MRPanel) {\n return;\n }\n if (entity instanceof mrjs_core_MRDivEntity__WEBPACK_IMPORTED_MODULE_2__.MRDivEntity) {\n this.registry.add(entity);\n this.setLayoutPosition(entity);\n }\n }\n\n /**\n * @function\n * @description Getter to checks if we need to run this system's update call. Overridden implementation returns true if there are any items in this\n * systems registry that need to be run AND the default systemUpdateCheck is true\n * (see [MRSystem.needsSystemUpdate](https://docs.mrjs.io/javascript-api/#mrsystem.needssystemupdate) for default).\n * @returns {boolean} true if the system is in a state where this system is needed to update, false otherwise\n */\n get needsSystemUpdate() {\n return this.registry.size > 0 && super.needsSystemUpdate;\n }\n\n /**\n * @function\n * @description Since this class overrides the default `get` for the `needsSystemUpdate` call, the `set` pair is needed for javascript to be happy.\n * Relies on the parent's implementation. (see [MRSystem.needsSystemUpdate](https://docs.mrjs.io/javascript-api/#mrsystem.needssystemupdate) for default).\n */\n set needsSystemUpdate(bool) {\n super.needsSystemUpdate = bool;\n }\n\n /**\n * @function\n * @description The generic system update call. Handles updating all 3D items to match whatever layout position is expected.\n * @param {number} deltaTime - given timestep to be used for any feature changes\n * @param {object} frame - given frame information to be used for any feature changes\n */\n update(deltaTime, frame) {\n for (const entity of this.registry) {\n this.setLayoutPosition(entity);\n }\n }\n\n /**\n * @function\n * @description Helper function for the update call. Sets the entity's appropriate 3D layout position based on window and entity expectations.\n * @param {MREntity} entity - the entity being updated.\n */\n setLayoutPosition(entity) {\n const rect = entity.getBoundingClientRect();\n\n const panel = entity.closest('mr-panel');\n if (!panel) {\n return;\n }\n const panelRect = panel.getBoundingClientRect();\n\n let innerWidth = parseFloat(panel.compStyle.width.split('px')[0]);\n let innerHeight = parseFloat(panel.compStyle.height.split('px')[0]);\n let centerX = innerWidth / 2;\n let centerY = innerHeight / 2;\n\n let windowWidth = panel.width;\n let windowHeight = panel.height;\n let centeredX = rect.left - panelRect.left - centerX;\n let centeredY = rect.top - panelRect.top - centerY;\n\n let threeX = (centeredX / innerWidth) * windowWidth;\n let threeY = (centeredY / innerHeight) * windowHeight;\n\n threeX += entity.width / 2;\n threeY += entity.height / 2;\n\n entity.object3D.position.setX(threeX);\n entity.object3D.position.setY(-threeY);\n\n if (entity.compStyle.zIndex != 'auto') {\n // default zIndex values in css are in the 1000s - using this arbitrary divide to convert to an actual usable threejs value.\n entity.object3D.position.setZ(parseFloat(entity.compStyle.zIndex) / 1000);\n\n if (entity.compStyle.zIndex == entity.parentElement.compStyle.zIndex) {\n entity.object3D.position.z += 0.0001;\n }\n } else {\n entity.object3D.position.z = entity.parentElement.object3D.position.z + 0.001;\n }\n }\n}\n\n\n//# sourceURL=webpack://mrjs/./src/core/componentSystems/LayoutSystem.js?"); /***/ }), @@ -598,7 +598,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ PhysicsSystem: () => (/* binding */ PhysicsSystem)\n/* harmony export */ });\n/* harmony import */ var three__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! three */ \"./node_modules/three/build/three.module.js\");\n/* harmony import */ var mrjs_core_MRSystem__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! mrjs/core/MRSystem */ \"./src/core/MRSystem.js\");\n/* harmony import */ var mrjs_core_MREntity__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! mrjs/core/MREntity */ \"./src/core/MREntity.js\");\n/* harmony import */ var mrjs__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! mrjs */ \"./src/index.js\");\n/* harmony import */ var _MRDivEntity__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../MRDivEntity */ \"./src/core/MRDivEntity.js\");\n/* harmony import */ var _entities_MRPanel__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../entities/MRPanel */ \"./src/core/entities/MRPanel.js\");\n/* harmony import */ var _entities_MRModel__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../entities/MRModel */ \"./src/core/entities/MRModel.js\");\n\n\n\n\n\n\n\n\n\n\n/**\n * @class PhysicsSystem\n * @classdesc The physics system functions differently from other systems,\n * Rather than attaching components, physical properties such as\n * shape, body, mass, etc are definied as attributes.\n * if shape and body are not defined, they default to the geometry\n * of the entity, if there is no geometry, there is no physics defined\n * on the entity.\n *\n * Alternatively, you can also expressly attach a comp-physics\n * attribute for more detailed control.\n * @augments MRSystem\n */\nclass PhysicsSystem extends mrjs_core_MRSystem__WEBPACK_IMPORTED_MODULE_0__.MRSystem {\n /**\n * @class\n * @description PhysicsSystem's default constructor - sets up useful world and debug information alongside an initial `Rapier` event queue.\n */\n constructor() {\n super(false);\n this.debug = this.app.debug;\n this.tempWorldPosition = new three__WEBPACK_IMPORTED_MODULE_6__.Vector3();\n this.tempWorldQuaternion = new three__WEBPACK_IMPORTED_MODULE_6__.Quaternion();\n\n this.currentEntity = null;\n\n this.tempWorldScale = new three__WEBPACK_IMPORTED_MODULE_6__.Vector3();\n this.tempBBox = new three__WEBPACK_IMPORTED_MODULE_6__.Box3();\n this.tempSize = new three__WEBPACK_IMPORTED_MODULE_6__.Vector3();\n\n if (this.debug && this.debug == 'true') {\n const material = new three__WEBPACK_IMPORTED_MODULE_6__.LineBasicMaterial({\n color: 0xffffff,\n vertexColors: true,\n });\n const geometry = new three__WEBPACK_IMPORTED_MODULE_6__.BufferGeometry();\n this.lines = new three__WEBPACK_IMPORTED_MODULE_6__.LineSegments(geometry, material);\n this.app.scene.add(this.lines);\n }\n }\n\n /**\n * @function\n * @description The generic system update call. Based on the captured physics events for the frame, handles all items appropriately.\n * @param {number} deltaTime - given timestep to be used for any feature changes\n * @param {object} frame - given frame information to be used for any feature changes\n */\n update(deltaTime, frame) {\n this.app.physicsWorld.step(mrjs__WEBPACK_IMPORTED_MODULE_2__.mrjsUtils.physics.eventQueue);\n\n for (const entity of this.registry) {\n if (entity.physics?.body == null) {\n continue;\n }\n this.updateBody(entity);\n }\n\n this.updateDebugRenderer();\n }\n\n /**\n * @function\n * @description When a new entity is created, adds it to the physics registry and initializes the physics aspects of the entity.\n * @param {MREntity} entity - the entity being set up\n */\n onNewEntity(entity) {\n if (entity.physics.type == 'none') {\n return;\n }\n\n if (entity instanceof _MRDivEntity__WEBPACK_IMPORTED_MODULE_3__.MRDivEntity) {\n this.initPhysicsBody(entity);\n this.registry.add(entity);\n }\n }\n\n /**\n * @function\n * @description Initializes the rigid body used by the physics part of the entity\n * @param {MREntity} entity - the entity being updated\n */\n initPhysicsBody(entity) {\n // TODO: we should find a way to consolidate these 2, UI and Model are created in slightly different ways\n // and model will get more complex as we add convexMesh support\n if (entity instanceof _entities_MRModel__WEBPACK_IMPORTED_MODULE_5__.MRModel) {\n this.initSimpleBody(entity);\n } else if (entity instanceof _MRDivEntity__WEBPACK_IMPORTED_MODULE_3__.MRDivEntity) {\n this.initUIEntityBody(entity);\n }\n\n entity.object3D.getWorldPosition(this.tempWorldPosition);\n entity.object3D.getWorldQuaternion(this.tempWorldQuaternion);\n\n entity.physics.body.setTranslation(...this.tempWorldPosition, true);\n entity.physics.body.setRotation(this.tempWorldQuaternion, true);\n }\n\n /**\n * @function\n * @description Initializes the rigid body used by the physics for div or Model entity\n * @param {MREntity} entity - the entity being updated\n */\n initUIEntityBody(entity) {\n entity.physics.halfExtents = new three__WEBPACK_IMPORTED_MODULE_6__.Vector3();\n this.tempBBox.setFromCenterAndSize(entity.object3D.position, new three__WEBPACK_IMPORTED_MODULE_6__.Vector3(entity.width, entity.height, 0.002));\n\n this.tempWorldScale.setFromMatrixScale(entity.object3D.matrixWorld);\n this.tempBBox.getSize(this.tempSize);\n this.tempSize.multiply(this.tempWorldScale);\n\n entity.physics.halfExtents.copy(this.tempSize);\n entity.physics.halfExtents.divideScalar(2);\n\n const rigidBodyDesc = mrjs__WEBPACK_IMPORTED_MODULE_2__.mrjsUtils.physics.RAPIER.RigidBodyDesc.fixed();\n entity.physics.body = this.app.physicsWorld.createRigidBody(rigidBodyDesc);\n\n let colliderDesc = mrjs__WEBPACK_IMPORTED_MODULE_2__.mrjsUtils.physics.RAPIER.ColliderDesc.cuboid(...entity.physics.halfExtents);\n colliderDesc.setCollisionGroups(mrjs__WEBPACK_IMPORTED_MODULE_2__.mrjsUtils.physics.CollisionGroups.UI);\n entity.physics.collider = this.app.physicsWorld.createCollider(colliderDesc, entity.physics.body);\n mrjs__WEBPACK_IMPORTED_MODULE_2__.mrjsUtils.physics.COLLIDER_ENTITY_MAP[entity.physics.collider.handle] = entity;\n entity.physics.collider.setActiveCollisionTypes(mrjs__WEBPACK_IMPORTED_MODULE_2__.mrjsUtils.physics.RAPIER.ActiveCollisionTypes.DEFAULT | mrjs__WEBPACK_IMPORTED_MODULE_2__.mrjsUtils.physics.RAPIER.ActiveCollisionTypes.KINEMATIC_FIXED);\n entity.physics.collider.setActiveEvents(mrjs__WEBPACK_IMPORTED_MODULE_2__.mrjsUtils.physics.RAPIER.ActiveEvents.COLLISION_EVENTS);\n }\n\n /**\n * @function\n * @description Initializes a simple bounding box collider based on the visual bounds of the entity\n * @param {MREntity} entity - the entity being updated\n */\n initSimpleBody(entity) {\n entity.physics.halfExtents = new three__WEBPACK_IMPORTED_MODULE_6__.Vector3();\n this.tempBBox.setFromObject(entity.object3D, true);\n\n this.tempBBox.getSize(this.tempSize);\n\n entity.physics.halfExtents.copy(this.tempSize);\n entity.physics.halfExtents.divideScalar(2);\n\n const rigidBodyDesc = mrjs__WEBPACK_IMPORTED_MODULE_2__.mrjsUtils.physics.RAPIER.RigidBodyDesc.fixed();\n entity.physics.body = this.app.physicsWorld.createRigidBody(rigidBodyDesc);\n\n let colliderDesc = mrjs__WEBPACK_IMPORTED_MODULE_2__.mrjsUtils.physics.RAPIER.ColliderDesc.cuboid(...entity.physics.halfExtents);\n colliderDesc.setCollisionGroups(mrjs__WEBPACK_IMPORTED_MODULE_2__.mrjsUtils.physics.CollisionGroups.UI);\n entity.physics.collider = this.app.physicsWorld.createCollider(colliderDesc, entity.physics.body);\n mrjs__WEBPACK_IMPORTED_MODULE_2__.mrjsUtils.physics.COLLIDER_ENTITY_MAP[entity.physics.collider.handle] = entity;\n entity.physics.collider.setActiveCollisionTypes(mrjs__WEBPACK_IMPORTED_MODULE_2__.mrjsUtils.physics.RAPIER.ActiveCollisionTypes.DEFAULT | mrjs__WEBPACK_IMPORTED_MODULE_2__.mrjsUtils.physics.RAPIER.ActiveCollisionTypes.KINEMATIC_FIXED);\n entity.physics.collider.setActiveEvents(mrjs__WEBPACK_IMPORTED_MODULE_2__.mrjsUtils.physics.RAPIER.ActiveEvents.COLLISION_EVENTS);\n }\n\n /**\n * @function\n * @description Initializes a Rigid Body detailed convexMesh collider for the entity\n * NOTE: not currently in use until we can sync it with animations\n * @param {MREntity} entity - the entity being updated\n */\n initDetailedBody(entity) {\n const rigidBodyDesc = mrjs__WEBPACK_IMPORTED_MODULE_2__.mrjsUtils.physics.RAPIER.RigidBodyDesc.fixed();\n entity.physics.body = this.app.physicsWorld.createRigidBody(rigidBodyDesc);\n\n entity.physics.colliders = [];\n\n entity.object3D.traverse((child) => {\n if (child.isMesh) {\n let collider = this.app.physicsWorld.createCollider(this.initConvexMeshCollider(child, entity.compStyle.scale), entity.physics.body);\n collider.setCollisionGroups(mrjs__WEBPACK_IMPORTED_MODULE_2__.mrjsUtils.physics.CollisionGroups.UI);\n entity.physics.colliders.push(collider);\n mrjs__WEBPACK_IMPORTED_MODULE_2__.mrjsUtils.physics.COLLIDER_ENTITY_MAP[collider.handle] = entity;\n collider.setActiveCollisionTypes(mrjs__WEBPACK_IMPORTED_MODULE_2__.mrjsUtils.physics.RAPIER.ActiveCollisionTypes.DEFAULT | mrjs__WEBPACK_IMPORTED_MODULE_2__.mrjsUtils.physics.RAPIER.ActiveCollisionTypes.KINEMATIC_FIXED);\n collider.setActiveEvents(mrjs__WEBPACK_IMPORTED_MODULE_2__.mrjsUtils.physics.RAPIER.ActiveEvents.COLLISION_EVENTS);\n }\n });\n }\n\n /**\n * @function\n * @description Initializes a convexMesh collider from a THREE.js geometry\n * NOTE: not currently in use until we can sync it with animations\n * @param {MREntity} entity - the entity being updated\n */\n initConvexMeshCollider(object3D, scale) {\n const positionAttribute = object3D.geometry.getAttribute('position');\n const vertices = [];\n for (let i = 0; i < positionAttribute.count; i++) {\n const vertex = new three__WEBPACK_IMPORTED_MODULE_6__.Vector3().fromBufferAttribute(positionAttribute, i).multiplyScalar(scale * mrjs__WEBPACK_IMPORTED_MODULE_2__.mrjsUtils.app.scale);\n vertices.push(vertex.toArray());\n }\n\n // Convert vertices to a flat Float32Array as required by RAPIER.ConvexHull\n const verticesFlat = new Float32Array(vertices.flat());\n\n return mrjs__WEBPACK_IMPORTED_MODULE_2__.mrjsUtils.physics.RAPIER.ColliderDesc.convexMesh(verticesFlat);\n }\n\n /**\n * @function\n * @description Updates the rigid body used by the physics part of the entity\n * @param {MREntity} entity - the entity being updated\n */\n updateBody(entity) {\n if (!entity.physics.body) {\n return;\n }\n\n if (entity.compStyle.visibility == 'hidden' && entity.physics.body.isEnabled()) {\n entity.physics.body.setEnabled(false);\n } else if (!entity.physics.body.isEnabled()) {\n entity.physics.body.setEnabled(false);\n }\n\n if (entity instanceof _entities_MRPanel__WEBPACK_IMPORTED_MODULE_4__.MRPanel) {\n entity.panel.getWorldPosition(this.tempWorldPosition);\n } else {\n entity.object3D.getWorldPosition(this.tempWorldPosition);\n }\n entity.physics.body.setTranslation({ ...this.tempWorldPosition }, true);\n\n entity.object3D.getWorldQuaternion(this.tempWorldQuaternion);\n entity.physics.body.setRotation(this.tempWorldQuaternion, true);\n\n // TODO: we should find a way to consolidate these 2, UI and Model are created in slightly different ways\n // and model will get more complex as we add convexMesh support\n if (entity instanceof _entities_MRModel__WEBPACK_IMPORTED_MODULE_5__.MRModel) {\n this.updateSimpleBody(entity);\n } else if (entity instanceof _MRDivEntity__WEBPACK_IMPORTED_MODULE_3__.MRDivEntity) {\n this.updateUIBody(entity);\n }\n }\n\n /**\n * @function\n * @description Updates the rigid body used by the physics part of the div entity\n * @param {MREntity} entity - the entity being updated\n */\n updateUIBody(entity) {\n this.tempBBox.setFromCenterAndSize(entity.object3D.position, new three__WEBPACK_IMPORTED_MODULE_6__.Vector3(entity.width, entity.height, 0.002));\n\n this.tempWorldScale.setFromMatrixScale(entity.object3D.matrixWorld);\n this.tempBBox.getSize(this.tempSize);\n this.tempSize.multiply(this.tempWorldScale);\n\n entity.physics.halfExtents.copy(this.tempSize);\n entity.physics.halfExtents.divideScalar(2);\n\n entity.physics.collider.setHalfExtents(entity.physics.halfExtents);\n }\n\n /**\n * @function\n * @description Updates the rigid body used by the physics part of the model entity\n * @param {MREntity} entity - the entity being updated\n */\n updateSimpleBody(entity) {\n this.tempBBox.setFromObject(entity.object3D, true);\n\n this.tempBBox.getSize(this.tempSize);\n\n entity.physics.halfExtents.copy(this.tempSize);\n entity.physics.halfExtents.divideScalar(2);\n\n entity.physics.collider.setHalfExtents(entity.physics.halfExtents);\n }\n\n /**\n * @function\n * @description Updates the debug renderer to either be on or off based on the 'this.debug' variable. Handles the drawing of the visual lines.\n */\n updateDebugRenderer() {\n if (!this.debug || this.debug == 'false') {\n return;\n }\n const buffers = this.app.physicsWorld.debugRender();\n this.lines.geometry.setAttribute('position', new three__WEBPACK_IMPORTED_MODULE_6__.BufferAttribute(buffers.vertices, 3));\n this.lines.geometry.setAttribute('color', new three__WEBPACK_IMPORTED_MODULE_6__.BufferAttribute(buffers.colors, 4));\n }\n}\n\n\n//# sourceURL=webpack://mrjs/./src/core/componentSystems/PhysicsSystem.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ PhysicsSystem: () => (/* binding */ PhysicsSystem)\n/* harmony export */ });\n/* harmony import */ var three__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! three */ \"./node_modules/three/build/three.module.js\");\n/* harmony import */ var mrjs_core_MRSystem__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! mrjs/core/MRSystem */ \"./src/core/MRSystem.js\");\n/* harmony import */ var mrjs_core_MREntity__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! mrjs/core/MREntity */ \"./src/core/MREntity.js\");\n/* harmony import */ var mrjs__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! mrjs */ \"./src/index.js\");\n/* harmony import */ var _MRDivEntity__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../MRDivEntity */ \"./src/core/MRDivEntity.js\");\n/* harmony import */ var _entities_MRPanel__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../entities/MRPanel */ \"./src/core/entities/MRPanel.js\");\n/* harmony import */ var _entities_MRModel__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../entities/MRModel */ \"./src/core/entities/MRModel.js\");\n\n\n\n\n\n\n\n\n\n\n/**\n * @class PhysicsSystem\n * @classdesc The physics system functions differently from other systems,\n * Rather than attaching components, physical properties such as\n * shape, body, mass, etc are definied as attributes.\n * if shape and body are not defined, they default to the geometry\n * of the entity, if there is no geometry, there is no physics defined\n * on the entity.\n *\n * Alternatively, you can also expressly attach a comp-physics\n * attribute for more detailed control.\n * @augments MRSystem\n */\nclass PhysicsSystem extends mrjs_core_MRSystem__WEBPACK_IMPORTED_MODULE_0__.MRSystem {\n /**\n * @class\n * @description PhysicsSystem's default constructor - sets up useful world and debug information alongside an initial `Rapier` event queue.\n */\n constructor() {\n super(false);\n this.debug = this.app.debug;\n this.tempWorldPosition = new three__WEBPACK_IMPORTED_MODULE_6__.Vector3();\n this.tempWorldQuaternion = new three__WEBPACK_IMPORTED_MODULE_6__.Quaternion();\n\n this.currentEntity = null;\n\n this.tempWorldScale = new three__WEBPACK_IMPORTED_MODULE_6__.Vector3();\n this.tempBBox = new three__WEBPACK_IMPORTED_MODULE_6__.Box3();\n this.tempSize = new three__WEBPACK_IMPORTED_MODULE_6__.Vector3();\n\n if (this.debug && this.debug == 'true') {\n const material = new three__WEBPACK_IMPORTED_MODULE_6__.LineBasicMaterial({\n color: 0xffffff,\n vertexColors: true,\n });\n const geometry = new three__WEBPACK_IMPORTED_MODULE_6__.BufferGeometry();\n this.lines = new three__WEBPACK_IMPORTED_MODULE_6__.LineSegments(geometry, material);\n this.app.scene.add(this.lines);\n }\n }\n\n /**\n * @function\n * @description The generic system update call. Based on the captured physics events for the frame, handles all items appropriately.\n * @param {number} deltaTime - given timestep to be used for any feature changes\n * @param {object} frame - given frame information to be used for any feature changes\n */\n update(deltaTime, frame) {\n this.app.physicsWorld.step(mrjs__WEBPACK_IMPORTED_MODULE_2__.mrjsUtils.physics.eventQueue);\n\n for (const entity of this.registry) {\n if (entity.physics?.body == null) {\n continue;\n }\n this.updateBody(entity);\n }\n\n this.updateDebugRenderer();\n }\n\n /**\n * @function\n * @description When a new entity is created, adds it to the physics registry and initializes the physics aspects of the entity.\n * @param {MREntity} entity - the entity being set up\n */\n onNewEntity(entity) {\n if (entity.physics.type == 'none') {\n return;\n }\n\n if (entity instanceof _MRDivEntity__WEBPACK_IMPORTED_MODULE_3__.MRDivEntity) {\n this.initPhysicsBody(entity);\n this.registry.add(entity);\n }\n }\n\n /**\n * @function\n * @description Initializes the rigid body used by the physics part of the entity\n * @param {MREntity} entity - the entity being updated\n */\n initPhysicsBody(entity) {\n // TODO: we should find a way to consolidate these 2, UI and Model are created in slightly different ways\n // and model will get more complex as we add convexMesh support\n if (entity instanceof _entities_MRModel__WEBPACK_IMPORTED_MODULE_5__.MRModel) {\n this.initSimpleBody(entity);\n } else if (entity instanceof _MRDivEntity__WEBPACK_IMPORTED_MODULE_3__.MRDivEntity) {\n this.initUIEntityBody(entity);\n }\n\n entity.object3D.getWorldPosition(this.tempWorldPosition);\n entity.object3D.getWorldQuaternion(this.tempWorldQuaternion);\n\n entity.physics.body.setTranslation(...this.tempWorldPosition, true);\n entity.physics.body.setRotation(this.tempWorldQuaternion, true);\n }\n\n /**\n * @function\n * @description Initializes the rigid body used by the physics for div or Model entity\n * @param {MREntity} entity - the entity being updated\n */\n initUIEntityBody(entity) {\n entity.physics.halfExtents = new three__WEBPACK_IMPORTED_MODULE_6__.Vector3();\n this.tempBBox.setFromCenterAndSize(entity.object3D.position, new three__WEBPACK_IMPORTED_MODULE_6__.Vector3(entity.width, entity.height, 0.002));\n\n this.tempWorldScale.setFromMatrixScale(entity.object3D.matrixWorld);\n this.tempBBox.getSize(this.tempSize);\n this.tempSize.multiply(this.tempWorldScale);\n\n entity.physics.halfExtents.copy(this.tempSize);\n entity.physics.halfExtents.divideScalar(2);\n\n const rigidBodyDesc = mrjs__WEBPACK_IMPORTED_MODULE_2__.mrjsUtils.physics.RAPIER.RigidBodyDesc.fixed();\n entity.physics.body = this.app.physicsWorld.createRigidBody(rigidBodyDesc);\n\n let colliderDesc = mrjs__WEBPACK_IMPORTED_MODULE_2__.mrjsUtils.physics.RAPIER.ColliderDesc.cuboid(...entity.physics.halfExtents);\n colliderDesc.setCollisionGroups(mrjs__WEBPACK_IMPORTED_MODULE_2__.mrjsUtils.physics.CollisionGroups.UI);\n entity.physics.collider = this.app.physicsWorld.createCollider(colliderDesc, entity.physics.body);\n mrjs__WEBPACK_IMPORTED_MODULE_2__.mrjsUtils.physics.COLLIDER_ENTITY_MAP[entity.physics.collider.handle] = entity;\n entity.physics.collider.setActiveCollisionTypes(mrjs__WEBPACK_IMPORTED_MODULE_2__.mrjsUtils.physics.RAPIER.ActiveCollisionTypes.DEFAULT | mrjs__WEBPACK_IMPORTED_MODULE_2__.mrjsUtils.physics.RAPIER.ActiveCollisionTypes.KINEMATIC_FIXED);\n entity.physics.collider.setActiveEvents(mrjs__WEBPACK_IMPORTED_MODULE_2__.mrjsUtils.physics.RAPIER.ActiveEvents.COLLISION_EVENTS);\n\n }\n\n /**\n * @function\n * @description Initializes a simple bounding box collider based on the visual bounds of the entity\n * @param {MREntity} entity - the entity being updated\n */\n initSimpleBody(entity) {\n entity.physics.halfExtents = new three__WEBPACK_IMPORTED_MODULE_6__.Vector3();\n this.tempBBox.setFromObject(entity.object3D, true);\n\n this.tempBBox.getSize(this.tempSize);\n\n entity.physics.halfExtents.copy(this.tempSize);\n entity.physics.halfExtents.divideScalar(2);\n\n const rigidBodyDesc = mrjs__WEBPACK_IMPORTED_MODULE_2__.mrjsUtils.physics.RAPIER.RigidBodyDesc.fixed();\n entity.physics.body = this.app.physicsWorld.createRigidBody(rigidBodyDesc);\n\n let colliderDesc = mrjs__WEBPACK_IMPORTED_MODULE_2__.mrjsUtils.physics.RAPIER.ColliderDesc.cuboid(...entity.physics.halfExtents);\n colliderDesc.setCollisionGroups(mrjs__WEBPACK_IMPORTED_MODULE_2__.mrjsUtils.physics.CollisionGroups.UI);\n entity.physics.collider = this.app.physicsWorld.createCollider(colliderDesc, entity.physics.body);\n mrjs__WEBPACK_IMPORTED_MODULE_2__.mrjsUtils.physics.COLLIDER_ENTITY_MAP[entity.physics.collider.handle] = entity;\n entity.physics.collider.setActiveCollisionTypes(mrjs__WEBPACK_IMPORTED_MODULE_2__.mrjsUtils.physics.RAPIER.ActiveCollisionTypes.DEFAULT | mrjs__WEBPACK_IMPORTED_MODULE_2__.mrjsUtils.physics.RAPIER.ActiveCollisionTypes.KINEMATIC_FIXED);\n entity.physics.collider.setActiveEvents(mrjs__WEBPACK_IMPORTED_MODULE_2__.mrjsUtils.physics.RAPIER.ActiveEvents.COLLISION_EVENTS);\n }\n\n /**\n * @function\n * @description Initializes a Rigid Body detailed convexMesh collider for the entity\n * NOTE: not currently in use until we can sync it with animations\n * @param {MREntity} entity - the entity being updated\n */\n initDetailedBody(entity) {\n const rigidBodyDesc = mrjs__WEBPACK_IMPORTED_MODULE_2__.mrjsUtils.physics.RAPIER.RigidBodyDesc.fixed();\n entity.physics.body = this.app.physicsWorld.createRigidBody(rigidBodyDesc);\n\n entity.physics.colliders = [];\n\n entity.object3D.traverse((child) => {\n if (child.isMesh) {\n let collider = this.app.physicsWorld.createCollider(this.initConvexMeshCollider(child, entity.compStyle.scale), entity.physics.body);\n collider.setCollisionGroups(mrjs__WEBPACK_IMPORTED_MODULE_2__.mrjsUtils.physics.CollisionGroups.UI);\n entity.physics.colliders.push(collider);\n mrjs__WEBPACK_IMPORTED_MODULE_2__.mrjsUtils.physics.COLLIDER_ENTITY_MAP[collider.handle] = entity;\n collider.setActiveCollisionTypes(mrjs__WEBPACK_IMPORTED_MODULE_2__.mrjsUtils.physics.RAPIER.ActiveCollisionTypes.DEFAULT | mrjs__WEBPACK_IMPORTED_MODULE_2__.mrjsUtils.physics.RAPIER.ActiveCollisionTypes.KINEMATIC_FIXED);\n collider.setActiveEvents(mrjs__WEBPACK_IMPORTED_MODULE_2__.mrjsUtils.physics.RAPIER.ActiveEvents.COLLISION_EVENTS);\n }\n });\n }\n\n /**\n * @function\n * @description Initializes a convexMesh collider from a THREE.js geometry\n * NOTE: not currently in use until we can sync it with animations\n * @param {MREntity} entity - the entity being updated\n */\n initConvexMeshCollider(object3D, scale) {\n const positionAttribute = object3D.geometry.getAttribute('position');\n const vertices = [];\n for (let i = 0; i < positionAttribute.count; i++) {\n const vertex = new three__WEBPACK_IMPORTED_MODULE_6__.Vector3().fromBufferAttribute(positionAttribute, i).multiplyScalar(scale * mrjs__WEBPACK_IMPORTED_MODULE_2__.mrjsUtils.app.scale);\n vertices.push(vertex.toArray());\n }\n\n // Convert vertices to a flat Float32Array as required by RAPIER.ConvexHull\n const verticesFlat = new Float32Array(vertices.flat());\n\n return mrjs__WEBPACK_IMPORTED_MODULE_2__.mrjsUtils.physics.RAPIER.ColliderDesc.convexMesh(verticesFlat);\n }\n\n /**\n * @function\n * @description Updates the rigid body used by the physics part of the entity\n * @param {MREntity} entity - the entity being updated\n */\n updateBody(entity) {\n if (!entity.physics.body) {\n return;\n }\n\n if (entity.compStyle.visibility == 'hidden' && entity.physics.body.isEnabled()) {\n entity.physics.body.setEnabled(false);\n } else if (!entity.physics.body.isEnabled()) {\n entity.physics.body.setEnabled(true);\n }\n\n if (entity instanceof _entities_MRPanel__WEBPACK_IMPORTED_MODULE_4__.MRPanel) {\n entity.panel.getWorldPosition(this.tempWorldPosition);\n } else {\n entity.object3D.getWorldPosition(this.tempWorldPosition);\n }\n entity.physics.body.setTranslation({ ...this.tempWorldPosition }, true);\n\n entity.object3D.getWorldQuaternion(this.tempWorldQuaternion);\n entity.physics.body.setRotation(this.tempWorldQuaternion, true);\n\n // TODO: we should find a way to consolidate these 2, UI and Model are created in slightly different ways\n // and model will get more complex as we add convexMesh support\n if (entity instanceof _entities_MRModel__WEBPACK_IMPORTED_MODULE_5__.MRModel) {\n this.updateSimpleBody(entity);\n } else if (entity instanceof _MRDivEntity__WEBPACK_IMPORTED_MODULE_3__.MRDivEntity) {\n this.updateUIBody(entity);\n }\n }\n\n /**\n * @function\n * @description Updates the rigid body used by the physics part of the div entity\n * @param {MREntity} entity - the entity being updated\n */\n updateUIBody(entity) {\n this.tempBBox.setFromCenterAndSize(entity.object3D.position, new three__WEBPACK_IMPORTED_MODULE_6__.Vector3(entity.width, entity.height, 0.002));\n\n this.tempWorldScale.setFromMatrixScale(entity.object3D.matrixWorld);\n this.tempBBox.getSize(this.tempSize);\n this.tempSize.multiply(this.tempWorldScale);\n\n entity.physics.halfExtents.copy(this.tempSize);\n entity.physics.halfExtents.divideScalar(2);\n\n entity.physics.collider.setHalfExtents(entity.physics.halfExtents);\n }\n\n /**\n * @function\n * @description Updates the rigid body used by the physics part of the model entity\n * @param {MREntity} entity - the entity being updated\n */\n updateSimpleBody(entity) {\n this.tempBBox.setFromObject(entity.object3D, true);\n\n this.tempBBox.getSize(this.tempSize);\n\n entity.physics.halfExtents.copy(this.tempSize);\n entity.physics.halfExtents.divideScalar(2);\n\n entity.physics.collider.setHalfExtents(entity.physics.halfExtents);\n }\n\n /**\n * @function\n * @description Updates the debug renderer to either be on or off based on the 'this.debug' variable. Handles the drawing of the visual lines.\n */\n updateDebugRenderer() {\n if (!this.debug || this.debug == 'false') {\n return;\n }\n const buffers = this.app.physicsWorld.debugRender();\n this.lines.geometry.setAttribute('position', new three__WEBPACK_IMPORTED_MODULE_6__.BufferAttribute(buffers.vertices, 3));\n this.lines.geometry.setAttribute('color', new three__WEBPACK_IMPORTED_MODULE_6__.BufferAttribute(buffers.colors, 4));\n }\n}\n\n\n//# sourceURL=webpack://mrjs/./src/core/componentSystems/PhysicsSystem.js?"); /***/ }), @@ -719,7 +719,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ MRTextField: () => (/* binding */ MRTextField)\n/* harmony export */ });\n/* harmony import */ var three__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! three */ \"./node_modules/three/build/three.module.js\");\n/* harmony import */ var troika_three_text__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! troika-three-text */ \"./node_modules/troika-three-text/dist/troika-three-text.esm.js\");\n/* harmony import */ var mrjs_core_MRTextEntity__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! mrjs/core/MRTextEntity */ \"./src/core/MRTextEntity.js\");\n\n\n\n\n\n\n/**\n * @class MRTextField\n * @classdesc The text element that is used to represent normal user-entry text field items one would expect in a web-browser. Limits the one-line. `mr-textfield`\n * @augments MRTextEntity\n */\nclass MRTextField extends mrjs_core_MRTextEntity__WEBPACK_IMPORTED_MODULE_0__.MRTextEntity {\n /**\n * @class\n * @description Constructor for the textField entity component.\n */\n constructor() {\n super();\n this.attachShadow({ mode: 'open' });\n }\n\n /**\n * @function\n * @description Callback function of MREntity - handles setting up this textfield once it is connected to run as an entity component.\n */\n connected() {\n this.input = document.createElement('input');\n this.input.setAttribute('type', 'text');\n\n const geometry = new three__WEBPACK_IMPORTED_MODULE_1__.PlaneGeometry(0.0015, 0.02);\n const material = new three__WEBPACK_IMPORTED_MODULE_1__.MeshBasicMaterial({\n color: 0x000000,\n side: 2,\n });\n\n this.cursor = new three__WEBPACK_IMPORTED_MODULE_1__.Mesh(geometry, material);\n\n this.textObj.add(this.cursor);\n this.cursor.position.z += 0.001;\n this.cursor.visible = false;\n\n document.addEventListener('DOMContentLoaded', (event) => {\n this.input.setAttribute('value', this.textContent.replace(/(\\n)\\s+/g, '$1').trim());\n console.log('textfield', this.textContent.replace(/(\\n)\\s+/g, '$1').trim());\n });\n\n this.input.style.opacity = 0; // Make it invisible\n this.input.style.position = 'absolute'; // Avoid affecting layout\n this.shadowRoot.appendChild(this.input);\n\n this.addEventListener('click', (event) => {\n this.focus();\n });\n }\n\n /**\n * @function\n * @description Blurs the inputted text value and cursor information\n */\n blur = () => {\n this.input.blur();\n this.cursor.visible = false;\n };\n\n /**\n * @function\n * @description Focuses the inputted text value and cursor information as if it is selected. Includes showing the cursor item.\n */\n focus = () => {\n this.input.focus();\n this.input.selectionStart = this.input.value.length;\n this.cursor.visible = true;\n if (this.cursor.geometry !== undefined) {\n this.cursor.geometry.dispose();\n }\n this.cursor.geometry = new three__WEBPACK_IMPORTED_MODULE_1__.PlaneGeometry(0.002, this.textObj.fontSize);\n this.updateCursorPosition();\n };\n\n /**\n * @function\n * @description Updates the cursor position based on click and selection location.\n */\n updateCursorPosition = () => {\n const end = this.input.selectionStart > 0 ? this.input.selectionStart : 1;\n const selectBox = (0,troika_three_text__WEBPACK_IMPORTED_MODULE_2__.getSelectionRects)(this.textObj.textRenderInfo, 0, end).pop();\n if (isNaN(selectBox.right)) {\n return;\n }\n if (this.input.selectionStart == 0) {\n this.cursor.position.setX(selectBox.left);\n } else {\n this.cursor.position.setX(selectBox.right);\n }\n this.cursor.position.setY(selectBox.bottom + this.textObj.fontSize / 2);\n };\n}\n\ncustomElements.get('mr-textfield') || customElements.define('mr-textfield', MRTextField);\n\n\n//# sourceURL=webpack://mrjs/./src/core/entities/MRTextField.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ MRTextField: () => (/* binding */ MRTextField)\n/* harmony export */ });\n/* harmony import */ var three__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! three */ \"./node_modules/three/build/three.module.js\");\n/* harmony import */ var troika_three_text__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! troika-three-text */ \"./node_modules/troika-three-text/dist/troika-three-text.esm.js\");\n/* harmony import */ var mrjs_core_MRTextEntity__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! mrjs/core/MRTextEntity */ \"./src/core/MRTextEntity.js\");\n\n\n\n\n\n\n/**\n * @class MRTextField\n * @classdesc The text element that is used to represent normal user-entry text field items one would expect in a web-browser. Limits the one-line. `mr-textfield`\n * @augments MRTextEntity\n */\nclass MRTextField extends mrjs_core_MRTextEntity__WEBPACK_IMPORTED_MODULE_0__.MRTextEntity {\n /**\n * @class\n * @description Constructor for the textField entity component.\n */\n constructor() {\n super();\n this.attachShadow({ mode: 'open' });\n }\n\n /**\n * @function\n * @description Callback function of MREntity - handles setting up this textfield once it is connected to run as an entity component.\n */\n connected() {\n this.input = document.createElement('input');\n this.input.setAttribute('type', 'text');\n\n const geometry = new three__WEBPACK_IMPORTED_MODULE_1__.PlaneGeometry(0.0015, 0.02);\n const material = new three__WEBPACK_IMPORTED_MODULE_1__.MeshBasicMaterial({\n color: 0x000000,\n side: 2,\n });\n\n this.cursor = new three__WEBPACK_IMPORTED_MODULE_1__.Mesh(geometry, material);\n\n this.textObj.add(this.cursor);\n this.cursor.position.z += 0.001;\n this.cursor.visible = false;\n\n document.addEventListener('DOMContentLoaded', (event) => {\n this.input.setAttribute('value', this.textContent.replace(/(\\n)\\s+/g, '$1').trim());\n });\n\n this.input.style.opacity = 0; // Make it invisible\n this.input.style.position = 'absolute'; // Avoid affecting layout\n this.shadowRoot.appendChild(this.input);\n\n this.addEventListener('click', (event) => {\n this.focus();\n });\n }\n\n /**\n * @function\n * @description Blurs the inputted text value and cursor information\n */\n blur = () => {\n this.input.blur();\n this.cursor.visible = false;\n };\n\n /**\n * @function\n * @description Focuses the inputted text value and cursor information as if it is selected. Includes showing the cursor item.\n */\n focus = () => {\n this.input.focus();\n this.input.selectionStart = this.input.value.length;\n this.cursor.visible = true;\n if (this.cursor.geometry !== undefined) {\n this.cursor.geometry.dispose();\n }\n this.cursor.geometry = new three__WEBPACK_IMPORTED_MODULE_1__.PlaneGeometry(0.002, this.textObj.fontSize);\n this.updateCursorPosition();\n };\n\n /**\n * @function\n * @description Updates the cursor position based on click and selection location.\n */\n updateCursorPosition = () => {\n const end = this.input.selectionStart > 0 ? this.input.selectionStart : 1;\n const selectBox = (0,troika_three_text__WEBPACK_IMPORTED_MODULE_2__.getSelectionRects)(this.textObj.textRenderInfo, 0, end).pop();\n if (isNaN(selectBox.right)) {\n return;\n }\n if (this.input.selectionStart == 0) {\n this.cursor.position.setX(selectBox.left);\n } else {\n this.cursor.position.setX(selectBox.right);\n }\n this.cursor.position.setY(selectBox.bottom + this.textObj.fontSize / 2);\n };\n}\n\ncustomElements.get('mr-textfield') || customElements.define('mr-textfield', MRTextField);\n\n\n//# sourceURL=webpack://mrjs/./src/core/entities/MRTextField.js?"); /***/ }), diff --git a/package.json b/package.json index 5d1de75f..3f15bf79 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mrjs", - "version": "0.5.2", + "version": "0.5.3", "type": "module", "description": "an MR first webXR framework", "main": "dist/mr.js", diff --git a/samples/examples/anchors.html b/samples/examples/anchors.html index e2c2aa89..8e84813e 100644 --- a/samples/examples/anchors.html +++ b/samples/examples/anchors.html @@ -9,7 +9,7 @@ - +