canvas-editor-engine 1.1.9 → 1.1.11

package/dist/types/image.d.ts

@@ -25,3 +25,9 @@ export type TFilterMethod = 'pixel';
 export interface IFilterOptions {
     quality: number;
 }
+export declare const enum E_RGBA {
+    r = 0,
+    g = 1,
+    b = 2,
+    a = 3
+}

package/dist/types/image.js

@@ -6,3 +6,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 ;
 ;
 ;
+;

package/dist/utils/filter.d.ts

@@ -1,4 +1,5 @@
-import type { IImageOptions, IImageSize, TBuff, TRGBABuff } from "../types/image";
+import { type IImageOptions, type IImageSize, type TBuff, type TRGBABuff } from "../types/image";
+import type { ISize } from '../types/general';
 export declare class Filter {
     ctx: CanvasRenderingContext2D;
     imageSize: IImageSize;
@@ -6,7 +7,8 @@ export declare class Filter {
     setImageSize(size: IImageSize): void;
     copy(options: IImageOptions): ImageData;
     update(imgData: ImageData, options: IImageOptions): void;
-    clearEmptyPixels(imageData: ImageData): void;
+    clearEmptyPixels(imageData: ImageData): ImageData;
+    getSizeOfSparseMatrix(RGBAMatrix: TBuff<number[]>, tempSize: ISize): ISize;
     getBuffCollection(imageData: ImageData): {
         rowRGBABuff: TRGBABuff;
         hexBuff: `#${string}`[];

package/dist/utils/filter.js

@@ -18,7 +18,7 @@ class Filter {
         const height = (options?.height) ? options.height : config_1.default.CANVAS_SIZE.height;
         const imgData = this.ctx.getImageData(options.x, options.y, width, height);
         const clearedImageData = this.clearEmptyPixels(imgData);
-        return imgData;
+        return clearedImageData;
     }
     update(imgData, options) {
         this.ctx.clearRect(0, 0, config_1.default.CANVAS_SIZE.width, config_1.default.CANVAS_SIZE.height);
@@ -27,11 +27,24 @@ class Filter {
     clearEmptyPixels(imageData) {
         const rowRGBABuff = this.getRowRGBABuff(imageData);
         const RGBAMatrix = this.getRGBAMatrix(rowRGBABuff, { width: imageData.width, height: imageData.height });
-        const tempSize = {
+        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 tempImageData;
+    }
+    getSizeOfSparseMatrix(RGBAMatrix, tempSize) {
         // case 1: Xcanvas -> Ximage && case 3: Ycanvas -> Yimage
         let leftIndex;
         let upIndex;
@@ -68,17 +81,13 @@ class Filter {
         }
         console.log('case 2: Ximage <- Xcanvas; rightIndex:', rightIndex);
         console.log('case 4: Yimage <- Ycanvas; downIndex:', downIndex);
-        // const cleared = rowRGBABuff.filter((byteArray) => {
-        //   const alpha = byteArray[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 tempImageData;
+        const reduceWidth = (tempWidth) => tempWidth - (leftIndex + rightIndex);
+        const reduceHeight = (tempHeight) => tempHeight - (upIndex + downIndex);
+        const result = {
+            width: reduceWidth(tempSize.width),
+            height: reduceHeight(tempSize.height),
+        };
+        return result;
     }
     getBuffCollection(imageData) {
         const rowRGBABuff = this.getRowRGBABuff(imageData);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvas-editor-engine",
-  "version": "1.1.9",
+  "version": "1.1.11",
   "description": "CanvasEditorEngine library, use: [typescript] [canvas]",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",