canvas-editor-engine 2.0.12 → 2.0.14

package/dist/index.mjs

@@ -0,0 +1,2148 @@
+import { range } from "lodash";
+
+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);
+};
+
+function __extends(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 = function() {
+    __assign = Object.assign || function __assign(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);
+};
+
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function(error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+var ConfigFabric = function() {
+    function ConfigFabric() {}
+    return ConfigFabric;
+}();
+
+var AppConfig = function(_super) {
+    __extends(AppConfig, _super);
+    function AppConfig() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Object.defineProperty(AppConfig, "WEB_COMPONENT_TAG_NAME", {
+        get: function() {
+            return AppConfig._WEB_COMPONENT_TAG_NAME;
+        },
+        set: function(value) {
+            if (!!value && typeof value === "string") {
+                AppConfig._WEB_COMPONENT_TAG_NAME = value;
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(AppConfig, "CANVAS_SIZE", {
+        get: function() {
+            return AppConfig._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)) {
+                AppConfig._CANVAS_SIZE = value;
+            } else {
+                console.warn("CANVAS_SIZE denied");
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(AppConfig, "LAYERS", {
+        get: function() {
+            return AppConfig._LAYERS;
+        },
+        set: function(value) {
+            if (!!value && !!(value === null || value === void 0 ? void 0 : value.length)) {
+                AppConfig._LAYERS = value;
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return AppConfig;
+}(ConfigFabric);
+
+(function() {
+    AppConfig._CANVAS_SIZE = {
+        width: 300,
+        height: 150
+    };
+    AppConfig._WEB_COMPONENT_TAG_NAME = "canvas-editor-engine";
+    AppConfig._LAYERS = [ {
+        name: "low",
+        index: 1
+    }, {
+        name: "normal",
+        index: 2
+    }, {
+        name: "high",
+        index: 3
+    } ];
+})();
+
+var ComponentService = function() {
+    function ComponentService() {}
+    ComponentService.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.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;
+}();
+
+var LoggerService = function() {
+    function LoggerService() {}
+    Object.defineProperty(LoggerService, "components", {
+        get: function() {
+            return LoggerService.getMethods("components");
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(LoggerService, "services", {
+        get: function() {
+            return LoggerService.getMethods("services");
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(LoggerService, "planed", {
+        get: function() {
+            return LoggerService.getMethods("planed");
+        },
+        enumerable: false,
+        configurable: true
+    });
+    LoggerService.getMethods = function(fields) {
+        return {
+            add: function(logItem) {
+                LoggerService._add(fields, logItem);
+            },
+            get: function() {
+                var args = [];
+                for (var _i = 0; _i < arguments.length; _i++) {
+                    args[_i] = arguments[_i];
+                }
+                LoggerService._get.apply(LoggerService, args);
+            }
+        };
+    };
+    LoggerService._add = function(field, logItem) {
+        LoggerService.log[field].push(logItem);
+    };
+    LoggerService._get = function(field, name) {
+        return LoggerService.log[field].find((function(logItem) {
+            return logItem.info.name === name;
+        }));
+    };
+    LoggerService.log = {
+        components: [],
+        services: [],
+        planed: []
+    };
+    return LoggerService;
+}();
+
+var ToolLayerService = function() {
+    function ToolLayerService() {}
+    ToolLayerService.getLayerIndex = function(layerName) {
+        var layer = AppConfig.LAYERS.find((function(layer) {
+            return layer.name === layerName;
+        }));
+        var zIndex = ToolLayerService.multiplier * layer.index;
+        return zIndex;
+    };
+    ToolLayerService.multiplier = 1e3;
+    return ToolLayerService;
+}();
+
+var CanvasComponent = function(_super) {
+    __extends(CanvasComponent, _super);
+    function CanvasComponent() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    CanvasComponent.getComponent = function() {
+        var canvasTemplate = CanvasComponent.getTemplate(CanvasComponent.template);
+        var canvasStyle = CanvasComponent.getStyle(CanvasComponent.css);
+        CanvasComponent.canvas = canvasTemplate.getElementsByTagName("canvas")[0];
+        CanvasComponent.canvas.width = AppConfig.CANVAS_SIZE.width;
+        CanvasComponent.canvas.height = AppConfig.CANVAS_SIZE.height;
+        CanvasComponent.ctx = CanvasComponent.canvas.getContext("2d", {
+            willReadFrequently: true
+        });
+        CanvasComponent.eventListener = canvasTemplate.querySelector("#event-listener");
+        CanvasComponent.eventListener.style.width = AppConfig.CANVAS_SIZE.width + "px";
+        CanvasComponent.eventListener.style.height = AppConfig.CANVAS_SIZE.height + "px";
+        return {
+            canvasTemplate,
+            canvasStyle
+        };
+    };
+    CanvasComponent.getCanvasSelector = function() {
+        return "#sc-canvas";
+    };
+    Object.defineProperty(CanvasComponent, "cursorStyle", {
+        set: function(styleName) {
+            if (!!styleName) {
+                CanvasComponent._cursorStyle.before = CanvasComponent._cursorStyle.current;
+                CanvasComponent._cursorStyle.current = styleName;
+                CanvasComponent.eventListener.style.cursor = styleName;
+            } else {
+                CanvasComponent.eventListener.style.cursor = "default";
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    CanvasComponent.getCursorPosition = function(event) {
+        var rect = CanvasComponent.canvas.getBoundingClientRect();
+        var x = event.clientX - rect.left;
+        var y = event.clientY - rect.top;
+        return {
+            x,
+            y
+        };
+    };
+    CanvasComponent.subscribe = function(eventName, action) {
+        CanvasComponent.subscriptions[eventName].push(action);
+    };
+    CanvasComponent.simulateSubscriptions = function() {
+        var eventNames = Object.keys(CanvasComponent.subscriptions);
+        eventNames.forEach((function(eventName) {
+            var actionsList = CanvasComponent.subscriptions[eventName];
+            if (!!actionsList.length) {
+                CanvasComponent.eventListener.addEventListener(eventName, (function(event) {
+                    var cursorPosition = CanvasComponent.getCursorPosition(event);
+                    actionsList.forEach((function(action) {
+                        action(event, cursorPosition);
+                    }));
+                }));
+            }
+        }));
+    };
+    CanvasComponent.template = '\n    <div id="event-listener"></div>\n    <canvas id="sc-canvas"></canvas>\n  ';
+    CanvasComponent.css = "\n    #event-listener {\n      position: absolute;\n      z-index: ".concat(ToolLayerService.getLayerIndex("normal"), ";\n    }\n  ");
+    CanvasComponent.subscriptions = {
+        click: [],
+        mousemove: [],
+        mousedown: [],
+        mouseup: []
+    };
+    CanvasComponent._cursorStyle = {
+        before: null,
+        current: "default"
+    };
+    (function() {
+        LoggerService.components.add({
+            info: {
+                name: "canvas",
+                description: "canvas component"
+            },
+            prototype: CanvasComponent
+        });
+    })();
+    return CanvasComponent;
+}(ComponentService);
+
+var ToolService = function() {
+    function ToolService() {}
+    ToolService.add = function(tool) {
+        var hasRegisteredTool = ToolService.registry.find((function(registeredTool) {
+            return registeredTool.id === tool.id;
+        }));
+        if (hasRegisteredTool) {
+            console.warn("Tool has been previously registered!");
+            return false;
+        }
+        ToolService.registry.push(tool);
+        return true;
+    };
+    ToolService.setActive = function(id) {
+        var _a, _b, _c;
+        if (((_a = ToolService.active) === null || _a === void 0 ? void 0 : _a.id) === id) return console.warn("Tool is already active");
+        if (!!((_b = ToolService.active) === null || _b === void 0 ? void 0 : _b.offAction)) {
+            ToolService.active.offAction();
+        }
+        var registeredTool = ToolService.registry.find((function(registeredTool) {
+            return registeredTool.id === id;
+        }));
+        if (!!registeredTool) {
+            ToolService.active = registeredTool;
+            if (!!((_c = ToolService.active) === null || _c === void 0 ? void 0 : _c.onAction)) {
+                ToolService.active.onAction();
+            }
+        } else {
+            console.warn("Tool has not previously been registered with this identifier");
+        }
+    };
+    ToolService.offActive = function(id) {
+        if (!!id) {
+            if (ToolService.active.id === id) {
+                ToolService.off();
+            } else {
+                return console.warn('ID active tool is not "'.concat(id, '"'));
+            }
+        } else {
+            ToolService.off();
+        }
+    };
+    ToolService.off = function() {
+        var _a;
+        if (!!((_a = ToolService.active) === null || _a === void 0 ? void 0 : _a.offAction)) {
+            ToolService.active.offAction();
+        }
+        ToolService.before = ToolService.active;
+        ToolService.active = null;
+        CanvasComponent.cursorStyle = "default";
+    };
+    ToolService.before = null;
+    ToolService.active = null;
+    ToolService.registry = [];
+    return ToolService;
+}();
+
+var Convert = 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;
+}();
+
+var Filter = function() {
+    function Filter(ctx) {
+        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 : AppConfig.CANVAS_SIZE.width;
+        var height = (options === null || options === void 0 ? void 0 : options.height) ? options.height : 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 : AppConfig.CANVAS_SIZE.width;
+        var height = (options === null || options === void 0 ? void 0 : options.height) ? options.height : 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, AppConfig.CANVAS_SIZE.width, 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];
+            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];
+        }));
+        console.log("cleared", cleared);
+        return {
+            imageData: tempImageData,
+            size: tempSize
+        };
+    };
+    Filter.prototype.getSizeOfSparseMatrix = function(RGBAMatrix, tempSize) {
+        var leftIndex;
+        var upIndex;
+        for (var _i = 0, _a = RGBAMatrix.entries(); _i < _a.length; _i++) {
+            var _b = _a[_i], iy = _b[0], row = _b[1];
+            for (var _c = 0, _d = row.entries(); _c < _d.length; _c++) {
+                var _e = _d[_c], ix = _e[0], rowItem = _e[1];
+                var isNotEmpty = rowItem[3] !== 0;
+                if (isNotEmpty) {
+                    leftIndex = ix;
+                    upIndex = iy;
+                    break;
+                }
+            }
+            if (leftIndex !== undefined && upIndex !== undefined) {
+                break;
+            }
+        }
+        var rightIndex;
+        var downIndex;
+        for (var _f = 0, _g = RGBAMatrix.reverse().entries(); _f < _g.length; _f++) {
+            var _h = _g[_f], iy = _h[0], row = _h[1];
+            for (var _j = 0, _k = row.reverse().entries(); _j < _k.length; _j++) {
+                var _l = _k[_j], ix = _l[0], rowItem = _l[1];
+                var isNotEmpty = rowItem[3] !== 0;
+                if (isNotEmpty) {
+                    rightIndex = ix;
+                    downIndex = 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,
+            hexBuff,
+            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 = [];
+        var colorIndx = 0;
+        var colorRGBAIndx = 0;
+        imageData.data.forEach((function(pxColor) {
+            var _a;
+            if (colorIndx >= 4) {
+                colorIndx = 0;
+                colorRGBAIndx++;
+            }
+            colorIndx++;
+            (_a = rowRGBABuff[colorRGBAIndx]) !== null && _a !== void 0 ? _a : rowRGBABuff[colorRGBAIndx] = [];
+            rowRGBABuff[colorRGBAIndx].push(pxColor);
+        }));
+        return rowRGBABuff;
+    };
+    return Filter;
+}();
+
+var ThroughHistoryService = function() {
+    function ThroughHistoryService() {}
+    ThroughHistoryService.current = function() {
+        var history = AppStore.store.historyState.historyLines;
+        var lastIndex = history.length - 1;
+        return history[lastIndex];
+    };
+    ThroughHistoryService.prev = function() {
+        var history = AppStore.store.historyState.historyLines;
+        var prevIndex = history.length - 2;
+        return history[prevIndex];
+    };
+    ThroughHistoryService.undo = function(ctx) {
+        var current = ThroughHistoryService.current();
+        var prev = ThroughHistoryService.prev();
+        if (!!(current === null || current === void 0 ? void 0 : current.stateValue)) {
+            ThroughHistoryService.cache.unshift(current);
+            AppStore.store.historyState.reduce("UNDO");
+            if (prev === null || prev === void 0 ? void 0 : prev.stateValue) {
+                ThroughHistoryService.updateCanvas(ctx, prev.stateValue);
+            }
+        }
+    };
+    ThroughHistoryService.redo = function(ctx) {
+        var firstInCache = ThroughHistoryService.cache.shift();
+        if (!!(firstInCache === null || firstInCache === void 0 ? void 0 : firstInCache.stateValue)) {
+            AppStore.store.historyState.reduce("REDO", firstInCache);
+            ThroughHistoryService.updateCanvas(ctx, firstInCache.stateValue);
+        }
+    };
+    ThroughHistoryService.clearCache = function() {
+        ThroughHistoryService.cache = [];
+    };
+    ThroughHistoryService.recovery = function(project) {
+        AppStore.store.historyState.reduce("SET_HISTORY", {
+            historyLines: project.state.history
+        });
+        ThroughHistoryService.cache = project.state.cache;
+    };
+    ThroughHistoryService.updateCanvas = function(ctx, stateValue) {
+        var filter = new Filter(ctx);
+        filter.update(stateValue.tempImageData, stateValue.position);
+    };
+    ThroughHistoryService.cache = [];
+    return ThroughHistoryService;
+}();
+
+var HistoryState = function() {
+    function HistoryState() {
+        this.default = {
+            historyLines: []
+        };
+        this._historyLines = this.default.historyLines;
+        this.reset();
+    }
+    Object.defineProperty(HistoryState.prototype, "historyLines", {
+        get: function() {
+            return this._historyLines;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    HistoryState.prototype.reduce = function(name, payload) {
+        var reducer = new Reducer(this);
+        switch (name) {
+          case "SET_HISTORY":
+            reducer.setHistoryLines(payload);
+            ThroughHistoryService.clearCache();
+            break;
+
+          case "UPDATE_HISTORY":
+            reducer.updateHistoryLines(payload);
+            ThroughHistoryService.clearCache();
+            break;
+
+          case "REDO":
+            reducer.updateHistoryLines(payload);
+            break;
+
+          case "UNDO":
+            reducer.popHistoryLines();
+            break;
+        }
+    };
+    HistoryState.prototype.emerge = function(completeIt) {
+        this._emergeCompleteIt = completeIt;
+    };
+    HistoryState.prototype.reset = function() {
+        this.reduce("SET_HISTORY", this.default);
+    };
+    return HistoryState;
+}();
+
+var Reducer = function() {
+    function Reducer(state) {
+        this.state = state;
+    }
+    Reducer.prototype.setHistoryLines = function(payload) {
+        var isUpdate = false;
+        if (!!(payload === null || payload === void 0 ? void 0 : payload.historyLines)) {
+            this.state._historyLines = payload.historyLines;
+            isUpdate = true;
+        }
+        if (isUpdate && !!this.state._emergeCompleteIt) {
+            this.state._emergeCompleteIt(this.state._historyLines);
+        }
+    };
+    Reducer.prototype.updateHistoryLines = function(payload) {
+        var isUpdate = false;
+        if (!!(payload === null || payload === void 0 ? void 0 : payload.view)) {
+            this.state._historyLines.push(payload);
+            isUpdate = true;
+        }
+        if (isUpdate && !!this.state._emergeCompleteIt) {
+            this.state._emergeCompleteIt(this.state._historyLines);
+        }
+    };
+    Reducer.prototype.popHistoryLines = function() {
+        this.state._historyLines.pop();
+        if (!!this.state._emergeCompleteIt) {
+            this.state._emergeCompleteIt(this.state._historyLines);
+        }
+    };
+    return Reducer;
+}();
+
+var ImageState = function() {
+    function ImageState() {
+        this.default = {
+            position: {
+                x: 0,
+                y: 0
+            },
+            size: {
+                width: 0,
+                height: 0
+            },
+            tempImageData: null
+        };
+        this._position = this.default.position;
+        this._size = this.default.size;
+        this._tempImageData = this.default.tempImageData;
+        this.reset();
+    }
+    Object.defineProperty(ImageState.prototype, "position", {
+        get: function() {
+            return this._position;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ImageState.prototype, "size", {
+        get: function() {
+            return this._size;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ImageState.prototype, "tempImageData", {
+        get: function() {
+            return this._tempImageData;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ImageState.prototype.reduce = function(payload, title) {
+        var isUpdate = false;
+        if (!!(payload === null || payload === void 0 ? void 0 : payload.position)) {
+            this._position = payload.position;
+        }
+        if (!!(payload === null || payload === void 0 ? void 0 : payload.size)) {
+            this._size = payload.size;
+        }
+        if (!!(payload === null || payload === void 0 ? void 0 : payload.tempImageData)) {
+            this._tempImageData = payload.tempImageData;
+            isUpdate = true;
+        }
+        if (isUpdate) {
+            this.addToHistory("".concat(title || "reduce image"));
+        }
+    };
+    ImageState.prototype.reset = function() {
+        this.reduce(this.default, "reset to default");
+    };
+    ImageState.prototype.getEntry = function() {
+        return {
+            position: this._position,
+            size: this._size,
+            imageData: this._tempImageData
+        };
+    };
+    ImageState.prototype.addToHistory = function(title) {
+        var stateValue = {
+            position: this._position,
+            size: this._size,
+            tempImageData: this._tempImageData
+        };
+        AppStore.store.historyState.reduce("UPDATE_HISTORY", {
+            view: title,
+            stateName: "image",
+            stateValue
+        });
+    };
+    return ImageState;
+}();
+
+var Store = function() {
+    function Store(imageState, historyState) {
+        this.imageState = imageState;
+        this.historyState = historyState;
+    }
+    Store.prototype.reset = function() {
+        this.imageState.reset();
+        this.historyState.reset();
+    };
+    return Store;
+}();
+
+var AppStore = function() {
+    function AppStore() {}
+    AppStore.subscribe = function(to, completeIt) {
+        if (to === "history") {
+            AppStore.store.historyState.emerge(completeIt);
+        }
+    };
+    return AppStore;
+}();
+
+(function() {
+    AppStore.store = new Store(new ImageState, new HistoryState);
+})();
+
+var CropService = function() {
+    function CropService() {}
+    CropService.setup = function() {
+        ExcretionsComponent.additionStyle = "crop";
+    };
+    CropService.crop = function(ctx) {
+        var _a;
+        if (!!((_a = ExcretionsComponent.excretionsCoords) === null || _a === void 0 ? void 0 : _a.length) === false) return;
+        var filter = new Filter(ctx);
+        var options = CropService.options;
+        var _b = filter.copyExtendedModel(options), imageData = _b.imageData, size = _b.size;
+        var position = {
+            x: AppConfig.CANVAS_SIZE.width / 2 - size.width / 2,
+            y: AppConfig.CANVAS_SIZE.height / 2 - size.height / 2
+        };
+        filter.update(imageData, position);
+        AppStore.store.imageState.reduce({
+            tempImageData: imageData,
+            position,
+            size: {
+                width: size.width,
+                height: size.height
+            }
+        }, "Use crop");
+    };
+    CropService.viewCropButton = function() {
+        var cropButtons = ExcretionsComponent.excretionWrap.querySelectorAll(".crop-button");
+        var lastCropButtonIndex = cropButtons.length - 1;
+        var cropButton = cropButtons[lastCropButtonIndex];
+        cropButton.classList.add("crop-button--view");
+    };
+    Object.defineProperty(CropService, "options", {
+        get: function() {
+            var excretionLastIndex = ExcretionsComponent.excretionsCoords.length - 1;
+            var coords = ExcretionsComponent.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;
+}();
+
+var ExcretionsComponent = function(_super) {
+    __extends(ExcretionsComponent, _super);
+    function ExcretionsComponent() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Object.defineProperty(ExcretionsComponent, "additionStyle", {
+        get: function() {
+            return ExcretionsComponent._additionStyle;
+        },
+        set: function(value) {
+            ExcretionsComponent._additionStyle = value;
+            ExcretionsComponent.applyExcretionStyle();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ExcretionsComponent.applyExcretionStyle = function() {
+        switch (ExcretionsComponent._additionStyle) {
+          case "crop":
+            ExcretionsComponent.determineCropStyle();
+            break;
+
+          case "default":
+            ExcretionsComponent.determineDefaultStyle();
+            break;
+
+          default:
+            ExcretionsComponent.determineDefaultStyle();
+            break;
+        }
+    };
+    ExcretionsComponent.determineCropStyle = function() {
+        ExcretionsComponent._excretions.forEach((function(excretion) {
+            if (!!excretion === false) return;
+            if (!excretion.classList.contains("excretion_crop")) {
+                excretion.classList.add("excretion_crop");
+                CropService.viewCropButton();
+            }
+        }));
+    };
+    ExcretionsComponent.determineDefaultStyle = function() {
+        ExcretionsComponent._excretions.forEach((function(excretion) {
+            if (!!excretion === false) return;
+            excretion.classList = ExcretionsComponent._excretionDefaultStyle;
+        }));
+    };
+    ExcretionsComponent.getComponent = function() {
+        var wrapOptions = {
+            className: "excretions-wrap"
+        };
+        var excretionsTemplate = ExcretionsComponent.getTemplate(ExcretionsComponent.template, wrapOptions);
+        var excretionsStyle = ExcretionsComponent.getStyle(ExcretionsComponent.css);
+        ExcretionsComponent.excretionWrap = excretionsTemplate;
+        ExcretionsComponent.emmit();
+        return {
+            excretionsTemplate,
+            excretionsStyle
+        };
+    };
+    Object.defineProperty(ExcretionsComponent, "excretionState", {
+        set: function(state) {
+            ExcretionsComponent._excretionState = state;
+            ExcretionsComponent.applyExcretionStyle();
+            switch (state) {
+              case "abandoned":
+                CanvasComponent.cursorStyle = "default";
+                break;
+
+              case "create":
+                CanvasComponent.cursorStyle = "crosshair";
+                break;
+
+              case "add":
+                CanvasComponent.cursorStyle = "copy";
+                break;
+
+              case "remove":
+                CanvasComponent.cursorStyle = "alias";
+                break;
+
+              default:
+                CanvasComponent.cursorStyle = "default";
+                break;
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ExcretionsComponent.setToolState = function(toolState) {
+        ExcretionsComponent._excretionToolState = toolState;
+        switch (toolState) {
+          case "abandoned":
+            ExcretionsComponent.excretionState = "abandoned";
+            ExcretionsComponent._excretionActivity = "abandoned";
+            break;
+
+          case "taken":
+            ExcretionsComponent.excretionState = "create";
+            break;
+
+          default:
+            ExcretionsComponent.excretionState = "abandoned";
+            ExcretionsComponent._excretionActivity = "abandoned";
+            break;
+        }
+    };
+    ExcretionsComponent.clearExcretionsCoords = function() {
+        console.log("clear!");
+        ExcretionsComponent._excretions.forEach((function(excretion) {
+            return excretion.remove();
+        }));
+        ExcretionsComponent._excretions = [];
+        ExcretionsComponent.excretionsCoords = [];
+    };
+    ExcretionsComponent.getTempCoords = function() {
+        var startCoords = ExcretionsComponent._tempCoords[0];
+        var endCoords = ExcretionsComponent._tempCoords[1];
+        var coords = Object.assign(startCoords, endCoords);
+        ExcretionsComponent._tempCoords = [];
+        return coords;
+    };
+    ExcretionsComponent.endExcretion = function() {
+        var coords = ExcretionsComponent.getTempCoords();
+        ExcretionsComponent.excretionsCoords.push(coords);
+        ExcretionsComponent._excretionActivity = "end";
+        console.log("ExcretionsComponent.excretionsCoords", ExcretionsComponent.excretionsCoords);
+    };
+    ExcretionsComponent.emmit = function() {
+        CanvasComponent.subscribe("mousedown", (function(event, cursorPosition) {
+            var toolState = ExcretionsComponent._excretionToolState;
+            if (toolState === "abandoned") return;
+            var state = ExcretionsComponent._excretionState;
+            if (state === "create") {
+                var wrapOptions = {
+                    className: ExcretionsComponent._excretionDefaultStyle[0]
+                };
+                var excretionTemplate = ExcretionsComponent.getTemplate(ExcretionsComponent.templateExcretion, wrapOptions);
+                ExcretionsComponent.clearExcretionsCoords();
+                var tempStart = {
+                    start: cursorPosition
+                };
+                excretionTemplate.style.left = "".concat(tempStart.start.x, "px");
+                excretionTemplate.style.top = "".concat(tempStart.start.y, "px");
+                var excretionElement = ExcretionsComponent.excretionWrap.appendChild(excretionTemplate);
+                ExcretionsComponent._excretions.push(excretionElement);
+                ExcretionsComponent._tempCoords.push(tempStart);
+            }
+            if (state === "add") {
+                var tempStart = {
+                    start: cursorPosition
+                };
+                ExcretionsComponent._tempCoords.push(tempStart);
+            }
+            ExcretionsComponent.applyExcretionStyle();
+            ExcretionsComponent._excretionActivity = "active";
+        }));
+        CanvasComponent.subscribe("mousemove", (function(event, cursorPosition) {
+            var toolState = ExcretionsComponent._excretionToolState;
+            if (toolState === "abandoned") return;
+            var activity = ExcretionsComponent._excretionActivity;
+            if (event.altKey && ExcretionsComponent._excretionState !== "abandoned") {
+                ExcretionsComponent._excretionState = "add";
+            }
+            if (activity === "abandoned") return;
+            if (activity === "active") {
+                var excretionLastIndex = ExcretionsComponent._excretions.length - 1;
+                var excretion = ExcretionsComponent._excretions[excretionLastIndex];
+                var excretionX = +excretion.style.left.split("px")[0];
+                var excretionY = +excretion.style.top.split("px")[0];
+                var width = Math.abs(cursorPosition.x - excretionX);
+                var height = Math.abs(cursorPosition.y - excretionY);
+                excretion.style.width = width + "px";
+                excretion.style.height = height + "px";
+                var isRightBottom = cursorPosition.x > excretionX && cursorPosition.y > excretionY;
+                var isLeftBottom = cursorPosition.x < excretionX && cursorPosition.y > excretionY;
+                var isLeftTop = cursorPosition.x < excretionX && cursorPosition.y < excretionY;
+                var isRightTop = cursorPosition.x > excretionX && cursorPosition.y < excretionY;
+                if (isRightBottom) {
+                    excretion.style.transform = "translateX(0px) translateY(0px)";
+                } else if (isLeftBottom) {
+                    excretion.style.transform = "translateX(-".concat(width, "px) translateY(0px)");
+                } else if (isLeftTop) {
+                    excretion.style.transform = "translateX(-".concat(width, "px) translateY(-").concat(height, "px)");
+                } else if (isRightTop) {
+                    excretion.style.transform = "translateX(0px) translateY(-".concat(height, "px)");
+                }
+            }
+        }));
+        CanvasComponent.subscribe("mouseup", (function(event, cursorPosition) {
+            var toolState = ExcretionsComponent._excretionToolState;
+            if (toolState === "abandoned") return;
+            var state = ExcretionsComponent._excretionState;
+            if (state === "abandoned") return;
+            if (state === "create" || state === "add") {
+                var tempEnd = {
+                    end: cursorPosition
+                };
+                ExcretionsComponent._tempCoords.push(tempEnd);
+                ExcretionsComponent.endExcretion();
+            }
+        }));
+    };
+    ExcretionsComponent.template = "";
+    ExcretionsComponent.templateExcretion = '\n    <button type="button" class="crop-button">\n      <svg fill="#ffffff" viewBox="0 0 1920 1920" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M426.667 0h106.666v1386.67H1920v106.66H426.667V0zM320 426.667H0v106.666h320V426.667zm320 0v106.666h746.67V1280h106.66V426.667H640zM1493.33 1600h-106.66v320h106.66v-320z"></path> </g></svg>\n    </button>\n  ';
+    ExcretionsComponent._excretionDefaultStyle = [ "excretion" ];
+    ExcretionsComponent.css = "\n    .excretion {\n      display: flex;\n      position: absolute;\n      background-image: linear-gradient(90deg, silver 50%, transparent 50%), linear-gradient(90deg, silver 50%, transparent 50%), linear-gradient(0deg, silver 50%, transparent 50%), linear-gradient(0deg, silver 50%, transparent 50%);\n      background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;\n      background-size: 8px 1px, 8px 1px, 1px 8px, 1px 8px;\n      background-position: left top, right bottom, left bottom, right top;\n      animation: border-dance 1s infinite linear;\n      z-index: ".concat(ToolLayerService.getLayerIndex("low"), ";\n    }\n\n    .excretion_crop {\n      box-shadow: 0px 0px 0px calc(100vw + 100vh) #50505070;\n    }\n\n    .crop-button {\n      display: none;\n      justify-content: center;\n      align-items: center;\n      position: absolute;\n      padding: 5px;\n      right: -35px;\n      top: 0;\n      background: #232222;\n      border: 1px solid #ffffff50;\n      border-radius: 4px;\n      width: 30px;\n      height: 30px;\n      cursor: pointer;\n      z-index: ").concat(ToolLayerService.getLayerIndex("high"), ";\n    }\n\n    .crop-button--view {\n      display: flex;\n    }\n\n    @keyframes border-dance {\n      0% {\n        background-position: left top, right bottom, left bottom, right top;\n      }\n      100% {\n        background-position: left 8px top, right 8px bottom, left bottom 8px, right top 8px;\n      }\n    }\n  ");
+    ExcretionsComponent._excretions = [];
+    ExcretionsComponent._excretionState = "abandoned";
+    ExcretionsComponent._excretionActivity = "abandoned";
+    ExcretionsComponent._excretionToolState = "abandoned";
+    ExcretionsComponent._tempCoords = [];
+    ExcretionsComponent.excretionsCoords = [];
+    ExcretionsComponent._additionStyle = "default";
+    ExcretionsComponent.tool = {
+        id: 1,
+        name: "excretion",
+        onAction: function() {
+            return ExcretionsComponent.setToolState("taken");
+        },
+        offAction: function() {
+            return ExcretionsComponent.setToolState("abandoned");
+        },
+        support: function() {
+            ExcretionsComponent.clearExcretionsCoords();
+            ExcretionsComponent.additionStyle = "default";
+        }
+    };
+    (function() {
+        ToolService.add(ExcretionsComponent.tool);
+        LoggerService.components.add({
+            info: {
+                name: "excretion",
+                description: "excretion component"
+            },
+            prototype: ExcretionsComponent
+        });
+    })();
+    return ExcretionsComponent;
+}(ComponentService);
+
+var Guid4 = function() {
+    function Guid4() {
+        this.stack = [];
+    }
+    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 & 3 | 8;
+        return formattedChar.toString(16);
+    };
+    return Guid4;
+}();
+
+var GenerateAttempt = 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;
+}();
+
+var EventService = function() {
+    function EventService() {}
+    EventService.subcribe = function(controlEvent) {
+        var eventAtom = __assign({
+            id: (new Guid4).generate()
+        }, controlEvent);
+        EventService.eventList.push(eventAtom);
+    };
+    EventService.dispatch = function(name, eventArgs) {
+        var eventAtom = EventService.eventList.find((function(event) {
+            return event.name === name;
+        }));
+        eventAtom.action(eventArgs);
+    };
+    EventService.applyEvents = function(baseElement) {
+        var _a;
+        (_a = EventService.eventList) === null || _a === void 0 ? void 0 : _a.forEach((function(event) {
+            baseElement.addEventListener(event.name, event.action);
+        }));
+    };
+    EventService.eventList = [];
+    return EventService;
+}();
+
+var LoadingComponent = function(_super) {
+    __extends(LoadingComponent, _super);
+    function LoadingComponent() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    LoadingComponent.getComponent = function() {
+        var wrapOptions = {
+            className: "loading-wrapper"
+        };
+        var loadingTemplate = LoadingComponent.getTemplate(LoadingComponent.template, wrapOptions);
+        var loadingStyle = LoadingComponent.getStyle(LoadingComponent.css);
+        LoadingComponent.loading = loadingTemplate;
+        LoadingComponent.subscribeLoadingStart();
+        LoadingComponent.subscribeLoadingEnd();
+        return {
+            loadingTemplate,
+            loadingStyle
+        };
+    };
+    LoadingComponent.hide = function() {
+        LoadingComponent.loading.style.display = "none";
+    };
+    LoadingComponent.view = function() {
+        LoadingComponent.loading.style.display = "flex";
+    };
+    LoadingComponent.subscribeLoadingStart = function() {
+        var controlEvent = {
+            name: "loading-start",
+            action: function() {
+                return LoadingComponent.view();
+            }
+        };
+        EventService.subcribe(controlEvent);
+    };
+    LoadingComponent.subscribeLoadingEnd = function() {
+        var controlEvent = {
+            name: "loading-end",
+            action: function() {
+                return LoadingComponent.hide();
+            }
+        };
+        EventService.subcribe(controlEvent);
+    };
+    LoadingComponent.template = '\n    <span class="loader"></span>\n  ';
+    LoadingComponent.css = '\n    .loading-wrapper {\n      display: none;  \n      justify-content: center;\n      align-items: center;\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      background: #ffffff30;\n    }\n\n    .loader {\n      width: 48px;\n      height: 48px;\n      border-radius: 50%;\n      position: relative;\n      animation: rotate 1s linear infinite\n    }\n    .loader::before , .loader::after {\n      content: "";\n      box-sizing: border-box;\n      position: absolute;\n      inset: 0px;\n      border-radius: 50%;\n      border: 5px solid #FFF;\n      animation: prixClipFix 2s linear infinite ;\n    }\n    .loader::after{\n      inset: 8px;\n      transform: rotate3d(90, 90, 0, 180deg );\n      border-color: #FF3D00;\n    }\n\n    @keyframes rotate {\n      0%   {transform: rotate(0deg)}\n      100%   {transform: rotate(360deg)}\n    }\n\n    @keyframes prixClipFix {\n        0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}\n        50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}\n        75%, 100%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}\n    }\n  ';
+    (function() {
+        LoggerService.components.add({
+            info: {
+                name: "loading",
+                description: "loading component"
+            },
+            prototype: LoadingComponent
+        });
+    })();
+    return LoadingComponent;
+}(ComponentService);
+
+var PipetteComponent = function(_super) {
+    __extends(PipetteComponent, _super);
+    function PipetteComponent() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Object.defineProperty(PipetteComponent, "pipetteColor", {
+        get: function() {
+            return PipetteComponent._pipetteColor;
+        },
+        set: function(color) {
+            PipetteComponent._pipetteColor = color;
+            PipetteComponent._pipetteColorElement.style.borderColor = PipetteComponent._pipetteColor;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    PipetteComponent.getComponent = function() {
+        var wrapOptions = {
+            className: "pipette"
+        };
+        var pipetteTemplate = PipetteComponent.getTemplate(PipetteComponent.template, wrapOptions);
+        var pipetteStyle = PipetteComponent.getStyle(PipetteComponent.css);
+        PipetteComponent.pipette = pipetteTemplate;
+        PipetteComponent._pipetteColorElement = pipetteTemplate.querySelector(".pipette_color");
+        PipetteComponent.emmit();
+        return {
+            pipetteTemplate,
+            pipetteStyle
+        };
+    };
+    PipetteComponent.setState = function(state) {
+        PipetteComponent._pipetteState = state;
+        switch (state) {
+          case "abandoned":
+            return PipetteComponent.hide();
+
+          case "taken":
+            return PipetteComponent.show();
+
+          case "selected-color":
+            return PipetteComponent.show();
+
+          default:
+            return PipetteComponent.hide();
+        }
+    };
+    PipetteComponent.emmit = function() {
+        CanvasComponent.subscribe("mousemove", (function(event, cursorPosition) {
+            var state = PipetteComponent._pipetteState;
+            if (state === "taken" || state === "selected-color") {
+                var x = cursorPosition.x, y = cursorPosition.y;
+                PipetteComponent.pipette.style.left = "".concat(x + 10, "px");
+                PipetteComponent.pipette.style.top = "".concat(y + 10, "px");
+            }
+        }));
+        CanvasComponent.subscribe("click", (function(event, cursorPosition) {
+            var state = PipetteComponent._pipetteState;
+            if (state === "taken" || state === "selected-color") {
+                console.log("pipetteState", state);
+                if (state === "taken") {
+                    PipetteComponent.setColorFromChoosenPixel(cursorPosition);
+                    PipetteComponent.setState("selected-color");
+                }
+                if (state === "selected-color") {
+                    PipetteComponent.setColorFromChoosenPixel(cursorPosition);
+                }
+            }
+        }));
+    };
+    PipetteComponent.setColorFromChoosenPixel = function(cursorPosition) {
+        var x = cursorPosition.x, y = cursorPosition.y;
+        var pixel = CanvasComponent.ctx.getImageData(x, y, 1, 1).data;
+        var hexPixel = Convert.rgbToHex(pixel[0], pixel[1], pixel[2]);
+        PipetteComponent.pipetteColor = hexPixel;
+    };
+    PipetteComponent.show = function() {
+        PipetteComponent.pipette.style.display = "flex";
+        CanvasComponent.cursorStyle = "default";
+    };
+    PipetteComponent.hide = function() {
+        PipetteComponent.pipette.style.display = "none";
+        CanvasComponent.cursorStyle = "default";
+    };
+    PipetteComponent.template = '\n    <div class="pipette_border-out">\n      <div class="pipette_color">\n        <div class="pipette_border-in">\n          <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M17 12C17 14.7614 14.7614 17 12 17M17 12C17 9.23858 14.7614 7 12 7M17 12H19M12 17C9.23858 17 7 14.7614 7 12M12 17V19M7 12C7 9.23858 9.23858 7 12 7M7 12H5M12 7V5M14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12Z" stroke="#d9d9d9" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>\n        </div> \n      </div>\n    </div>\n  ';
+    PipetteComponent.css = "\n  .pipette {\n    position: absolute;\n    display: none;\n    justify-content: center;\n    align-items: center;\n    width: 48px;\n    height: 48px;\n  }\n\n  .pipette_border-out {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: 100px;\n    border: solid 2px #d9d9d9;\n    width: 44px;\n    height: 44px;\n  }\n\n  .pipette_border-in {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: 100px;\n    border: solid 1px #d9d9d9;\n    width: 32px;\n    height: 32px;\n  }\n\n  .pipette_color {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 34px;\n    height: 34px;\n    border-radius: 100px;\n    border-color: blue;\n    border-style: solid;\n    border-width: 5px;\n  }\n  ";
+    PipetteComponent._pipetteState = "abandoned";
+    PipetteComponent.tool = {
+        id: 0,
+        name: "pipette",
+        onAction: function() {
+            return PipetteComponent.setState("taken");
+        },
+        offAction: function() {
+            return PipetteComponent.setState("abandoned");
+        }
+    };
+    (function() {
+        ToolService.add(PipetteComponent.tool);
+        LoggerService.components.add({
+            info: {
+                name: "pipette",
+                description: "pipette component"
+            },
+            prototype: PipetteComponent
+        });
+    })();
+    return PipetteComponent;
+}(ComponentService);
+
+var SlotComponent = function(_super) {
+    __extends(SlotComponent, _super);
+    function SlotComponent() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    SlotComponent.getComponent = function(slotName) {
+        var wrapOptions = {
+            className: "slot-wrapper"
+        };
+        var slotTemplate = SlotComponent.getTemplate(SlotComponent.template, wrapOptions);
+        var slotStyle = SlotComponent.getStyle(SlotComponent.css);
+        SlotComponent.slot = slotTemplate.querySelector("slot");
+        SlotComponent.slot.name = slotName;
+        return {
+            slotTemplate,
+            slotStyle
+        };
+    };
+    SlotComponent.template = '\n    <slot class="slot"></slot>\n  ';
+    SlotComponent.css = "";
+    (function() {
+        LoggerService.components.add({
+            info: {
+                name: "slot",
+                description: "slot component"
+            },
+            prototype: SlotComponent
+        });
+    })();
+    return SlotComponent;
+}(ComponentService);
+
+var WebComponentWrapper = function() {
+    function WebComponentWrapper() {
+        var base = document.createElement("div");
+        base.className = "wc-editor";
+        base.style.position = "relative";
+        base.style.display = "flex";
+        base.style.overflow = "hidden";
+        var stylesWrap = document.createElement("div");
+        stylesWrap.className = "styles-wrap";
+        var editorWrap = document.createElement("div");
+        editorWrap.className = "editor-wrap";
+        editorWrap.style.position = "relative";
+        editorWrap.style.display = "flex";
+        editorWrap.style.overflow = "hidden";
+        var toolsWrap = document.createElement("div");
+        toolsWrap.className = "tools-wrap";
+        toolsWrap.style.position = "relative";
+        toolsWrap.style.display = "flex";
+        base.appendChild(stylesWrap);
+        base.appendChild(editorWrap);
+        base.appendChild(toolsWrap);
+        this.baseElement = base;
+        this.stylesWrapElement = stylesWrap;
+        this.editorWrapElement = editorWrap;
+        this.toolsWrapElement = toolsWrap;
+        this._baseStyle();
+    }
+    Object.defineProperty(WebComponentWrapper.prototype, "base", {
+        get: function() {
+            return this._methods(this.baseElement);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(WebComponentWrapper.prototype, "editorWrap", {
+        get: function() {
+            return this._methods(this.editorWrapElement);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(WebComponentWrapper.prototype, "stylesWrap", {
+        get: function() {
+            return this._methods(this.stylesWrapElement);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(WebComponentWrapper.prototype, "toolsWrap", {
+        get: function() {
+            return this._methods(this.toolsWrapElement);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    WebComponentWrapper.prototype._methods = function(elementWrapper) {
+        var _this = this;
+        return {
+            add: function(component, style) {
+                return _this._add(elementWrapper, component, style);
+            }
+        };
+    };
+    WebComponentWrapper.prototype._add = function(elementWrapper, component, style) {
+        var componentElement = elementWrapper.appendChild(component);
+        if (!!style) {
+            this.stylesWrapElement.appendChild(style);
+        }
+        return componentElement;
+    };
+    WebComponentWrapper.prototype._baseStyle = function() {
+        var style = document.createElement("style");
+        style.innerHTML = "\n      * {\n        user-select: none;\n      }\n    ";
+        this.stylesWrapElement.appendChild(style);
+    };
+    return WebComponentWrapper;
+}();
+
+var WebComponent = function(_super) {
+    __extends(WebComponent, _super);
+    function WebComponent() {
+        var _this = _super.call(this) || this;
+        var shadowRoot = _this.attachShadow({
+            mode: "open"
+        });
+        var webComponentWrapper = new WebComponentWrapper;
+        var _a = CanvasComponent.getComponent(), canvasTemplate = _a.canvasTemplate, canvasStyle = _a.canvasStyle;
+        var canvasElement = webComponentWrapper.editorWrap.add(canvasTemplate, canvasStyle);
+        var _b = PipetteComponent.getComponent(), pipetteTemplate = _b.pipetteTemplate, pipetteStyle = _b.pipetteStyle;
+        webComponentWrapper.editorWrap.add(pipetteTemplate, pipetteStyle);
+        var _c = SlotComponent.getComponent("tools"), slotTemplate = _c.slotTemplate, slotStyle = _c.slotStyle;
+        webComponentWrapper.toolsWrap.add(slotTemplate, slotStyle);
+        var _d = ExcretionsComponent.getComponent(), excretionsTemplate = _d.excretionsTemplate, excretionsStyle = _d.excretionsStyle;
+        webComponentWrapper.editorWrap.add(excretionsTemplate, excretionsStyle);
+        var _e = LoadingComponent.getComponent(), loadingTemplate = _e.loadingTemplate, loadingStyle = _e.loadingStyle;
+        webComponentWrapper.editorWrap.add(loadingTemplate, loadingStyle);
+        shadowRoot.appendChild(webComponentWrapper.baseElement);
+        CanvasComponent.simulateSubscriptions();
+        EventService.applyEvents(webComponentWrapper.baseElement);
+        _this.addEventListener("initial", (function() {
+            _this.dispatchEvent(new CustomEvent("get-editor-element", {
+                detail: {
+                    editorElement: canvasElement,
+                    canvasSelector: CanvasComponent.getCanvasSelector()
+                }
+            }));
+        }));
+        return _this;
+    }
+    return WebComponent;
+}(HTMLElement);
+
+var VagueFilter = function(_super) {
+    __extends(VagueFilter, _super);
+    function VagueFilter(ctx, options) {
+        var _this = _super.call(this, 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);
+            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;
+        console.log("quality", quality);
+        var processedImageData = this.getQualityProcessedRemainder(imageData, +quality);
+        var imageSize = {
+            width: processedImageData.width,
+            height: processedImageData.height
+        };
+        console.log("imageSize", imageSize);
+        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,
+                            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,
+            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);
+
+var DrawService = function() {
+    function DrawService() {}
+    DrawService.drawImage = function(ctx, src, options) {
+        DrawService.imageProcessor = new SCImage(src, ctx);
+        DrawService.imageProcessor.draw(options).then((function() {
+            var filter = new Filter(ctx);
+            var zeroPosition = {
+                x: 0,
+                y: 0
+            };
+            var imageData = filter.copy(zeroPosition);
+            AppStore.store.imageState.reduce({
+                tempImageData: imageData,
+                position: zeroPosition,
+                size: AppConfig.CANVAS_SIZE
+            }, "Loaded image");
+        }));
+    };
+    DrawService.drawProject = function(ctx, project) {
+        var imageData = project.state.current.imageData;
+        var position = project.state.current.position;
+        var size = project.state.current.size;
+        DrawService.imageProcessor = new PCImage(project, ctx);
+        DrawService.imageProcessor.draw();
+        AppStore.store.imageState.reduce({
+            tempImageData: imageData,
+            position,
+            size
+        }, "Loaded project");
+    };
+    DrawService.drawSmoothImage = function(useStore, options, filterOptions) {
+        var filterArgs = DrawService.getFilterArgs(useStore, options);
+        EventService.dispatch("loading-start");
+        if (!DrawService.imageProcessor) {
+            throw new Error("No valid ImageProcessor instance found");
+        }
+        DrawService.imageProcessor.vague(filterArgs, filterOptions).then(DrawService.updateImageStateAfterVague).finally((function() {
+            return EventService.dispatch("loading-end");
+        }));
+    };
+    DrawService.updateImageStateAfterVague = function(data) {
+        var imageData = data.imageData, position = data.position, size = data.size, quality = data.quality;
+        AppStore.store.imageState.reduce({
+            tempImageData: imageData,
+            position,
+            size
+        }, "[Filter Vague] quality: ".concat(quality));
+    };
+    DrawService.getFilterArgs = function(useStore, options) {
+        var _a, _b;
+        var filterArgs;
+        var store = AppStore.store.imageState;
+        if (useStore) {
+            filterArgs = {
+                x: store.position.x,
+                y: store.position.y
+            };
+            if (!!store.size.width && !!store.size.height) {
+                filterArgs.width = store.size.width;
+                filterArgs.height = store.size.height;
+            }
+        } else {
+            filterArgs = {
+                x: options.position.x,
+                y: options.position.y
+            };
+            if (options.size !== "initial") {
+                if (!!((_a = options.size) === null || _a === void 0 ? void 0 : _a.width) && !!((_b = options.size) === null || _b === void 0 ? void 0 : _b.height)) {
+                    filterArgs.width = options.size.width;
+                    filterArgs.height = options.size.height;
+                }
+            }
+        }
+        return filterArgs;
+    };
+    return DrawService;
+}();
+
+var SCImage = function() {
+    function SCImage(src, ctx) {
+        this.img = new Image;
+        this.img.src = src;
+        this.ctx = ctx;
+    }
+    SCImage.prototype.draw = function(options) {
+        var _this = this;
+        var proto = this;
+        var protoImg = this.img;
+        return new Promise((function(resolve, reject) {
+            try {
+                protoImg.addEventListener("load", (function() {
+                    var _a;
+                    var _b, _c;
+                    var drawImageArgs = [ options.position.x, options.position.y ];
+                    if (options.size !== "initial") {
+                        if (!!((_b = options.size) === null || _b === void 0 ? void 0 : _b.width) && !!((_c = options.size) === null || _c === void 0 ? void 0 : _c.height)) {
+                            drawImageArgs = drawImageArgs.concat([ options.size.width, options.size.height ]);
+                        } else {
+                            drawImageArgs = drawImageArgs.concat([ AppConfig.CANVAS_SIZE.width, AppConfig.CANVAS_SIZE.height ]);
+                        }
+                    }
+                    (_a = _this.ctx).drawImage.apply(_a, __spreadArray([ protoImg ], drawImageArgs, false));
+                    _this.ctx.save();
+                    resolve(proto);
+                }));
+            } catch (error) {
+                reject(error);
+            }
+        }));
+    };
+    SCImage.prototype.vague = function(options, filterOptions) {
+        var filter = new VagueFilter(this.ctx, options);
+        return filter.on("pixel", filterOptions);
+    };
+    return SCImage;
+}();
+
+var PCImage = function() {
+    function PCImage(project, ctx) {
+        this.project = project;
+        this.ctx = ctx;
+    }
+    PCImage.prototype.draw = function(options) {
+        var _this = this;
+        var _a = this.project.state.current, imageData = _a.imageData, position = _a.position;
+        return new Promise((function(resolve, reject) {
+            try {
+                var filter = new Filter(_this.ctx);
+                filter.update(imageData, position);
+                _this.ctx.save();
+                resolve(_this);
+            } catch (error) {
+                reject(error);
+            }
+        }));
+    };
+    PCImage.prototype.vague = function(options, filterOptions) {
+        var filter = new VagueFilter(this.ctx, options);
+        return filter.on("pixel", filterOptions);
+    };
+    return PCImage;
+}();
+
+var DownloadService = function() {
+    function DownloadService() {}
+    DownloadService.getDataUrl = function() {
+        return CanvasComponent.canvas.toDataURL();
+    };
+    DownloadService.download = function(filename) {
+        var link = document.createElement("a");
+        link.download = "".concat(filename || "image", ".png");
+        link.href = DownloadService.getDataUrl();
+        link.click();
+    };
+    return DownloadService;
+}();
+
+var ProjectFileSerializer = 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) {
+        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;
+}();
+
+var LocalStorageProjectModule = function() {
+    function LocalStorageProjectModule() {
+        this.projectsKey = "cee-projects";
+    }
+    LocalStorageProjectModule.prototype.getProjectsFromLocalStorage = function() {
+        var projects = localStorage.getItem(this.projectsKey);
+        return projects ? JSON.parse(projects) : [];
+    };
+    LocalStorageProjectModule.prototype.getProjectFromLocalStorage = function(projectId) {
+        var projects = this.getProjectsFromLocalStorage();
+        return projects.find((function(project) {
+            return project.id === projectId;
+        }));
+    };
+    LocalStorageProjectModule.prototype.saveProjectsToLocalStorage = function(projects) {
+        localStorage.setItem(this.projectsKey, JSON.stringify(projects));
+    };
+    LocalStorageProjectModule.prototype.saveProjectToLocalStorage = function(project) {
+        var projects = this.getProjectsFromLocalStorage();
+        projects.push(project);
+        localStorage.setItem(this.projectsKey, JSON.stringify(projects));
+    };
+    LocalStorageProjectModule.prototype.removeProjectFromLocalStorage = function(projectId) {
+        var projects = this.getProjectsFromLocalStorage();
+        var index = projects.findIndex((function(project) {
+            return project.id === projectId;
+        }));
+        projects.splice(index, 1);
+        localStorage.setItem(this.projectsKey, JSON.stringify(projects));
+    };
+    LocalStorageProjectModule.prototype.updateProjectInLocalStorage = function(project) {
+        var projects = this.getProjectsFromLocalStorage();
+        var index = projects.findIndex((function(p) {
+            return p.id === project.id;
+        }));
+        projects[index] = project;
+        localStorage.setItem(this.projectsKey, JSON.stringify(projects));
+    };
+    LocalStorageProjectModule.prototype.getProjects = function() {
+        return this.getProjectsFromLocalStorage();
+    };
+    LocalStorageProjectModule.prototype.getProject = function(projectId) {
+        return this.getProjectFromLocalStorage(projectId);
+    };
+    LocalStorageProjectModule.prototype.saveProjects = function(projects) {
+        this.saveProjectsToLocalStorage(projects);
+    };
+    LocalStorageProjectModule.prototype.saveProject = function(project) {
+        this.saveProjectToLocalStorage(project);
+    };
+    LocalStorageProjectModule.prototype.removeProject = function(projectId) {
+        this.removeProjectFromLocalStorage(projectId);
+    };
+    LocalStorageProjectModule.prototype.updateProject = function(project) {
+        this.updateProjectInLocalStorage(project);
+    };
+    return LocalStorageProjectModule;
+}();
+
+var ProjectFileProjectModule = function() {
+    function ProjectFileProjectModule() {}
+    ProjectFileProjectModule.setSerializer = function(serializer) {
+        ProjectFileProjectModule._serializer = serializer;
+    };
+    ProjectFileProjectModule.prototype.getProjects = function() {
+        return ProjectFileProjectModule._serializer.getProjects();
+    };
+    ProjectFileProjectModule.prototype.getProject = function(projectId) {
+        return ProjectFileProjectModule._serializer.getProject(projectId);
+    };
+    ProjectFileProjectModule.prototype.saveProject = function(project) {
+        return ProjectFileProjectModule._serializer.saveProject(project);
+    };
+    ProjectFileProjectModule.prototype.saveProjects = function(projects) {
+        return ProjectFileProjectModule._serializer.saveProjects(projects);
+    };
+    ProjectFileProjectModule.prototype.removeProject = function(projectId) {
+        return ProjectFileProjectModule._serializer.removeProject(projectId);
+    };
+    ProjectFileProjectModule.prototype.updateProject = function(project) {
+        return ProjectFileProjectModule._serializer.updateProject(project);
+    };
+    return ProjectFileProjectModule;
+}();
+
+var ProjectsService = function() {
+    function ProjectsService() {}
+    ProjectsService.on = function(moduleName) {
+        var module = ProjectsService._modules.find((function(module) {
+            return module.name === moduleName;
+        }));
+        if (!module) {
+            throw new Error("Module ".concat(moduleName, " not found"));
+        }
+        return {
+            getSerializerInstance: function(file) {
+                return new ProjectsService._serializer(file);
+            },
+            instance: module.instance
+        };
+    };
+    ProjectsService._addModule = function(name, module) {
+        ProjectsService._modules.push({
+            name,
+            instance: module
+        });
+    };
+    ProjectsService._modules = [];
+    ProjectsService._serializer = ProjectFileSerializer;
+    (function() {
+        ProjectsService._addModule("LocalStorage", new LocalStorageProjectModule);
+        ProjectsService._addModule("File", new ProjectFileProjectModule);
+    })();
+    return ProjectsService;
+}();
+
+var Project = 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;
+}();
+
+var PullProjectService = function() {
+    function PullProjectService() {}
+    Object.defineProperty(PullProjectService, "project", {
+        get: function() {
+            return this._project;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    PullProjectService.refreshProject = function() {
+        PullProjectService._project = new Project;
+    };
+    PullProjectService.updateProject = function(project) {
+        Object.keys(project).forEach((function(key) {
+            PullProjectService._project[key] = project[key];
+        }));
+    };
+    PullProjectService.pull = function(name, description) {
+        var project = new Project;
+        var state = {
+            cache: ThroughHistoryService.cache,
+            history: AppStore.store.historyState.historyLines,
+            current: AppStore.store.imageState.getEntry()
+        };
+        project.id = (new Guid4).generate();
+        project.description = description || "New Project";
+        project.name = name || "New Project";
+        project.state = state;
+        this._project = project;
+    };
+    PullProjectService._project = new Project;
+    return PullProjectService;
+}();
+
+var CanvasEditorEngine = function() {
+    function CanvasEditorEngine(webComponentTagName) {
+        AppConfig.WEB_COMPONENT_TAG_NAME = webComponentTagName;
+    }
+    CanvasEditorEngine.prototype.getInitial = function() {
+        return {
+            tag: AppConfig.WEB_COMPONENT_TAG_NAME,
+            component: WebComponent
+        };
+    };
+    return CanvasEditorEngine;
+}();
+
+var StaticCanvasEditorEngine = function(_super) {
+    __extends(StaticCanvasEditorEngine, _super);
+    function StaticCanvasEditorEngine(webComponentTagName) {
+        return _super.call(this, webComponentTagName) || this;
+    }
+    StaticCanvasEditorEngine.prototype.init = function() {
+        var customElementRegistry = window.customElements;
+        var _a = this.getInitial(), tag = _a.tag, component = _a.component;
+        customElementRegistry.define(tag, component);
+    };
+    return StaticCanvasEditorEngine;
+}(CanvasEditorEngine);
+
+var VueCanvasEditorEngine = function(_super) {
+    __extends(VueCanvasEditorEngine, _super);
+    function VueCanvasEditorEngine(webComponentTagName) {
+        return _super.call(this, webComponentTagName) || this;
+    }
+    VueCanvasEditorEngine.prototype.getContext2D = function() {
+        return CanvasComponent.ctx;
+    };
+    VueCanvasEditorEngine.prototype.getCanvas = function() {
+        return CanvasComponent.canvas;
+    };
+    return VueCanvasEditorEngine;
+}(CanvasEditorEngine);
+
+export { AppConfig, AppStore, CanvasComponent, CropService, DownloadService, DrawService, EventService, ExcretionsComponent as ExcretionComponent, LoadingComponent, LoggerService, PipetteComponent, ProjectsService, PullProjectService, SlotComponent, StaticCanvasEditorEngine, ThroughHistoryService, ToolLayerService, ToolService, VueCanvasEditorEngine };