canvas-editor-engine 2.3.17 → 2.3.19

package/dist/store/store.js

@@ -0,0 +1,41 @@
+import { DrawLayersState } from "./draw-layers.state";
+import { HistoryState } from "./history.state";
+import { ImageState } from "./image.state";
+var Store = /** @class */ (function () {
+    function Store(imageState, historyState, drawLayersState) {
+        this.imageState = imageState;
+        this.historyState = historyState;
+        this.drawLayersState = drawLayersState;
+    }
+    ;
+    Store.prototype.reset = function () {
+        this.imageState.reset();
+        this.historyState.reset();
+        this.drawLayersState.reset();
+    };
+    return Store;
+}());
+export { Store };
+var AppStore = /** @class */ (function () {
+    function AppStore(throughHistoryService, appStoreRepository) {
+        this.throughHistoryService = throughHistoryService;
+        this.appStoreRepository = appStoreRepository;
+        this.appStoreRepository.store = new Store(new ImageState(this.appStoreRepository), new HistoryState(this.throughHistoryService), new DrawLayersState(this.appStoreRepository));
+    }
+    AppStore.prototype.subscribe = function (to, completeIt) {
+        if (to === 'history') {
+            this.appStoreRepository.store.historyState.emerge(completeIt);
+        }
+        else if (to === 'layers') {
+            this.appStoreRepository.store.drawLayersState.emerge(completeIt);
+        }
+    };
+    AppStore.prototype.getHistoryLines = function () {
+        return this.appStoreRepository.store.historyState.historyLines;
+    };
+    AppStore.prototype.getLayers = function () {
+        return this.appStoreRepository.store.drawLayersState.layers;
+    };
+    return AppStore;
+}());
+export default AppStore;

package/dist/store/storeRepository.js

@@ -0,0 +1,6 @@
+var AppStoreRepository = /** @class */ (function () {
+    function AppStoreRepository() {
+    }
+    return AppStoreRepository;
+}());
+export default AppStoreRepository;

package/dist/types/canvas.js

@@ -0,0 +1,2 @@
+;
+export {};

package/dist/types/cursor.js

@@ -0,0 +1,2 @@
+;
+export {};

package/dist/types/draw-layers.js

@@ -0,0 +1,3 @@
+;
+;
+export {};

package/dist/types/draw-service.js

@@ -0,0 +1,2 @@
+;
+export {};

package/dist/types/excretion.js

@@ -0,0 +1,4 @@
+;
+;
+;
+export {};

package/dist/types/general.js

@@ -0,0 +1,5 @@
+import { reflect } from "../utils/reflect";
+reflect();
+;
+;
+;

package/dist/types/history.js

@@ -0,0 +1 @@
+export {};

package/dist/types/image.js

@@ -0,0 +1,9 @@
+;
+;
+;
+;
+;
+;
+;
+;
+export {};

package/dist/types/log.js

@@ -0,0 +1,4 @@
+;
+;
+;
+export {};

package/dist/types/pipette.js

@@ -0,0 +1 @@
+export {};

package/dist/types/project.js

@@ -0,0 +1,14 @@
+var Project = /** @class */ (function () {
+    function Project() {
+        this.id = null;
+        this.name = null;
+        this.description = null;
+        this.state = null;
+        this.createdAt = new Date(Date.now()).toString();
+        this.updatedAt = new Date(Date.now()).toString();
+    }
+    return Project;
+}());
+export { Project };
+;
+;

package/dist/types/temp-canvas.js

@@ -0,0 +1,2 @@
+;
+export {};

package/dist/utils/convert.js

@@ -0,0 +1,27 @@
+var Convert = /** @class */ (function () {
+    function Convert() {
+    }
+    Convert.byteRGBToHEX = function (color) {
+        var red = color[0];
+        var green = color[1];
+        var blue = color[2];
+        return Convert.rgbToHex(red, green, blue);
+    };
+    Convert.rgbToHex = function (r, g, b) {
+        return "#".concat(Convert.componentToHEX(r)).concat(Convert.componentToHEX(g)).concat(Convert.componentToHEX(b));
+    };
+    Convert.hexToRgb = function (hex) {
+        var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        return result ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16)
+        } : null;
+    };
+    Convert.componentToHEX = function (colorComponent) {
+        var hex = colorComponent.toString(16);
+        return hex.length == 1 ? "0" + hex : hex;
+    };
+    return Convert;
+}());
+export { Convert };

package/dist/utils/filter.js

