canvas-editor-engine 1.0.1

package/dist/filters/collection/vague.js

@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const filter_1 = require("../../utils/filter");
+const convert_1 = require("../../utils/convert");
+const lodash_1 = require("lodash");
+class VagueFilter extends filter_1.Filter {
+    constructor(ctx, options) {
+        super(ctx);
+        this.filterList = ['pixel'];
+        this.options = options;
+    }
+    on(action, filterOptions) {
+        const imageData = this.copy(this.options);
+        const rowImageData = this[action](imageData, filterOptions);
+        this.update(rowImageData, this.options);
+    }
+    pixel(imageData, filterOptions) {
+        const imageSize = {
+            w: imageData.width,
+            h: imageData.height,
+        };
+        this.setImageSize(imageSize);
+        const { quality } = filterOptions;
+        console.log('quality', quality);
+        const { rowRGBABuff, buff } = this.getBuffCollection(imageData);
+        const { qualityBuff, rangeCommit } = this.getQualityBuff(buff, +quality);
+        const qualityBuffWithMostCommonElement = this.getMostCommonQuanlityBuff(qualityBuff, rangeCommit);
+        const rowQualityBuffWithMostCommonElement = qualityBuffWithMostCommonElement.flat();
+        if (rowRGBABuff.length >= rowQualityBuffWithMostCommonElement.length) {
+            const occurrenceRGBAbuff = rowQualityBuffWithMostCommonElement.map((hexColor, index) => {
+                const { r, g, b } = convert_1.Convert.hexToRgb(hexColor);
+                const a = rowRGBABuff[index][3];
+                return [r, g, b, a];
+            });
+            const rowBuff = occurrenceRGBAbuff.flat();
+            rowBuff.forEach((color, index) => {
+                imageData.data[index] = color;
+            });
+            console.log('imageData', imageData);
+        }
+        return imageData;
+    }
+    getQualityBuff(buff, quality) {
+        const wq = Math.floor(this.imageSize.w / quality);
+        const hq = Math.floor(this.imageSize.h / quality);
+        const qualityBuff = [];
+        const rangeCommit = [];
+        let i = 0;
+        let xStart = 0;
+        let xEnd = quality;
+        let yStart = 0;
+        let yEnd = quality;
+        (0, lodash_1.range)(0, hq).forEach((hqi) => {
+            (0, lodash_1.range)(0, wq).forEach((wqi) => {
+                var _a, _b;
+                const dy = (0, lodash_1.range)(yStart, yEnd);
+                const dx = (0, lodash_1.range)(xStart, xEnd);
+                const items = [];
+                const coords = [];
+                dy.forEach((y) => {
+                    dx.forEach((x) => {
+                        items.push(buff[y][x]);
+                        coords.push({ y, x });
+                    });
+                });
+                xStart += quality;
+                xEnd += quality;
+                (_a = rangeCommit[i]) !== null && _a !== void 0 ? _a : (rangeCommit[i] = coords);
+                (_b = qualityBuff[i]) !== null && _b !== void 0 ? _b : (qualityBuff[i] = items);
+                i++;
+            });
+            xStart = 0;
+            xEnd = quality;
+            yStart += quality;
+            yEnd += quality;
+        });
+        return { qualityBuff, rangeCommit };
+    }
+    getMostCommonQuanlityBuff(qualityBuff, rangeCommit) {
+        const mostCommonQuanlityBuff = [];
+        const qualityBuffWithMostCommonElement = qualityBuff.map((newPixel) => {
+            const color = this.getMostCommonElement(newPixel);
+            return newPixel.map(() => color);
+        });
+        qualityBuffWithMostCommonElement.forEach((qPixel, pixelIndex) => {
+            qPixel.forEach((pixelColor, pixelColorIndex) => {
+                var _a, _b;
+                var _c;
+                const { x, y } = rangeCommit[pixelIndex][pixelColorIndex];
+                (_a = mostCommonQuanlityBuff[y]) !== null && _a !== void 0 ? _a : (mostCommonQuanlityBuff[y] = []);
+                (_b = (_c = mostCommonQuanlityBuff[y])[x]) !== null && _b !== void 0 ? _b : (_c[x] = pixelColor);
+            });
+        });
+        return mostCommonQuanlityBuff;
+    }
+    getMostCommonElement(array) {
+        function mostCommon(a, b) {
+            const diffA = array.filter((v) => v === a).length;
+            const diffB = array.filter((v) => v === b).length;
+            return diffA - diffB;
+        }
+        const arraySorted = array.sort(mostCommon);
+        const mostCommonElement = arraySorted[arraySorted.length - 1];
+        return mostCommonElement;
+    }
+}
+exports.default = VagueFilter;

