canvas-editor-engine 1.2.1 → 1.2.2

package/dist/types/excretion.d.ts

@@ -1,27 +0,0 @@
-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';
-export type TExcretionStyle = 'default' | 'crop';

package/dist/types/excretion.js

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

package/dist/types/general.d.ts

@@ -1,24 +0,0 @@
-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;
-}
-export type IGUID4 = `${number}-${number}-${number}-${number}`;
-export interface IPosition {
-    x: number;
-    y: number;
-}
-export interface ISize {
-    width: number;
-    height: number;
-}
-export type TStringMatrix = string[][];

package/dist/types/general.js

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

package/dist/types/history.d.ts

@@ -1,7 +0,0 @@
-import { IImageState } from "../store/image.state";
-export interface IHistoryLine {
-    stateName: string;
-    stateValue: IImageState;
-    view: string;
-}
-export type TReducerNames = 'SET_HISTORY' | 'UPDATE_HISTORY' | 'UNDO' | 'REDO';

package/dist/types/history.js

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

package/dist/types/image.d.ts

@@ -1,48 +0,0 @@
-import { IPosition, ISize, TStringMatrix } from "./general";
-export interface IOptionImageSize {
-    width?: number;
-    height?: number;
-}
-export interface IImageOptions extends IPosition, IOptionImageSize {
-}
-export interface IDrawImageArgs {
-    position: IArgumentImagePosition;
-    size?: TArgumentImageSize;
-}
-export interface IArgumentImagePosition extends IPosition {
-}
-export interface IPixelPosition extends IPosition {
-}
-export type TArgumentImageSize = IOptionImageSize | 'initial';
-export interface IImageSize extends ISize {
-}
-export type TRGBABuff = TByteRGBColor[];
-export type TByteRGBColor = [number, number, number, number];
-export type TBuff<T> = T[][];
-export type TQualityBuff = TStringMatrix;
-export type TRangeCommit = IPixelPosition[][];
-export type TFilterMethod = 'pixel';
-export interface IFilterOptions {
-    quality: number;
-}
-export declare const enum E_RGBA {
-    r = 0,
-    g = 1,
-    b = 2,
-    a = 3
-}
-export interface IExtendedImageDataModel {
-    imageData: ImageData;
-    size: ISize;
-}
-export interface IImageLoggingData {
-    imageData: ImageData;
-    size: ISize;
-    position: IPosition;
-}
-export interface IImageLoggingDataVague extends IImageLoggingData, IFilterOptions {
-}
-export interface IDrawImageProcessor {
-    draw(options?: IDrawImageArgs): Promise<any>;
-    vague(options: IImageOptions, filterOptions: IFilterOptions): Promise<IImageLoggingDataVague>;
-}

package/dist/types/image.js

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

package/dist/types/log.d.ts

@@ -1,13 +0,0 @@
-export interface ILog<A, R, P> {
-    components: ILogItem<A>[];
-    services: ILogItem<R>[];
-    planed: ILogItem<P>[];
-}
-export interface ILogItem<TLogPrototype> {
-    info: ILogItemInfo;
-    prototype: TLogPrototype;
-}
-export interface ILogItemInfo {
-    name: string;
-    description: string;
-}

package/dist/types/log.js

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

package/dist/types/pipette.d.ts

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

package/dist/types/pipette.js

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

package/dist/types/project.d.ts

@@ -1,38 +0,0 @@
-import { IHistoryLine } from "./history";
-import { IImageLoggingData } from "./image";
-export declare class Project {
-    id: string;
-    name: string;
-    description: string;
-    state: {
-        current: IImageLoggingData;
-        history: IHistoryLine[];
-        cache: IHistoryLine[];
-    };
-    createdAt: string;
-    updatedAt: string;
-}
-export interface IUpdateProject {
-    id?: string;
-    name?: string;
-    description?: string;
-    state?: {
-        current: IImageLoggingData;
-        history: IHistoryLine[];
-        cache: IHistoryLine[];
-    };
-    updatedAt?: string;
-}
-export interface IProjectModule {
-    getProjects(): Project[];
-    getProject(projectId: string): Project;
-    saveProjects(projects: Project[]): void;
-    saveProject(project: Project): void;
-    removeProject(projectId: string): void;
-    updateProject(project: Project): void;
-}
-export type TProjectModule = {
-    name: string;
-    instance: IProjectModule;
-};
-export type TProjectModuleName = 'LocalStorage' | 'File';

