@urso/core 0.8.22 → 0.8.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@urso/core",
-  "version": "0.8.22",
+  "version": "0.8.24",
   "description": "HTML5 game engine",
   "main": "build/js/index.js",
   "author": "Megbrimef",

package/src/js/config/main.js

@@ -11,7 +11,8 @@ let ConfigMain = {
     fps: {
         limit: 60, //max fps limit
         optimizeLowPerformance: false //down to 30 fps if lower 60
-    }
+    },
+    domParentSelector: false //or '#app-container' - div selector, to append canvas
 };
 
 module.exports = ConfigMain;

package/src/js/modules/observer/events.js

@@ -12,6 +12,7 @@ class ModulesObserverConfig {
         EXTRA_BROWSEREVENTS_POINTER_EVENT: 'extra.browserEvents.window.pointer.event',
         EXTRA_BROWSEREVENTS_WINDOW_PRE_RESIZE: 'extra.browserEvents.window.pre.resize',
         EXTRA_BROWSEREVENTS_WINDOW_RESIZE: 'extra.browserEvents.window.resize',
+        EXTRA_BROWSEREVENTS_PARENT_RESIZE: 'extra.browserEvents.parent.resize',
         EXTRA_BROWSEREVENTS_WINDOW_VISIBILITYCHANGE: 'extra.browserEvents.window.visibilitychange',
         MODULES_ASSETS_GROUP_LOADED: 'modules.assets.group.loaded',
         MODULES_ASSETS_LOAD_PROGRESS: 'modules.assets.load.progress',

package/src/js/modules/scenes/pixiWrapper.js

@@ -35,7 +35,19 @@ class ModulesScenesPixiWrapper {
         //define renderer
         PIXI.utils.skipHello();
         this._renderer = new PIXI.Renderer({ preserveDrawingBuffer: true, width: 1, height: 1 });
-        document.body.appendChild(this._renderer.view);
+        let parentContainer = document.body;
+
+        if (Urso.config.domParentSelector) {
+            const container = document.querySelector(Urso.config.domParentSelector);
+
+            if (container) {
+                parentContainer = container;
+            } else {
+                Urso.logger.warn(`No element found for domParentSelector: ${domParentSelector}`);
+            }
+        }
+
+        parentContainer.appendChild(this._renderer.view);
 
         //root and world
         this._root = new PIXI.Container();

package/src/js/modules/scenes/resolutions.js

@@ -10,6 +10,9 @@ class ModulesScenesResolutions {
         this.preResize = this.preResize.bind(this);
         this.refreshSceneSize();
 
+        this._customDomElementlatestWidth = 0;
+        this._customDomElementlatestHeight = 0;
+
         //TODO optimization (performance)
         /*if (devicePixelRatio > 2)
             devicePixelRatio = 2;*/ // when we are calculating canvas size
@@ -18,7 +21,48 @@ class ModulesScenesResolutions {
     _subscribeOnce() {
         this.addListener(Urso.events.EXTRA_BROWSEREVENTS_WINDOW_PRE_RESIZE, this.preResize, true);
         this.addListener(Urso.events.EXTRA_BROWSEREVENTS_WINDOW_RESIZE, this.refreshSceneSize, true);
+        this.addListener(Urso.events.EXTRA_BROWSEREVENTS_PARENT_RESIZE, this.refreshSceneSize, true);
         this.addListener(Urso.events.MODULES_SCENES_NEW_SCENE_INIT, this.refreshSceneSize, true);
+
+        if (Urso.config.domParentSelector) { this._observeCustomDomElementResize(); }
+    }
+
+    _observeCustomDomElementResize() {
+        const container = document.querySelector(Urso.config.domParentSelector);
+
+        if (!container) {
+            Urso.logger.warn(`No element found for domParentSelector: ${domParentSelector}`);
+            return;
+        }
+
+        const ro = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                if (entry.target.resizeHandler) {
+                    entry.target.resizeHandler(entry.target.clientHeight, entry.target.clientWidth);
+                }
+            }
+        });
+
+        container.resizeHandler = this._customDomElementResizeHandler.bind(this);
+        ro.observe(container);
+    }
+
+    _customDomElementResizeHandler(newHeight, newWidth) {
+        let needResize = false;
+
+        if (this._customDomElementlatestWidth !== newWidth) {
+            this._customDomElementlatestWidth = newWidth;
+            needResize = true;
+        }
+
+        if (this._customDomElementlatestHeight !== newHeight) {
+            this._customDomElementlatestHeight = newHeight;
+            needResize = true;
+        }
+
+        if (needResize) {
+            this.emit(Urso.events.EXTRA_BROWSEREVENTS_PARENT_RESIZE);
+        }
     }
 
     getTemplateSize() {
@@ -73,6 +117,17 @@ class ModulesScenesResolutions {
             height: window.innerHeight
         };
 
+        if (Urso.config.domParentSelector) {
+            const container = document.querySelector(Urso.config.domParentSelector);
+
+            if (container) {
+                windowSize = {
+                    width: container.offsetWidth,
+                    height: container.offsetHeight
+                };
+            }
+        }
+
         if (window.devicePixelRatio && window.devicePixelRatio !== 1) {
             windowSize.width *= window.devicePixelRatio;
             windowSize.height *= window.devicePixelRatio;