canvas-editor-engine 2.0.21 → 2.1.1

package/dist/index.mjs

@@ -68,27 +68,43 @@ var ConfigFabric = function() {
 var AppConfig = function(_super) {
     __extends(AppConfig, _super);
     function AppConfig() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        var _this = _super.call(this) || this;
+        _this._CANVAS_SIZE = {
+            width: 300,
+            height: 150
+        };
+        _this._WEB_COMPONENT_TAG_NAME = "canvas-editor-engine";
+        _this._LAYERS = [ {
+            name: "low",
+            index: 1
+        }, {
+            name: "normal",
+            index: 2
+        }, {
+            name: "high",
+            index: 3
+        } ];
+        return _this;
     }
-    Object.defineProperty(AppConfig, "WEB_COMPONENT_TAG_NAME", {
+    Object.defineProperty(AppConfig.prototype, "WEB_COMPONENT_TAG_NAME", {
         get: function() {
-            return AppConfig._WEB_COMPONENT_TAG_NAME;
+            return this._WEB_COMPONENT_TAG_NAME;
         },
         set: function(value) {
             if (!!value && typeof value === "string") {
-                AppConfig._WEB_COMPONENT_TAG_NAME = value;
+                this._WEB_COMPONENT_TAG_NAME = value;
             }
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(AppConfig, "CANVAS_SIZE", {
+    Object.defineProperty(AppConfig.prototype, "CANVAS_SIZE", {
         get: function() {
-            return AppConfig._CANVAS_SIZE;
+            return this._CANVAS_SIZE;
         },
         set: function(value) {
             if (!!value && !!(value === null || value === void 0 ? void 0 : value.width) && !!(value === null || value === void 0 ? void 0 : value.height)) {
-                AppConfig._CANVAS_SIZE = value;
+                this._CANVAS_SIZE = value;
             } else {
                 console.warn("CANVAS_SIZE denied");
             }
@@ -96,13 +112,13 @@ var AppConfig = function(_super) {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(AppConfig, "LAYERS", {
+    Object.defineProperty(AppConfig.prototype, "LAYERS", {
         get: function() {
-            return AppConfig._LAYERS;
+            return this._LAYERS;
         },
         set: function(value) {
             if (!!value && !!(value === null || value === void 0 ? void 0 : value.length)) {
-                AppConfig._LAYERS = value;
+                this._LAYERS = value;
             }
         },
         enumerable: false,
@@ -111,29 +127,11 @@ var AppConfig = function(_super) {
     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
-    } ];
-})();
-
 reflect();
 
 var ComponentService = function() {
     function ComponentService() {}
-    ComponentService.getTemplate = function(template, wrapOptions) {
+    ComponentService.prototype.getTemplate = function(template, wrapOptions) {
         var options = {
             tag: "div"
         };
@@ -157,7 +155,7 @@ var ComponentService = function() {
         }
         return wrap;
     };
-    ComponentService.getStyle = function(css) {
+    ComponentService.prototype.getStyle = function(css) {
         if (!!css === false) return null;
         var style = document.createElement("style");
         style.type = "text/css";
@@ -167,112 +165,69 @@ var ComponentService = function() {
     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;
+    function CanvasComponent(appConfig, loggerService, toolLayerService) {
+        var _this = _super.call(this) || this;
+        _this.appConfig = appConfig;
+        _this.loggerService = loggerService;
+        _this.toolLayerService = toolLayerService;
+        _this.template = '\n    <div id="event-listener"></div>\n    <canvas id="sc-canvas"></canvas>\n  ';
+        _this.css = "\n    #event-listener {\n      position: absolute;\n      z-index: ".concat(_this.toolLayerService.getLayerIndex("normal"), ";\n    }\n  ");
+        _this.subscriptions = {
+            click: [],
+            mousemove: [],
+            mousedown: [],
+            mouseup: []
+        };
+        _this._cursorStyle = {
+            before: null,
+            current: "default"
+        };
+        _this.loggerService.components.add({
+            info: {
+                name: "canvas",
+                description: "canvas component"
+            },
+            prototype: _this
+        });
+        return _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", {
+    CanvasComponent.prototype.getComponent = function() {
+        var canvasTemplate = this.getTemplate(this.template);
+        var canvasStyle = this.getStyle(this.css);
+        this.canvas = canvasTemplate.getElementsByTagName("canvas")[0];
+        this.canvas.width = this.appConfig.CANVAS_SIZE.width;
+        this.canvas.height = this.appConfig.CANVAS_SIZE.height;
+        this.ctx = this.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";
+        this.eventListener = canvasTemplate.querySelector("#event-listener");
+        this.eventListener.style.width = this.appConfig.CANVAS_SIZE.width + "px";
+        this.eventListener.style.height = this.appConfig.CANVAS_SIZE.height + "px";
         return {
             canvasTemplate,
             canvasStyle
         };
     };
-    CanvasComponent.getCanvasSelector = function() {
+    CanvasComponent.prototype.getCanvasSelector = function() {
         return "#sc-canvas";
     };
-    Object.defineProperty(CanvasComponent, "cursorStyle", {
+    Object.defineProperty(CanvasComponent.prototype, "cursorStyle", {
         set: function(styleName) {
             if (!!styleName) {
-                CanvasComponent._cursorStyle.before = CanvasComponent._cursorStyle.current;
-                CanvasComponent._cursorStyle.current = styleName;
-                CanvasComponent.eventListener.style.cursor = styleName;
+                this._cursorStyle.before = this._cursorStyle.current;
+                this._cursorStyle.current = styleName;
+                this.eventListener.style.cursor = styleName;
             } else {
-                CanvasComponent.eventListener.style.cursor = "default";
+                this.eventListener.style.cursor = "default";
             }
         },
         enumerable: false,
         configurable: true
     });
-    CanvasComponent.getCursorPosition = function(event) {
-        var rect = CanvasComponent.canvas.getBoundingClientRect();
+    CanvasComponent.prototype.getCursorPosition = function(event) {
+        var rect = this.canvas.getBoundingClientRect();
         var x = event.clientX - rect.left;
         var y = event.clientY - rect.top;
         return {
@@ -280,16 +235,17 @@ var CanvasComponent = function(_super) {
             y
         };
     };
-    CanvasComponent.subscribe = function(eventName, action) {
-        CanvasComponent.subscriptions[eventName].push(action);
+    CanvasComponent.prototype.subscribe = function(eventName, action) {
+        this.subscriptions[eventName].push(action);
     };
-    CanvasComponent.simulateSubscriptions = function() {
-        var eventNames = Object.keys(CanvasComponent.subscriptions);
+    CanvasComponent.prototype.simulateSubscriptions = function() {
+        var _this = this;
+        var eventNames = Object.keys(this.subscriptions);
         eventNames.forEach((function(eventName) {
-            var actionsList = CanvasComponent.subscriptions[eventName];
+            var actionsList = _this.subscriptions[eventName];
             if (!!actionsList.length) {
-                CanvasComponent.eventListener.addEventListener(eventName, (function(event) {
-                    var cursorPosition = CanvasComponent.getCursorPosition(event);
+                _this.eventListener.addEventListener(eventName, (function(event) {
+                    var cursorPosition = _this.getCursorPosition(event);
                     actionsList.forEach((function(action) {
                         action(event, cursorPosition);
                     }));
@@ -297,175 +253,826 @@ var CanvasComponent = function(_super) {
             }
         }));
     };
-    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({
+    return CanvasComponent;
+}(ComponentService);
+
+reflect();
+
+var ExcretionsComponent = function(_super) {
+    __extends(ExcretionsComponent, _super);
+    function ExcretionsComponent(toolService, loggerService, toolLayerService, canvasComponent) {
+        var _this = _super.call(this) || this;
+        _this.toolService = toolService;
+        _this.loggerService = loggerService;
+        _this.toolLayerService = toolLayerService;
+        _this.canvasComponent = canvasComponent;
+        _this.template = "";
+        _this.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  ';
+        _this._excretionDefaultStyle = [ "excretion" ];
+        _this.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(_this.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(_this.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  ");
+        _this._excretions = [];
+        _this._excretionState = "abandoned";
+        _this._excretionActivity = "abandoned";
+        _this._excretionToolState = "abandoned";
+        _this._tempCoords = [];
+        _this.excretionsCoords = [];
+        _this._additionStyle = "default";
+        _this.tool = {
+            id: 1,
+            name: "excretion",
+            onAction: function() {
+                return _this.setToolState("taken");
+            },
+            offAction: function() {
+                return _this.setToolState("abandoned");
+            },
+            support: function() {
+                _this.clearExcretionsCoords();
+                _this.additionStyle = "default";
+            }
+        };
+        _this.toolService.add(_this.tool);
+        _this.loggerService.components.add({
             info: {
-                name: "canvas",
-                description: "canvas component"
+                name: "excretion",
+                description: "excretion component"
             },
-            prototype: CanvasComponent
+            prototype: _this
         });
-    })();
-    return CanvasComponent;
-}(ComponentService);
+        return _this;
+    }
+    Object.defineProperty(ExcretionsComponent.prototype, "additionStyle", {
+        get: function() {
+            return this._additionStyle;
+        },
+        set: function(value) {
+            this._additionStyle = value;
+            this.applyExcretionStyle();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ExcretionsComponent.prototype.applyExcretionStyle = function() {
+        switch (this._additionStyle) {
+          case "crop":
+            this.determineCropStyle();
+            break;
 
-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;
+          case "default":
+            this.determineDefaultStyle();
+            break;
+
+          default:
+            this.determineDefaultStyle();
+            break;
         }
-        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();
+    ExcretionsComponent.prototype.determineCropStyle = function() {
+        this._excretions.forEach((function(excretion) {
+            if (!!excretion === false) return;
+            if (!excretion.classList.contains("excretion_crop")) {
+                excretion.classList.add("excretion_crop");
             }
-        } 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();
-        }
+    ExcretionsComponent.prototype.determineDefaultStyle = function() {
+        var _this = this;
+        this._excretions.forEach((function(excretion) {
+            if (!!excretion === false) return;
+            excretion.classList = _this._excretionDefaultStyle;
+        }));
     };
-    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";
+    ExcretionsComponent.prototype.getComponent = function() {
+        var wrapOptions = {
+            className: "excretions-wrap"
+        };
+        var excretionsTemplate = this.getTemplate(this.template, wrapOptions);
+        var excretionsStyle = this.getStyle(this.css);
+        this.excretionWrap = excretionsTemplate;
+        this.emmit();
+        return {
+            excretionsTemplate,
+            excretionsStyle
+        };
     };
-    ToolService.before = null;
-    ToolService.active = null;
-    ToolService.registry = [];
-    return ToolService;
-}();
+    Object.defineProperty(ExcretionsComponent.prototype, "excretionState", {
+        set: function(state) {
+            this._excretionState = state;
+            this.applyExcretionStyle();
+            switch (state) {
+              case "abandoned":
+                this.canvasComponent.cursorStyle = "default";
+                break;
 
-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;
-}();
+              case "create":
+                this.canvasComponent.cursorStyle = "crosshair";
+                break;
 
-var range = function(start, end) {
-    var result = [];
-    for (var i = start; i < end; i++) {
-        result.push(i);
-    }
-    return result;
-};
+              case "add":
+                this.canvasComponent.cursorStyle = "copy";
+                break;
 
-var Filter = function() {
-    function Filter(ctx) {
-        this.ctx = ctx;
-    }
-    Filter.prototype.setImageSize = function(size) {
-        this.imageSize = size;
+              case "remove":
+                this.canvasComponent.cursorStyle = "alias";
+                break;
+
+              default:
+                this.canvasComponent.cursorStyle = "default";
+                break;
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ExcretionsComponent.prototype.setToolState = function(toolState) {
+        this._excretionToolState = toolState;
+        switch (toolState) {
+          case "abandoned":
+            this.excretionState = "abandoned";
+            this._excretionActivity = "abandoned";
+            break;
+
+          case "taken":
+            this.excretionState = "create";
+            break;
+
+          default:
+            this.excretionState = "abandoned";
+            this._excretionActivity = "abandoned";
+            break;
+        }
     };
-    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;
+    ExcretionsComponent.prototype.clearExcretionsCoords = function() {
+        console.log("clear!");
+        this._excretions.forEach((function(excretion) {
+            return excretion.remove();
+        }));
+        this._excretions = [];
+        this.excretionsCoords = [];
     };
-    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;
+    ExcretionsComponent.prototype.getTempCoords = function() {
+        var startCoords = this._tempCoords[0];
+        var endCoords = this._tempCoords[1];
+        var coords = Object.assign(startCoords, endCoords);
+        this._tempCoords = [];
+        return coords;
     };
-    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);
+    ExcretionsComponent.prototype.endExcretion = function() {
+        var coords = this.getTempCoords();
+        this.excretionsCoords.push(coords);
+        this._excretionActivity = "end";
+        console.log("this.excretionsCoords", this.excretionsCoords);
     };
-    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];
+    ExcretionsComponent.prototype.emmit = function() {
+        var _this = this;
+        this.canvasComponent.subscribe("mousedown", (function(event, cursorPosition) {
+            var toolState = _this._excretionToolState;
+            if (toolState === "abandoned") return;
+            var state = _this._excretionState;
+            if (state === "create") {
+                var wrapOptions = {
+                    className: _this._excretionDefaultStyle[0]
+                };
+                var excretionTemplate = _this.getTemplate(_this.templateExcretion, wrapOptions);
+                _this.clearExcretionsCoords();
+                var tempStart = {
+                    start: cursorPosition
+                };
+                excretionTemplate.style.left = "".concat(tempStart.start.x, "px");
+                excretionTemplate.style.top = "".concat(tempStart.start.y, "px");
+                var excretionElement = _this.excretionWrap.appendChild(excretionTemplate);
+                _this._excretions.push(excretionElement);
+                _this._tempCoords.push(tempStart);
+            }
+            if (state === "add") {
+                var tempStart = {
+                    start: cursorPosition
+                };
+                _this._tempCoords.push(tempStart);
+            }
+            _this.applyExcretionStyle();
+            _this._excretionActivity = "active";
         }));
-        console.log("cleared", cleared);
-        return {
-            imageData: tempImageData,
-            size: tempSize
-        };
-    };
-    Filter.prototype.getSizeOfSparseMatrix = function(RGBAMatrix, tempSize) {
-        var leftIndex;
+        this.canvasComponent.subscribe("mousemove", (function(event, cursorPosition) {
+            var toolState = _this._excretionToolState;
+            if (toolState === "abandoned") return;
+            var activity = _this._excretionActivity;
+            if (event.altKey && _this._excretionState !== "abandoned") {
+                _this._excretionState = "add";
+            }
+            if (activity === "abandoned") return;
+            if (activity === "active") {
+                var excretionLastIndex = _this._excretions.length - 1;
+                var excretion = _this._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)");
+                }
+            }
+        }));
+        this.canvasComponent.subscribe("mouseup", (function(event, cursorPosition) {
+            var toolState = _this._excretionToolState;
+            if (toolState === "abandoned") return;
+            var state = _this._excretionState;
+            if (state === "abandoned") return;
+            if (state === "create" || state === "add") {
+                var tempEnd = {
+                    end: cursorPosition
+                };
+                _this._tempCoords.push(tempEnd);
+                _this.endExcretion();
+            }
+        }));
+    };
+    return ExcretionsComponent;
+}(ComponentService);
+
+reflect();
+
+var LoadingComponent = function(_super) {
+    __extends(LoadingComponent, _super);
+    function LoadingComponent(loggerService, eventService) {
+        var _this = _super.call(this) || this;
+        _this.loggerService = loggerService;
+        _this.eventService = eventService;
+        _this.template = '\n    <span class="loader"></span>\n  ';
+        _this.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  ';
+        _this.loggerService.components.add({
+            info: {
+                name: "loading",
+                description: "loading component"
+            },
+            prototype: _this
+        });
+        return _this;
+    }
+    LoadingComponent.prototype.getComponent = function() {
+        var wrapOptions = {
+            className: "loading-wrapper"
+        };
+        var loadingTemplate = this.getTemplate(this.template, wrapOptions);
+        var loadingStyle = this.getStyle(this.css);
+        this.loading = loadingTemplate;
+        this.subscribeLoadingStart();
+        this.subscribeLoadingEnd();
+        return {
+            loadingTemplate,
+            loadingStyle
+        };
+    };
+    LoadingComponent.prototype.hide = function() {
+        this.loading.style.display = "none";
+    };
+    LoadingComponent.prototype.view = function() {
+        this.loading.style.display = "flex";
+    };
+    LoadingComponent.prototype.subscribeLoadingStart = function() {
+        var _this = this;
+        var controlEvent = {
+            name: "loading-start",
+            action: function() {
+                return _this.view();
+            }
+        };
+        this.eventService.subcribe(controlEvent);
+    };
+    LoadingComponent.prototype.subscribeLoadingEnd = function() {
+        var _this = this;
+        var controlEvent = {
+            name: "loading-end",
+            action: function() {
+                return _this.hide();
+            }
+        };
+        this.eventService.subcribe(controlEvent);
+    };
+    return LoadingComponent;
+}(ComponentService);
+
+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;
+}();
+
+reflect();
+
+var PipetteComponent = function(_super) {
+    __extends(PipetteComponent, _super);
+    function PipetteComponent(toolService, loggerService, canvasComponent) {
+        var _this = _super.call(this) || this;
+        _this.toolService = toolService;
+        _this.loggerService = loggerService;
+        _this.canvasComponent = canvasComponent;
+        _this.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  ';
+        _this.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  ";
+        _this._pipetteState = "abandoned";
+        _this.tool = {
+            id: 0,
+            name: "pipette",
+            onAction: function() {
+                return _this.setState("taken");
+            },
+            offAction: function() {
+                return _this.setState("abandoned");
+            }
+        };
+        _this.toolService.add(_this.tool);
+        _this.loggerService.components.add({
+            info: {
+                name: "pipette",
+                description: "pipette component"
+            },
+            prototype: _this
+        });
+        return _this;
+    }
+    Object.defineProperty(PipetteComponent.prototype, "pipetteColor", {
+        get: function() {
+            return this._pipetteColor;
+        },
+        set: function(color) {
+            this._pipetteColor = color;
+            this._pipetteColorElement.style.borderColor = this._pipetteColor;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    PipetteComponent.prototype.getComponent = function() {
+        var wrapOptions = {
+            className: "pipette"
+        };
+        var pipetteTemplate = this.getTemplate(this.template, wrapOptions);
+        var pipetteStyle = this.getStyle(this.css);
+        this.pipette = pipetteTemplate;
+        this._pipetteColorElement = pipetteTemplate.querySelector(".pipette_color");
+        this.emmit();
+        return {
+            pipetteTemplate,
+            pipetteStyle
+        };
+    };
+    PipetteComponent.prototype.setState = function(state) {
+        this._pipetteState = state;
+        switch (state) {
+          case "abandoned":
+            return this.hide();
+
+          case "taken":
+            return this.show();
+
+          case "selected-color":
+            return this.show();
+
+          default:
+            return this.hide();
+        }
+    };
+    PipetteComponent.prototype.emmit = function() {
+        var _this = this;
+        this.canvasComponent.subscribe("mousemove", (function(event, cursorPosition) {
+            var state = _this._pipetteState;
+            if (state === "taken" || state === "selected-color") {
+                var x = cursorPosition.x, y = cursorPosition.y;
+                _this.pipette.style.left = "".concat(x + 10, "px");
+                _this.pipette.style.top = "".concat(y + 10, "px");
+            }
+        }));
+        this.canvasComponent.subscribe("click", (function(event, cursorPosition) {
+            var state = _this._pipetteState;
+            if (state === "taken" || state === "selected-color") {
+                console.log("pipetteState", state);
+                if (state === "taken") {
+                    _this.setColorFromChoosenPixel(cursorPosition);
+                    _this.setState("selected-color");
+                }
+                if (state === "selected-color") {
+                    _this.setColorFromChoosenPixel(cursorPosition);
+                }
+            }
+        }));
+    };
+    PipetteComponent.prototype.setColorFromChoosenPixel = function(cursorPosition) {
+        var x = cursorPosition.x, y = cursorPosition.y;
+        var pixel = this.canvasComponent.ctx.getImageData(x, y, 1, 1).data;
+        var hexPixel = Convert.rgbToHex(pixel[0], pixel[1], pixel[2]);
+        this.pipetteColor = hexPixel;
+    };
+    PipetteComponent.prototype.show = function() {
+        this.pipette.style.display = "flex";
+        this.canvasComponent.cursorStyle = "default";
+    };
+    PipetteComponent.prototype.hide = function() {
+        this.pipette.style.display = "none";
+        this.canvasComponent.cursorStyle = "default";
+    };
+    return PipetteComponent;
+}(ComponentService);
+
+var SlotComponent = function(_super) {
+    __extends(SlotComponent, _super);
+    function SlotComponent(loggerService) {
+        var _this = _super.call(this) || this;
+        _this.loggerService = loggerService;
+        _this.template = '\n    <slot class="slot"></slot>\n  ';
+        _this.css = "";
+        _this.loggerService.components.add({
+            info: {
+                name: "slot",
+                description: "slot component"
+            },
+            prototype: _this
+        });
+        return _this;
+    }
+    SlotComponent.prototype.getComponent = function(slotName) {
+        var wrapOptions = {
+            className: "slot-wrapper"
+        };
+        var slotTemplate = this.getTemplate(this.template, wrapOptions);
+        var slotStyle = this.getStyle(this.css);
+        this.slot = slotTemplate.querySelector("slot");
+        this.slot.name = slotName;
+        return {
+            slotTemplate,
+            slotStyle
+        };
+    };
+    return SlotComponent;
+}(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() {
+        this.eventList = [];
+    }
+    EventService.prototype.subcribe = function(controlEvent) {
+        var eventAtom = __assign({
+            id: (new Guid4).generate()
+        }, controlEvent);
+        this.eventList.push(eventAtom);
+    };
+    EventService.prototype.dispatch = function(name, eventArgs) {
+        var eventAtom = this.eventList.find((function(event) {
+            return event.name === name;
+        }));
+        eventAtom.action(eventArgs);
+    };
+    EventService.prototype.applyEvents = function(baseElement) {
+        var _a;
+        (_a = this.eventList) === null || _a === void 0 ? void 0 : _a.forEach((function(event) {
+            baseElement.addEventListener(event.name, event.action);
+        }));
+    };
+    return EventService;
+}();
+
+var LoggerService = function() {
+    function LoggerService() {
+        this.log = {
+            components: [],
+            services: [],
+            planed: []
+        };
+    }
+    Object.defineProperty(LoggerService.prototype, "components", {
+        get: function() {
+            return this.getMethods("components");
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(LoggerService.prototype, "services", {
+        get: function() {
+            return this.getMethods("services");
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(LoggerService.prototype, "planed", {
+        get: function() {
+            return this.getMethods("planed");
+        },
+        enumerable: false,
+        configurable: true
+    });
+    LoggerService.prototype.getMethods = function(fields) {
+        var proto = this;
+        return {
+            add: function(logItem) {
+                proto._add(fields, logItem);
+            },
+            get: function() {
+                var args = [];
+                for (var _i = 0; _i < arguments.length; _i++) {
+                    args[_i] = arguments[_i];
+                }
+                proto._get.apply(proto, args);
+            }
+        };
+    };
+    LoggerService.prototype._add = function(field, logItem) {
+        this.log[field].push(logItem);
+    };
+    LoggerService.prototype._get = function(field, name) {
+        return this.log[field].find((function(logItem) {
+            return logItem.info.name === name;
+        }));
+    };
+    return LoggerService;
+}();
+
+var ToolLayerService = function() {
+    function ToolLayerService(appConfig) {
+        this.appConfig = appConfig;
+        this.multiplier = 1e3;
+    }
+    ToolLayerService.prototype.getLayerIndex = function(layerName) {
+        var layer = this.appConfig.LAYERS.find((function(layer) {
+            return layer.name === layerName;
+        }));
+        var zIndex = this.multiplier * layer.index;
+        return zIndex;
+    };
+    return ToolLayerService;
+}();
+
+var ToolService = function() {
+    function ToolService(canvasComponent) {
+        this.canvasComponent = canvasComponent;
+        this.before = null;
+        this.active = null;
+        this.registry = [];
+    }
+    ToolService.prototype.add = function(tool) {
+        var hasRegisteredTool = this.registry.find((function(registeredTool) {
+            return registeredTool.id === tool.id;
+        }));
+        if (hasRegisteredTool) {
+            console.warn("Tool has been previously registered!");
+            return false;
+        }
+        this.registry.push(tool);
+        return true;
+    };
+    ToolService.prototype.setActive = function(id) {
+        var _a, _b, _c;
+        if (((_a = this.active) === null || _a === void 0 ? void 0 : _a.id) === id) return console.warn("Tool is already active");
+        if (!!((_b = this.active) === null || _b === void 0 ? void 0 : _b.offAction)) {
+            this.active.offAction();
+        }
+        var registeredTool = this.registry.find((function(registeredTool) {
+            return registeredTool.id === id;
+        }));
+        if (!!registeredTool) {
+            this.active = registeredTool;
+            if (!!((_c = this.active) === null || _c === void 0 ? void 0 : _c.onAction)) {
+                this.active.onAction();
+            }
+        } else {
+            console.warn("Tool has not previously been registered with this identifier");
+        }
+    };
+    ToolService.prototype.offActive = function(id) {
+        if (!!id) {
+            if (this.active.id === id) {
+                this.off();
+            } else {
+                return console.warn('ID active tool is not "'.concat(id, '"'));
+            }
+        } else {
+            this.off();
+        }
+    };
+    ToolService.prototype.off = function() {
+        var _a;
+        if (!!((_a = this.active) === null || _a === void 0 ? void 0 : _a.offAction)) {
+            this.active.offAction();
+        }
+        this.before = this.active;
+        this.active = null;
+        this.canvasComponent.cursorStyle = "default";
+    };
+    return ToolService;
+}();
+
+var range = function(start, end) {
+    var result = [];
+    for (var i = start; i < end; i++) {
+        result.push(i);
+    }
+    return result;
+};
+
+var Filter = 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];
+            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];
@@ -547,285 +1154,57 @@ var Filter = function() {
             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();
+        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;
     };
-    return Store;
-}();
-
-var AppStore = function() {
-    function AppStore() {}
-    AppStore.subscribe = function(to, completeIt) {
-        if (to === "history") {
-            AppStore.store.historyState.emerge(completeIt);
-        }
+    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 AppStore;
+    return Filter;
 }();
 
-(function() {
-    AppStore.store = new Store(new ImageState, new HistoryState);
-})();
-
 var CropService = function() {
-    function CropService() {}
-    CropService.setup = function() {
-        ExcretionsComponent.additionStyle = "crop";
+    function CropService(appConfig, appStoreRepository, excretionComponent) {
+        this.appConfig = appConfig;
+        this.appStoreRepository = appStoreRepository;
+        this.excretionComponent = excretionComponent;
+    }
+    CropService.prototype.setup = function() {
+        this.excretionComponent.additionStyle = "crop";
     };
-    CropService.crop = function(ctx) {
+    CropService.prototype.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;
+        if (!!((_a = this.excretionComponent.excretionsCoords) === null || _a === void 0 ? void 0 : _a.length) === false) return;
+        var filter = new Filter(this.appConfig, ctx);
+        var options = this.options;
         var _b = filter.copyExtendedModel(options), imageData = _b.imageData, size = _b.size;
         var position = {
-            x: AppConfig.CANVAS_SIZE.width / 2 - size.width / 2,
-            y: AppConfig.CANVAS_SIZE.height / 2 - size.height / 2
+            x: this.appConfig.CANVAS_SIZE.width / 2 - size.width / 2,
+            y: this.appConfig.CANVAS_SIZE.height / 2 - size.height / 2
         };
         filter.update(imageData, position);
-        AppStore.store.imageState.reduce({
+        this.appStoreRepository.store.imageState.reduce({
             tempImageData: imageData,
             position,
             size: {
@@ -834,16 +1213,16 @@ var CropService = function() {
             }
         }, "Use crop");
     };
-    CropService.viewCropButton = function() {
-        var cropButtons = ExcretionsComponent.excretionWrap.querySelectorAll(".crop-button");
+    CropService.prototype.viewCropButton = function() {
+        var cropButtons = this.excretionComponent.excretionWrap.querySelectorAll(".crop-button");
         var lastCropButtonIndex = cropButtons.length - 1;
         var cropButton = cropButtons[lastCropButtonIndex];
         cropButton.classList.add("crop-button--view");
     };
-    Object.defineProperty(CropService, "options", {
+    Object.defineProperty(CropService.prototype, "options", {
         get: function() {
-            var excretionLastIndex = ExcretionsComponent.excretionsCoords.length - 1;
-            var coords = ExcretionsComponent.excretionsCoords[excretionLastIndex];
+            var excretionLastIndex = this.excretionComponent.excretionsCoords.length - 1;
+            var coords = this.excretionComponent.excretionsCoords[excretionLastIndex];
             var excWidth = Math.abs(coords.start.x - coords.end.x);
             var excHeight = Math.abs(coords.start.y - coords.end.y);
             return {
@@ -859,593 +1238,247 @@ var CropService = function() {
     return CropService;
 }();
 
-reflect();
-
-var ExcretionsComponent = function(_super) {
-    __extends(ExcretionsComponent, _super);
-    function ExcretionsComponent() {
-        return _super !== null && _super.apply(this, arguments) || this;
+var HistoryState = function() {
+    function HistoryState(throughHistoryService) {
+        this.throughHistoryService = throughHistoryService;
+        this.default = {
+            historyLines: []
+        };
+        this._historyLines = this.default.historyLines;
+        this.reset();
     }
-    Object.defineProperty(ExcretionsComponent, "additionStyle", {
+    Object.defineProperty(HistoryState.prototype, "historyLines", {
         get: function() {
-            return ExcretionsComponent._additionStyle;
-        },
-        set: function(value) {
-            ExcretionsComponent._additionStyle = value;
-            ExcretionsComponent.applyExcretionStyle();
+            return this._historyLines;
         },
         enumerable: false,
         configurable: true
     });
-    ExcretionsComponent.applyExcretionStyle = function() {
-        switch (ExcretionsComponent._additionStyle) {
-          case "crop":
-            ExcretionsComponent.determineCropStyle();
-            break;
-
-          case "default":
-            ExcretionsComponent.determineDefaultStyle();
-            break;
-
-          default:
-            ExcretionsComponent.determineDefaultStyle();
+    HistoryState.prototype.reduce = function(name, payload) {
+        var reducer = new Reducer(this);
+        switch (name) {
+          case "SET_HISTORY":
+            reducer.setHistoryLines(payload);
+            this.throughHistoryService.clearCache();
             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";
+          case "UPDATE_HISTORY":
+            reducer.updateHistoryLines(payload);
+            this.throughHistoryService.clearCache();
             break;
 
-          case "taken":
-            ExcretionsComponent.excretionState = "create";
+          case "REDO":
+            reducer.updateHistoryLines(payload);
             break;
 
-          default:
-            ExcretionsComponent.excretionState = "abandoned";
-            ExcretionsComponent._excretionActivity = "abandoned";
+          case "UNDO":
+            reducer.popHistoryLines();
             break;
         }
     };
-    ExcretionsComponent.clearExcretionsCoords = function() {
-        console.log("clear!");
-        ExcretionsComponent._excretions.forEach((function(excretion) {
-            return excretion.remove();
-        }));
-        ExcretionsComponent._excretions = [];
-        ExcretionsComponent.excretionsCoords = [];
+    HistoryState.prototype.emerge = function(completeIt) {
+        this._emergeCompleteIt = completeIt;
     };
-    ExcretionsComponent.getTempCoords = function() {
-        var startCoords = ExcretionsComponent._tempCoords[0];
-        var endCoords = ExcretionsComponent._tempCoords[1];
-        var coords = Object.assign(startCoords, endCoords);
-        ExcretionsComponent._tempCoords = [];
-        return coords;
+    HistoryState.prototype.reset = function() {
+        this.reduce("SET_HISTORY", this.default);
     };
-    ExcretionsComponent.endExcretion = function() {
-        var coords = ExcretionsComponent.getTempCoords();
-        ExcretionsComponent.excretionsCoords.push(coords);
-        ExcretionsComponent._excretionActivity = "end";
-        console.log("ExcretionsComponent.excretionsCoords", ExcretionsComponent.excretionsCoords);
+    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);
+        }
     };
-    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();
-            }
-        }));
+    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);
+        }
     };
-    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";
+    Reducer.prototype.popHistoryLines = function() {
+        this.state._historyLines.pop();
+        if (!!this.state._emergeCompleteIt) {
+            this.state._emergeCompleteIt(this.state._historyLines);
         }
     };
-    (function() {
-        ToolService.add(ExcretionsComponent.tool);
-        LoggerService.components.add({
-            info: {
-                name: "excretion",
-                description: "excretion component"
-            },
-            prototype: ExcretionsComponent
-        });
-    })();
-    return ExcretionsComponent;
-}(ComponentService);
+    return Reducer;
+}();
 
-var Guid4 = function() {
-    function Guid4() {
-        this.stack = [];
+var ImageState = function() {
+    function ImageState(appStoreRepository) {
+        this.appStoreRepository = appStoreRepository;
+        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();
     }
-    Guid4.prototype.generate = function() {
-        return this.Guid4;
-    };
-    Object.defineProperty(Guid4.prototype, "finite", {
+    Object.defineProperty(ImageState.prototype, "position", {
         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");
-            }
+            return this._position;
         },
         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", {
+    });
+    Object.defineProperty(ImageState.prototype, "size", {
         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;
+            return this._size;
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(Guid4.prototype, "Guid4", {
+    Object.defineProperty(ImageState.prototype, "tempImageData", {
         get: function() {
-            var base = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx";
-            var regex = /[xy]/g;
-            var guid4 = base.replace(regex, this.formating);
-            return guid4;
+            return this._tempImageData;
         },
         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);
-                }
-            };
+    ImageState.prototype.reduce = function(payload, title) {
+        var isUpdate = false;
+        if (!!(payload === null || payload === void 0 ? void 0 : payload.position)) {
+            this._position = payload.position;
         }
-    };
-    GenerateAttempt.prototype.defaultRun = function(action) {
-        var attemptCondition = this._attempt.current <= this._attempt.max;
-        while (attemptCondition) {
-            action(this._attempt);
-            this._attempt.current++;
+        if (!!(payload === null || payload === void 0 ? void 0 : payload.size)) {
+            this._size = payload.size;
         }
-    };
-    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++;
+        if (!!(payload === null || payload === void 0 ? void 0 : payload.tempImageData)) {
+            this._tempImageData = payload.tempImageData;
+            isUpdate = true;
         }
-    };
-    GenerateAttempt.prototype.throwError = function(condition, message) {
-        if (condition) {
-            throw new Error(message);
+        if (isUpdate) {
+            this.addToHistory("".concat(title || "reduce image"));
         }
     };
-    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);
-        }));
+    ImageState.prototype.reset = function() {
+        this.reduce(this.default, "reset to default");
     };
-    EventService.eventList = [];
-    return EventService;
-}();
-
-reflect();
-
-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();
+    ImageState.prototype.getEntry = function() {
         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();
-            }
+            position: this._position,
+            size: this._size,
+            imageData: this._tempImageData
         };
-        EventService.subcribe(controlEvent);
     };
-    LoadingComponent.subscribeLoadingEnd = function() {
-        var controlEvent = {
-            name: "loading-end",
-            action: function() {
-                return LoadingComponent.hide();
-            }
+    ImageState.prototype.addToHistory = function(title) {
+        var stateValue = {
+            position: this._position,
+            size: this._size,
+            tempImageData: this._tempImageData
         };
-        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
+        this.appStoreRepository.store.historyState.reduce("UPDATE_HISTORY", {
+            view: title,
+            stateName: "image",
+            stateValue
         });
-    })();
-    return LoadingComponent;
-}(ComponentService);
-
-reflect();
+    };
+    return ImageState;
+}();
 
-var PipetteComponent = function(_super) {
-    __extends(PipetteComponent, _super);
-    function PipetteComponent() {
-        return _super !== null && _super.apply(this, arguments) || this;
+var Store = function() {
+    function Store(imageState, historyState) {
+        this.imageState = imageState;
+        this.historyState = historyState;
     }
-    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
-        };
+    Store.prototype.reset = function() {
+        this.imageState.reset();
+        this.historyState.reset();
     };
-    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();
+    return Store;
+}();
 
-          default:
-            return PipetteComponent.hide();
+var AppStore = function() {
+    function AppStore(throughHistoryService, appStoreRepository) {
+        this.throughHistoryService = throughHistoryService;
+        this.appStoreRepository = appStoreRepository;
+        this.appStoreRepository.store = new Store(new ImageState(this.appStoreRepository), new HistoryState(this.throughHistoryService));
+    }
+    AppStore.prototype.subscribe = function(to, completeIt) {
+        if (to === "history") {
+            this.appStoreRepository.store.historyState.emerge(completeIt);
         }
     };
-    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);
-                }
+    return AppStore;
+}();
+
+var ThroughHistoryService = function() {
+    function ThroughHistoryService(appConfig, appStoreRepository) {
+        this.appConfig = appConfig;
+        this.appStoreRepository = appStoreRepository;
+        this.cache = [];
+    }
+    ThroughHistoryService.prototype.current = function() {
+        var history = this.appStoreRepository.store.historyState.historyLines;
+        var lastIndex = history.length - 1;
+        return history[lastIndex];
+    };
+    ThroughHistoryService.prototype.prev = function() {
+        var history = this.appStoreRepository.store.historyState.historyLines;
+        var prevIndex = history.length - 2;
+        return history[prevIndex];
+    };
+    ThroughHistoryService.prototype.undo = function(ctx) {
+        var current = this.current();
+        var prev = this.prev();
+        if (!!(current === null || current === void 0 ? void 0 : current.stateValue)) {
+            this.cache.unshift(current);
+            this.appStoreRepository.store.historyState.reduce("UNDO");
+            if (prev === null || prev === void 0 ? void 0 : prev.stateValue) {
+                this.updateCanvas(ctx, prev.stateValue);
             }
-        }));
+        }
     };
-    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");
+    ThroughHistoryService.prototype.redo = function(ctx) {
+        var firstInCache = this.cache.shift();
+        if (!!(firstInCache === null || firstInCache === void 0 ? void 0 : firstInCache.stateValue)) {
+            this.appStoreRepository.store.historyState.reduce("REDO", firstInCache);
+            this.updateCanvas(ctx, firstInCache.stateValue);
         }
     };
-    (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
-        };
+    ThroughHistoryService.prototype.clearCache = function() {
+        this.cache = [];
     };
-    SlotComponent.template = '\n    <slot class="slot"></slot>\n  ';
-    SlotComponent.css = "";
-    (function() {
-        LoggerService.components.add({
-            info: {
-                name: "slot",
-                description: "slot component"
-            },
-            prototype: SlotComponent
+    ThroughHistoryService.prototype.recovery = function(project) {
+        this.appStoreRepository.store.historyState.reduce("SET_HISTORY", {
+            historyLines: project.state.history
         });
-    })();
-    return SlotComponent;
-}(ComponentService);
+        this.cache = project.state.cache;
+    };
+    ThroughHistoryService.prototype.updateCanvas = function(ctx, stateValue) {
+        var filter = new Filter(this.appConfig, ctx);
+        filter.update(stateValue.tempImageData, stateValue.position);
+    };
+    return ThroughHistoryService;
+}();
+
+var AppStoreRepository = function() {
+    function AppStoreRepository() {}
+    return AppStoreRepository;
+}();
 
 reflect();
 
@@ -1534,25 +1567,38 @@ var WebComponent = function(_super) {
         var shadowRoot = _this.attachShadow({
             mode: "open"
         });
+        var loggerService = new LoggerService;
+        var toolLayerService = new ToolLayerService(_this.appConfig);
+        var eventService = new EventService;
         var webComponentWrapper = new WebComponentWrapper;
-        var _a = CanvasComponent.getComponent(), canvasTemplate = _a.canvasTemplate, canvasStyle = _a.canvasStyle;
+        var canvasComponent = new CanvasComponent(_this.appConfig, loggerService, toolLayerService);
+        var toolService = new ToolService(canvasComponent);
+        var appStoreRepository = new AppStoreRepository;
+        var throughHistoryService = new ThroughHistoryService(_this.appConfig, appStoreRepository);
+        new AppStore(throughHistoryService, appStoreRepository);
+        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;
+        var pipetteComponent = new PipetteComponent(toolService, loggerService, canvasComponent);
+        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;
+        var slotComponent = new SlotComponent(loggerService);
+        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;
+        var excretionsComponent = new ExcretionsComponent(toolService, loggerService, toolLayerService, canvasComponent);
+        new CropService(_this.appConfig, appStoreRepository, excretionsComponent);
+        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;
+        var loadingComponent = new LoadingComponent(loggerService, eventService);
+        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);
+        canvasComponent.simulateSubscriptions();
+        eventService.applyEvents(webComponentWrapper.baseElement);
         _this.addEventListener("initial", (function() {
             _this.dispatchEvent(new CustomEvent("get-editor-element", {
                 detail: {
                     editorElement: canvasElement,
-                    canvasSelector: CanvasComponent.getCanvasSelector()
+                    canvasSelector: canvasComponent.getCanvasSelector()
                 }
             }));
         }));
@@ -1563,8 +1609,8 @@ var WebComponent = function(_super) {
 
 var VagueFilter = function(_super) {
     __extends(VagueFilter, _super);
-    function VagueFilter(ctx, options) {
-        var _this = _super.call(this, ctx) || this;
+    function VagueFilter(appConfig, ctx, options) {
+        var _this = _super.call(this, appConfig, ctx) || this;
         _this.filterList = [ "pixel" ];
         _this.options = options;
         return _this;
@@ -1732,57 +1778,63 @@ var VagueFilter = function(_super) {
 }(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);
+    function DrawService(appConfig, appStoreRepository, eventService) {
+        this.appConfig = appConfig;
+        this.appStoreRepository = appStoreRepository;
+        this.eventService = eventService;
+    }
+    DrawService.prototype.drawImage = function(ctx, src, options) {
+        var _this = this;
+        this.imageProcessor = new SCImage(this.appConfig, src, ctx);
+        this.imageProcessor.draw(options).then((function() {
+            var filter = new Filter(_this.appConfig, ctx);
             var zeroPosition = {
                 x: 0,
                 y: 0
             };
             var imageData = filter.copy(zeroPosition);
-            AppStore.store.imageState.reduce({
+            _this.appStoreRepository.store.imageState.reduce({
                 tempImageData: imageData,
                 position: zeroPosition,
-                size: AppConfig.CANVAS_SIZE
+                size: _this.appConfig.CANVAS_SIZE
             }, "Loaded image");
         }));
     };
-    DrawService.drawProject = function(ctx, project) {
+    DrawService.prototype.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({
+        this.imageProcessor = new PCImage(this.appConfig, project, ctx);
+        this.imageProcessor.draw();
+        this.appStoreRepository.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) {
+    DrawService.prototype.drawSmoothImage = function(useStore, options, filterOptions) {
+        var _this = this;
+        var filterArgs = this.getFilterArgs(useStore, options);
+        this.eventService.dispatch("loading-start");
+        if (!this.imageProcessor) {
             throw new Error("No valid ImageProcessor instance found");
         }
-        DrawService.imageProcessor.vague(filterArgs, filterOptions).then(DrawService.updateImageStateAfterVague).finally((function() {
-            return EventService.dispatch("loading-end");
+        this.imageProcessor.vague(filterArgs, filterOptions).then(this.updateImageStateAfterVague).finally((function() {
+            return _this.eventService.dispatch("loading-end");
         }));
     };
-    DrawService.updateImageStateAfterVague = function(data) {
+    DrawService.prototype.updateImageStateAfterVague = function(data) {
         var imageData = data.imageData, position = data.position, size = data.size, quality = data.quality;
-        AppStore.store.imageState.reduce({
+        this.appStoreRepository.store.imageState.reduce({
             tempImageData: imageData,
             position,
             size
         }, "[Filter Vague] quality: ".concat(quality));
     };
-    DrawService.getFilterArgs = function(useStore, options) {
+    DrawService.prototype.getFilterArgs = function(useStore, options) {
         var _a, _b;
         var filterArgs;
-        var store = AppStore.store.imageState;
+        var store = this.appStoreRepository.store.imageState;
         if (useStore) {
             filterArgs = {
                 x: store.position.x,
@@ -1810,7 +1862,8 @@ var DrawService = function() {
 }();
 
 var SCImage = function() {
-    function SCImage(src, ctx) {
+    function SCImage(appConfig, src, ctx) {
+        this.appConfig = appConfig;
         this.img = new Image;
         this.img.src = src;
         this.ctx = ctx;
@@ -1829,7 +1882,7 @@ var SCImage = function() {
                         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 ]);
+                            drawImageArgs = drawImageArgs.concat([ _this.appConfig.CANVAS_SIZE.width, _this.appConfig.CANVAS_SIZE.height ]);
                         }
                     }
                     (_a = _this.ctx).drawImage.apply(_a, __spreadArray([ protoImg ], drawImageArgs, false));
@@ -1842,14 +1895,15 @@ var SCImage = function() {
         }));
     };
     SCImage.prototype.vague = function(options, filterOptions) {
-        var filter = new VagueFilter(this.ctx, options);
+        var filter = new VagueFilter(this.appConfig, this.ctx, options);
         return filter.on("pixel", filterOptions);
     };
     return SCImage;
 }();
 
 var PCImage = function() {
-    function PCImage(project, ctx) {
+    function PCImage(appConfig, project, ctx) {
+        this.appConfig = appConfig;
         this.project = project;
         this.ctx = ctx;
     }
@@ -1858,7 +1912,7 @@ var PCImage = function() {
         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);
+                var filter = new Filter(_this.appConfig, _this.ctx);
                 filter.update(imageData, position);
                 _this.ctx.save();
                 resolve(_this);
@@ -1868,21 +1922,23 @@ var PCImage = function() {
         }));
     };
     PCImage.prototype.vague = function(options, filterOptions) {
-        var filter = new VagueFilter(this.ctx, options);
+        var filter = new VagueFilter(this.appConfig, this.ctx, options);
         return filter.on("pixel", filterOptions);
     };
     return PCImage;
 }();
 
 var DownloadService = function() {
-    function DownloadService() {}
-    DownloadService.getDataUrl = function() {
-        return CanvasComponent.canvas.toDataURL();
+    function DownloadService(canvasComponent) {
+        this.canvasComponent = canvasComponent;
+    }
+    DownloadService.prototype.getDataUrl = function() {
+        return this.canvasComponent.canvas.toDataURL();
     };
-    DownloadService.download = function(filename) {
+    DownloadService.prototype.download = function(filename) {
         var link = document.createElement("a");
         link.download = "".concat(filename || "image", ".png");
-        link.href = DownloadService.getDataUrl();
+        link.href = this.getDataUrl();
         link.click();
     };
     return DownloadService;
@@ -2036,34 +2092,40 @@ var LocalStorageProjectModule = function() {
 
 var ProjectFileProjectModule = function() {
     function ProjectFileProjectModule() {}
-    ProjectFileProjectModule.setSerializer = function(serializer) {
-        ProjectFileProjectModule._serializer = serializer;
+    ProjectFileProjectModule.prototype.setSerializer = function(serializer) {
+        this._serializer = serializer;
     };
     ProjectFileProjectModule.prototype.getProjects = function() {
-        return ProjectFileProjectModule._serializer.getProjects();
+        return this._serializer.getProjects();
     };
     ProjectFileProjectModule.prototype.getProject = function(projectId) {
-        return ProjectFileProjectModule._serializer.getProject(projectId);
+        return this._serializer.getProject(projectId);
     };
     ProjectFileProjectModule.prototype.saveProject = function(project) {
-        return ProjectFileProjectModule._serializer.saveProject(project);
+        return this._serializer.saveProject(project);
     };
     ProjectFileProjectModule.prototype.saveProjects = function(projects) {
-        return ProjectFileProjectModule._serializer.saveProjects(projects);
+        return this._serializer.saveProjects(projects);
     };
     ProjectFileProjectModule.prototype.removeProject = function(projectId) {
-        return ProjectFileProjectModule._serializer.removeProject(projectId);
+        return this._serializer.removeProject(projectId);
     };
     ProjectFileProjectModule.prototype.updateProject = function(project) {
-        return ProjectFileProjectModule._serializer.updateProject(project);
+        return this._serializer.updateProject(project);
     };
     return ProjectFileProjectModule;
 }();
 
 var ProjectsService = function() {
-    function ProjectsService() {}
-    ProjectsService.on = function(moduleName) {
-        var module = ProjectsService._modules.find((function(module) {
+    function ProjectsService() {
+        this._modules = [];
+        this._serializer = ProjectFileSerializer;
+        this._addModule("LocalStorage", new LocalStorageProjectModule);
+        this._addModule("File", new ProjectFileProjectModule);
+    }
+    ProjectsService.prototype.on = function(moduleName) {
+        var _this = this;
+        var module = this._modules.find((function(module) {
             return module.name === moduleName;
         }));
         if (!module) {
@@ -2071,23 +2133,17 @@ var ProjectsService = function() {
         }
         return {
             getSerializerInstance: function(file) {
-                return new ProjectsService._serializer(file);
+                return new _this._serializer(file);
             },
             instance: module.instance
         };
     };
-    ProjectsService._addModule = function(name, module) {
-        ProjectsService._modules.push({
+    ProjectsService.prototype._addModule = function(name, module) {
+        this._modules.push({
             name,
             instance: module
         });
     };
-    ProjectsService._modules = [];
-    ProjectsService._serializer = ProjectFileSerializer;
-    (function() {
-        ProjectsService._addModule("LocalStorage", new LocalStorageProjectModule);
-        ProjectsService._addModule("File", new ProjectFileProjectModule);
-    })();
     return ProjectsService;
 }();
 
@@ -2104,28 +2160,33 @@ var Project = function() {
 }();
 
 var PullProjectService = function() {
-    function PullProjectService() {}
-    Object.defineProperty(PullProjectService, "project", {
+    function PullProjectService(throughHistoryService, appStoreRepository) {
+        this.throughHistoryService = throughHistoryService;
+        this.appStoreRepository = appStoreRepository;
+        this._project = new Project;
+    }
+    Object.defineProperty(PullProjectService.prototype, "project", {
         get: function() {
             return this._project;
         },
         enumerable: false,
         configurable: true
     });
-    PullProjectService.refreshProject = function() {
-        PullProjectService._project = new Project;
+    PullProjectService.prototype.refreshProject = function() {
+        this._project = new Project;
     };
-    PullProjectService.updateProject = function(project) {
+    PullProjectService.prototype.updateProject = function(project) {
+        var _this = this;
         Object.keys(project).forEach((function(key) {
-            PullProjectService._project[key] = project[key];
+            _this._project[key] = project[key];
         }));
     };
-    PullProjectService.pull = function(name, description) {
+    PullProjectService.prototype.pull = function(name, description) {
         var project = new Project;
         var state = {
-            cache: ThroughHistoryService.cache,
-            history: AppStore.store.historyState.historyLines,
-            current: AppStore.store.imageState.getEntry()
+            cache: this.throughHistoryService.cache,
+            history: this.appStoreRepository.store.historyState.historyLines,
+            current: this.appStoreRepository.store.imageState.getEntry()
         };
         project.id = (new Guid4).generate();
         project.description = description || "New Project";
@@ -2133,19 +2194,21 @@ var PullProjectService = function() {
         project.state = state;
         this._project = project;
     };
-    PullProjectService._project = new Project;
     return PullProjectService;
 }();
 
 reflect();
 
 var CanvasEditorEngine = function() {
-    function CanvasEditorEngine(webComponentTagName) {
-        AppConfig.WEB_COMPONENT_TAG_NAME = webComponentTagName;
+    function CanvasEditorEngine(appConfig) {
+        this.appConfig = appConfig;
     }
     CanvasEditorEngine.prototype.getInitial = function() {
+        Object.defineProperty(WebComponent.prototype, "appConfig", {
+            value: this.appConfig
+        });
         return {
-            tag: AppConfig.WEB_COMPONENT_TAG_NAME,
+            tag: this.appConfig.WEB_COMPONENT_TAG_NAME,
             component: WebComponent
         };
     };
@@ -2154,8 +2217,8 @@ var CanvasEditorEngine = function() {
 
 var StaticCanvasEditorEngine = function(_super) {
     __extends(StaticCanvasEditorEngine, _super);
-    function StaticCanvasEditorEngine(webComponentTagName) {
-        return _super.call(this, webComponentTagName) || this;
+    function StaticCanvasEditorEngine(appConfig) {
+        return _super.call(this, appConfig) || this;
     }
     StaticCanvasEditorEngine.prototype.init = function() {
         var customElementRegistry = window.customElements;
@@ -2167,15 +2230,9 @@ var StaticCanvasEditorEngine = function(_super) {
 
 var VueCanvasEditorEngine = function(_super) {
     __extends(VueCanvasEditorEngine, _super);
-    function VueCanvasEditorEngine(webComponentTagName) {
-        return _super.call(this, webComponentTagName) || this;
+    function VueCanvasEditorEngine(appConfig) {
+        return _super.call(this, appConfig) || this;
     }
-    VueCanvasEditorEngine.prototype.getContext2D = function() {
-        return CanvasComponent.ctx;
-    };
-    VueCanvasEditorEngine.prototype.getCanvas = function() {
-        return CanvasComponent.canvas;
-    };
     return VueCanvasEditorEngine;
 }(CanvasEditorEngine);