canvas-editor-engine 2.3.17 → 2.3.19

package/dist/components/canvas.component.js

@@ -0,0 +1,102 @@
+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

@@ -0,0 +1,258 @@
+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;

package/dist/components/loading.component.js

@@ -0,0 +1,71 @@
+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 LoadingComponent = /** @class */ (function (_super) {
+    __extends(LoadingComponent, _super);
+    function LoadingComponent(loggerService, eventService) {
+        var _this = _super.call(this) || this;
+        _this.loggerService = loggerService;
+        _this.eventService = eventService;
+        _this.template = "\n    <span class=\"loader\"></span>\n  ";
+        _this.css = "\n    .loading-wrapper {\n      display: none;  \n      justify-content: center;\n      align-items: center;\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      background: #ffffff30;\n    }\n\n    .loader {\n      width: 48px;\n      height: 48px;\n      border-radius: 50%;\n      position: relative;\n      animation: rotate 1s linear infinite\n    }\n    .loader::before , .loader::after {\n      content: \"\";\n      box-sizing: border-box;\n      position: absolute;\n      inset: 0px;\n      border-radius: 50%;\n      border: 5px solid #FFF;\n      animation: prixClipFix 2s linear infinite ;\n    }\n    .loader::after{\n      inset: 8px;\n      transform: rotate3d(90, 90, 0, 180deg );\n      border-color: #FF3D00;\n    }\n\n    @keyframes rotate {\n      0%   {transform: rotate(0deg)}\n      100%   {transform: rotate(360deg)}\n    }\n\n    @keyframes prixClipFix {\n        0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}\n        50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}\n        75%, 100%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}\n    }\n  ";
+        _this.loggerService.components.add({
+            info: {
+                name: 'loading',
+                description: 'loading component',
+            },
+            prototype: _this,
+        });
+        return _this;
+    }
+    LoadingComponent.prototype.getComponent = function () {
+        var wrapOptions = {
+            className: 'loading-wrapper',
+        };
+        var loadingTemplate = this.getTemplate(this.template, wrapOptions);
+        var loadingStyle = this.getStyle(this.css);
+        this.loading = loadingTemplate;
+        this.subscribeLoadingStart();
+        this.subscribeLoadingEnd();
+        return { loadingTemplate: loadingTemplate, loadingStyle: loadingStyle };
+    };
+    LoadingComponent.prototype.hide = function () {
+        this.loading.style.display = 'none';
+    };
+    LoadingComponent.prototype.view = function () {
+        this.loading.style.display = 'flex';
+    };
+    LoadingComponent.prototype.subscribeLoadingStart = function () {
+        var _this = this;
+        var controlEvent = {
+            name: 'loading-start',
+            action: function () { return _this.view(); },
+        };
+        this.eventService.subcribe(controlEvent);
+    };
+    LoadingComponent.prototype.subscribeLoadingEnd = function () {
+        var _this = this;
+        var controlEvent = {
+            name: 'loading-end',
+            action: function () { return _this.hide(); },
+        };
+        this.eventService.subcribe(controlEvent);
+    };
+    return LoadingComponent;
+}(ComponentService));
+export default LoadingComponent;

package/dist/components/pipette.component.js