package/dist/types/project.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Project = void 0;
-class Project {
-    id = null;
-    name = null;
-    description = null;
-    state = null;
-    createdAt = new Date(Date.now()).toString();
-    updatedAt = new Date(Date.now()).toString();
-}
-exports.Project = Project;
-;
-;

package/dist/utils/convert.d.ts

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

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

@@ -1,21 +0,0 @@
-import { IExtendedImageDataModel, type IImageOptions, type IImageSize, type TBuff, type TRGBABuff } from "../types/image";
-import type { ISize, THEXColor } from '../types/general';
-export declare class Filter {
-    ctx: CanvasRenderingContext2D;
-    imageSize: IImageSize;
-    constructor(ctx: CanvasRenderingContext2D);
-    setImageSize(size: IImageSize): void;
-    copy(options: IImageOptions): ImageData;
-    copyExtendedModel(options: IImageOptions): IExtendedImageDataModel;
-    update(imgData: ImageData, options: IImageOptions): void;
-    clearEmptyPixels(imageData: ImageData): IExtendedImageDataModel;
-    getSizeOfSparseMatrix(RGBAMatrix: TBuff<number[]>, tempSize: ISize): ISize;
-    getBuffCollection(imageData: ImageData): {
-        rowRGBABuff: TRGBABuff;
-        hexBuff: `#${string}`[];
-        buff: TBuff<string>;
-    };
-    getBuff(hexBuff: THEXColor[]): TBuff<string>;
-    getRGBAMatrix(rowRGBABuff: TRGBABuff, size?: ISize): TBuff<number[]>;
-    getRowRGBABuff(imageData: ImageData): TRGBABuff;
-}

package/dist/utils/filter.js

