react-simple-game-engine/lib/classes/scaler.js

[WIP] not able to use in currently. <!-- Document cumming soon... -->

import { LayoutMode } from "../export-enums";
import { copyProperties } from "../utils";
var Scaler = /** @class */ (function () {
    function Scaler(_screenSizeUI, _canvasSize, _layoutMode) {
        this._screenSizeUI = _screenSizeUI;
        this._canvasSize = _canvasSize;
        this._layoutMode = _layoutMode;
        this.update();
    }
    Object.defineProperty(Scaler.prototype, "value", {
        get: function () {
            return this._value;
        },
        set: function (_value) {
            this._value = _value;
            this._screenSize = {
                width: this.screenUnitToCanvasUnit(this._screenSizeUI.width),
                height: this.screenUnitToCanvasUnit(this._screenSizeUI.height),
            };
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(Scaler.prototype, "layoutMode", {
        get: function () {
            return this._layoutMode;
        },
        set: function (_layoutMode) {
            this._layoutMode = _layoutMode;
            this.update();
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(Scaler.prototype, "canvasSize", {
        get: function () {
            return this._canvasSize;
        },
        set: function (_canvasSize) {
            copyProperties(this._canvasSize, _canvasSize);
            this.update();
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(Scaler.prototype, "screenSize", {
        get: function () {
            return this._screenSize;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(Scaler.prototype, "screenSizeUI", {
        get: function () {
            return this._screenSizeUI;
        },
        set: function (_screenSizeUI) {
            copyProperties(this._screenSizeUI, _screenSizeUI);
            this.update();
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(Scaler.prototype, "viewport", {
        get: function () {
            var _viewport = { width: 1, height: 1 };
            if (this._canvasSize.height > this._screenSize.height) {
                _viewport.height = this._screenSize.height;
            }
            else {
                _viewport.height = this._canvasSize.height;
            }
            if (this._canvasSize.width > this._screenSize.width) {
                _viewport.width = this._screenSize.width;
            }
            else {
                _viewport.width = this._canvasSize.width;
            }
            return _viewport;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(Scaler.prototype, "viewportDelta", {
        get: function () {
            var _a = this.viewport, width = _a.width, height = _a.height;
            return {
                x: (this._canvasSize.width - width) / 2,
                y: (this._canvasSize.height - height) / 2,
            };
        },
        enumerable: false,
        configurable: true
    });
    Scaler.prototype.screenUnitToCanvasUnit = function (px) {
        return px / this._value;
    };
    Scaler.prototype.update = function () {
        if (this._layoutMode === LayoutMode.LANDSCAPE) {
            var predictScale = this._screenSizeUI.width / this._canvasSize.width;
            if (predictScale * this._canvasSize.height >= this._screenSizeUI.height) {
                this.value = predictScale;
            }
            else {
                this.value = this._screenSizeUI.height / this._canvasSize.height;
            }
        }
        else {
            var predictScale = this._screenSizeUI.height / this._canvasSize.height;
            if (predictScale * this._canvasSize.width >= this._screenSizeUI.width) {
                this.value = predictScale;
            }
            else {
                this.value = this._screenSizeUI.width / this._canvasSize.width;
            }
        }
    };
    return Scaler;
}());
export { Scaler };