🐛 fix from test

fabienwnklr · Sep 29, 2023 · 6dab7f4 · 6dab7f4
1 parent 2545658
commit 6dab7f4
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 32 deletions.
diff --git a/src/Drawer.ts b/src/Drawer.ts
@@ -1110,7 +1110,7 @@ export class Drawer extends History {
     this._takeSnapshot();
     this.saveState();
 
-    if (this.activeTool !== "brush" && this.activeTool !== "eraser" && this.options.guides) {
+    if (this.activeTool !== 'brush' && this.activeTool !== 'eraser' && this.options.guides) {
       const position = getMousePosition(this.$canvas, event);
       this.drawGuides(position);
       this.drawPointerDownArc(position);
@@ -1125,7 +1125,7 @@ export class Drawer extends History {
     if (event.buttons !== 1 || this.activeTool === 'text') return; // if isDrawing is false return from here
 
     if (this.activeTool !== 'eraser') {
-      this.ctx.globalCompositeOperation = this.settingModal.xor ? "xor" : "source-over";
+      this.ctx.globalCompositeOperation = this.settingModal.xor ? 'xor' : 'source-over';
     } else if (this.activeTool === 'eraser') {
       this.ctx.globalCompositeOperation = 'destination-out';
     } else {
@@ -1256,10 +1256,15 @@ export class Drawer extends History {
     this.ctx.stroke();
 
     // triangle
+    let triangleWidth = this.options.lineThickness;
+    // Min size, less of 5 is not visible
+    if (triangleWidth < 5) {
+      triangleWidth = 5;
+    }
     this.ctx.beginPath();
-    this.ctx.lineTo(hyp - this.options.lineThickness, this.options.lineThickness);
+    this.ctx.lineTo(hyp - triangleWidth, triangleWidth);
     this.ctx.lineTo(hyp, 0);
-    this.ctx.lineTo(hyp - this.options.lineThickness, -this.options.lineThickness);
+    this.ctx.lineTo(hyp - triangleWidth, -triangleWidth);
     this.ctx.fill();
 
     this.ctx.restore();
@@ -1323,11 +1328,13 @@ export class Drawer extends History {
   }
 
   addGrid() {
-    this.$canvas.classList.add("grid")
+    this.$canvas.classList.add('grid');
+    this.options.grid = true;
   }
 
   removeGrid() {
     this.$canvas.classList.remove('grid');
+    this.options.grid = false;
   }
 
   drawGuides({ x, y }: Position) {
@@ -1358,7 +1365,7 @@ export class Drawer extends History {
     this.ctx.fill();
   }
 
-  drawRubberBandReference({x, y}: Position) {
+  drawRubberBandReference({ x, y }: Position) {
     const rubberBandRect: any = {};
     if (this.#dragStartLocation.x < x) {
       rubberBandRect.left = this.#dragStartLocation.x;
@@ -1379,30 +1386,28 @@ export class Drawer extends History {
     this.ctx.lineWidth = 1;
 
     this.ctx.beginPath();
-    this.ctx.arc(rubberBandRect.left,
-            rubberBandRect.top,
-            4, 0, Math.PI * 2);
+    this.ctx.arc(rubberBandRect.left, rubberBandRect.top, 4, 0, Math.PI * 2);
     this.ctx.closePath();
     this.ctx.stroke();
 
     this.ctx.beginPath();
-    this.ctx.arc(rubberBandRect.left + rubberBandRect.width,
-            rubberBandRect.top,
-            4, 0, Math.PI * 2);
+    this.ctx.arc(rubberBandRect.left + rubberBandRect.width, rubberBandRect.top, 4, 0, Math.PI * 2);
     this.ctx.closePath();
     this.ctx.stroke();
 
     this.ctx.beginPath();
-    this.ctx.arc(rubberBandRect.left,
-            rubberBandRect.top + rubberBandRect.height,
-            4, 0, Math.PI * 2);
+    this.ctx.arc(rubberBandRect.left, rubberBandRect.top + rubberBandRect.height, 4, 0, Math.PI * 2);
     this.ctx.closePath();
     this.ctx.stroke();
 
     this.ctx.beginPath();
-    this.ctx.arc(rubberBandRect.left + rubberBandRect.width,
-            rubberBandRect.top + rubberBandRect.height,
-            4, 0, Math.PI * 2);
+    this.ctx.arc(
+      rubberBandRect.left + rubberBandRect.width,
+      rubberBandRect.top + rubberBandRect.height,
+      4,
+      0,
+      Math.PI * 2
+    );
     this.ctx.closePath();
     this.ctx.stroke();
 

diff --git a/src/css/modal.css b/src/css/modal.css
@@ -1,3 +1,17 @@
+.backdrop {
+  display: none;
+  background-color: rgba(0, 0, 0, 0.5);
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+}
+
+.backdrop.show {
+  display: flex;
+}
+
 .drawer-modal {
   display: none;
   box-sizing: border-box;

diff --git a/src/ui/Modal.ts b/src/ui/Modal.ts
@@ -19,6 +19,7 @@ export class Modal {
   $modalFooter!: HTMLDivElement;
   options: ModalOptions;
   drawer: Drawer;
+  $backdrop!: HTMLDivElement;
 
   constructor(drawer: Drawer, options?: Partial<ModalOptions>) {
     try {
@@ -73,14 +74,23 @@ export class Modal {
     <div class="drawer-modal"></div>`);
     this.$modalHeader = stringToHTMLElement<HTMLDivElement>(`
       <div class="drawer-modal-header"></div>`);
-    this.$modalBody = stringToHTMLElement<HTMLDivElement>(`
+      this.$modalBody = stringToHTMLElement<HTMLDivElement>(`
       <div class="drawer-modal-body"></div>`);
     this.$modalFooter = stringToHTMLElement<HTMLDivElement>(`
       <div class="drawer-modal-footer"></div>`);
 
     this.$modal.modal = this;
+
     this.$modal.append(...[this.$modalHeader, this.$modalBody, this.$modalFooter]);
-    document.body.append(this.$modal);
+
+    if (this.options.backdrop) {
+      this.$backdrop = stringToHTMLElement<HTMLDivElement>(`<div class="backdrop"></div>`);
+      this.$backdrop.append(this.$modal);
+
+      document.body.append(this.$backdrop);
+    } else {
+      document.body.append(this.$modal);
+    }
   }
 
   setHeaderContent(content: string) {
@@ -102,10 +112,16 @@ export class Modal {
   }
 
   show() {
+    if (this.$backdrop) {
+      this.$backdrop.classList.add('show');
+    }
     this.$modal.classList.add('show');
   }
 
   hide() {
+    if (this.$backdrop) {
+      this.$backdrop.classList.remove('show');
+    }
     this.$modal.classList.remove('show');
   }
 

diff --git a/src/ui/SettingsModal.ts b/src/ui/SettingsModal.ts
@@ -33,7 +33,9 @@ export class SettingsModal extends Modal {
       <ul class="drawer-modal-body-list">
         <li class="drawer-modal-body-list-item">
           <label for="setting-opacity-${this.drawer.options.id}">Global opacity</label>
-          <input id="setting-opacity-${this.drawer.options.id}"  name="opacity-${this.drawer.options.id}" type="number" min="0.1" max="1" step="0.1" value="${this.opacity}"/>
+          <input id="setting-opacity-${this.drawer.options.id}"  name="opacity-${
+            this.drawer.options.id
+          }" type="number" min="0.1" max="1" step="0.1" value="${this.opacity}"/>
         </li>
         <li class="drawer-modal-body-list-item">
           <label for="setting-fill-${this.drawer.options.id}">Fill</label>
@@ -49,9 +51,9 @@ export class SettingsModal extends Modal {
         </li>
         <li class="drawer-modal-body-list-item">
           <label for="setting-guides-${this.drawer.options.id}">Guides</label>
-          <input id="setting-guides-${this.drawer.options.id}" type="checkbox" name="guides-${this.drawer.options.id}" ${
-            this.guides ? 'checked' : ''
-          }>
+          <input id="setting-guides-${this.drawer.options.id}" type="checkbox" name="guides-${
+            this.drawer.options.id
+          }" ${this.guides ? 'checked' : ''}>
         </li>
         <li class="drawer-modal-body-list-item">
           <label for="setting-xor-${this.drawer.options.id}">XOR</label>
@@ -62,7 +64,7 @@ export class SettingsModal extends Modal {
       </ul>
     `);
 
-    this.setFooterContent(/*html*/`<small>Version 1.0.0</small>`)
+    this.setFooterContent(/*html*/ `<small>Version 1.0.0</small>`);
   }
 
   _setupSelectors() {
@@ -82,9 +84,7 @@ export class SettingsModal extends Modal {
       `#setting-opacity-${this.drawer.options.id}`
     ) as HTMLInputElement;
 
-    this.$xorSettingInput = this.$modalBody.querySelector(
-      `#setting-xor-${this.drawer.options.id}`
-    ) as HTMLInputElement;
+    this.$xorSettingInput = this.$modalBody.querySelector(`#setting-xor-${this.drawer.options.id}`) as HTMLInputElement;
   }
 
   _initEvents() {
@@ -101,22 +101,23 @@ export class SettingsModal extends Modal {
     });
 
     this.$guidesSettingInput.addEventListener('change', () => {
-     this.drawer.options.guides = this.$guidesSettingInput.checked;
+      this.drawer.options.guides = this.$guidesSettingInput.checked;
     });
 
     this.$opacitySettingInput.addEventListener('change', () => {
       const opacity = Number(this.$opacitySettingInput.value);
       this.drawer.options.opacity = opacity;
       this.drawer.ctx.globalAlpha = opacity;
-     });
+    });
 
     this.$xorSettingInput.addEventListener('change', () => {
       this.xor = this.$xorSettingInput.checked;
+      this.drawer.options.xor = this.xor;
       if (this.$xorSettingInput.checked) {
         this.drawer.ctx.globalCompositeOperation = 'xor';
       } else {
         this.drawer.ctx.globalCompositeOperation = 'source-over';
       }
-     });
+    });
   }
 }
diff --git a/src/utils/constantes.ts b/src/utils/constantes.ts
@@ -12,7 +12,7 @@ export const defaultOptionsDrawer: DrawerOptions = {
   toolbarPosition: 'outerTop',
   bgColor: '#fff',
   color: '#000',
-  lineThickness: 5,
+  lineThickness: 3,
   dotted: false,
   dash: [10, 5],
   cap: 'round',