Merge pull request #191 from zhaouv/bigmap

Bigmap

_server/comment.js

@@ -245,6 +245,18 @@ comment_c456ea59_6018_45ef_8bcc_211a24c627dc =
                             "_type": "textarea",
                             "_data": "显示在状态栏中的层数"
                         },
+                        "width": {
+                            "_leaf": true,
+                            "_type": "textarea",
+                            "_range": "false",
+                            "_data": "地图x方向大小,这里不能更改,仅能在新建地图时设置,null视为13"
+                        },
+                        "height": {
+                            "_leaf": true,
+                            "_type": "textarea",
+                            "_range": "false",
+                            "_data": "地图y方向大小,这里不能更改,仅能在新建地图时设置,null视为13"
+                        },
                         "canFlyTo": {
                             "_leaf": true,
                             "_type": "checkbox",

_server/css/editor.css

@@ -89,6 +89,10 @@ body {
     height: 630px;
 }
 
+#mapEdit {
+    overflow: hidden;
+}
+
 .map {
     position: absolute;
     left: 20px;

_server/css/editor_mobile.css

@@ -82,6 +82,10 @@ body {
     position: absolute;
 }
 
+#mapEdit {
+    overflow: hidden;
+}
+
 .map {
     position: absolute;
     left: 4vw;

_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();
         });
