⚡️improve perd

fabienwnklr · Sep 21, 2023 · 508d48c · 508d48c
1 parent e44c287
commit 508d48c
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 14 deletions.
diff --git a/src/Drawer.ts b/src/Drawer.ts
@@ -81,7 +81,7 @@ export class Drawer extends History {
   private _buildDrawer() {
     this.$drawerContainer = stringToHTMLElement<HTMLDivElement>(`<div class="drawer-container"></div>`);
     const canvas = `
-    <canvas tabindex="0" id="${this.options.id}" height="${this.options.height}" width="${this.options.width}"></canvas>
+    <canvas tabindex="0" id="${this.options.id}" height="${this.options.height}" width="${this.options.width}" moz-opaque></canvas>
   `;
     this.$canvas = stringToHTMLElement<HTMLCanvasElement>(canvas);
     this.ctx = this.$canvas.getContext('2d') as CanvasRenderingContext2D;
@@ -163,7 +163,7 @@ export class Drawer extends History {
    * @param bgColor canvas css background color
    */
   setBgColor(bgColor?: string) {
-    this.$canvas.style.backgroundColor = bgColor || this.options.bgColor;
+    this.$canvas.style.backgroundColor = bgColor ?? this.options.bgColor;
   }
 
   /**
@@ -897,18 +897,20 @@ export class Drawer extends History {
   private _drawing(event: MouseEvent | Touch) {
     if (!this.isDrawing || this.activeTool === 'text') return; // if isDrawing is false return from here
 
-    if (this.activeTool === 'brush') {
-      this.ctx.globalCompositeOperation = 'source-over';
-    } else if (this.activeTool === 'eraser') {
-      this.ctx.globalCompositeOperation = 'destination-out';
-    } else {
-      throw new Error(`Drawerror : unknown active draw tool "${this.activeTool}"`);
-    }
-    const { top, left } = this.$canvas.getBoundingClientRect();
-    const positionX = event.clientX - left;
-    const positionY = event.clientY - top;
-    this.ctx.lineTo(positionX, positionY); // creating line according to the mouse pointer
-    this.ctx.stroke();
+    requestAnimationFrame(() => {
+      if (this.activeTool === 'brush') {
+        this.ctx.globalCompositeOperation = 'source-over';
+      } else if (this.activeTool === 'eraser') {
+        this.ctx.globalCompositeOperation = 'destination-out';
+      } else {
+        throw new Error(`Drawerror : unknown active draw tool "${this.activeTool}"`);
+      }
+      const { top, left } = this.$canvas.getBoundingClientRect();
+      const positionX = event.clientX - left;
+      const positionY = event.clientY - top;
+      this.ctx.lineTo(positionX, positionY); // creating line according to the mouse pointer
+      this.ctx.stroke();
+    });
   }
 
   /**
@@ -975,6 +977,8 @@ export class Drawer extends History {
     $textArea.style.left = event.clientX + 'px';
     $textArea.style.top = event.clientY + 'px';
     $textArea.style.color = this.options.color;
+    $textArea.style.height = 'auto';
+    $textArea.style.width = 'auto';
 
     $textArea.addEventListener('focusout', () => {
       const value = $textArea.value;
@@ -999,6 +1003,13 @@ export class Drawer extends History {
       $textArea.remove();
     });
 
+    $textArea.addEventListener('input', function () {
+      this.style.height = 'auto';
+      this.style.height = this.scrollHeight + 'px';
+      this.style.width = 'auto';
+      this.style.width = this.scrollWidth + 'px';
+    });
+
     this.$drawerContainer.appendChild($textArea);
 
     $textArea.focus();

diff --git a/src/drawer.css b/src/drawer.css
@@ -7,6 +7,11 @@
 
 body {
   background-color: blanchedalmond;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
 }
 
 .drawer-container {