canvas-editor-engine 2.1.31 → 2.2.1

package/dist/config.d.ts

@@ -9,7 +9,7 @@ export declare class ConfigFabric {
     protected _ZOOM: number;
 }
 export default class AppConfig extends ConfigFabric {
-    private _canvas;
+    canvas: HTMLCanvasElement | null;
     constructor();
     bindCanvas(canvasElement: HTMLDivElement): void;
     get CANVAS_SIZE(): ICanvasSize;

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");
@@ -1911,41 +2024,242 @@ var VagueFilter = function(_super) {
     return VagueFilter;
 }(Filter);
 
+var DrawAccumulator = function() {
+    function DrawAccumulator(appConfig, appStoreRepository, eventService) {
+        this.appConfig = appConfig;
+        this.appStoreRepository = appStoreRepository;
+        this.eventService = eventService;
+        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 numSkipped = void 0;
+                            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;
+                            }
+                            numSkipped = 0;
+                        }
+                        return true;
+                    }
+                } catch (error) {
+                    console.error("Proxy set error:", error);
+                    return false;
+                }
+            }
+        });
+    }
+    DrawAccumulator.prototype.add = function(layer, 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, layer, options);
+                this.painters.push({
+                    object: painter,
+                    update: this.update.bind(this)
+                });
+                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 gradient = [];
+            this.painters.forEach((function(painter) {
+                gradient.push(painter.drawService.layer);
+            }));
+            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) {
+                if (!stash.includes(painter) && painter.drawService.layer === 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, layer, options) {
+        this.layer = layer;
+        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 +2312,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 +2345,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 +2372,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() {
@@ -2207,6 +2521,7 @@ 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.drawAccumulator = new DrawAccumulator(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);
@@ -2234,6 +2549,16 @@ var WebComponent = function(_super) {
             canvasSelector: this.canvasComponent.getCanvasSelector()
         };
     };
+    WebComponent.prototype.restoreJSONProjects = function(jsonProjects) {
+        var _this = this;
+        var projectProcessor = this.projectsService.on("File");
+        var serializer = projectProcessor.getSerializerInstance(jsonProjects);
+        var projects = serializer.getProjects();
+        projects.forEach((function(project, index) {
+            _this.drawAccumulator.add(index, "project", project);
+        }));
+        this.throughHistoryService.recovery(projects[0]);
+    };
     return WebComponent;
 }(HTMLElement);
 

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

@@ -1,21 +1,53 @@
 import AppConfig from "../config";
+import { IImageStateReduce } from "../store/image.state";
 import AppStoreRepository from "../store/storeRepository";
+import { IPainter, TDrawType } from "../types/draw-service";
 import type { IDrawImageArgs, IDrawImageProcessor, IFilterOptions, IImageLoggingDataVague, IImageOptions } from "../types/image";
 import { Project } from "../types/project";
 import EventService from "./event.service";
+export declare class DrawAccumulator {
+    private appConfig;
+    private appStoreRepository;
+    private eventService;
+    painters: IPainter[];
+    constructor(appConfig: AppConfig, appStoreRepository: AppStoreRepository, eventService: EventService);
+    add<DrawType extends TDrawType>(layer: number, 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;
+    layer: number;
     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, layer: number, 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/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,7 +15,7 @@ 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";
 export declare class WebComponentWrapper {
@@ -62,6 +62,7 @@ export default class WebComponent extends HTMLElement {
     drawService: DrawService;
     downloadService: DownloadService;
     resizeService: ResizeService;
+    drawAccumulator: DrawAccumulator;
     constructor();
     init(appConfig: AppConfig): {
         editorElement: HTMLDivElement;
@@ -71,4 +72,5 @@ export default class WebComponent extends HTMLElement {
         editorElement: HTMLDivElement;
         canvasSelector: string;
     };
+    restoreJSONProjects(jsonProjects: string): void;
 }

package/package.json

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