added theme and gradients and stuff

outputframe-app/elements/render-canvas/render-canvas.less

@@ -1,3 +1,5 @@
+@import url('../../../shared/theme.less');
+
 render-canvas {
     width: 100%;
     height: 100%;
@@ -16,13 +18,14 @@ render-canvas canvas {
     left: 50%;
     transform: translate(-50%, -50%);
     border: 1px solid #c2c2c2;
-    background-color: white;
+    background-color: @median-bg-white;
+    border-color: @draw-color-white;
 }
 
 
 @media (prefers-color-scheme: dark) {
     render-canvas canvas {
-        background-color: #2c2c2c;
-        border-color: #3a3a3a;
+        background-color: @median-bg-dark;
+        border-color: @draw-color-dark;
     }
 }

outputframe-app/elements/render-canvas/render-canvas.ts

@@ -1,3 +1,4 @@
+import { getLessThemeObj } from '../../../shared/less-theme-to-obj';
 import { BaseElement } from '../../../shared/_base';
 import './render-canvas.less';
 
@@ -15,6 +16,8 @@ export class RenderCanvas extends BaseElement {
 
     public prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
 
+    private theme: any;
+
     onInit(): void {
         this.canvas = document.createElement("canvas");
         this.ctx = <CanvasRenderingContext2D>this.canvas.getContext("2d");
@@ -25,6 +28,8 @@ export class RenderCanvas extends BaseElement {
             this.handleCanvasResize();
         });
 
+        this.theme = getLessThemeObj();
+
         this.handleCanvasResize();
     }
 
@@ -42,11 +47,17 @@ export class RenderCanvas extends BaseElement {
         }
     }
 
-    drawPoly(points: { x: number, y: number }[], color?: string) {
+    drawPoly(points: { x: number, y: number }[], color?: string | CanvasGradient) {
         if (this.ctx && this.canvas) {
             this.canvas.style.display = "block";
-            this.ctx.fillStyle = this.getColor(true);
-            this.ctx.strokeStyle = this.getColor(false, color);
+            if (color instanceof CanvasGradient) {
+                //this.ctx.fillStyle = color;
+                this.ctx.strokeStyle = color;
+            }
+            else {
+                this.ctx.strokeStyle = this.getColor(color);
+                this.ctx.fillStyle = this.getBackgroundColor();
+            }
             this.ctx.beginPath();
 
             for (var i = 0; i < points.length; i++) {
@@ -106,12 +117,20 @@ export class RenderCanvas extends BaseElement {
         return area;
     };
 
+    angleBetweenPoints(point1: { x: number, y: number }, point2: { x: number, y: number }) {
+        // angle in radians
+        var angleRadians = Math.atan2(point2.y - point1.y, point2.x - point1.x);
+
+        // angle in degrees
+        return Math.atan2(point2.y - point1.y, point2.x - point1.x) * 180 / Math.PI;
+    }
+
     executeDrawQueue() {
         let prevShape: any | null = null;
         for (let i = 0; i < this.drawQueue.length; i++) {
             const shape = this.drawQueue[i];
 
-            if (prevShape != null) {
+            if (prevShape != null && this.ctx) {
                 var prevCenter = this.centerOf(prevShape.points);
                 var thisCenter = this.centerOf(shape.points);
 
@@ -120,8 +139,14 @@ export class RenderCanvas extends BaseElement {
                     y: (prevCenter.y + thisCenter.y) / 2
                 };
 
-                this.drawPoly([prevCenter, middle], prevShape.color);
-                this.drawPoly([middle, thisCenter], shape.color);
+                var grd = this.ctx.createLinearGradient(this.unitsToPx(prevCenter.x), this.unitsToPx(prevCenter.y), this.unitsToPx(thisCenter.x), this.unitsToPx(thisCenter.y));
+                grd.addColorStop(0, prevShape?.color ?? this.getColor());
+                grd.addColorStop(1, shape?.color ?? this.getColor());
+
+                this.drawPoly([prevCenter, thisCenter], grd);
+
+                //this.drawPoly([prevCenter, middle], prevShape.color);
+                //this.drawPoly([middle, thisCenter], shape.color);
             }
 
             prevShape = shape;
@@ -131,14 +156,14 @@ export class RenderCanvas extends BaseElement {
             const shape = this.drawQueue[i];
             this.drawPoly(shape.points, shape.color);
             var thisCenter = this.centerOf(shape.points);
-            this.drawText(thisCenter.x, thisCenter.y, (i + 1).toString(), shape.points[1].x - shape.points[0].x, shape.color);
+            this.drawText(thisCenter.x, thisCenter.y, (i + 1).toString(), this.unitsToPx((shape.points[1].x - shape.points[0].x) * 0.6), shape.color);
         }
     }
 
     drawText(x: number, y: number, text: string, size: number = 20, color?: string) {
         if (this.ctx && this.canvas) {
             this.ctx.moveTo(x, y);
-            this.ctx.fillStyle = this.getColor(false, color);
+            this.ctx.fillStyle = this.getColor(color);
             this.ctx.textAlign = 'center';
             this.ctx.textBaseline = 'middle';
             this.ctx.font = "200 " + size + "px Segoe UI";
@@ -146,8 +171,12 @@ export class RenderCanvas extends BaseElement {
         }
     }
 
-    getColor(invert: boolean = false, color?: string) {
-        return color ? color : ((invert ? !this.prefersDarkScheme.matches : this.prefersDarkScheme.matches) ? 'rgba(255,255,255,1)' : 'rgba(44,44,44,1)');
+    getColor(color?: string) {
+        return color ? color : (this.prefersDarkScheme.matches ? this.theme["@draw-color-dark"] : this.theme["@draw-color-white"]);
+    }
+
+    getBackgroundColor() {
+        return this.prefersDarkScheme.matches ? this.theme["@median-bg-dark"] : this.theme["@median-bg-white"];
     }
 
     drawRect(x: number, y: number, width: number, height: number, color?: string) {
@@ -164,6 +193,6 @@ export class RenderCanvas extends BaseElement {
 
     unitsToPx(unitNumber: number) {
         var newPPU = Math.min(this.width, this.height) / this.units.width;
-        return unitNumber * newPPU;
+        return Math.floor(unitNumber * newPPU);
     }
 }