fix gui layout

drawMapGUI.html

@@ -8,6 +8,9 @@
         font-family:Roboto,Helvetica,Arial,sans-serif;
         background-color: #F5F5F5;
       }
+      ::-webkit-scrollbar {
+          width: 5px;
+      }
       .main {
         max-width: 100%;
         min-height: 500px;
@@ -43,6 +46,7 @@
         margin-left: 22px;
         margin-top: 21px;
         line-height: 20px;
+        font: 400 13.3333px Arial;
       }
       #editTip{
         position: absolute;
@@ -314,11 +318,10 @@
     <div id="right">
       <div id="iconLib">
         <canvas class='gameCanvas' id='data' width='416' height='416' style='z-index:0'></canvas>
+        <div id="selectBox">
+            <div id='dataSelection' v-show="isSelected" v-cloak></div>
+        </div>
       </div>
-      <div id="selectBox">
-        <div id='dataSelection' v-show="isSelected"></div>
-      </div>
-      
     </div>
   </div>
 
@@ -326,8 +329,8 @@
 <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 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();
@@ -664,7 +667,6 @@
 
   function locToPos(loc) {
     pos = { 'x': ~~(loc.x / loc.size), 'y': ~~(loc.y / loc.size) }
-    console.log(pos)
     return pos;
   }
 
@@ -806,8 +808,8 @@
         
         selectBox.isSelected = true;
         // console.log(pos,core.material.images[pos.images].height)
-        dataSelection.style.left = (iconLib.offsetLeft+pos.x*32) +'px';
-        dataSelection.style.top = (iconLib.offsetTop + pos.y*32) +'px';
+        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(pos.images==ids[ii].images && pos.y==ids[ii].y)
@@ -886,8 +888,15 @@
 
 <script type="text/javascript">
   document.body.onmousedown = function(e){
-    selectBox.isSelected = false;
-    info = {};
+    var flag = true;
+    dataSelection.onmousedown = function(e){
+      flag = false;
+    }
+    if(flag){
+      selectBox.isSelected = false;
+      info = {};
+    }
+    
   }
 
   var exportM = new Vue({
@@ -944,7 +953,7 @@
     watch: {
       mapArr: function () {
         var that = this;
-        if(that.formatArr()){
+        if(that.mapArr !='' && that.formatArr()){
           that.error = 0;
           clearTimeout(that.formatTimer);
           setTimeout(function(){
@@ -957,10 +966,9 @@
         }else{
           that.error = 1;
         }
-        
       },
       error: function(){
-        
+        console.log(editArea.mapArr);
       }
     },
     methods: {
@@ -1049,7 +1057,9 @@
         for(var ii=0;ii<fullX + 1 + fullY * (fullX + 1);ii++)map[ii]=0;
         ec = eventLayer.getContext('2d');
         ec.clearRect(0, 0, 416, 416);
+        clearTimeout(editArea.formatTimer);
         pout.value = '';
+        editArea.mapArr = '';
         tip.whichShow = 4;
         editArea.error = 0;
       }