canvas-editor-engine 1.0.26 → 1.0.28

package/dist/components/canvas.component.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const config_1 = require("../config");
 const component_service_1 = require("../services/component.service");
 const logger_service_1 = require("../services/logger.service");
+const tool_layers_service_1 = require("../services/tool-layers.service");
 class CanvasComponent extends component_service_1.default {
     static template = `
     <div id="event-listener"></div>
@@ -11,7 +12,7 @@ class CanvasComponent extends component_service_1.default {
     static css = `
     #event-listener {
       position: absolute;
-      z-index: 10000;
+      z-index: ${tool_layers_service_1.ToolLayer.getLayerIndex('normal')};
     }
   `;
     static eventListener;

package/dist/components/excretions.component.js

@@ -5,6 +5,7 @@ const tool_service_1 = require("../services/tool.service");
 const canvas_component_1 = require("./canvas.component");
 const logger_service_1 = require("../services/logger.service");
 const crop_service_1 = require("../services/crop.service");
+const tool_layers_service_1 = require("../services/tool-layers.service");
 class ExcretionsComponent extends component_service_1.default {
     static template = ``;
     static templateExcretion = `
@@ -22,6 +23,7 @@ class ExcretionsComponent extends component_service_1.default {
       background-size: 8px 1px, 8px 1px, 1px 8px, 1px 8px;
       background-position: left top, right bottom, left bottom, right top;
       animation: border-dance 1s infinite linear;
+      z-index: ${tool_layers_service_1.ToolLayer.getLayerIndex('low')};
     }
 
     .excretion_crop {
@@ -42,6 +44,7 @@ class ExcretionsComponent extends component_service_1.default {
       width: 30px;
       height: 30px;
       cursor: pointer;
+      z-index: ${tool_layers_service_1.ToolLayer.getLayerIndex('high')};
     }
 
     .crop-button--view {

package/dist/config.d.ts

@@ -1,15 +1,23 @@
 import { ICanvasSize } from "./types/canvas";
-export interface IConfigStore {
-    _WEB_COMPONENT_TAG_NAME: string;
-    _CANVAS_SIZE: ICanvasSize;
+export interface ILayer {
+    name: string;
+    index: number;
 }
-export declare class ConfigFabric {
+export declare abstract class ConfigStore {
+    static _WEB_COMPONENT_TAG_NAME: string;
+    static _CANVAS_SIZE: ICanvasSize;
+    static _LAYERS: ILayer[];
+}
+export declare class ConfigFabric implements ConfigStore {
     protected static _WEB_COMPONENT_TAG_NAME: string;
     protected static _CANVAS_SIZE: ICanvasSize;
+    protected static _LAYERS: ILayer[];
 }
 export default class AppConfig extends ConfigFabric {
     static get WEB_COMPONENT_TAG_NAME(): string;
     static set WEB_COMPONENT_TAG_NAME(value: string | undefined);
     static get CANVAS_SIZE(): ICanvasSize;
     static set CANVAS_SIZE(value: ICanvasSize | undefined);
+    static get LAYERS(): ILayer[];
+    static set LAYERS(value: ILayer[]);
 }

package/dist/config.js

@@ -1,9 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ConfigFabric = void 0;
+exports.ConfigFabric = exports.ConfigStore = void 0;
+;
+class ConfigStore {
+    static _WEB_COMPONENT_TAG_NAME;
+    static _CANVAS_SIZE;
+    static _LAYERS;
+}
+exports.ConfigStore = ConfigStore;
 class ConfigFabric {
     static _WEB_COMPONENT_TAG_NAME;
     static _CANVAS_SIZE;
+    static _LAYERS;
 }
 exports.ConfigFabric = ConfigFabric;
 class AppConfig extends ConfigFabric {
@@ -13,6 +21,20 @@ class AppConfig extends ConfigFabric {
             height: 150,
         };
         AppConfig._WEB_COMPONENT_TAG_NAME = 'canvas-editor-engine';
+        AppConfig._LAYERS = [
+            {
+                name: 'low',
+                index: 1,
+            },
+            {
+                name: 'normal',
+                index: 2,
+            },
+            {
+                name: 'high',
+                index: 3,
+            }
+        ];
     }
     static get WEB_COMPONENT_TAG_NAME() {
         return AppConfig._WEB_COMPONENT_TAG_NAME;
@@ -33,5 +55,13 @@ class AppConfig extends ConfigFabric {
             console.warn('CANVAS_SIZE denied');
         }
     }
+    static get LAYERS() {
+        return AppConfig._LAYERS;
+    }
+    static set LAYERS(value) {
+        if (!!value && !!value?.length) {
+            AppConfig._LAYERS = value;
+        }
+    }
 }
 exports.default = AppConfig;

package/dist/services/tool-layers.service.d.ts

@@ -0,0 +1,4 @@
+export declare class ToolLayer {
+    static multiplier: 1000;
+    static getLayerIndex(layerName: string): number;
+}

package/dist/services/tool-layers.service.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolLayer = void 0;
+const config_1 = require("../config");
+class ToolLayer {
+    static multiplier;
+    static getLayerIndex(layerName) {
+        const layer = config_1.default.LAYERS.find((layer) => layer.name === layerName);
+        const zIndex = ToolLayer.multiplier * layer.index;
+        return zIndex;
+    }
+}
+exports.ToolLayer = ToolLayer;

package/package.json

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