From 2bf38dece2d7b0fae216462f042ff2fdce7326c4 Mon Sep 17 00:00:00 2001 From: ckcz123 Date: Sun, 19 Jul 2020 11:52:50 +0800 Subject: [PATCH] =?UTF-8?q?=E5=88=BB=E5=BA=A6=E5=B0=BA=E9=AB=98=E4=BA=AE,?= =?UTF-8?q?=E5=89=8D=E6=99=AF=E8=99=9A=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _server/css/editor_color.css | 8 ++++++++ _server/css/editor_color_dark.css | 8 ++++++++ _server/editor.js | 2 ++ _server/editor_listen.js | 1 + _server/editor_mappanel.js | 26 ++++++++++++++++++++++++ libs/maps.js | 33 ++++++++++++++----------------- 6 files changed, 60 insertions(+), 18 deletions(-) diff --git a/_server/css/editor_color.css b/_server/css/editor_color.css index 64f77830..fb9b903b 100644 --- a/_server/css/editor_color.css +++ b/_server/css/editor_color.css @@ -219,6 +219,14 @@ textarea[disabled] { color: black; } +table.col td.highlight { + background-color: #77ddcc; +} + +table.row td.highlight { + background-color: #88bbdd; +} + /** ======== blockly 相关 ======== */ /*魔改*/ diff --git a/_server/css/editor_color_dark.css b/_server/css/editor_color_dark.css index 9e29d16d..9867e723 100644 --- a/_server/css/editor_color_dark.css +++ b/_server/css/editor_color_dark.css @@ -321,6 +321,14 @@ option:checked { color: #bbbbbb; } +table.col td.highlight { + background-color: #66ccbb; +} + +table.row td.highlight { + background-color: #77aacc; +} + /** ======== blockly 相关 ======== */ /** diff --git a/_server/editor.js b/_server/editor.js index 38d57d8a..595b9fbe 100644 --- a/_server/editor.js +++ b/_server/editor.js @@ -59,6 +59,8 @@ function editor() { undoFloor: document.getElementById('undoFloor'), editorTheme: document.getElementById('editorTheme'), bigmapBtn : document.getElementById('bigmapBtn'), + mapRowMark: document.getElementById('mapRowMark'), + mapColMark: document.getElementById('mapColMark'), maps: ['bgmap', 'fgmap', 'map'], canvas: ['bg', 'fg'], }; diff --git a/_server/editor_listen.js b/_server/editor_listen.js index 94725b6e..e8c09dfe 100644 --- a/_server/editor_listen.js +++ b/_server/editor_listen.js @@ -12,6 +12,7 @@ editor_listen_wrapper = function (editor) { editor.dom.eui.onmousedown = editor.uifunctions.map_ondown editor.dom.eui.onmousemove = editor.uifunctions.map_onmove editor.dom.eui.onmouseup = editor.uifunctions.map_onup + editor.dom.eui.onmouseout = editor.uifunctions.map_onmoveout editor.dom.mid.onmousewheel = editor.uifunctions.map_mousewheel diff --git a/_server/editor_mappanel.js b/_server/editor_mappanel.js index 17af2e1f..801bf47e 100644 --- a/_server/editor_mappanel.js +++ b/_server/editor_mappanel.js @@ -138,6 +138,18 @@ editor_mappanel_wrapper = function (editor) { } } + var _setMarksHightlight = function (marks, index) { + for (var i = 0; i < marks.length; ++i) { + if (marks[i].classList.contains('highlight')) { + if (i == index) index = null; + else marks[i].classList.remove('highlight'); + } + } + if (index != null) { + marks[index].classList.add('highlight'); + } + } + /** * editor.dom.eui.onmousemove * + 非绘图模式时维护起止位置并画箭头 @@ -145,6 +157,13 @@ editor_mappanel_wrapper = function (editor) { */ editor.uifunctions.map_onmove = function (e) { editor.uivalues.lastMoveE=e; + if (!editor.uivalues.bigmap && !editor.isMobile) { + var loc = editor.uifunctions.eToLoc(e); + var pos = editor.uifunctions.locToPos(loc); + _setMarksHightlight(Array.from(editor.dom.mapColMark.children[0].rows[0].cells), pos.x); + _setMarksHightlight(Array.from(editor.dom.mapRowMark.children[0].rows).map(function (tr) {return tr.cells[0];}), pos.y); + } + if (!selectBox.isSelected()) { if (editor.uivalues.startPos == null) return; var loc = editor.uifunctions.eToLoc(e); @@ -225,6 +244,13 @@ editor_mappanel_wrapper = function (editor) { return false; } + editor.uifunctions.map_onmoveout = function () { + if (!editor.uivalues.bigmap && !editor.isMobile) { + _setMarksHightlight(Array.from(editor.dom.mapColMark.children[0].rows[0].cells)); + _setMarksHightlight(Array.from(editor.dom.mapRowMark.children[0].rows).map(function (tr) {return tr.cells[0];})); + } + } + /** * editor.dom.eui.onmouseup * + 非绘图模式时, 交换首末点的内容 diff --git a/libs/maps.js b/libs/maps.js index d3436b6e..604c4037 100644 --- a/libs/maps.js +++ b/libs/maps.js @@ -865,7 +865,22 @@ maps.prototype._drawBlockInfo_bgfg = function (blockInfo, name, x, y, ctx) { } core.drawImage(ctx, core.material.groundCanvas.canvas, px, py); } + var alpha = null; + if (name == 'fg' && this._drawBlockInfo_shouldBlurFg()) { + var eventArr = this.getMapArray(); + if (eventArr != null && eventArr[y][x] != 0) { + ctx = core.getContextByName(ctx); + alpha = ctx.globalAlpha; + core.setAlpha(ctx, 0.6); + } + } core.drawImage(ctx, image, posX * 32, posY * height, 32, height, px, py + 32 - height, 32, height); + if (alpha != null) core.setAlpha(ctx, alpha); +} + +////// 是否应当存在事件时虚化前景层 ////// +maps.prototype._drawBlockInfo_shouldBlurFg = function () { + return main.mode == 'editor' || core.flags.blurFg; } ////// 生成groundPattern ////// @@ -1099,11 +1114,6 @@ maps.prototype._drawBgFgMap = function (floorId, name, config) { var endY = config.onMap && core.bigmap.v2 ? Math.min(height, core.bigmap.posY + core.__SIZE__ + 2) : height; // +1 for 48 px var arr = this._getBgFgMapArray(name, floorId, !config.redraw); - var eventArr = null; - if (name == 'fg' && config.onMap && this._drawBgFgMap_shouldBlurFg()) { - eventArr = this.getMapArray(floorId); - } - for (var x = startX; x < endX; x++) { for (var y = startY; y < endY; y++) { if (arr[y][x] == 0) continue; @@ -1111,24 +1121,11 @@ maps.prototype._drawBgFgMap = function (floorId, name, config) { block.name = name; var blockInfo = this.getBlockInfo(block); if (!blockInfo) continue; - // --- 前景虚化 - var blur = false, alpha; - if (eventArr != null && eventArr[y][x] != 0) { - blur = true; - alpha = config.ctx.globalAlpha; - config.ctx.globalAlpha = 0.6; - } this._drawMap_drawBlockInfo(config.ctx, block, blockInfo, arr, config.onMap); - if (blur) config.ctx.globalAlpha = alpha; } } } -////// 是否应当存在事件时虚化前景层 ////// -maps.prototype._drawBgFgMap_shouldBlurFg = function () { - return main.mode == 'editor' || core.flags.blurFg; -} - ////// 绘制楼层贴图 ////// maps.prototype._drawFloorImages = function (floorId, ctx, name, images, currStatus, onMap) { floorId = floorId || core.status.floorId;