update drawMapGui

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;
+        height: 620px;
-        border: 1px solid rgb(238, 13, 13);
+        /* border: 1px solid rgb(238, 13, 13); */
       }
       #mid .tools{
         position: absolute;
-        width: 100%;
+        width: 400px;
-        height: 200px;
+        height: 195px;
         left: 0;
-        top: 448px;
+        top: 425px;
+        border-top: 1px solid #ccc;
+        padding: 10px 5px;
+        margin-left: 8px;;
+        box-sizing: border-box;
       }
-      .btn{
+      #tip{
-        width: 80px;
+        float: right;
-        height: 30px;
+        width: 50%;
-        margin: 10px;
+        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{
+      #printOut{
-        width: 100px;
+        margin-top: 10px;
-        margin: 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;
+        height: 620px;
-        border: 1px solid rgb(238, 13, 13);
+        /* 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">
-
+      <div id="editArea" v-cloak>
-      <p id='pout'>可以在console中通过printf(str)来改变这里的值</p>
+        <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"/>
+        <div id="tip" v-cloak >
-        <input class='btn' type="button" value="read" onclick="readUTF8file(pin.value)" style="top:600px;left:150px"/>
+          <div v-if="isSelectedBlock" >
-        <input class='btn' type="button" value="write" onclick="writeUTF8file(pin.value,pout.innerText)" style="top:600px;left:200px"/>
+            <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++){
+  var point = 0
-    if('event' in ids[ii]){
+  for(var i=0; i<400; i++){
-      var id =ids[ii].event.id;
+    var indexBlock = main.instance.maps.getBlock(0,0,i);
-      var cls =ids[ii].event.cls;
+    indexs[i] = [];
-      if(id=='autotile'){ids[ii]={'idnum':ii,'id':'autotile','images':'autotile','y':0};continue;}
+    if('event' in indexBlock){
-      if (id in icons[cls])ids[ii]={'idnum':ii,'id':id,'images':cls,'y':icons[cls][id]};
+      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);
+  var colNum = ' ';
-
+  for(var i=0; i<13; i++){
-  // ids
+    var tpl = '<td>'+i+'</td>';
-  // {'idnum':20,'id':'autotile','images':'autotile','y':0}
+    colNum += tpl;
-  // {'idnum':21,'id':'yellowKey','images':'items','y':0}
+  }
-  // {'idnum':22,'id':'blueKey','images':'items','y':1}
+  arrColMark.innerHTML = '<tr>'+colNum+'</tr>';
-
+  
-  //var cxt = eventLayer.getContext("2d");
+  var rowNum = ' ';
-  //cxt.drawImage(core.material.images['spriter_name'], sx*32, sy*32, 32, 32, xx*32, yy*32, 32, 32);
+  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.x=widthsX[spriter][1];
-        pos.images=widthsX[spriter][0];
+          pos.images=widthsX[spriter][0];
         if(pos.images=='autotile'){
-        pos.y=0;
+          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;
+        }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)
-          if(pos.images==ids[ii].images && pos.y==ids[ii].y)info=ids[ii];
+            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>