295 lines
7.3 KiB
JavaScript
295 lines
7.3 KiB
JavaScript
// vue 相关处理
|
||
|
||
document.body.onmousedown = function(e){
|
||
selectBox.isSelected = false;
|
||
editor.info = {};
|
||
}
|
||
iconLib.onmousedown = function(e){
|
||
e.stopPropagation();
|
||
}
|
||
var exportM = new Vue({
|
||
el: '#exportM',
|
||
|
||
methods: {
|
||
exportMap: function(){
|
||
editor.updateMap();
|
||
if(editArea.error) {
|
||
tip.whichShow = 3;
|
||
|
||
return;
|
||
}
|
||
var filestr='';
|
||
for (var yy = 0; yy < 13; yy++){
|
||
filestr+='['
|
||
for (var xx = 0; xx < 13; xx++) {
|
||
var mapxy=editor.map[yy][xx];
|
||
if(typeof(mapxy)==typeof({})){
|
||
if ('idnum' in mapxy)mapxy=mapxy.idnum;
|
||
else {
|
||
// mapxy='!!?';
|
||
tip.whichShow = 3;
|
||
return;
|
||
}
|
||
}else if(typeof(mapxy)=='undefined'){
|
||
tip.whichShow = 3;
|
||
return;
|
||
}
|
||
mapxy=String(mapxy);
|
||
mapxy=Array(Math.max(4-mapxy.length,0)).join(' ')+mapxy;
|
||
filestr+=mapxy+(xx==12?'':',')
|
||
}
|
||
|
||
filestr += ']'+(yy==12?'':',\n');
|
||
}
|
||
pout.value = filestr;
|
||
|
||
tip.whichShow = 2;
|
||
}
|
||
}
|
||
})
|
||
var editArea = new Vue({
|
||
el: '#editArea',
|
||
data: {
|
||
mapArr: '',
|
||
errors: [ // 编号1,2,3,4
|
||
"格式错误！请使用正确格式(13*13数组，如不清楚，可先点击生成地图查看正确格式)",
|
||
"当前有未定义ID（在地图区域显示红块），请修改ID或者到icons.js和maps.js中进行定义！",
|
||
"ID越界（在地图区域显示红块），当前编辑器暂时支持编号小于400，请修改编号！",
|
||
// "发生错误！",
|
||
],
|
||
error: 0,
|
||
formatTimer: null,
|
||
},
|
||
watch: {
|
||
mapArr: function (val, oldval) {
|
||
var that = this;
|
||
if(val=='') return;
|
||
if(that.formatArr()){
|
||
that.error = 0;
|
||
clearTimeout(that.formatTimer);
|
||
setTimeout(function(){
|
||
that.drawMap();
|
||
tip.whichShow = 8
|
||
}, 1000);
|
||
that.formatTimer = setTimeout(function(){
|
||
pout.value = that.formatArr();
|
||
}, 5000); //5s后再格式化，不然光标跳到最后很烦
|
||
}else{
|
||
that.error = 1;
|
||
}
|
||
},
|
||
error: function(){
|
||
// console.log(editArea.mapArr);
|
||
}
|
||
},
|
||
methods: {
|
||
drawMap: function(){
|
||
var that = this;
|
||
|
||
// var mapArray = that.mapArr.split(/\D+/).join(' ').trim().split(' ');
|
||
var mapArray = JSON.parse('['+that.mapArr+']');
|
||
for(var y=0; y<13; y++)
|
||
for(var x=0; x<13; x++){
|
||
var num = mapArray[y][x];
|
||
if(num == 0 )
|
||
editor.map[y][x] = 0;
|
||
else if(num >= 400){
|
||
that.error = 3;
|
||
editor.map[y][x] = undefined;
|
||
}else if(typeof(editor.indexs[num][0]) == 'undefined'){
|
||
that.error = 2;
|
||
editor.map[y][x] = undefined;
|
||
}else editor.map[y][x] = editor.ids[[editor.indexs[num][0]]];
|
||
}
|
||
|
||
editor.updateMap();
|
||
|
||
},
|
||
formatArr: function(){
|
||
var formatArrStr = '';
|
||
|
||
if(this.mapArr.split(/\D+/).join(' ').trim().split(' ').length != 169) return false;
|
||
var arr = this.mapArr.replace(/\s+/g, '').split('],[');
|
||
|
||
if(arr.length != 13) return ;
|
||
for(var i =0; i<13; i++){
|
||
var a = [];
|
||
formatArrStr +='[';
|
||
if(i==0||i==12) a = arr[i].split(/\D+/).join(' ').trim().split(' ');
|
||
else a = arr[i].split(/\D+/);
|
||
if(a.length != 13){
|
||
formatArrStr = '';
|
||
return ;
|
||
}
|
||
|
||
for(var k=0; k<13; k++){
|
||
var num = parseInt(a[k]);
|
||
formatArrStr += Array(Math.max(4-String(num).length,0)).join(' ')+num+(k==12?'':',');
|
||
}
|
||
formatArrStr += ']'+(i==12?'':',\n');
|
||
}
|
||
|
||
return formatArrStr;
|
||
}
|
||
}
|
||
});
|
||
var editTip = new Vue({
|
||
el: '#editTip',
|
||
data: {
|
||
err: ''
|
||
},
|
||
methods: {
|
||
copyMap: function(){
|
||
|
||
tip.whichShow = 0;
|
||
if(pout.value.trim() != ''){
|
||
if(editArea.error) {
|
||
this.err = editArea.errors[editArea.error-1];
|
||
tip.whichShow = 5
|
||
return;
|
||
}
|
||
try{
|
||
pout.select();
|
||
document.execCommand("Copy");
|
||
tip.whichShow = 6;
|
||
}catch(e){
|
||
this.err= e;
|
||
tip.whichShow = 5;
|
||
}
|
||
}else{
|
||
tip.whichShow = 7;
|
||
}
|
||
}
|
||
},
|
||
})
|
||
var clear = new Vue({
|
||
el: '#clear',
|
||
|
||
methods: {
|
||
clearMap: function(){
|
||
editor.mapInit();
|
||
clearTimeout(editArea.formatTimer);
|
||
clearTimeout(tip.timer);
|
||
pout.value = '';
|
||
editArea.mapArr = '';
|
||
tip.whichShow = 4;
|
||
editArea.error = 0;
|
||
}
|
||
}
|
||
})
|
||
var tip = new Vue({
|
||
el: '#tip',
|
||
data: {
|
||
infos: {},
|
||
hasId: true,
|
||
isAutotile: false,
|
||
isSelectedBlock: false,
|
||
geneMapSuccess: false,
|
||
timer: null,
|
||
msgs: [ //分别编号1,2,3,4,5,6,7,8；奇数警告，偶数成功
|
||
"当前未选择任何图块，请先在右边选择要画的图块!",
|
||
"生成地图成功！可点击复制按钮复制地图数组到剪切板",
|
||
"生成失败! 地图中有未定义的图块，建议先用其他有效图块覆盖或点击清除地图！",
|
||
"地图清除成功!",
|
||
"复制失败！",
|
||
"复制成功！可直接粘贴到楼层文件的地图数组中。",
|
||
"复制失败！当前还没有数据",
|
||
"修改成功！可点击复制按钮复制地图数组到剪切板"
|
||
],
|
||
mapMsg: '',
|
||
whichShow: 0,
|
||
},
|
||
watch: {
|
||
infos: {
|
||
handler: function(val, oldval){
|
||
if(typeof(val) != 'undefined'){
|
||
this.infos = val;
|
||
if('id' in val){
|
||
this.hasId = true;
|
||
}else{
|
||
this.hasId = false;
|
||
}
|
||
this.isAutotile = false;
|
||
if(this.infos.images == "autotile" && this.hasId) this.isAutotile = true;
|
||
}
|
||
},
|
||
deep: true
|
||
},
|
||
|
||
whichShow: function(){
|
||
var that = this;
|
||
that.mapMsg = '';
|
||
that.msgs[4] = "复制失败！"+editTip.err;
|
||
clearTimeout(that.timer);
|
||
if(that.whichShow){
|
||
that.mapMsg = that.msgs[that.whichShow-1];
|
||
that.timer = setTimeout(function() {
|
||
if(!(that.whichShow%2))
|
||
that.whichShow = 0;
|
||
}, 5000); //5秒后自动清除success，warn不清除
|
||
}
|
||
}
|
||
}
|
||
})
|
||
|
||
var selectBox = new Vue({
|
||
el: '#selectBox',
|
||
data: {
|
||
isSelected: false
|
||
},
|
||
watch: {
|
||
isSelected: function(){
|
||
tip.isSelectedBlock = this.isSelected;
|
||
tip.whichShow = 0;
|
||
clearTimeout(tip.timer);
|
||
}
|
||
}
|
||
})
|
||
|
||
var editFile4map = new Vue({
|
||
el: '#editFile4map',
|
||
data: {
|
||
selected: 'untitle',
|
||
options:[],
|
||
filelist: [],
|
||
},
|
||
watch: {
|
||
filelist: function(val){
|
||
if(val){
|
||
var oval = val.length ? JSON.parse(JSON.stringify(val)) : [];
|
||
for(var i=0; i<oval.length; i++)
|
||
this.$set("options", i, oval[i]);
|
||
}
|
||
},
|
||
}
|
||
})
|
||
var modSeletNav = new Vue({
|
||
el: '#modSeletNav',
|
||
data: {
|
||
currTabnum: 1,
|
||
tabs:[
|
||
{num: 1, title: "地图数组"},
|
||
{num: 2, title: "对象属性"},
|
||
{num: 3, title: "选点事件"},
|
||
{num: 4, title: "楼层事件"},
|
||
]
|
||
},
|
||
watch: {
|
||
currTabnum(val){
|
||
this.$emit('on-change', val)
|
||
this.$emit('input', val)
|
||
}
|
||
},
|
||
methods: {
|
||
selectTab(num){
|
||
this.currTabnum = num;
|
||
tabSelection.showTab = num;
|
||
}
|
||
}
|
||
})
|
||
var tabSelection = new Vue({
|
||
el: '#tabSelection',
|
||
data: {
|
||
showTab: 1,
|
||
},
|
||
}) |