@@ -162,9 +163,10 @@ editor.prototype.mapInit = function () {
     ec.clearRect(0, 0, core.bigmap.width*32, core.bigmap.height*32);
     document.getElementById('event2').getContext('2d').clearRect(0, 0, core.bigmap.width*32, core.bigmap.height*32);
     editor.map = [];
-    for (var y = 0; y < 13; y++) {
+    var sy=editor.currentFloorData.map.length,sy=editor.currentFloorData.map[0].length;
+    for (var y = 0; y < sy; y++) {
         editor.map[y] = [];
-        for (var x = 0; x < 13; x++) {
+        for (var x = 0; x < sx; x++) {
             editor.map[y][x] = 0;
         }
     }
@@ -201,7 +203,7 @@ editor.prototype.drawEventBlock = function () {
     for (var i=0;i<13;i++) {
         for (var j=0;j<13;j++) {
             var color=null;
-            var loc=i+","+j;
+            var loc=(i+core.bigmap.offsetX/32)+","+(j+core.bigmap.offsetY/32);
             if (core.isset(editor.currentFloorData.events[loc]))
                 color = '#FF0000';
             else if (core.isset(editor.currentFloorData.changeFloor[loc]))
@@ -254,8 +256,8 @@ editor.prototype.updateMap = function () {
     }
     // 绘制地图 start
     var eventCtx = document.getElementById('event').getContext("2d");
-    for (var y = 0; y < 13; y++)
+    for (var y = 0; y < editor.map.length; y++)
-        for (var x = 0; x < 13; x++) {
+        for (var x = 0; x < editor.map[0].length; x++) {
             var tileInfo = editor.map[y][x];
             if (false && isAutotile(tileInfo)) {
                 addIndexToAutotileInfo(x, y);
@@ -266,6 +268,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) {
@@ -308,7 +368,7 @@ editor.prototype.listen = function () {
 
     function fillPos(pos) {
         uc.fillStyle = '#' + ~~(Math.random() * 8) + ~~(Math.random() * 8) + ~~(Math.random() * 8);
-        uc.fillRect(pos.x * 32 + 12, pos.y * 32 + 12, 8, 8);
+        uc.fillRect(pos.x * 32 + 12 - core.bigmap.offsetX, pos.y * 32 + 12 - core.bigmap.offsetY, 8, 8);
     }//在格子内画一个随机色块
 
     function eToLoc(e) {
@@ -324,8 +384,13 @@ editor.prototype.listen = function () {
         return editor.loc;
     }//返回可用的组件内坐标
 
-    function locToPos(loc) {
+    function locToPos(loc, addViewportOffset) {
-        editor.pos = {'x': ~~(loc.x / loc.size), 'y': ~~(loc.y / loc.size)}
+        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 +415,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 +437,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 +455,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 +843,24 @@ 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();
+        editor.drawEventBlock();
+    }
+
+    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]);
+    }
+
 }//绑定事件
 
 /* 

_server/editor_file.js

@@ -695,19 +695,20 @@ editor_file = function (editor, callback) {
     }
 
     var formatMap = function (mapArr) {
-        //把13*13或者1*169数组格式化
+        //把二维数组格式化
         var formatArrStr = '';
         var arr = JSON.stringify(mapArr).replace(/\s+/g, '').split('],[');
-        for (var i = 0; i < 13; i++) {
+        var si=mapArr.length-1,sk=mapArr[0].length-1;
+        for (var i = 0; i <= si; i++) {
             var a = [];
             formatArrStr += '    [';
-            if (i == 0 || i == 12) a = arr[i].split(/\D+/).join(' ').trim().split(' ');
+            if (i == 0 || i == si) a = arr[i].split(/\D+/).join(' ').trim().split(' ');
             else a = arr[i].split(/\D+/);
-            for (var k = 0; k < 13; k++) {
+            for (var k = 0; k <= sk; k++) {
                 var num = parseInt(a[k]);
-                formatArrStr += Array(Math.max(4 - String(num).length, 0)).join(' ') + num + (k == 12 ? '' : ',');
+                formatArrStr += Array(Math.max(4 - String(num).length, 0)).join(' ') + num + (k == sk ? '' : ',');
             }
-            formatArrStr += ']' + (i == 12 ? '' : ',\n');
+            formatArrStr += ']' + (i == si ? '' : ',\n');
         }
         return formatArrStr;
     }

_server/vm.js

@@ -24,7 +24,14 @@ document.body.onmousedown = function (e) {
         }
     });
 
-    if (clickpath.indexOf('edit') === -1 && clickpath.indexOf('tip') === -1 && clickpath.indexOf('brushMod') === -1 && clickpath.indexOf('brushMod2') === -1) {
+    var unselect=true;
+    for(var ii=0,thisId;thisId=['edit','tip','brushMod','brushMod2','viewportButtons'][ii];ii++){
+        if (clickpath.indexOf(thisId) !== -1){
+            unselect=false;
+            break;
+        }
+    }
+    if (unselect) {
         if (clickpath.indexOf('eui') === -1) {
             if (selectBox.isSelected) {
                 editor_mode.onmode('');
@@ -60,11 +67,12 @@ var exportMap = new Vue({
     methods: {
         exportMap: function () {
             editor.updateMap();
+            var sx=editor.map.length-1,sy=editor.map[0].length-1;
 
             var filestr = '';
-            for (var yy = 0; yy < 13; yy++) {
+            for (var yy = 0; yy <= sy; yy++) {
                 filestr += '['
-                for (var xx = 0; xx < 13; xx++) {
+                for (var xx = 0; xx <= sx; xx++) {
                     var mapxy = editor.map[yy][xx];
                     if (typeof(mapxy) == typeof({})) {
                         if ('idnum' in mapxy) mapxy = mapxy.idnum;
@@ -79,10 +87,10 @@ var exportMap = new Vue({
                     }
                     mapxy = String(mapxy);
                     mapxy = Array(Math.max(4 - mapxy.length, 0)).join(' ') + mapxy;
-                    filestr += mapxy + (xx == 12 ? '' : ',')
+                    filestr += mapxy + (xx == sx ? '' : ',')
                 }
 
-                filestr += ']' + (yy == 12 ? '' : ',\n');
+                filestr += ']' + (yy == sy ? '' : ',\n');
             }
             pout.value = filestr;
             editArea.mapArr = filestr;
@@ -97,7 +105,7 @@ var editArea = new Vue({
     data: {
         mapArr: '',
         errors: [ // 编号1,2,3,4
-            "格式错误！请使用正确格式(13*13数组，如不清楚，可先点击生成地图查看正确格式)",
+            "格式错误！请使用正确格式(width*height数组，如不清楚，可先点击生成地图查看正确格式)",
             "当前有未定义ID（在地图区域显示红块），请修改ID或者到icons.js和maps.js中进行定义！",
             "ID越界（在地图区域显示红块），当前编辑器暂时支持编号小于400，请修改编号！",
             // "发生错误！",
@@ -138,8 +146,9 @@ var editArea = new Vue({
 
             // var mapArray = that.mapArr.split(/\D+/).join(' ').trim().split(' ');
             var mapArray = JSON.parse('[' + that.mapArr + ']');
-            for (var y = 0; y < 13; y++)
+            var sy=editor.map.length,sx=editor.map[0].length;
-                for (var x = 0; x < 13; x++) {
+            for (var y = 0; y < sy; y++)
+                for (var x = 0; x < sx; x++) {
                     var num = mapArray[y][x];
                     if (num == 0)
                         editor.map[y][x] = 0;
@@ -159,25 +168,26 @@ var editArea = new Vue({
             var formatArrStr = '';
             var that = this;
             clearTimeout(that.formatTimer);
-            if (this.mapArr.split(/\D+/).join(' ').trim().split(' ').length != 169) return false;
+            var si=this.mapArr.length,sk=this.mapArr[0].length;
+            if (this.mapArr.split(/\D+/).join(' ').trim().split(' ').length != si*sk) return false;
             var arr = this.mapArr.replace(/\s+/g, '').split('],[');
 
-            if (arr.length != 13) return;
+            if (arr.length != si) return;
-            for (var i = 0; i < 13; i++) {
+            for (var i = 0; i < si; i++) {
                 var a = [];
                 formatArrStr += '[';
-                if (i == 0 || i == 12) a = arr[i].split(/\D+/).join(' ').trim().split(' ');
+                if (i == 0 || i == si-1) a = arr[i].split(/\D+/).join(' ').trim().split(' ');
                 else a = arr[i].split(/\D+/);
-                if (a.length != 13) {
+                if (a.length != sk) {
                     formatArrStr = '';
                     return;
                 }
 
-                for (var k = 0; k < 13; k++) {
+                for (var k = 0; k < sk; k++) {
                     var num = parseInt(a[k]);
-                    formatArrStr += Array(Math.max(4 - String(num).length, 0)).join(' ') + num + (k == 12 ? '' : ',');
+                    formatArrStr += Array(Math.max(4 - String(num).length, 0)).join(' ') + num + (k == sk-1 ? '' : ',');
                 }
-                formatArrStr += ']' + (i == 12 ? '' : ',\n');
+                formatArrStr += ']' + (i == si-1 ? '' : ',\n');
             }
             return formatArrStr;
         }

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> -->
+    <div id="gameDraw">
-    <!-- <canvas class='gameCanvas' id='event' width='416' height='416'></canvas> -->
+        <!-- <canvas class='gameCanvas' id='bg' width='416' height='416'></canvas> -->
-    <canvas class='gameCanvas' id='hero' width='416' height='416'></canvas>
+        <!-- <canvas class='gameCanvas' id='event' width='416' height='416'></canvas> -->
-    <!-- <canvas class='gameCanvas' id='event2' width='416' height='416'></canvas> -->
+        <canvas class='gameCanvas' id='hero' width='416' height='416'></canvas>
-    <canvas class='gameCanvas' id='fg' width='416' height='416'></canvas>
+        <!-- <canvas class='gameCanvas' id='event2' width='416' height='416'></canvas> -->
-    <canvas class='gameCanvas' id='animate' width='416' height='416'></canvas>
+        <canvas class='gameCanvas' id='fg' width='416' height='416'></canvas>
-    <canvas class='gameCanvas' id='weather' width='416' height='416'></canvas>
+        <canvas class='gameCanvas' id='animate' width='416' height='416'></canvas>
-    <canvas class='gameCanvas' id='ui' width='416' height='416'></canvas>
+        <canvas class='gameCanvas' id='weather' width='416' height='416'></canvas>
-    <canvas class='gameCanvas' id='data' width='416' height='416'>此浏览器不支持HTML5</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>
 
 <!-- =========================================================== -->
 

editor.html

@@ -241,7 +241,14 @@
             <input type="radio" id="brushMod" name="brushMod" value="line" checked="checked" />画线
             <input type="radio" id="brushMod2" name="brushMod" value="rectangle" />画矩形
             </span>
-            <br><br><br>
+            <br>
+            <div id="viewportButtons">
+                <input type="button" value="←"/>
+                <input type="button" value="↑"/>
+                <input type="button" value="↓"/>
+                <input type="button" value="→"/>
+            </div>
+            <br>
             <select id="selectFloor"></select>
             <input type="button" value="保存地图" id='saveFloor'/>
             <!--  -->
@@ -370,36 +377,20 @@
     <div id="gif"></div>
     <div id="gif2"></div>
     <div id="curtain"></div>
-    <!-- <canvas class='gameCanvas' id='bg' width='416' height='416'></canvas> -->
+    <div id="gameDraw">
-    <!-- <canvas class='gameCanvas' id='event' width='416' height='416'></canvas> -->
+        <!-- <canvas class='gameCanvas' id='bg' width='416' height='416'></canvas> -->
-    <canvas class='gameCanvas' id='hero' width='416' height='416'></canvas>
+        <!-- <canvas class='gameCanvas' id='event' width='416' height='416'></canvas> -->
-    <!-- <canvas class='gameCanvas' id='event2' width='416' height='416'></canvas> -->
+        <canvas class='gameCanvas' id='hero' width='416' height='416'></canvas>
-    <canvas class='gameCanvas' id='fg' width='416' height='416'></canvas>
+        <!-- <canvas class='gameCanvas' id='event2' width='416' height='416'></canvas> -->
-    <canvas class='gameCanvas' id='animate' width='416' height='416'></canvas>
+        <canvas class='gameCanvas' id='fg' width='416' height='416'></canvas>
-    <canvas class='gameCanvas' id='weather' width='416' height='416'></canvas>
+        <canvas class='gameCanvas' id='animate' width='416' height='416'></canvas>
-    <canvas class='gameCanvas' id='ui' width='416' height='416'></canvas>
+        <canvas class='gameCanvas' id='weather' width='416' height='416'></canvas>
-    <canvas class='gameCanvas' id='data' width='416' height='416'>此浏览器不支持HTML5</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 + '<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 + '<div class="rowBlock" style="top:' + (i * 32 + 1) + 'px;"></div></td></tr>';
-            rowNum += tpl;
-        }
-        arrRowMark.innerHTML = rowNum;
-        mapRowMark.innerHTML = rowNum;
-    })();
-</script>
 
 <!-- =========================================================== -->