update drawMapGui
This commit is contained in:
echo
parent
56f50adc40
commit
bc789fc0df
6
_server/vendor/vue.min.js
vendored
Normal file
6
_server/vendor/vue.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
637
drawMapGUI.html
637
drawMapGUI.html
@ -4,67 +4,161 @@
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
html,body,div,img{margin:0;padding:0;}
|
||||
|
||||
body{
|
||||
font-family:Roboto,Helvetica,Arial,sans-serif;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
.main {
|
||||
max-width: 100%;
|
||||
min-height: 500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#left, #mid, #right{
|
||||
border-radius: 2px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
|
||||
}
|
||||
#left{
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
left: 5px;
|
||||
top: 10px;
|
||||
width: 416px;
|
||||
width: 435px;
|
||||
height: 400px;
|
||||
border: 1px solid rgb(238, 13, 13);
|
||||
/* border: 1px solid rgb(238, 13, 13); */
|
||||
}
|
||||
#left #pout{
|
||||
|
||||
#editArea{
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
/* padding: 10px 5px; */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#pout{
|
||||
display: block;
|
||||
width: 410px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
margin-left: 22px;
|
||||
margin-top: 21px;
|
||||
line-height: 20px;
|
||||
}
|
||||
#editTip{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
bottom:10px;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
}
|
||||
#editArea p{
|
||||
margin: 10px;
|
||||
display: block;
|
||||
width: 70%;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
}
|
||||
#editTip .btn{
|
||||
float: right;
|
||||
margin-right: 20px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
#mid{
|
||||
position: absolute;
|
||||
left: 448px;
|
||||
top: 0;
|
||||
width: 416px;
|
||||
height: 600px;
|
||||
border: 1px solid rgb(238, 13, 13);
|
||||
height: 620px;
|
||||
/* border: 1px solid rgb(238, 13, 13); */
|
||||
}
|
||||
#mid .tools{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
width: 400px;
|
||||
height: 195px;
|
||||
left: 0;
|
||||
top: 448px;
|
||||
top: 425px;
|
||||
border-top: 1px solid #ccc;
|
||||
padding: 10px 5px;
|
||||
margin-left: 8px;;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.btn{
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
margin: 10px;
|
||||
#tip{
|
||||
float: right;
|
||||
width: 50%;
|
||||
height: 95%;
|
||||
padding: 10px;
|
||||
margin-right: 5px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 2px;
|
||||
font-size: 15px;
|
||||
}
|
||||
.files {
|
||||
width: 50%;
|
||||
height: 120px;
|
||||
/* padding: 10px; */
|
||||
margin-top: 15px;
|
||||
}
|
||||
.files .input{
|
||||
display: block;
|
||||
max-width: 150px;
|
||||
height: 20px;
|
||||
padding: 6px 12px;
|
||||
font-size: 14px;
|
||||
margin-top: 10px;
|
||||
color: #555;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 3px;
|
||||
/* background-color: green; */
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
|
||||
}
|
||||
.input{
|
||||
width: 100px;
|
||||
margin: 10px;
|
||||
#printOut{
|
||||
margin-top: 10px;
|
||||
height: 20px;
|
||||
|
||||
}
|
||||
.btn {
|
||||
width: 80px;
|
||||
border-radius: 2px;
|
||||
line-height: 30px;
|
||||
margin: 0;
|
||||
min-width: 50px;
|
||||
padding: 0 5px;
|
||||
display: inline-block;
|
||||
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
border: 0;
|
||||
background: rgba(158,158,158,.2);
|
||||
box-shadow: 0 1px 1px 0 rgba(0,0,0,.14), 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 3px 0 rgba(0,0,0,.12);
|
||||
color: #fff;
|
||||
background-color: #26A69A;
|
||||
}
|
||||
.btn:hover {
|
||||
background-color: #009688;
|
||||
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
|
||||
}
|
||||
#right{
|
||||
position: absolute;
|
||||
left: 896px;
|
||||
top: 0;
|
||||
width: 450px;
|
||||
height: 600px;
|
||||
border: 1px solid rgb(238, 13, 13);
|
||||
height: 620px;
|
||||
/* border: 1px solid rgb(238, 13, 13); */
|
||||
overflow:auto;
|
||||
}
|
||||
.gameCanvas {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#dataSelection{
|
||||
position: absolute;
|
||||
top:0;
|
||||
@ -74,19 +168,76 @@
|
||||
|
||||
margin:-2px 0 0 -2px;
|
||||
padding:0;
|
||||
|
||||
/* display: none; */
|
||||
|
||||
background-color:rgba(255, 255, 255, 0.0);
|
||||
border: 2px solid rgb(87, 198, 232);
|
||||
box-shadow: 0px 0px 2px rgb(87, 198, 232);
|
||||
}
|
||||
.warnText{
|
||||
color: #D50000;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
}
|
||||
.infoText{
|
||||
color: #2196F3;
|
||||
}
|
||||
.successText{
|
||||
color: #00897B
|
||||
}
|
||||
|
||||
table, td {
|
||||
border: 1px solid #fff;
|
||||
color: #fff;
|
||||
}
|
||||
table.col{
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 36px;
|
||||
width: 385px;
|
||||
height: 16px;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table.col td{
|
||||
width: 16px;
|
||||
background-color: #4DB6AC;
|
||||
}
|
||||
|
||||
table.row{
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
left: 2px;
|
||||
width: 16px;
|
||||
height: 262px;
|
||||
font-size: 12px;
|
||||
text-align: right;
|
||||
vertical-align:middle;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table.row td{
|
||||
background-color: #795548;
|
||||
}
|
||||
|
||||
/* for vue dom */
|
||||
[v-cloak] {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="main">
|
||||
<div id="left">
|
||||
|
||||
<p id='pout'>可以在console中通过printf(str)来改变这里的值</p>
|
||||
<div id="editArea" v-cloak>
|
||||
<table class="col" id='arrColMark'></table>
|
||||
<table class="row" id='arrRowMark'></table>
|
||||
<textarea cols="10" rows="10" id="pout" v-model="mapArr"></textarea>
|
||||
<p class="warnText" v-if="error">{{ errors[error-1] }}</p>
|
||||
</div>
|
||||
<div id="editTip" v-cloak>
|
||||
<input class='btn' type="button" value="copyMap" v-on:click="copyMap"/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="mid">
|
||||
@ -97,16 +248,36 @@
|
||||
|
||||
</div>
|
||||
<div class="tools">
|
||||
<input class='btn' type="button" value="exportMap" onclick="exportMap()" style="top:600px;left:50px"/>
|
||||
<input class='btn' type="button" value="read" onclick="readUTF8file(pin.value)" style="top:600px;left:150px"/>
|
||||
<input class='btn' type="button" value="write" onclick="writeUTF8file(pin.value,pout.innerText)" style="top:600px;left:200px"/>
|
||||
<div id="tip" v-cloak >
|
||||
<div v-if="isSelectedBlock" >
|
||||
<p v-if="hasId">图块编号：<span class="infoText">{{ infos['idnum'] }}</span></p>
|
||||
<p v-if="hasId">图块ID：<span class="infoText">{{ infos['id'] }}</span></p>
|
||||
<p v-else class="warnText">该图块无对应的数字或ID存在，请先前往icons.js和maps.js中进行定义！</p>
|
||||
<p>图块所在素材：<span class="infoText">{{ infos['images'] }}</span></p>
|
||||
<p>图块索引：<span class="infoText">{{ infos['y'] }}</span></p>
|
||||
</div>
|
||||
<div v-else>
|
||||
<p v-if="whichShow" v-bind:class="[ (whichShow%2) ? 'warnText' : 'successText']" >{{ mapMsg }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<input class='btn' id='clear' type="button" value="clearMap" v-on:click="clearMap"/>
|
||||
<input class='btn' type="button" value="exportMap" id="exportM" v-on:click="exportMap"/>
|
||||
|
||||
<input class='input' id='pin' style='top:630px;left:12px;width:200px;height:20px' value="文件名"/>
|
||||
<div class="files">
|
||||
<input class='btn' type="button" value="read" onclick="readUTF8file(pin.value)" />
|
||||
<input class='btn' type="button" value="write" onclick="writeUTF8file(pin.value,pout.innerText)" />
|
||||
|
||||
<input class='input' id='pin' placeholder="请输入文件名"/>
|
||||
<div id="printOut"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="right">
|
||||
<canvas class='gameCanvas' id='data' width='416' height='416' style='z-index:0'></canvas>
|
||||
<div id='dataSelection'></div>
|
||||
<div id="selectBox">
|
||||
<div id='dataSelection' v-show="isSelected"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -114,35 +285,54 @@
|
||||
<script>main={'instance':{}}</script>
|
||||
<script src='libs/icons.js'></script>
|
||||
<script src='libs/maps.js'></script>
|
||||
<!-- <script src='_server/vendor/vue.min.js'></script> -->
|
||||
<script src="https://unpkg.com/vue"></script>
|
||||
<script>
|
||||
main.instance.icons.init();//不知道为什么,需要手动init,明明maps是正常的
|
||||
icons=main.instance.icons.getIcons();
|
||||
ids=[];
|
||||
for(var ii=0;ii<=400;ii++)ids[ii]=main.instance.maps.getBlock(0,0,ii);
|
||||
|
||||
var ids = [], indexs = []
|
||||
ids.push({'idnum':0,'id':'ground','images':'terrains','y':0});
|
||||
|
||||
for(var ii=0;ii<=400;ii++){
|
||||
if('event' in ids[ii]){
|
||||
var id =ids[ii].event.id;
|
||||
var cls =ids[ii].event.cls;
|
||||
if(id=='autotile'){ids[ii]={'idnum':ii,'id':'autotile','images':'autotile','y':0};continue;}
|
||||
if (id in icons[cls])ids[ii]={'idnum':ii,'id':id,'images':cls,'y':icons[cls][id]};
|
||||
|
||||
var point = 0
|
||||
for(var i=0; i<400; i++){
|
||||
var indexBlock = main.instance.maps.getBlock(0,0,i);
|
||||
indexs[i] = [];
|
||||
if('event' in indexBlock){
|
||||
var id = indexBlock.event.id;
|
||||
var indexId = indexBlock.id;
|
||||
if(id=='autotile'){
|
||||
ids.push({'idnum':indexId,'id':'autotile','images':'autotile','y':0});
|
||||
point++;
|
||||
indexs[i].push(point);
|
||||
continue;
|
||||
}
|
||||
var allCls = Object.keys(icons);
|
||||
for(var j=0; j<allCls.length; j++){
|
||||
if(id in icons[allCls[j]] ){
|
||||
|
||||
ids.push({'idnum':indexId,'id':id,'images':allCls[j],'y':icons[allCls[j]][id]});
|
||||
point++;
|
||||
indexs[i].push(point);
|
||||
}
|
||||
}
|
||||
}
|
||||
else ids[ii]=null;
|
||||
}
|
||||
ids[0]={'idnum':0,'id':'ground','images':'terrains','y':0}
|
||||
|
||||
console.log(icons);
|
||||
console.log(ids);
|
||||
|
||||
// ids
|
||||
// {'idnum':20,'id':'autotile','images':'autotile','y':0}
|
||||
// {'idnum':21,'id':'yellowKey','images':'items','y':0}
|
||||
// {'idnum':22,'id':'blueKey','images':'items','y':1}
|
||||
|
||||
//var cxt = eventLayer.getContext("2d");
|
||||
//cxt.drawImage(core.material.images['spriter_name'], sx*32, sy*32, 32, 32, xx*32, yy*32, 32, 32);
|
||||
// 生成定位编号
|
||||
var colNum = ' ';
|
||||
for(var i=0; i<13; i++){
|
||||
var tpl = '<td>'+i+'</td>';
|
||||
colNum += tpl;
|
||||
}
|
||||
arrColMark.innerHTML = '<tr>'+colNum+'</tr>';
|
||||
|
||||
var rowNum = ' ';
|
||||
for(var i=0; i<13; i++){
|
||||
var tpl = '<tr><td>'+i+'</td></tr>';
|
||||
rowNum += tpl;
|
||||
}
|
||||
arrRowMark.innerHTML = rowNum;
|
||||
</script>
|
||||
|
||||
|
||||
@ -299,10 +489,9 @@
|
||||
return 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
updateMap = function () {
|
||||
//clearGrass();
|
||||
// console.log(map)
|
||||
for (var xx = 0; xx <= fullX; xx++) {
|
||||
for (var yy = 0; yy <= fullY; yy++) {
|
||||
if (!isGrass(xx, yy)) continue;
|
||||
@ -341,7 +530,15 @@
|
||||
for (var yy = 0; yy <= fullY; yy++) {
|
||||
if (isGrass(xx, yy)) continue;
|
||||
var mapxy=map[m(xx,yy)];
|
||||
if (typeof(mapxy) == typeof(-1) || typeof(mapxy) == typeof([][0]))continue;
|
||||
if (typeof(mapxy) == typeof(-1)){
|
||||
if(mapxy == 0) cxt.clearRect(xx*32, yy*32, 32, 32);
|
||||
continue;
|
||||
}
|
||||
else if(typeof(mapxy) == typeof([][0])) {//未定义块画红块
|
||||
cxt.fillStyle = 'red';
|
||||
cxt.fillRect(xx*32, yy*32, 32, 32);
|
||||
continue;
|
||||
}
|
||||
//context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)
|
||||
cxt.clearRect(xx*32, yy*32, 32, 32);
|
||||
cxt.drawImage(core.material.images[mapxy.images], 0, mapxy.y*32, 32, 32, xx*32, yy*32, 32, 32);
|
||||
@ -359,7 +556,7 @@
|
||||
var prefix='<span class="result">',postfix='</span>';
|
||||
if (weak){prefix='<span class="weakresult">';}
|
||||
if (typeof(str)==="undefined")str='';
|
||||
pout.innerHTML=prefix+String(str)+postfix;
|
||||
printOut.innerHTML=prefix+String(str)+postfix;
|
||||
}
|
||||
|
||||
drawInitData = function(){
|
||||
@ -444,6 +641,11 @@
|
||||
}//用于鼠标移出canvas时的自动清除状态
|
||||
|
||||
ui.onmousedown = function (e) {
|
||||
if(!selectBox.isSelected) {
|
||||
tip.whichShow = 1;
|
||||
return;
|
||||
}
|
||||
|
||||
holdingPath = 1;
|
||||
mouseOutCheck = 2;
|
||||
setTimeout(clear1);
|
||||
@ -457,6 +659,10 @@
|
||||
}
|
||||
|
||||
ui.onmousemove = function (e) {
|
||||
if(!selectBox.isSelected) {
|
||||
// tip.whichShow = 1;
|
||||
return;
|
||||
}
|
||||
|
||||
if (holdingPath == 0) { return; }
|
||||
mouseOutCheck = 2;
|
||||
@ -482,23 +688,62 @@
|
||||
}
|
||||
|
||||
ui.onmouseup = function (e) {
|
||||
if(!selectBox.isSelected) {
|
||||
tip.whichShow = 1;
|
||||
return;
|
||||
}
|
||||
holdingPath = 0;
|
||||
e.stopPropagation();
|
||||
var loc = eToLoc(e);
|
||||
if (stepPostfix.length) {
|
||||
console.log(stepPostfix);
|
||||
preMapData = JSON.parse(JSON.stringify(map));
|
||||
currDrawData.pos = JSON.parse(JSON.stringify(stepPostfix));
|
||||
currDrawData.info = JSON.parse(JSON.stringify(info));
|
||||
reDo = null;
|
||||
// console.log(stepPostfix);
|
||||
for (var ii = 0; ii < stepPostfix.length; ii++)
|
||||
map[m(stepPostfix[ii].x, stepPostfix[ii].y)] = info;
|
||||
map[fullX + 1 + fullY * (fullX + 1)] = -2;
|
||||
console.log(map);
|
||||
// console.log(map);
|
||||
updateMap();
|
||||
holdingPath = 0;
|
||||
stepPostfix = [];
|
||||
uc.clearRect(0, 0, 416, 416);
|
||||
}
|
||||
}
|
||||
|
||||
var preMapData = {};
|
||||
var currDrawData = {
|
||||
pos: [],
|
||||
info: {}
|
||||
};
|
||||
var reDo = null;
|
||||
document.body.onkeydown = function(e) {
|
||||
// 禁止快捷键的默认行为
|
||||
if( e.ctrlKey && ( e.keyCode == 90 || e.keyCode == 89 ) )
|
||||
e.preventDefault();
|
||||
//Ctrl+z 撤销上一步undo
|
||||
if(e.keyCode == 90 && e.ctrlKey && preMapData && currDrawData.pos.length){
|
||||
map = JSON.parse(JSON.stringify(preMapData));
|
||||
updateMap();
|
||||
reDo = JSON.parse(JSON.stringify(currDrawData));
|
||||
currDrawData = {pos: [],info: {}};
|
||||
preMapData = null;
|
||||
}
|
||||
//Ctrl+y 重做一步redo
|
||||
if(e.keyCode == 89 && e.ctrlKey && reDo && reDo.pos.length){
|
||||
preMapData = JSON.parse(JSON.stringify(map));
|
||||
for(var j=0; j<reDo.pos.length;j++)
|
||||
map[m(reDo.pos[j].x, reDo.pos[j].y)] = JSON.parse(JSON.stringify(reDo.info));
|
||||
|
||||
info=ids[20];//autotile
|
||||
map[fullX + 1 + fullY * (fullX + 1)] = -2;
|
||||
updateMap();
|
||||
currDrawData = JSON.parse(JSON.stringify(reDo));
|
||||
reDo = null;
|
||||
}
|
||||
}
|
||||
|
||||
// info=ids[indexs[20][0]];//autotile
|
||||
data.onmousedown = function (e) {
|
||||
e.stopPropagation();
|
||||
var loc = {
|
||||
@ -507,23 +752,26 @@
|
||||
'size': 32
|
||||
};
|
||||
pos = locToPos(loc);
|
||||
console.log(pos);
|
||||
// console.log(pos);
|
||||
for (var spriter in widthsX){
|
||||
if(pos.x>=widthsX[spriter][1] && pos.x<widthsX[spriter][2]){
|
||||
pos.x=widthsX[spriter][1];
|
||||
pos.images=widthsX[spriter][0];
|
||||
pos.x=widthsX[spriter][1];
|
||||
pos.images=widthsX[spriter][0];
|
||||
if(pos.images=='autotile'){
|
||||
pos.y=0;
|
||||
}else if((pos.y+1)*32>core.material.images[pos.images].height)pos.y=~~(core.material.images[pos.images].height/32)-1;
|
||||
pos.y=0;
|
||||
}else if((pos.y+1)*32>core.material.images[pos.images].height)
|
||||
pos.y=~~(core.material.images[pos.images].height/32)-1;
|
||||
|
||||
selectBox.isSelected = true;
|
||||
// console.log(pos,core.material.images[pos.images].height)
|
||||
dataSelection.style.left=pos.x*32+'px';
|
||||
dataSelection.style.top=pos.y*32+'px';
|
||||
info={'images':pos.images,'y':pos.y};
|
||||
for (var ii=0;ii<ids.length;ii++){
|
||||
if(ids[ii]==null)continue;
|
||||
if(pos.images==ids[ii].images && pos.y==ids[ii].y)info=ids[ii];
|
||||
if(pos.images==ids[ii].images && pos.y==ids[ii].y)
|
||||
info = ids[ii];
|
||||
}
|
||||
printf(JSON.stringify(info))
|
||||
tip.infos = JSON.parse(JSON.stringify(info));
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -592,26 +840,241 @@
|
||||
postsomething(JSON.stringify(data),callback);
|
||||
}
|
||||
|
||||
function exportMap(callback){
|
||||
var filestr='';
|
||||
for (var yy = 0; yy < 13; yy++){
|
||||
filestr+='['
|
||||
for (var xx = 0; xx < 13; xx++) {
|
||||
var mapxy=map[m(xx,yy)];
|
||||
if(typeof(mapxy)==typeof({})){
|
||||
if ('idnum' in mapxy)mapxy=mapxy.idnum;
|
||||
else mapxy='!!?';
|
||||
}
|
||||
mapxy=String(mapxy);
|
||||
mapxy=Array(Math.max(4-mapxy.length,0)).join(' ')+mapxy;
|
||||
filestr+=mapxy+','
|
||||
}
|
||||
filestr+='],\n'
|
||||
}
|
||||
printf('<pre>'+filestr+'\n</pre><p>已复制到剪贴板</p>'+'<textarea cols="1" rows="1" id="poutTmp" style="display: none;">'+filestr+'\n</textarea><br><br><br>');
|
||||
poutTmp.select();
|
||||
document.execCommand("Copy");
|
||||
}
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
document.body.onmousedown = function(e){
|
||||
selectBox.isSelected = false;
|
||||
info = {};
|
||||
}
|
||||
|
||||
var exportM = new Vue({
|
||||
el: '#exportM',
|
||||
|
||||
methods: {
|
||||
exportMap: function(){
|
||||
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=map[m(xx,yy)];
|
||||
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 () {
|
||||
var that = this;
|
||||
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(){
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
drawMap: function(){
|
||||
var that = this;
|
||||
|
||||
var mapArray = that.mapArr.split(/\D+/).join(' ').trim().split(' ')
|
||||
for(var i=0; i<mapArray.length; i++){
|
||||
var num = parseInt(mapArray[i]);
|
||||
if(num == 0 )
|
||||
map[i] = 0;
|
||||
else if(num >= 400){
|
||||
that.error = 3;
|
||||
map[i] = undefined;
|
||||
}else if(indexs[num][0] == undefined){
|
||||
that.error = 2;
|
||||
map[i] = undefined;
|
||||
}else map[i] = ids[[indexs[num][0]]];
|
||||
}
|
||||
|
||||
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++){
|
||||
formatArrStr += Array(Math.max(4-a[k].length,0)).join(' ')+parseInt(a[k])+(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(){
|
||||
map[fullX + 1 + fullY * (fullX + 1)] = -2;
|
||||
for(var ii=0;ii<fullX + 1 + fullY * (fullX + 1);ii++)map[ii]=0;
|
||||
ec = eventLayer.getContext('2d');
|
||||
ec.clearRect(0, 0, 416, 416);
|
||||
pout.value = '';
|
||||
tip.whichShow = 4;
|
||||
editArea.error = 0;
|
||||
}
|
||||
}
|
||||
})
|
||||
var tip = new Vue({
|
||||
el: '#tip',
|
||||
data: {
|
||||
infos: ids[indexs[20][0]],
|
||||
hasId: true,
|
||||
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;
|
||||
}
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
|
||||
whichShow: function(){
|
||||
var that = this;
|
||||
that.mapMsg = '';
|
||||
that.msgs[4] = "复制失败！"+editTip.err;
|
||||
if(that.whichShow)
|
||||
that.mapMsg = that.msgs[that.whichShow-1];
|
||||
|
||||
clearTimeout(that.timer);
|
||||
that.timer = setTimeout(function() {
|
||||
tip.whichShow = 0;
|
||||
}, 5000); //5秒后自动清除
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
var selectBox = new Vue({
|
||||
el: '#selectBox',
|
||||
data: {
|
||||
isSelected: false
|
||||
},
|
||||
watch: {
|
||||
isSelected: function(){
|
||||
tip.isSelectedBlock = this.isSelected;
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user