From 6e9aa8d2dff1746e29a7c633a4893b121f776604 Mon Sep 17 00:00:00 2001
From: NriotHrreion <nriot233@outlook.com>
Date: Sun, 2 Jun 2024 16:19:02 +0800
Subject: [PATCH] feat: Text outline in graphing mode

---
 src/renderer/Graphics.ts           | 23 +++++++++++++++++++----
 src/renderer/Render.ts             |  3 ---
 src/style/calculator/graphing.less |  1 -
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/renderer/Graphics.ts b/src/renderer/Graphics.ts
index 195a9e9..e2858d7 100644
--- a/src/renderer/Graphics.ts
+++ b/src/renderer/Graphics.ts
@@ -13,9 +13,10 @@ export enum Axis {
 }
 
 interface ColorScheme {
-    primary: string,
-    secondary: string,
+    primary: string
+    secondary: string
     highlight: string
+    background: string
 }
 
 export interface Point {
@@ -274,6 +275,13 @@ export default class Graphics {
     }
 
     protected drawText(text: string, x: number, y: number, color: string, fontSize: number = 20) {
+        // Outline
+        this.ctx.font = (fontSize * this.ratio) +"px Ubuntu-Regular";
+        this.ctx.strokeStyle = this.colors.background;
+        this.ctx.lineWidth = 3;
+        this.ctx.strokeText(text, x, y);
+
+        // Text
         this.ctx.font = (fontSize * this.ratio) +"px Ubuntu-Regular";
         this.ctx.fillStyle = color;
         this.ctx.fillText(text, x, y);
@@ -388,6 +396,11 @@ export default class Graphics {
     public render() {
         this.clear();
 
+        // Background
+        this.ctx.fillStyle = this.colors.background;
+        this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+
+        // Axis line
         this.refreshAxisLine();
     }
 }
@@ -397,12 +410,14 @@ class GraphicsConfig {
     private static readonly lightColors: ColorScheme = {
         primary: "#404041",
         secondary: "#8c949e",
-        highlight: "#222"
+        highlight: "#222",
+        background: "#f7f7f7",
     };
     private static readonly darkColors: ColorScheme = {
         primary: "#cbd0df",
         secondary: "#8c949e",
-        highlight: "#fff"
+        highlight: "#fff",
+        background: "#0e1117",
     };
 
     public constructor(
diff --git a/src/renderer/Render.ts b/src/renderer/Render.ts
index a46768c..9fe9f96 100644
--- a/src/renderer/Render.ts
+++ b/src/renderer/Render.ts
@@ -372,9 +372,6 @@ export default class Render extends Graphics {
         // Mouse point
         var mouseCoordinatesPoint = this.pointToCoordinates(this.mousePoint);
         this.drawText("("+ Graphics.numberToString(mouseCoordinatesPoint.x, 2) +", "+ Graphics.numberToString(mouseCoordinatesPoint.y, 2) +")", (!this.isMobile ? 30 : 50) * this.ratio, 30 * this.ratio, this.colors.primary, 15);
-        
-        // Is mouse down
-        this.drawText(this.mouseDown ? "Moving" : "", this.canvas.width - 80 * this.ratio, 30 * this.ratio, this.colors.primary, 15);
 
         // Draw function images
         for(let i = 0; i < this.displayedPoints.length; i++) {
diff --git a/src/style/calculator/graphing.less b/src/style/calculator/graphing.less
index f4dc910..d2348b2 100644
--- a/src/style/calculator/graphing.less
+++ b/src/style/calculator/graphing.less
@@ -2,7 +2,6 @@
     position: relative;
     .graphing-container {
         height: 100%;
-        background-color: var(--ca-light1);
     }
     .loading-container {
         display: none; // flex