@@ -0,0 +1,153 @@
+import { Convert } from "./convert";
+import { range } from './generation';
+var Filter = /** @class */ (function () {
+    function Filter(appConfig, ctx) {
+        this.appConfig = appConfig;
+        this.ctx = ctx;
+    }
+    Filter.prototype.setImageSize = function (size) {
+        this.imageSize = size;
+    };
+    Filter.prototype.copy = function (options) {
+        var width = (options === null || options === void 0 ? void 0 : options.width) ? options.width : this.appConfig.CANVAS_SIZE.width;
+        var height = (options === null || options === void 0 ? void 0 : options.height) ? options.height : this.appConfig.CANVAS_SIZE.height;
+        var imgData = this.ctx.getImageData(options.x, options.y, width, height);
+        return imgData;
+    };
+    Filter.prototype.copyExtendedModel = function (options) {
+        var width = (options === null || options === void 0 ? void 0 : options.width) ? options.width : this.appConfig.CANVAS_SIZE.width;
+        var height = (options === null || options === void 0 ? void 0 : options.height) ? options.height : this.appConfig.CANVAS_SIZE.height;
+        var imgData = this.ctx.getImageData(options.x, options.y, width, height);
+        var extendedImageData = this.clearEmptyPixels(imgData);
+        return extendedImageData;
+    };
+    Filter.prototype.update = function (imgData, options) {
+        this.ctx.clearRect(0, 0, this.appConfig.CANVAS_SIZE.width, this.appConfig.CANVAS_SIZE.height);
+        this.ctx.putImageData(imgData, options.x, options.y);
+    };
+    Filter.prototype.clearEmptyPixels = function (imageData) {
+        var rowRGBABuff = this.getRowRGBABuff(imageData);
+        var RGBAMatrix = this.getRGBAMatrix(rowRGBABuff, { width: imageData.width, height: imageData.height });
+        var beforeSize = {
+            width: imageData.width,
+            height: imageData.height,
+        };
+        var tempSize = this.getSizeOfSparseMatrix(RGBAMatrix, beforeSize);
+        var cleared = rowRGBABuff.filter(function (byteArray) {
+            var alpha = byteArray[3 /* E_RGBA.a */];
+            return !!alpha;
+        });
+        var clearedBuff = cleared.flat();
+        var tempCanvas = document.createElement('canvas');
+        var tempCtx = tempCanvas.getContext('2d');
+        var tempImageData = tempCtx.createImageData(tempSize.width, tempSize.height);
+        clearedBuff.forEach(function (_, i) { return tempImageData.data[i] = clearedBuff[i]; });
+        return {
+            imageData: tempImageData,
+            size: tempSize
+        };
+    };
+    Filter.prototype.getSizeOfSparseMatrix = function (RGBAMatrix, tempSize) {
+        // case 1: Xcanvas -> Ximage && Ycanvas -> Yimage
+        var leftIndex;
+        var upIndex;
+        for (var iy = 0; iy < RGBAMatrix.length; iy++) {
+            var row = RGBAMatrix[iy];
+            for (var ix = 0; ix < row.length; ix++) {
+                var rowItem = row[ix];
+                var isNotEmpty = rowItem[3 /* E_RGBA.a */] !== 0;
+                if (isNotEmpty) {
+                    leftIndex = ix;
+                    upIndex = iy;
+                    break;
+                }
+            }
+            if (leftIndex !== undefined && upIndex !== undefined) {
+                break;
+            }
+        }
+        // case 2 reverse matrix: Ximage <- Xcanvas && Yimage <- Ycanvas
+        var rightIndex;
+        var downIndex;
+        for (var iy = RGBAMatrix.length - 1; iy >= 0; iy--) {
+            var row = RGBAMatrix[iy];
+            for (var ix = row.length - 1; ix >= 0; ix--) {
+                var rowItem = row[ix];
+                var isNotEmpty = rowItem[3 /* E_RGBA.a */] !== 0;
+                if (isNotEmpty) {
+                    rightIndex = row.length - 1 - ix;
+                    downIndex = RGBAMatrix.length - 1 - iy;
+                    break;
+                }
+            }
+            if (rightIndex !== undefined && downIndex !== undefined) {
+                break;
+            }
+        }
+        var reduceWidth = function (tempWidth) { return tempWidth - (leftIndex + rightIndex); };
+        var reduceHeight = function (tempHeight) { return tempHeight - (upIndex + downIndex); };
+        var resultSize = {
+            width: reduceWidth(tempSize.width),
+            height: reduceHeight(tempSize.height),
+        };
+        return resultSize;
+    };
+    Filter.prototype.getBuffCollection = function (imageData) {
+        var rowRGBABuff = this.getRowRGBABuff(imageData);
+        var hexBuff = rowRGBABuff.map(Convert.byteRGBToHEX);
+        var buff = this.getBuff(hexBuff);
+        return { rowRGBABuff: rowRGBABuff, hexBuff: hexBuff, buff: buff };
+    };
+    Filter.prototype.getBuff = function (hexBuff) {
+        var _this = this;
+        var distanceRow = range(0, this.imageSize.height).map(function (i) { return _this.imageSize.width * i; });
+        var buff = [];
+        var indexOfDistance = 0;
+        hexBuff.forEach(function (pxColor, pxIndex) {
+            var _a;
+            if (pxIndex >= distanceRow[indexOfDistance + 1]) {
+                indexOfDistance++;
+            }
+            (_a = buff[indexOfDistance]) !== null && _a !== void 0 ? _a : (buff[indexOfDistance] = []);
+            buff[indexOfDistance].push(pxColor);
+        });
+        return buff;
+    };
+    Filter.prototype.getRGBAMatrix = function (rowRGBABuff, size) {
+        var maybeSize = {
+            width: size.width || this.imageSize.width,
+            height: size.height || this.imageSize.height,
+        };
+        var distanceRow = range(0, maybeSize.height).map(function (i) { return maybeSize.width * i; });
+        var buff = [];
+        var indexOfDistance = 0;
+        rowRGBABuff.forEach(function (pxRGBA, pxIndex) {
+            var _a;
+            if (pxIndex >= distanceRow[indexOfDistance + 1]) {
+                indexOfDistance++;
+            }
+            (_a = buff[indexOfDistance]) !== null && _a !== void 0 ? _a : (buff[indexOfDistance] = []);
+            buff[indexOfDistance].push(pxRGBA);
+        });
+        return buff;
+    };
+    Filter.prototype.getRowRGBABuff = function (imageData) {
+        var rowRGBABuff = []; // [ [0, 0, 0, 0], [0, 0, 0, 0], ... ]
+        var colorIndx = 0;
+        var colorRGBAIndx = 0;
+        imageData.data.forEach(function (pxColor) {
+            var _a;
+            if (colorIndx >= 4) {
+                colorIndx = 0;
+                colorRGBAIndx++;
+            }
+            colorIndx++;
+            // @ts-ignore
+            (_a = rowRGBABuff[colorRGBAIndx]) !== null && _a !== void 0 ? _a : (rowRGBABuff[colorRGBAIndx] = []);
+            rowRGBABuff[colorRGBAIndx].push(pxColor);
+        });
+        return rowRGBABuff;
+    };
+    return Filter;
+}());
+export { Filter };

