vevet 1.4.27 → 2.0.1-dev.3

package/build/cjs/base/Plugin.js

@@ -0,0 +1,56 @@
+"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 __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Plugin = void 0;
+var Module_1 = require("./Module");
+/**
+ * A class for Plugins.
+ */
+var Plugin = /** @class */ (function (_super) {
+    __extends(Plugin, _super);
+    function Plugin(initialProp) {
+        return _super.call(this, initialProp, false) || this;
+    }
+    Object.defineProperty(Plugin.prototype, "component", {
+        get: function () {
+            return this._component;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Initializes the class
+     */
+    Plugin.prototype.init = function () {
+        if (!this._component) {
+            throw new Error('Component is not set. Be sure that initlugin is called before.');
+        }
+        _super.prototype.init.call(this);
+    };
+    /**
+     * Initialize the plugin
+     */
+    Plugin.prototype.initPlugin = function (parent) {
+        if (this._inited) {
+            return;
+        }
+        this._component = parent;
+        this.init();
+    };
+    return Plugin;
+}(Module_1.Module));
+exports.Plugin = Plugin;

package/build/cjs/components/animation-frame/AnimationFrame.js

@@ -0,0 +1,183 @@
+"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.AnimationFrame = void 0;
+var Component_1 = require("../../base/Component");
+var math_1 = require("../../utils/math");
+/**
+ * Launch an animation frame with a certain FPS
+ */
+var AnimationFrame = /** @class */ (function (_super) {
+    __extends(AnimationFrame, _super);
+    function AnimationFrame(initialProp, init) {
+        if (init === void 0) { init = true; }
+        var _this = _super.call(this, initialProp, false) || this;
+        _this._isPlaying = false;
+        _this._frame = null;
+        _this._frameIndex = -1;
+        _this._timeStamp = null;
+        _this._prevFrameTime = null;
+        if (init) {
+            _this.init();
+        }
+        return _this;
+    }
+    Object.defineProperty(AnimationFrame.prototype, "isPlaying", {
+        get: function () {
+            return this._isPlaying;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Get default properties
+     */
+    AnimationFrame.prototype._getDefaultProp = function () {
+        return __assign(__assign({}, _super.prototype._getDefaultProp.call(this)), { fps: 140, run: false });
+    };
+    // Extra constructor
+    AnimationFrame.prototype._constructor = function () {
+        _super.prototype._constructor.call(this);
+        this._create();
+    };
+    /**
+     * Create the frame
+     */
+    AnimationFrame.prototype._create = function () {
+        if (this.prop.run) {
+            this.play();
+        }
+    };
+    AnimationFrame.prototype._onPropMutate = function () {
+        this._frameIndex = -1;
+        this._timeStamp = null;
+        this._prevFrameTime = null;
+        if (this.prop.run) {
+            this._play();
+        }
+        else {
+            this._pause();
+        }
+    };
+    /**
+     * Launch the animation frame.
+     */
+    AnimationFrame.prototype.play = function () {
+        if (this.destroyed) {
+            return;
+        }
+        if (this.prop.run) {
+            return;
+        }
+        this.changeProp({
+            run: true,
+        });
+    };
+    /**
+     * Launch the animation frame.
+     */
+    AnimationFrame.prototype._play = function () {
+        // check if already playing
+        if (this.isPlaying) {
+            return;
+        }
+        this._isPlaying = true;
+        // launch animation
+        this._frame = window.requestAnimationFrame(this._animate.bind(this));
+    };
+    /**
+     * Stop the animation frame
+     */
+    AnimationFrame.prototype.pause = function () {
+        if (!this.prop.run) {
+            return;
+        }
+        this.changeProp({
+            run: false,
+        });
+    };
+    /**
+     * Stop the animation frame
+     */
+    AnimationFrame.prototype._pause = function () {
+        if (!this.isPlaying) {
+            return;
+        }
+        // cancel animation frame
+        if (this._frame) {
+            window.cancelAnimationFrame(this._frame);
+            this._frame = null;
+        }
+        // bool
+        this._isPlaying = false;
+    };
+    /**
+     * Launch the animation frame.
+     */
+    AnimationFrame.prototype._animate = function (timestamp) {
+        if (!this._isPlaying) {
+            return;
+        }
+        // launch animation
+        this._frame = window.requestAnimationFrame(this._animate.bind(this));
+        // update variables
+        var currentTime = +new Date();
+        if (this._timeStamp == null) {
+            this._timeStamp = timestamp;
+        }
+        if (this._prevFrameTime == null) {
+            this._prevFrameTime = currentTime;
+        }
+        // calculate frame index
+        var newFrameIndex = Math.floor((timestamp - this._timeStamp) / (1000 / this.prop.fps));
+        if (newFrameIndex <= this._frameIndex) {
+            return;
+        }
+        // update frame index
+        this._frameIndex = newFrameIndex;
+        // calculate real fps
+        var timeDiff = currentTime - this._prevFrameTime;
+        var realFPS = math_1.boundVal(timeDiff === 0 ? 1000 / 60 : Math.floor(1000 / timeDiff), [1, Infinity]);
+        // launch callbacks
+        this.callbacks.tbt('frame', {
+            fps: this.prop.fps,
+            realFPS: realFPS,
+            prevFrameDuration: currentTime - this._prevFrameTime,
+        });
+        this._prevFrameTime = +new Date();
+    };
+    /**
+     * Destroy the animation frame
+     */
+    AnimationFrame.prototype._destroy = function () {
+        this.pause();
+        _super.prototype._destroy.call(this);
+    };
+    return AnimationFrame;
+}(Component_1.Component));
+exports.AnimationFrame = AnimationFrame;

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

@@ -0,0 +1,200 @@
+"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 = vevet_dom_1.createElement('canvas', {
+            parent: parent,
+        });
+        _this._ctx = _this._canvas.getContext('2d');
+        // and resize it for the first time
+        _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, "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, "dpr", {
+        get: function () {
+            return this._dpr;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Ctx2D.prototype._getDefaultProp = function () {
+        return __assign(__assign({}, _super.prototype._getDefaultProp.call(this)), { container: false, append: true, updateOnResize: false, 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();
+            });
+            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

@@ -0,0 +1,72 @@
+"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 media exists
+        var media = this.prop.media;
+        if (!media) {
+            return;
+        }
+        // get media sizes
+        var size = get_image_pos_1.getPos({
+            source: media,
+            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(media, 0, 0, size.sourceWidth, size.sourceHeight, 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;