canvas-editor-engine 2.3.17 → 2.3.18

package/dist/config.js

@@ -0,0 +1,95 @@
+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 ConfigFabric = /** @class */ (function () {
+    function ConfigFabric() {
+    }
+    return ConfigFabric;
+}());
+export { ConfigFabric };
+var AppConfig = /** @class */ (function (_super) {
+    __extends(AppConfig, _super);
+    function AppConfig() {
+        var _this = _super.call(this) || this;
+        _this.canvas = null;
+        _this._CANVAS_SIZE = {
+            width: 300,
+            height: 150,
+        };
+        _this._LAYERS = [
+            {
+                name: 'low',
+                index: 1,
+            },
+            {
+                name: 'normal',
+                index: 2,
+            },
+            {
+                name: 'high',
+                index: 3,
+            }
+        ];
+        _this._ZOOM = 1;
+        return _this;
+    }
+    AppConfig.prototype.bindCanvas = function (canvasElement) {
+        this.canvas = canvasElement.querySelector('canvas');
+    };
+    Object.defineProperty(AppConfig.prototype, "CANVAS_SIZE", {
+        get: function () {
+            return this._CANVAS_SIZE;
+        },
+        set: function (value) {
+            if (!!value && !!(value === null || value === void 0 ? void 0 : value.width) && !!(value === null || value === void 0 ? void 0 : value.height)) {
+                this._CANVAS_SIZE = value;
+                if (!!this.canvas) {
+                    this.canvas.width = value.width;
+                    this.canvas.height = value.height;
+                }
+            }
+            else {
+                console.warn('CANVAS_SIZE denied');
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(AppConfig.prototype, "LAYERS", {
+        get: function () {
+            return this._LAYERS;
+        },
+        set: function (value) {
+            if (!!value && !!(value === null || value === void 0 ? void 0 : value.length)) {
+                this._LAYERS = value;
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(AppConfig.prototype, "ZOOM", {
+        get: function () {
+            return this._ZOOM;
+        },
+        set: function (value) {
+            this._ZOOM = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return AppConfig;
+}(ConfigFabric));
+export default AppConfig;

package/dist/filters/collection/vague.js

@@ -0,0 +1,168 @@
+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 __());
+    };
+})();
+import { Filter } from "../../utils/filter";
+import { Convert } from "../../utils/convert";
+import { range } from '../../utils/generation';
+var VagueFilter = /** @class */ (function (_super) {
+    __extends(VagueFilter, _super);
+    function VagueFilter(appConfig, ctx, options) {
+        var _this = _super.call(this, appConfig, ctx) || this;
+        _this.filterList = ['pixel'];
+        _this.options = options;
+        return _this;
+    }
+    VagueFilter.prototype.on = function (action, filterOptions) {
+        var _this = this;
+        return new Promise(function (resolve) {
+            var options = _this.options;
+            var imageData = _this.copy(options);
+            // TODO: rewrite on pattern Strategies
+            var rowImageData = _this[action](imageData, filterOptions);
+            _this.update(rowImageData, options);
+            return resolve({
+                imageData: rowImageData,
+                position: {
+                    x: options.x,
+                    y: options.y,
+                },
+                size: {
+                    width: rowImageData.width,
+                    height: rowImageData.height,
+                },
+                quality: filterOptions.quality,
+            });
+        });
+    };
+    VagueFilter.prototype.pixel = function (imageData, filterOptions) {
+        var quality = filterOptions.quality;
+        // expansion strategy
+        var processedImageData = this.getQualityProcessedRemainder(imageData, +quality);
+        // TODO: add compression strategy and use register strategies;
+        var imageSize = {
+            width: processedImageData.width,
+            height: processedImageData.height,
+        };
+        this.setImageSize(imageSize);
+        var _a = this.getBuffCollection(processedImageData), rowRGBABuff = _a.rowRGBABuff, buff = _a.buff;
+        var _b = this.getQualityBuff(buff, +quality), qualityBuff = _b.qualityBuff, rangeCommit = _b.rangeCommit;
+        var qualityBuffWithMostCommonElement = this.getMostCommonQuanlityBuff(qualityBuff, rangeCommit);
+        var rowQualityBuffWithMostCommonElement = qualityBuffWithMostCommonElement.flat();
+        if (rowRGBABuff.length >= rowQualityBuffWithMostCommonElement.length) {
+            var occurrenceRGBAbuff = rowQualityBuffWithMostCommonElement.map(function (hexColor, index) {
+                var _a = Convert.hexToRgb(hexColor), r = _a.r, g = _a.g, b = _a.b;
+                var a = rowRGBABuff[index][3];
+                return [r, g, b, a];
+            });
+            var rowBuff = occurrenceRGBAbuff.flat();
+            rowBuff.forEach(function (color, index) {
+                processedImageData.data[index] = color;
+            });
+        }
+        return processedImageData;
+    };
+    VagueFilter.prototype.getQualityProcessedRemainder = function (imageData, quality) {
+        var rowRGBABuff = this.getRowRGBABuff(imageData);
+        var RGBAMatrix = this.getRGBAMatrix(rowRGBABuff, { width: imageData.width, height: imageData.height });
+        var cqx = quality - (imageData.width % quality);
+        var cqy = quality - (imageData.height % quality);
+        var xCommit = range(0, cqx);
+        var yCommit = range(0, cqy);
+        var tempSize = {
+            width: imageData.width + cqx,
+            height: imageData.height + cqy,
+        };
+        var xLastIndex = RGBAMatrix[0].length - 1;
+        RGBAMatrix.forEach(function (row, y) {
+            var xLastRGBAByte = row[xLastIndex];
+            xCommit.forEach(function () { return RGBAMatrix[y].push(xLastRGBAByte); });
+        });
+        var yLastIndex = RGBAMatrix.length - 1;
+        var yLastRGBARow = RGBAMatrix[yLastIndex];
+        yCommit.forEach(function () { return RGBAMatrix.push(yLastRGBARow); });
+        var buffWithRemainder = RGBAMatrix.flat(2);
+        var tempCanvas = document.createElement('canvas');
+        var tempCtx = tempCanvas.getContext('2d');
+        var tempImageData = tempCtx.createImageData(tempSize.width, tempSize.height);
+        buffWithRemainder.forEach(function (_, i) { return tempImageData.data[i] = buffWithRemainder[i]; });
+        return tempImageData;
+    };
+    VagueFilter.prototype.getQualityBuff = function (buff, quality) {
+        var wq = Math.floor(this.imageSize.width / quality);
+        var hq = Math.floor(this.imageSize.height / quality);
+        var qualityBuff = [];
+        var rangeCommit = [];
+        var i = 0;
+        var xStart = 0;
+        var xEnd = quality;
+        var yStart = 0;
+        var yEnd = quality;
+        range(0, hq).forEach(function (hqi) {
+            range(0, wq).forEach(function (wqi) {
+                var _a, _b;
+                var dy = range(yStart, yEnd);
+                var dx = range(xStart, xEnd);
+                var items = [];
+                var coords = [];
+                dy.forEach(function (y) {
+                    dx.forEach(function (x) {
+                        items.push(buff[y][x]);
+                        coords.push({ y: y, x: x });
+                    });
+                });
+                xStart += quality;
+                xEnd += quality;
+                (_a = rangeCommit[i]) !== null && _a !== void 0 ? _a : (rangeCommit[i] = coords);
+                (_b = qualityBuff[i]) !== null && _b !== void 0 ? _b : (qualityBuff[i] = items);
+                i++;
+            });
+            xStart = 0;
+            xEnd = quality;
+            yStart += quality;
+            yEnd += quality;
+        });
+        return { qualityBuff: qualityBuff, rangeCommit: rangeCommit };
+    };
+    VagueFilter.prototype.getMostCommonQuanlityBuff = function (qualityBuff, rangeCommit) {
+        var _this = this;
+        var mostCommonQuanlityBuff = [];
+        var qualityBuffWithMostCommonElement = qualityBuff.map(function (newPixel) {
+            var color = _this.getMostCommonElement(newPixel);
+            return newPixel.map(function () { return color; });
+        });
+        qualityBuffWithMostCommonElement.forEach(function (qPixel, pixelIndex) {
+            qPixel.forEach(function (pixelColor, pixelColorIndex) {
+                var _a, _b;
+                var _c;
+                var _d = rangeCommit[pixelIndex][pixelColorIndex], x = _d.x, y = _d.y;
+                (_a = mostCommonQuanlityBuff[y]) !== null && _a !== void 0 ? _a : (mostCommonQuanlityBuff[y] = []);
+                (_b = (_c = mostCommonQuanlityBuff[y])[x]) !== null && _b !== void 0 ? _b : (_c[x] = pixelColor);
+            });
+        });
+        return mostCommonQuanlityBuff;
+    };
+    VagueFilter.prototype.getMostCommonElement = function (array) {
+        function mostCommon(a, b) {
+            var diffA = array.filter(function (v) { return v === a; }).length;
+            var diffB = array.filter(function (v) { return v === b; }).length;
+            return diffA - diffB;
+        }
+        var arraySorted = array.sort(mostCommon);
+        var mostCommonElement = arraySorted[arraySorted.length - 1];
+        return mostCommonElement;
+    };
+    return VagueFilter;
+}(Filter));
+export default VagueFilter;

package/dist/filters/index.js

@@ -0,0 +1,2 @@
+import VagueFilter from './collection/vague';
+export { VagueFilter, };

package/dist/index.d.ts

@@ -15,6 +15,7 @@ import EventService from "./services/event.service";
 import ThroughHistoryService from "./services/through-history.service";
 import ProjectsService from "./services/projects.service";
 import PullProjectService from "./services/pull-project.service";
+import DrawAccumulatorService from './services/draw-accumulator.service';
 import AppStore from "./store/store";
 import AppStoreRepository from "./store/storeRepository";
 declare class CanvasEditorEngine {
@@ -30,4 +31,4 @@ declare class StaticCanvasEditorEngine extends CanvasEditorEngine {
 declare class VueCanvasEditorEngine extends CanvasEditorEngine {
     constructor();
 }
-export { AppConfig, PipetteComponent, CanvasComponent, ExcretionComponent, SlotComponent, LoadingComponent, ToolService, DrawService, LoggerService, CropService, DownloadService, ToolLayerService, EventService, ThroughHistoryService, ProjectsService, PullProjectService, StaticCanvasEditorEngine, VueCanvasEditorEngine, AppStore, AppStoreRepository, };
+export { AppConfig, PipetteComponent, CanvasComponent, ExcretionComponent, SlotComponent, LoadingComponent, ToolService, DrawService, LoggerService, CropService, DownloadService, ToolLayerService, EventService, ThroughHistoryService, ProjectsService, PullProjectService, DrawAccumulatorService, StaticCanvasEditorEngine, VueCanvasEditorEngine, AppStore, AppStoreRepository, };

package/dist/index.js

@@ -0,0 +1,75 @@
+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 __());
+    };
+})();
+import { reflect } from "./utils/reflect";
+reflect();
+import AppConfig from "./config";
+import WebComponent from "./web-component";
+import CanvasComponent from "./components/canvas.component";
+import PipetteComponent from "./components/pipette.component";
+import ExcretionComponent from "./components/excretions.component";
+import SlotComponent from "./components/slot.component";
+import LoadingComponent from "./components/loading.component";
+import DrawService from "./services/draw.service";
+import ToolService from "./services/tool.service";
+import LoggerService from "./services/logger.service";
+import CropService from "./services/crop.service";
+import DownloadService from "./services/download.service";
+import ToolLayerService from "./services/tool-layers.service";
+import EventService from "./services/event.service";
+import ThroughHistoryService from "./services/through-history.service";
+import ProjectsService from "./services/projects.service";
+import PullProjectService from "./services/pull-project.service";
+import DrawAccumulatorService from './services/draw-accumulator.service';
+import AppStore from "./store/store";
+import AppStoreRepository from "./store/storeRepository";
+var CanvasEditorEngine = /** @class */ (function () {
+    function CanvasEditorEngine() {
+    }
+    CanvasEditorEngine.prototype.getInitial = function () {
+        return { component: WebComponent };
+    };
+    return CanvasEditorEngine;
+}());
+var StaticCanvasEditorEngine = /** @class */ (function (_super) {
+    __extends(StaticCanvasEditorEngine, _super);
+    function StaticCanvasEditorEngine() {
+        return _super.call(this) || this;
+    }
+    StaticCanvasEditorEngine.prototype.init = function () {
+        var customElementRegistry = window.customElements;
+        var component = this.getInitial().component;
+        customElementRegistry.define('canvas-editor-engine', component);
+    };
+    return StaticCanvasEditorEngine;
+}(CanvasEditorEngine));
+var VueCanvasEditorEngine = /** @class */ (function (_super) {
+    __extends(VueCanvasEditorEngine, _super);
+    function VueCanvasEditorEngine() {
+        return _super.call(this) || this;
+    }
+    return VueCanvasEditorEngine;
+}(CanvasEditorEngine));
+export { 
+// config
+AppConfig, 
+// components
+PipetteComponent, CanvasComponent, ExcretionComponent, SlotComponent, LoadingComponent, 
+// services
+ToolService, DrawService, LoggerService, CropService, DownloadService, ToolLayerService, EventService, ThroughHistoryService, ProjectsService, PullProjectService, DrawAccumulatorService, 
+// general
+StaticCanvasEditorEngine, VueCanvasEditorEngine, 
+// store
+AppStore, AppStoreRepository, };

package/dist/services/component.service.js

@@ -0,0 +1,40 @@
+import { reflect } from "../utils/reflect";
+reflect();
+var ComponentService = /** @class */ (function () {
+    function ComponentService() {
+    }
+    ComponentService.prototype.getTemplate = function (template, wrapOptions) {
+        var options = {
+            tag: 'div',
+        };
+        if (!!wrapOptions) {
+            Object.keys(wrapOptions).forEach(function (key) {
+                if (!!wrapOptions[key]) {
+                    options[key] = wrapOptions[key];
+                }
+            });
+        }
+        var wrap = document.createElement(options.tag);
+        if (!!options) {
+            Object.keys(options).forEach(function (key) {
+                if (!!options[key] && key !== 'tag') {
+                    wrap[key] = options[key];
+                }
+            });
+        }
+        if (!!template) {
+            wrap.innerHTML = template;
+        }
+        return wrap;
+    };
+    ComponentService.prototype.getStyle = function (css) {
+        if (!!css === false)
+            return null;
+        var style = document.createElement('style');
+        style.type = 'text/css';
+        style.appendChild(document.createTextNode(css));
+        return style;
+    };
+    return ComponentService;
+}());
+export default ComponentService;

package/dist/services/crop.service.js

@@ -0,0 +1,60 @@
+import { Filter } from "../utils/filter";
+var CropService = /** @class */ (function () {
+    function CropService(appConfig, appStoreRepository, excretionComponent) {
+        this.appConfig = appConfig;
+        this.appStoreRepository = appStoreRepository;
+        this.excretionComponent = excretionComponent;
+    }
+    CropService.prototype.activate = function () {
+        this.excretionComponent.additionStyle = 'crop';
+    };
+    CropService.prototype.deactivate = function () {
+        this.excretionComponent.additionStyle = 'default';
+    };
+    CropService.prototype.crop = function (ctx) {
+        var _a;
+        if (!!((_a = this.excretionComponent.excretionsCoords) === null || _a === void 0 ? void 0 : _a.length) === false)
+            return;
+        var filter = new Filter(this.appConfig, ctx);
+        var options = this.options;
+        var _b = filter.copyExtendedModel(options), imageData = _b.imageData, size = _b.size;
+        var position = {
+            x: (this.appConfig.CANVAS_SIZE.width / 2) - (size.width / 2),
+            y: (this.appConfig.CANVAS_SIZE.height / 2) - (size.height / 2),
+        };
+        filter.update(imageData, position);
+        this.appStoreRepository.store.imageState.reduce({
+            tempImageData: imageData,
+            position: position,
+            size: {
+                width: size.width,
+                height: size.height,
+            }
+        }, "Use crop");
+    };
+    // TODO: refactor
+    CropService.prototype.viewCropButton = function () {
+        var cropButtons = this.excretionComponent.excretionWrap.querySelectorAll('.crop-button');
+        var lastCropButtonIndex = cropButtons.length - 1;
+        var cropButton = cropButtons[lastCropButtonIndex];
+        cropButton.classList.add('crop-button--view');
+    };
+    Object.defineProperty(CropService.prototype, "options", {
+        get: function () {
+            var excretionLastIndex = this.excretionComponent.excretionsCoords.length - 1;
+            var coords = this.excretionComponent.excretionsCoords[excretionLastIndex];
+            var excWidth = Math.abs(coords.start.x - coords.end.x);
+            var excHeight = Math.abs(coords.start.y - coords.end.y);
+            return {
+                x: coords.start.x,
+                y: coords.start.y,
+                width: excWidth,
+                height: excHeight,
+            };
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return CropService;
+}());
+export default CropService;

package/dist/services/download.service.js

@@ -0,0 +1,16 @@
+var DownloadService = /** @class */ (function () {
+    function DownloadService(canvasComponent) {
+        this.canvasComponent = canvasComponent;
+    }
+    DownloadService.prototype.getDataUrl = function () {
+        return this.canvasComponent.canvas.toDataURL();
+    };
+    DownloadService.prototype.download = function (filename) {
+        var link = document.createElement('a');
+        link.download = "".concat(filename || 'image', ".png");
+        link.href = this.getDataUrl();
+        link.click();
+    };
+    return DownloadService;
+}());
+export default DownloadService;

package/dist/services/draw-accumulator.service.d.ts

@@ -0,0 +1,25 @@
+import AppConfig from "../config";
+import AppStoreRepository from "../store/storeRepository";
+import { ILayer } from "../types/draw-layers";
+import { IPainter, ISmoothFilterOptions, TDrawType } from "../types/draw-service";
+import { ITempCanvasOptions } from "../types/temp-canvas";
+import DrawLayersService from "./draw-leayers.service";
+import DrawService from "./draw.service";
+import EventService from "./event.service";
+export default class DrawAccumulatorService {
+    private appConfig;
+    private appStoreRepository;
+    private eventService;
+    private drawLayersService;
+    painters: IPainter[];
+    constructor(appConfig: AppConfig, appStoreRepository: AppStoreRepository, eventService: EventService, drawLayersService: DrawLayersService);
+    add<DrawType extends TDrawType>(layerId: ILayer['id'], drawType: DrawType, options: DrawService['options'][DrawType], initialSize: ITempCanvasOptions): Promise<void>;
+    removePainter(id: string): Promise<void>;
+    smoothFilter(painterId: IPainter['id'], smoothFilterOptions: ISmoothFilterOptions): Promise<void>;
+    private update;
+    private get gradient();
+    private clearCanvas;
+    private invokePaintersOnLayers;
+    private invokePainter;
+    private invokePainterWithTempCtx;
+}