canvas-editor-engine 1.0.1

package/dist/utils/filter.js

@@ -0,0 +1,61 @@
+"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 {
+    constructor(ctx) {
+        this.ctx = ctx;
+    }
+    setImageSize(size) {
+        this.imageSize = size;
+    }
+    copy(options) {
+        const width = (options === null || options === void 0 ? void 0 : options.width) ? options.width : config_1.default.CANVAS_SIZE.width;
+        const height = (options === null || options === void 0 ? void 0 : options.height) ? options.height : config_1.default.CANVAS_SIZE.height;
+        const imgData = this.ctx.getImageData(options.x, options.y, width, height);
+        return imgData;
+    }
+    update(imgData, options) {
+        this.ctx.putImageData(imgData, options.x, options.y);
+    }
+    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.h).map((i) => this.imageSize.w * i);
+        const buff = [];
+        let indexOfDistance = 0;
+        hexBuff.forEach((pxColor, pxIndex) => {
+            var _a;
+            if (pxIndex >= distanceRow[indexOfDistance + 1]) {
+                indexOfDistance++;
+            }
+            (_a = buff[indexOfDistance]) !== null && _a !== void 0 ? _a : (buff[indexOfDistance] = []);
+            buff[indexOfDistance].push(pxColor);
+        });
+        return buff;
+    }
+    getRowRGBABuff(imageData) {
+        const rowRGBABuff = []; // [ [0, 0, 0, 0], [0, 0, 0, 0], ... ]
+        let colorIndx = 0;
+        let colorRGBAIndx = 0;
+        imageData.data.forEach((pxColor) => {
+            var _a;
+            if (colorIndx >= 4) {
+                colorIndx = 0;
+                colorRGBAIndx++;
+            }
+            colorIndx++;
+            // @ts-ignore
+            (_a = rowRGBABuff[colorRGBAIndx]) !== null && _a !== void 0 ? _a : (rowRGBABuff[colorRGBAIndx] = []);
+            rowRGBABuff[colorRGBAIndx].push(pxColor);
+        });
+        return rowRGBABuff;
+    }
+}
+exports.Filter = Filter;

package/dist/web-component.d.ts

@@ -0,0 +1,10 @@
+import { TComponent } from "./types/general";
+export declare class WebComponentWrapper {
+    element: HTMLDivElement;
+    constructor();
+    add(component: TComponent, style?: HTMLStyleElement): HTMLDivElement;
+    private _stylish;
+}
+export default class WebComponent extends HTMLElement {
+    constructor();
+}

package/dist/web-component.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WebComponentWrapper = void 0;
+const canvas_component_1 = require("./components/canvas.component");
+const excretions_component_1 = require("./components/excretions.component");
+const pipette_component_1 = require("./components/pipette.component");
+const slot_component_1 = require("./components/slot.component");
+class WebComponentWrapper {
+    constructor() {
+        const webComponentWrapper = document.createElement('div');
+        webComponentWrapper.className = 'editor-wrap';
+        webComponentWrapper.style.position = 'relative';
+        webComponentWrapper.style.display = 'flex';
+        this.element = webComponentWrapper;
+        this._stylish();
+    }
+    add(component, style) {
+        const componentElement = this.element.appendChild(component);
+        if (!!style) {
+            this.element.appendChild(style);
+        }
+        return componentElement;
+    }
+    _stylish() {
+        const style = document.createElement('style');
+        style.innerHTML = `
+      * {
+        user-select: none;
+      }
+    `;
+        this.element.appendChild(style);
+    }
+}
+exports.WebComponentWrapper = WebComponentWrapper;
+class WebComponent extends HTMLElement {
+    constructor() {
+        super();
+        const shadowRoot = this.attachShadow({ mode: "open" });
+        const webComponentWrapper = new WebComponentWrapper();
+        const { canvasTemplate, canvasStyle } = canvas_component_1.default.getComponent();
+        const canvasElement = webComponentWrapper.add(canvasTemplate, canvasStyle);
+        const { pipetteTemplate, pipetteStyle } = pipette_component_1.default.getComponent();
+        webComponentWrapper.add(pipetteTemplate, pipetteStyle);
+        const { slotTemplate, slotStyle } = slot_component_1.default.getComponent('tools');
+        webComponentWrapper.add(slotTemplate, slotStyle);
+        const { excretionsTemplate, excretionsStyle } = excretions_component_1.default.getComponent();
+        webComponentWrapper.add(excretionsTemplate, excretionsStyle);
+        shadowRoot.appendChild(webComponentWrapper.element);
+        canvas_component_1.default.simulateSubscriptions();
+        this.addEventListener('initial', () => {
+            this.dispatchEvent(new CustomEvent('get-editor-element', {
+                detail: {
+                    editorElement: canvasElement,
+                    canvasSelector: canvas_component_1.default.getCanvasSelector(),
+                }
+            }));
+        });
+    }
+}
+exports.default = WebComponent;

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "canvas-editor-engine",
+  "version": "1.0.1",
+  "description": "CanvasEditorEngine library, use: [typescript] [canvas]",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "/dist"
+  ],
+  "scripts": {
+    "test": "node test/test.js",
+    "build": "tsc",
+    "realise": "npm version patch && npm publish"
+  },
+  "keywords": [
+    "typescript",
+    "canvas",
+    "library"
+  ],
+  "author": "SavaFeeD",
+  "license": "ISC",
+  "devDependencies": {
+    "@types/lodash": "^4.17.10",
+    "@types/node": "^22.7.4",
+    "typescript": "^5.6.2"
+  },
+  "dependencies": {
+    "lodash": "^4.17.21"
+  }
+}