package/dist/filters/index.d.ts

@@ -0,0 +1,2 @@
+import VagueFilter from './collection/vague';
+export { VagueFilter, };

package/dist/filters/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VagueFilter = void 0;
+const vague_1 = require("./collection/vague");
+exports.VagueFilter = vague_1.default;

package/dist/index.d.ts

@@ -0,0 +1,25 @@
+import AppConfig from "./config";
+import WebComponent from "./web-component";
+import CanvasComponent from "./components/canvas.component";
+import PipetteComponent from "./components/pipette.component";
+import ExcretionComponent from "./components/excretions.component";
+import SlotComponent from "./components/slot.component";
+import DrawService from "./services/draw.service";
+import ToolService from "./services/tool.service";
+declare class CanvasEditorEngine {
+    constructor(webComponentTagName?: string);
+    getInitial(): {
+        tag: string;
+        component: typeof WebComponent;
+    };
+}
+declare class StaticCanvasEditorEngine extends CanvasEditorEngine {
+    constructor(webComponentTagName?: string);
+    init(): void;
+}
+declare class VueCanvasEditorEngine extends CanvasEditorEngine {
+    constructor(webComponentTagName?: string);
+    getContext2D(): CanvasRenderingContext2D;
+    getCanvas(): HTMLCanvasElement;
+}
+export { AppConfig, PipetteComponent, CanvasComponent, ExcretionComponent, SlotComponent, ToolService, DrawService, StaticCanvasEditorEngine, VueCanvasEditorEngine, };

package/dist/index.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VueCanvasEditorEngine = exports.StaticCanvasEditorEngine = exports.DrawService = exports.ToolService = exports.SlotComponent = exports.ExcretionComponent = exports.CanvasComponent = exports.PipetteComponent = exports.AppConfig = void 0;
+const config_1 = require("./config");
+exports.AppConfig = config_1.default;
+const web_component_1 = require("./web-component");
+const canvas_component_1 = require("./components/canvas.component");
+exports.CanvasComponent = canvas_component_1.default;
+const pipette_component_1 = require("./components/pipette.component");
+exports.PipetteComponent = pipette_component_1.default;
+const excretions_component_1 = require("./components/excretions.component");
+exports.ExcretionComponent = excretions_component_1.default;
+const slot_component_1 = require("./components/slot.component");
+exports.SlotComponent = slot_component_1.default;
+const draw_service_1 = require("./services/draw.service");
+exports.DrawService = draw_service_1.default;
+const tool_service_1 = require("./services/tool.service");
+exports.ToolService = tool_service_1.default;
+class CanvasEditorEngine {
+    constructor(webComponentTagName) {
+        config_1.default.WEB_COMPONENT_TAG_NAME = webComponentTagName;
+    }
+    getInitial() {
+        return { tag: config_1.default.WEB_COMPONENT_TAG_NAME, component: web_component_1.default };
+    }
+}
+class StaticCanvasEditorEngine extends CanvasEditorEngine {
+    constructor(webComponentTagName) {
+        super(webComponentTagName);
+    }
+    init() {
+        const customElementRegistry = window.customElements;
+        const { tag, component } = this.getInitial();
+        customElementRegistry.define(tag, component);
+    }
+}
+exports.StaticCanvasEditorEngine = StaticCanvasEditorEngine;
+class VueCanvasEditorEngine extends CanvasEditorEngine {
+    constructor(webComponentTagName) {
+        super(webComponentTagName);
+    }
+    getContext2D() {
+        return canvas_component_1.default.ctx;
+    }
+    getCanvas() {
+        return canvas_component_1.default.canvas;
+    }
+}
+exports.VueCanvasEditorEngine = VueCanvasEditorEngine;

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

@@ -0,0 +1,5 @@
+import { IWrapOptions } from "../types/general";
+export default class ComponentService {
+    protected static getTemplate(template: string, wrapOptions?: IWrapOptions): HTMLElement | null;
+    protected static getStyle(css: string): HTMLStyleElement | null;
+}