@@ -0,0 +1,120 @@
+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 { Convert } from "../utils/convert";
+import ComponentService from "../services/component.service";
+var PipetteComponent = /** @class */ (function (_super) {
+    __extends(PipetteComponent, _super);
+    function PipetteComponent(toolService, loggerService, canvasComponent) {
+        var _this = _super.call(this) || this;
+        _this.toolService = toolService;
+        _this.loggerService = loggerService;
+        _this.canvasComponent = canvasComponent;
+        _this.template = "\n    <div class=\"pipette_border-out\">\n      <div class=\"pipette_color\">\n        <div class=\"pipette_border-in\">\n          <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>\n        </div> \n      </div>\n    </div>\n  ";
+        _this.css = "\n  .pipette {\n    position: absolute;\n    display: none;\n    justify-content: center;\n    align-items: center;\n    width: 48px;\n    height: 48px;\n  }\n\n  .pipette_border-out {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: 100px;\n    border: solid 2px #d9d9d9;\n    width: 44px;\n    height: 44px;\n  }\n\n  .pipette_border-in {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: 100px;\n    border: solid 1px #d9d9d9;\n    width: 32px;\n    height: 32px;\n  }\n\n  .pipette_color {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 34px;\n    height: 34px;\n    border-radius: 100px;\n    border-color: blue;\n    border-style: solid;\n    border-width: 5px;\n  }\n  ";
+        _this._pipetteState = 'abandoned';
+        _this.tool = {
+            id: 0,
+            name: 'pipette',
+            onAction: function () { return _this.setState('taken'); },
+            offAction: function () { return _this.setState('abandoned'); },
+        };
+        _this.toolService.add(_this.tool);
+        _this.loggerService.components.add({
+            info: {
+                name: 'pipette',
+                description: 'pipette component',
+            },
+            prototype: _this,
+        });
+        return _this;
+    }
+    Object.defineProperty(PipetteComponent.prototype, "pipetteColor", {
+        get: function () {
+            return this._pipetteColor;
+        },
+        set: function (color) {
+            this._pipetteColor = color;
+            this._pipetteColorElement.style.borderColor = this._pipetteColor;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    PipetteComponent.prototype.getComponent = function () {
+        var wrapOptions = {
+            className: 'pipette',
+        };
+        var pipetteTemplate = this.getTemplate(this.template, wrapOptions);
+        var pipetteStyle = this.getStyle(this.css);
+        this.pipette = pipetteTemplate;
+        this._pipetteColorElement = pipetteTemplate.querySelector('.pipette_color');
+        this.emmit();
+        return { pipetteTemplate: pipetteTemplate, pipetteStyle: pipetteStyle };
+    };
+    PipetteComponent.prototype.setState = function (state) {
+        this._pipetteState = state;
+        switch (state) {
+            case 'abandoned':
+                return this.hide();
+            case 'taken':
+                return this.show();
+            case 'selected-color':
+                return this.show();
+            default:
+                return this.hide();
+        }
+    };
+    PipetteComponent.prototype.emmit = function () {
+        var _this = this;
+        this.canvasComponent.subscribe('mousemove', function (event, cursorPosition) {
+            var state = _this._pipetteState;
+            if (state === 'taken' || state === 'selected-color') {
+                var x = cursorPosition.x, y = cursorPosition.y;
+                _this.pipette.style.left = "".concat(x + 10, "px");
+                _this.pipette.style.top = "".concat(y + 10, "px");
+            }
+        });
+        this.canvasComponent.subscribe('click', function (event, cursorPosition) {
+            var state = _this._pipetteState;
+            if (state === 'taken' || state === 'selected-color') {
+                if (state === 'taken') {
+                    _this.setColorFromChoosenPixel(cursorPosition);
+                    _this.setState('selected-color');
+                }
+                if (state === 'selected-color') {
+                    _this.setColorFromChoosenPixel(cursorPosition);
+                }
+            }
+        });
+    };
+    PipetteComponent.prototype.setColorFromChoosenPixel = function (cursorPosition) {
+        var x = cursorPosition.x, y = cursorPosition.y;
+        var pixel = this.canvasComponent.ctx.getImageData(x, y, 1, 1).data;
+        var hexPixel = Convert.rgbToHex(pixel[0], pixel[1], pixel[2]);
+        this.pipetteColor = hexPixel;
+    };
+    PipetteComponent.prototype.show = function () {
+        this.pipette.style.display = 'flex';
+        this.canvasComponent.cursorStyle = 'default';
+    };
+    PipetteComponent.prototype.hide = function () {
+        this.pipette.style.display = 'none';
+        this.canvasComponent.cursorStyle = 'default';
+    };
+    return PipetteComponent;
+}(ComponentService));
+export default PipetteComponent;

package/dist/components/slot.component.js

@@ -0,0 +1,45 @@
+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 SlotComponent = /** @class */ (function (_super) {
+    __extends(SlotComponent, _super);
+    function SlotComponent(loggerService) {
+        var _this = _super.call(this) || this;
+        _this.loggerService = loggerService;
+        _this.template = "\n    <slot class=\"slot\"></slot>\n  ";
+        _this.css = "";
+        _this.loggerService.components.add({
+            info: {
+                name: 'slot',
+                description: 'slot component',
+            },
+            prototype: _this,
+        });
+        return _this;
+    }
+    SlotComponent.prototype.getComponent = function (slotName) {
+        var wrapOptions = {
+            className: 'slot-wrapper',
+        };
+        var slotTemplate = this.getTemplate(this.template, wrapOptions);
+        var slotStyle = this.getStyle(this.css);
+        this.slot = slotTemplate.querySelector('slot');
+        this.slot.name = slotName;
+        return { slotTemplate: slotTemplate, slotStyle: slotStyle };
+    };
+    return SlotComponent;
+}(ComponentService));
+export default SlotComponent;