canvas-editor-engine 1.0.25 → 1.0.27

package/dist/components/canvas.component.js

@@ -3,7 +3,40 @@ 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>
+    <canvas id="sc-canvas"></canvas>
+  `;
+    static css = `
+    #event-listener {
+      position: absolute;
+      z-index: ${tool_layers_service_1.ToolLayer.getLayerIndex('normal')};
+    }
+  `;
+    static eventListener;
+    static canvas;
+    static ctx;
+    static subscriptions = {
+        click: [],
+        mousemove: [],
+        mousedown: [],
+        mouseup: [],
+    };
+    static _cursorStyle = {
+        before: null,
+        current: 'default',
+    };
+    static {
+        logger_service_1.default.components.add({
+            info: {
+                name: 'canvas',
+                description: 'canvas component',
+            },
+            prototype: CanvasComponent,
+        });
+    }
     ;
     static getComponent() {
         const canvasTemplate = CanvasComponent.getTemplate(CanvasComponent.template);
@@ -54,33 +87,4 @@ class CanvasComponent extends component_service_1.default {
         });
     }
 }
-CanvasComponent.template = `
-    <div id="event-listener"></div>
-    <canvas id="sc-canvas"></canvas>
-  `;
-CanvasComponent.css = `
-    #event-listener {
-      position: absolute;
-      z-index: 10000;
-    }
-  `;
-CanvasComponent.subscriptions = {
-    click: [],
-    mousemove: [],
-    mousedown: [],
-    mouseup: [],
-};
-CanvasComponent._cursorStyle = {
-    before: null,
-    current: 'default',
-};
-(() => {
-    logger_service_1.default.components.add({
-        info: {
-            name: 'canvas',
-            description: 'canvas component',
-        },
-        prototype: CanvasComponent,
-    });
-})();
 exports.default = CanvasComponent;

package/dist/components/excretions.component.d.ts

@@ -3,6 +3,7 @@ import type { IExcretionsCoords, TExcretionStyle, TExcretionToolState } from "..
 export default class ExcretionsComponent extends ComponentService {
     private static template;
     private static templateExcretion;
+    private static _excretionDefaultStyle;
     private static css;
     static excretionWrap: HTMLElement;
     private static _excretions;
@@ -15,6 +16,8 @@ export default class ExcretionsComponent extends ComponentService {
     static get additionStyle(): TExcretionStyle;
     static set additionStyle(value: TExcretionStyle);
     private static applyExcretionStyle;
+    private static determineCropStyle;
+    private static determineDefaultStyle;
     private static tool;
     static getComponent(): {
         excretionsTemplate: HTMLElement;

package/dist/components/excretions.component.js

@@ -5,7 +5,68 @@ 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 = `
+    <button type="button" class="crop-button">
+      <svg fill="#ffffff" viewBox="0 0 1920 1920" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M426.667 0h106.666v1386.67H1920v106.66H426.667V0zM320 426.667H0v106.666h320V426.667zm320 0v106.666h746.67V1280h106.66V426.667H640zM1493.33 1600h-106.66v320h106.66v-320z"></path> </g></svg>
+    </button>
+  `;
+    static _excretionDefaultStyle = ['excretion'];
+    static css = `
+    .excretion {
+      display: flex;
+      position: absolute;
+      background-image: linear-gradient(90deg, silver 50%, transparent 50%), linear-gradient(90deg, silver 50%, transparent 50%), linear-gradient(0deg, silver 50%, transparent 50%), linear-gradient(0deg, silver 50%, transparent 50%);
+      background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
+      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;
+    }
+
+    .excretion_crop {
+      box-shadow: 0px 0px 0px calc(100vw + 100vh) #50505070;
+    }
+
+    .crop-button {
+      display: none;
+      justify-content: center;
+      align-items: center;
+      position: absolute;
+      padding: 5px;
+      right: -35px;
+      top: 0;
+      background: #232222;
+      border: 1px solid #ffffff50;
+      border-radius: 4px;
+      width: 30px;
+      height: 30px;
+      cursor: pointer;
+      z-index: ${tool_layers_service_1.ToolLayer.getLayerIndex('high')}
+    }
+
+    .crop-button--view {
+      display: flex;
+    }
+
+    @keyframes border-dance {
+      0% {
+        background-position: left top, right bottom, left bottom, right top;
+      }
+      100% {
+        background-position: left 8px top, right 8px bottom, left bottom 8px, right top 8px;
+      }
+    }
+  `;
+    static excretionWrap;
+    static _excretions = [];
+    static _excretionState = 'abandoned';
+    static _excretionActivity = 'abandoned';
+    static _excretionToolState = 'abandoned';
+    static _tempCoords = [];
+    static excretionsCoords = [];
+    static _additionStyle = 'default';
     static get additionStyle() {
         return ExcretionsComponent._additionStyle;
     }
@@ -14,27 +75,57 @@ class ExcretionsComponent extends component_service_1.default {
         ExcretionsComponent.applyExcretionStyle();
     }
     static applyExcretionStyle() {
-        if (ExcretionsComponent._additionStyle === 'crop') {
-            ExcretionsComponent._excretions.forEach((excretion) => {
-                if (!!excretion) {
-                    if (!excretion.classList.contains('excretion_crop')) {
-                        excretion.classList.add("excretion_crop");
-                        crop_service_1.default.viewCropButton();
-                    }
-                }
-            });
-        }
-        else {
-            ExcretionsComponent._excretions.forEach((excretion) => {
-                if (!!excretion) {
-                    if (excretion.classList.contains('excretion_crop')) {
-                        excretion.classList.remove("excretion_crop");
-                    }
-                }
-            });
+        switch (ExcretionsComponent._additionStyle) {
+            case 'crop':
+                ExcretionsComponent.determineCropStyle();
+                break;
+            case 'default':
+                ExcretionsComponent.determineDefaultStyle();
+                break;
+            default:
+                ExcretionsComponent.determineDefaultStyle();
+                break;
         }
     }
     ;
+    static determineCropStyle() {
+        ExcretionsComponent._excretions.forEach((excretion) => {
+            if (!!excretion === false)
+                return;
+            if (!excretion.classList.contains('excretion_crop')) {
+                excretion.classList.add("excretion_crop");
+                crop_service_1.default.viewCropButton();
+            }
+        });
+    }
+    static determineDefaultStyle() {
+        ExcretionsComponent._excretions.forEach((excretion) => {
+            if (!!excretion === false)
+                return;
+            // @ts-ignore
+            excretion.classList = ExcretionsComponent._excretionDefaultStyle;
+        });
+    }
+    static tool = {
+        id: 1,
+        name: 'excretion',
+        onAction: () => ExcretionsComponent.setToolState('taken'),
+        offAction: () => ExcretionsComponent.setToolState('abandoned'),
+        support: () => {
+            ExcretionsComponent.clearExcretionsCoords();
+            ExcretionsComponent.additionStyle = 'default';
+        },
+    };
+    static {
+        tool_service_1.default.add(ExcretionsComponent.tool);
+        logger_service_1.default.components.add({
+            info: {
+                name: 'excretion',
+                description: 'excretion component',
+            },
+            prototype: ExcretionsComponent,
+        });
+    }
     static getComponent() {
         const wrapOptions = {
             className: 'excretions-wrap',
@@ -109,7 +200,7 @@ class ExcretionsComponent extends component_service_1.default {
             const state = ExcretionsComponent._excretionState;
             if (state === 'create') {
                 const wrapOptions = {
-                    className: 'excretion',
+                    className: ExcretionsComponent._excretionDefaultStyle[0],
                 };
                 const excretionTemplate = ExcretionsComponent.getTemplate(ExcretionsComponent.templateExcretion, wrapOptions);
                 ExcretionsComponent.clearExcretionsCoords();
@@ -185,81 +276,4 @@ class ExcretionsComponent extends component_service_1.default {
         });
     }
 }
-ExcretionsComponent.template = ``;
-ExcretionsComponent.templateExcretion = `
-    <button type="button" class="crop-button">
-      <svg fill="#ffffff" viewBox="0 0 1920 1920" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M426.667 0h106.666v1386.67H1920v106.66H426.667V0zM320 426.667H0v106.666h320V426.667zm320 0v106.666h746.67V1280h106.66V426.667H640zM1493.33 1600h-106.66v320h106.66v-320z"></path> </g></svg>
-    </button>
-  `;
-ExcretionsComponent.css = `
-    .excretion {
-      display: flex;
-      position: absolute;
-      background-image: linear-gradient(90deg, silver 50%, transparent 50%), linear-gradient(90deg, silver 50%, transparent 50%), linear-gradient(0deg, silver 50%, transparent 50%), linear-gradient(0deg, silver 50%, transparent 50%);
-      background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
-      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;
-    }
-
-    .excretion_crop {
-      box-shadow: 0px 0px 0px calc(100vw + 100vh) #50505070;
-    }
-
-    .crop-button {
-      display: none;
-      justify-content: center;
-      align-items: center;
-      position: absolute;
-      padding: 5px;
-      right: -35px;
-      top: 0;
-      background: #232222;
-      border: 1px solid #ffffff50;
-      border-radius: 4px;
-      width: 30px;
-      height: 30px;
-      cursor: pointer;
-    }
-
-    .crop-button--view {
-      display: flex;
-    }
-
-    @keyframes border-dance {
-      0% {
-        background-position: left top, right bottom, left bottom, right top;
-      }
-      100% {
-        background-position: left 8px top, right 8px bottom, left bottom 8px, right top 8px;
-      }
-    }
-  `;
-ExcretionsComponent._excretions = [];
-ExcretionsComponent._excretionState = 'abandoned';
-ExcretionsComponent._excretionActivity = 'abandoned';
-ExcretionsComponent._excretionToolState = 'abandoned';
-ExcretionsComponent._tempCoords = [];
-ExcretionsComponent.excretionsCoords = [];
-ExcretionsComponent._additionStyle = 'default';
-ExcretionsComponent.tool = {
-    id: 1,
-    name: 'excretion',
-    onAction: () => ExcretionsComponent.setToolState('taken'),
-    offAction: () => ExcretionsComponent.setToolState('abandoned'),
-    support: () => {
-        ExcretionsComponent.clearExcretionsCoords();
-        ExcretionsComponent.additionStyle = 'default';
-    },
-};
-(() => {
-    tool_service_1.default.add(ExcretionsComponent.tool);
-    logger_service_1.default.components.add({
-        info: {
-            name: 'excretion',
-            description: 'excretion component',
-        },
-        prototype: ExcretionsComponent,
-    });
-})();
 exports.default = ExcretionsComponent;

package/dist/components/pipette.component.js

@@ -6,6 +6,59 @@ const component_service_1 = require("../services/component.service");
 const tool_service_1 = require("../services/tool.service");
 const logger_service_1 = require("../services/logger.service");
 class PipetteComponent extends component_service_1.default {
+    static template = `
+    <div class="pipette_border-out">
+      <div class="pipette_color">
+        <div class="pipette_border-in">
+          <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M17 12C17 14.7614 14.7614 17 12 17M17 12C17 9.23858 14.7614 7 12 7M17 12H19M12 17C9.23858 17 7 14.7614 7 12M12 17V19M7 12C7 9.23858 9.23858 7 12 7M7 12H5M12 7V5M14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12Z" stroke="#d9d9d9" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>
+        </div> 
+      </div>
+    </div>
+  `;
+    static css = `
+  .pipette {
+    position: absolute;
+    display: none;
+    justify-content: center;
+    align-items: center;
+    width: 48px;
+    height: 48px;
+  }
+
+  .pipette_border-out {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 100px;
+    border: solid 2px #d9d9d9;
+    width: 44px;
+    height: 44px;
+  }
+
+  .pipette_border-in {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 100px;
+    border: solid 1px #d9d9d9;
+    width: 32px;
+    height: 32px;
+  }
+
+  .pipette_color {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 34px;
+    height: 34px;
+    border-radius: 100px;
+    border-color: blue;
+    border-style: solid;
+    border-width: 5px;
+  }
+  `;
+    static pipette;
+    static _pipetteColor;
     static set pipetteColor(color) {
         PipetteComponent._pipetteColor = color;
         PipetteComponent._pipetteColorElement.style.borderColor = PipetteComponent._pipetteColor;
@@ -13,6 +66,24 @@ class PipetteComponent extends component_service_1.default {
     static get pipetteColor() {
         return PipetteComponent._pipetteColor;
     }
+    static _pipetteColorElement;
+    static _pipetteState = 'abandoned';
+    static tool = {
+        id: 0,
+        name: 'pipette',
+        onAction: () => PipetteComponent.setState('taken'),
+        offAction: () => PipetteComponent.setState('abandoned'),
+    };
+    static {
+        tool_service_1.default.add(PipetteComponent.tool);
+        logger_service_1.default.components.add({
+            info: {
+                name: 'pipette',
+                description: 'pipette component',
+            },
+            prototype: PipetteComponent,
+        });
+    }
     static getComponent() {
         const wrapOptions = {
             className: 'pipette',
@@ -75,72 +146,4 @@ class PipetteComponent extends component_service_1.default {
         canvas_component_1.default.cursorStyle = 'default';
     }
 }
-PipetteComponent.template = `
-    <div class="pipette_border-out">
-      <div class="pipette_color">
-        <div class="pipette_border-in">
-          <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M17 12C17 14.7614 14.7614 17 12 17M17 12C17 9.23858 14.7614 7 12 7M17 12H19M12 17C9.23858 17 7 14.7614 7 12M12 17V19M7 12C7 9.23858 9.23858 7 12 7M7 12H5M12 7V5M14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12Z" stroke="#d9d9d9" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>
-        </div> 
-      </div>
-    </div>
-  `;
-PipetteComponent.css = `
-  .pipette {
-    position: absolute;
-    display: none;
-    justify-content: center;
-    align-items: center;
-    width: 48px;
-    height: 48px;
-  }
-
-  .pipette_border-out {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 100px;
-    border: solid 2px #d9d9d9;
-    width: 44px;
-    height: 44px;
-  }
-
-  .pipette_border-in {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 100px;
-    border: solid 1px #d9d9d9;
-    width: 32px;
-    height: 32px;
-  }
-
-  .pipette_color {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 34px;
-    height: 34px;
-    border-radius: 100px;
-    border-color: blue;
-    border-style: solid;
-    border-width: 5px;
-  }
-  `;
-PipetteComponent._pipetteState = 'abandoned';
-PipetteComponent.tool = {
-    id: 0,
-    name: 'pipette',
-    onAction: () => PipetteComponent.setState('taken'),
-    offAction: () => PipetteComponent.setState('abandoned'),
-};
-(() => {
-    tool_service_1.default.add(PipetteComponent.tool);
-    logger_service_1.default.components.add({
-        info: {
-            name: 'pipette',
-            description: 'pipette component',
-        },
-        prototype: PipetteComponent,
-    });
-})();
 exports.default = PipetteComponent;

package/dist/components/slot.component.js

@@ -3,6 +3,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const component_service_1 = require("../services/component.service");
 const logger_service_1 = require("../services/logger.service");
 class SlotComponent extends component_service_1.default {
+    static template = `
+    <slot class="slot"></slot>
+  `;
+    static css = ``;
+    static slot;
+    static {
+        logger_service_1.default.components.add({
+            info: {
+                name: 'slot',
+                description: 'slot component',
+            },
+            prototype: SlotComponent,
+        });
+    }
     static getComponent(slotName) {
         const wrapOptions = {
             className: 'slot-wrapper',
@@ -14,17 +28,4 @@ class SlotComponent extends component_service_1.default {
         return { slotTemplate, slotStyle };
     }
 }
-SlotComponent.template = `
-    <slot class="slot"></slot>
-  `;
-SlotComponent.css = ``;
-(() => {
-    logger_service_1.default.components.add({
-        info: {
-            name: 'slot',
-            description: 'slot component',
-        },
-        prototype: SlotComponent,
-    });
-})();
 exports.default = SlotComponent;

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,10 +1,41 @@
 "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 {
+    static {
+        AppConfig._CANVAS_SIZE = {
+            width: 300,
+            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;
     }
@@ -17,19 +48,20 @@ class AppConfig extends ConfigFabric {
         return AppConfig._CANVAS_SIZE;
     }
     static set CANVAS_SIZE(value) {
-        if (!!value && !!(value === null || value === void 0 ? void 0 : value.width) && !!(value === null || value === void 0 ? void 0 : value.height)) {
+        if (!!value && !!value?.width && !!value?.height) {
             AppConfig._CANVAS_SIZE = value;
         }
         else {
             console.warn('CANVAS_SIZE denied');
         }
     }
+    static get LAYERS() {
+        return AppConfig._LAYERS;
+    }
+    static set LAYERS(value) {
+        if (!!value && !!value?.length) {
+            AppConfig._LAYERS = value;
+        }
+    }
 }
-(() => {
-    AppConfig._CANVAS_SIZE = {
-        width: 300,
-        height: 150,
-    };
-    AppConfig._WEB_COMPONENT_TAG_NAME = 'canvas-editor-engine';
-})();
 exports.default = AppConfig;

package/dist/filters/collection/vague.js

@@ -4,9 +4,10 @@ const filter_1 = require("../../utils/filter");
 const convert_1 = require("../../utils/convert");
 const lodash_1 = require("lodash");
 class VagueFilter extends filter_1.Filter {
+    options;
+    filterList = ['pixel'];
     constructor(ctx, options) {
         super(ctx);
-        this.filterList = ['pixel'];
         this.options = options;
     }
     on(action, filterOptions) {
@@ -52,7 +53,6 @@ class VagueFilter extends filter_1.Filter {
         let yEnd = quality;
         (0, lodash_1.range)(0, hq).forEach((hqi) => {
             (0, lodash_1.range)(0, wq).forEach((wqi) => {
-                var _a, _b;
                 const dy = (0, lodash_1.range)(yStart, yEnd);
                 const dx = (0, lodash_1.range)(xStart, xEnd);
                 const items = [];
@@ -65,8 +65,8 @@ class VagueFilter extends filter_1.Filter {
                 });
                 xStart += quality;
                 xEnd += quality;
-                (_a = rangeCommit[i]) !== null && _a !== void 0 ? _a : (rangeCommit[i] = coords);
-                (_b = qualityBuff[i]) !== null && _b !== void 0 ? _b : (qualityBuff[i] = items);
+                rangeCommit[i] ??= coords;
+                qualityBuff[i] ??= items;
                 i++;
             });
             xStart = 0;
@@ -84,11 +84,9 @@ class VagueFilter extends filter_1.Filter {
         });
         qualityBuffWithMostCommonElement.forEach((qPixel, pixelIndex) => {
             qPixel.forEach((pixelColor, pixelColorIndex) => {
-                var _a, _b;
-                var _c;
                 const { x, y } = rangeCommit[pixelIndex][pixelColorIndex];
-                (_a = mostCommonQuanlityBuff[y]) !== null && _a !== void 0 ? _a : (mostCommonQuanlityBuff[y] = []);
-                (_b = (_c = mostCommonQuanlityBuff[y])[x]) !== null && _b !== void 0 ? _b : (_c[x] = pixelColor);
+                mostCommonQuanlityBuff[y] ??= [];
+                mostCommonQuanlityBuff[y][x] ??= pixelColor;
             });
         });
         return mostCommonQuanlityBuff;

package/dist/services/draw.service.js

@@ -9,14 +9,13 @@ class DrawService {
         img.draw(options);
     }
     static drawSmoothImage(ctx, src, options, filterOptions) {
-        var _a, _b;
         const img = new SCImage(src, ctx);
         const filterArgs = {
             x: options.position.x,
             y: options.position.y,
         };
         if (options.size !== 'initial') {
-            if (!!((_a = options.size) === null || _a === void 0 ? void 0 : _a.width) && !!((_b = options.size) === null || _b === void 0 ? void 0 : _b.height)) {
+            if (!!options.size?.width && !!options.size?.height) {
                 filterArgs.width = options.size.width;
                 filterArgs.height = options.size.height;
             }
@@ -27,8 +26,9 @@ class DrawService {
 }
 exports.default = DrawService;
 class SCImage {
+    img = new Image();
+    ctx;
     constructor(src, ctx) {
-        this.img = new Image();
         this.img.src = src;
         this.ctx = ctx;
     }
@@ -42,10 +42,9 @@ class SCImage {
         return new Promise((resolve, reject) => {
             try {
                 protoImg.addEventListener("load", () => {
-                    var _a, _b;
                     let drawImageArgs = [options.position.x, options.position.y];
                     if (options.size !== 'initial') {
-                        if (!!((_a = options.size) === null || _a === void 0 ? void 0 : _a.width) && !!((_b = options.size) === null || _b === void 0 ? void 0 : _b.height)) {
+                        if (!!options.size?.width && !!options.size?.height) {
                             drawImageArgs = drawImageArgs.concat([options.size.width, options.size.height]);
                         }
                         else {

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

@@ -0,0 +1,24 @@
+import { IGUID4 } from "../types/general";
+export declare abstract class ControlEvent {
+    name: string;
+    action: (args?: any) => Event;
+}
+export declare class EventAtom implements ControlEvent {
+    id: IGUID4;
+    name: string;
+    action: (args?: any) => Event;
+}
+export declare abstract class AbstractEvent {
+    eventList: EventAtom[];
+    abstract subcribe(event: EventAtom): void;
+    abstract dispatch(name: ControlEvent['name'], eventArgs?: any): void;
+    abstract applyEvents(baseElement: HTMLDivElement): void;
+}
+export declare class EventService implements AbstractEvent {
+    private baseElement;
+    eventList: EventAtom[];
+    constructor(baseElement: HTMLDivElement);
+    subcribe(controlEvent: ControlEvent): void;
+    dispatch(name: ControlEvent['name'], eventArgs?: any): void;
+    applyEvents(): void;
+}

package/dist/services/event.service.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EventService = exports.AbstractEvent = exports.EventAtom = exports.ControlEvent = void 0;
+const guid4_1 = require("../utils/guid4");
+class ControlEvent {
+    name;
+    action;
+}
+exports.ControlEvent = ControlEvent;
+class EventAtom {
+    id;
+    name;
+    action;
+}
+exports.EventAtom = EventAtom;
+class AbstractEvent {
+    eventList;
+}
+exports.AbstractEvent = AbstractEvent;
+class EventService {
+    baseElement;
+    eventList;
+    constructor(baseElement) {
+        this.baseElement = baseElement;
+    }
+    subcribe(controlEvent) {
+        const eventAtom = {
+            id: new guid4_1.Guid4().finite,
+            ...controlEvent
+        };
+        this.eventList.push(eventAtom);
+    }
+    dispatch(name, eventArgs) {
+        const eventAtom = this.eventList.find((event) => event.name === name);
+        eventAtom.action(eventArgs);
+    }
+    applyEvents() {
+        this.eventList.forEach((event) => {
+            this.baseElement.addEventListener(event.name, event.action);
+        });
+    }
+}
+exports.EventService = EventService;

package/dist/services/logger.service.js

@@ -1,6 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 class LoggerService {
+    static log = {
+        components: [],
+        services: [],
+        planed: [],
+    };
     static get components() {
         return LoggerService.getMethods('components');
     }
@@ -30,9 +35,4 @@ class LoggerService {
         return LoggerService.log[field].find((logItem) => logItem.info.name === name);
     }
 }
-LoggerService.log = {
-    components: [],
-    services: [],
-    planed: [],
-};
 exports.default = LoggerService;

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/dist/services/tool.service.js

@@ -2,6 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const canvas_component_1 = require("../components/canvas.component");
 class ToolService {
+    static before = null;
+    static active = null;
+    static registry = [];
     static add(tool) {
         const hasRegisteredTool = ToolService.registry.find((registeredTool) => registeredTool.id === tool.id);
         if (hasRegisteredTool) {
@@ -12,16 +15,15 @@ class ToolService {
         return true;
     }
     static setActive(id) {
-        var _a, _b, _c;
-        if (((_a = ToolService.active) === null || _a === void 0 ? void 0 : _a.id) === id)
+        if (ToolService.active?.id === id)
             return console.warn('Tool is already active');
-        if (!!((_b = ToolService.active) === null || _b === void 0 ? void 0 : _b.offAction)) {
+        if (!!ToolService.active?.offAction) {
             ToolService.active.offAction();
         }
         const registeredTool = ToolService.registry.find((registeredTool) => registeredTool.id === id);
         if (!!registeredTool) {
             ToolService.active = registeredTool;
-            if (!!((_c = ToolService.active) === null || _c === void 0 ? void 0 : _c.onAction)) {
+            if (!!ToolService.active?.onAction) {
                 ToolService.active.onAction();
             }
         }
@@ -43,8 +45,7 @@ class ToolService {
         }
     }
     static off() {
-        var _a;
-        if (!!((_a = ToolService.active) === null || _a === void 0 ? void 0 : _a.offAction)) {
+        if (!!ToolService.active?.offAction) {
             ToolService.active.offAction();
         }
         ToolService.before = ToolService.active;
@@ -52,7 +53,4 @@ class ToolService {
         canvas_component_1.default.cursorStyle = 'default';
     }
 }
-ToolService.before = null;
-ToolService.active = null;
-ToolService.registry = [];
 exports.default = ToolService;

package/dist/types/general.d.ts

@@ -12,3 +12,4 @@ export interface ITool {
     offAction?: (...args: any) => void;
     support?: (...args: any) => void;
 }
+export type IGUID4 = `${number}-${number}-${number}-${number}`;

package/dist/utils/filter.js

@@ -5,6 +5,8 @@ const config_1 = require("../config");
 const convert_1 = require("./convert");
 const lodash_1 = require("lodash");
 class Filter {
+    ctx;
+    imageSize;
     constructor(ctx) {
         this.ctx = ctx;
     }
@@ -12,8 +14,8 @@ class Filter {
         this.imageSize = size;
     }
     copy(options) {
-        const width = (options === null || options === void 0 ? void 0 : options.width) ? options.width : config_1.default.CANVAS_SIZE.width;
-        const height = (options === null || options === void 0 ? void 0 : options.height) ? options.height : config_1.default.CANVAS_SIZE.height;
+        const width = (options?.width) ? options.width : config_1.default.CANVAS_SIZE.width;
+        const height = (options?.height) ? options.height : config_1.default.CANVAS_SIZE.height;
         const imgData = this.ctx.getImageData(options.x, options.y, width, height);
         return imgData;
     }
@@ -31,11 +33,10 @@ class Filter {
         const buff = [];
         let indexOfDistance = 0;
         hexBuff.forEach((pxColor, pxIndex) => {
-            var _a;
             if (pxIndex >= distanceRow[indexOfDistance + 1]) {
                 indexOfDistance++;
             }
-            (_a = buff[indexOfDistance]) !== null && _a !== void 0 ? _a : (buff[indexOfDistance] = []);
+            buff[indexOfDistance] ??= [];
             buff[indexOfDistance].push(pxColor);
         });
         return buff;
@@ -45,14 +46,13 @@ class Filter {
         let colorIndx = 0;
         let colorRGBAIndx = 0;
         imageData.data.forEach((pxColor) => {
-            var _a;
             if (colorIndx >= 4) {
                 colorIndx = 0;
                 colorRGBAIndx++;
             }
             colorIndx++;
             // @ts-ignore
-            (_a = rowRGBABuff[colorRGBAIndx]) !== null && _a !== void 0 ? _a : (rowRGBABuff[colorRGBAIndx] = []);
+            rowRGBABuff[colorRGBAIndx] ??= [];
             rowRGBABuff[colorRGBAIndx].push(pxColor);
         });
         return rowRGBABuff;

package/dist/utils/guid4.d.ts

@@ -0,0 +1,12 @@
+import { IGUID4 } from "../types/general";
+export declare class Guid4 {
+    static stack: IGUID4[];
+    guid4: IGUID4;
+    constructor();
+    private generate;
+    private getFactor;
+    private get attempt();
+    private get Guid4();
+    private formating;
+    get finite(): IGUID4;
+}

package/dist/utils/guid4.js

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Guid4 = void 0;
+class Guid4 {
+    static stack = [];
+    guid4;
+    constructor() {
+        this.generate(this.attempt);
+    }
+    generate(attempt) {
+        const factor = this.getFactor(this.guid4);
+        attempt.use('withError').run(factor);
+    }
+    getFactor(guid4) {
+        return (attempt) => {
+            guid4 = this.Guid4;
+            if (!Guid4.stack.includes(guid4)) {
+                attempt.current = attempt.max;
+                Guid4.stack.push(guid4);
+            }
+        };
+    }
+    get attempt() {
+        const attemptConfig = {
+            attempt: {
+                current: 1,
+                max: 5,
+            },
+            error: {
+                message: '[Fatal Error] Guid4 module cannot generate unique guid4'
+            }
+        };
+        const attempt = new GenerateAttempt(attemptConfig.attempt, attemptConfig.error);
+        return attempt;
+    }
+    get Guid4() {
+        const base = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx';
+        const regex = /[xy]/g;
+        const guid4 = base.replace(regex, this.formating);
+        return guid4;
+    }
+    formating(char) {
+        const preformer = Math.random() * 16 | 0;
+        const formattedChar = (char == 'x') ? preformer : (preformer & 0x3 | 0x8);
+        return formattedChar.toString(16);
+    }
+    get finite() {
+        const isFound = (item) => !!item;
+        return Guid4.stack.findLast(isFound);
+    }
+    ;
+}
+exports.Guid4 = Guid4;
+;
+class GenerateAttempt {
+    _attempt;
+    _error;
+    constructor(config, error) {
+        this._attempt = config;
+        if (!!error)
+            this._error = error;
+    }
+    use(strategy = 'default') {
+        const context = this;
+        switch (strategy) {
+            case 'default':
+                return {
+                    run(action) {
+                        context.defaultRun(action);
+                    },
+                };
+            case 'withError':
+                return {
+                    run(action) {
+                        context.withErrorRun(action);
+                    },
+                };
+        }
+    }
+    defaultRun(action) {
+        const attemptCondition = this._attempt.current <= this._attempt.max;
+        while (attemptCondition) {
+            action(this._attempt);
+            this._attempt.current++;
+        }
+    }
+    withErrorRun(action) {
+        const attemptCondition = this._attempt.current <= this._attempt.max;
+        const errorCondition = this._attempt.current === this._attempt.max;
+        const errorMessage = this._error.message;
+        while (attemptCondition) {
+            this.throwError(errorCondition, errorMessage);
+            action(this._attempt);
+            this._attempt.current++;
+        }
+    }
+    throwError(condition, message) {
+        if (condition) {
+            throw new Error(message);
+        }
+    }
+}

package/dist/web-component.js

@@ -6,6 +6,10 @@ const excretions_component_1 = require("./components/excretions.component");
 const pipette_component_1 = require("./components/pipette.component");
 const slot_component_1 = require("./components/slot.component");
 class WebComponentWrapper {
+    baseElement;
+    editorWrapElement;
+    stylesWrapElement;
+    toolsWrapElement;
     constructor() {
         const base = document.createElement('div');
         base.className = 'wc-editor';

package/package.json

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