canvas-editor-engine 1.1.5 → 1.1.7

package/dist/types/image.d.ts

@@ -18,7 +18,7 @@ export interface IImageSize extends ISize {
 }
 export type TRGBABuff = TByteRGBColor[];
 export type TByteRGBColor = [number, number, number, number];
-export type TBuff = TStringMatrix;
+export type TBuff<T> = T[][];
 export type TQualityBuff = TStringMatrix;
 export type TRangeCommit = IPixelPosition[][];
 export type TFilterMethod = 'pixel';

package/dist/utils/filter.d.ts

@@ -1,5 +1,4 @@
-import type { IImageOptions, IImageSize, TRGBABuff } from "../types/image";
-import type { TStringMatrix } from '../types/general';
+import type { IImageOptions, IImageSize, TBuff, TRGBABuff } from "../types/image";
 export declare class Filter {
     ctx: CanvasRenderingContext2D;
     imageSize: IImageSize;
@@ -11,8 +10,9 @@ export declare class Filter {
     getBuffCollection(imageData: ImageData): {
         rowRGBABuff: TRGBABuff;
         hexBuff: `#${string}`[];
-        buff: TStringMatrix;
+        buff: TBuff<string>;
     };
     private getBuff;
+    private getRGBAMatrix;
     private getRowRGBABuff;
 }

package/dist/utils/filter.js

@@ -17,7 +17,7 @@ class Filter {
         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);
-        this.clearEmptyPixels(imgData);
+        const clearedImageData = this.clearEmptyPixels(imgData);
         return imgData;
     }
     update(imgData, options) {
@@ -26,11 +26,44 @@ class Filter {
     }
     clearEmptyPixels(imageData) {
         const rowRGBABuff = this.getRowRGBABuff(imageData);
-        const cleared = rowRGBABuff.filter((byteArray) => {
-            const a = byteArray[3];
-            return !!a;
-        });
-        console.log('cleared', cleared);
+        const RGBAMatrix = this.getRGBAMatrix(rowRGBABuff, { width: imageData.width, height: imageData.height });
+        const tempSize = {
+            width: imageData.width,
+            height: imageData.height,
+        };
+        ;
+        // case 1: Xcanvas -> Ximage
+        let leftIndex;
+        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;
+                    break;
+                }
+            }
+            if (leftIndex !== undefined) {
+                break;
+            }
+        }
+        console.log('case 1: Xcanvas -> Ximage; leftIndex:', leftIndex);
+        // case 2: Ximage <- Xcanvas
+        let rightIndex;
+        // case 3: Ycanvas -> Yimage
+        let upIndex;
+        // case 4: Yimage <- Ycanvas
+        let 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;
     }
     getBuffCollection(imageData) {
         const rowRGBABuff = this.getRowRGBABuff(imageData);
@@ -51,6 +84,23 @@ class Filter {
         });
         return buff;
     }
+    getRGBAMatrix(RGBABuff, 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;
+        RGBABuff.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;

package/package.json

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