bigmap-editor

界面的兼容 viewport调整以及对应的按钮, 地图两边的坐标刻度跟随 editor-mobile
2018-08-26 15:25:39 +08:00 · 2018-08-26 15:25:39 +08:00 · 702c22d49d
commit 702c22d49d
parent 7032cb7c83
5 changed files with 114 additions and 93 deletions
--- a/_server/css/editor.css
+++ b/_server/css/editor.css
@ -89,6 +89,10 @@ body {
    height: 630px;
 }

+#mapEdit {
+    overflow: hidden;
+}
+
 .map {
    position: absolute;
    left: 20px;
--- a/_server/css/editor_mobile.css
+++ b/_server/css/editor_mobile.css
@ -82,6 +82,10 @@ body {
    position: absolute;
 }

+#mapEdit {
+    overflow: hidden;
+}
+
 .map {
    position: absolute;
    left: 4vw;
--- a/_server/editor.js
+++ b/_server/editor.js
@ -21,6 +21,7 @@ editor.prototype.init = function (callback) {
            editor.updateMap();
            editor.currentFloorId = core.status.floorId;
            editor.currentFloorData = core.floors[core.status.floorId];
+            editor.buildMark();
            editor.drawEventBlock();
            if (Boolean(callback)) callback();
        });
@ -266,6 +267,64 @@ editor.prototype.updateMap = function () {
    
 }

