canvas-editor-engine 2.1.8 → 2.1.10

package/dist/index.d.ts

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

package/dist/index.mjs

@@ -1467,134 +1467,258 @@ var AppStoreRepository = function() {
     return AppStoreRepository;
 }();
 
-reflect();
-
-var WebComponentWrapper = function() {
-    function WebComponentWrapper() {
-        var base = document.createElement("div");
-        base.className = "wc-editor";
-        base.style.position = "relative";
-        base.style.display = "flex";
-        base.style.overflow = "hidden";
-        var stylesWrap = document.createElement("div");
-        stylesWrap.className = "styles-wrap";
-        var editorWrap = document.createElement("div");
-        editorWrap.className = "editor-wrap";
-        editorWrap.style.position = "relative";
-        editorWrap.style.display = "flex";
-        editorWrap.style.overflow = "hidden";
-        var toolsWrap = document.createElement("div");
-        toolsWrap.className = "tools-wrap";
-        toolsWrap.style.position = "relative";
-        toolsWrap.style.display = "flex";
-        base.appendChild(stylesWrap);
-        base.appendChild(editorWrap);
-        base.appendChild(toolsWrap);
-        this.baseElement = base;
-        this.stylesWrapElement = stylesWrap;
-        this.editorWrapElement = editorWrap;
-        this.toolsWrapElement = toolsWrap;
-        this._baseStyle();
+var ProjectFileSerializer = function() {
+    function ProjectFileSerializer(file) {
+        this.projects = [];
+        this.file = file;
+        this.projects = this.load();
     }
-    Object.defineProperty(WebComponentWrapper.prototype, "base", {
-        get: function() {
-            return this._methods(this.baseElement);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(WebComponentWrapper.prototype, "editorWrap", {
-        get: function() {
-            return this._methods(this.editorWrapElement);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(WebComponentWrapper.prototype, "stylesWrap", {
-        get: function() {
-            return this._methods(this.stylesWrapElement);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(WebComponentWrapper.prototype, "toolsWrap", {
-        get: function() {
-            return this._methods(this.toolsWrapElement);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    WebComponentWrapper.prototype._methods = function(elementWrapper) {
-        var _this = this;
-        return {
-            add: function(component, style) {
-                return _this._add(elementWrapper, component, style);
+    ProjectFileSerializer.prototype.load = function() {
+        var rowProjects = JSON.parse(this.file);
+        var imageDataProcessor = function(temp) {
+            var data;
+            var size;
+            if (temp === null || temp === void 0 ? void 0 : temp.current) {
+                data = Object.values(temp === null || temp === void 0 ? void 0 : temp.current.imageData.data);
+                size = temp === null || temp === void 0 ? void 0 : temp.current.size;
+            } else if (temp === null || temp === void 0 ? void 0 : temp.state) {
+                data = Object.values(temp === null || temp === void 0 ? void 0 : temp.state.tempImageData.data);
+                size = temp === null || temp === void 0 ? void 0 : temp.state.size;
             }
+            var tempImageData = new ImageData(size.width, size.height);
+            data.forEach((function(colorAtom, index) {
+                tempImageData.data[index] = colorAtom;
+            }));
+            return tempImageData;
         };
+        var projects = rowProjects.map((function(project) {
+            project.state.current.imageData = imageDataProcessor({
+                current: project.state.current
+            });
+            project.state.history = project.state.history.map((function(historyLine) {
+                historyLine.stateValue.tempImageData = imageDataProcessor({
+                    state: historyLine.stateValue
+                });
+                return historyLine;
+            }));
+            project.state.cache = project.state.cache.map((function(historyLine) {
+                historyLine.stateValue.tempImageData = imageDataProcessor({
+                    state: historyLine.stateValue
+                });
+                return historyLine;
+            }));
+            return project;
+        }));
+        return projects;
     };
-    WebComponentWrapper.prototype._add = function(elementWrapper, component, style) {
-        var componentElement = elementWrapper.appendChild(component);
-        if (!!style) {
-            this.stylesWrapElement.appendChild(style);
+    ProjectFileSerializer.prototype.saveProjects = function(projects) {
+        this.file.save(JSON.stringify(projects));
+    };
+    ProjectFileSerializer.prototype.getProjects = function() {
+        return this.projects;
+    };
+    ProjectFileSerializer.prototype.getProject = function(projectId) {
+        return this.projects.find((function(project) {
+            return project.id === projectId;
+        }));
+    };
+    ProjectFileSerializer.prototype.saveProject = function(project) {
+        var index = this.projects.findIndex((function(p) {
+            return p.id === project.id;
+        }));
+        if (index !== -1) {
+            this.projects[index] = project;
+        } else {
+            this.projects.push(project);
         }
-        return componentElement;
+        this.saveProjects(this.projects);
     };
-    WebComponentWrapper.prototype._baseStyle = function() {
-        var style = document.createElement("style");
-        style.innerHTML = "\n      * {\n        user-select: none;\n      }\n    ";
-        this.stylesWrapElement.appendChild(style);
+    ProjectFileSerializer.prototype.removeProject = function(projectId) {
+        var index = this.projects.findIndex((function(p) {
+            return p.id === projectId;
+        }));
+        if (index !== -1) {
+            this.projects.splice(index, 1);
+            this.saveProjects(this.projects);
+        }
     };
-    return WebComponentWrapper;
+    ProjectFileSerializer.prototype.updateProject = function(project) {
+        var index = this.projects.findIndex((function(p) {
+            return p.id === project.id;
+        }));
+        if (index !== -1) {
+            this.projects[index] = project;
+            this.saveProjects(this.projects);
+        }
+    };
+    return ProjectFileSerializer;
 }();
 
-var WebComponent = function(_super) {
-    __extends(WebComponent, _super);
-    function WebComponent() {
-        var _this = _super.call(this) || this;
-        var shadowRoot = _this.attachShadow({
-            mode: "open"
+var LocalStorageProjectModule = function() {
+    function LocalStorageProjectModule() {
+        this.projectsKey = "cee-projects";
+    }
+    LocalStorageProjectModule.prototype.getProjectsFromLocalStorage = function() {
+        var projects = localStorage.getItem(this.projectsKey);
+        return projects ? JSON.parse(projects) : [];
+    };
+    LocalStorageProjectModule.prototype.getProjectFromLocalStorage = function(projectId) {
+        var projects = this.getProjectsFromLocalStorage();
+        return projects.find((function(project) {
+            return project.id === projectId;
+        }));
+    };
+    LocalStorageProjectModule.prototype.saveProjectsToLocalStorage = function(projects) {
+        localStorage.setItem(this.projectsKey, JSON.stringify(projects));
+    };
+    LocalStorageProjectModule.prototype.saveProjectToLocalStorage = function(project) {
+        var projects = this.getProjectsFromLocalStorage();
+        projects.push(project);
+        localStorage.setItem(this.projectsKey, JSON.stringify(projects));
+    };
+    LocalStorageProjectModule.prototype.removeProjectFromLocalStorage = function(projectId) {
+        var projects = this.getProjectsFromLocalStorage();
+        var index = projects.findIndex((function(project) {
+            return project.id === projectId;
+        }));
+        projects.splice(index, 1);
+        localStorage.setItem(this.projectsKey, JSON.stringify(projects));
+    };
+    LocalStorageProjectModule.prototype.updateProjectInLocalStorage = function(project) {
+        var projects = this.getProjectsFromLocalStorage();
+        var index = projects.findIndex((function(p) {
+            return p.id === project.id;
+        }));
+        projects[index] = project;
+        localStorage.setItem(this.projectsKey, JSON.stringify(projects));
+    };
+    LocalStorageProjectModule.prototype.getProjects = function() {
+        return this.getProjectsFromLocalStorage();
+    };
+    LocalStorageProjectModule.prototype.getProject = function(projectId) {
+        return this.getProjectFromLocalStorage(projectId);
+    };
+    LocalStorageProjectModule.prototype.saveProjects = function(projects) {
+        this.saveProjectsToLocalStorage(projects);
+    };
+    LocalStorageProjectModule.prototype.saveProject = function(project) {
+        this.saveProjectToLocalStorage(project);
+    };
+    LocalStorageProjectModule.prototype.removeProject = function(projectId) {
+        this.removeProjectFromLocalStorage(projectId);
+    };
+    LocalStorageProjectModule.prototype.updateProject = function(project) {
+        this.updateProjectInLocalStorage(project);
+    };
+    return LocalStorageProjectModule;
+}();
+
+var ProjectFileProjectModule = function() {
+    function ProjectFileProjectModule() {}
+    ProjectFileProjectModule.prototype.setSerializer = function(serializer) {
+        this._serializer = serializer;
+    };
+    ProjectFileProjectModule.prototype.getProjects = function() {
+        return this._serializer.getProjects();
+    };
+    ProjectFileProjectModule.prototype.getProject = function(projectId) {
+        return this._serializer.getProject(projectId);
+    };
+    ProjectFileProjectModule.prototype.saveProject = function(project) {
+        return this._serializer.saveProject(project);
+    };
+    ProjectFileProjectModule.prototype.saveProjects = function(projects) {
+        return this._serializer.saveProjects(projects);
+    };
+    ProjectFileProjectModule.prototype.removeProject = function(projectId) {
+        return this._serializer.removeProject(projectId);
+    };
+    ProjectFileProjectModule.prototype.updateProject = function(project) {
+        return this._serializer.updateProject(project);
+    };
+    return ProjectFileProjectModule;
+}();
+
+var ProjectsService = function() {
+    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) {
+            throw new Error("Module ".concat(moduleName, " not found"));
+        }
+        return {
+            getSerializerInstance: function(file) {
+                return new _this._serializer(file);
+            },
+            instance: module.instance
+        };
+    };
+    ProjectsService.prototype._addModule = function(name, module) {
+        this._modules.push({
+            name,
+            instance: module
         });
-        _this.webComponentWrapper = new WebComponentWrapper;
-        shadowRoot.appendChild(_this.webComponentWrapper.baseElement);
-        return _this;
+    };
+    return ProjectsService;
+}();
+
+var Project = function() {
+    function Project() {
+        this.id = null;
+        this.name = null;
+        this.description = null;
+        this.state = null;
+        this.createdAt = new Date(Date.now()).toString();
+        this.updatedAt = new Date(Date.now()).toString();
     }
-    WebComponent.prototype.init = function(appConfig) {
-        this.appConfig = appConfig;
-        var loggerService = new LoggerService;
-        var toolLayerService = new ToolLayerService(this.appConfig);
-        var eventService = new EventService;
-        this.canvasComponent = new CanvasComponent(this.appConfig, loggerService, toolLayerService);
-        var toolService = new ToolService(this.canvasComponent);
-        var appStoreRepository = new AppStoreRepository;
-        var throughHistoryService = new ThroughHistoryService(this.appConfig, appStoreRepository);
-        new AppStore(throughHistoryService, appStoreRepository);
-        var _a = this.canvasComponent.getComponent(), canvasTemplate = _a.canvasTemplate, canvasStyle = _a.canvasStyle;
-        this.canvasElement = this.webComponentWrapper.editorWrap.add(canvasTemplate, canvasStyle);
-        var pipetteComponent = new PipetteComponent(toolService, loggerService, this.canvasComponent);
-        var _b = pipetteComponent.getComponent(), pipetteTemplate = _b.pipetteTemplate, pipetteStyle = _b.pipetteStyle;
-        this.webComponentWrapper.editorWrap.add(pipetteTemplate, pipetteStyle);
-        var slotComponent = new SlotComponent(loggerService);
-        var _c = slotComponent.getComponent("tools"), slotTemplate = _c.slotTemplate, slotStyle = _c.slotStyle;
-        this.webComponentWrapper.toolsWrap.add(slotTemplate, slotStyle);
-        var excretionsComponent = new ExcretionsComponent(toolService, loggerService, toolLayerService, this.canvasComponent);
-        new CropService(this.appConfig, appStoreRepository, excretionsComponent);
-        var _d = excretionsComponent.getComponent(), excretionsTemplate = _d.excretionsTemplate, excretionsStyle = _d.excretionsStyle;
-        this.webComponentWrapper.editorWrap.add(excretionsTemplate, excretionsStyle);
-        var loadingComponent = new LoadingComponent(loggerService, eventService);
-        var _e = loadingComponent.getComponent(), loadingTemplate = _e.loadingTemplate, loadingStyle = _e.loadingStyle;
-        this.webComponentWrapper.editorWrap.add(loadingTemplate, loadingStyle);
-        this.canvasComponent.simulateSubscriptions();
-        eventService.applyEvents(this.webComponentWrapper.baseElement);
-        return this.initial();
+    return Project;
+}();
+
+var PullProjectService = function() {
+    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.prototype.refreshProject = function() {
+        this._project = new Project;
     };
-    WebComponent.prototype.initial = function() {
-        return {
-            editorElement: this.canvasElement,
-            canvasSelector: this.canvasComponent.getCanvasSelector()
+    PullProjectService.prototype.updateProject = function(project) {
+        var _this = this;
+        Object.keys(project).forEach((function(key) {
+            _this._project[key] = project[key];
+        }));
+    };
+    PullProjectService.prototype.pull = function(name, description) {
+        var project = new Project;
+        var state = {
+            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";
+        project.name = name || "New Project";
+        project.state = state;
+        this._project = project;
     };
-    return WebComponent;
-}(HTMLElement);
+    return PullProjectService;
+}();
 
 var VagueFilter = function(_super) {
     __extends(VagueFilter, _super);
@@ -1847,345 +1971,225 @@ var DrawService = function() {
         }
         return filterArgs;
     };
-    return DrawService;
-}();
-
-var SCImage = function() {
-    function SCImage(appConfig, src, ctx) {
-        this.appConfig = appConfig;
-        this.img = new Image;
-        this.img.src = src;
-        this.ctx = ctx;
-    }
-    SCImage.prototype.draw = function(options) {
-        var _this = this;
-        var proto = this;
-        var protoImg = this.img;
-        return new Promise((function(resolve, reject) {
-            try {
-                protoImg.addEventListener("load", (function() {
-                    var _a;
-                    var _b, _c;
-                    var drawImageArgs = [ options.position.x, options.position.y ];
-                    if (options.size !== "initial") {
-                        if (!!((_b = options.size) === null || _b === void 0 ? void 0 : _b.width) && !!((_c = options.size) === null || _c === void 0 ? void 0 : _c.height)) {
-                            drawImageArgs = drawImageArgs.concat([ options.size.width, options.size.height ]);
-                        } else {
-                            drawImageArgs = drawImageArgs.concat([ _this.appConfig.CANVAS_SIZE.width, _this.appConfig.CANVAS_SIZE.height ]);
-                        }
-                    }
-                    (_a = _this.ctx).drawImage.apply(_a, __spreadArray([ protoImg ], drawImageArgs, false));
-                    _this.ctx.save();
-                    resolve(proto);
-                }));
-            } catch (error) {
-                reject(error);
-            }
-        }));
-    };
-    SCImage.prototype.vague = function(options, filterOptions) {
-        var filter = new VagueFilter(this.appConfig, this.ctx, options);
-        return filter.on("pixel", filterOptions);
-    };
-    return SCImage;
-}();
-
-var PCImage = function() {
-    function PCImage(appConfig, project, ctx) {
-        this.appConfig = appConfig;
-        this.project = project;
-        this.ctx = ctx;
-    }
-    PCImage.prototype.draw = function(options) {
-        var _this = this;
-        var _a = this.project.state.current, imageData = _a.imageData, position = _a.position;
-        return new Promise((function(resolve, reject) {
-            try {
-                var filter = new Filter(_this.appConfig, _this.ctx);
-                filter.update(imageData, position);
-                _this.ctx.save();
-                resolve(_this);
-            } catch (error) {
-                reject(error);
-            }
-        }));
-    };
-    PCImage.prototype.vague = function(options, filterOptions) {
-        var filter = new VagueFilter(this.appConfig, this.ctx, options);
-        return filter.on("pixel", filterOptions);
-    };
-    return PCImage;
-}();
-
-var DownloadService = function() {
-    function DownloadService(canvasComponent) {
-        this.canvasComponent = canvasComponent;
-    }
-    DownloadService.prototype.getDataUrl = function() {
-        return this.canvasComponent.canvas.toDataURL();
-    };
-    DownloadService.prototype.download = function(filename) {
-        var link = document.createElement("a");
-        link.download = "".concat(filename || "image", ".png");
-        link.href = this.getDataUrl();
-        link.click();
-    };
-    return DownloadService;
-}();
-
-var ProjectFileSerializer = function() {
-    function ProjectFileSerializer(file) {
-        this.projects = [];
-        this.file = file;
-        this.projects = this.load();
-    }
-    ProjectFileSerializer.prototype.load = function() {
-        var rowProjects = JSON.parse(this.file);
-        var imageDataProcessor = function(temp) {
-            var data;
-            var size;
-            if (temp === null || temp === void 0 ? void 0 : temp.current) {
-                data = Object.values(temp === null || temp === void 0 ? void 0 : temp.current.imageData.data);
-                size = temp === null || temp === void 0 ? void 0 : temp.current.size;
-            } else if (temp === null || temp === void 0 ? void 0 : temp.state) {
-                data = Object.values(temp === null || temp === void 0 ? void 0 : temp.state.tempImageData.data);
-                size = temp === null || temp === void 0 ? void 0 : temp.state.size;
-            }
-            var tempImageData = new ImageData(size.width, size.height);
-            data.forEach((function(colorAtom, index) {
-                tempImageData.data[index] = colorAtom;
-            }));
-            return tempImageData;
-        };
-        var projects = rowProjects.map((function(project) {
-            project.state.current.imageData = imageDataProcessor({
-                current: project.state.current
-            });
-            project.state.history = project.state.history.map((function(historyLine) {
-                historyLine.stateValue.tempImageData = imageDataProcessor({
-                    state: historyLine.stateValue
-                });
-                return historyLine;
-            }));
-            project.state.cache = project.state.cache.map((function(historyLine) {
-                historyLine.stateValue.tempImageData = imageDataProcessor({
-                    state: historyLine.stateValue
-                });
-                return historyLine;
-            }));
-            return project;
-        }));
-        return projects;
-    };
-    ProjectFileSerializer.prototype.saveProjects = function(projects) {
-        this.file.save(JSON.stringify(projects));
-    };
-    ProjectFileSerializer.prototype.getProjects = function() {
-        return this.projects;
-    };
-    ProjectFileSerializer.prototype.getProject = function(projectId) {
-        return this.projects.find((function(project) {
-            return project.id === projectId;
-        }));
-    };
-    ProjectFileSerializer.prototype.saveProject = function(project) {
-        var index = this.projects.findIndex((function(p) {
-            return p.id === project.id;
-        }));
-        if (index !== -1) {
-            this.projects[index] = project;
-        } else {
-            this.projects.push(project);
-        }
-        this.saveProjects(this.projects);
-    };
-    ProjectFileSerializer.prototype.removeProject = function(projectId) {
-        var index = this.projects.findIndex((function(p) {
-            return p.id === projectId;
-        }));
-        if (index !== -1) {
-            this.projects.splice(index, 1);
-            this.saveProjects(this.projects);
-        }
-    };
-    ProjectFileSerializer.prototype.updateProject = function(project) {
-        var index = this.projects.findIndex((function(p) {
-            return p.id === project.id;
-        }));
-        if (index !== -1) {
-            this.projects[index] = project;
-            this.saveProjects(this.projects);
-        }
-    };
-    return ProjectFileSerializer;
-}();
-
-var LocalStorageProjectModule = function() {
-    function LocalStorageProjectModule() {
-        this.projectsKey = "cee-projects";
-    }
-    LocalStorageProjectModule.prototype.getProjectsFromLocalStorage = function() {
-        var projects = localStorage.getItem(this.projectsKey);
-        return projects ? JSON.parse(projects) : [];
-    };
-    LocalStorageProjectModule.prototype.getProjectFromLocalStorage = function(projectId) {
-        var projects = this.getProjectsFromLocalStorage();
-        return projects.find((function(project) {
-            return project.id === projectId;
-        }));
-    };
-    LocalStorageProjectModule.prototype.saveProjectsToLocalStorage = function(projects) {
-        localStorage.setItem(this.projectsKey, JSON.stringify(projects));
-    };
-    LocalStorageProjectModule.prototype.saveProjectToLocalStorage = function(project) {
-        var projects = this.getProjectsFromLocalStorage();
-        projects.push(project);
-        localStorage.setItem(this.projectsKey, JSON.stringify(projects));
-    };
-    LocalStorageProjectModule.prototype.removeProjectFromLocalStorage = function(projectId) {
-        var projects = this.getProjectsFromLocalStorage();
-        var index = projects.findIndex((function(project) {
-            return project.id === projectId;
-        }));
-        projects.splice(index, 1);
-        localStorage.setItem(this.projectsKey, JSON.stringify(projects));
-    };
-    LocalStorageProjectModule.prototype.updateProjectInLocalStorage = function(project) {
-        var projects = this.getProjectsFromLocalStorage();
-        var index = projects.findIndex((function(p) {
-            return p.id === project.id;
-        }));
-        projects[index] = project;
-        localStorage.setItem(this.projectsKey, JSON.stringify(projects));
-    };
-    LocalStorageProjectModule.prototype.getProjects = function() {
-        return this.getProjectsFromLocalStorage();
-    };
-    LocalStorageProjectModule.prototype.getProject = function(projectId) {
-        return this.getProjectFromLocalStorage(projectId);
-    };
-    LocalStorageProjectModule.prototype.saveProjects = function(projects) {
-        this.saveProjectsToLocalStorage(projects);
-    };
-    LocalStorageProjectModule.prototype.saveProject = function(project) {
-        this.saveProjectToLocalStorage(project);
-    };
-    LocalStorageProjectModule.prototype.removeProject = function(projectId) {
-        this.removeProjectFromLocalStorage(projectId);
-    };
-    LocalStorageProjectModule.prototype.updateProject = function(project) {
-        this.updateProjectInLocalStorage(project);
-    };
-    return LocalStorageProjectModule;
+    return DrawService;
 }();
 
-var ProjectFileProjectModule = function() {
-    function ProjectFileProjectModule() {}
-    ProjectFileProjectModule.prototype.setSerializer = function(serializer) {
-        this._serializer = serializer;
-    };
-    ProjectFileProjectModule.prototype.getProjects = function() {
-        return this._serializer.getProjects();
-    };
-    ProjectFileProjectModule.prototype.getProject = function(projectId) {
-        return this._serializer.getProject(projectId);
-    };
-    ProjectFileProjectModule.prototype.saveProject = function(project) {
-        return this._serializer.saveProject(project);
-    };
-    ProjectFileProjectModule.prototype.saveProjects = function(projects) {
-        return this._serializer.saveProjects(projects);
-    };
-    ProjectFileProjectModule.prototype.removeProject = function(projectId) {
-        return this._serializer.removeProject(projectId);
+var SCImage = function() {
+    function SCImage(appConfig, src, ctx) {
+        this.appConfig = appConfig;
+        this.img = new Image;
+        this.img.src = src;
+        this.ctx = ctx;
+    }
+    SCImage.prototype.draw = function(options) {
+        var _this = this;
+        var proto = this;
+        var protoImg = this.img;
+        return new Promise((function(resolve, reject) {
+            try {
+                protoImg.addEventListener("load", (function() {
+                    var _a;
+                    var _b, _c;
+                    var drawImageArgs = [ options.position.x, options.position.y ];
+                    if (options.size !== "initial") {
+                        if (!!((_b = options.size) === null || _b === void 0 ? void 0 : _b.width) && !!((_c = options.size) === null || _c === void 0 ? void 0 : _c.height)) {
+                            drawImageArgs = drawImageArgs.concat([ options.size.width, options.size.height ]);
+                        } else {
+                            drawImageArgs = drawImageArgs.concat([ _this.appConfig.CANVAS_SIZE.width, _this.appConfig.CANVAS_SIZE.height ]);
+                        }
+                    }
+                    (_a = _this.ctx).drawImage.apply(_a, __spreadArray([ protoImg ], drawImageArgs, false));
+                    _this.ctx.save();
+                    resolve(proto);
+                }));
+            } catch (error) {
+                reject(error);
+            }
+        }));
     };
-    ProjectFileProjectModule.prototype.updateProject = function(project) {
-        return this._serializer.updateProject(project);
+    SCImage.prototype.vague = function(options, filterOptions) {
+        var filter = new VagueFilter(this.appConfig, this.ctx, options);
+        return filter.on("pixel", filterOptions);
     };
-    return ProjectFileProjectModule;
+    return SCImage;
 }();
 
-var ProjectsService = function() {
-    function ProjectsService() {
-        this._modules = [];
-        this._serializer = ProjectFileSerializer;
-        this._addModule("LocalStorage", new LocalStorageProjectModule);
-        this._addModule("File", new ProjectFileProjectModule);
+var PCImage = function() {
+    function PCImage(appConfig, project, ctx) {
+        this.appConfig = appConfig;
+        this.project = project;
+        this.ctx = ctx;
     }
-    ProjectsService.prototype.on = function(moduleName) {
+    PCImage.prototype.draw = function(options) {
         var _this = this;
-        var module = this._modules.find((function(module) {
-            return module.name === moduleName;
+        var _a = this.project.state.current, imageData = _a.imageData, position = _a.position;
+        return new Promise((function(resolve, reject) {
+            try {
+                var filter = new Filter(_this.appConfig, _this.ctx);
+                filter.update(imageData, position);
+                _this.ctx.save();
+                resolve(_this);
+            } catch (error) {
+                reject(error);
+            }
         }));
-        if (!module) {
-            throw new Error("Module ".concat(moduleName, " not found"));
-        }
-        return {
-            getSerializerInstance: function(file) {
-                return new _this._serializer(file);
-            },
-            instance: module.instance
-        };
     };
-    ProjectsService.prototype._addModule = function(name, module) {
-        this._modules.push({
-            name,
-            instance: module
-        });
+    PCImage.prototype.vague = function(options, filterOptions) {
+        var filter = new VagueFilter(this.appConfig, this.ctx, options);
+        return filter.on("pixel", filterOptions);
     };
-    return ProjectsService;
+    return PCImage;
 }();
 
-var Project = function() {
-    function Project() {
-        this.id = null;
-        this.name = null;
-        this.description = null;
-        this.state = null;
-        this.createdAt = new Date(Date.now()).toString();
-        this.updatedAt = new Date(Date.now()).toString();
+var DownloadService = function() {
+    function DownloadService(canvasComponent) {
+        this.canvasComponent = canvasComponent;
     }
-    return Project;
+    DownloadService.prototype.getDataUrl = function() {
+        return this.canvasComponent.canvas.toDataURL();
+    };
+    DownloadService.prototype.download = function(filename) {
+        var link = document.createElement("a");
+        link.download = "".concat(filename || "image", ".png");
+        link.href = this.getDataUrl();
+        link.click();
+    };
+    return DownloadService;
 }();
 
-var PullProjectService = function() {
-    function PullProjectService(throughHistoryService, appStoreRepository) {
-        this.throughHistoryService = throughHistoryService;
-        this.appStoreRepository = appStoreRepository;
-        this._project = new Project;
+reflect();
+
+var WebComponentWrapper = function() {
+    function WebComponentWrapper() {
+        var base = document.createElement("div");
+        base.className = "wc-editor";
+        base.style.position = "relative";
+        base.style.display = "flex";
+        base.style.overflow = "hidden";
+        var stylesWrap = document.createElement("div");
+        stylesWrap.className = "styles-wrap";
+        var editorWrap = document.createElement("div");
+        editorWrap.className = "editor-wrap";
+        editorWrap.style.position = "relative";
+        editorWrap.style.display = "flex";
+        editorWrap.style.overflow = "hidden";
+        var toolsWrap = document.createElement("div");
+        toolsWrap.className = "tools-wrap";
+        toolsWrap.style.position = "relative";
+        toolsWrap.style.display = "flex";
+        base.appendChild(stylesWrap);
+        base.appendChild(editorWrap);
+        base.appendChild(toolsWrap);
+        this.baseElement = base;
+        this.stylesWrapElement = stylesWrap;
+        this.editorWrapElement = editorWrap;
+        this.toolsWrapElement = toolsWrap;
+        this._baseStyle();
     }
-    Object.defineProperty(PullProjectService.prototype, "project", {
+    Object.defineProperty(WebComponentWrapper.prototype, "base", {
         get: function() {
-            return this._project;
+            return this._methods(this.baseElement);
         },
         enumerable: false,
         configurable: true
     });
-    PullProjectService.prototype.refreshProject = function() {
-        this._project = new Project;
-    };
-    PullProjectService.prototype.updateProject = function(project) {
+    Object.defineProperty(WebComponentWrapper.prototype, "editorWrap", {
+        get: function() {
+            return this._methods(this.editorWrapElement);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(WebComponentWrapper.prototype, "stylesWrap", {
+        get: function() {
+            return this._methods(this.stylesWrapElement);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(WebComponentWrapper.prototype, "toolsWrap", {
+        get: function() {
+            return this._methods(this.toolsWrapElement);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    WebComponentWrapper.prototype._methods = function(elementWrapper) {
         var _this = this;
-        Object.keys(project).forEach((function(key) {
-            _this._project[key] = project[key];
-        }));
-    };
-    PullProjectService.prototype.pull = function(name, description) {
-        var project = new Project;
-        var state = {
-            cache: this.throughHistoryService.cache,
-            history: this.appStoreRepository.store.historyState.historyLines,
-            current: this.appStoreRepository.store.imageState.getEntry()
+        return {
+            add: function(component, style) {
+                return _this._add(elementWrapper, component, style);
+            }
         };
-        project.id = (new Guid4).generate();
-        project.description = description || "New Project";
-        project.name = name || "New Project";
-        project.state = state;
-        this._project = project;
     };
-    return PullProjectService;
+    WebComponentWrapper.prototype._add = function(elementWrapper, component, style) {
+        var componentElement = elementWrapper.appendChild(component);
+        if (!!style) {
+            this.stylesWrapElement.appendChild(style);
+        }
+        return componentElement;
+    };
+    WebComponentWrapper.prototype._baseStyle = function() {
+        var style = document.createElement("style");
+        style.innerHTML = "\n      * {\n        user-select: none;\n      }\n    ";
+        this.stylesWrapElement.appendChild(style);
+    };
+    return WebComponentWrapper;
 }();
 
+var WebComponent = function(_super) {
+    __extends(WebComponent, _super);
+    function WebComponent() {
+        var _this = _super.call(this) || this;
+        var shadowRoot = _this.attachShadow({
+            mode: "open"
+        });
+        _this.webComponentWrapper = new WebComponentWrapper;
+        shadowRoot.appendChild(_this.webComponentWrapper.baseElement);
+        return _this;
+    }
+    WebComponent.prototype.init = function(appConfig) {
+        this.appConfig = appConfig;
+        this.projectsService = new ProjectsService;
+        this.loggerService = new LoggerService;
+        this.toolLayerService = new ToolLayerService(this.appConfig);
+        this.eventService = new EventService;
+        this.canvasComponent = new CanvasComponent(this.appConfig, this.loggerService, this.toolLayerService);
+        this.toolService = new ToolService(this.canvasComponent);
+        this.appStoreRepository = new AppStoreRepository;
+        this.throughHistoryService = new ThroughHistoryService(this.appConfig, this.appStoreRepository);
+        this.appStore = new AppStore(this.throughHistoryService, this.appStoreRepository);
+        this.pullProjectService = new PullProjectService(this.throughHistoryService, this.appStoreRepository);
+        this.drawService = new DrawService(this.appConfig, this.appStoreRepository, this.eventService);
+        this.downloadService = new DownloadService(this.canvasComponent);
+        var _a = this.canvasComponent.getComponent(), canvasTemplate = _a.canvasTemplate, canvasStyle = _a.canvasStyle;
+        this.canvasElement = this.webComponentWrapper.editorWrap.add(canvasTemplate, canvasStyle);
+        var pipetteComponent = new PipetteComponent(this.toolService, this.loggerService, this.canvasComponent);
+        var _b = pipetteComponent.getComponent(), pipetteTemplate = _b.pipetteTemplate, pipetteStyle = _b.pipetteStyle;
+        this.webComponentWrapper.editorWrap.add(pipetteTemplate, pipetteStyle);
+        var slotComponent = new SlotComponent(this.loggerService);
+        var _c = slotComponent.getComponent("tools"), slotTemplate = _c.slotTemplate, slotStyle = _c.slotStyle;
+        this.webComponentWrapper.toolsWrap.add(slotTemplate, slotStyle);
+        this.excretionsComponent = new ExcretionsComponent(this.toolService, this.loggerService, this.toolLayerService, this.canvasComponent);
+        this.cropService = new CropService(this.appConfig, this.appStoreRepository, this.excretionsComponent);
+        var _d = this.excretionsComponent.getComponent(), excretionsTemplate = _d.excretionsTemplate, excretionsStyle = _d.excretionsStyle;
+        this.webComponentWrapper.editorWrap.add(excretionsTemplate, excretionsStyle);
+        var loadingComponent = new LoadingComponent(this.loggerService, this.eventService);
+        var _e = loadingComponent.getComponent(), loadingTemplate = _e.loadingTemplate, loadingStyle = _e.loadingStyle;
+        this.webComponentWrapper.editorWrap.add(loadingTemplate, loadingStyle);
+        this.canvasComponent.simulateSubscriptions();
+        this.eventService.applyEvents(this.webComponentWrapper.baseElement);
+        return this.initial();
+    };
+    WebComponent.prototype.initial = function() {
+        return {
+            editorElement: this.canvasElement,
+            canvasSelector: this.canvasComponent.getCanvasSelector()
+        };
+    };
+    return WebComponent;
+}(HTMLElement);
+
 reflect();
 
 var CanvasEditorEngine = function() {
@@ -2219,4 +2223,4 @@ var VueCanvasEditorEngine = function(_super) {
     return VueCanvasEditorEngine;
 }(CanvasEditorEngine);
 
-export { AppConfig, AppStore, CanvasComponent, CropService, DownloadService, DrawService, EventService, ExcretionsComponent as ExcretionComponent, LoadingComponent, LoggerService, PipetteComponent, ProjectsService, PullProjectService, SlotComponent, StaticCanvasEditorEngine, ThroughHistoryService, ToolLayerService, ToolService, VueCanvasEditorEngine };
+export { AppConfig, AppStore, AppStoreRepository, CanvasComponent, CropService, DownloadService, DrawService, EventService, ExcretionsComponent as ExcretionComponent, LoadingComponent, LoggerService, PipetteComponent, ProjectsService, PullProjectService, SlotComponent, StaticCanvasEditorEngine, ThroughHistoryService, ToolLayerService, ToolService, VueCanvasEditorEngine };

package/dist/web-component.d.ts

@@ -1,6 +1,22 @@
 import CanvasComponent from "./components/canvas.component";
+import ExcretionsComponent from "./components/excretions.component";
+import LoadingComponent from "./components/loading.component";
+import PipetteComponent from "./components/pipette.component";
+import SlotComponent from "./components/slot.component";
+import EventService from "./services/event.service";
 import { TComponent } from "./types/general";
 import AppConfig from "./config";
+import LoggerService from "./services/logger.service";
+import ToolLayerService from "./services/tool-layers.service";
+import ToolService from "./services/tool.service";
+import CropService from "./services/crop.service";
+import AppStore from "./store/store";
+import ThroughHistoryService from "./services/through-history.service";
+import AppStoreRepository from "./store/storeRepository";
+import ProjectsService from "./services/projects.service";
+import PullProjectService from "./services/pull-project.service";
+import DrawService from "./services/draw.service";
+import DownloadService from "./services/download.service";
 export declare class WebComponentWrapper {
     baseElement: HTMLDivElement;
     editorWrapElement: HTMLDivElement;
@@ -25,9 +41,25 @@ export declare class WebComponentWrapper {
 }
 export default class WebComponent extends HTMLElement {
     appConfig: AppConfig;
-    canvasComponent: CanvasComponent;
-    canvasElement: HTMLDivElement;
+    appStoreRepository: AppStoreRepository;
+    appStore: AppStore;
     webComponentWrapper: WebComponentWrapper;
+    canvasElement: HTMLDivElement;
+    canvasComponent: CanvasComponent;
+    excretionsComponent: ExcretionsComponent;
+    loadingComponent: LoadingComponent;
+    pipetteComponent: PipetteComponent;
+    slotComponent: SlotComponent;
+    toolService: ToolService;
+    toolLayerService: ToolLayerService;
+    cropService: CropService;
+    eventService: EventService;
+    throughHistoryService: ThroughHistoryService;
+    projectsService: ProjectsService;
+    pullProjectService: PullProjectService;
+    loggerService: LoggerService;
+    drawService: DrawService;
+    downloadService: DownloadService;
     constructor();
     init(appConfig: AppConfig): {
         editorElement: HTMLDivElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvas-editor-engine",
-  "version": "2.1.8",
+  "version": "2.1.10",
   "description": "CanvasEditorEngine library, use: [typescript] [canvas]",
   "main": "dist/index.mjs",
   "types": "dist/index.d.ts",