canvas-editor-engine 2.0.1 → 2.0.4

package/dist/components/excretions.component.js

@@ -1,280 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const component_service_1 = require("../services/component.service");
-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;
-      z-index: ${tool_layers_service_1.default.getLayerIndex('low')};
-    }
-
-    .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.default.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;
-    }
-    static set additionStyle(value) {
-        ExcretionsComponent._additionStyle = value;
-        ExcretionsComponent.applyExcretionStyle();
-    }
-    static applyExcretionStyle() {
-        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',
-        };
-        const excretionsTemplate = ExcretionsComponent.getTemplate(ExcretionsComponent.template, wrapOptions);
-        const excretionsStyle = ExcretionsComponent.getStyle(ExcretionsComponent.css);
-        ExcretionsComponent.excretionWrap = excretionsTemplate;
-        ExcretionsComponent.emmit();
-        return { excretionsTemplate, excretionsStyle };
-    }
-    static set excretionState(state) {
-        ExcretionsComponent._excretionState = state;
-        ExcretionsComponent.applyExcretionStyle();
-        switch (state) {
-            case 'abandoned':
-                canvas_component_1.default.cursorStyle = 'default';
-                break;
-            case 'create':
-                canvas_component_1.default.cursorStyle = 'crosshair';
-                break;
-            case 'add':
-                canvas_component_1.default.cursorStyle = 'copy';
-                break;
-            case 'remove':
-                canvas_component_1.default.cursorStyle = 'alias';
-                break;
-            default:
-                canvas_component_1.default.cursorStyle = 'default';
-                break;
-        }
-    }
-    static setToolState(toolState) {
-        ExcretionsComponent._excretionToolState = toolState;
-        switch (toolState) {
-            case 'abandoned':
-                ExcretionsComponent.excretionState = 'abandoned';
-                ExcretionsComponent._excretionActivity = 'abandoned';
-                break;
-            case 'taken':
-                ExcretionsComponent.excretionState = 'create';
-                break;
-            default:
-                ExcretionsComponent.excretionState = 'abandoned';
-                ExcretionsComponent._excretionActivity = 'abandoned';
-                break;
-        }
-    }
-    static clearExcretionsCoords() {
-        console.log('clear!');
-        ExcretionsComponent._excretions.forEach((excretion) => excretion.remove());
-        ExcretionsComponent._excretions = [];
-        ExcretionsComponent.excretionsCoords = [];
-    }
-    static getTempCoords() {
-        const startCoords = ExcretionsComponent._tempCoords[0];
-        const endCoords = ExcretionsComponent._tempCoords[1];
-        const coords = Object.assign(startCoords, endCoords);
-        ExcretionsComponent._tempCoords = [];
-        return coords;
-    }
-    static endExcretion() {
-        const coords = ExcretionsComponent.getTempCoords();
-        ExcretionsComponent.excretionsCoords.push(coords);
-        ExcretionsComponent._excretionActivity = 'end';
-        console.log('ExcretionsComponent.excretionsCoords', ExcretionsComponent.excretionsCoords);
-    }
-    static emmit() {
-        canvas_component_1.default.subscribe('mousedown', (event, cursorPosition) => {
-            const toolState = ExcretionsComponent._excretionToolState;
-            if (toolState === 'abandoned')
-                return;
-            const state = ExcretionsComponent._excretionState;
-            if (state === 'create') {
-                const wrapOptions = {
-                    className: ExcretionsComponent._excretionDefaultStyle[0],
-                };
-                const excretionTemplate = ExcretionsComponent.getTemplate(ExcretionsComponent.templateExcretion, wrapOptions);
-                ExcretionsComponent.clearExcretionsCoords();
-                const tempStart = {
-                    start: cursorPosition,
-                };
-                excretionTemplate.style.left = `${tempStart.start.x}px`;
-                excretionTemplate.style.top = `${tempStart.start.y}px`;
-                const excretionElement = ExcretionsComponent.excretionWrap.appendChild(excretionTemplate);
-                ExcretionsComponent._excretions.push(excretionElement);
-                ExcretionsComponent._tempCoords.push(tempStart);
-            }
-            if (state === 'add') {
-                const tempStart = {
-                    start: cursorPosition,
-                };
-                ExcretionsComponent._tempCoords.push(tempStart);
-            }
-            ExcretionsComponent.applyExcretionStyle();
-            ExcretionsComponent._excretionActivity = 'active';
-        });
-        canvas_component_1.default.subscribe('mousemove', (event, cursorPosition) => {
-            const toolState = ExcretionsComponent._excretionToolState;
-            if (toolState === 'abandoned')
-                return;
-            const activity = ExcretionsComponent._excretionActivity;
-            if (event.altKey && ExcretionsComponent._excretionState !== 'abandoned') {
-                ExcretionsComponent._excretionState = 'add';
-            }
-            if (activity === 'abandoned')
-                return;
-            if (activity === 'active') {
-                const excretionLastIndex = ExcretionsComponent._excretions.length - 1;
-                const excretion = ExcretionsComponent._excretions[excretionLastIndex];
-                const excretionX = +(excretion.style.left.split('px')[0]);
-                const excretionY = +(excretion.style.top.split('px')[0]);
-                const width = Math.abs(cursorPosition.x - excretionX);
-                const height = Math.abs(cursorPosition.y - excretionY);
-                excretion.style.width = width + 'px';
-                excretion.style.height = height + 'px';
-                const isRightBottom = cursorPosition.x > excretionX && cursorPosition.y > excretionY;
-                const isLeftBottom = cursorPosition.x < excretionX && cursorPosition.y > excretionY;
-                const isLeftTop = cursorPosition.x < excretionX && cursorPosition.y < excretionY;
-                const isRightTop = cursorPosition.x > excretionX && cursorPosition.y < excretionY;
-                if (isRightBottom) {
-                    excretion.style.transform = `translateX(0px) translateY(0px)`;
-                }
-                else if (isLeftBottom) {
-                    excretion.style.transform = `translateX(-${width}px) translateY(0px)`;
-                }
-                else if (isLeftTop) {
-                    excretion.style.transform = `translateX(-${width}px) translateY(-${height}px)`;
-                }
-                else if (isRightTop) {
-                    excretion.style.transform = `translateX(0px) translateY(-${height}px)`;
-                }
-            }
-        });
-        canvas_component_1.default.subscribe('mouseup', (event, cursorPosition) => {
-            const toolState = ExcretionsComponent._excretionToolState;
-            if (toolState === 'abandoned')
-                return;
-            const state = ExcretionsComponent._excretionState;
-            if (state === 'abandoned')
-                return;
-            if (state === 'create' || state === 'add') {
-                const tempEnd = {
-                    end: cursorPosition,
-                };
-                ExcretionsComponent._tempCoords.push(tempEnd);
-                ExcretionsComponent.endExcretion();
-            }
-        });
-    }
-}
-exports.default = ExcretionsComponent;

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

