canvas-editor-engine 2.2.6 → 2.3.1

package/dist/index.mjs

@@ -2120,6 +2120,25 @@ var VagueFilter = function(_super) {
     return VagueFilter;
 }(Filter);
 
+var TempCanvas = function() {
+    function TempCanvas() {
+        this.canvas = document.createElement("canvas");
+        this.ctx = this.canvas.getContext("2d");
+    }
+    TempCanvas.prototype.bindOptions = function(options) {
+        this.canvas.width = options.width;
+        this.canvas.height = options.height;
+        this.ctx = this.canvas.getContext("2d");
+    };
+    TempCanvas.prototype.destroy = function() {
+        this.canvas.remove();
+    };
+    TempCanvas.prototype.getImageData = function() {
+        return this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);
+    };
+    return TempCanvas;
+}();
+
 var DrawAccumulator = function() {
     function DrawAccumulator(appConfig, appStoreRepository, eventService, drawLayersService) {
         this.appConfig = appConfig;
@@ -2156,7 +2175,7 @@ var DrawAccumulator = function() {
             }
         });
     }
-    DrawAccumulator.prototype.add = function(layerId, drawType, options) {
+    DrawAccumulator.prototype.add = function(layerId, drawType, options, initialSize) {
         return __awaiter(this, void 0, void 0, (function() {
             var id, painter, inStore;
             return __generator(this, (function(_a) {
@@ -2167,6 +2186,7 @@ var DrawAccumulator = function() {
                     id
                 };
                 painter.drawService.bindOptions(drawType, options);
+                painter.drawService.tempCanvas.bindOptions(initialSize);
                 this.painters.push({
                     object: painter,
                     update: this.update.bind(this)
@@ -2231,7 +2251,7 @@ var DrawAccumulator = function() {
                 }));
                 if (!layer) return;
                 if (!stash.includes(painter) && layer.order === order) {
-                    _this.invokePainter(painter.drawType, painter.drawService);
+                    _this.invokePainterWithTempCtx(painter.drawType, painter.drawService);
                     stash.push(painter);
                 }
             }));
@@ -2275,6 +2295,23 @@ var DrawAccumulator = function() {
             }));
         }));
     };
+    DrawAccumulator.prototype.invokePainterWithTempCtx = function(drawType, painter) {
+        return __awaiter(this, void 0, void 0, (function() {
+            var imageData, ctx, x, y;
+            return __generator(this, (function(_a) {
+                imageData = painter.tempCanvas.getImageData();
+                ctx = this.appConfig.canvas.getContext("2d");
+                if (drawType === "image") {
+                    x = painter.options.image.drawImageArgs.position.x;
+                    y = painter.options.image.drawImageArgs.position.y;
+                    ctx.putImageData(imageData, x, y);
+                } else if (drawType === "project") {
+                    ctx.putImageData(imageData, 0, 0);
+                }
+                return [ 2 ];
+            }));
+        }));
+    };
     return DrawAccumulator;
 }();
 
@@ -2287,6 +2324,7 @@ var DrawService = function() {
             image: null,
             project: null
         };
+        this.tempCanvas = new TempCanvas;
         this.id = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
     }
     DrawService.prototype.bindOptions = function(drawType, options) {
@@ -2303,7 +2341,7 @@ var DrawService = function() {
                 switch (_b.label) {
                   case 0:
                     _a = this.options.image, src = _a.src, drawImageArgs = _a.drawImageArgs;
-                    ctx = this.appConfig.canvas.getContext("2d");
+                    ctx = this.tempCanvas.ctx;
                     this.imageProcessor = new ImageObject(this.appConfig, src, ctx);
                     return [ 4, this.imageProcessor.draw(drawImageArgs).then((function() {
                         var responseData = {
@@ -2341,7 +2379,7 @@ var DrawService = function() {
             }
             return __generator(this, (function(_a) {
                 project = this.options.project;
-                ctx = this.appConfig.canvas.getContext("2d");
+                ctx = this.tempCanvas.ctx;
                 imageData = project.state.current.imageData;
                 position = project.state.current.position;
                 size = project.state.current.size;
@@ -2729,7 +2767,7 @@ var WebComponent = function(_super) {
         var projectProcessor = this.projectsService.on("File");
         var serializer = projectProcessor.getSerializerInstance(jsonProjects);
         var projects = serializer.getProjects();
-        this.drawAccumulator.add(layerId, "project", projects[0]);
+        this.drawAccumulator.add(layerId, "project", projects[0], projects[0].state.current.size);
         this.throughHistoryService.recovery(projects[0]);
     };
     return WebComponent;

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

@@ -5,6 +5,8 @@ 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 { ITempCanvasOptions } from "../types/temp-canvas";
+import { TempCanvas } from "../utils/temp-canvas";
 import DrawLayersService from "./draw-leayers.service";
 import EventService from "./event.service";
 export declare class DrawAccumulator {
@@ -14,13 +16,14 @@ export declare class DrawAccumulator {
     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>;
+    add<DrawType extends TDrawType>(layerId: ILayer['id'], drawType: DrawType, options: DrawService['options'][DrawType], initialSize: ITempCanvasOptions): Promise<void>;
     remove(id: string): Promise<void>;
     private update;
     private get gradient();
     private clearCanvas;
     private invokePaintersOnLayers;
     private invokePainter;
+    private invokePainterWithTempCtx;
 }
 export default class DrawService {
     private appConfig;
@@ -35,6 +38,7 @@ export default class DrawService {
         } | null;
         project: Project | null;
     };
+    tempCanvas: TempCanvas;
     constructor(appConfig: AppConfig, appStoreRepository: AppStoreRepository, eventService: EventService);
     bindOptions<DrawType extends TDrawType>(drawType: DrawType, options: DrawService['options'][DrawType]): void;
     drawImage(isReturnReduceData?: boolean): Promise<{

package/dist/types/temp-canvas.d.ts

@@ -0,0 +1,4 @@
+export interface ITempCanvasOptions {
+    width: number;
+    height: number;
+}

package/dist/utils/temp-canvas.d.ts

@@ -0,0 +1,9 @@
+import { ITempCanvasOptions } from "../types/temp-canvas";
+export declare class TempCanvas {
+    ctx: CanvasRenderingContext2D;
+    canvas: HTMLCanvasElement;
+    constructor();
+    bindOptions(options: ITempCanvasOptions): void;
+    destroy(): void;
+    getImageData(): ImageData;
+}

package/package.json

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