canvas-editor-engine 2.3.22 → 2.3.24

package/dist/index.mjs

@@ -2421,12 +2421,18 @@ var DrawLayersService = function() {
         };
         this.layerList.push(layer);
         this.appStoreRepository.store.drawLayersState.reduce("ADD_LAYER", layer);
+        return layer;
     };
     DrawLayersService.prototype.getLayerByOrder = function(order) {
         return this.layerList.find((function(layer) {
             return layer.order === order;
         }));
     };
+    DrawLayersService.prototype.getLayersByOrder = function(order) {
+        return this.layerList.filter((function(layer) {
+            return layer.order === order;
+        }));
+    };
     DrawLayersService.prototype.getLayerById = function(layerId) {
         return this.layerList.find((function(layer) {
             return layer.id === layerId;
@@ -2481,6 +2487,56 @@ var DrawLayersService = function() {
         var layer = this.layerList[layerIndex];
         this.appStoreRepository.store.drawLayersState.reduce("UPDATE_LAYER", layer);
     };
+    DrawLayersService.prototype.changeLayerOrder = function(id, options) {
+        return __awaiter(this, void 0, void 0, (function() {
+            var _this = this;
+            return __generator(this, (function(_a) {
+                return [ 2, new Promise((function(resolve, reject) {
+                    var layerIndex = _this.layerList.findIndex((function(layer) {
+                        return layer.id === id;
+                    }));
+                    if (layerIndex === -1) return reject({
+                        status: "error",
+                        message: "Layer not found"
+                    });
+                    var layer = _this.layerList[layerIndex];
+                    if (options === null || options === void 0 ? void 0 : options.to) {
+                        layer.order = options.to;
+                    }
+                    if (options === null || options === void 0 ? void 0 : options.direction) {
+                        layer.order = function() {
+                            if (options.direction === "up") {
+                                return layer.order - 1;
+                            } else if (options.direction === "down") {
+                                return layer.order + 1;
+                            } else {
+                                return layer.order;
+                            }
+                        }();
+                    }
+                    if (options === null || options === void 0 ? void 0 : options.addendum) {
+                        var operation = options.addendum.operation;
+                        var operand = options.addendum.value;
+                        if (operation === "add") {
+                            layer.order = layer.order + operand;
+                        } else if (operation === "subtract") {
+                            layer.order = layer.order - operand;
+                        } else if (operation === "multiplication") {
+                            layer.order = layer.order * operand;
+                        } else if (operation === "division") {
+                            layer.order = layer.order / operand;
+                        }
+                    }
+                    _this.layerList[layerIndex] = layer;
+                    _this.appStoreRepository.store.drawLayersState.reduce("UPDATE_LAYER", layer);
+                    resolve({
+                        status: "success",
+                        message: "Layer order updated"
+                    });
+                })) ];
+            }));
+        }));
+    };
     return DrawLayersService;
 }();
 
@@ -2508,18 +2564,24 @@ var Painter = function() {
 
 var DrawAccumulatorService = function() {
     function DrawAccumulatorService(appConfig, appStoreRepository, eventService, drawLayersService) {
+        var _this = this;
         this.appConfig = appConfig;
         this.appStoreRepository = appStoreRepository;
         this.eventService = eventService;
         this.drawLayersService = drawLayersService;
-        this.painters = new Proxy([], {
+        this.painters = new Proxy({
+            value: [],
+            filter: function(callback) {
+                _this.value = _this.value.filter(callback);
+            }
+        }, {
             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;
+                        target["value"] = value.object;
                         value.update();
                         return true;
                     } else {
@@ -2530,7 +2592,7 @@ var DrawAccumulatorService = function() {
                             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;
+                                target["value"].length = value;
                             }
                         }
                         return true;
@@ -2555,7 +2617,7 @@ var DrawAccumulatorService = function() {
                 });
                 painter.drawService.bindOptions(drawType, options);
                 painter.drawService.tempCanvas.bindOptions(initialSize);
-                this.painters.push({
+                this.painters.value.push({
                     object: painter,
                     update: this.update.bind(this)
                 });
@@ -2569,11 +2631,11 @@ var DrawAccumulatorService = function() {
         return __awaiter(this, void 0, void 0, (function() {
             var painter;
             return __generator(this, (function(_a) {
-                painter = this.painters.find((function(painter) {
+                painter = this.painters.value.find((function(painter) {
                     return painter.id === painterId;
                 }));
                 if (!!painter) {
-                    this.painters = this.painters.filter((function(painter) {
+                    this.painters.value.filter((function(painter) {
                         return painter.id !== painterId;
                     }));
                 }
@@ -2583,7 +2645,7 @@ var DrawAccumulatorService = function() {
         }));
     };
     DrawAccumulatorService.prototype.renamePainter = function(painterId, name) {
-        var painter = this.painters.find((function(painter) {
+        var painter = this.painters.value.find((function(painter) {
             return painter.id === painterId;
         }));
         if (painter) {
@@ -2601,7 +2663,7 @@ var DrawAccumulatorService = function() {
             return __generator(this, (function(_a) {
                 useStore = smoothFilterOptions.useStore, options = smoothFilterOptions.options, 
                 filterOptions = smoothFilterOptions.filterOptions;
-                painter = this.painters.find((function(painter) {
+                painter = this.painters.value.find((function(painter) {
                     return painter.id === painterId;
                 }));
                 if (!painter) return [ 2 ];
@@ -2612,6 +2674,18 @@ var DrawAccumulatorService = function() {
             }));
         }));
     };
+    DrawAccumulatorService.prototype.updateLayerOrder = function(layerId, options) {
+        var _this = this;
+        this.drawLayersService.changeLayerOrder(layerId, options).then((function(res) {
+            if (res.status === "success") {
+                _this.update();
+            }
+        })).catch((function(ex) {
+            if (ex.status === "error") {
+                console.warn(ex.message);
+            }
+        }));
+    };
     DrawAccumulatorService.prototype.update = function() {
         var _this = this;
         setTimeout((function() {
@@ -2623,7 +2697,7 @@ var DrawAccumulatorService = function() {
         get: function() {
             var _this = this;
             var gradient = [];
-            this.painters.forEach((function(painter) {
+            this.painters.value.forEach((function(painter) {
                 var layer = _this.drawLayersService.layerList.find((function(layer) {
                     return layer.painters.includes(painter);
                 }));
@@ -2647,7 +2721,7 @@ var DrawAccumulatorService = function() {
         var _this = this;
         var stash = [];
         this.gradient.forEach((function(order) {
-            _this.painters.forEach((function(painter) {
+            _this.painters.value.forEach((function(painter) {
                 var layer = _this.drawLayersService.layerList.find((function(layer) {
                     return layer.painters.includes(painter);
                 }));

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

@@ -1,6 +1,6 @@
 import AppConfig from "../config";
 import AppStoreRepository from "../store/storeRepository";
-import { ILayer } from "../types/draw-layers";
+import { ILayer, IUpdateLayerOptions } from "../types/draw-layers";
 import { IPainter, ISmoothFilterOptions, TDrawType } from "../types/draw-service";
 import { ITempCanvasOptions } from "../types/temp-canvas";
 import Painter from "../utils/painter";
@@ -12,12 +12,16 @@ export default class DrawAccumulatorService {
     private appStoreRepository;
     private eventService;
     private drawLayersService;
-    painters: Painter[];
+    painters: {
+        value: Painter[];
+        filter: (callback: any) => void;
+    };
     constructor(appConfig: AppConfig, appStoreRepository: AppStoreRepository, eventService: EventService, drawLayersService: DrawLayersService);
     add<DrawType extends TDrawType>(layerId: ILayer['id'], drawType: DrawType, options: DrawService['options'][DrawType], initialSize: ITempCanvasOptions): Promise<void>;
     removePainter(painterId: string): Promise<void>;
     renamePainter(painterId: IPainter['id'], name: string): void;
     smoothFilter(painterId: IPainter['id'], smoothFilterOptions: ISmoothFilterOptions): Promise<void>;
+    updateLayerOrder(layerId: ILayer['id'], options: IUpdateLayerOptions): void;
     private update;
     private get gradient();
     private clearCanvas;

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

@@ -1,5 +1,5 @@
 import AppStoreRepository from "../store/storeRepository";
-import { ILayer, ILayerUpdate } from "../types/draw-layers";
+import { ILayer, ILayerUpdate, IUpdateLayerOptions } from "../types/draw-layers";
 import { IPainter } from "../types/draw-service";
 import Painter from "../utils/painter";
 export default class DrawLayersService {
@@ -9,11 +9,13 @@ export default class DrawLayersService {
     addLayer(layerOptions?: {
         layerName?: string;
         painter?: IPainter;
-    }): void;
+    }): ILayer;
     getLayerByOrder(order: number): ILayer;
+    getLayersByOrder(order: number): ILayer[];
     getLayerById(layerId: ILayer['id']): ILayer;
     addToLayer(id: ILayer['id'], painter: IPainter): void;
     updateLayer(id: ILayer['id'], updateData?: ILayerUpdate): void;
     removePainter(id: IPainter['id']): void;
     updatePainterData(painter: Painter): void;
+    changeLayerOrder(id: ILayer['id'], options: IUpdateLayerOptions): Promise<unknown>;
 }

package/dist/types/draw-layers.d.ts

@@ -11,3 +11,11 @@ export interface ILayerUpdate {
     name?: ILayer['name'];
 }
 export type TReducerNames = 'SET_LAYERS' | 'UPDATE_LAYER' | 'ADD_LAYER';
+export interface IUpdateLayerOptions {
+    to?: number;
+    direction?: 'up' | 'down';
+    addendum?: {
+        operation: 'add' | 'subtract' | 'multiplication' | 'division';
+        value: number;
+    };
+}

package/dist/web-component.d.ts

@@ -17,7 +17,7 @@ import ProjectsService from "./services/projects.service";
 import PullProjectService from "./services/pull-project.service";
 import DrawService from "./services/draw.service";
 import DownloadService from "./services/download.service";
-import ResizeService from "./services/serize.service";
+import ResizeService from "./services/resize.service";
 import DrawLayersService from "./services/draw-layers.service";
 import { ILayer } from "./types/draw-layers";
 import DrawAccumulatorService from "./services/draw-accumulator.service";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvas-editor-engine",
-  "version": "2.3.22",
+  "version": "2.3.24",
   "description": "CanvasEditorEngine library, use: [typescript] [canvas]",
   "main": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -9,7 +9,7 @@
   ],
   "type": "module",
   "scripts": {
-    "test": "node test/test.js",
+    "test": "jest",
     "build:ts": "tsc",
     "build": "rollup -c",
     "realise": "npm version patch && npm publish"
@@ -22,13 +22,15 @@
   "author": "SavaFeeD",
   "license": "ISC",
   "devDependencies": {
-    "@types/node": "^22.7.4",
-    "typescript": "^5.7.2",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^12.1.1",
-    "rollup": "^4.28.1"
+    "@types/node": "^22.7.4",
+    "babel-jest": "^29.7.0",
+    "rollup": "^4.28.1",
+    "typescript": "^5.7.2"
   },
   "dependencies": {
+    "rollup-plugin-multi-input": "^1.5.0",
     "tslib": "^2.8.1"
   }
 }

package/dist/components/canvas.component.js

@@ -1,102 +0,0 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-import ComponentService from "../services/component.service";
-var CanvasComponent = /** @class */ (function (_super) {
-    __extends(CanvasComponent, _super);
-    function CanvasComponent(appConfig, loggerService, toolLayerService) {
-        var _this = _super.call(this) || this;
-        _this.appConfig = appConfig;
-        _this.loggerService = loggerService;
-        _this.toolLayerService = toolLayerService;
-        _this.template = "\n    <div id=\"event-listener\"></div>\n    <canvas id=\"sc-canvas\"></canvas>\n  ";
-        _this.css = "\n    #event-listener {\n      position: absolute;\n      z-index: ".concat(_this.toolLayerService.getLayerIndex('normal'), ";\n    }\n  ");
-        _this.subscriptions = {
-            click: [],
-            mousemove: [],
-            mousedown: [],
-            mouseup: [],
-        };
-        _this._cursorStyle = {
-            before: null,
-            current: 'default',
-        };
-        _this.loggerService.components.add({
-            info: {
-                name: 'canvas',
-                description: 'canvas component',
-            },
-            prototype: _this,
-        });
-        return _this;
-    }
-    ;
-    CanvasComponent.prototype.getComponent = function () {
-        var canvasTemplate = this.getTemplate(this.template);
-        var canvasStyle = this.getStyle(this.css);
-        canvasTemplate.style.display = 'flex';
-        this.canvas = canvasTemplate.getElementsByTagName('canvas')[0];
-        this.canvas.width = this.appConfig.CANVAS_SIZE.width;
-        this.canvas.height = this.appConfig.CANVAS_SIZE.height;
-        this.ctx = this.canvas.getContext("2d", { willReadFrequently: true });
-        this.eventListener = canvasTemplate.querySelector('#event-listener');
-        this.eventListener.style.width = this.appConfig.CANVAS_SIZE.width + 'px';
-        this.eventListener.style.height = this.appConfig.CANVAS_SIZE.height + 'px';
-        return { canvasTemplate: canvasTemplate, canvasStyle: canvasStyle };
-    };
-    CanvasComponent.prototype.getCanvasSelector = function () {
-        return '#sc-canvas';
-    };
-    Object.defineProperty(CanvasComponent.prototype, "cursorStyle", {
-        set: function (styleName) {
-            if (!!styleName) {
-                this._cursorStyle.before = this._cursorStyle.current;
-                this._cursorStyle.current = styleName;
-                this.eventListener.style.cursor = styleName;
-            }
-            else {
-                this.eventListener.style.cursor = 'default';
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    CanvasComponent.prototype.getCursorPosition = function (event) {
-        var rect = this.canvas.getBoundingClientRect();
-        var x = (event.clientX - rect.left) / this.appConfig.ZOOM;
-        var y = (event.clientY - rect.top) / this.appConfig.ZOOM;
-        return { x: x, y: y };
-    };
-    CanvasComponent.prototype.subscribe = function (eventName, action) {
-        this.subscriptions[eventName].push(action);
-    };
-    CanvasComponent.prototype.simulateSubscriptions = function () {
-        var _this = this;
-        var eventNames = Object.keys(this.subscriptions);
-        eventNames.forEach(function (eventName) {
-            var actionsList = _this.subscriptions[eventName];
-            if (!!actionsList.length) {
-                _this.eventListener.addEventListener(eventName, function (event) {
-                    var cursorPosition = _this.getCursorPosition(event);
-                    actionsList.forEach(function (action) {
-                        action(event, cursorPosition);
-                    });
-                });
-            }
-        });
-    };
-    return CanvasComponent;
-}(ComponentService));
-export default CanvasComponent;

package/dist/components/excretions.component.js

@@ -1,258 +0,0 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-import { reflect } from "../utils/reflect";
-reflect();
-import ComponentService from "../services/component.service";
-var ExcretionsComponent = /** @class */ (function (_super) {
-    __extends(ExcretionsComponent, _super);
-    function ExcretionsComponent(toolService, loggerService, toolLayerService, 
-    // private cropService: CropService,
-    canvasComponent) {
-        var _this = _super.call(this) || this;
-        _this.toolService = toolService;
-        _this.loggerService = loggerService;
-        _this.toolLayerService = toolLayerService;
-        _this.canvasComponent = canvasComponent;
-        _this.template = "";
-        _this.templateExcretion = "\n    <button type=\"button\" class=\"crop-button\">\n      <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>\n    </button>\n  ";
-        _this._excretionDefaultStyle = ['excretion'];
-        _this.css = "\n    .excretion {\n      display: flex;\n      position: absolute;\n      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%);\n      background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;\n      background-size: 8px 1px, 8px 1px, 1px 8px, 1px 8px;\n      background-position: left top, right bottom, left bottom, right top;\n      animation: border-dance 1s infinite linear;\n      z-index: ".concat(_this.toolLayerService.getLayerIndex('low'), ";\n    }\n\n    .excretion_crop {\n      box-shadow: 0px 0px 0px calc(100vw + 100vh) #50505070;\n    }\n\n    .crop-button {\n      display: none;\n      justify-content: center;\n      align-items: center;\n      position: absolute;\n      padding: 5px;\n      right: -35px;\n      top: 0;\n      background: #232222;\n      border: 1px solid #ffffff50;\n      border-radius: 4px;\n      width: 30px;\n      height: 30px;\n      cursor: pointer;\n      z-index: ").concat(_this.toolLayerService.getLayerIndex('high'), ";\n    }\n\n    .crop-button--view {\n      display: flex;\n    }\n\n    @keyframes border-dance {\n      0% {\n        background-position: left top, right bottom, left bottom, right top;\n      }\n      100% {\n        background-position: left 8px top, right 8px bottom, left bottom 8px, right top 8px;\n      }\n    }\n  ");
-        _this._excretions = [];
-        _this._excretionState = 'abandoned';
-        _this._excretionActivity = 'abandoned';
-        _this._excretionToolState = 'abandoned';
-        _this._tempCoords = [];
-        _this.excretionsCoords = [];
-        _this._additionStyle = 'default';
-        _this.tool = {
-            id: 1,
-            name: 'excretion',
-            onAction: function () { return _this.setToolState('taken'); },
-            offAction: function () { return _this.setToolState('abandoned'); },
-            support: function () {
-                _this.clearExcretionsCoords();
-                _this.additionStyle = 'default';
-            },
-        };
-        _this.toolService.add(_this.tool);
-        _this.loggerService.components.add({
-            info: {
-                name: 'excretion',
-                description: 'excretion component',
-            },
-            prototype: _this,
-        });
-        return _this;
-    }
-    Object.defineProperty(ExcretionsComponent.prototype, "additionStyle", {
-        get: function () {
-            return this._additionStyle;
-        },
-        set: function (value) {
-            this._additionStyle = value;
-            this.applyExcretionStyle();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    ExcretionsComponent.prototype.applyExcretionStyle = function () {
-        switch (this._additionStyle) {
-            case 'crop':
-                this.determineCropStyle();
-                break;
-            case 'default':
-                this.determineDefaultStyle();
-                break;
-            default:
-                this.determineDefaultStyle();
-                break;
-        }
-    };
-    ;
-    ExcretionsComponent.prototype.determineCropStyle = function () {
-        this._excretions.forEach(function (excretion) {
-            if (!!excretion === false)
-                return;
-            if (!excretion.classList.contains('excretion_crop')) {
-                excretion.classList.add("excretion_crop");
-                // this.cropService.viewCropButton();
-            }
-        });
-    };
-    ExcretionsComponent.prototype.determineDefaultStyle = function () {
-        var _this = this;
-        this._excretions.forEach(function (excretion) {
-            if (!!excretion === false)
-                return;
-            // @ts-ignore
-            excretion.classList = _this._excretionDefaultStyle;
-        });
-    };
-    ExcretionsComponent.prototype.getComponent = function () {
-        var wrapOptions = {
-            className: 'excretions-wrap',
-        };
-        var excretionsTemplate = this.getTemplate(this.template, wrapOptions);
-        var excretionsStyle = this.getStyle(this.css);
-        this.excretionWrap = excretionsTemplate;
-        this.emmit();
-        return { excretionsTemplate: excretionsTemplate, excretionsStyle: excretionsStyle };
-    };
-    Object.defineProperty(ExcretionsComponent.prototype, "excretionState", {
-        set: function (state) {
-            this._excretionState = state;
-            this.applyExcretionStyle();
-            switch (state) {
-                case 'abandoned':
-                    this.canvasComponent.cursorStyle = 'default';
-                    break;
-                case 'create':
-                    this.canvasComponent.cursorStyle = 'crosshair';
-                    break;
-                case 'add':
-                    this.canvasComponent.cursorStyle = 'copy';
-                    break;
-                case 'remove':
-                    this.canvasComponent.cursorStyle = 'alias';
-                    break;
-                default:
-                    this.canvasComponent.cursorStyle = 'default';
-                    break;
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    ExcretionsComponent.prototype.setToolState = function (toolState) {
-        this._excretionToolState = toolState;
-        switch (toolState) {
-            case 'abandoned':
-                this.excretionState = 'abandoned';
-                this._excretionActivity = 'abandoned';
-                break;
-            case 'taken':
-                this.excretionState = 'create';
-                break;
-            default:
-                this.excretionState = 'abandoned';
-                this._excretionActivity = 'abandoned';
-                break;
-        }
-    };
-    ExcretionsComponent.prototype.clearExcretionsCoords = function () {
-        this._excretions.forEach(function (excretion) { return excretion.remove(); });
-        this._excretions = [];
-        this.excretionsCoords = [];
-    };
-    ExcretionsComponent.prototype.getTempCoords = function () {
-        var startCoords = this._tempCoords[0];
-        var endCoords = this._tempCoords[1];
-        var coords = Object.assign(startCoords, endCoords);
-        this._tempCoords = [];
-        return coords;
-    };
-    ExcretionsComponent.prototype.endExcretion = function () {
-        var coords = this.getTempCoords();
-        this.excretionsCoords.push(coords);
-        this._excretionActivity = 'end';
-    };
-    ExcretionsComponent.prototype.emmit = function () {
-        var _this = this;
-        this.canvasComponent.subscribe('mousedown', function (event, cursorPosition) {
-            var toolState = _this._excretionToolState;
-            if (toolState === 'abandoned')
-                return;
-            var state = _this._excretionState;
-            if (state === 'create') {
-                var wrapOptions = {
-                    className: _this._excretionDefaultStyle[0],
-                };
-                var excretionTemplate = _this.getTemplate(_this.templateExcretion, wrapOptions);
-                _this.clearExcretionsCoords();
-                var tempStart = {
-                    start: cursorPosition,
-                };
-                excretionTemplate.style.left = "".concat(tempStart.start.x, "px");
-                excretionTemplate.style.top = "".concat(tempStart.start.y, "px");
-                var excretionElement = _this.excretionWrap.appendChild(excretionTemplate);
-                _this._excretions.push(excretionElement);
-                _this._tempCoords.push(tempStart);
-            }
-            if (state === 'add') {
-                var tempStart = {
-                    start: cursorPosition,
-                };
-                _this._tempCoords.push(tempStart);
-            }
-            _this.applyExcretionStyle();
-            _this._excretionActivity = 'active';
-        });
-        this.canvasComponent.subscribe('mousemove', function (event, cursorPosition) {
-            var toolState = _this._excretionToolState;
-            if (toolState === 'abandoned')
-                return;
-            var activity = _this._excretionActivity;
-            if (event.altKey && _this._excretionState !== 'abandoned') {
-                _this._excretionState = 'add';
-            }
-            if (activity === 'abandoned')
-                return;
-            if (activity === 'active') {
-                var excretionLastIndex = _this._excretions.length - 1;
-                var excretion = _this._excretions[excretionLastIndex];
-                var excretionX = +(excretion.style.left.split('px')[0]);
-                var excretionY = +(excretion.style.top.split('px')[0]);
-                var width = Math.abs(cursorPosition.x - excretionX);
-                var height = Math.abs(cursorPosition.y - excretionY);
-                excretion.style.width = width + 'px';
-                excretion.style.height = height + 'px';
-                var isRightBottom = cursorPosition.x > excretionX && cursorPosition.y > excretionY;
-                var isLeftBottom = cursorPosition.x < excretionX && cursorPosition.y > excretionY;
-                var isLeftTop = cursorPosition.x < excretionX && cursorPosition.y < excretionY;
-                var isRightTop = cursorPosition.x > excretionX && cursorPosition.y < excretionY;
-                if (isRightBottom) {
-                    excretion.style.transform = "translateX(0px) translateY(0px)";
-                }
-                else if (isLeftBottom) {
-                    excretion.style.transform = "translateX(-".concat(width, "px) translateY(0px)");
-                }
-                else if (isLeftTop) {
-                    excretion.style.transform = "translateX(-".concat(width, "px) translateY(-").concat(height, "px)");
-                }
-                else if (isRightTop) {
-                    excretion.style.transform = "translateX(0px) translateY(-".concat(height, "px)");
-                }
-            }
-        });
-        this.canvasComponent.subscribe('mouseup', function (event, cursorPosition) {
-            var toolState = _this._excretionToolState;
-            if (toolState === 'abandoned')
-                return;
-            var state = _this._excretionState;
-            if (state === 'abandoned')
-                return;
-            if (state === 'create' || state === 'add') {
-                var tempEnd = {
-                    end: cursorPosition,
-                };
-                _this._tempCoords.push(tempEnd);
-                _this.endExcretion();
-            }
-        });
-    };
-    return ExcretionsComponent;
-}(ComponentService));
-export default ExcretionsComponent;