From f25a29574222bf180b3ec1509f4d2f88944a77ac Mon Sep 17 00:00:00 2001
From: oc <ckcz123@126.com>
Date: Mon, 25 Mar 2019 23:35:10 +0800
Subject: [PATCH] drawKeyboard

---
 libs/actions.js |  71 ++++++++++++++++---------------
 libs/ui.js      | 111 ++++++++++++++++++++----------------------------
 2 files changed, 81 insertions(+), 101 deletions(-)

diff --git a/libs/actions.js b/libs/actions.js
index 37f39db2..9b68d44f 100644
--- a/libs/actions.js
+++ b/libs/actions.js
@@ -2252,11 +2252,12 @@ actions.prototype._keyUpGameInfo = function (keycode) {
 
 ////// “虚拟键盘”界面时的点击操作 //////
 actions.prototype._clickKeyBoard = function (x, y) {
-    if (y == 3 && x >= 1 && x <= 11) {
+    var m = this.HSIZE;
+    if (y == m - 3 && x >= m - 5 && x <= m + 5) {
         core.ui.closePanel();
-        core.keyUp(112 + x - 1); // F1-F12: 112-122
+        core.keyUp(112 + x + 5 - m);
     }
-    if (y == 3 && x == 12) {
+    if (y == m - 3 && x == m + 6) {
         var val = prompt();
         if (val != null) {
             try {
@@ -2266,9 +2267,9 @@ actions.prototype._clickKeyBoard = function (x, y) {
             }
         }
     }
-    if (y == 4 && x >= 1 && x <= 10) {
+    if (y == m - 2 && x >= m - 5 && x <= m + 4) {
         core.ui.closePanel();
-        core.keyUp(x == 10 ? 48 : 48 + x); // 1-9: 49-57; 0: 48
+        core.keyUp(x == m + 4 ? 48 : 49 + x + 5 - m); // 1-9: 49-57; 0: 48
     }
     // 字母
     var lines = [
@@ -2276,46 +2277,46 @@ actions.prototype._clickKeyBoard = function (x, y) {
         ["A", "S", "D", "F", "G", "H", "J", "K", "L"],
         ["Z", "X", "C", "V", "B", "N", "M"],
     ];
-    if (y == 5 && x >= 1 && x <= 10) {
+    if (y == m - 1 && x >= m - 5 && x <= m + 4) {
         core.ui.closePanel();
-        core.keyUp(lines[0][x - 1].charCodeAt(0));
+        core.keyUp(lines[0][x + 5 - m].charCodeAt(0));
     }
-    if (y == 6 && x >= 1 && x <= 9) {
+    if (y == m && x >= m - 5 && x <= m + 3) {
         core.ui.closePanel();
-        core.keyUp(lines[1][x - 1].charCodeAt(0));
+        core.keyUp(lines[1][x + 5 - m].charCodeAt(0));
     }
-    if (y == 7 && x >= 1 && x <= 7) {
+    if (y == m + 1 && x >= m - 5 && x <= m + 1) {
         core.ui.closePanel();
-        core.keyUp(lines[2][x - 1].charCodeAt(0));
+        core.keyUp(lines[2][x + 5 - m].charCodeAt(0));
     }
-    if (y == 8 && x >= 1 && x <= 11) {
+    if (y == m + 2 && x >= m - 5 && x <= m + 5) {
         core.ui.closePanel();
-        if (x == 1) core.keyUp(189); // -
-        if (x == 2) core.keyUp(187); // =
-        if (x == 3) core.keyUp(219); // [
-        if (x == 4) core.keyUp(221); // ]
-        if (x == 5) core.keyUp(220); // \
-        if (x == 6) core.keyUp(186); // ;
-        if (x == 7) core.keyUp(222); // '
-        if (x == 8) core.keyUp(188); // ,
-        if (x == 9) core.keyUp(190); // .
-        if (x == 10) core.keyUp(191); // /
-        if (x == 11) core.keyUp(192); // `
+        if (x == m - 5) core.keyUp(189); // -
+        if (x == m - 4) core.keyUp(187); // =
+        if (x == m - 3) core.keyUp(219); // [
+        if (x == m - 2) core.keyUp(221); // ]
+        if (x == m - 1) core.keyUp(220); // \
+        if (x == m) core.keyUp(186); // ;
+        if (x == m + 1) core.keyUp(222); // '
+        if (x == m + 2) core.keyUp(188); // ,
+        if (x == m + 3) core.keyUp(190); // .
+        if (x == m + 4) core.keyUp(191); // /
+        if (x == m + 5) core.keyUp(192); // `
     }
-    if (y == 9 && x >= 1 && x <= 10) {
+    if (y == m + 3 && x >= m - 5 && x <= m + 4) {
         core.ui.closePanel();
-        if (x == 1) core.keyUp(27); // ESC
-        if (x == 2) core.keyUp(9); // TAB
-        if (x == 3) core.keyUp(20); // CAPS
-        if (x == 4) core.keyUp(16); // SHIFT
-        if (x == 5) core.keyUp(17); // CTRL
-        if (x == 6) core.keyUp(18); // ALT
-        if (x == 7) core.keyUp(32); // SPACE
-        if (x == 8) core.keyUp(8); // BACKSPACE
-        if (x == 9) core.keyUp(13); // ENTER
-        if (x == 10) core.keyUp(46); // DEL
+        if (x == m - 5) core.keyUp(27); // ESC
+        if (x == m - 4) core.keyUp(9); // TAB
+        if (x == m - 3) core.keyUp(20); // CAPS
+        if (x == m - 2) core.keyUp(16); // SHIFT
+        if (x == m - 1) core.keyUp(17); // CTRL
+        if (x == m) core.keyUp(18); // ALT
+        if (x == m + 1) core.keyUp(32); // SPACE
+        if (x == m + 2) core.keyUp(8); // BACKSPACE
+        if (x == m + 3) core.keyUp(13); // ENTER
+        if (x == m + 4) core.keyUp(46); // DEL
     }
-    if (y == 10 && x >= 9 && x <= 11)
+    if (y == m + 4 && x >= m + 3 && x <= m + 5)
         core.ui.closePanel();
 }
 
diff --git a/libs/ui.js b/libs/ui.js
index 7473fd11..6654b05b 100644
--- a/libs/ui.js
+++ b/libs/ui.js
@@ -2148,41 +2148,19 @@ ui.prototype.drawSLPanel = function(index, refresh) {
 ui.prototype.drawKeyBoard = function () {
     core.lockControl();
     core.status.event.id = 'keyBoard';
+    core.clearUI();
 
-    core.clearSelector();
-
-    var left = 16, top = 48, width = 416 - 2 * left, height = 416 - 2 * top;
-
-    var background = core.status.textAttribute.background;
-    var isWindowSkin = false;
-    if (typeof background == 'string') {
-        background = core.material.images.images[background];
-        if (core.isset(background) && background.width==192 && background.height==128) isWindowSkin = true;
-        else background = core.initStatus.textAttribute.background;
-    }
-    if (!isWindowSkin) background = core.arrayToRGBA(background);
-    var borderColor = core.status.globalAttribute.borderColor;
-    var titleColor = core.arrayToRGBA(core.status.textAttribute.title);
-    var textColor = core.arrayToRGBA(core.status.textAttribute.text);
-
-    core.clearMap('ui');
-    if (isWindowSkin) {
-        core.setAlpha('ui', 0.85);
-        this.drawWindowSkin(background,'ui',left,top,width,height);
-    }
-    else {
-        core.fillRect('ui', left, top, width, height, background);
-        core.strokeRect('ui', left - 1, top - 1, width + 1, height + 1, borderColor, 2);
-    }
-    core.setAlpha('ui', 1);
+    var width = 384, height = 320;
+    var left = (this.PIXEL - width) / 2, right = left + width;
+    var top = (this.PIXEL - height) / 2, bottom = top + height;
 
+    var isWindowSkin = this._drawTextBox_drawBackground({}, {}, {left:left, right:right}, {top:top, bottom: bottom});
     core.setTextAlign('ui', 'center');
-    var globalFont = core.status.globalAttribute.font;
-    core.fillText('ui', "虚拟键盘", 208, top+35, titleColor, "bold 22px "+globalFont);
-
-    core.setFont('ui', '17px '+globalFont);
-    core.setFillStyle('ui', textColor);
-    var offset = 128-9;
+    core.setFillStyle('ui', core.arrayToRGBA(core.status.textAttribute.title));
+    core.fillText('ui', '虚拟键盘', this.HPIXEL, top + 35, null, this._buildFont(22, true));
+    core.setFont('ui', this._buildFont(17, false));
+    core.setFillStyle('ui', core.arrayToRGBA(core.status.textAttribute.text));
+    var offset = this.HPIXEL - 89;
 
     var lines = [
         ["F1","F2","F3","F4","F5","F6","F7","F8","F9","10","11"],
@@ -2196,17 +2174,17 @@ ui.prototype.drawKeyBoard = function () {
 
     lines.forEach(function (line) {
         for (var i=0;i<line.length;i++) {
-            core.fillText('ui', line[i], 48+32*i, offset);
+            core.fillText('ui', line[i], core.ui.HPIXEL + 32*(i-5), offset);
         }
         offset+=32;
     });
 
-    core.fillText("ui", "返回游戏", 416-80, offset-3, '#FFFFFF', 'bold 15px '+globalFont);
+    core.fillText("ui", "返回游戏", this.PIXEL - 80, offset-3, '#FFFFFF', this._buildFont(15, true));
 
     if (isWindowSkin)
-        this.drawWindowSelector(background, 300, offset - 22, 72, 27);
+        this.drawWindowSelector(core.status.textAttribute.background, this.HPIXEL + 92, offset - 22, 72, 27);
     else
-        core.strokeRect('ui', 300, offset - 22, 72, 27, "#FFD700", 2);
+        core.strokeRect('ui', this.HPIXEL + 92, offset - 22, 72, 27, "#FFD700", 2);
 }
 
 ////// 绘制状态栏 /////
@@ -2410,44 +2388,45 @@ ui.prototype.drawAbout = function () {
 
 ////// 绘制“画图”界面 //////
 ui.prototype.drawPaint = function () {
-
     core.drawText(
         "\t[进入绘图模式]你可以在此页面上任意进行绘图和标记操作。\nM键可以进入或退出此模式。\n\n"+
         "绘图的内容会自动保存，且以页面为生命周期，和存读档无关，重新开始游戏或读档后绘制的内容仍有效，但刷新页面就会消失。\n"+
         "你可以将绘制内容保存到文件，也可以从文件读取保存的绘制内容。\n"+
         "浏览地图页面可以按楼传按钮或M键来开启/关闭该层的绘图显示。\n\n更多功能请详见文档-元件-绘图模式。",
-        function () {
-            core.drawTip("打开绘图模式，现在可以任意在界面上绘图标记");
-
-            core.lockControl();
-            core.status.event.id = 'paint';
-            core.status.event.data = {"x": null, "y": null, "erase": false};
-
-            core.clearSelector();
-            core.createCanvas('paint', -core.bigmap.offsetX, -core.bigmap.offsetY, 32*core.bigmap.width, 32*core.bigmap.height, 95);
-
-            // 将已有的内容绘制到route上
-            var value = core.paint[core.status.floorId];
-            if (core.isset(value)) value = lzw_decode(value).split(",");
-            core.utils.decodeCanvas(value, 32*core.bigmap.width, 32*core.bigmap.height);
-            core.drawImage('paint', core.bigmap.tempCanvas.canvas, 0, 0);
-
-            core.setLineWidth('paint', 3);
-            core.setStrokeStyle('paint', '#FF0000');
-
-            core.statusBar.image.keyboard.style.opacity = 0;
-            core.statusBar.image.shop.style.opacity = 0;
-
-            core.statusBar.image.book.src = core.statusBar.icons.paint.src;
-            core.statusBar.image.fly.src = core.statusBar.icons.erase.src;
-            core.statusBar.image.toolbox.src = core.statusBar.icons.empty.src;
-            core.statusBar.image.settings.src = core.statusBar.icons.exit.src;
-            core.statusBar.image.book.style.opacity = 1;
-            core.statusBar.image.fly.style.opacity = 1;
-        }
+        this._drawPaint_draw
     );
 }
 
+ui.prototype._drawPaint_draw = function () {
+    core.drawTip("打开绘图模式，现在可以任意在界面上绘图标记");
+
+    core.lockControl();
+    core.status.event.id = 'paint';
+    core.status.event.data = {"x": null, "y": null, "erase": false};
+
+    core.clearSelector();
+    core.createCanvas('paint', -core.bigmap.offsetX, -core.bigmap.offsetY, 32*core.bigmap.width, 32*core.bigmap.height, 95);
+
+    // 将已有的内容绘制到route上
+    var value = core.paint[core.status.floorId];
+    if (core.isset(value)) value = lzw_decode(value).split(",");
+    core.utils.decodeCanvas(value, 32*core.bigmap.width, 32*core.bigmap.height);
+    core.drawImage('paint', core.bigmap.tempCanvas.canvas, 0, 0);
+
+    core.setLineWidth('paint', 3);
+    core.setStrokeStyle('paint', '#FF0000');
+
+    core.statusBar.image.keyboard.style.opacity = 0;
+    core.statusBar.image.shop.style.opacity = 0;
+
+    core.statusBar.image.book.src = core.statusBar.icons.paint.src;
+    core.statusBar.image.fly.src = core.statusBar.icons.erase.src;
+    core.statusBar.image.toolbox.src = core.statusBar.icons.empty.src;
+    core.statusBar.image.settings.src = core.statusBar.icons.exit.src;
+    core.statusBar.image.book.style.opacity = 1;
+    core.statusBar.image.fly.style.opacity = 1;
+}
+
 ////// 绘制帮助页面 //////
 ui.prototype.drawHelp = function () {
     core.clearSelector();