@@ -1,14 +0,0 @@
-import ComponentService from "../services/component.service";
-export default class LoadingComponent extends ComponentService {
-    private static template;
-    private static css;
-    static loading: HTMLElement;
-    static getComponent(): {
-        loadingTemplate: HTMLElement;
-        loadingStyle: HTMLStyleElement;
-    };
-    static hide(): void;
-    static view(): void;
-    private static subscribeLoadingStart;
-    private static subscribeLoadingEnd;
-}

package/dist/components/loading.component.js

@@ -1,96 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const component_service_1 = require("../services/component.service");
-const event_service_1 = require("../services/event.service");
-const logger_service_1 = require("../services/logger.service");
-class LoadingComponent extends component_service_1.default {
-    static template = `
-    <span class="loader"></span>
-  `;
-    static css = `
-    .loading-wrapper {
-      display: none;  
-      justify-content: center;
-      align-items: center;
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      background: #ffffff30;
-    }
-
-    .loader {
-      width: 48px;
-      height: 48px;
-      border-radius: 50%;
-      position: relative;
-      animation: rotate 1s linear infinite
-    }
-    .loader::before , .loader::after {
-      content: "";
-      box-sizing: border-box;
-      position: absolute;
-      inset: 0px;
-      border-radius: 50%;
-      border: 5px solid #FFF;
-      animation: prixClipFix 2s linear infinite ;
-    }
-    .loader::after{
-      inset: 8px;
-      transform: rotate3d(90, 90, 0, 180deg );
-      border-color: #FF3D00;
-    }
-
-    @keyframes rotate {
-      0%   {transform: rotate(0deg)}
-      100%   {transform: rotate(360deg)}
-    }
-
-    @keyframes prixClipFix {
-        0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
-        50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
-        75%, 100%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
-    }
-  `;
-    static loading;
-    static {
-        logger_service_1.default.components.add({
-            info: {
-                name: 'loading',
-                description: 'loading component',
-            },
-            prototype: LoadingComponent,
-        });
-    }
-    static getComponent() {
-        const wrapOptions = {
-            className: 'loading-wrapper',
-        };
-        const loadingTemplate = LoadingComponent.getTemplate(LoadingComponent.template, wrapOptions);
-        const loadingStyle = LoadingComponent.getStyle(LoadingComponent.css);
-        LoadingComponent.loading = loadingTemplate;
-        LoadingComponent.subscribeLoadingStart();
-        LoadingComponent.subscribeLoadingEnd();
-        return { loadingTemplate, loadingStyle };
-    }
-    static hide() {
-        LoadingComponent.loading.style.display = 'none';
-    }
-    static view() {
-        LoadingComponent.loading.style.display = 'flex';
-    }
-    static subscribeLoadingStart() {
-        const controlEvent = {
-            name: 'loading-start',
-            action: () => LoadingComponent.view(),
-        };
-        event_service_1.default.subcribe(controlEvent);
-    }
-    static subscribeLoadingEnd() {
-        const controlEvent = {
-            name: 'loading-end',
-            action: () => LoadingComponent.hide(),
-        };
-        event_service_1.default.subcribe(controlEvent);
-    }
-}
-exports.default = LoadingComponent;

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