package/dist/services/component.service.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+class ComponentService {
+    static getTemplate(template, wrapOptions) {
+        const options = {
+            tag: 'div',
+        };
+        if (!!wrapOptions) {
+            Object.keys(wrapOptions).forEach((key) => {
+                if (!!wrapOptions[key]) {
+                    options[key] = wrapOptions[key];
+                }
+            });
+        }
+        const wrap = document.createElement(options.tag);
+        if (!!options) {
+            Object.keys(options).forEach((key) => {
+                if (!!options[key] && key !== 'tag') {
+                    wrap[key] = options[key];
+                }
+            });
+        }
+        if (!!template) {
+            wrap.innerHTML = template;
+        }
+        return wrap;
+    }
+    static getStyle(css) {
+        if (!!css === false)
+            return null;
+        const style = document.createElement('style');
+        style.type = 'text/css';
+        style.appendChild(document.createTextNode(css));
+        return style;
+    }
+}
+exports.default = ComponentService;

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

@@ -0,0 +1,13 @@
+import type { IDrawImageArgs, IFilterOptions, IImageOptions } from "../types/image";
+export default class DrawService {
+    static drawImage(ctx: CanvasRenderingContext2D, src: string, options: IDrawImageArgs): void;
+    static drawSmoothImage(ctx: CanvasRenderingContext2D, src: string, options: IDrawImageArgs, filterOptions: IFilterOptions): void;
+}
+export declare class SCImage {
+    private img;
+    private ctx;
+    constructor(src: string, ctx: CanvasRenderingContext2D);
+    get(): HTMLImageElement;
+    draw(options: IDrawImageArgs): Promise<unknown>;
+    vague(options: IImageOptions, filterOptions: IFilterOptions): void;
+}

package/dist/services/draw.service.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SCImage = void 0;
+const config_1 = require("../config");
+const filters_1 = require("../filters");
+class DrawService {
+    static drawImage(ctx, src, options) {
+        const img = new SCImage(src, ctx);
+        img.draw(options);
+    }
+    static drawSmoothImage(ctx, src, options, filterOptions) {
+        var _a, _b;
+        const img = new SCImage(src, ctx);
+        const filterArgs = {
+            x: options.position.x,
+            y: options.position.y,
+        };
+        if (options.size !== 'initial') {
+            if (!!((_a = options.size) === null || _a === void 0 ? void 0 : _a.width) && !!((_b = options.size) === null || _b === void 0 ? void 0 : _b.height)) {
+                filterArgs.width = options.size.width;
+                filterArgs.height = options.size.height;
+            }
+        }
+        console.log('filterArgs', filterArgs);
+        img.draw(options).then(() => img.vague(filterArgs, filterOptions));
+    }
+}
+exports.default = DrawService;
+class SCImage {
+    constructor(src, ctx) {
+        this.img = new Image();
+        this.img.src = src;
+        this.ctx = ctx;
+    }
+    ;
+    get() {
+        return this.img;
+    }
+    draw(options) {
+        const proto = this;
+        const protoImg = this.img;
+        return new Promise((resolve, reject) => {
+            try {
+                protoImg.addEventListener("load", () => {
+                    var _a, _b;
+                    let drawImageArgs = [options.position.x, options.position.y];
+                    if (options.size !== 'initial') {
+                        if (!!((_a = options.size) === null || _a === void 0 ? void 0 : _a.width) && !!((_b = options.size) === null || _b === void 0 ? void 0 : _b.height)) {
+                            drawImageArgs = drawImageArgs.concat([options.size.width, options.size.height]);
+                        }
+                        else {
+                            drawImageArgs = drawImageArgs.concat([config_1.default.CANVAS_SIZE.width, config_1.default.CANVAS_SIZE.height]);
+                        }
+                    }
+                    // @ts-ignore
+                    this.ctx.drawImage(protoImg, ...drawImageArgs);
+                    this.ctx.save();
+                    resolve(proto);
+                });
+            }
+            catch (error) {
+                reject(error);
+            }
+        });
+    }
+    vague(options, filterOptions) {
+        const filter = new filters_1.VagueFilter(this.ctx, options);
+        filter.on('pixel', filterOptions);
+    }
+}
+exports.SCImage = SCImage;

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

