diff --git a/src/draw-tree.ts b/src/draw-tree.ts index b8fafd2..700b14c 100644 --- 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; 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,12 +279,15 @@ 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'; @@ -280,6 +295,7 @@ export function pngDrawTree(tree: Tree | DTree): Buffer { 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 index bebf60c..149cf77 100644 --- 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(