package/dist/utils/generation.js

@@ -0,0 +1,7 @@
+export var range = function (start, end) {
+    var result = [];
+    for (var i = start; i < end; i++) {
+        result.push(i);
+    }
+    return result;
+};

package/dist/utils/guid4.js

@@ -0,0 +1,122 @@
+var Guid4 = /** @class */ (function () {
+    function Guid4() {
+        this.stack = [];
+        // generateWithFactor not working
+        // this.generateWithFactor(this.attempt);
+    }
+    Guid4.prototype.generate = function () {
+        return this.Guid4;
+    };
+    Object.defineProperty(Guid4.prototype, "finite", {
+        get: function () {
+            var _a;
+            var guid4 = this.stack[(_a = this.stack) === null || _a === void 0 ? void 0 : _a.length];
+            if (!!guid4) {
+                return guid4;
+            }
+            else {
+                throw new Error("Guid4 not generate");
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ;
+    Guid4.prototype.generateWithFactor = function (attempt) {
+        var factor = this.getFactor(this.guid4);
+        attempt.use('withError').run(factor);
+    };
+    Guid4.prototype.getFactor = function (guid4) {
+        var _this = this;
+        return function (attempt) {
+            guid4 = _this.Guid4;
+            if (!_this.stack.includes(guid4)) {
+                attempt.current = attempt.max;
+                _this.stack.push(guid4);
+            }
+        };
+    };
+    Object.defineProperty(Guid4.prototype, "attempt", {
+        get: function () {
+            var attemptConfig = {
+                attempt: {
+                    current: 1,
+                    max: 5,
+                },
+                error: {
+                    message: '[Fatal Error] Guid4 module cannot generate unique guid4'
+                }
+            };
+            var attempt = new GenerateAttempt(attemptConfig.attempt, attemptConfig.error);
+            return attempt;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Guid4.prototype, "Guid4", {
+        get: function () {
+            var base = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx';
+            var regex = /[xy]/g;
+            var guid4 = base.replace(regex, this.formating);
+            return guid4;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Guid4.prototype.formating = function (char) {
+        var preformer = Math.random() * 16 | 0;
+        var formattedChar = (char == 'x') ? preformer : (preformer & 0x3 | 0x8);
+        return formattedChar.toString(16);
+    };
+    return Guid4;
+}());
+export { Guid4 };
+;
+var GenerateAttempt = /** @class */ (function () {
+    function GenerateAttempt(config, error) {
+        this._attempt = config;
+        if (!!error)
+            this._error = error;
+    }
+    GenerateAttempt.prototype.use = function (strategy) {
+        if (strategy === void 0) { strategy = 'default'; }
+        var context = this;
+        switch (strategy) {
+            case 'default':
+                return {
+                    run: function (action) {
+                        context.defaultRun(action);
+                    },
+                };
+            case 'withError':
+                return {
+                    run: function (action) {
+                        context.withErrorRun(action);
+                    },
+                };
+        }
+    };
+    GenerateAttempt.prototype.defaultRun = function (action) {
+        var attemptCondition = this._attempt.current <= this._attempt.max;
+        while (attemptCondition) {
+            action(this._attempt);
+            this._attempt.current++;
+        }
+    };
+    GenerateAttempt.prototype.withErrorRun = function (action) {
+        var attemptCondition = this._attempt.current <= this._attempt.max;
+        var errorCondition = this._attempt.current === this._attempt.max;
+        var errorMessage = this._error.message;
+        while (attemptCondition) {
+            this.throwError(errorCondition, errorMessage);
+            action(this._attempt);
+            this._attempt.current++;
+        }
+    };
+    GenerateAttempt.prototype.throwError = function (condition, message) {
+        if (condition) {
+            throw new Error(message);
+        }
+    };
+    return GenerateAttempt;
+}());

package/dist/utils/project-file-serializer.js

@@ -0,0 +1,77 @@
+var ProjectFileSerializer = /** @class */ (function () {
+    function ProjectFileSerializer(file) {
+        this.projects = [];
+        this.file = file;
+        this.projects = this.load();
+    }
+    ;
+    ProjectFileSerializer.prototype.load = function () {
+        var rowProjects = JSON.parse(this.file);
+        var imageDataProcessor = function (temp) {
+            var data;
+            var size;
+            if (temp === null || temp === void 0 ? void 0 : temp.current) {
+                data = Object.values(temp === null || temp === void 0 ? void 0 : temp.current.imageData.data);
+                size = temp === null || temp === void 0 ? void 0 : temp.current.size;
+            }
+            else if (temp === null || temp === void 0 ? void 0 : temp.state) {
+                data = Object.values(temp === null || temp === void 0 ? void 0 : temp.state.tempImageData.data);
+                size = temp === null || temp === void 0 ? void 0 : temp.state.size;
+            }
+            var tempImageData = new ImageData(size.width, size.height);
+            data.forEach(function (colorAtom, index) {
+                tempImageData.data[index] = colorAtom;
+            });
+            return tempImageData;
+        };
+        var projects = rowProjects.map(function (project) {
+            project.state.current.imageData = imageDataProcessor({ current: project.state.current });
+            project.state.history = project.state.history.map(function (historyLine) {
+                historyLine.stateValue.tempImageData = imageDataProcessor({ state: historyLine.stateValue });
+                return historyLine;
+            });
+            project.state.cache = project.state.cache.map(function (historyLine) {
+                historyLine.stateValue.tempImageData = imageDataProcessor({ state: historyLine.stateValue });
+                return historyLine;
+            });
+            return project;
+        });
+        return projects;
+    };
+    ProjectFileSerializer.prototype.saveProjects = function (projects) {
+        // TODO: not sure if this works
+        this.file.save(JSON.stringify(projects));
+    };
+    ProjectFileSerializer.prototype.getProjects = function () {
+        return this.projects;
+    };
+    ProjectFileSerializer.prototype.getProject = function (projectId) {
+        return this.projects.find(function (project) { return project.id === projectId; });
+    };
+    ProjectFileSerializer.prototype.saveProject = function (project) {
+        var index = this.projects.findIndex(function (p) { return p.id === project.id; });
+        if (index !== -1) {
+            this.projects[index] = project;
+        }
+        else {
+            this.projects.push(project);
+        }
+        this.saveProjects(this.projects);
+    };
+    ProjectFileSerializer.prototype.removeProject = function (projectId) {
+        var index = this.projects.findIndex(function (p) { return p.id === projectId; });
+        if (index !== -1) {
+            this.projects.splice(index, 1);
+            this.saveProjects(this.projects);
+        }
+    };
+    ProjectFileSerializer.prototype.updateProject = function (project) {
+        var index = this.projects.findIndex(function (p) { return p.id === project.id; });
+        if (index !== -1) {
+            this.projects[index] = project;
+            this.saveProjects(this.projects);
+        }
+    };
+    return ProjectFileSerializer;
+}());
+export { ProjectFileSerializer };

package/dist/utils/reflect.js

@@ -0,0 +1,30 @@
+export var reflect = function () {
+    if (
+    // No Reflect, no classes, no need for shim because native custom elements
+    // require ES2015 classes or Reflect.
+    window.Reflect === undefined ||
+        window.customElements === undefined ||
+        // The webcomponentsjs custom elements polyfill doesn't require
+        // ES2015-compatible construction (`super()` or `Reflect.construct`).
+        // @ts-ignore
+        window.customElements.polyfillWrapFlushCallback) {
+        return;
+    }
+    var BuiltInHTMLElement = HTMLElement;
+    /**
+     * With jscompiler's RECOMMENDED_FLAGS the function name will be optimized away.
+     * However, if we declare the function as a property on an object literal, and
+     * use quotes for the property name, then closure will leave that much intact,
+     * which is enough for the JS VM to correctly set Function.prototype.name.
+     */
+    var wrapperForTheName = {
+        'HTMLElement': /** @this {!Object} */ function HTMLElement() {
+            return Reflect.construct(BuiltInHTMLElement, [], /** @type {!Function} */ (this.constructor));
+        }
+    };
+    // @ts-ignore
+    window.HTMLElement = wrapperForTheName['HTMLElement'];
+    HTMLElement.prototype = BuiltInHTMLElement.prototype;
+    HTMLElement.prototype.constructor = HTMLElement;
+    Object.setPrototypeOf(HTMLElement, BuiltInHTMLElement);
+};

package/dist/utils/temp-canvas.js

@@ -0,0 +1,19 @@
+var TempCanvas = /** @class */ (function () {
+    function TempCanvas() {
+        this.canvas = document.createElement('canvas');
+        this.ctx = this.canvas.getContext('2d', { willReadFrequently: true });
+    }
+    TempCanvas.prototype.bindOptions = function (options) {
+        this.canvas.width = options.width;
+        this.canvas.height = options.height;
+        this.ctx = this.canvas.getContext('2d', { willReadFrequently: true });
+    };
+    TempCanvas.prototype.destroy = function () {
+        this.canvas.remove();
+    };
+    TempCanvas.prototype.getImageData = function () {
+        return this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);
+    };
+    return TempCanvas;
+}());
+export { TempCanvas };

package/dist/web-component.d.ts

@@ -15,11 +15,12 @@ import ThroughHistoryService from "./services/through-history.service";
 import AppStoreRepository from "./store/storeRepository";
 import ProjectsService from "./services/projects.service";
 import PullProjectService from "./services/pull-project.service";
-import DrawService, { DrawAccumulator } from "./services/draw.service";
+import DrawService from "./services/draw.service";
 import DownloadService from "./services/download.service";
 import ResizeService from "./services/serize.service";
-import DrawLayersService from "./services/draw-leayers.service";
+import DrawLayersService from "./services/draw-layers.service";
 import { ILayer } from "./types/draw-layers";
+import DrawAccumulatorService from "./services/draw-accumulator.service";
 export declare class WebComponentWrapper {
     baseElement: HTMLDivElement;
     editorWrapElement: HTMLDivElement;
@@ -64,7 +65,7 @@ export default class WebComponent extends HTMLElement {
     drawService: DrawService;
     downloadService: DownloadService;
     resizeService: ResizeService;
-    drawAccumulator: DrawAccumulator;
+    drawAccumulatorService: DrawAccumulatorService;
     drawLayersService: DrawLayersService;
     constructor();
     init(appConfig: AppConfig): {