@@ -0,0 +1,10 @@
+import { ITool } from "../types/general";
+export default class ToolService {
+    static before: ITool | null;
+    static active: ITool | null;
+    static registry: ITool[];
+    static add(tool: ITool): boolean;
+    static setActive(id: ITool['id']): void;
+    static offActive(id?: ITool['id']): void;
+    private static off;
+}

package/dist/services/tool.service.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const canvas_component_1 = require("../components/canvas.component");
+class ToolService {
+    static add(tool) {
+        const hasRegisteredTool = ToolService.registry.find((registeredTool) => registeredTool.id === tool.id);
+        if (hasRegisteredTool) {
+            console.warn('Tool has been previously registered!');
+            return false;
+        }
+        ToolService.registry.push(tool);
+        return true;
+    }
+    static setActive(id) {
+        var _a, _b, _c;
+        if (((_a = ToolService.active) === null || _a === void 0 ? void 0 : _a.id) === id)
+            return console.warn('Tool is already active');
+        if (!!((_b = ToolService.active) === null || _b === void 0 ? void 0 : _b.offAction)) {
+            ToolService.active.offAction();
+        }
+        const registeredTool = ToolService.registry.find((registeredTool) => registeredTool.id === id);
+        if (!!registeredTool) {
+            ToolService.active = registeredTool;
+            if (!!((_c = ToolService.active) === null || _c === void 0 ? void 0 : _c.onAction)) {
+                ToolService.active.onAction();
+            }
+        }
+        else {
+            console.warn('Tool has not previously been registered with this identifier');
+        }
+    }
+    static offActive(id) {
+        if (!!id) {
+            if (ToolService.active.id === id) {
+                ToolService.off();
+            }
+            else {
+                return console.warn(`ID active tool is not "${id}"`);
+            }
+        }
+        else {
+            ToolService.off();
+        }
+    }
+    static off() {
+        var _a;
+        if (!!((_a = ToolService.active) === null || _a === void 0 ? void 0 : _a.offAction)) {
+            ToolService.active.offAction();
+        }
+        ToolService.before = ToolService.active;
+        ToolService.active = null;
+        canvas_component_1.default.cursorStyle = 'default';
+    }
+}
+ToolService.before = null;
+ToolService.active = null;
+ToolService.registry = [];
+exports.default = ToolService;

package/dist/types/canvas.d.ts

@@ -0,0 +1,10 @@
+import { ICursorPosition } from "./cursor";
+export interface ICanvasSize {
+    width: number;
+    height: number;
+}
+export type TSubscriptionTypes = 'click' | 'mousemove' | 'mousedown' | 'mouseup';
+export type TSubscribeAction = (event: MouseEvent, cursorPosition?: ICursorPosition) => void;
+export type TSubscriptions = {
+    [key in TSubscriptionTypes]: TSubscribeAction[];
+};

package/dist/types/canvas.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+;

package/dist/types/cursor.d.ts

@@ -0,0 +1,9 @@
+export interface ICursorPosition {
+    x: number;
+    y: number;
+}
+export interface ICursorStyle {
+    before: TCursorStyleName | null;
+    current: TCursorStyleName | null;
+}
+export type TCursorStyleName = 'default' | 'context-menu' | 'help' | 'pointer' | 'progress' | 'wait' | 'cell' | 'crosshair' | 'text' | 'vertical-text' | 'copy' | 'alias' | 'move' | 'not-allowed' | 'grab' | 'grabbing' | 'zoom-in' | 'zoom-out';

package/dist/types/cursor.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+;

package/dist/types/excreation.d.ts

@@ -0,0 +1,24 @@
+export interface IExcretionsCoords {
+    start?: {
+        x: number;
+        y: number;
+    };
+    end?: {
+        x: number;
+        y: number;
+    };
+}
+export interface IExcretionTempStart {
+    start: {
+        x: number;
+        y: number;
+    };
+}
+export interface IExcretionTempEnd {
+    end: {
+        x: number;
+        y: number;
+    };
+}
+export type TExcretionTempCoords = (IExcretionTempStart | IExcretionTempEnd)[];
+export type TExcretionState = 'create' | 'add' | 'remove' | 'end' | 'abandoned';

package/dist/types/excreation.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+;
+;
+;

package/dist/types/excretion.d.ts