@@ -1,150 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Filter = void 0;
-const config_1 = require("../config");
-const convert_1 = require("./convert");
-const lodash_1 = require("lodash");
-class Filter {
-    ctx;
-    imageSize;
-    constructor(ctx) {
-        this.ctx = ctx;
-    }
-    setImageSize(size) {
-        this.imageSize = size;
-    }
-    copy(options) {
-        const width = (options?.width) ? options.width : config_1.default.CANVAS_SIZE.width;
-        const height = (options?.height) ? options.height : config_1.default.CANVAS_SIZE.height;
-        const imgData = this.ctx.getImageData(options.x, options.y, width, height);
-        return imgData;
-    }
-    copyExtendedModel(options) {
-        const width = (options?.width) ? options.width : config_1.default.CANVAS_SIZE.width;
-        const height = (options?.height) ? options.height : config_1.default.CANVAS_SIZE.height;
-        const imgData = this.ctx.getImageData(options.x, options.y, width, height);
-        const extendedImageData = this.clearEmptyPixels(imgData);
-        return extendedImageData;
-    }
-    update(imgData, options) {
-        this.ctx.clearRect(0, 0, config_1.default.CANVAS_SIZE.width, config_1.default.CANVAS_SIZE.height);
-        this.ctx.putImageData(imgData, options.x, options.y);
-    }
-    clearEmptyPixels(imageData) {
-        const rowRGBABuff = this.getRowRGBABuff(imageData);
-        const RGBAMatrix = this.getRGBAMatrix(rowRGBABuff, { width: imageData.width, height: imageData.height });
-        const beforeSize = {
-            width: imageData.width,
-            height: imageData.height,
-        };
-        const tempSize = this.getSizeOfSparseMatrix(RGBAMatrix, beforeSize);
-        const cleared = rowRGBABuff.filter((byteArray) => {
-            const alpha = byteArray[3 /* E_RGBA.a */];
-            return !!alpha;
-        });
-        const clearedBuff = cleared.flat();
-        const tempCanvas = document.createElement('canvas');
-        const tempCtx = tempCanvas.getContext('2d');
-        const tempImageData = tempCtx.createImageData(tempSize.width, tempSize.height);
-        clearedBuff.forEach((_, i) => tempImageData.data[i] = clearedBuff[i]);
-        console.log('cleared', cleared);
-        return {
-            imageData: tempImageData,
-            size: tempSize
-        };
-    }
-    getSizeOfSparseMatrix(RGBAMatrix, tempSize) {
-        // case 1: Xcanvas -> Ximage && Ycanvas -> Yimage
-        let leftIndex;
-        let upIndex;
-        for (const [iy, row] of RGBAMatrix.entries()) {
-            for (const [ix, rowItem] of row.entries()) {
-                const isNotEmpty = rowItem[3 /* E_RGBA.a */] !== 0;
-                if (isNotEmpty) {
-                    leftIndex = ix;
-                    upIndex = iy;
-                    break;
-                }
-            }
-            if (leftIndex !== undefined && upIndex !== undefined) {
-                break;
-            }
-        }
-        // case 2 reverse matrix: Ximage <- Xcanvas && Yimage <- Ycanvas
-        let rightIndex;
-        let downIndex;
-        for (const [iy, row] of RGBAMatrix.reverse().entries()) {
-            for (const [ix, rowItem] of row.reverse().entries()) {
-                const isNotEmpty = rowItem[3 /* E_RGBA.a */] !== 0;
-                if (isNotEmpty) {
-                    rightIndex = ix;
-                    downIndex = iy;
-                    break;
-                }
-            }
-            if (rightIndex !== undefined && downIndex !== undefined) {
-                break;
-            }
-        }
-        const reduceWidth = (tempWidth) => tempWidth - (leftIndex + rightIndex);
-        const reduceHeight = (tempHeight) => tempHeight - (upIndex + downIndex);
-        const resultSize = {
-            width: reduceWidth(tempSize.width),
-            height: reduceHeight(tempSize.height),
-        };
-        return resultSize;
-    }
-    getBuffCollection(imageData) {
-        const rowRGBABuff = this.getRowRGBABuff(imageData);
-        const hexBuff = rowRGBABuff.map(convert_1.Convert.byteRGBToHEX);
-        const buff = this.getBuff(hexBuff);
-        return { rowRGBABuff, hexBuff, buff };
-    }
-    getBuff(hexBuff) {
-        const distanceRow = (0, lodash_1.range)(0, this.imageSize.height).map((i) => this.imageSize.width * i);
-        const buff = [];
-        let indexOfDistance = 0;
-        hexBuff.forEach((pxColor, pxIndex) => {
-            if (pxIndex >= distanceRow[indexOfDistance + 1]) {
-                indexOfDistance++;
-            }
-            buff[indexOfDistance] ??= [];
-            buff[indexOfDistance].push(pxColor);
-        });
-        return buff;
-    }
-    getRGBAMatrix(rowRGBABuff, size) {
-        const maybeSize = {
-            width: size.width || this.imageSize.width,
-            height: size.height || this.imageSize.height,
-        };
-        const distanceRow = (0, lodash_1.range)(0, maybeSize.height).map((i) => maybeSize.width * i);
-        const buff = [];
-        let indexOfDistance = 0;
-        rowRGBABuff.forEach((pxRGBA, pxIndex) => {
-            if (pxIndex >= distanceRow[indexOfDistance + 1]) {
-                indexOfDistance++;
-            }
-            buff[indexOfDistance] ??= [];
-            buff[indexOfDistance].push(pxRGBA);
-        });
-        return buff;
-    }
-    getRowRGBABuff(imageData) {
-        const rowRGBABuff = []; // [ [0, 0, 0, 0], [0, 0, 0, 0], ... ]
-        let colorIndx = 0;
-        let colorRGBAIndx = 0;
-        imageData.data.forEach((pxColor) => {
-            if (colorIndx >= 4) {
-                colorIndx = 0;
-                colorRGBAIndx++;
-            }
-            colorIndx++;
-            // @ts-ignore
-            rowRGBABuff[colorRGBAIndx] ??= [];
-            rowRGBABuff[colorRGBAIndx].push(pxColor);
-        });
-        return rowRGBABuff;
-    }
-}
-exports.Filter = Filter;

