Skip to content

Commit

Permalink
fix: Colors inside canvas won't change when switching themes (#11)
Browse files Browse the repository at this point in the history
  • Loading branch information
@NriotHrreion
NriotHrreion committed Aug 11, 2023
1 parent 7398428 commit ed313d1
Show file tree
Hide file tree
Showing 4 changed files with 51 additions and 29 deletions.
2 changes: 1 addition & 1 deletion src/compiler/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -300,7 +300,7 @@ export default class Compiler {
} else if(Is.mathFunction(symbol)) { // function
// Process something like `2sin(pi/6)`
if(i !== 0 && !Is.operator(this.raw[i - 1])) {
if(Is.number(this.raw[i - 1], this.isProgrammingMode)) {
if(tempNumber !== "") {
addNumber(tempNumber);
tempNumber = "";
}
Expand Down
63 changes: 35 additions & 28 deletions src/components/graphing/Render.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,17 @@ import List from "../../utils/List";
import Utils from "../../utils/Utils";
import { MouseDirection, ZoomDirection } from "../../types";

const colors = {
primary: "#cbd0df",
secondary: "#8c949e",
highlight: "#fff"
};

const delta: number = .005;

// Inside of Service Worker

export default class Render {
public static colors = {
primary: "#cbd0df",
secondary: "#8c949e",
highlight: "#fff"
};

public canvas: OffscreenCanvas;
private ctx: OffscreenCanvasRenderingContext2D;
private workerCtx: Worker;
Expand Down Expand Up @@ -48,10 +48,17 @@ export default class Render {

this.fpsUpdater = setInterval(() => this.workerCtx.postMessage({ type: "fps", fps: this.currentFPS }), 1000);

if(!isDarkMode) {
colors.primary = "#404041";
colors.highlight = "#222";
}
if(!isDarkMode) Render.changeToDark();
}

public static changeToDark(): void {
Render.colors.primary = "#404041";
Render.colors.highlight = "#222";
}

public static changeToLight(): void {
Render.colors.primary = "#cbd0df";
Render.colors.highlight = "#fff";
}

public reset(): void {
Expand Down Expand Up @@ -112,7 +119,7 @@ export default class Render {
* X Direction
*/
// X Axis
this.drawStraightLine(this.center.y, colors.primary, 2);
this.drawStraightLine(this.center.y, Render.colors.primary, 2);
// thicker line
for(
let i = 1;
Expand All @@ -124,12 +131,12 @@ export default class Render {
) {
var y1 = this.center.y - i * unitPx;
var y2 = this.center.y + i * unitPx;
this.drawStraightLine(y1, colors.secondary);
this.drawStraightLine(y2, colors.secondary);
this.drawStraightLine(y1, Render.colors.secondary);
this.drawStraightLine(y2, Render.colors.secondary);

// number of the line
this.drawText((i * this.spacing).toString(), this.center.x + 5, y1 + 5, colors.primary, 15);
this.drawText((-i * this.spacing).toString(), this.center.x + 5, y2 + 5, colors.primary, 15);
this.drawText((i * this.spacing).toString(), this.center.x + 5, y1 + 5, Render.colors.primary, 15);
this.drawText((-i * this.spacing).toString(), this.center.x + 5, y2 + 5, Render.colors.primary, 15);
}
// thinner line
for(
Expand All @@ -142,15 +149,15 @@ export default class Render {
) {
var y1 = this.center.y - i * secondaryUnitPx;
var y2 = this.center.y + i * secondaryUnitPx;
this.drawStraightLine(y1, colors.secondary, .3);
this.drawStraightLine(y2, colors.secondary, .3);
this.drawStraightLine(y1, Render.colors.secondary, .3);
this.drawStraightLine(y2, Render.colors.secondary, .3);
}

/**
* Y Direction
*/
// Y Axis
this.drawVerticalLine(this.center.x, colors.primary, 2);
this.drawVerticalLine(this.center.x, Render.colors.primary, 2);
// thicker line
for(
let k = 1;
Expand All @@ -162,12 +169,12 @@ export default class Render {
) {
var x1 = this.center.x - k * unitPx;
var x2 = this.center.x + k * unitPx;
this.drawVerticalLine(x1, colors.secondary);
this.drawVerticalLine(x2, colors.secondary);
this.drawVerticalLine(x1, Render.colors.secondary);
this.drawVerticalLine(x2, Render.colors.secondary);

// number of the line
this.drawText((-k * this.spacing).toString(), x1 - 5, this.center.y + 15, colors.primary, 15);
this.drawText((k * this.spacing).toString(), x2 - 5, this.center.y + 15, colors.primary, 15);
this.drawText((-k * this.spacing).toString(), x1 - 5, this.center.y + 15, Render.colors.primary, 15);
this.drawText((k * this.spacing).toString(), x2 - 5, this.center.y + 15, Render.colors.primary, 15);
}
// thinner line
for(
Expand All @@ -180,8 +187,8 @@ export default class Render {
) {
var x1 = this.center.x - l * secondaryUnitPx;
var x2 = this.center.x + l * secondaryUnitPx;
this.drawVerticalLine(x1, colors.secondary, .3);
this.drawVerticalLine(x2, colors.secondary, .3);
this.drawVerticalLine(x1, Render.colors.secondary, .3);
this.drawVerticalLine(x2, Render.colors.secondary, .3);
}
}

Expand Down Expand Up @@ -386,18 +393,18 @@ export default class Render {
this.refreshAxisLine();

// O point
this.drawText("O", this.center.x - 20, this.center.y + 20, colors.primary, 17);
this.drawText("O", this.center.x - 20, this.center.y + 20, Render.colors.primary, 17);

// Mouse point
var mouseCoordinatesPoint = this.screenToCoordinates(this.mousePoint);
this.drawText("("+ mouseCoordinatesPoint.x.toFixed(2) +", "+ mouseCoordinatesPoint.y.toFixed(2) +")", 30, 30, colors.primary, 15);
this.drawText("("+ mouseCoordinatesPoint.x.toFixed(2) +", "+ mouseCoordinatesPoint.y.toFixed(2) +")", 30, 30, Render.colors.primary, 15);

// Is mouse down
this.drawText(this.mouseDown ? "Moving" : "", this.canvas.width - 80, 30, colors.primary, 15);
this.drawText(this.mouseDown ? "Moving" : "", this.canvas.width - 80, 30, Render.colors.primary, 15);

// Draw function images
for(let i = 0; i < this.displayedPoints.length; i++) {
this.drawLine(this.coordinatesToScreen(this.displayedPoints[i][0]), this.coordinatesToScreen(this.displayedPoints[i][1]), colors.highlight);
this.drawLine(this.coordinatesToScreen(this.displayedPoints[i][0]), this.coordinatesToScreen(this.displayedPoints[i][1]), Render.colors.highlight);
}

var imageBitmap = this.canvas.transferToImageBitmap();
Expand Down
10 changes: 10 additions & 0 deletions src/components/graphing/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,16 @@ const Graphing: React.FC = memo(() => {
reloader(reloadTrigger + 1);
});

// Listen to the change of theme, then change the colors inside canvas
new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if(!workerRef.current) return;
if(mutation.type === "attributes") {
workerRef.current.postMessage({ type: "theme-change", isDarkMode: !Utils.isDarkMode() });
}
});
}).observe(document.body, { attributes: true });

return () => { // Unregister renderer and worker
if(!workerRef.current) return;
workerRef.current.postMessage({ type: "reset" });
Expand Down
5 changes: 5 additions & 0 deletions src/workers/graphing.worker.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,11 @@ ctx.addEventListener("message", (e) => {
case "wheel":
renderer.handleWheel(req.dy);
break;
case "theme-change":
req.isDarkMode
? Render.changeToDark()
: Render.changeToLight()
break;
}
});

Expand Down

1 comment on commit ed313d1

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉 Published on https://calc.nin.red as production
🚀 Deployed on https://64d5a60298ec7a1d3e362bc9--courageous-bublanina-6857c1.netlify.app

Please sign in to comment.