+editor.prototype.buildMark = function(){
+    // 生成定位编号
+    var arrColMark=document.getElementById('arrColMark');
+    var arrRowMark=document.getElementById('arrRowMark');
+    var mapColMark=document.getElementById('mapColMark');
+    var mapRowMark=document.getElementById('mapRowMark');
+    var buildMark = function (offsetX,offsetY) {
+        var colNum = ' ';
+        for (var i = 0; i < 13; i++) {
+            var tpl = '<td>' + (i+offsetX) + '<div class="colBlock" style="left:' + (i * 32 + 1) + 'px;"></div></td>';
+            colNum += tpl;
+        }
+        arrColMark.innerHTML = '<tr>' + colNum + '</tr>';
+        mapColMark.innerHTML = '<tr>' + colNum + '</tr>';
+        var rowNum = ' ';
+        for (var i = 0; i < 13; i++) {
+            var tpl = '<tr><td>' + (i+offsetY) + '<div class="rowBlock" style="top:' + (i * 32 + 1) + 'px;"></div></td></tr>';
+            rowNum += tpl;
+        }
+        arrRowMark.innerHTML = rowNum;
+        mapRowMark.innerHTML = rowNum;
+    }
+    var buildMark_mobile = function (offsetX,offsetY) {
+        var colNum = ' ';
+        for (var i = 0; i < 13; i++) {
+            var tpl = '<td>' + (' '+i).slice(-2).replace(' ','&nbsp;') + '<div class="colBlock" style="left:' + (i * 96/13 ) + 'vw;"></div></td>';
+            colNum += tpl;
+        }
+        arrColMark.innerHTML = '<tr>' + colNum + '</tr>';
+        //mapColMark.innerHTML = '<tr>' + colNum + '</tr>';
+        var rowNum = ' ';
+        for (var i = 0; i < 13; i++) {
+            var tpl = '<tr><td>' + (' '+i).slice(-2).replace(' ','&nbsp;') + '<div class="rowBlock" style="top:' + (i * 96/13 ) + 'vw;"></div></td></tr>';
+            rowNum += tpl;
+        }
+        arrRowMark.innerHTML = rowNum;
+        //mapRowMark.innerHTML = rowNum;
+        //=====
+        var colNum = ' ';
+        for (var i = 0; i < 13; i++) {
+            var tpl = '<div class="coltd" style="left:' + (i * 96/13 ) + 'vw;"><div class="coltext">' + (' '+(i+offsetX)).slice(-2).replace(' ','&nbsp;') + '</div><div class="colBlock"></div></div>';
+            colNum += tpl;
+        }
+        mapColMark.innerHTML = '<div class="coltr">' + colNum + '</div>';
+        var rowNum = ' ';
+        for (var i = 0; i < 13; i++) {
+            var tpl = '<div class="rowtr"><div class="rowtd"  style="top:' + (i * 96/13 ) + 'vw;"><div class="rowtext">' + (' '+(i+offsetY)).slice(-2).replace(' ','&nbsp;') + '</div><div class="rowBlock"></div></div></div>';
+            rowNum += tpl;
+        }
+        mapRowMark.innerHTML = rowNum;
+    }
+    if(editor.isMobile){
+        buildMark_mobile(core.bigmap.offsetX/32,core.bigmap.offsetY/32);
+    } else {
+        buildMark(core.bigmap.offsetX/32,core.bigmap.offsetY/32);
+    }
+}
+
 editor.prototype.changeFloor = function (floorId, callback) {
    editor.currentFloorData.map = editor.map.map(function (v) {
        return v.map(function (v) {
@ -324,8 +383,13 @@ editor.prototype.listen = function () {
        return editor.loc;
    }//返回可用的组件内坐标

-    function locToPos(loc) {
-        editor.pos = {'x': ~~(loc.x / loc.size)+core.bigmap.offsetX/32, 'y': ~~(loc.y / loc.size)+core.bigmap.offsetY/32}
+    function locToPos(loc, addViewportOffset) {
+        var offsetX=0, offsetY=0;
+        if (addViewportOffset){
+            offsetX=core.bigmap.offsetX/32;
+            offsetY=core.bigmap.offsetY/32;
+        }
+        editor.pos = {'x': ~~(loc.x / loc.size)+offsetX, 'y': ~~(loc.y / loc.size)+offsetY}
        return editor.pos;
    }

@ -350,13 +414,13 @@ editor.prototype.listen = function () {
    eui.onmousedown = function (e) {
        if (e.button==2){
            var loc = eToLoc(e);
-            var pos = locToPos(loc);
+            var pos = locToPos(loc,true);
            editor.showMidMenu(e.clientX,e.clientY);
            return;
        }
        if (!selectBox.isSelected) {
            var loc = eToLoc(e);
-            var pos = locToPos(loc);
+            var pos = locToPos(loc,true);
            editor_mode.onmode('nextChange');
            editor_mode.onmode('loc');
            //editor_mode.loc();
@ -372,7 +436,7 @@ editor.prototype.listen = function () {
        e.stopPropagation();
        uc.clearRect(0, 0, 416, 416);
        var loc = eToLoc(e);
-        var pos = locToPos(loc);
+        var pos = locToPos(loc,true);
        stepPostfix = [];
        stepPostfix.push(pos);
        fillPos(pos);
@ -390,7 +454,7 @@ editor.prototype.listen = function () {
        mouseOutCheck = 2;
        e.stopPropagation();
        var loc = eToLoc(e);
-        var pos = locToPos(loc);
+        var pos = locToPos(loc,true);
        var pos0 = stepPostfix[stepPostfix.length - 1]
        var directionDistance = [pos.y - pos0.y, pos0.x - pos.x, pos0.y - pos.y, pos.x - pos0.x]
        var max = 0, index = 4;
@ -778,6 +842,23 @@ editor.prototype.listen = function () {
        editor.brushMod=brushMod2.value;
    }

+
+    editor.moveViewport=function(x,y){
+        core.bigmap.offsetX = core.clamp(core.bigmap.offsetX+32*x, 0, 32*core.bigmap.width-416);
+        core.bigmap.offsetY = core.clamp(core.bigmap.offsetY+32*y, 0, 32*core.bigmap.height-416);
+        core.control.updateViewport();
+        editor.buildMark();
+    }
+
+    var viewportButtons=document.getElementById('viewportButtons');
+    for(var ii=0,node;node=viewportButtons.children[ii];ii++){
+        (function(x,y){
+            node.onclick=function(){
+                editor.moveViewport(x,y);
+            }
+        })([-1,0,0,1][ii],[0,-1,1,0][ii]);
+    }
+
 }//绑定事件

 /* 
--- a/editor-mobile.html
+++ b/editor-mobile.html
@ -268,7 +268,12 @@
                    <option value="line">画线</option>
                    <option value="rectangle">画矩形</option>
                </select>
-                <br>
+                <div id="viewportButtons">
+                    <input type="button" value="←"/>
+                    <input type="button" value="↑"/>
+                    <input type="button" value="↓"/>
+                    <input type="button" value="→"/>
+                </div>
                <select id="selectFloor"></select>
                <input type="button" value="保存地图" id='saveFloor'/>
                <span id='mobileeditdata' style="display:none">
@ -387,50 +392,20 @@
    <div id="gif"></div>
    <div id="gif2"></div>
    <div id="curtain"></div>
-    <!-- <canvas class='gameCanvas' id='bg' width='416' height='416'></canvas> -->
-    <!-- <canvas class='gameCanvas' id='event' width='416' height='416'></canvas> -->
-    <canvas class='gameCanvas' id='hero' width='416' height='416'></canvas>
-    <!-- <canvas class='gameCanvas' id='event2' width='416' height='416'></canvas> -->
-    <canvas class='gameCanvas' id='fg' width='416' height='416'></canvas>
-    <canvas class='gameCanvas' id='animate' width='416' height='416'></canvas>
-    <canvas class='gameCanvas' id='weather' width='416' height='416'></canvas>
-    <canvas class='gameCanvas' id='ui' width='416' height='416'></canvas>
-    <canvas class='gameCanvas' id='data' width='416' height='416'>此浏览器不支持HTML5</canvas>
+    <div id="gameDraw">
+        <!-- <canvas class='gameCanvas' id='bg' width='416' height='416'></canvas> -->
+        <!-- <canvas class='gameCanvas' id='event' width='416' height='416'></canvas> -->
+        <canvas class='gameCanvas' id='hero' width='416' height='416'></canvas>
+        <!-- <canvas class='gameCanvas' id='event2' width='416' height='416'></canvas> -->
+        <canvas class='gameCanvas' id='fg' width='416' height='416'></canvas>
+        <canvas class='gameCanvas' id='animate' width='416' height='416'></canvas>
+        <canvas class='gameCanvas' id='weather' width='416' height='416'></canvas>
+        <canvas class='gameCanvas' id='route' width='416' height='416'></canvas>
+        <canvas class='gameCanvas' id='ui' width='416' height='416'></canvas>
+        <canvas class='gameCanvas' id='data' width='416' height='416'>此浏览器不支持HTML5</canvas>
+    </div>
 </div>
 <!-- */</script> -->
-<script>
-    // 生成定位编号
-    (function () {
-        var colNum = ' ';
-        for (var i = 0; i < 13; i++) {
-            var tpl = '<td>' + (' '+i).slice(-2).replace(' ','&nbsp;') + '<div class="colBlock" style="left:' + (i * 96/13 ) + 'vw;"></div></td>';
-            colNum += tpl;
-        }
-        arrColMark.innerHTML = '<tr>' + colNum + '</tr>';
-        //mapColMark.innerHTML = '<tr>' + colNum + '</tr>';
-        var rowNum = ' ';
-        for (var i = 0; i < 13; i++) {
-            var tpl = '<tr><td>' + (' '+i).slice(-2).replace(' ','&nbsp;') + '<div class="rowBlock" style="top:' + (i * 96/13 ) + 'vw;"></div></td></tr>';
-            rowNum += tpl;
-        }
-        arrRowMark.innerHTML = rowNum;
-        //mapRowMark.innerHTML = rowNum;
-    })();
-    (function () {
-        var colNum = ' ';
-        for (var i = 0; i < 13; i++) {
-            var tpl = '<div class="coltd" style="left:' + (i * 96/13 ) + 'vw;"><div class="coltext">' + (' '+i).slice(-2).replace(' ','&nbsp;') + '</div><div class="colBlock"></div></div>';
-            colNum += tpl;
-        }
-        mapColMark.innerHTML = '<div class="coltr">' + colNum + '</div>';
-        var rowNum = ' ';
-        for (var i = 0; i < 13; i++) {
-            var tpl = '<div class="rowtr"><div class="rowtd"  style="top:' + (i * 96/13 ) + 'vw;"><div class="rowtext">' + (' '+i).slice(-2).replace(' ','&nbsp;') + '</div><div class="rowBlock"></div></div></div>';
-            rowNum += tpl;
-        }
-        mapRowMark.innerHTML = rowNum;
-    })();
-</script>

 <!-- =========================================================== -->

--- a/editor.html
+++ b/editor.html
@ -5,11 +5,6 @@
    <link href="_server/css/editor.css" rel="stylesheet">
    <link href="_server/CodeMirror/codemirror.css" rel="stylesheet">
    <link href="_server/css/editor_mode.css" rel="stylesheet">
-    <style>
-        #mapEdit {
-            overflow: hidden;
-        }
-    </style>
 </head>
 <body>
 <script>
@ -248,9 +243,9 @@
            </span>
            <br>
            <div id="viewportButtons">
+                <input type="button" value="←"/>
                <input type="button" value="↑"/>
                <input type="button" value="↓"/>
-                <input type="button" value="←"/>
                <input type="button" value="→"/>
            </div>
            <br>
@ -396,25 +391,6 @@
    </div>
 </div>
 <!-- */</script> -->
-<script>
-    // 生成定位编号
-    buildMark_c3cac94e_bf59_4388_a8e3_a22bac1f4f6a = function (offsetX,offsetY) {
-        var colNum = ' ';
-        for (var i = 0; i < 13; i++) {
-            var tpl = '<td>' + (i+offsetX) + '<div class="colBlock" style="left:' + (i * 32 + 1) + 'px;"></div></td>';
-            colNum += tpl;
-        }
-        arrColMark.innerHTML = '<tr>' + colNum + '</tr>';
-        mapColMark.innerHTML = '<tr>' + colNum + '</tr>';
-        var rowNum = ' ';
-        for (var i = 0; i < 13; i++) {
-            var tpl = '<tr><td>' + (i+offsetY) + '<div class="rowBlock" style="top:' + (i * 32 + 1) + 'px;"></div></td></tr>';
-            rowNum += tpl;
-        }
-        arrRowMark.innerHTML = rowNum;
-        mapRowMark.innerHTML = rowNum;
-    }
-</script>

 <!-- =========================================================== -->

@ -448,24 +424,6 @@ if (location.protocol.indexOf("http")!=0) {
 </script>
 <script src='_server/editor.js'></script>
 <script>
-    editor.buildMark=buildMark_c3cac94e_bf59_4388_a8e3_a22bac1f4f6a;
-    delete(buildMark_c3cac94e_bf59_4388_a8e3_a22bac1f4f6a);
-    editor.moveViewport=function(x,y){
-        core.bigmap.offsetX = core.clamp(core.bigmap.offsetX+32*x, 0, 32*core.bigmap.width-416);
-        core.bigmap.offsetY = core.clamp(core.bigmap.offsetY+32*y, 0, 32*core.bigmap.height-416);
-        core.control.updateViewport()
-        editor.buildMark(core.bigmap.offsetX/32,core.bigmap.offsetY/32);
-    }
-
-    var viewportButtons=document.getElementById('viewportButtons');
-    for(var ii=0,node;node=viewportButtons.children[ii];ii++){
-        (function(x,y){
-            node.onclick=function(){
-                editor.moveViewport(x,y);
-            }
-        })([0,0,-1,1][ii],[-1,1,0,0][ii]);
-    }
-
    var useCompress = main.useCompress;
    main.useCompress = false;
    main.init('editor', function () {
@ -483,7 +441,6 @@ if (location.protocol.indexOf("http")!=0) {
            editor_blockly = editor_blockly();
            editor.useCompress = useCompress;
            delete(useCompress);
-            editor.moveViewport(0,0);
        });
    });