package/dist/utils/guid4.d.ts

@@ -1,13 +0,0 @@
-import { IGUID4 } from "../types/general";
-export declare class Guid4 {
-    stack: IGUID4[];
-    guid4: IGUID4;
-    constructor();
-    generate(): `${number}-${number}-${number}-${number}`;
-    get finite(): IGUID4;
-    private generateWithFactor;
-    private getFactor;
-    private get attempt();
-    private get Guid4();
-    private formating;
-}

package/dist/utils/guid4.js

@@ -1,111 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Guid4 = void 0;
-class Guid4 {
-    stack = [];
-    guid4;
-    constructor() {
-        // generateWithFactor not working
-        // this.generateWithFactor(this.attempt);
-    }
-    generate() {
-        return this.Guid4;
-    }
-    get finite() {
-        const guid4 = this.stack[this.stack?.length];
-        if (!!guid4) {
-            return guid4;
-        }
-        else {
-            throw new Error("Guid4 not generate");
-        }
-    }
-    ;
-    generateWithFactor(attempt) {
-        const factor = this.getFactor(this.guid4);
-        attempt.use('withError').run(factor);
-    }
-    getFactor(guid4) {
-        return (attempt) => {
-            guid4 = this.Guid4;
-            if (!this.stack.includes(guid4)) {
-                attempt.current = attempt.max;
-                this.stack.push(guid4);
-            }
-        };
-    }
-    get attempt() {
-        const attemptConfig = {
-            attempt: {
-                current: 1,
-                max: 5,
-            },
-            error: {
-                message: '[Fatal Error] Guid4 module cannot generate unique guid4'
-            }
-        };
-        const attempt = new GenerateAttempt(attemptConfig.attempt, attemptConfig.error);
-        return attempt;
-    }
-    get Guid4() {
-        const base = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx';
-        const regex = /[xy]/g;
-        const guid4 = base.replace(regex, this.formating);
-        return guid4;
-    }
-    formating(char) {
-        const preformer = Math.random() * 16 | 0;
-        const formattedChar = (char == 'x') ? preformer : (preformer & 0x3 | 0x8);
-        return formattedChar.toString(16);
-    }
-}
-exports.Guid4 = Guid4;
-;
-class GenerateAttempt {
-    _attempt;
-    _error;
-    constructor(config, error) {
-        this._attempt = config;
-        if (!!error)
-            this._error = error;
-    }
-    use(strategy = 'default') {
-        const context = this;
-        switch (strategy) {
-            case 'default':
-                return {
-                    run(action) {
-                        context.defaultRun(action);
-                    },
-                };
-            case 'withError':
-                return {
-                    run(action) {
-                        context.withErrorRun(action);
-                    },
-                };
-        }
-    }
-    defaultRun(action) {
-        const attemptCondition = this._attempt.current <= this._attempt.max;
-        while (attemptCondition) {
-            action(this._attempt);
-            this._attempt.current++;
-        }
-    }
-    withErrorRun(action) {
-        const attemptCondition = this._attempt.current <= this._attempt.max;
-        const errorCondition = this._attempt.current === this._attempt.max;
-        const errorMessage = this._error.message;
-        while (attemptCondition) {
-            this.throwError(errorCondition, errorMessage);
-            action(this._attempt);
-            this._attempt.current++;
-        }
-    }
-    throwError(condition, message) {
-        if (condition) {
-            throw new Error(message);
-        }
-    }
-}

package/dist/utils/project-file-serializer.d.ts

