canvas-editor-engine 2.1.31 → 2.2.2

package/dist/config.d.ts

@@ -1,21 +1,21 @@
 import { ICanvasSize } from "./types/canvas";
-export interface ILayer {
+export interface IConfigLayer {
     name: string;
     index: number;
 }
 export declare class ConfigFabric {
     protected _CANVAS_SIZE: ICanvasSize;
-    protected _LAYERS: ILayer[];
+    protected _LAYERS: IConfigLayer[];
     protected _ZOOM: number;
 }
 export default class AppConfig extends ConfigFabric {
-    private _canvas;
+    canvas: HTMLCanvasElement | null;
     constructor();
     bindCanvas(canvasElement: HTMLDivElement): void;
     get CANVAS_SIZE(): ICanvasSize;
     set CANVAS_SIZE(value: ICanvasSize | undefined);
-    get LAYERS(): ILayer[];
-    set LAYERS(value: ILayer[]);
+    get LAYERS(): IConfigLayer[];
+    set LAYERS(value: IConfigLayer[]);
     get ZOOM(): number;
     set ZOOM(value: number);
 }

package/dist/index.mjs

@@ -29,6 +29,120 @@ var __assign = function() {
     return __assign.apply(this, arguments);
 };
 
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) {
+        return value instanceof P ? value : new P((function(resolve) {
+            resolve(value);
+        }));
+    }
+    return new (P || (P = Promise))((function(resolve, reject) {
+        function fulfilled(value) {
+            try {
+                step(generator.next(value));
+            } catch (e) {
+                reject(e);
+            }
+        }
+        function rejected(value) {
+            try {
+                step(generator["throw"](value));
+            } catch (e) {
+                reject(e);
+            }
+        }
+        function step(result) {
+            result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+        }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    }));
+}
+
+function __generator(thisArg, body) {
+    var _ = {
+        label: 0,
+        sent: function() {
+            if (t[0] & 1) throw t[1];
+            return t[1];
+        },
+        trys: [],
+        ops: []
+    }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() {
+        return this;
+    }), g;
+    function verb(n) {
+        return function(v) {
+            return step([ n, v ]);
+        };
+    }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 
+            0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [ op[0] & 2, t.value ];
+            switch (op[0]) {
+              case 0:
+              case 1:
+                t = op;
+                break;
+
+              case 4:
+                _.label++;
+                return {
+                    value: op[1],
+                    done: false
+                };
+
+              case 5:
+                _.label++;
+                y = op[1];
+                op = [ 0 ];
+                continue;
+
+              case 7:
+                op = _.ops.pop();
+                _.trys.pop();
+                continue;
+
+              default:
+                if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                    _ = 0;
+                    continue;
+                }
+                if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+                    _.label = op[1];
+                    break;
+                }
+                if (op[0] === 6 && _.label < t[1]) {
+                    _.label = t[1];
+                    t = op;
+                    break;
+                }
+                if (t && _.label < t[2]) {
+                    _.label = t[2];
+                    _.ops.push(op);
+                    break;
+                }
+                if (t[2]) _.ops.pop();
+                _.trys.pop();
+                continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) {
+            op = [ 6, e ];
+            y = 0;
+        } finally {
+            f = t = 0;
+        }
+        if (op[0] & 5) throw op[1];
+        return {
+            value: op[0] ? op[1] : void 0,
+            done: true
+        };
+    }
+}
+
 function __spreadArray(to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -69,7 +183,7 @@ var AppConfig = function(_super) {
     __extends(AppConfig, _super);
     function AppConfig() {
         var _this = _super.call(this) || this;
-        _this._canvas = null;
+        _this.canvas = null;
         _this._CANVAS_SIZE = {
             width: 300,
             height: 150
@@ -88,8 +202,7 @@ var AppConfig = function(_super) {
         return _this;
     }
     AppConfig.prototype.bindCanvas = function(canvasElement) {
-        var canvas = canvasElement.querySelector("canvas");
-        this._canvas = canvas;
+        this.canvas = canvasElement.querySelector("canvas");
     };
     Object.defineProperty(AppConfig.prototype, "CANVAS_SIZE", {
         get: function() {
@@ -98,9 +211,9 @@ var AppConfig = function(_super) {
         set: function(value) {
             if (!!value && !!(value === null || value === void 0 ? void 0 : value.width) && !!(value === null || value === void 0 ? void 0 : value.height)) {
                 this._CANVAS_SIZE = value;
-                if (!!this._canvas) {
-                    this._canvas.width = value.width;
-                    this._canvas.height = value.height;
+                if (!!this.canvas) {
+                    this.canvas.width = value.width;
+                    this.canvas.height = value.height;
                 }
             } else {
                 console.warn("CANVAS_SIZE denied");
@@ -1245,6 +1358,90 @@ var CropService = function() {
     return CropService;
 }();
 
+var DrawLayersState = function() {
+    function DrawLayersState(appStoreRepository) {
+        this.appStoreRepository = appStoreRepository;
+        this.default = {
+            layers: []
+        };
+        this._layers = this.default.layers;
+        this.reset();
+    }
+    Object.defineProperty(DrawLayersState.prototype, "layers", {
+        get: function() {
+            return this._layers;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DrawLayersState.prototype.reduce = function(name, payload) {
+        var reducer = new Reducer$1(this);
+        switch (name) {
+          case "SET_LAYERS":
+            reducer.setLayers(payload);
+            break;
+
+          case "UPDATE_LAYER":
+            reducer.updateLayer(payload);
+            break;
+
+          case "ADD_LAYER":
+            reducer.addLayer(payload);
+            break;
+        }
+    };
+    DrawLayersState.prototype.emerge = function(completeIt) {
+        this._emergeCompleteIt = completeIt;
+    };
+    DrawLayersState.prototype.reset = function() {
+        this.reduce("SET_LAYERS", this.default);
+    };
+    return DrawLayersState;
+}();
+
+var Reducer$1 = function() {
+    function Reducer(state) {
+        this.state = state;
+    }
+    Reducer.prototype.setLayers = function(payload) {
+        var isUpdate = false;
+        if (!!(payload === null || payload === void 0 ? void 0 : payload.layers)) {
+            this.state._layers = payload.layers;
+            isUpdate = true;
+        }
+        if (isUpdate && !!this.state._emergeCompleteIt) {
+            this.state._emergeCompleteIt(this.state._layers);
+        }
+    };
+    Reducer.prototype.updateLayer = function(payload) {
+        var isUpdate = false;
+        if (!!payload) {
+            this.state._layers.push(payload);
+            isUpdate = true;
+        }
+        if (isUpdate && !!this.state._emergeCompleteIt) {
+            this.state._emergeCompleteIt(this.state._layers);
+        }
+    };
+    Reducer.prototype.addLayer = function(payload) {
+        var isUpdate = false;
+        if (!!payload) {
+            this.state._layers.unshift(payload);
+            isUpdate = true;
+        }
+        if (isUpdate && !!this.state._emergeCompleteIt) {
+            this.state._emergeCompleteIt(this.state._layers);
+        }
+    };
+    Reducer.prototype.popLayer = function() {
+        this.state._layers.pop();
+        if (!!this.state._emergeCompleteIt) {
+            this.state._emergeCompleteIt(this.state._layers);
+        }
+    };
+    return Reducer;
+}();
+
 var HistoryState = function() {
     function HistoryState(throughHistoryService) {
         this.throughHistoryService = throughHistoryService;
@@ -1407,13 +1604,15 @@ var ImageState = function() {
 }();
 
 var Store = function() {
-    function Store(imageState, historyState) {
+    function Store(imageState, historyState, drawLayersState) {
         this.imageState = imageState;
         this.historyState = historyState;
+        this.drawLayersState = drawLayersState;
     }
     Store.prototype.reset = function() {
         this.imageState.reset();
         this.historyState.reset();
+        this.drawLayersState.reset();
     };
     return Store;
 }();
@@ -1422,16 +1621,21 @@ 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));
+        this.appStoreRepository.store = new Store(new ImageState(this.appStoreRepository), new HistoryState(this.throughHistoryService), new DrawLayersState(this.appStoreRepository));
     }
     AppStore.prototype.subscribe = function(to, completeIt) {
         if (to === "history") {
             this.appStoreRepository.store.historyState.emerge(completeIt);
+        } else if (to === "layers") {
+            this.appStoreRepository.store.drawLayersState.emerge(completeIt);
         }
     };
     AppStore.prototype.getHistoryLines = function() {
         return this.appStoreRepository.store.historyState.historyLines;
     };
+    AppStore.prototype.getLayers = function() {
+        return this.appStoreRepository.store.drawLayersState.layers;
+    };
     return AppStore;
 }();
 
@@ -1911,41 +2115,251 @@ var VagueFilter = function(_super) {
     return VagueFilter;
 }(Filter);
 
+var DrawAccumulator = function() {
+    function DrawAccumulator(appConfig, appStoreRepository, eventService, drawLayersService) {
+        this.appConfig = appConfig;
+        this.appStoreRepository = appStoreRepository;
+        this.eventService = eventService;
+        this.drawLayersService = drawLayersService;
+        this.painters = new Proxy([], {
+            get: function(target, name) {
+                return target[name];
+            },
+            set: function(target, name, value) {
+                try {
+                    if (typeof (value === null || value === void 0 ? void 0 : value.object) !== "undefined") {
+                        target[name] = value.object;
+                        value.update();
+                        return true;
+                    } else {
+                        if (name != "length") {
+                            console.warn("Proxy set error: object denied");
+                            return false;
+                        } else {
+                            var MIN_LENGTH = -1;
+                            var MAX_LENGTH = __spreadArray([], Object.keys(target), true);
+                            if (value <= Math.max.apply(Math, __spreadArray([ MIN_LENGTH ], MAX_LENGTH, false)) + 1) {
+                                target.length = value;
+                            }
+                        }
+                        return true;
+                    }
+                } catch (error) {
+                    console.error("Proxy set error:", error);
+                    return false;
+                }
+            }
+        });
+    }
+    DrawAccumulator.prototype.add = function(layerId, drawType, options) {
+        return __awaiter(this, void 0, void 0, (function() {
+            var id, painter, inStore;
+            return __generator(this, (function(_a) {
+                id = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
+                painter = {
+                    drawService: new DrawService(this.appConfig, this.appStoreRepository, this.eventService),
+                    drawType,
+                    id
+                };
+                painter.drawService.bindOptions(drawType, options);
+                this.painters.push({
+                    object: painter,
+                    update: this.update.bind(this)
+                });
+                this.drawLayersService.addToLayer(layerId, painter);
+                inStore = true;
+                this.invokePainter(drawType, painter.drawService, inStore);
+                return [ 2 ];
+            }));
+        }));
+    };
+    DrawAccumulator.prototype.remove = function(id) {
+        return __awaiter(this, void 0, void 0, (function() {
+            var painter;
+            return __generator(this, (function(_a) {
+                painter = this.painters.find((function(painter) {
+                    return painter.id === id;
+                }));
+                if (!!painter) {
+                    this.painters = this.painters.filter((function(painter) {
+                        return painter.id !== id;
+                    }));
+                }
+                return [ 2 ];
+            }));
+        }));
+    };
+    DrawAccumulator.prototype.update = function() {
+        this.clearCanvas();
+        this.invokePaintersOnLayers();
+    };
+    Object.defineProperty(DrawAccumulator.prototype, "gradient", {
+        get: function() {
+            var _this = this;
+            var gradient = [];
+            this.painters.forEach((function(painter) {
+                var layer = _this.drawLayersService.layerList.find((function(layer) {
+                    return layer.painters.includes(painter);
+                }));
+                if (layer) {
+                    gradient.push(layer.order);
+                }
+            }));
+            return gradient.sort((function(a, b) {
+                return a - b;
+            }));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DrawAccumulator.prototype.clearCanvas = function() {
+        var ctx = this.appConfig.canvas.getContext("2d");
+        ctx.clearRect(0, 0, this.appConfig.CANVAS_SIZE.width, this.appConfig.CANVAS_SIZE.height);
+    };
+    DrawAccumulator.prototype.invokePaintersOnLayers = function() {
+        var _this = this;
+        var stash = [];
+        this.gradient.forEach((function(order) {
+            _this.painters.forEach((function(painter) {
+                var layer = _this.drawLayersService.layerList.find((function(layer) {
+                    return layer.painters.includes(painter);
+                }));
+                if (!layer) return;
+                if (!stash.includes(painter) && layer.order === order) {
+                    _this.invokePainter(painter.drawType, painter.drawService);
+                    stash.push(painter);
+                }
+            }));
+        }));
+    };
+    DrawAccumulator.prototype.invokePainter = function(drawType_1, painter_1) {
+        return __awaiter(this, arguments, void 0, (function(drawType, painter, inStore) {
+            var _a, reduceData, message, isAddToStore, _b, reduceData, message, isAddToStore;
+            if (inStore === void 0) {
+                inStore = false;
+            }
+            return __generator(this, (function(_c) {
+                switch (_c.label) {
+                  case 0:
+                    if (!(drawType === "image")) return [ 3, 2 ];
+                    return [ 4, painter.drawImage(inStore) ];
+
+                  case 1:
+                    _a = _c.sent(), reduceData = _a.reduceData, message = _a.message;
+                    isAddToStore = !!reduceData && !!message && inStore;
+                    if (isAddToStore) {
+                        this.appStoreRepository.store.imageState.reduce(reduceData, message);
+                    }
+                    return [ 3, 4 ];
+
+                  case 2:
+                    if (!(drawType === "project")) return [ 3, 4 ];
+                    return [ 4, painter.drawProject(inStore) ];
+
+                  case 3:
+                    _b = _c.sent(), reduceData = _b.reduceData, message = _b.message;
+                    isAddToStore = !!reduceData && !!message && inStore;
+                    if (isAddToStore) {
+                        this.appStoreRepository.store.imageState.reduce(reduceData, message);
+                    }
+                    _c.label = 4;
+
+                  case 4:
+                    return [ 2 ];
+                }
+            }));
+        }));
+    };
+    return DrawAccumulator;
+}();
+
 var DrawService = function() {
     function DrawService(appConfig, appStoreRepository, eventService) {
         this.appConfig = appConfig;
         this.appStoreRepository = appStoreRepository;
         this.eventService = eventService;
+        this.options = {
+            image: null,
+            project: null
+        };
+        this.id = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
     }
-    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);
-            console.log(_this);
-            _this.appStoreRepository.store.imageState.reduce({
-                tempImageData: imageData,
-                position: zeroPosition,
-                size: _this.appConfig.CANVAS_SIZE
-            }, "Loaded image");
+    DrawService.prototype.bindOptions = function(drawType, options) {
+        this.options[drawType] = options;
+    };
+    DrawService.prototype.drawImage = function() {
+        return __awaiter(this, arguments, void 0, (function(isReturnReduceData) {
+            var _a, src, drawImageArgs, ctx;
+            var _this = this;
+            if (isReturnReduceData === void 0) {
+                isReturnReduceData = false;
+            }
+            return __generator(this, (function(_b) {
+                switch (_b.label) {
+                  case 0:
+                    _a = this.options.image, src = _a.src, drawImageArgs = _a.drawImageArgs;
+                    ctx = this.appConfig.canvas.getContext("2d");
+                    this.imageProcessor = new ImageObject(this.appConfig, src, ctx);
+                    return [ 4, this.imageProcessor.draw(drawImageArgs).then((function() {
+                        var responseData = {
+                            reduceData: null,
+                            message: null
+                        };
+                        if (!isReturnReduceData) return responseData;
+                        var zeroPosition = {
+                            x: 0,
+                            y: 0
+                        };
+                        var filter = new Filter(_this.appConfig, ctx);
+                        var imageData = filter.copy(zeroPosition);
+                        responseData.reduceData = {
+                            tempImageData: imageData,
+                            position: zeroPosition,
+                            size: _this.appConfig.CANVAS_SIZE
+                        };
+                        responseData.message = "Image loaded";
+                        return responseData;
+                    })) ];
+
+                  case 1:
+                    return [ 2, _b.sent() ];
+                }
+            }));
         }));
     };
-    DrawService.prototype.drawProject = function(ctx, project) {
-        var imageData = project.state.current.imageData;
-        var position = project.state.current.position;
-        var size = project.state.current.size;
-        this.imageProcessor = new PCImage(this.appConfig, project, ctx);
-        this.imageProcessor.draw();
-        this.appStoreRepository.store.imageState.reduce({
-            tempImageData: imageData,
-            position,
-            size
-        }, "Loaded project");
+    DrawService.prototype.drawProject = function() {
+        return __awaiter(this, arguments, void 0, (function(isReturnReduceData) {
+            var project, ctx, imageData, position, size;
+            var _this = this;
+            if (isReturnReduceData === void 0) {
+                isReturnReduceData = false;
+            }
+            return __generator(this, (function(_a) {
+                project = this.options.project;
+                ctx = this.appConfig.canvas.getContext("2d");
+                imageData = project.state.current.imageData;
+                position = project.state.current.position;
+                size = project.state.current.size;
+                this.imageProcessor = new ProjectImageObject(this.appConfig, project, ctx);
+                return [ 2, new Promise((function(resolve) {
+                    _this.imageProcessor.draw();
+                    resolve(null);
+                })).then((function() {
+                    var responseData = {
+                        reduceData: null,
+                        message: null
+                    };
+                    if (!isReturnReduceData) return responseData;
+                    responseData.reduceData = {
+                        tempImageData: imageData,
+                        position,
+                        size
+                    };
+                    responseData.message = "Project loaded";
+                    return responseData;
+                })) ];
+            }));
+        }));
     };
     DrawService.prototype.drawSmoothImage = function(useStore, options, filterOptions) {
         var _this = this;
@@ -1998,14 +2412,14 @@ var DrawService = function() {
     return DrawService;
 }();
 
-var SCImage = function() {
-    function SCImage(appConfig, src, ctx) {
+var ImageObject = function() {
+    function ImageObject(appConfig, src, ctx) {
         this.appConfig = appConfig;
         this.img = new Image;
         this.img.src = src;
         this.ctx = ctx;
     }
-    SCImage.prototype.draw = function(options) {
+    ImageObject.prototype.draw = function(options) {
         var _this = this;
         var proto = this;
         var protoImg = this.img;
@@ -2031,20 +2445,20 @@ var SCImage = function() {
             }
         }));
     };
-    SCImage.prototype.vague = function(options, filterOptions) {
+    ImageObject.prototype.vague = function(options, filterOptions) {
         var filter = new VagueFilter(this.appConfig, this.ctx, options);
         return filter.on("pixel", filterOptions);
     };
-    return SCImage;
+    return ImageObject;
 }();
 
-var PCImage = function() {
-    function PCImage(appConfig, project, ctx) {
+var ProjectImageObject = function() {
+    function ProjectImageObject(appConfig, project, ctx) {
         this.appConfig = appConfig;
         this.project = project;
         this.ctx = ctx;
     }
-    PCImage.prototype.draw = function(options) {
+    ProjectImageObject.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) {
@@ -2058,11 +2472,11 @@ var PCImage = function() {
             }
         }));
     };
-    PCImage.prototype.vague = function(options, filterOptions) {
+    ProjectImageObject.prototype.vague = function(options, filterOptions) {
         var filter = new VagueFilter(this.appConfig, this.ctx, options);
         return filter.on("pixel", filterOptions);
     };
-    return PCImage;
+    return ProjectImageObject;
 }();
 
 var DownloadService = function() {
@@ -2102,6 +2516,63 @@ var ResizeService = function() {
     return ResizeService;
 }();
 
+var DrawLayersService = function() {
+    function DrawLayersService(appStoreRepository) {
+        this.appStoreRepository = appStoreRepository;
+        this.layerList = [];
+        this.addLayer({
+            layerName: "Base Layer"
+        });
+    }
+    DrawLayersService.prototype.addLayer = function(layerOptions) {
+        var _a;
+        var layerName = layerOptions.layerName, painter = layerOptions.painter;
+        var id = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
+        var name = layerName || painter ? "".concat(painter.drawType, "-").concat(painter.id) : "New Layer";
+        var painters = painter ? [ painter ] : [];
+        var sortedLayers = (_a = this.layerList) === null || _a === void 0 ? void 0 : _a.sort((function(a, b) {
+            return a.order - b.order;
+        }));
+        var order = (sortedLayers === null || sortedLayers === void 0 ? void 0 : sortedLayers.length) ? sortedLayers.at(-1).order + 1 : 1;
+        var layer = {
+            id,
+            painters,
+            order,
+            name
+        };
+        this.layerList.push(layer);
+        this.appStoreRepository.store.drawLayersState.reduce("ADD_LAYER", layer);
+    };
+    DrawLayersService.prototype.getLayerByOrder = function(order) {
+        return this.layerList.find((function(layer) {
+            return layer.order === order;
+        }));
+    };
+    DrawLayersService.prototype.addToLayer = function(id, painter) {
+        var layerIndex = this.layerList.findIndex((function(layer) {
+            return layer.id === id;
+        }));
+        if (layerIndex === -1) return;
+        var layer = this.layerList[layerIndex];
+        layer.painters.push(painter);
+        this.appStoreRepository.store.drawLayersState.reduce("UPDATE_LAYER", layer);
+    };
+    DrawLayersService.prototype.updateLayer = function(id, updateData) {
+        var layerIndex = this.layerList.findIndex((function(layer) {
+            return layer.id === id;
+        }));
+        var fields = Object.keys(updateData);
+        if (!fields.length || layerIndex === -1) return;
+        var layer = this.layerList[layerIndex];
+        fields.forEach((function(field) {
+            layer[field] = updateData[field];
+        }));
+        this.layerList[layerIndex] = layer;
+        this.appStoreRepository.store.drawLayersState.reduce("UPDATE_LAYER", layer);
+    };
+    return DrawLayersService;
+}();
+
 reflect();
 
 var WebComponentWrapper = function() {
@@ -2207,6 +2678,8 @@ var WebComponent = function(_super) {
         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.drawLayersService = new DrawLayersService(this.appStoreRepository);
+        this.drawAccumulator = new DrawAccumulator(this.appConfig, this.appStoreRepository, this.eventService, this.drawLayersService);
         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);
@@ -2234,6 +2707,13 @@ var WebComponent = function(_super) {
             canvasSelector: this.canvasComponent.getCanvasSelector()
         };
     };
+    WebComponent.prototype.restoreJSONProjects = function(layerId, jsonProjects) {
+        var projectProcessor = this.projectsService.on("File");
+        var serializer = projectProcessor.getSerializerInstance(jsonProjects);
+        var projects = serializer.getProjects();
+        this.drawAccumulator.add(layerId, "project", projects[0]);
+        this.throughHistoryService.recovery(projects[0]);
+    };
     return WebComponent;
 }(HTMLElement);
 

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

@@ -0,0 +1,15 @@
+import AppStoreRepository from "../store/storeRepository";
+import { ILayer, ILayerUpdate } from "../types/draw-layers";
+import { IPainter } from "../types/draw-service";
+export default class DrawLayersService {
+    private appStoreRepository;
+    layerList: ILayer[];
+    constructor(appStoreRepository: AppStoreRepository);
+    addLayer(layerOptions?: {
+        layerName?: string;
+        painter?: IPainter;
+    }): void;
+    getLayerByOrder(order: number): ILayer;
+    addToLayer(id: ILayer['id'], painter: IPainter): void;
+    updateLayer(id: ILayer['id'], updateData?: ILayerUpdate): void;
+}

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

@@ -1,21 +1,55 @@
 import AppConfig from "../config";
+import { IImageStateReduce } from "../store/image.state";
 import AppStoreRepository from "../store/storeRepository";
+import { ILayer } from "../types/draw-layers";
+import { IPainter, TDrawType } from "../types/draw-service";
 import type { IDrawImageArgs, IDrawImageProcessor, IFilterOptions, IImageLoggingDataVague, IImageOptions } from "../types/image";
 import { Project } from "../types/project";
+import DrawLayersService from "./draw-leayers.service";
 import EventService from "./event.service";
+export declare class DrawAccumulator {
+    private appConfig;
+    private appStoreRepository;
+    private eventService;
+    private drawLayersService;
+    painters: IPainter[];
+    constructor(appConfig: AppConfig, appStoreRepository: AppStoreRepository, eventService: EventService, drawLayersService: DrawLayersService);
+    add<DrawType extends TDrawType>(layerId: ILayer['id'], drawType: DrawType, options: DrawService['options'][DrawType]): Promise<void>;
+    remove(id: string): Promise<void>;
+    private update;
+    private get gradient();
+    private clearCanvas;
+    private invokePaintersOnLayers;
+    private invokePainter;
+}
 export default class DrawService {
     private appConfig;
     private appStoreRepository;
     private eventService;
+    id: string;
     imageProcessor: IDrawImageProcessor;
+    options: {
+        image: {
+            src: string;
+            drawImageArgs: IDrawImageArgs;
+        } | null;
+        project: Project | null;
+    };
     constructor(appConfig: AppConfig, appStoreRepository: AppStoreRepository, eventService: EventService);
-    drawImage(ctx: CanvasRenderingContext2D, src: string, options: IDrawImageArgs): void;
-    drawProject(ctx: CanvasRenderingContext2D, project: Project): void;
+    bindOptions<DrawType extends TDrawType>(drawType: DrawType, options: DrawService['options'][DrawType]): void;
+    drawImage(isReturnReduceData?: boolean): Promise<{
+        reduceData: IImageStateReduce | null;
+        message: string | null;
+    }>;
+    drawProject(isReturnReduceData?: boolean): Promise<{
+        reduceData: IImageStateReduce | null;
+        message: string | null;
+    }>;
     drawSmoothImage(useStore: boolean, options: IDrawImageArgs, filterOptions: IFilterOptions): void;
     updateImageStateAfterVague(data: IImageLoggingDataVague): void;
     getFilterArgs(useStore: boolean, options: IDrawImageArgs): IImageOptions;
 }
-export declare class SCImage implements IDrawImageProcessor {
+export declare class ImageObject implements IDrawImageProcessor {
     private appConfig;
     private img;
     private ctx;

package/dist/store/draw-layers.state.d.ts

@@ -0,0 +1,18 @@
+import { StateService } from "../services/store.service";
+import { ILayer } from "../types/draw-layers";
+import { TReducerNames } from "../types/draw-layers";
+import AppStoreRepository from "./storeRepository";
+export interface IDrawLayersState {
+    layers: ILayer[];
+}
+export declare class DrawLayersState implements StateService {
+    private appStoreRepository;
+    private default;
+    private _emergeCompleteIt;
+    private _layers;
+    get layers(): IDrawLayersState['layers'];
+    constructor(appStoreRepository: AppStoreRepository);
+    reduce(name: TReducerNames, payload?: ILayer | IDrawLayersState): void;
+    emerge(completeIt: (layers: IDrawLayersState['layers']) => void): void;
+    reset(): void;
+}

package/dist/store/store.d.ts

@@ -1,18 +1,21 @@
 import { StoreService } from "../services/store.service";
 import ThroughHistoryService from "../services/through-history.service";
+import { DrawLayersState } from "./draw-layers.state";
 import { HistoryState } from "./history.state";
 import { ImageState } from "./image.state";
 import AppStoreRepository from "./storeRepository";
 export declare class Store implements StoreService {
     imageState: ImageState;
     historyState: HistoryState;
-    constructor(imageState: ImageState, historyState: HistoryState);
+    drawLayersState: DrawLayersState;
+    constructor(imageState: ImageState, historyState: HistoryState, drawLayersState: DrawLayersState);
     reset(): void;
 }
 export default class AppStore {
     private throughHistoryService;
     private appStoreRepository;
     constructor(throughHistoryService: ThroughHistoryService, appStoreRepository: AppStoreRepository);
-    subscribe(to: 'history', completeIt: (...args: any) => void): void;
+    subscribe(to: 'history' | 'layers', completeIt: (...args: any) => void): void;
     getHistoryLines(): import("../types/history").IHistoryLine[];
+    getLayers(): import("../types/draw-layers").ILayer[];
 }

package/dist/types/draw-layers.d.ts

@@ -0,0 +1,13 @@
+import { IPainter } from "./draw-service";
+export interface ILayer {
+    id: string;
+    painters: IPainter[];
+    order: number;
+    name: string;
+}
+export interface ILayerUpdate {
+    painters?: ILayer['painters'];
+    order?: ILayer['order'];
+    name?: ILayer['name'];
+}
+export type TReducerNames = 'SET_LAYERS' | 'UPDATE_LAYER' | 'ADD_LAYER';

package/dist/types/draw-service.d.ts

@@ -0,0 +1,7 @@
+import DrawService from "../services/draw.service";
+export type TDrawType = keyof DrawService['options'];
+export interface IPainter {
+    drawService: DrawService;
+    drawType: TDrawType;
+    id: string;
+}

package/dist/web-component.d.ts

@@ -15,9 +15,11 @@ 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 DrawService, { DrawAccumulator } from "./services/draw.service";
 import DownloadService from "./services/download.service";
 import ResizeService from "./services/serize.service";
+import DrawLayersService from "./services/draw-leayers.service";
+import { ILayer } from "./types/draw-layers";
 export declare class WebComponentWrapper {
     baseElement: HTMLDivElement;
     editorWrapElement: HTMLDivElement;
@@ -62,6 +64,8 @@ export default class WebComponent extends HTMLElement {
     drawService: DrawService;
     downloadService: DownloadService;
     resizeService: ResizeService;
+    drawAccumulator: DrawAccumulator;
+    drawLayersService: DrawLayersService;
     constructor();
     init(appConfig: AppConfig): {
         editorElement: HTMLDivElement;
@@ -71,4 +75,5 @@ export default class WebComponent extends HTMLElement {
         editorElement: HTMLDivElement;
         canvasSelector: string;
     };
+    restoreJSONProjects(layerId: ILayer['id'], jsonProjects: string): void;
 }

package/package.json

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