@urso/core 0.3.10 → 0.4.1

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

@@ -1,176 +1,172 @@
-class ModulesScenesResolutions {
-
-    constructor() {
-        this.singleton = true;
-        this._activeResolution = false; //object
-        this._templateSize = { orientation: 0, width: 0, height: 0 };
-        this._orientations = { landscape: 'landscape', portrait: 'portrait' }
-        this._currentOrientation = null;
-
-        this.refreshSceneSize = this.refreshSceneSize.bind(this);
-        this.preResize = this.preResize.bind(this);
-        this.refreshSceneSize();
-
-        //TODO optimization (performance)
-        /*if (devicePixelRatio > 2)
-            devicePixelRatio = 2;*/ // when we are calculating canvas size
-    }
-
-    _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.MODULES_SCENES_NEW_SCENE_INIT, this.refreshSceneSize, true);
-    }
-
-    getTemplateSize() {
-        return this._templateSize;
-    }
-
-    preResize() {
-        if (Urso.helper.mobileAndTabletCheck())
-            this.getInstance('PixiWrapper').hideCanvas();
-    }
-
-    refreshSceneSize() {
-        let windowSize = this._getWindowSize();
-        let orientation = this._getOrientation(windowSize);
-        let configResolution = this._getResolutionConfig(windowSize);
-
-        let windowRatio = windowSize.width / windowSize.height;
-        let optimalRatio = this._getOptimalRatio(configResolution, windowRatio, orientation);
-
-        let currentResolution = Urso.helper.objectClone(configResolution);
-        currentResolution.name = 'currentResolution';
-        currentResolution.base = configResolution;
-        currentResolution.width = (optimalRatio > windowRatio) ? Math.floor(windowSize.width) : Math.floor(Math.floor(windowSize.height) * optimalRatio);
-        currentResolution.height = (optimalRatio > windowRatio) ? Math.floor(Math.floor(windowSize.width) / optimalRatio) : Math.floor(windowSize.height);
-
-        this._templateSize = this._calculateTemplateSize(currentResolution);
-        this._applyResolutionToPixi(currentResolution);
-
-        console.log('[SCENE] New Orientation', orientation);
-        console.log('[SCENE] New Resolution', currentResolution, 'windowSize:', windowSize);
-        console.log('[SCENE] New Template Size', this._templateSize);
-
-        //update InstancesModes
-        Object.values(this._orientations).forEach((orientationValue) => Urso.removeInstancesMode(orientationValue + 'Orientation'));
-        Urso.addInstancesMode(orientation + 'Orientation');
-
-        //send new resolution event
-        this.emit(Urso.events.MODULES_SCENES_NEW_RESOLUTION, { resolution: currentResolution, template: this._templateSize });
-
-        if (this._currentOrientation !== this._templateSize.orientation) {
-            this._currentOrientation = this._templateSize.orientation;
-            this.emit(Urso.events.MODULES_SCENES_ORIENTATION_CHANGE, this._templateSize.orientation);
-        }
-
-        return true;
-    };
-
-    _getWindowSize() {
-        const iOS = Urso.device.iOS;
-        const { width, height } = document.body.getBoundingClientRect();
-
-        let windowSize = {
-            width: iOS ? window.innerWidth : width,
-            height: iOS ? window.innerHeight : height
-        };
-
-        if (window.devicePixelRatio && window.devicePixelRatio !== 1) {
-            windowSize.width *= window.devicePixelRatio;
-            windowSize.height *= window.devicePixelRatio;
-        }
-
-        return windowSize;
-    }
-
-    _getOrientation(windowSize) {
-        return windowSize.width > windowSize.height ? this._orientations.landscape : this._orientations.portrait;  //todo move to constants
-    }
-
-    _getResolutionConfig(windowSize) {
-        let orientation = this._getOrientation(windowSize);
-        let mainDimension = windowSize.width > windowSize.height ? 'width' : 'height'; //todo move to constants
-        let config = this.getInstance('ResolutionsConfig').get();
-        let currentResolution = config[0];
-
-        //select optimal resolution from config
-        for (let resolution of config) {
-            if (resolution.orientation !== orientation)
-                continue;
-
-            if (
-                (currentResolution.orientation !== orientation) ||
-                (
-                    currentResolution[mainDimension] < resolution[mainDimension] &&
-                    resolution[mainDimension] < windowSize[mainDimension]
-                ) ||
-                (
-                    windowSize[mainDimension] < currentResolution[mainDimension] &&
-                    resolution[mainDimension] < currentResolution[mainDimension]
-                )
-            )
-                currentResolution = resolution;
-        }
-
-        return currentResolution;
-    }
-
-    _getOptimalRatio(configResolution, windowRatio, orientation) {
-        let optimalRatio = configResolution.width / configResolution.height;
-
-        if (configResolution.adaptive) {
-            let display = !Urso.helper.mobileAndTabletCheck() ? 'desktop' : 'mobile'; //todo move to constants
-            let adaptiveParams = this.getInstance('ResolutionsConfig').getAdaptive()[display];
-
-            if (adaptiveParams.supported) {
-                let limits = adaptiveParams.limits[orientation];
-                optimalRatio = Urso.math.intMakeBetween(windowRatio, limits.min, limits.max);
-            }
-        }
-
-        return optimalRatio;
-    }
-
-    _calculateTemplateSize(resolution) {
-        this._templateSize.orientation = resolution.orientation;
-        this._templateSize.width = resolution.base.width;
-        this._templateSize.height = resolution.base.height;
-
-        let dimensionsArray = ['width', 'height'];
-
-        //adaptive corrections
-        if (resolution.adaptive) {
-            let dimensionsPassiveKey = (resolution.width / resolution.height > resolution.base.width / resolution.base.height) ? 0 : 1;
-            let dimensionsMainKey = (dimensionsPassiveKey === 1) ? 0 : 1;
-
-            this._templateSize[dimensionsArray[dimensionsPassiveKey]] =
-                ~~(
-                    resolution[dimensionsArray[dimensionsPassiveKey]] *
-                    resolution.base[dimensionsArray[dimensionsMainKey]] / resolution[dimensionsArray[dimensionsMainKey]]
-                );
-        }
-
-        return this._templateSize;
-    }
-
-    _applyResolutionToPixi(resolution) {
-        let maxResolutionFactor = Math.min(this.getInstance('ResolutionsConfig').maxSize() / Math.max(resolution.width, resolution.height), 1);
-        let dp = window.devicePixelRatio;
-        let canvasSize = {
-            width: ~~(resolution.width * maxResolutionFactor),
-            height: ~~(resolution.height * maxResolutionFactor)
-        };
-
-        this.getInstance('PixiWrapper').showCanvas();
-        this.getInstance('PixiWrapper').resize(canvasSize.width, canvasSize.height);
-        this.getInstance('PixiWrapper').setWorldScale(canvasSize.width / this._templateSize.width, canvasSize.height / this._templateSize.height);
-        this.getInstance('PixiWrapper').setCanvasWidth(resolution.width / dp);
-        this.getInstance('PixiWrapper').setCanvasHeight(resolution.height / dp);
-
-        this._activeResolution = resolution;
-        return true;
-    };
-}
-
-module.exports = ModulesScenesResolutions;
+class ModulesScenesResolutions {
+
+    constructor() {
+        this.singleton = true;
+        this._activeResolution = false; //object
+        this._templateSize = { orientation: 0, width: 0, height: 0 };
+        this._currentOrientation = null;
+
+        this.refreshSceneSize = this.refreshSceneSize.bind(this);
+        this.preResize = this.preResize.bind(this);
+        this.refreshSceneSize();
+
+        //TODO optimization (performance)
+        /*if (devicePixelRatio > 2)
+            devicePixelRatio = 2;*/ // when we are calculating canvas size
+    }
+
+    _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.MODULES_SCENES_NEW_SCENE_INIT, this.refreshSceneSize, true);
+    }
+
+    getTemplateSize() {
+        return this._templateSize;
+    }
+
+    preResize() {
+        if (Urso.helper.mobileAndTabletCheck())
+            this.getInstance('PixiWrapper').hideCanvas();
+    }
+
+    refreshSceneSize() {
+        let windowSize = this._getWindowSize();
+        let orientation = this._getOrientation(windowSize);
+        let configResolution = this._getResolutionConfig(windowSize);
+
+        let windowRatio = windowSize.width / windowSize.height;
+        let optimalRatio = this._getOptimalRatio(configResolution, windowRatio, orientation);
+
+        let currentResolution = Urso.helper.objectClone(configResolution);
+        currentResolution.name = 'currentResolution';
+        currentResolution.base = configResolution;
+        currentResolution.width = (optimalRatio > windowRatio) ? Math.floor(windowSize.width) : Math.floor(Math.floor(windowSize.height) * optimalRatio);
+        currentResolution.height = (optimalRatio > windowRatio) ? Math.floor(Math.floor(windowSize.width) / optimalRatio) : Math.floor(windowSize.height);
+
+        this._templateSize = this._calculateTemplateSize(currentResolution);
+        this._applyResolutionToPixi(currentResolution);
+
+        console.log('[SCENE] New Orientation', orientation);
+        console.log('[SCENE] New Resolution', currentResolution, 'windowSize:', windowSize);
+        console.log('[SCENE] New Template Size', this._templateSize);
+
+        //update InstancesModes
+        Object.values(Urso.device.ScreenOrientation).forEach((orientationValue) => Urso.removeInstancesMode(orientationValue + 'Orientation'));
+        Urso.addInstancesMode(orientation + 'Orientation');
+
+        //send new resolution event
+        this.emit(Urso.events.MODULES_SCENES_NEW_RESOLUTION, { resolution: currentResolution, template: this._templateSize });
+
+        if (this._currentOrientation !== this._templateSize.orientation) {
+            this._currentOrientation = this._templateSize.orientation;
+            this.emit(Urso.events.MODULES_SCENES_ORIENTATION_CHANGE, this._templateSize.orientation);
+        }
+
+        return true;
+    };
+
+    _getWindowSize() {
+        let windowSize = {
+            width: window.innerWidth,
+            height: window.innerHeight
+        };
+
+        if (window.devicePixelRatio && window.devicePixelRatio !== 1) {
+            windowSize.width *= window.devicePixelRatio;
+            windowSize.height *= window.devicePixelRatio;
+        }
+
+        return windowSize;
+    }
+
+    _getOrientation(windowSize) {
+        return windowSize.width > windowSize.height ? Urso.device.ScreenOrientation.LANDSCAPE : Urso.device.ScreenOrientation.PORTRAIT;
+    }
+
+    _getResolutionConfig(windowSize) {
+        let orientation = this._getOrientation(windowSize);
+        let mainDimension = windowSize.width > windowSize.height ? 'width' : 'height'; //todo move to constants
+        let config = this.getInstance('ResolutionsConfig').get();
+        let currentResolution = config[0];
+
+        //select optimal resolution from config
+        for (let resolution of config) {
+            if (resolution.orientation !== orientation)
+                continue;
+
+            if (
+                (currentResolution.orientation !== orientation) ||
+                (
+                    currentResolution[mainDimension] < resolution[mainDimension] &&
+                    resolution[mainDimension] < windowSize[mainDimension]
+                ) ||
+                (
+                    windowSize[mainDimension] < currentResolution[mainDimension] &&
+                    resolution[mainDimension] < currentResolution[mainDimension]
+                )
+            )
+                currentResolution = resolution;
+        }
+
+        return currentResolution;
+    }
+
+    _getOptimalRatio(configResolution, windowRatio, orientation) {
+        let optimalRatio = configResolution.width / configResolution.height;
+
+        if (configResolution.adaptive) {
+            let display = !Urso.helper.mobileAndTabletCheck() ? 'desktop' : 'mobile'; //todo move to constants
+            let adaptiveParams = this.getInstance('ResolutionsConfig').getAdaptive()[display];
+
+            if (adaptiveParams.supported) {
+                let limits = adaptiveParams.limits[orientation];
+                optimalRatio = Urso.math.intMakeBetween(windowRatio, limits.min, limits.max);
+            }
+        }
+
+        return optimalRatio;
+    }
+
+    _calculateTemplateSize(resolution) {
+        this._templateSize.orientation = resolution.orientation;
+        this._templateSize.width = resolution.base.width;
+        this._templateSize.height = resolution.base.height;
+
+        let dimensionsArray = ['width', 'height'];
+
+        //adaptive corrections
+        if (resolution.adaptive) {
+            let dimensionsPassiveKey = (resolution.width / resolution.height > resolution.base.width / resolution.base.height) ? 0 : 1;
+            let dimensionsMainKey = (dimensionsPassiveKey === 1) ? 0 : 1;
+
+            this._templateSize[dimensionsArray[dimensionsPassiveKey]] =
+                ~~(
+                    resolution[dimensionsArray[dimensionsPassiveKey]] *
+                    resolution.base[dimensionsArray[dimensionsMainKey]] / resolution[dimensionsArray[dimensionsMainKey]]
+                );
+        }
+
+        return this._templateSize;
+    }
+
+    _applyResolutionToPixi(resolution) {
+        let maxResolutionFactor = Math.min(this.getInstance('ResolutionsConfig').maxSize() / Math.max(resolution.width, resolution.height), 1);
+        let dp = window.devicePixelRatio;
+        let canvasSize = {
+            width: ~~(resolution.width * maxResolutionFactor),
+            height: ~~(resolution.height * maxResolutionFactor)
+        };
+
+        this.getInstance('PixiWrapper').showCanvas();
+        this.getInstance('PixiWrapper').resize(canvasSize.width, canvasSize.height);
+        this.getInstance('PixiWrapper').setWorldScale(canvasSize.width / this._templateSize.width, canvasSize.height / this._templateSize.height);
+        this.getInstance('PixiWrapper').setCanvasWidth(resolution.width / dp);
+        this.getInstance('PixiWrapper').setCanvasHeight(resolution.height / dp);
+
+        this._activeResolution = resolution;
+        return true;
+    };
+}
+
+module.exports = ModulesScenesResolutions;