@@ -1,23 +0,0 @@
-import { TPipetteState } from "../types/pipette";
-import { THEXColor } from "../types/general";
-import ComponentService from "../services/component.service";
-export default class PipetteComponent extends ComponentService {
-    static template: string;
-    static css: string;
-    static pipette: HTMLElement;
-    private static _pipetteColor;
-    static set pipetteColor(color: THEXColor);
-    static get pipetteColor(): THEXColor;
-    private static _pipetteColorElement;
-    private static _pipetteState;
-    private static tool;
-    static getComponent(): {
-        pipetteTemplate: HTMLElement;
-        pipetteStyle: HTMLStyleElement;
-    };
-    static setState(state: TPipetteState): void;
-    static emmit(): void;
-    private static setColorFromChoosenPixel;
-    private static show;
-    private static hide;
-}

package/dist/components/pipette.component.js

@@ -1,149 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const convert_1 = require("../utils/convert");
-const canvas_component_1 = require("./canvas.component");
-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;
-    }
-    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',
-        };
-        const pipetteTemplate = PipetteComponent.getTemplate(PipetteComponent.template, wrapOptions);
-        const pipetteStyle = PipetteComponent.getStyle(PipetteComponent.css);
-        PipetteComponent.pipette = pipetteTemplate;
-        PipetteComponent._pipetteColorElement = pipetteTemplate.querySelector('.pipette_color');
-        PipetteComponent.emmit();
-        return { pipetteTemplate, pipetteStyle };
-    }
-    static setState(state) {
-        PipetteComponent._pipetteState = state;
-        switch (state) {
-            case 'abandoned':
-                return PipetteComponent.hide();
-            case 'taken':
-                return PipetteComponent.show();
-            case 'selected-color':
-                return PipetteComponent.show();
-            default:
-                return PipetteComponent.hide();
-        }
-    }
-    static emmit() {
-        canvas_component_1.default.subscribe('mousemove', (event, cursorPosition) => {
-            const state = PipetteComponent._pipetteState;
-            if (state === 'taken' || state === 'selected-color') {
-                const { x, y } = cursorPosition;
-                PipetteComponent.pipette.style.left = `${x + 10}px`;
-                PipetteComponent.pipette.style.top = `${y + 10}px`;
-            }
-        });
-        canvas_component_1.default.subscribe('click', (event, cursorPosition) => {
-            const state = PipetteComponent._pipetteState;
-            if (state === 'taken' || state === 'selected-color') {
-                console.log('pipetteState', state);
-                if (state === 'taken') {
-                    PipetteComponent.setColorFromChoosenPixel(cursorPosition);
-                    PipetteComponent.setState('selected-color');
-                }
-                if (state === 'selected-color') {
-                    PipetteComponent.setColorFromChoosenPixel(cursorPosition);
-                }
-            }
-        });
-    }
-    static setColorFromChoosenPixel(cursorPosition) {
-        const { x, y } = cursorPosition;
-        const pixel = canvas_component_1.default.ctx.getImageData(x, y, 1, 1).data;
-        const hexPixel = convert_1.Convert.rgbToHex(pixel[0], pixel[1], pixel[2]);
-        PipetteComponent.pipetteColor = hexPixel;
-    }
-    static show() {
-        PipetteComponent.pipette.style.display = 'flex';
-        canvas_component_1.default.cursorStyle = 'default';
-    }
-    static hide() {
-        PipetteComponent.pipette.style.display = 'none';
-        canvas_component_1.default.cursorStyle = 'default';
-    }
-}
-exports.default = PipetteComponent;

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

@@ -1,10 +0,0 @@
-import ComponentService from "../services/component.service";
-export default class SlotComponent extends ComponentService {
-    private static template;
-    private static css;
-    static slot: HTMLSlotElement;
-    static getComponent(slotName: string): {
-        slotTemplate: HTMLElement;
-        slotStyle: HTMLStyleElement;
-    };
-}

package/dist/components/slot.component.js

@@ -1,31 +0,0 @@
-"use strict";
-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',
-        };
-        const slotTemplate = SlotComponent.getTemplate(SlotComponent.template, wrapOptions);
-        const slotStyle = SlotComponent.getStyle(SlotComponent.css);
-        SlotComponent.slot = slotTemplate.querySelector('slot');
-        SlotComponent.slot.name = slotName;
-        return { slotTemplate, slotStyle };
-    }
-}
-exports.default = SlotComponent;

package/dist/config.d.ts

@@ -1,23 +0,0 @@
-import { ICanvasSize } from "./types/canvas";
-export interface ILayer {
-    name: string;
-    index: number;
-}
-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[]);
-}