canvas-editor-engine 1.0.1

package/Readme.md

@@ -0,0 +1,118 @@
+# Lib
+
+Canvas 2D library use: [`typescript`] [`canvas`];
+
+For: [vue3] [native-js];
+
+# Vue3 example
+
+input:
+```jsx
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue';
+import type { Ref } from 'vue';
+
+import { VueCanvasEditorEngine, DrawService, ToolService, AppConfig } from 'sprite-creator'
+import type { IDrawImageArgs } from 'sprite-creator/dist/types/image';
+import ExecutionDelay from 'execution-delay';
+
+const editor: Ref<HTMLElement | null> = ref(null);
+
+AppConfig.CANVAS_SIZE.width = 700;
+AppConfig.CANVAS_SIZE.height = 450;
+const sc = new VueCanvasEditorEngine();
+const initial = sc.getInitial();
+customElements.define(initial.tag, initial.component);
+
+const ctx: Ref<CanvasRenderingContext2D | null> = ref(null);
+
+const quality: Ref<number> = ref(0);
+const src: Ref<string | null> = ref(null);
+
+onMounted(() => {
+  //@ts-ignore
+  editor.value?.addEventListener('get-editor-element', (e: CustomEvent) => {
+    const { editorElement, canvasSelector } = e.detail;
+    const canvas: HTMLCanvasElement = editorElement.querySelector(canvasSelector);
+    ctx.value = canvas.getContext("2d");
+  });
+  editor.value?.dispatchEvent(new Event('initial'));
+});
+
+function setImage(event: Event) {
+  const file: Ref<File | null> = ref(null);
+  const target = event.target as HTMLInputElement;
+
+  if (target && target.files) {
+    file.value = target.files[0];
+  }
+
+  if (!!file.value) {
+    src.value = window.URL.createObjectURL(file.value);
+  }
+}
+
+function inputQuality(event: Event) {
+  const target = event.target as HTMLInputElement;
+  quality.value = +target.value;
+  ExecutionDelay.add('draw', () => draw(quality.value), 500);
+}
+
+function draw(qualityValue: number) {
+  console.log('qualityValue', qualityValue);
+  if (!!ctx.value && !!src.value) {
+    const options: IDrawImageArgs = {
+      position: {
+        x: 0,
+        y: 0,
+      }
+    };
+    DrawService.drawSmoothImage(ctx.value, src.value, options, { quality: qualityValue });
+  }
+}
+
+function takePipette() {
+  console.log('ToolService.registry', ToolService.registry);
+  const pipetteToolId = ToolService.registry.find((tool) => tool.name === "pipette")?.id;
+  if (pipetteToolId !== undefined) {
+    console.log('pipetteToolId');
+    ToolService.setActive(pipetteToolId);
+  }
+}
+</script>
+
+<template>
+  <div class="editor">
+    <canvas-editor-engine class="editor" ref="editor">
+      <div slot="tools">
+        <div>
+          <input
+            id="Image"
+            class="editor__image-input_input"
+            name="image"
+            type="file"
+            accept="image/*"
+            @change="setImage"
+            capture
+          />
+        </div>
+        <div>
+          <input type="range" name="quality" id="Quality" min="0" max="10" @change="inputQuality">
+          <span>Quality: {{ quality }}</span>
+        </div>
+        <button @click="takePipette">pipette</button>
+      </div>
+    </canvas-editor-engine>
+  </div>
+</template>
+```
+
+simple output:
+```jsx
+<canvas-editor-engine>
+  #shadow-root (open)
+    <div>
+      <canvas id="sc-canvas"></canvas>
+    </div>
+</canvas-editor-engine>
+```

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

@@ -0,0 +1,21 @@
+import { TSubscribeAction, TSubscriptionTypes } from "../types/canvas";
+import { ICursorPosition, TCursorStyleName } from "../types/cursor";
+import ComponentService from "../services/component.service";
+export default class CanvasComponent extends ComponentService {
+    private static template;
+    private static css;
+    static eventListener: HTMLDivElement;
+    static canvas: HTMLCanvasElement;
+    static ctx: CanvasRenderingContext2D | null;
+    private static subscriptions;
+    private static _cursorStyle;
+    static getComponent(): {
+        canvasTemplate: HTMLElement;
+        canvasStyle: HTMLStyleElement;
+    };
+    static getCanvasSelector(): string;
+    static set cursorStyle(styleName: TCursorStyleName | undefined | null);
+    static getCursorPosition(event: MouseEvent): ICursorPosition;
+    static subscribe(eventName: TSubscriptionTypes, action: TSubscribeAction): void;
+    static simulateSubscriptions(): void;
+}