@@ -1,13 +0,0 @@
-import { Project } from "../types/project";
-export declare class ProjectFileSerializer {
-    private file;
-    private projects;
-    constructor(file: any);
-    private load;
-    saveProjects(projects: Project[]): void;
-    getProjects(): Project[];
-    getProject(projectId: string): Project;
-    saveProject(project: Project): void;
-    removeProject(projectId: string): void;
-    updateProject(project: Project): void;
-}

package/dist/utils/project-file-serializer.js

@@ -1,79 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProjectFileSerializer = void 0;
-class ProjectFileSerializer {
-    file;
-    projects = [];
-    constructor(file) {
-        this.file = file;
-        this.projects = this.load();
-    }
-    ;
-    load() {
-        const rowProjects = JSON.parse(this.file);
-        const imageDataProcessor = (temp) => {
-            let data;
-            let size;
-            if (temp?.current) {
-                data = Object.values(temp?.current.imageData.data);
-                size = temp?.current.size;
-            }
-            else if (temp?.state) {
-                data = Object.values(temp?.state.tempImageData.data);
-                size = temp?.state.size;
-            }
-            const tempImageData = new ImageData(size.width, size.height);
-            data.forEach((colorAtom, index) => {
-                tempImageData.data[index] = colorAtom;
-            });
-            return tempImageData;
-        };
-        const projects = rowProjects.map((project) => {
-            project.state.current.imageData = imageDataProcessor({ current: project.state.current });
-            project.state.history = project.state.history.map((historyLine) => {
-                historyLine.stateValue.tempImageData = imageDataProcessor({ state: historyLine.stateValue });
-                return historyLine;
-            });
-            project.state.cache = project.state.cache.map((historyLine) => {
-                historyLine.stateValue.tempImageData = imageDataProcessor({ state: historyLine.stateValue });
-                return historyLine;
-            });
-            return project;
-        });
-        return projects;
-    }
-    saveProjects(projects) {
-        this.file.save(JSON.stringify(projects));
-    }
-    getProjects() {
-        return this.projects;
-    }
-    getProject(projectId) {
-        return this.projects.find((project) => project.id === projectId);
-    }
-    saveProject(project) {
-        const index = this.projects.findIndex((p) => p.id === project.id);
-        if (index !== -1) {
-            this.projects[index] = project;
-        }
-        else {
-            this.projects.push(project);
-        }
-        this.saveProjects(this.projects);
-    }
-    removeProject(projectId) {
-        const index = this.projects.findIndex((p) => p.id === projectId);
-        if (index !== -1) {
-            this.projects.splice(index, 1);
-            this.saveProjects(this.projects);
-        }
-    }
-    updateProject(project) {
-        const index = this.projects.findIndex((p) => p.id === project.id);
-        if (index !== -1) {
-            this.projects[index] = project;
-            this.saveProjects(this.projects);
-        }
-    }
-}
-exports.ProjectFileSerializer = ProjectFileSerializer;

package/dist/web-component.d.ts

@@ -1,26 +0,0 @@
-import { TComponent } from "./types/general";
-export declare class WebComponentWrapper {
-    baseElement: HTMLDivElement;
-    editorWrapElement: HTMLDivElement;
-    stylesWrapElement: HTMLDivElement;
-    toolsWrapElement: HTMLDivElement;
-    constructor();
-    get base(): {
-        add: (component: TComponent, style?: HTMLStyleElement) => HTMLDivElement;
-    };
-    get editorWrap(): {
-        add: (component: TComponent, style?: HTMLStyleElement) => HTMLDivElement;
-    };
-    get stylesWrap(): {
-        add: (component: TComponent, style?: HTMLStyleElement) => HTMLDivElement;
-    };
-    get toolsWrap(): {
-        add: (component: TComponent, style?: HTMLStyleElement) => HTMLDivElement;
-    };
-    private _methods;
-    private _add;
-    private _baseStyle;
-}
-export default class WebComponent extends HTMLElement {
-    constructor();
-}