Merge pull request #59 from pkolt/58-refactoring-code

58-refactoring-code

src/components/BitmapEditor/components/ExportDialog/utils.ts

@@ -1,5 +1,6 @@
 import { Area } from '@/utils/bitmap/Area';
 import { Bitmap } from '@/utils/bitmap/Bitmap';
+import { XBitmapSerializer } from '@/utils/bitmap/XBitmapSerializer';
 import { BitOrder, BitmapEntity } from '@/utils/bitmap/types';
 
 export enum SizeFormat {
@@ -41,7 +42,7 @@ export const exportBitmap = ({
 }: ExportBitmapParams): string => {
   const srcBitmap = Bitmap.fromJSON(bitmapEntity);
   const bitmap = area ? srcBitmap.copy(area) : srcBitmap;
-  const xBitMap = bitmap.toXBitMap(bitOrder);
+  const xBitMap = XBitmapSerializer.serialize(bitmap, bitOrder);
   const width = bitmap.width;
   const height = bitmap.height;
 

src/components/BitmapSizeAlert/index.tsx

@@ -1,4 +1,4 @@
-import { UINT8_BITS_PER_ELEMENT } from '@/utils/bitmap/constants';
+import { UINT8_BITS } from '@/utils/bitmap/constants';
 import Alert from 'react-bootstrap/Alert';
 
 interface BitmapSizeAlertProps {
@@ -11,12 +11,12 @@ export const BitmapSizeAlert = ({ bitmapWidth, className }: BitmapSizeAlertProps
     typeof bitmapWidth !== 'number' ||
     Number.isNaN(bitmapWidth) ||
     bitmapWidth <= 0 ||
-    bitmapWidth % UINT8_BITS_PER_ELEMENT === 0
+    bitmapWidth % UINT8_BITS === 0
   ) {
     return null;
   }
-  const leftValue = Math.floor(bitmapWidth / 8) * UINT8_BITS_PER_ELEMENT;
-  const rightValue = Math.ceil(bitmapWidth / 8) * UINT8_BITS_PER_ELEMENT;
+  const leftValue = Math.floor(bitmapWidth / 8) * UINT8_BITS;
+  const rightValue = Math.ceil(bitmapWidth / 8) * UINT8_BITS;
   return (
     <Alert variant="danger" className={className} dismissible>
       <div className="d-flex gap-1">

src/pages/CreateBitmap/index.tsx

@@ -46,7 +46,7 @@ const CreateBitmap = () => {
   const onSubmit = (data: FormValues) => {
     const id = crypto.randomUUID();
     const timestamp = DateTime.now().toMillis();
-    const bitmap = new Bitmap(data.width, data.height);
+    const bitmap = Bitmap.create(data.width, data.height);
 
     const image: BitmapEntity = {
       id,

src/pages/EditBitmap/index.test.tsx

@@ -7,7 +7,7 @@ import { vi } from 'vitest';
 
 vi.mock('@/components/BitmapEditor/components/BitmapView/getCanvas');
 
-const INVERT_BITMAP_DATA = [208432911, 4042272816];
+const INVERT_BITMAP_DATA = [4042667568, 202116879];
 const EMPTY_BITMAP_DATA = [0, 0];
 
 const url = generatePath(PageUrl.EditBitmap, { id: bitmapEntity.id });
@@ -140,10 +140,11 @@ test('resize bitmap', async () => {
   const applyButton = screen.getByText('Apply');
   await userEvent.click(applyButton);
   const bitmap = stores.bitmaps.bitmaps.find((it) => it.id === bitmapEntity.id);
+
   expect(bitmap).toMatchObject({
     width,
     height,
-    data: [4076901120, 2415980544, 251662080, 3472936704, 0, 0, 0, 0, 0, 0],
+    data: [13172943, 983049, 15728880, 15925491, 0, 0, 0, 0, 0, 0],
   });
 });
 

src/pages/ImportFromImage/ImportForm/utils.ts

@@ -11,7 +11,7 @@ export const convertCanvasToBitmap = (
   threshold: number,
   invertColor: boolean,
 ): Bitmap | null => {
-  const bitmap = new Bitmap(canvas.width, canvas.height);
+  const bitmap = Bitmap.create(canvas.width, canvas.height);
   const imageData = canvasCtx.getImageData(0, 0, canvas.width, canvas.height);
   const length = imageData.data.length / 4;
   for (let i = 0; i < length; i++) {

src/pages/ImportFromImage/index.test.tsx

@@ -63,10 +63,8 @@ const imageData: ImageData = {
 const BITMAP_NAME = 'Bitmap from SVG';
 const BITMAP_WIDTH = 16;
 const BITMAP_HEIGHT = 16;
-const BITMAP_NORMAL_DATA = [
-  4232048655, 3355695107, 3087104001, 2013297664, 2143322080, 4292984817, 3756249059, 4157602879,
-];
-const BITMAP_INVERT_DATA = [62918640, 939272188, 1207863294, 2281669631, 2151645215, 1982478, 538718236, 137364416];
+const BITMAP_NORMAL_DATA = [4027579455, 3223044115, 2149482525, 4063262, 134087678, 2415757311, 3354642427, 4232049647];
+const BITMAP_INVERT_DATA = [267387840, 1071923180, 2145484770, 4290904033, 4160879617, 1879209984, 940324868, 62917648];
 
 class FakeImage {
   set onload(callback: () => void) {

src/service-worker.ts

@@ -53,6 +53,7 @@ const clearCache = async () => {
 
 addEventListener('message', (event) => {
   if (event.data && event.data.type === 'SKIP_WAITING') {
+    // Sometimes, it don't update application without timeout.
     clearCache().then(() => setTimeout(() => self.skipWaiting(), 1000));
   }
 });

src/stores/bitmaps.ts

@@ -1,4 +1,4 @@
-import { toArrayOfNumber } from '@/utils/bitmap/convert';
+import { reverseBits, toArrayOfNumber } from '@/utils/bitmap/convert';
 import { toArrayOfBoolLegacy } from '@/utils/bitmap/convert_legacy';
 import { BitmapEntity } from '@/utils/bitmap/types';
 import { DateTime } from 'luxon';
@@ -36,9 +36,9 @@ export const useBitmapsStore = create<BitmapsState>()(
     }),
     {
       name: 'bitmaps',
-      version: 4, // a migration will be triggered if the version in the storage mismatches this one
+      version: 5, // a migration will be triggered if the version in the storage mismatches this one
       migrate: (persistedState, version) => {
-        if (version === 1) {
+        if (version <= 1) {
           // if the stored value is in version 0, we convert data
           // ...
           const persistedStateV1 = persistedState as BitmapsState;
@@ -50,7 +50,8 @@ export const useBitmapsStore = create<BitmapsState>()(
             })),
           };
         }
-        if (version === 2) {
+
+        if (version <= 2) {
           const persistedStateV2 = persistedState as BitmapsState;
           return {
             ...persistedStateV2,
@@ -60,7 +61,8 @@ export const useBitmapsStore = create<BitmapsState>()(
             })),
           };
         }
-        if (version === 3) {
+
+        if (version <= 3) {
           type BitmapEntityV3 = Omit<BitmapEntity, 'favorite'>;
           const persistedStateV3 = persistedState as Omit<BitmapsState, 'bitmaps'> & { bitmaps: BitmapEntityV3[] };
           return {
@@ -71,6 +73,18 @@ export const useBitmapsStore = create<BitmapsState>()(
             })),
           };
         }
+
+        if (version <= 4) {
+          const persistedStateV4 = persistedState as BitmapsState;
+          return {
+            ...persistedStateV4,
+            bitmaps: persistedStateV4.bitmaps.map((it) => ({
+              ...it,
+              data: it.data.map(reverseBits),
+            })),
+          };
+        }
+
         return persistedState as BitmapsState;
       },
     },

src/test-utils/bitmaps/index.tsx

@@ -5,7 +5,7 @@ export const bitmapEntity: BitmapEntity = {
   name: 'Test',
   createdAt: Date.now(),
   updatedAt: Date.now(),
-  data: [4086534384, 252694479],
+  data: [252299727, 4092850416],
   width: 8,
   height: 8,
   favorite: false,

src/utils/bitmap/Area.test.ts

@@ -12,17 +12,17 @@ test('constructor', () => {
   const p1 = new Point(0, 0);
   const p2 = new Point(10, 20);
   const area = new Area(p1, p2);
-  expect(area.minX).toBe(0);
-  expect(area.minY).toBe(0);
-  expect(area.maxX).toBe(10);
-  expect(area.maxY).toBe(20);
+  expect(area.minPoint.x).toBe(0);
+  expect(area.minPoint.y).toBe(0);
+  expect(area.maxPoint.x).toBe(10);
+  expect(area.maxPoint.y).toBe(20);
 });
 
 test('fromRectangle', () => {
-  expect(area.minX).toBe(0);
-  expect(area.minY).toBe(0);
-  expect(area.maxX).toBe(9); //! Why 9?
-  expect(area.maxY).toBe(19); //! Why 9?
+  expect(area.minPoint.x).toBe(0);
+  expect(area.minPoint.y).toBe(0);
+  expect(area.maxPoint.x).toBe(9); //! Why 9?
+  expect(area.maxPoint.y).toBe(19); //! Why 9?
 });
 
 test('minPoint', () => {

src/utils/bitmap/Area.ts

@@ -1,53 +1,55 @@
 import { Point } from './Point';
 
 export class Area {
-  public minX: number;
-  public maxX: number;
-  public minY: number;
-  public maxY: number;
+  #minX: number;
+  #maxX: number;
+  #minY: number;
+  #maxY: number;
 
   static fromRectangle(x: number, y: number, width: number, height: number) {
     return new Area(new Point(x, y), new Point(x + width - 1, y + height - 1));
   }
 
   constructor(p1: Point, p2: Point) {
-    this.minX = Math.min(p1.x, p2.x);
-    this.maxX = Math.max(p1.x, p2.x);
-    this.minY = Math.min(p1.y, p2.y);
-    this.maxY = Math.max(p1.y, p2.y);
+    this.#minX = Math.min(p1.x, p2.x);
+    this.#maxX = Math.max(p1.x, p2.x);
+    this.#minY = Math.min(p1.y, p2.y);
+    this.#maxY = Math.max(p1.y, p2.y);
   }
 
   get minPoint() {
-    return new Point(this.minX, this.minY);
+    return new Point(this.#minX, this.#minY);
   }
 
   get maxPoint() {
-    return new Point(this.maxX, this.maxY);
+    return new Point(this.#maxX, this.#maxY);
   }
 
   get width() {
-    return this.maxX - this.minX + 1;
+    return this.#maxX - this.#minX + 1;
   }
 
   get height() {
-    return this.maxY - this.minY + 1;
+    return this.#maxY - this.#minY + 1;
   }
 
   isIntersect(point: Point): boolean {
-    return point.x >= this.minX && point.x <= this.maxX && point.y >= this.minY && point.y <= this.maxY;
+    return point.x >= this.#minX && point.x <= this.#maxX && point.y >= this.#minY && point.y <= this.#maxY;
   }
 
   isEqual(area: Area): boolean {
-    return area.minX === this.minX && area.maxX === this.maxX && area.minY === this.minY && area.maxY === this.maxY;
+    return (
+      area.#minX === this.#minX && area.#maxX === this.#maxX && area.#minY === this.#minY && area.#maxY === this.#maxY
+    );
   }
 
   isNotEqual(area: Area): boolean {
     return !this.isEqual(area);
   }
 
   forEach(cb: (offsetPoint: Point) => void) {
-    for (let x = this.minX; x < this.width + this.minX; x++) {
-      for (let y = this.minY; y < this.height + this.minY; y++) {
+    for (let x = this.#minX; x < this.width + this.#minX; x++) {
+      for (let y = this.#minY; y < this.height + this.#minY; y++) {
         cb(new Point(x, y));
       }
     }

src/utils/bitmap/Bitmap.bench.ts

@@ -2,5 +2,5 @@ import { bench } from '@/test-utils';
 import { Bitmap } from './Bitmap';
 
 bench('constructor (big size)', () => {
-  new Bitmap(10000, 10000); // Test run long time (~40 seconds)
+  Bitmap.create(10000, 10000); // Test run long time (~40 seconds)
 });