package/dist/components/canvas.component.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const config_1 = require("../config");
+const component_service_1 = require("../services/component.service");
+class CanvasComponent extends component_service_1.default {
+    static getComponent() {
+        const canvasTemplate = CanvasComponent.getTemplate(CanvasComponent.template);
+        const canvasStyle = CanvasComponent.getStyle(CanvasComponent.css);
+        CanvasComponent.canvas = canvasTemplate.getElementsByTagName('canvas')[0];
+        CanvasComponent.canvas.width = config_1.default.CANVAS_SIZE.width;
+        CanvasComponent.canvas.height = config_1.default.CANVAS_SIZE.height;
+        CanvasComponent.ctx = CanvasComponent.canvas.getContext("2d", { willReadFrequently: true });
+        CanvasComponent.eventListener = canvasTemplate.querySelector('#event-listener');
+        CanvasComponent.eventListener.style.width = config_1.default.CANVAS_SIZE.width + 'px';
+        CanvasComponent.eventListener.style.height = config_1.default.CANVAS_SIZE.height + 'px';
+        return { canvasTemplate, canvasStyle };
+    }
+    static getCanvasSelector() {
+        return '#sc-canvas';
+    }
+    static set cursorStyle(styleName) {
+        if (!!styleName) {
+            CanvasComponent._cursorStyle.before = CanvasComponent._cursorStyle.current;
+            CanvasComponent._cursorStyle.current = styleName;
+            CanvasComponent.eventListener.style.cursor = styleName;
+        }
+        else {
+            CanvasComponent.eventListener.style.cursor = 'default';
+        }
+    }
+    static getCursorPosition(event) {
+        const rect = CanvasComponent.canvas.getBoundingClientRect();
+        const x = event.clientX - rect.left;
+        const y = event.clientY - rect.top;
+        return { x, y };
+    }
+    static subscribe(eventName, action) {
+        CanvasComponent.subscriptions[eventName].push(action);
+    }
+    static simulateSubscriptions() {
+        const eventNames = Object.keys(CanvasComponent.subscriptions);
+        eventNames.forEach((eventName) => {
+            const actionsList = CanvasComponent.subscriptions[eventName];
+            if (!!actionsList.length) {
+                CanvasComponent.eventListener.addEventListener(eventName, (event) => {
+                    const cursorPosition = CanvasComponent.getCursorPosition(event);
+                    actionsList.forEach((action) => {
+                        action(event, cursorPosition);
+                    });
+                });
+            }
+        });
+    }
+}
+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',
+};
+exports.default = CanvasComponent;

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

@@ -0,0 +1,24 @@
+import ComponentService from "../services/component.service";
+import type { IExcretionsCoords, TExcretionToolState } from "../types/excretion";
+export default class ExcretionsComponent extends ComponentService {
+    private static template;
+    private static css;
+    static excretionWrap: HTMLElement;
+    private static _excretions;
+    private static _excretionState;
+    private static _excretionActivity;
+    private static _excretionToolState;
+    private static _tempCoords;
+    static excretionsCoords: IExcretionsCoords[];
+    private static tool;
+    static getComponent(): {
+        excretionsTemplate: HTMLElement;
+        excretionsStyle: HTMLStyleElement;
+    };
+    private static set excretionState(value);
+    static setToolState(toolState: TExcretionToolState): void;
+    static clearExcretionsCoords(): void;
+    private static getTempCoords;
+    private static endExcretion;
+    private static emmit;
+}

package/dist/components/excretions.component.js

@@ -0,0 +1,192 @@
+"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");
+class ExcretionsComponent extends component_service_1.default {
+    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;
+        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: 'excretion',
+                };
+                const excretionTemplate = ExcretionsComponent.getTemplate('', 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._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();
+            }
+        });
+    }
+}
+ExcretionsComponent.template = ``;
+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;
+    }
+
+    @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.tool = {
+    id: 1,
+    name: 'excretion',
+    onAction: () => ExcretionsComponent.setToolState('taken'),
+    offAction: () => ExcretionsComponent.setToolState('abandoned'),
+    support: () => ExcretionsComponent.clearExcretionsCoords(),
+};
+(() => {
+    tool_service_1.default.add(ExcretionsComponent.tool);
+})();
+exports.default = ExcretionsComponent;

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

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

@@ -0,0 +1,138 @@
+"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");
+class PipetteComponent extends component_service_1.default {
+    static set pipetteColor(color) {
+        PipetteComponent._pipetteColor = color;
+        PipetteComponent._pipetteColorElement.style.borderColor = PipetteComponent._pipetteColor;
+    }
+    static get pipetteColor() {
+        return PipetteComponent._pipetteColor;
+    }
+    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';
+    }
+}
+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);
+})();
+exports.default = PipetteComponent;

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

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const component_service_1 = require("../services/component.service");
+class SlotComponent extends component_service_1.default {
+    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 };
+    }
+}
+SlotComponent.template = `
+    <slot class="slot"></slot>
+  `;
+SlotComponent.css = ``;
+exports.default = SlotComponent;

package/dist/config.d.ts

@@ -0,0 +1,9 @@
+import { ICanvasSize } from "./types/canvas";
+export default class AppConfig {
+    private static _WEB_COMPONENT_TAG_NAME;
+    private static _CANVAS_SIZE;
+    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);
+}

package/dist/config.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+class AppConfig {
+    static get WEB_COMPONENT_TAG_NAME() {
+        return AppConfig._WEB_COMPONENT_TAG_NAME;
+    }
+    static set WEB_COMPONENT_TAG_NAME(value) {
+        if (!!value && typeof value === 'string') {
+            AppConfig._WEB_COMPONENT_TAG_NAME = value;
+        }
+    }
+    static get CANVAS_SIZE() {
+        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)) {
+            AppConfig._CANVAS_SIZE = value;
+        }
+        else {
+            console.warn('CANVAS_SIZE denied');
+        }
+    }
+}
+AppConfig._WEB_COMPONENT_TAG_NAME = 'canvas-editor-engine';
+AppConfig._CANVAS_SIZE = {
+    width: 300,
+    height: 150,
+};
+exports.default = AppConfig;

package/dist/filters/collection/vague.d.ts

@@ -0,0 +1,12 @@
+import type { IFilterOptions, IImageOptions, TFilterMethod } from "../../types/image";
+import { Filter } from "../../utils/filter";
+export default class VagueFilter extends Filter {
+    options: IImageOptions;
+    filterList: TFilterMethod[];
+    constructor(ctx: CanvasRenderingContext2D, options: IImageOptions);
+    on(action: TFilterMethod, filterOptions: IFilterOptions): void;
+    pixel(imageData: ImageData, filterOptions: IFilterOptions): ImageData;
+    private getQualityBuff;
+    private getMostCommonQuanlityBuff;
+    private getMostCommonElement;
+}