Light theme for draw-tree

toaq · Aug 14, 2023 · 720bbd8 · 720bbd8
1 parent f977f18
commit 720bbd8
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 8 deletions.
diff --git a/src/draw-tree.ts b/src/draw-tree.ts
@@ -165,12 +165,23 @@ export function placeTree(
 		: placeBranch(ctx, tree);
 }
 
-const backgroundColor = '#36393E';
-const textColor = '#DCDDDE';
-const denotationColor = '#FF4466';
-const wordColor = '#99EEFF';
+const themes = {
+	dark: {
+		backgroundColor: '#36393E',
+		textColor: '#DCDDDE',
+		denotationColor: '#FF4466',
+		wordColor: '#99EEFF',
+	},
+	light: {
+		backgroundColor: '#FFFFFF',
+		textColor: '#000000',
+		denotationColor: '#FF4466',
+		wordColor: '#3399FF',
+	},
+};
 
 interface DrawState {
+	theme: 'dark' | 'light';
 	extent: { minX: number; maxX: number; minY: number; maxY: number };
 	locations: Map<string, Location>;
 	arrows: Array<[string, string]>;
@@ -198,6 +209,7 @@ function drawTree(
 	}
 	ctx.textAlign = 'center';
 	ctx.textBaseline = 'top';
+	const { textColor, denotationColor, wordColor } = themes[state.theme];
 	if ('word' in tree) {
 		ctx.fillStyle = textColor;
 		text(tree.label, x, y);
@@ -245,7 +257,7 @@ function drawTree(
 }
 
 function drawArrows(ctx: CanvasRenderingContext2D, state: DrawState) {
-	ctx.strokeStyle = textColor;
+	ctx.strokeStyle = themes[state.theme].textColor;
 	ctx.lineWidth = 1;
 	for (const [i, j] of state.arrows) {
 		ctx.beginPath();
@@ -267,19 +279,23 @@ function drawArrows(ctx: CanvasRenderingContext2D, state: DrawState) {
 	}
 }
 
-export function pngDrawTree(tree: Tree | DTree): Buffer {
+export function pngDrawTree(
+	tree: Tree | DTree,
+	theme: 'light' | 'dark',
+): Buffer {
 	const width = 8400;
 	const height = 4400;
 	const canvas = createCanvas(width, height);
 	const ctx = canvas.getContext('2d');
-	ctx.fillStyle = backgroundColor;
+	ctx.fillStyle = themes[theme].backgroundColor;
 	ctx.fillRect(0, 0, width, height);
 	ctx.font = '20pt Noto Sans Math, Noto Sans';
 
 	const placed = placeTree(ctx, tree);
 	const x = width / 2;
 	const y = 50;
 	const state: DrawState = {
+		theme,
 		extent: { minX: x, maxX: x, minY: y, maxY: y },
 		locations: new Map(),
 		arrows: [],

diff --git a/src/index.ts b/src/index.ts
@@ -92,6 +92,10 @@ yargs
 				describe: 'Path for PNG output',
 				default: 'output.png',
 			});
+			yargs.option('light', {
+				type: 'boolean',
+				describe: 'Light theme',
+			});
 		},
 
 		function (argv) {
@@ -105,7 +109,8 @@ yargs
 					`Ambiguous parse; showing first of ${trees.length} parses.`,
 				);
 			}
-			fs.writeFileSync(argv.output as string, pngDrawTree(trees[0]));
+			const theme = argv.light ? 'light' : 'dark';
+			fs.writeFileSync(argv.output as string, pngDrawTree(trees[0], theme));
 		},
 	)
 	.command(