Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import { store } from '@/store';
- import fileCreator from '@/lib/filesCreator';
- export default new class {
- constructor() {
- window.utils = this;
- }
- get zoomList() {
- return [500, 200, 175, 150, 125, 100, 75, 50, 25, 10];
- }
- get zoom() {
- return store.state.editor.zoom;
- }
- conv(val, slope_min = 0, slope_max = 1) {
- val = val / 100;
- const r = ((slope_max * (val)) - (slope_min * (val)) - (slope_min * -1)).toFixed(8);
- return Number(r);
- }
- reverseConv(val, min, max) {
- return ((val - min) / (max - min)) * 100;
- }
- rotationSprite(sprite, angle = 0) {
- sprite.fcontrol.rotate(angle);
- this.canvasRender.control_canvas.renderAll();
- sprite.angle = angle;
- sprite.position.set(
- sprite.fcontrol.left / this.canvasRender.zoom,
- sprite.fcontrol.top / this.canvasRender.zoom,
- );
- this.canvasRender.updateCanvas();
- store.dispatch('controllSpriteEvent', { target: sprite.fcontrol, type: 'moved' });
- }
- calculatePositionSprite(sprite, cr, position = 'tl', size = 30) {
- const realWidth = sprite.width / sprite.scale.x;
- const realHeight = sprite.height / sprite.scale.y;
- const crWidth = this.canvasRender.renderer.width / this.canvasRender.zoom;
- const crHeight = this.canvasRender.renderer.height / this.canvasRender.zoom;
- const scaleSize = this.conv(size, 30, 100) / 100;
- const scaleX = ((crWidth * .4) * scaleSize) / realWidth;
- const scaleY = ((crWidth * .4) * scaleSize) / realHeight;
- const scale = Math.min(scaleX, scaleY);
- let x = 0;
- let y = 0;
- const newWidth = (realWidth * scale) / this.canvasRender.zoom;
- const newHeight = (realHeight * scale) / this.canvasRender.zoom;
- const rightPosition = crWidth - newWidth * this.canvasRender.zoom;
- const bottomPosition = crHeight - newHeight * this.canvasRender.zoom;
- const centerLeftPosition = crWidth / 2 - (newWidth * this.canvasRender.zoom / 2);
- const centerTopPosition = crHeight / 2 - (newHeight * this.canvasRender.zoom / 2);
- switch (position) {
- // center top
- case 'ct': {
- x = centerLeftPosition;
- break;
- }
- // right top
- case 'rt': {
- x = rightPosition;
- break;
- }
- // center right
- case 'cr': {
- x = rightPosition;
- y = centerTopPosition;
- break;
- }
- // bottom right
- case 'br': {
- x = rightPosition;
- y = bottomPosition;
- break;
- }
- // bottom center
- case 'bc': {
- x = centerLeftPosition;
- y = bottomPosition;
- break;
- }
- // bottom left
- case 'bl': {
- y = bottomPosition;
- break;
- }
- // left center
- case 'lc': {
- y = centerTopPosition;
- break;
- }
- // center center
- case 'cc': {
- x = centerLeftPosition;
- y = centerTopPosition;
- break;
- }
- }
- sprite.scale.set(scale, scale);
- sprite.setXY(x, y);
- sprite.fcontrol.set({
- width: sprite.width * this.canvasRender.zoom,
- height: sprite.height * this.canvasRender.zoom,
- scaleX: 1, scaleY: 1,
- left: x * this.canvasRender.zoom,
- top: y * this.canvasRender.zoom
- });
- this.canvasRender.control_canvas.renderAll();
- return { fcontrol: sprite.fcontrol, sprite };
- }
- async onw(sprite) {
- //if(sprite.baseTexture) { sprite = new PIXI.Sprite(sprite); }
- const base64 = this.canvasRender.renderer.plugins.extract.base64(sprite);
- const blob = await fetch(base64).then(res => res.blob());
- window.open(URL.createObjectURL(blob));
- }
- stackPackage(data = {}) {
- return { _tick: 1, isGroup: false, ...data };
- }
- set zoom(val) {
- return store.state.editor.zoom = val;
- }
- stringCssToObject(str) {
- return str.split(';').reduce((res, item) => {
- if (item) {
- const [key, val] = item.split(':');
- res = { ...res, [key.trim()]: val.trim() };
- }
- return res;
- }, {})
- }
- getSpriteParams(sprite) {
- return {};
- }
- blobToFile(blob, fileName) {
- const file = new File([blob], fileName, { lastModified: Date.now(), type: blob.type });
- return file;
- }
- calculateScale(w, h, toW, toH) {
- return Math.min(toW / w, toH / h);
- }
- findNearIndex(val, arr) {
- return arr.reduce((res, item, index) => {
- const value = val - item;
- const abs = Math.abs(value);
- if (res === false || res.abs > abs) return { index, abs, value };
- return res;
- }, false);
- }
- toggleFullscreen() {
- if (document.fullscreenElement ||
- document.webkitFullscreenElement ||
- document.mozFullScreenElement ||
- document.msFullscreenElement
- ) {
- if (document.exitFullscreen) {
- document.exitFullscreen();
- } else if (document.mozCancelFullScreen) {
- document.mozCancelFullScreen();
- } else if (document.webkitExitFullscreen) {
- document.webkitExitFullscreen();
- } else if (document.msExitFullscreen) {
- document.msExitFullscreen();
- }
- } else {
- const element = document.querySelector('.workspace__vid-wrapper');
- if (element.requestFullscreen) {
- element.requestFullscreen();
- } else if (element.mozRequestFullScreen) {
- element.mozRequestFullScreen();
- } else if (element.webkitRequestFullscreen) {
- element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
- } else if (element.msRequestFullscreen) {
- element.msRequestFullscreen();
- }
- }
- }
- get canvasRender() {
- return store.state.editor.canvasRender;
- }
- async printScreen(cr, { open, download }) {
- const scaleX = cr.container.scale.x;
- const scaleY = cr.container.scale.y;
- cr.container.scale.set(1, 1)
- const base64 = cr.renderer.plugins.extract.base64(cr.container);
- cr.container.scale.set(scaleX, scaleY);
- const blob = await fetch(base64).then(res => res.blob());
- const filename = `Print_screen_${new Date().toISOString()}.png`;
- if (open) window.open(URL.createObjectURL(blob));
- if (download) this.donwloadFile(blob, filename);
- return new File([blob], filename, { lastModified: Date.now(), type: blob.type });
- }
- donwloadFile(blob, filename) {
- const a = document.createElement('a');
- a.href = URL.createObjectURL(blob);
- a.download = filename;
- a.click();
- URL.revokeObjectURL(a.href);
- }
- parseZero(num) { return num < 10 ? `0${num}` : num }
- parseTime(sec, isString = false, isMC = false) {
- let ms = parseInt(60 * (sec - parseInt(sec)));
- let suffix = isMC ? `.${this.parseZero(ms || 0)}` : ``;
- if (sec / 60 > 1) {
- const newSec = Math.floor(sec % 60);
- const min = Math.floor(sec / 60);
- if (isString) return `${min}m${this.parseZero(newSec)}s`
- return `${this.parseZero(min)}:${this.parseZero(newSec)}${suffix}`;
- } else {
- const newSec = Math.floor(sec);
- if (isString) return `${(Number(sec) || 0).toFixed(2)}s`
- return `00:${this.parseZero(newSec)}${suffix}`;
- }
- }
- getTimeRemaining(endtime) {
- const total = endtime - Date.now();
- const seconds = Math.floor((total / 1000) % 60);
- const minutes = Math.floor((total / 1000 / 60) % 60);
- const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
- const days = Math.floor(total / (1000 * 60 * 60 * 24));
- return { total, days, hours, minutes, seconds };
- }
- async openBase64(b64) {
- window.open(URL.createObjectURL(await fetch(b64).then(res => res.blob())));
- }
- openSprite(sprite, isBase = false) {
- if(isBase) sprite = new PIXI.Sprite(new PIXI.Texture(sprite));
- return this.openBase64(cr.renderer.plugins.extract.base64(sprite));
- }
- async addBackgroundImage(payload = {}, add = false) {
- const file = await fileCreator.getProcessedFile(`data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAB5JREFUOE9j/P///38GCgDjqAEMo2HAMBoGDMMiDAAlHz/RG+BMbgAAAABJRU5ErkJggg==`, {});
- if(add) return await store.dispatch('addTimeline', { ...file, isBackground: true, payload });
- return file;
- }
- changeZoom(value, type = false) {
- if (!type) {
- store.state.editor.zoom = value;
- } else {
- const min = this.zoomList[this.zoomList.length - 1];
- const max = this.zoomList[0];
- if (type == 'minus' || type == 'plus') {
- const near = this.findNearIndex(this.zoom, this.zoomList);
- const nearValue = this.zoomList[near.index];
- if (type == 'minus' && this.zoom != min) {
- if (nearValue == min && near.value === 0) return;
- if (near.value > 0) return this.zoom = this.zoomList[near.index];
- return this.zoom = this.zoomList[near.index + 1];
- } else if (type == 'plus' && this.zoom != max) {
- if (nearValue == max && near.value === 0) return;
- if (near.value < 0) return this.zoom = this.zoomList[near.index];
- return this.zoom = this.zoomList[near.index - 1];
- }
- } else if (type == 'fit' || type == 'fill') {
- const { width, height } = store.state.workspaceSize;
- const zoom = store.state.editor.canvasRender.calculateFitScreen(width, height);
- this.zoom = zoom * 100;
- }
- // TODO:
- }
- }
- memorySizeOf(obj) {
- let bytes = 0;
- function sizeOf(obj) {
- if (obj !== null && obj !== undefined) {
- switch (typeof obj) {
- case 'number':
- bytes += 8;
- break;
- case 'string':
- bytes += obj.length * 2;
- break;
- case 'boolean':
- bytes += 4;
- break;
- case 'object':
- let objClass = Object.prototype.toString.call(obj).slice(8, -1);
- if (objClass === 'Object' || objClass === 'Array') {
- for (let key in obj) {
- if (!obj.hasOwnProperty(key)) continue;
- sizeOf(obj[key]);
- }
- } else bytes += obj.toString().length * 2;
- break;
- }
- }
- return bytes;
- };
- function formatByteSize(bytes) {
- if (bytes < 1024) return bytes + " bytes";
- else if (bytes < 1048576) return (bytes / 1024).toFixed(3) + " KiB";
- else if (bytes < 1073741824) return (bytes / 1048576).toFixed(3) + " MiB";
- else return (bytes / 1073741824).toFixed(3) + " GiB";
- };
- return formatByteSize(sizeOf(obj));
- }
- async generateImageThumb(blob, width = 250, height = 250) {
- const canvas = document.createElement('canvas');
- canvas.style = 'left: -3000px; top: -3000px; position: absolute;';
- const img = new Image();
- img.src = URL.createObjectURL(blob);
- await new Promise(resolve => img.onload = resolve);
- const scale = this.calculateScale(img.naturalWidth, img.naturalHeight, width, height);
- canvas.width = scale * img.naturalWidth;
- canvas.height = scale * img.naturalHeight;
- const ctx = canvas.getContext('2d');
- ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
- const base64 = canvas.toDataURL();
- URL.revokeObjectURL(img.src);
- return fetch(base64).then(res => res.blob());
- }
- uuidv4() {
- return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
- const r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
- return v.toString(16);
- });
- }
- }
Add Comment
Please, Sign In to add comment