test: on progress

Author: chanwoong528

README.md

@@ -7,8 +7,8 @@ chore
 ci
 docs
 feat
-fix
 perf
+fix
 refactor
 revert
 style

apps/react-demo/src/App.tsx

@@ -6,12 +6,12 @@ import './App.css';
 
 function App() {
   const [count, setCount] = useState(0);
-  const canvasContainerRef = useRef<HTMLDivElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
 
   useEffect(() => {
-    if (canvasContainerRef.current) {
-      const imageEditor = new ImageEditor(canvasContainerRef.current);
-      imageEditor.init();
+    if (canvasRef.current) {
+      const imageEditor = new ImageEditor(canvasRef.current);
+
       return () => {
         imageEditor.destroy();
       };
@@ -33,14 +33,19 @@ function App() {
         <button onClick={() => setCount((count) => count + 1)}>
           count is {count}
         </button>
+
+        <button onClick={() => {}}>init</button>
+
         <p>
           Edit <code>src/App.tsx</code> and save to test HMR
         </p>
       </div>
       <p className="read-the-docs">
         Click on the Vite and React logos to learn more
       </p>
-      <div className="canvas-container" ref={canvasContainerRef}></div>
+      <div className="canvas-container">
+        <canvas ref={canvasRef}></canvas>
+      </div>
     </>
   );
 }

packages/image-editor/dist/farbric-canvas.d.ts

@@ -0,0 +1,12 @@
+import * as fabric from 'fabric';
+export declare class FabricJSCanvas {
+    private fabricCanvas;
+    private container;
+    private width;
+    private height;
+    constructor(width: number, height: number, container: HTMLElement);
+    initializeFabricCanvas(): void;
+    initEvents(): void;
+    getCanvas(): fabric.Canvas | null;
+    destroy(): void;
+}

packages/image-editor/dist/image-editor.d.ts

@@ -1,9 +1,6 @@
-import { Canvas } from 'fabric';
 export declare class ImageEditor {
-    private readonly container;
     private fabricCanvas;
-    constructor(container: HTMLElement);
+    constructor(canvasElement: HTMLElement);
     init(): void;
-    getCanvas(): Canvas | null;
     destroy(): void;
 }

packages/image-editor/dist/main.js

@@ -0,0 +1,75 @@
+import * as fabric from 'fabric';
+
+export class FabricJSCanvas {
+  private fabricCanvas: fabric.Canvas | null = null;
+  private container: HTMLElement;
+  private width: number;
+  private height: number;
+  constructor(width: number, height: number, container: HTMLElement) {
+    this.container = container;
+    this.width = width;
+    this.height = height;
+  }
+
+  public initializeFabricCanvas() {
+    if (!this.container.contains(document.querySelector('canvas'))) {
+      const canvas = document.createElement('canvas');
+      canvas.id = 'fabric-canvas';
+      this.container.appendChild(canvas);
+      this.fabricCanvas = new fabric.Canvas(canvas);
+      this.fabricCanvas.setDimensions({
+        width: this.width,
+        height: this.height,
+      });
+      const add = () => {
+        const red = new fabric.Rect({
+          top: Math.random() * (this.height - 25),
+          left: Math.random() * (this.width - 40),
+          width: 80,
+          height: 50,
+          fill: 'red',
+        });
+        const blue = new fabric.Rect({
+          top: Math.random() * (this.height - 35),
+          left: Math.random() * (this.width - 25),
+          width: 50,
+          height: 70,
+          fill: 'blue',
+        });
+        const green = new fabric.Rect({
+          top: Math.random() * (this.height - 30),
+          left: Math.random() * (this.width - 30),
+          width: 60,
+          height: 60,
+          fill: 'green',
+        });
+        return [red, blue, green];
+      };
+      this.fabricCanvas.add(...add());
+      this.fabricCanvas.setActiveObject(this.fabricCanvas.getObjects()[0]);
+      this.fabricCanvas.renderAll();
+    }
+
+    // this.initEvents();
+  }
+
+  public initEvents() {
+    this.fabricCanvas?.on('selection:created', (e) => {
+      console.log('selection:created', e);
+    });
+    this.fabricCanvas?.on('selection:updated', (e) => {
+      console.log('selection:updated', e);
+    });
+    this.fabricCanvas?.on('selection:cleared', (e) => {
+      console.log('selection:cleared', e);
+    });
+  }
+
+  public getCanvas() {
+    return this.fabricCanvas;
+  }
+
+  public destroy() {
+    this.fabricCanvas?.destroy();
+  }
+}

packages/image-editor/src/farbric-canvas.ts

@@ -1,52 +1,27 @@
-import type { Canvas } from 'fabric';
-
-import { Canvas as FabricCanvas, FabricText } from 'fabric';
+import * as fabric from 'fabric';
 
 export class ImageEditor {
   //   private static instance: ImageEditor;
-  private readonly container: HTMLElement;
-  //   private canvas: HTMLCanvasElement | null = null;
-  private fabricCanvas: Canvas | null = null;
-
-  constructor(container: HTMLElement) {
-    this.container = container;
-  }
-
-  public init() {
-    console.log('init');
-    console.log(this.fabricCanvas);
-    console.log('@@@@ zzzz');
-    if (!this.fabricCanvas) {
-      this.fabricCanvas = new FabricCanvas();
-      if (!this.container.contains(this.fabricCanvas.getElement())) {
-        console.log('append');
 
-        console.log(this.fabricCanvas);
+  private fabricCanvas: fabric.Canvas | null = null;
 
-        this.fabricCanvas.add(new FabricText('Hello World'));
-        this.fabricCanvas.renderAll();
-
-        this.container.appendChild(this.fabricCanvas.getElement());
-      }
-
-      //   this.fabricCanvas.add(new FabricText('Hello World'));
-      //   this.fabricCanvas.renderAll();
-      //   this.container.appendChild(this.fabricCanvas.getElement());
+  constructor(canvasElement: HTMLElement) {
+    if (
+      !canvasElement ||
+      !(canvasElement instanceof HTMLCanvasElement) ||
+      canvasElement instanceof fabric.Canvas
+    ) {
+      throw new Error('canvasElement is required');
     }
+    this.fabricCanvas = new fabric.Canvas(canvasElement);
+    // this.fabricCanvas.setDimensions({
+    //   width: canvasElement.width,
+    //   height: canvasElement.height,
+    // });
+    // this.fabricCanvas.renderAll();
   }
 
-  //   public initCanvas() {
-  //     this.canvas = document.createElement('canvas');
-  //     this.container.appendChild(this.canvas);
-  //     this.canvas.width = 100;
-  //     this.canvas.height = 100;
-  //     this.canvas.style.border = '1px solid #000';
-  //     this.canvas.style.backgroundColor = 'red';
-  //   }
-
-  public getCanvas() {
-    return this.fabricCanvas;
-  }
+  public init() {}
 
   public destroy() {
     this.fabricCanvas?.destroy();