canvas-editor-engine 2.2.1 → 2.2.3

package/dist/config.d.ts

@@ -1,11 +1,11 @@
 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 {
@@ -14,8 +14,8 @@ export default class AppConfig extends ConfigFabric {
     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

@@ -1358,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;
@@ -1520,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;
 }();
@@ -1535,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;
 }();
 
@@ -2025,10 +2116,11 @@ var VagueFilter = function(_super) {
 }(Filter);
 
 var DrawAccumulator = function() {
-    function DrawAccumulator(appConfig, appStoreRepository, eventService) {
+    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];
@@ -2044,13 +2136,11 @@ var DrawAccumulator = function() {
                             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;
                     }
@@ -2061,7 +2151,7 @@ var DrawAccumulator = function() {
             }
         });
     }
-    DrawAccumulator.prototype.add = function(layer, drawType, options) {
+    DrawAccumulator.prototype.add = function(layerId, drawType, options) {
         return __awaiter(this, void 0, void 0, (function() {
             var id, painter, inStore;
             return __generator(this, (function(_a) {
@@ -2071,11 +2161,12 @@ var DrawAccumulator = function() {
                     drawType,
                     id
                 };
-                painter.drawService.bindOptions(drawType, layer, options);
+                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 ];
@@ -2104,9 +2195,15 @@ var DrawAccumulator = function() {
     };
     Object.defineProperty(DrawAccumulator.prototype, "gradient", {
         get: function() {
+            var _this = this;
             var gradient = [];
             this.painters.forEach((function(painter) {
-                gradient.push(painter.drawService.layer);
+                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;
@@ -2124,7 +2221,11 @@ var DrawAccumulator = function() {
         var stash = [];
         this.gradient.forEach((function(order) {
             _this.painters.forEach((function(painter) {
-                if (!stash.includes(painter) && painter.drawService.layer === order) {
+                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);
                 }
@@ -2183,8 +2284,7 @@ var DrawService = function() {
         };
         this.id = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
     }
-    DrawService.prototype.bindOptions = function(drawType, layer, options) {
-        this.layer = layer;
+    DrawService.prototype.bindOptions = function(drawType, options) {
         this.options[drawType] = options;
     };
     DrawService.prototype.drawImage = function() {
@@ -2416,6 +2516,70 @@ 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 = function() {
+            if (layerName) return layerName;
+            if (painter) {
+                return "".concat(painter.drawType, "-").concat(painter.id);
+            } else {
+                return "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() {
@@ -2521,7 +2685,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.drawAccumulator = new DrawAccumulator(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);
@@ -2549,14 +2714,11 @@ var WebComponent = function(_super) {
             canvasSelector: this.canvasComponent.getCanvasSelector()
         };
     };
-    WebComponent.prototype.restoreJSONProjects = function(jsonProjects) {
-        var _this = this;
+    WebComponent.prototype.restoreJSONProjects = function(layerId, jsonProjects) {
         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.drawAccumulator.add(layerId, "project", projects[0]);
         this.throughHistoryService.recovery(projects[0]);
     };
     return WebComponent;

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,17 +1,20 @@
 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);
-    add<DrawType extends TDrawType>(layer: number, drawType: DrawType, options: DrawService['options'][DrawType]): Promise<void>;
+    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();
@@ -24,7 +27,6 @@ export default class DrawService {
     private appStoreRepository;
     private eventService;
     id: string;
-    layer: number;
     imageProcessor: IDrawImageProcessor;
     options: {
         image: {
@@ -34,7 +36,7 @@ export default class DrawService {
         project: Project | null;
     };
     constructor(appConfig: AppConfig, appStoreRepository: AppStoreRepository, eventService: EventService);
-    bindOptions<DrawType extends TDrawType>(drawType: DrawType, layer: number, options: DrawService['options'][DrawType]): void;
+    bindOptions<DrawType extends TDrawType>(drawType: DrawType, options: DrawService['options'][DrawType]): void;
     drawImage(isReturnReduceData?: boolean): Promise<{
         reduceData: IImageStateReduce | null;
         message: string | null;

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/web-component.d.ts

@@ -18,6 +18,8 @@ import PullProjectService from "./services/pull-project.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;
@@ -63,6 +65,7 @@ export default class WebComponent extends HTMLElement {
     downloadService: DownloadService;
     resizeService: ResizeService;
     drawAccumulator: DrawAccumulator;
+    drawLayersService: DrawLayersService;
     constructor();
     init(appConfig: AppConfig): {
         editorElement: HTMLDivElement;
@@ -72,5 +75,5 @@ export default class WebComponent extends HTMLElement {
         editorElement: HTMLDivElement;
         canvasSelector: string;
     };
-    restoreJSONProjects(jsonProjects: string): void;
+    restoreJSONProjects(layerId: ILayer['id'], jsonProjects: string): void;
 }

package/package.json

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