Merge pull request #17 from G43riko/development

Version 0.2.61
G43riko · Sep 22, 2021 · 052a352 · 052a352
2 parents 6b9613a + 58da13e
commit 052a352
Show file tree

Hide file tree

Showing 26 changed files with 1,045 additions and 249 deletions.
diff --git a/.idea/runConfigurations.xml b/.idea/runConfigurations.xml
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "gtools",
-    "version": "0.2.60",
+    "version": "0.2.61",
     "description": "Small library including utils methods for easier life",
     "main": "./index.js",
     "module": "./_esm5/index.js",

diff --git a/src/dom/canvas-drawer-advanced.ts b/src/dom/canvas-drawer-advanced.ts
@@ -1,6 +1,8 @@
+import { Origin } from "../enums";
 import { XYWH } from "../types";
 import { CanvasDrawer } from "./canvas-drawer";
 import { CanvasManager } from "./canvas-manager";
+import { getXYWHFrom } from "./canvas-misc-utilts";
 import { CanvasShadowConfig } from "./types/canvas-shadow-config";
 
 export interface ObjectOptions {
@@ -32,15 +34,16 @@ export class CanvasDrawerAdvanced {
     public constructor(private readonly context: CanvasRenderingContext2D) {
     }
 
-    public renderRect(location: XYWH, options: RenderOptions): void {
+    public renderRect(rawLocation: XYWH, options: RenderOptions, origin = Origin.TL): void {
+        const location = getXYWHFrom(rawLocation, {x: rawLocation.w, y: rawLocation.h}, origin);
         this.prepareShadow(options.shadow);
         this.prepareOpacity(options.opacity);
         if (options.fill) {
             this.prepareShadow(options.fill.shadow);
             this.prepareOpacity(options.fill.opacity);
 
             if (options.fill.fillImage) {
-                this.drawer.drawImage(options.fill.fillImage);
+                this.drawer.drawImage(options.fill.fillImage, location.x, location.y, location.w, location.h);
             }
             if (options.fill.fillColor) {
                 this.drawer.fillRect(location.x, location.y, location.w, location.h, options.fill.fillColor);
@@ -58,8 +61,9 @@ export class CanvasDrawerAdvanced {
                 this.context.lineCap = options.stroke.lineCap;
             }
 
-            if (!isNaN(options.stroke.width ?? NaN)) {
-                this.context.lineWidth = options.stroke.width as number;
+            const width = options.stroke.width ?? NaN;
+            if (!isNaN(width)) {
+                this.context.lineWidth = width;
             }
             if (options.stroke.strokeColor) {
                 this.drawer.fillRect(location.x, location.y, location.w, location.h, options.stroke.strokeColor);
@@ -68,15 +72,17 @@ export class CanvasDrawerAdvanced {
     }
 
     private prepareShadow(shadow?: CanvasShadowConfig): void {
-        if (shadow) {
-            CanvasManager.setShadow(
-                this.context,
-                shadow.x ?? 0,
-                shadow.y ?? 0,
-                shadow.color ?? "black",
-                shadow.blur ?? 5,
-            );
+        if (!shadow) {
+            return;
         }
+
+        CanvasManager.setShadow(
+            this.context,
+            shadow.x ?? 0,
+            shadow.y ?? 0,
+            shadow.color ?? "black",
+            shadow.blur ?? 5,
+        );
     }
 
     private prepareDashed(dashes?: number[]): void {

diff --git a/src/dom/canvas-drawer.ts b/src/dom/canvas-drawer.ts
@@ -1,26 +1,38 @@
-import { SimpleVector2 } from "../math";
+import { ReadonlySimpleVector2, SimpleVector2 } from "../math";
+import { Color } from "../models";
 import { RoundData, TextOptionsInterface } from "../types";
 import { makeRoundedRect } from "./canvas-misc-utilts";
 import { Drawer } from "./drawer";
 
 const PI2 = Math.PI * 2;
+const PI05 = Math.PI * 0.5;
+
+export type ColorType = string | Color;
+
+function extractColor(color: ColorType): string {
+    if (typeof color === "string") {
+        return color;
+    }
+
+    return color.hex;
+}
 
 export class CanvasDrawer implements Drawer {
     public constructor(private readonly context: CanvasRenderingContext2D) {
     }
 
-    public fillRoundedRect(x: number, y: number, w: number, h: number, round: RoundData, color?: string): void {
+    public fillRoundedRect(x: number, y: number, w: number, h: number, round: RoundData, color?: ColorType): void {
         if (color) {
-            this.context.fillStyle = color;
+            this.context.fillStyle = extractColor(color);
         }
 
         makeRoundedRect(this.context, x, y, w, h, round);
         this.context.fill();
     }
 
-    public strokeRoundedRect(x: number, y: number, w: number, h: number, round: RoundData, color?: string, width = NaN): void {
+    public strokeRoundedRect(x: number, y: number, w: number, h: number, round: RoundData, color?: ColorType, width = NaN): void {
         if (color) {
-            this.context.strokeStyle = color;
+            this.context.strokeStyle = extractColor(color);
         }
 
         if (!isNaN(width)) {
@@ -35,17 +47,40 @@ export class CanvasDrawer implements Drawer {
         this.context.stroke();
     }
 
-    public fillRect(x: number, y: number, w: number, h: number, color?: string): void {
+    public fillRectangles(data: [x: number, y: number, w: number, h: number][], color?: Color | string): void {
+        if (color) {
+            this.context.fillStyle = extractColor(color);
+        }
+
+        data.forEach((item) => {
+            this.context.fillRect(...item);
+        });
+    }
+
+    public fillRect(x: number, y: number, w: number, h: number, color?: ColorType): void {
         if (color) {
-            this.context.fillStyle = color;
+            this.context.fillStyle = extractColor(color);
         }
 
         this.context.strokeRect(x, y, w, h);
     }
 
-    public strokeRect(x: number, y: number, w: number, h: number, color?: string, width = NaN): void {
+    public strokeRectangles(data: [x: number, y: number, w: number, h: number][], color?: Color | string, width?: number): void {
         if (color) {
-            this.context.strokeStyle = color;
+            this.context.strokeStyle = extractColor(color);
+        }
+        if (typeof width !== "undefined") {
+            this.context.lineWidth = width;
+        }
+
+        data.forEach((item) => {
+            this.context.strokeRect(...item);
+        });
+    }
+
+    public strokeRect(x: number, y: number, w: number, h: number, color?: ColorType, width = NaN): void {
+        if (color) {
+            this.context.strokeStyle = extractColor(color);
         }
 
         if (!isNaN(width)) {
@@ -59,26 +94,42 @@ export class CanvasDrawer implements Drawer {
         this.context.strokeRect(x, y, w, h);
     }
 
-    public fillArc(x: number, y: number, w: number, h: number, color?: string): void {
+    private createEllipse(x: number, y: number, w: number, h: number): void {
+        if(w === h) {
+            const halfSize = w / 2;
+            this.context.arc(
+                x + halfSize,
+                y + halfSize,
+                w,
+                0,
+                PI2,
+            );
+        } else {
+            const halfSize = {x: w / 2, y: h / 2};
+            this.context.ellipse(
+                x + halfSize.x,
+                y + halfSize.y,
+                halfSize.x,
+                halfSize.y,
+                0,
+                0,
+                PI2,
+            );
+        }
+    }
+
+    public fillArc(x: number, y: number, w: number, h: number, color?: ColorType): void {
         if (color) {
-            this.context.fillStyle = color;
-        }
-
-        const halfSize = {x: w / 2, y: h / 2};
-        this.context.ellipse(
-            x + halfSize.x,
-            y + halfSize.y,
-            halfSize.x,
-            halfSize.y,
-            0,
-            0,
-            PI2);
+            this.context.fillStyle = extractColor(color);
+        }
+
+        this.createEllipse(x, y, w, h);
         this.context.stroke();
     }
 
-    public strokeArc(x: number, y: number, w: number, h: number, color?: string, width = NaN): void {
+    public strokeArc(x: number, y: number, w: number, h: number, color?: ColorType, width = NaN): void {
         if (color) {
-            this.context.strokeStyle = color;
+            this.context.strokeStyle = extractColor(color);
         }
 
         if (!isNaN(width)) {
@@ -89,25 +140,17 @@ export class CanvasDrawer implements Drawer {
             }
         }
 
-        const halfSize = {x: w / 2, y: h / 2};
-        this.context.ellipse(
-            x + halfSize.x,
-            y + halfSize.y,
-            halfSize.x,
-            halfSize.y,
-            0,
-            0,
-            PI2);
+        this.createEllipse(x, y, w, h);
         this.context.stroke();
     }
 
-    public fillPath(points: SimpleVector2[], color?: string, close = false): void {
+    public fillPath(points: ReadonlySimpleVector2[], color?: ColorType, close = false): void {
         if (!Array.isArray(points) || points.length < 2) {
             return;
         }
 
         if (color) {
-            this.context.strokeStyle = color;
+            this.context.strokeStyle = extractColor(color);
         }
 
         this.context.moveTo(points[0].x, points[0].y);
@@ -122,13 +165,13 @@ export class CanvasDrawer implements Drawer {
         this.context.fill();
     }
 
-    public drawPath(points: SimpleVector2[], color?: string, width = NaN, close = false): void {
+    public drawPath(points: ReadonlySimpleVector2[], color?: ColorType, width = NaN, close = false): void {
         if (!Array.isArray(points) || points.length < 2) {
             return;
         }
 
         if (color) {
-            this.context.strokeStyle = color;
+            this.context.strokeStyle = extractColor(color);
         }
 
         if (!isNaN(width)) {
@@ -160,9 +203,9 @@ export class CanvasDrawer implements Drawer {
         this.context.drawImage(image, x, y, w, h);
     }
 
-    public drawLine(x1: number, y1: number, x2: number, y2: number, color?: string, width = NaN): void {
+    public drawLine(x1: number, y1: number, x2: number, y2: number, color?: ColorType, width = NaN): void {
         if (color) {
-            this.context.strokeStyle = color;
+            this.context.strokeStyle = extractColor(color);
         }
 
         if (!isNaN(width)) {
@@ -205,7 +248,7 @@ export class CanvasDrawer implements Drawer {
             realX += w;
         }
 
-        this.context.fillText(text, realX, realY, w);
+        this.fillRotatedText(text, realX, realY, textOptions.rotation ?? 0, w);
     }
 
     public clear(resetTransform = true): void {
@@ -231,4 +274,67 @@ export class CanvasDrawer implements Drawer {
             this.context.stroke();
         }
     }
+
+    public fillText(text: string, x: number, y: number, maxWidth?: number): void {
+        this.fillRotatedText(text, x, y, 0, maxWidth);
+    }
+
+    public fillVerticalText(text: string, x: number, y: number, maxWidth?: number): void {
+        this.fillRotatedText(text, x, y, -PI05, maxWidth);
+    }
+
+    private fillRotatedText(text: string, x: number, y: number, angle: number, maxWidth?: number): void {
+        if (!angle) {
+            return this.context.fillText(text, 0, 0, maxWidth);
+        }
+
+        this.context.save();
+        this.context.translate(x, y);
+        this.context.rotate(angle);
+        this.context.fillText(text, 0, 0, maxWidth);
+        this.context.restore();
+    }
+
+    public horizontalLine(y: number, startX = 0, endX = this.context.canvas.width): void {
+        this.context.moveTo(startX, y);
+        this.context.lineTo(endX, y);
+    }
+
+    public drawFullCanvasGrid(startX: number, startY: number, offset: number, rows: number, columns: number): void {
+        this.context.beginPath();
+        this.fullCanvasGrid(startX, startY, offset, rows, columns);
+        this.context.stroke();
+    }
+
+    public fullCanvasGrid(startX: number, startY: number, offset: number, rows: number, columns: number): void {
+        this.verticalLines(
+            startX,
+            offset,
+            columns,
+        );
+        this.horizontalLines(
+            startY,
+            offset,
+            rows,
+        );
+    }
+
+    public horizontalLines(startY: number, offsetY: number, steps: number, startX = 0, endX = this.context.canvas.width): void {
+        for (let i = 0; i < steps; i++) {
+            const y = startY + offsetY * i;
+            this.horizontalLine(y, startX, endX);
+        }
+    }
+
+    public verticalLines(startX: number, offsetX: number, steps: number, startY = 0, endY = this.context.canvas.height): void {
+        for (let i = 0; i < steps; i++) {
+            const x = startX + offsetX * i;
+            this.verticalLine(x, startY, endY);
+        }
+    }
+
+    public verticalLine(x: number, startY = 0, endY = this.context.canvas.height): void {
+        this.context.moveTo(x, startY);
+        this.context.lineTo(x, endY);
+    }
 }