From 5ed64a073697570a1794e6da111ebddd4767d415 Mon Sep 17 00:00:00 2001 From: Pavol Rusnak Date: Thu, 4 Jun 2020 21:39:47 +0200 Subject: [PATCH] core/tools: refactor dialog-designer tool --- core/tools/dialog-designer/index.html | 10 ++-- core/tools/dialog-designer/script.js | 66 ++++++++++----------------- 2 files changed, 28 insertions(+), 48 deletions(-) diff --git a/core/tools/dialog-designer/index.html b/core/tools/dialog-designer/index.html index ea5080869..2465f8c54 100644 --- a/core/tools/dialog-designer/index.html +++ b/core/tools/dialog-designer/index.html @@ -8,11 +8,11 @@ - - - - - + + + + +
Title:
Line1:
Line2:
Line3:
Line4:
Line5:
Line 1:
Line 2:
Line 3:
Line 4:
Line 5:
Confirm:
diff --git a/core/tools/dialog-designer/script.js b/core/tools/dialog-designer/script.js index 6da674437..f18e9b279 100644 --- a/core/tools/dialog-designer/script.js +++ b/core/tools/dialog-designer/script.js @@ -12,33 +12,27 @@ function setFont(ctx, bold, mono) { ctx.font = font; } -function measureWidth(ctx, text, bold, mono) { - setFont(ctx, bold, mono); - return ctx.measureText(text).width; -} - function text(ctx, x, y, text, bold, mono) { setFont(ctx, bold, mono); ctx.fillText(text, x, y); } +function textCenter(ctx, x, y, text, bold, mono) { + setFont(ctx, bold, mono); + var w = ctx.measureText(text).width; + ctx.fillText(text, x - w / 2, y); +} + function render() { var title_str = document.getElementById("title").value; - var line1_str = document.getElementById("line1").value; - var line2_str = document.getElementById("line2").value; - var line3_str = document.getElementById("line3").value; - var line4_str = document.getElementById("line4").value; - var line5_str = document.getElementById("line5").value; - var bold1 = document.getElementById("bold_line1").checked; - var bold2 = document.getElementById("bold_line2").checked; - var bold3 = document.getElementById("bold_line3").checked; - var bold4 = document.getElementById("bold_line4").checked; - var bold5 = document.getElementById("bold_line5").checked; - var mono1 = document.getElementById("mono_line1").checked; - var mono2 = document.getElementById("mono_line2").checked; - var mono3 = document.getElementById("mono_line3").checked; - var mono4 = document.getElementById("mono_line4").checked; - var mono5 = document.getElementById("mono_line5").checked; + var line_str = []; + var bold = []; + var mono = []; + for (var i = 1; i <= 5; i++) { + line_str[i] = document.getElementById("line" + i).value; + bold[i] = document.getElementById("bold_line" + i).checked; + mono[i] = document.getElementById("mono_line" + i).checked; + } var confirm_str = document.getElementById("confirm").value; var canvas = document.getElementById('canvas'); @@ -51,33 +45,19 @@ function render() { } text(ctx, 44, 35, title_str, true); - text(ctx, 14, 48 + 26 * 1, line1_str, bold1, mono1); - text(ctx, 14, 48 + 26 * 2, line2_str, bold2, mono2); - text(ctx, 14, 48 + 26 * 3, line3_str, bold3, mono3); - text(ctx, 14, 48 + 26 * 4, line4_str, bold4, mono4); - text(ctx, 14, 48 + 26 * 5, line5_str, bold5, mono5); - - var w = measureWidth(ctx, confirm_str); - text(ctx, 120 - w / 2, 215, confirm_str, true); + for (var i = 1; i <= 5; i++) { + text(ctx, 14, 48 + 26 * i, line_str[i], bold[i], mono[i]); + } + textCenter(ctx, 120, 215, confirm_str, true); } window.onload = function() { document.getElementById("title").onkeyup = render; - document.getElementById("line1").onkeyup = render; - document.getElementById("line2").onkeyup = render; - document.getElementById("line3").onkeyup = render; - document.getElementById("line4").onkeyup = render; - document.getElementById("line5").onkeyup = render; - document.getElementById("bold_line1").onclick = render; - document.getElementById("bold_line2").onclick = render; - document.getElementById("bold_line3").onclick = render; - document.getElementById("bold_line4").onclick = render; - document.getElementById("bold_line5").onclick = render; - document.getElementById("mono_line1").onclick = render; - document.getElementById("mono_line2").onclick = render; - document.getElementById("mono_line3").onclick = render; - document.getElementById("mono_line4").onclick = render; - document.getElementById("mono_line5").onclick = render; + for (var i = 1; i <= 5; i++) { + document.getElementById("line" + i).onkeyup = render; + document.getElementById("bold_line" + i).onclick = render; + document.getElementById("mono_line" + i).onclick = render; + } document.getElementById("confirm").onkeyup = render; render(); }