@@ -0,0 +1,26 @@
+export interface IExcretionsCoords {
+    start?: {
+        x: number;
+        y: number;
+    };
+    end?: {
+        x: number;
+        y: number;
+    };
+}
+export interface IExcretionTempStart {
+    start: {
+        x: number;
+        y: number;
+    };
+}
+export interface IExcretionTempEnd {
+    end: {
+        x: number;
+        y: number;
+    };
+}
+export type TExcretionTempCoords = (IExcretionTempStart | IExcretionTempEnd)[];
+export type TExcretionToolState = 'taken' | 'abandoned';
+export type TExcretionState = 'create' | 'add' | 'remove' | 'abandoned';
+export type TExcretionActivity = 'active' | 'end' | 'abandoned';

package/dist/types/excretion.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+;
+;
+;

package/dist/types/general.d.ts

@@ -0,0 +1,14 @@
+export type THEXColor = `#${string}`;
+export type TComponent = HTMLElement | HTMLDivElement | HTMLCanvasElement;
+export interface IWrapOptions {
+    tag?: string;
+    className?: string;
+    id?: string;
+}
+export interface ITool {
+    id: number;
+    name: string;
+    onAction?: (...args: any) => void;
+    offAction?: (...args: any) => void;
+    support?: (...args: any) => void;
+}

package/dist/types/general.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+;
+;

package/dist/types/image.d.ts

@@ -0,0 +1,36 @@
+export interface IImageOptions {
+    x: number;
+    y: number;
+    width?: number;
+    height?: number;
+}
+export interface IDrawImageArgs {
+    position: IArgumentImagePosition;
+    size?: TArgumentImageSize;
+}
+export interface IArgumentImagePosition {
+    x: number;
+    y: number;
+}
+export type TArgumentImageSize = IOptionImageSize | 'initial';
+export interface IOptionImageSize {
+    width?: number;
+    height?: number;
+}
+export interface IImageSize {
+    w: number;
+    h: number;
+}
+export interface IPixelPosition {
+    x: number;
+    y: number;
+}
+export type TRGBABuff = TByteRGBColor[];
+export type TByteRGBColor = [number, number, number, number];
+export type TBuff = string[][];
+export type TQualityBuff = string[][];
+export type TRangeCommit = IPixelPosition[][];
+export type TFilterMethod = 'pixel';
+export interface IFilterOptions {
+    quality: number;
+}

package/dist/types/image.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+;
+;
+;
+;
+;

package/dist/types/pipette.d.ts

@@ -0,0 +1 @@
+export type TPipetteState = 'taken' | 'abandoned' | 'selected-color';

package/dist/types/pipette.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/utils/convert.d.ts

@@ -0,0 +1,12 @@
+import type { TByteRGBColor } from "../types/image";
+import type { THEXColor } from "../types/general";
+export declare class Convert {
+    static byteRGBToHEX(color: TByteRGBColor): THEXColor;
+    static rgbToHex(r: number, g: number, b: number): THEXColor;
+    static hexToRgb(hex: string): {
+        r: number;
+        g: number;
+        b: number;
+    };
+    private static componentToHEX;
+}

package/dist/utils/convert.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Convert = void 0;
+class Convert {
+    static byteRGBToHEX(color) {
+        const red = color[0];
+        const green = color[1];
+        const blue = color[2];
+        return Convert.rgbToHex(red, green, blue);
+    }
+    static rgbToHex(r, g, b) {
+        return `#${Convert.componentToHEX(r)}${Convert.componentToHEX(g)}${Convert.componentToHEX(b)}`;
+    }
+    static hexToRgb(hex) {
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        return result ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16)
+        } : null;
+    }
+    static componentToHEX(colorComponent) {
+        const hex = colorComponent.toString(16);
+        return hex.length == 1 ? "0" + hex : hex;
+    }
+}
+exports.Convert = Convert;

package/dist/utils/filter.d.ts

@@ -0,0 +1,16 @@
+import type { IImageOptions, IImageSize, TBuff, TRGBABuff } from "../types/image";
+export declare class Filter {
+    ctx: CanvasRenderingContext2D;
+    imageSize: IImageSize;
+    constructor(ctx: CanvasRenderingContext2D);
+    setImageSize(size: IImageSize): void;
+    copy(options: IImageOptions): ImageData;
+    update(imgData: ImageData, options: IImageOptions): void;
+    getBuffCollection(imageData: ImageData): {
+        rowRGBABuff: TRGBABuff;
+        hexBuff: `#${string}`[];
+        buff: TBuff;
+    };
+    private getBuff;
+    private getRowRGBABuff;
+}