package/src/js/modules/scenes/resolutionsConfig.js

@@ -1,73 +1,73 @@
-class ModulesScenesResolutionsConfig {
-    constructor() {
-        this.singleton = true;
-
-        this._orientations = ['landscape', 'portrait'];
-
-        this.contents = [
-            {
-                "name": 'default',
-                "width": 1920,
-                "height": 1080,
-                "orientation": 'landscape',
-                "adaptive": true
-            }
-        ];
-
-        this.adaptiveConfig = {//works only if "adaptive": true  for current resolution
-            desktop: {
-                supported: true,
-                limits: {
-                    landscape: {
-                        min: 1, // width:height factor
-                        max: 2
-                    },
-                    portrait: {
-                        min: 0.5,
-                        max: 1
-                    }
-                }
-            },
-            mobile: {
-                supported: true,
-                limits: {
-                    landscape: {
-                        min: 1, // width:height factor
-                        max: 2
-                    },
-                    portrait: {
-                        min: 0.5,
-                        max: 1
-                    }
-                }
-            }
-        };
-    }
-
-    get() {
-        return this.contents;
-    };
-
-
-    getAdaptive() {
-        return this.adaptiveConfig;
-    };
-
-    maxSize() {
-        return Math.max(this.maxWidth(), this.maxHeight());
-    };
-
-    maxWidth() {
-        return this._maxDimension.call(this, 'width');
-    };
-
-    maxHeight() {
-        return this._maxDimension.call(this, 'height');
-    };
-
-    _maxDimension(dim) {
-        return this.contents.reduce((result, resolution) => resolution[dim] > result ? resolution[dim] : result, 0);
-    };
-}
-
-module.exports = ModulesScenesResolutionsConfig;
+class ModulesScenesResolutionsConfig {
+    constructor() {
+        this.singleton = true;
+
+        this._orientations = [Urso.device.ScreenOrientation.LANDSCAPE, Urso.device.ScreenOrientation.PORTRAIT]; //you can use only one orientation for config contents
+
+        this.contents = [
+            {
+                "name": 'default',
+                "width": 1920,
+                "height": 1080,
+                "orientation": Urso.device.ScreenOrientation.LANDSCAPE,
+                "adaptive": true
+            }
+        ];
+
+        this.adaptiveConfig = {//works only if "adaptive": true  for current resolution
+            desktop: {
+                supported: true,
+                limits: {
+                    landscape: {
+                        min: 1, // width:height factor
+                        max: 2
+                    },
+                    portrait: {
+                        min: 0.5,
+                        max: 1
+                    }
+                }
+            },
+            mobile: {
+                supported: true,
+                limits: {
+                    landscape: {
+                        min: 1, // width:height factor
+                        max: 2
+                    },
+                    portrait: {
+                        min: 0.5,
+                        max: 1
+                    }
+                }
+            }
+        };
+    }
+
+    get() {
+        return this.contents;
+    };
+
+
+    getAdaptive() {
+        return this.adaptiveConfig;
+    };
+
+    maxSize() {
+        return Math.max(this.maxWidth(), this.maxHeight());
+    };
+
+    maxWidth() {
+        return this._maxDimension.call(this, 'width');
+    };
+
+    maxHeight() {
+        return this._maxDimension.call(this, 'height');
+    };
+
+    _maxDimension(dim) {
+        return this.contents.reduce((result, resolution) => resolution[dim] > result ? resolution[dim] : result, 0);
+    };
+}
+
+module.exports = ModulesScenesResolutionsConfig;