This commit is contained in:
YouWei Zhao 2019-03-19 23:17:47 -04:00
parent a1e144f2da
commit 49d497b1a8
3 changed files with 98 additions and 94 deletions

View File

@ -29,56 +29,63 @@ exportMap.onclick=function(){
filestr += ']' + (yy == sy ? '' : ',\n'); filestr += ']' + (yy == sy ? '' : ',\n');
} }
pout.value = filestr; pout.value = filestr;
mapEditArea.mapArr = filestr; mapEditArea.mapArr(filestr);
exportMap.isExport = true; exportMap.isExport = true;
mapEditArea.error = 0; mapEditArea.error(0);
tip.whichShow = 2; tip.whichShow = 2;
} }
var mapEditArea = new Vue({ var mapEditArea = document.getElementById('mapEditArea')
el: '#mapEditArea', mapEditArea.errors=[ // 编号1,2
data: {
mapArr: '',
errors: [ // 编号1,2,3,4
"格式错误!请使用正确格式(请使用地图生成器进行生成,且需要和本地图宽高完全一致)", "格式错误!请使用正确格式(请使用地图生成器进行生成,且需要和本地图宽高完全一致)",
"当前有未定义ID在地图区域显示红块请修改ID或者到icons.js和maps.js中进行定义", "当前有未定义ID在地图区域显示红块请修改ID或者到icons.js和maps.js中进行定义"
"ID越界在地图区域显示红块当前编辑器暂时支持编号小于400请修改编号", ]
// "发生错误!", mapEditArea.formatTimer=null
], mapEditArea._mapArr=''
error: 0, mapEditArea.mapArr=function(value){
formatTimer: null, if(value!=null){
}, var val=value
watch: { var oldval=mapEditArea._mapArr
mapArr: function (val, oldval) { if (val==oldval) return;
if (val == '') return;
if (exportMap.isExport) { if (exportMap.isExport) {
exportMap.isExport = false; exportMap.isExport = false;
return; return;
} }
if (mapEditArea.formatArr()) { if (mapEditArea.formatArr()) {
mapEditArea.error = 0; mapEditArea.error(0);
setTimeout(function () { setTimeout(function () {
mapEditArea.mapArr = mapEditArea.formatArr(); if (mapEditArea.formatArr())mapEditArea.mapArr(mapEditArea.formatArr());
mapEditArea.drawMap(); mapEditArea.drawMap();
tip.whichShow = 8 tip.whichShow = 8
}, 1000); }, 1000);
clearTimeout(mapEditArea.formatTimer);
mapEditArea.formatTimer = setTimeout(function () { mapEditArea.formatTimer = setTimeout(function () {
pout.value = mapEditArea.formatArr(); pout.value = mapEditArea.formatArr();
}, 5000); //5s后再格式化不然光标跳到最后很烦 }, 5000); //5s后再格式化不然光标跳到最后很烦
} else { } else {
mapEditArea.error = 1; mapEditArea.error(1);
} }
},
error: function () { mapEditArea._mapArr=value
// console.log(mapEditArea.mapArr);
if (mapEditArea.error>0)
printe(mapEditArea.errors[mapEditArea.error-1])
} }
}, return mapEditArea._mapArr
methods: { }
drawMap: function () { pout.oninput=function(){
// var mapArray = mapEditArea.mapArr.split(/\D+/).join(' ').trim().split(' '); mapEditArea.mapArr(pout.value)
var mapArray = JSON.parse('[' + mapEditArea.mapArr + ']'); }
mapEditArea._error=0
mapEditArea.error=function(value){
if(value!=null){
mapEditArea._error=value
if (value>0)
printe(mapEditArea.errors[value-1])
}
return mapEditArea._error
}
mapEditArea.drawMap= function () {
// var mapArray = mapEditArea.mapArr().split(/\D+/).join(' ').trim().split(' ');
var mapArray = JSON.parse('[' + mapEditArea.mapArr() + ']');
var sy=editor.map.length,sx=editor.map[0].length; var sy=editor.map.length,sx=editor.map[0].length;
for (var y = 0; y < sy; y++) for (var y = 0; y < sy; y++)
for (var x = 0; x < sx; x++) { for (var x = 0; x < sx; x++) {
@ -86,20 +93,21 @@ var mapEditArea = new Vue({
if (num == 0) if (num == 0)
editor.map[y][x] = 0; editor.map[y][x] = 0;
else if (typeof(editor.indexs[num][0]) == 'undefined') { else if (typeof(editor.indexs[num][0]) == 'undefined') {
mapEditArea.error = 2; mapEditArea.error(2);
editor.map[y][x] = undefined; editor.map[y][x] = undefined;
} else editor.map[y][x] = editor.ids[[editor.indexs[num][0]]]; } else editor.map[y][x] = editor.ids[[editor.indexs[num][0]]];
} }
editor.updateMap(); editor.updateMap();
}, }
formatArr: function () { mapEditArea.formatArr= function () {
var formatArrStr = ''; var formatArrStr = '';
clearTimeout(mapEditArea.formatTimer); console.log(1)
var si=editor.map.length,sk=editor.map[0].length; var si=editor.map.length,sk=editor.map[0].length;
if (mapEditArea.mapArr.split(/\D+/).join(' ').trim().split(' ').length != si*sk) return false; if (mapEditArea.mapArr().split(/\D+/).join(' ').trim().split(' ').length != si*sk) return false;
var arr = mapEditArea.mapArr.replace(/\s+/g, '').split('],['); var arr = mapEditArea.mapArr().replace(/\s+/g, '').split('],[');
if (arr.length != si) return; if (arr.length != si) return;
for (var i = 0; i < si; i++) { for (var i = 0; i < si; i++) {
@ -120,15 +128,13 @@ var mapEditArea = new Vue({
} }
return formatArrStr; return formatArrStr;
} }
}
});
var copyMap=document.getElementById('copyMap') var copyMap=document.getElementById('copyMap')
copyMap.err='' copyMap.err=''
copyMap.onclick=function(){ copyMap.onclick=function(){
tip.whichShow = 0; tip.whichShow = 0;
if (pout.value.trim() != '') { if (pout.value.trim() != '') {
if (mapEditArea.error) { if (mapEditArea.error()) {
copyMap.err = mapEditArea.errors[mapEditArea.error - 1]; copyMap.err = mapEditArea.errors[mapEditArea.error() - 1];
tip.whichShow = 5 tip.whichShow = 5
return; return;
} }
@ -160,9 +166,9 @@ clearMapButton.onclick=function () {
clearTimeout(mapEditArea.formatTimer); clearTimeout(mapEditArea.formatTimer);
clearTimeout(tip.timer); clearTimeout(tip.timer);
pout.value = ''; pout.value = '';
mapEditArea.mapArr = ''; mapEditArea.mapArr('');
tip.whichShow = 4; tip.whichShow = 4;
mapEditArea.error = 0; mapEditArea.error(0);
} }
var deleteMap=document.getElementById('deleteMap') var deleteMap=document.getElementById('deleteMap')
deleteMap.onclick=function () { deleteMap.onclick=function () {

View File

@ -18,9 +18,8 @@
<div id="arrEditor"> <div id="arrEditor">
<table class="col" id='arrColMark'></table> <table class="col" id='arrColMark'></table>
<table class="row" id='arrRowMark'></table> <table class="row" id='arrRowMark'></table>
<div id="mapEditArea" v-cloak> <div id="mapEditArea">
<textarea cols="10" rows="10" id="pout" v-model="mapArr"></textarea> <textarea cols="10" rows="10" id="pout"></textarea>
<!-- <p class="warnText" v-if="error">{{ errors[error-1] }}</p> -->
</div> </div>
<div id="editTip"> <div id="editTip">
<input id='newFileName' placeholder="新楼层id" style="width: 100px"/> <input id='newFileName' placeholder="新楼层id" style="width: 100px"/>

View File

@ -17,9 +17,8 @@
<div id="arrEditor"> <div id="arrEditor">
<table class="col" id='arrColMark'></table> <table class="col" id='arrColMark'></table>
<table class="row" id='arrRowMark'></table> <table class="row" id='arrRowMark'></table>
<div id="mapEditArea" v-cloak> <div id="mapEditArea">
<textarea cols="10" rows="10" id="pout" v-model="mapArr"></textarea> <textarea cols="10" rows="10" id="pout"></textarea>
<!-- <p class="warnText" v-if="error">{{ errors[error-1] }}</p> -->
</div> </div>
<div id="editTip"> <div id="editTip">
<input type="button" value="新建空白地图" id='newMap'/> <input type="button" value="新建空白地图" id='newMap'/>