vevet 2.17.0 → 3.0.0-beta.1

package/build/cjs/components/canvas/Ctx2D.js

@@ -1,234 +0,0 @@
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Ctx2D = void 0;
-var vevet_dom_1 = require("vevet-dom");
-var Component_1 = require("../../base/Component");
-/**
- * Makes working with canvas easier.
- * It creates an HTML5 Canvas element and its 2d context and can
- * implement automatic resize.
- */
-var Ctx2D = /** @class */ (function (_super) {
-    __extends(Ctx2D, _super);
-    function Ctx2D(initialProp, init) {
-        if (init === void 0) { init = true; }
-        var _this = _super.call(this, initialProp, false) || this;
-        // set default values
-        _this._width = 0;
-        _this._height = 0;
-        _this._dpr = 1;
-        // create canvas
-        var _a = _this.prop, append = _a.append, container = _a.container;
-        var parent = (append && container) ? container : undefined;
-        _this._canvas = (0, vevet_dom_1.createElement)('canvas', {
-            parent: parent,
-        });
-        _this._ctx = _this._canvas.getContext('2d');
-        // and resize it for the first time
-        if (_this.prop.initialResize) {
-            _this.resize();
-        }
-        // initialize the class
-        if (init) {
-            _this.init();
-        }
-        return _this;
-    }
-    Object.defineProperty(Ctx2D.prototype, "container", {
-        /**
-         * The parent container of the canvas
-         */
-        get: function () {
-            return this.prop.container;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Ctx2D.prototype, "canvas", {
-        get: function () {
-            return this._canvas;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Ctx2D.prototype, "ctx", {
-        get: function () {
-            return this._ctx;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Ctx2D.prototype, "width", {
-        get: function () {
-            return this._width;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Ctx2D.prototype, "nonDPRWidth", {
-        /**
-         * Canvas width without DPR
-         */
-        get: function () {
-            return this.width / this.dpr;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Ctx2D.prototype, "clientWidth", {
-        /**
-         * Canvas width without DPR
-         */
-        get: function () {
-            return this.width / this.dpr;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Ctx2D.prototype, "height", {
-        get: function () {
-            return this._height;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Ctx2D.prototype, "nonDPRHeight", {
-        /**
-         * Canvas height without DPR
-         */
-        get: function () {
-            return this.height / this.dpr;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Ctx2D.prototype, "clientHeight", {
-        /**
-         * Canvas height without DPR
-         */
-        get: function () {
-            return this.height / this.dpr;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Ctx2D.prototype, "dpr", {
-        get: function () {
-            return this._dpr;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Ctx2D.prototype, "canRender", {
-        /**
-         * Check if width and height are not zero for content to be rendered
-         */
-        get: function () {
-            return this.width > 0 && this.height > 0;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Ctx2D.prototype._getDefaultProp = function () {
-        return __assign(__assign({}, _super.prototype._getDefaultProp.call(this)), { container: false, append: true, updateOnResize: false, initialResize: true, resizeTimeout: 0, width: false, height: false, dpr: false });
-    };
-    // Set Module Events
-    Ctx2D.prototype._setEvents = function () {
-        var _this = this;
-        _super.prototype._setEvents.call(this);
-        if (this.prop.updateOnResize !== false) {
-            var viewportTarget = typeof this.prop.updateOnResize === 'boolean' ? '' : this.prop.updateOnResize;
-            this.addViewportCallback(viewportTarget, function () {
-                _this.resize();
-            }, {
-                timeout: this.prop.resizeTimeout,
-            });
-            this.resize();
-        }
-    };
-    Ctx2D.prototype._onPropMutate = function () {
-        _super.prototype._onPropMutate.call(this);
-        this.resize();
-    };
-    /**
-     * Resize the canvas
-     */
-    Ctx2D.prototype.resize = function () {
-        // vars
-        var _a = this, prop = _a.prop, canvas = _a.canvas;
-        if (!canvas) {
-            return;
-        }
-        var app = this._app;
-        var viewport = app.viewport;
-        // calculate dpr
-        if (typeof prop.dpr === 'number') {
-            this._dpr = prop.dpr;
-        }
-        else {
-            this._dpr = viewport.dpr;
-        }
-        var dpr = this._dpr;
-        // calculate new width & height
-        var newWidth = 0;
-        var newHeight = 0;
-        if (typeof prop.width === 'number' && typeof prop.height === 'number') {
-            newWidth = prop.width;
-            newHeight = prop.height;
-        }
-        else if (this.container) {
-            newWidth = this.container.clientWidth;
-            newHeight = this.container.clientHeight;
-        }
-        else {
-            newWidth = viewport.width;
-            newHeight = viewport.height;
-        }
-        newWidth *= dpr;
-        newHeight *= dpr;
-        // update sizes
-        this._width = newWidth;
-        this._height = newHeight;
-        // apply sizes
-        canvas.width = newWidth;
-        canvas.height = newHeight;
-        this.callbacks.tbt('resize', false);
-    };
-    /**
-     * Destroy the module
-     */
-    Ctx2D.prototype._destroy = function () {
-        _super.prototype._destroy.call(this);
-        if (this.canvas) {
-            this.canvas.remove();
-        }
-    };
-    return Ctx2D;
-}(Component_1.Component));
-exports.Ctx2D = Ctx2D;

package/build/cjs/components/canvas/Ctx2DPrerender.js

@@ -1,90 +0,0 @@
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Ctx2DPrerender = void 0;
-var get_image_pos_1 = require("get-image-pos");
-var Ctx2D_1 = require("./Ctx2D");
-/**
- * The class allows you to prerender media for further use with reduced payloads.
- */
-var Ctx2DPrerender = /** @class */ (function (_super) {
-    __extends(Ctx2DPrerender, _super);
-    function Ctx2DPrerender() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Ctx2DPrerender.prototype._getDefaultProp = function () {
-        return __assign(__assign({}, _super.prototype._getDefaultProp.call(this)), { media: false, posRule: 'cover' });
-    };
-    /**
-     * Resize the canvas
-     */
-    Ctx2DPrerender.prototype.resize = function () {
-        _super.prototype.resize.call(this);
-        this._prerender();
-    };
-    Ctx2DPrerender.prototype._prerender = function () {
-        // check if can render
-        if (this.width === 0 || this.height === 0) {
-            return;
-        }
-        // check if media exists
-        var media = this.prop.media;
-        if (!media) {
-            return;
-        }
-        // get source info
-        var source;
-        var sourceWidth;
-        var sourceHeight;
-        if (media instanceof Ctx2D_1.Ctx2D) {
-            source = media.canvas;
-            sourceWidth = media.width;
-            sourceHeight = media.height;
-        }
-        else {
-            source = media;
-        }
-        // get media sizes
-        var size = (0, get_image_pos_1.getPos)({
-            source: source,
-            sourceWidth: sourceWidth,
-            sourceHeight: sourceHeight,
-            rule: this.prop.posRule,
-            scale: 1,
-            width: this.width,
-            height: this.height,
-        });
-        this._ctx.clearRect(0, 0, this.width, this.height);
-        // render the media
-        this._ctx.drawImage(source, size.x, size.y, size.width, size.height);
-        // launch callbacks on prerender
-        this.callbacks.tbt('prerender', false);
-    };
-    return Ctx2DPrerender;
-}(Ctx2D_1.Ctx2D));
-exports.Ctx2DPrerender = Ctx2DPrerender;