刻度尺高亮,前景虚化

_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 相关 ======== */
 
 /*魔改*/

_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 相关 ======== */
 
 /** 

_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'],
     };

_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
 

_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
      * + 非绘图模式时, 交换首末点的内容

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;