From 3a7c988148816edc09b84d8cf18c2761178a8424 Mon Sep 17 00:00:00 2001
From: echo <lzq.zheng@qq.com>
Date: Mon, 18 Dec 2017 22:14:42 +0800
Subject: [PATCH] drawmapgui: update layout

---
 drawMapGUI.html | 1010 +++++++++++++++++++++++++----------------------
 1 file changed, 548 insertions(+), 462 deletions(-)
diff --git a/drawMapGUI.html b/drawMapGUI.html
index e06f112c..574817a8 100644
--- a/drawMapGUI.html
+++ b/drawMapGUI.html
@@ -1,531 +1,617 @@
 <!doctype html>
-<html><head><meta charset="utf-8">
-<style>
-.gameCanvas {
-	position: absolute;
-}
-.auxiliary {
-	position: absolute;
-	z-index:50;
-	//display:none;
-}
-body,div,img{margin:0;padding:0;}
-#dataSelection{
-	position: absolute;z-index:75;
-	width:32px;height:32px;
-	
-	margin:-2px 0 0 -2px;
-	padding:0;
-	
-	
-	background-color:rgba(255, 255, 255, 0.0);
-	border: 2px solid rgb(87, 198, 232);
-	box-shadow: 0px 0px 2px rgb(87, 198, 232);
-}
-</style>
-</head><body>
-<canvas class='auxiliary' id='grass_pic' width='530' height='64' style='z-index:3;top:500px;left:12px'></canvas>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <style>
+      html,body,div,img{margin:0;padding:0;}
 
-<canvas class='gameCanvas' id='eventLayer' width='416' height='416' style='z-index:2'></canvas>
-<canvas class='gameCanvas' id='ui' width='416' height='416' style='z-index:100'></canvas>
-<canvas class='gameCanvas' id='data' width='416' height='416' style='z-index:0'></canvas>
-<input class='auxiliary' id='pin' style='top:630px;left:12px;width:200px;height:20px' value="文件名"/>
-<p class='auxiliary' id='pout' style='top:660px;left:12px' >可以在console中通过printf(str)来改变这里的值</p>
-<div id='dataSelection' style="top:0px;left:768px;"></div>
+      .main {
+        max-width: 100%;
+        min-height: 500px;
+        margin: 0 auto;
+      }
+      #left{
+        position: absolute;
+        left: 10px;
+        top: 10px;
+        width: 416px;
+        height: 400px;
+        border: 1px solid rgb(238, 13, 13);
+      }
+      #left #pout{
+        position: absolute;
+        display: block;
+        width: 100%;
+        height: 100%;
+        left: 10px;
+        top: 10px;
+      }
+      #mid{
+        position: absolute;
+        left: 448px;
+        top: 0;
+        width: 416px;
+        height: 600px;
+        border: 1px solid rgb(238, 13, 13);
+      }
+      #mid .tools{
+        position: absolute;
+        width: 100%;
+        height: 200px;
+        left: 0;
+        top: 448px;
+      }
+      .btn{
+        width: 80px;
+        height: 30px;
+        margin: 10px;
+        border-radius: 3px;
+        /* background-color: green; */
+      }
+      .input{
+        width: 100px;
+        margin: 10px;
+      }
+      #right{
+        position: absolute;
+        left: 896px;
+        top: 0;
+        width: 450px;
+        height: 600px;
+        border: 1px solid rgb(238, 13, 13);
+        overflow:auto;
+      }
+      .gameCanvas {
+        position: absolute;
+      }
+      
+      #dataSelection{
+        position: absolute;
+        top:0;
+        left:320px;
+        z-index:75;
+        width:32px;height:32px;
+
+        margin:-2px 0 0 -2px;
+        padding:0;
+
+
+        background-color:rgba(255, 255, 255, 0.0);
+        border: 2px solid rgb(87, 198, 232);
+        box-shadow: 0px 0px 2px rgb(87, 198, 232);
+      }
+    </style>
+  </head>
+<body>
+  <div class="main">
+    <div id="left">
+
+      <p id='pout'>可以在console中通过printf(str)来改变这里的值</p>
+      
+    </div>
+    <div id="mid">
+      <div class="map">
+        <canvas class='gameCanvas' id='bg' width='416' height='416' style='z-index:1'></canvas>
+        <canvas class='gameCanvas' id='eventLayer' width='416' height='416' style='z-index:2'></canvas>
+        <canvas class='gameCanvas' id='ui' width='416' height='416' style='z-index:100'></canvas>
+        
+      </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"/>
+        
+        <input class='input' id='pin' style='top:630px;left:12px;width:200px;height:20px' value="文件名"/>
+      </div>
+    </div>
+    <div id="right">
+      <canvas class='gameCanvas' id='data' width='416' height='416' style='z-index:0'></canvas>
+      <div id='dataSelection'></div>
+    </div>
+  </div>
 
-<input class='gameCanvas' type="button" value="exportMap" onclick="exportMap()" style="top:600px;left:50px"/>
-<input class='gameCanvas' type="button" value="read" onclick="readUTF8file(pin.value)" style="top:600px;left:150px"/>
-<input class='gameCanvas' type="button" value="write" onclick="writeUTF8file(pin.value,pout.innerText)" style="top:600px;left:200px"/>
 
 <script>main={'instance':{}}</script>
 <script src='libs/icons.js'></script>
 <script src='libs/maps.js'></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);
+  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);
 
 
-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]};
-		
-	}
-	else ids[ii]=null;
-}
-ids[0]={'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]};
+      
+    }
+    else ids[ii]=null;
+  }
+  ids[0]={'idnum':0,'id':'ground','images':'terrains','y':0}
 
-console.log(icons);
-console.log(ids);
+  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}
+  // 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 cxt = eventLayer.getContext("2d");
+  //cxt.drawImage(core.material.images['spriter_name'], sx*32, sy*32, 32, 32, xx*32, yy*32, 32, 32);
 </script>
 
 
 <script>
 (function(){
-core={};
-core.material={};
-core.material.images = {};
-core.images=['terrains','animates', 'enemys', 'items', 'npcs', ];
-var loadedImageNum=0;
-core.loadImage = function (imgName, callback) {
-    try {
-        var image = new Image();
-        image.src = 'images/' + imgName + '.png';
-        if (image.complete) {
-            callback(imgName, image);
-            return;
-        }
-        image.onload = function () {
-            callback(imgName, image);
-        }
-    }
-    catch (e) {
-        alert(e);
-    }
-}
-for (var i = 0; i < core.images.length; i++) {
-	core.loadImage(core.images[i], function (imgName, image) {
-		imgName = imgName.split('-');
-		imgName = imgName[0];
-		core.material.images[imgName] = image;
-		loadedImageNum++;
-		if (loadedImageNum == core.images.length) {importGrass();}
-	});
-}
+  core={};
+  core.material={};
+  core.material.images = {};
+  core.images=['terrains','animates', 'enemys', 'items', 'npcs', ];
+  var loadedImageNum=0;
+  core.loadImage = function (imgName, callback) {
+      try {
+          var image = new Image();
+          image.src = 'images/' + imgName + '.png';
+          if (image.complete) {
+              callback(imgName, image);
+              return;
+          }
+          image.onload = function () {
+              callback(imgName, image);
+          }
+      }
+      catch (e) {
+          alert(e);
+      }
+  }
+  for (var i = 0; i < core.images.length; i++) {
+    core.loadImage(core.images[i], function (imgName, image) {
+      imgName = imgName.split('-');
+      imgName = imgName[0];
+      core.material.images[imgName] = image;
+      loadedImageNum++;
+      if (loadedImageNum == core.images.length) {importGrass();}
+    });
+  }
 })();
 //context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)
 </script>
 
 <script type="text/javascript">
-//预处理草的源图片
-importGrass=function(){
-autotile = new Image();
+  //预处理草的源图片
+  importGrass=function(){
+  autotile = new Image();
 
-autotile.src = "images/autotile.png"
+  autotile.src = "images/autotile.png"
 
-autotile.onload = function () {
-	console.log("loaded")
-	drawInitData();
-};
+  autotile.onload = function () {
+    console.log("loaded")
+    drawInitData();
+  };
 
-function drawAutotile(canvas, x, y, size, autotile, index) {
-	switch (index) {
-		case 0:
-			canvas.drawImage(autotile, 0, 0, 32, 32, x, y, size, size);
-			break;
-		case 1:
-			canvas.drawImage(autotile, 0, 3 * 32, 16, 32, x, y, size / 2, size);
-			canvas.drawImage(autotile, 2 * 32 + 16, 3 * 32, 16, 32, x + size / 2, y, size / 2, size);
-			break;
-		case 2:
-			canvas.drawImage(autotile, 2 * 32, 32, 32, 16, x, y, size, size / 2);
-			canvas.drawImage(autotile, 2 * 32, 3 * 32 + 16, 32, 16, x, y + size / 2, size, size / 2);
-			break;
-		case 3:
-			canvas.drawImage(autotile, 2 * 32, 3 * 32, 32, 32, x, y, size, size);
-			break;
-		case 4:
-			canvas.drawImage(autotile, 0, 1 * 32, 16, 32, x, y, size / 2, size);
-			canvas.drawImage(autotile, 2 * 32 + 16, 1 * 32, 16, 32, x + size / 2, y, size / 2, size);
-			break;
-		case 5:
-			canvas.drawImage(autotile, 0, 2 * 32, 16, 32, x, y, size / 2, size);
-			canvas.drawImage(autotile, 2 * 32 + 16, 2 * 32, 16, 32, x + size / 2, y, size / 2, size);
-			break;
-		case 6:
-			canvas.drawImage(autotile, 2 * 32, 1 * 32, 32, 32, x, y, size, size);
-			break;
-		case 7:
-			canvas.drawImage(autotile, 2 * 32, 2 * 32, 32, 32, x, y, size, size);
-			break;
-		case 8:
-			canvas.drawImage(autotile, 0, 32, 32, 16, x, y, size, size / 2);
-			canvas.drawImage(autotile, 0, 3 * 32 + 16, 32, 16, x, y + size / 2, size, size / 2);
-			break;
-		case 9:
-			canvas.drawImage(autotile, 0, 3 * 32, 32, 32, x, y, size, size);
-			break;
-		case 10:
-			canvas.drawImage(autotile, 32, 32, 32, 16, x, y, size, size / 2);
-			canvas.drawImage(autotile, 32, 3 * 32 + 16, 32, 16, x, y + size / 2, size, size / 2);
-			break;
-		case 11:
-			canvas.drawImage(autotile, 32, 3 * 32, 32, 32, x, y, size, size);
-			break;
-		case 12:
-			canvas.drawImage(autotile, 0, 32, 32, 32, x, y, size, size);
-			break;
-		case 13:
-			canvas.drawImage(autotile, 0, 2 * 32, 32, 32, x, y, size, size);
-			break;
-		case 14:
-			canvas.drawImage(autotile, 32, 32, 32, 32, x, y, size, size);
-			break;
-		case 15:
-			canvas.drawImage(autotile, 32, 2 * 32, 32, 32, x, y, size, size);
-			break;
-		case 16:
-			canvas.clearRect(x, y, size / 2, size / 2);
-			canvas.drawImage(autotile, 2 * 32, 0, 16, 16, x, y, size / 2, size / 2);
-			break;
-		case 17:
-			canvas.clearRect(x, y, size / 2, size / 2);
-			canvas.drawImage(autotile, 2 * 32 + 16, 0, 16, 16, x, y, size / 2, size / 2);
-			break;
-		case 18:
-			canvas.clearRect(x, y, size / 2, size / 2);
-			canvas.drawImage(autotile, 2 * 32 + 16, 16, 16, 16, x, y, size / 2, size / 2);
-			break;
-		case 19:
-			canvas.clearRect(x, y, size / 2, size / 2);
-			canvas.drawImage(autotile, 2 * 32, 16, 16, 16, x, y, size / 2, size / 2);
-			break;
-	}
-}
+  function drawAutotile(canvas, x, y, size, autotile, index) {
+    switch (index) {
+      case 0:
+        canvas.drawImage(autotile, 0, 0, 32, 32, x, y, size, size);
+        break;
+      case 1:
+        canvas.drawImage(autotile, 0, 3 * 32, 16, 32, x, y, size / 2, size);
+        canvas.drawImage(autotile, 2 * 32 + 16, 3 * 32, 16, 32, x + size / 2, y, size / 2, size);
+        break;
+      case 2:
+        canvas.drawImage(autotile, 2 * 32, 32, 32, 16, x, y, size, size / 2);
+        canvas.drawImage(autotile, 2 * 32, 3 * 32 + 16, 32, 16, x, y + size / 2, size, size / 2);
+        break;
+      case 3:
+        canvas.drawImage(autotile, 2 * 32, 3 * 32, 32, 32, x, y, size, size);
+        break;
+      case 4:
+        canvas.drawImage(autotile, 0, 1 * 32, 16, 32, x, y, size / 2, size);
+        canvas.drawImage(autotile, 2 * 32 + 16, 1 * 32, 16, 32, x + size / 2, y, size / 2, size);
+        break;
+      case 5:
+        canvas.drawImage(autotile, 0, 2 * 32, 16, 32, x, y, size / 2, size);
+        canvas.drawImage(autotile, 2 * 32 + 16, 2 * 32, 16, 32, x + size / 2, y, size / 2, size);
+        break;
+      case 6:
+        canvas.drawImage(autotile, 2 * 32, 1 * 32, 32, 32, x, y, size, size);
+        break;
+      case 7:
+        canvas.drawImage(autotile, 2 * 32, 2 * 32, 32, 32, x, y, size, size);
+        break;
+      case 8:
+        canvas.drawImage(autotile, 0, 32, 32, 16, x, y, size, size / 2);
+        canvas.drawImage(autotile, 0, 3 * 32 + 16, 32, 16, x, y + size / 2, size, size / 2);
+        break;
+      case 9:
+        canvas.drawImage(autotile, 0, 3 * 32, 32, 32, x, y, size, size);
+        break;
+      case 10:
+        canvas.drawImage(autotile, 32, 32, 32, 16, x, y, size, size / 2);
+        canvas.drawImage(autotile, 32, 3 * 32 + 16, 32, 16, x, y + size / 2, size, size / 2);
+        break;
+      case 11:
+        canvas.drawImage(autotile, 32, 3 * 32, 32, 32, x, y, size, size);
+        break;
+      case 12:
+        canvas.drawImage(autotile, 0, 32, 32, 32, x, y, size, size);
+        break;
+      case 13:
+        canvas.drawImage(autotile, 0, 2 * 32, 32, 32, x, y, size, size);
+        break;
+      case 14:
+        canvas.drawImage(autotile, 32, 32, 32, 32, x, y, size, size);
+        break;
+      case 15:
+        canvas.drawImage(autotile, 32, 2 * 32, 32, 32, x, y, size, size);
+        break;
+      case 16:
+        canvas.clearRect(x, y, size / 2, size / 2);
+        canvas.drawImage(autotile, 2 * 32, 0, 16, 16, x, y, size / 2, size / 2);
+        break;
+      case 17:
+        canvas.clearRect(x, y, size / 2, size / 2);
+        canvas.drawImage(autotile, 2 * 32 + 16, 0, 16, 16, x, y, size / 2, size / 2);
+        break;
+      case 18:
+        canvas.clearRect(x, y, size / 2, size / 2);
+        canvas.drawImage(autotile, 2 * 32 + 16, 16, 16, 16, x, y, size / 2, size / 2);
+        break;
+      case 19:
+        canvas.clearRect(x, y, size / 2, size / 2);
+        canvas.drawImage(autotile, 2 * 32, 16, 16, 16, x, y, size / 2, size / 2);
+        break;
+    }
+  }
 
-//根据状态画图
-var cxt = eventLayer.getContext("2d");
+  //根据状态画图
+  var cxt = eventLayer.getContext("2d");
 
-grass = function (ii, x, y) {
-	cxt.clearRect(x * 32, y * 32, 32, 32);
-	// cxt.putImageData(grassImageData[ii], x * 32, y * 32);
-	drawAutotile(cxt, x * 32, y * 32, 32, autotile, ii);
-}
+  grass = function (ii, x, y) {
+    cxt.clearRect(x * 32, y * 32, 32, 32);
+    // cxt.putImageData(grassImageData[ii], x * 32, y * 32);
+    drawAutotile(cxt, x * 32, y * 32, 32, autotile, ii);
+  }
 
-//function clearGrass() { cxt.clearRect(0, 0, 416, 416); }
+  //function clearGrass() { cxt.clearRect(0, 0, 416, 416); }
 
-fullX = 12;
-fullY = 12;
+  fullX = 12;
+  fullY = 12;
 
-map = [];//-2表示边界,0表示空地,其他对象对应实体
-map[fullX + 1 + fullY * (fullX + 1)] = -2;
-for(var ii=0;ii<fullX + 1 + fullY * (fullX + 1);ii++)map[ii]=0;
+  map = [];//-2表示边界,0表示空地,其他对象对应实体
+  map[fullX + 1 + fullY * (fullX + 1)] = -2;
+  for(var ii=0;ii<fullX + 1 + fullY * (fullX + 1);ii++)map[ii]=0;
 
-m = function (x, y) {
-	if (x < 0 || x > fullX || y < 0 || y > fullY) return fullX + 1 + fullY * (fullX + 1);
-	return x + y * (fullX + 1);
-}
+  m = function (x, y) {
+    if (x < 0 || x > fullX || y < 0 || y > fullY) return fullX + 1 + fullY * (fullX + 1);
+    return x + y * (fullX + 1);
+  }
 
-isGrass = function (xx, yy) { 
-	var mapxy=map[m(xx,yy)];
-	if (typeof(mapxy) == typeof(-1) || typeof(mapxy) == typeof([][0]))return 0;
-	if (mapxy.images=='autotile')return 1;
-	return 0;
-}
+  isGrass = function (xx, yy) { 
+    var mapxy=map[m(xx,yy)];
+    if (typeof(mapxy) == typeof(-1) || typeof(mapxy) == typeof([][0]))return 0;
+    if (mapxy.images=='autotile')return 1;
+    return 0;
+  }
 
 
 
-updateMap = function () {
-	//clearGrass();
-	for (var xx = 0; xx <= fullX; xx++) {
-		for (var yy = 0; yy <= fullY; yy++) {
-			if (!isGrass(xx, yy)) continue;
-			var _id = 0;
-			_id += isGrass(xx, yy - 1) + 2 * isGrass(xx - 1, yy) + 4 * isGrass(xx, yy + 1) + 8 * isGrass(xx + 1, yy);
-			//1上2左4下8右
-			grass(_id, xx, yy);
-		}
-	}
-	for (var xx = 0; xx < fullX; xx++) {
-		for (var yy = 0; yy < fullY; yy++) {
-			if (isGrass(xx, yy) + isGrass(xx + 1, yy) + isGrass(xx + 1, yy + 1) + isGrass(xx, yy + 1) != 3) continue;
-			if (!isGrass(xx, yy)) {
-				// cxt.clearRect(xx * 32 + 32, yy * 32 + 32, 16, 16);
-				// cxt.putImageData(grassImageData[16], xx * 32 + 32, yy * 32 + 32);
-				drawAutotile(cxt, xx * 32 + 32, yy * 32 + 32, 32, autotile, 16);
-			}
-			if (!isGrass(xx + 1, yy)) {
-				// cxt.clearRect(xx * 32 + 16, yy * 32 + 32, 16, 16);
-				//cxt.putImageData(grassImageData[17], xx * 32 + 16, yy * 32 + 32);
-				drawAutotile(cxt, xx * 32 + 16, yy * 32 + 32, 32, autotile, 17);
-			}
-			if (!isGrass(xx + 1, yy + 1)) {
-				// cxt.clearRect(xx * 32 + 16, yy * 32 + 16, 16, 16);
-				// cxt.putImageData(grassImageData[18], xx * 32 + 16, yy * 32 + 16);
-				drawAutotile(cxt, xx * 32 + 16, yy * 32 + 16, 32, autotile, 18);
-			}
-			if (!isGrass(xx, yy + 1)) {
-				// cxt.clearRect(xx * 32 + 32, yy * 32 + 16, 16, 16);
-				// cxt.putImageData(grassImageData[19], xx * 32 + 32, yy * 32 + 16);
-				drawAutotile(cxt, xx * 32 + 32, yy * 32 + 16, 32, autotile, 19);
-			}
-		}
-	}
-	for (var xx = 0; xx <= fullX; xx++) {
-		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;
-			//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);
-		}
-	}
-}
+  updateMap = function () {
+    //clearGrass();
+    for (var xx = 0; xx <= fullX; xx++) {
+      for (var yy = 0; yy <= fullY; yy++) {
+        if (!isGrass(xx, yy)) continue;
+        var _id = 0;
+        _id += isGrass(xx, yy - 1) + 2 * isGrass(xx - 1, yy) + 4 * isGrass(xx, yy + 1) + 8 * isGrass(xx + 1, yy);
+        //1上2左4下8右
+        grass(_id, xx, yy);
+      }
+    }
+    for (var xx = 0; xx < fullX; xx++) {
+      for (var yy = 0; yy < fullY; yy++) {
+        if (isGrass(xx, yy) + isGrass(xx + 1, yy) + isGrass(xx + 1, yy + 1) + isGrass(xx, yy + 1) != 3) continue;
+        if (!isGrass(xx, yy)) {
+          // cxt.clearRect(xx * 32 + 32, yy * 32 + 32, 16, 16);
+          // cxt.putImageData(grassImageData[16], xx * 32 + 32, yy * 32 + 32);
+          drawAutotile(cxt, xx * 32 + 32, yy * 32 + 32, 32, autotile, 16);
+        }
+        if (!isGrass(xx + 1, yy)) {
+          // cxt.clearRect(xx * 32 + 16, yy * 32 + 32, 16, 16);
+          //cxt.putImageData(grassImageData[17], xx * 32 + 16, yy * 32 + 32);
+          drawAutotile(cxt, xx * 32 + 16, yy * 32 + 32, 32, autotile, 17);
+        }
+        if (!isGrass(xx + 1, yy + 1)) {
+          // cxt.clearRect(xx * 32 + 16, yy * 32 + 16, 16, 16);
+          // cxt.putImageData(grassImageData[18], xx * 32 + 16, yy * 32 + 16);
+          drawAutotile(cxt, xx * 32 + 16, yy * 32 + 16, 32, autotile, 18);
+        }
+        if (!isGrass(xx, yy + 1)) {
+          // cxt.clearRect(xx * 32 + 32, yy * 32 + 16, 16, 16);
+          // cxt.putImageData(grassImageData[19], xx * 32 + 32, yy * 32 + 16);
+          drawAutotile(cxt, xx * 32 + 32, yy * 32 + 16, 32, autotile, 19);
+        }
+      }
+    }
+    for (var xx = 0; xx <= fullX; xx++) {
+      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;
+        //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);
+      }
+    }
+  }
 
-}
+  }
 </script>
 
 <script>
-//画背景以及拖拽相关的支持
+  //画背景以及拖拽相关的支持
 
-printf = function(str,weak) {
-	var prefix='<span class="result">',postfix='</span>';
-	if (weak){prefix='<span class="weakresult">';}
-	if (typeof(str)==="undefined")str='';
-	pout.innerHTML=prefix+String(str)+postfix;
-}
+  printf = function(str,weak) {
+    var prefix='<span class="result">',postfix='</span>';
+    if (weak){prefix='<span class="weakresult">';}
+    if (typeof(str)==="undefined")str='';
+    pout.innerHTML=prefix+String(str)+postfix;
+  }
 
-drawInitData = function(){
-	var ratio=1;
-	
-	var images=core.material.images;
-	maxHeight=700;
-	sumWidth=416+32;
-	widthsX={};
-	for(var ii=0;ii<core.images.length;ii++){
-		var img=core.images[ii];
-		widthsX[img]=[img,sumWidth/32,(sumWidth+images[img].width)/32];
-		sumWidth+=images[img].width;
-		maxHeight=Math.max(maxHeight,images[img].height);
-	}
-	widthsX['autotile']=['autotile',sumWidth/32,(sumWidth+3*32)/32];
-	sumWidth+=3*32;
-	
-	var fullWidth=~~(sumWidth*ratio);
-	var fullHeight=~~(maxHeight*ratio);
+  drawInitData = function(){
+    var ratio=1;
+    
+    var images=core.material.images;
+    maxHeight=700;
+    sumWidth=0;
+    widthsX={};
+    for(var ii=0;ii<core.images.length;ii++){
+      var img=core.images[ii];
+      widthsX[img]=[img,sumWidth/32,(sumWidth+images[img].width)/32];
+      sumWidth+=images[img].width;
+      maxHeight=Math.max(maxHeight,images[img].height);
+    }
+    widthsX['autotile']=['autotile',sumWidth/32,(sumWidth+3*32)/32];
+    sumWidth+=3*32;
+    
+    var fullWidth=~~(sumWidth*ratio);
+    var fullHeight=~~(maxHeight*ratio);
 
-	data.style.width = (data.width = fullWidth)/ratio + 'px';
-	data.style.height = (data.height = fullHeight)/ratio + 'px';
+    // data.style.width = (data.width = fullWidth)/ratio + 'px';
+    data.style.height = (data.height = fullHeight)/ratio + 'px';
 
-	var dc = data.getContext('2d');
-	//var colorA = ["#f8f8f8", "#cccccc"];
-	//var colorIndex = 1;
-	//在data内画一个13*13的灰白相间的格子
-	for (var ii = 0; ii < 13; ii++)
-		for (var jj = 0; jj < 13; jj++) {
-			//dc.fillStyle = colorA[colorIndex];
-			//colorIndex = 1 - colorIndex;
-			//dc.fillRect(ii * 32, jj * 32, 32, 32);
-			dc.drawImage(core.material.images['terrains'], 0, 0, 32, 32, ii*32, jj*32, 32, 32);
-		}
-	var nowx=416+32;
-	for(var ii=0;ii<core.images.length;ii++){
-		var img=core.images[ii];
-		dc.drawImage(images[img], nowx, 0)
-		nowx+=images[img].width;
-	}
-	dc.drawImage(autotile, nowx, 0)
-	
-};
+    var dc = data.getContext('2d');
+    var bgc = bg.getContext('2d');
+    //var colorA = ["#f8f8f8", "#cccccc"];
+    //var colorIndex = 1;
+    //在data内画一个13*13的灰白相间的格子
+    for (var ii = 0; ii < 13; ii++)
+      for (var jj = 0; jj < 13; jj++) {
+        //dc.fillStyle = colorA[colorIndex];
+        //colorIndex = 1 - colorIndex;
+        //dc.fillRect(ii * 32, jj * 32, 32, 32);
+        bgc.drawImage(core.material.images['terrains'], 0, 0, 32, 32, ii*32, jj*32, 32, 32);
+      }
+    var nowx=0;
+    for(var ii=0;ii<core.images.length;ii++){
+      var img=core.images[ii];
+      dc.drawImage(images[img], nowx, 0)
+      nowx+=images[img].width;
+    }
+    dc.drawImage(autotile, nowx, 0)
+    
+  };
 
 
 (function () {
-var uc = ui.getContext('2d');
+  var uc = ui.getContext('2d');
 
-function fillPos(pos) {
-	uc.fillStyle = '#' + ~~(Math.random() * 8) + ~~(Math.random() * 8) + ~~(Math.random() * 8);
-	uc.fillRect(pos.x * 32 + 12, pos.y * 32 + 12, 8, 8);
-}//在格子内画一个随机色块
+  function fillPos(pos) {
+    uc.fillStyle = '#' + ~~(Math.random() * 8) + ~~(Math.random() * 8) + ~~(Math.random() * 8);
+    uc.fillRect(pos.x * 32 + 12, pos.y * 32 + 12, 8, 8);
+  }//在格子内画一个随机色块
 
-function eToLoc(e) { var loc = { 'x': document.documentElement.scrollLeft+e.clientX - ui.offsetLeft, 'y': document.documentElement.scrollTop+e.clientY - ui.offsetTop, 'size': 32 }; return loc; }//返回可用的组件内坐标
+  function eToLoc(e) { 
+    var loc = { 
+      'x': document.documentElement.scrollLeft+e.clientX - mid.offsetLeft, 
+      'y': document.documentElement.scrollTop+e.clientY - mid.offsetTop, 
+      'size': 32 
+    };
+    return loc; }//返回可用的组件内坐标
 
-function locToPos(loc) {
-	pos = { 'x': ~~(loc.x / loc.size), 'y': ~~(loc.y / loc.size) }
-	return pos;
-}
+  function locToPos(loc) {
+    pos = { 'x': ~~(loc.x / loc.size), 'y': ~~(loc.y / loc.size) }
+    return pos;
+  }
 
-var holdingPath = 0;
-var stepPostfix = null;//用于存放寻路检测的第一个点之后的后续移动
+  var holdingPath = 0;
+  var stepPostfix = null;//用于存放寻路检测的第一个点之后的后续移动
 
-var mouseOutCheck = 2;
-function clear1() {
-	if (mouseOutCheck > 1) {
-		mouseOutCheck--;
-		setTimeout(clear1, 1000);
-		return;
-	}
-	holdingPath = 0;
-	stepPostfix = [];
-	uc.clearRect(0, 0, 416, 416);
-}//用于鼠标移出canvas时的自动清除状态
+  var mouseOutCheck = 2;
+  function clear1() {
+    if (mouseOutCheck > 1) {
+      mouseOutCheck--;
+      setTimeout(clear1, 1000);
+      return;
+    }
+    holdingPath = 0;
+    stepPostfix = [];
+    uc.clearRect(0, 0, 416, 416);
+  }//用于鼠标移出canvas时的自动清除状态
 
-ui.onmousedown = function (e) {
-	holdingPath = 1;
-	mouseOutCheck = 2;
-	setTimeout(clear1);
-	e.stopPropagation();
-	uc.clearRect(0, 0, 416, 416);
-	var loc = eToLoc(e);
-	pos = locToPos(loc)
-	stepPostfix = [];
-	stepPostfix.push(pos);
-	fillPos(pos);
-}
+  ui.onmousedown = function (e) {
+    holdingPath = 1;
+    mouseOutCheck = 2;
+    setTimeout(clear1);
+    e.stopPropagation();
+    uc.clearRect(0, 0, 416, 416);
+    var loc = eToLoc(e);
+    pos = locToPos(loc)
+    stepPostfix = [];
+    stepPostfix.push(pos);
+    fillPos(pos);
+  }
 
-ui.onmousemove = function (e) {
+  ui.onmousemove = function (e) {
 
-	if (holdingPath == 0) { return; }
-	mouseOutCheck = 2;
-	e.stopPropagation();
-	var loc = eToLoc(e);
-	var pos = locToPos(loc);
-	var pos0 = stepPostfix[stepPostfix.length - 1]
-	var directionDistance = [pos.y - pos0.y, pos0.x - pos.x, pos0.y - pos.y, pos.x - pos0.x]
-	var max = 0, index = 4;
-	for (var i = 0; i < 4; i++) {
-		if (directionDistance[i] > max) {
-			index = i;
-			max = directionDistance[i];
-		}
-	}
-	pos = [{ 'x': 0, 'y': 1 }, { 'x': -1, 'y': 0 }, { 'x': 0, 'y': -1 }, { 'x': 1, 'y': 0 }, false][index]
-	if (pos) {
-		pos.x += pos0.x;
-		pos.y += pos0.y;
-		stepPostfix.push(pos);
-		fillPos(pos);
-	}
-}
+    if (holdingPath == 0) { return; }
+    mouseOutCheck = 2;
+    e.stopPropagation();
+    var loc = eToLoc(e);
+    var pos = locToPos(loc);
+    var pos0 = stepPostfix[stepPostfix.length - 1]
+    var directionDistance = [pos.y - pos0.y, pos0.x - pos.x, pos0.y - pos.y, pos.x - pos0.x]
+    var max = 0, index = 4;
+    for (var i = 0; i < 4; i++) {
+      if (directionDistance[i] > max) {
+        index = i;
+        max = directionDistance[i];
+      }
+    }
+    pos = [{ 'x': 0, 'y': 1 }, { 'x': -1, 'y': 0 }, { 'x': 0, 'y': -1 }, { 'x': 1, 'y': 0 }, false][index]
+    if (pos) {
+      pos.x += pos0.x;
+      pos.y += pos0.y;
+      stepPostfix.push(pos);
+      fillPos(pos);
+    }
+  }
 
-ui.onmouseup = function (e) {
-	holdingPath = 0;
-	e.stopPropagation();
-	var loc = eToLoc(e);
-	if (stepPostfix.length) {
-		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);
-		updateMap();
-		holdingPath = 0;
-		stepPostfix = [];
-		uc.clearRect(0, 0, 416, 416);
-	}
-}
+  ui.onmouseup = function (e) {
+    holdingPath = 0;
+    e.stopPropagation();
+    var loc = eToLoc(e);
+    if (stepPostfix.length) {
+      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);
+      updateMap();
+      holdingPath = 0;
+      stepPostfix = [];
+      uc.clearRect(0, 0, 416, 416);
+    }
+  }
 
-info=ids[20];//autotile
-data.onmousedown = function (e) {
-	e.stopPropagation();
-	var loc = eToLoc(e);
-	pos = locToPos(loc);
-	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];
-			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;
-			
-			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];
-			}
-			printf(JSON.stringify(info))
-		}
-	}
-}
+  info=ids[20];//autotile
+  data.onmousedown = function (e) {
+    e.stopPropagation();
+    var loc = { 
+      'x': document.documentElement.scrollLeft + e.clientX - right.offsetLeft, 
+      'y': document.documentElement.scrollTop + right.scrollTop+e.clientY - right.offsetTop, 
+      'size': 32 
+    };
+    pos = locToPos(loc);
+    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];
+        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;
+        
+        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];
+        }
+        printf(JSON.stringify(info))
+      }
+    }
+  }
 
 })();
 </script>
 
 <script type="text/javascript">
 
-//var timecheck=0;
-postsomething = function (data,callback) {
-	//if(timecheck!==0)return;
-	//timecheck=1;
-	setTimeout(function(){timecheck=0},5000);
-	var xhr = function(){
-		if (window.XMLHttpRequest) {
-			return new XMLHttpRequest();
-		}else{
-			return new ActiveObject('Micrsorf.XMLHttp');
-		}
-	}();
-	xhr.onreadystatechange = function(){
-	switch(xhr.readyState){
-		case 0 : 
-			printf('waiting... ','weak');
-			break;
-		case 1 : 
-			printf('waiting ...','weak');
-			break;
-		case 2 : 
-			printf('waiting... ','weak');
-			break;
-		case 3 : 
-			printf('waiting ...','weak');
-			break;
-		case 4 : 
-			if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
-				printf(xhr.responseText);
-				if (Boolean(callback))callback(xhr.responseText);
-			}else{
-				printf('error:' + xhr.status+'<br>'+(xhr.responseText||''),'weak');
-			}
-			//timecheck=0;
-			break;
-	}
-}
-xhr.open('post','http://127.0.0.1');
-xhr.setRequestHeader('Content-Type','text/plain');
-if(typeof(data)==typeof([][0]) || data==null)data=JSON.stringify({1:2});
-xhr.send(data);
-}
+  //var timecheck=0;
+  postsomething = function (data,callback) {
+    //if(timecheck!==0)return;
+    //timecheck=1;
+    setTimeout(function(){timecheck=0},5000);
+    var xhr = function(){
+      if (window.XMLHttpRequest) {
+        return new XMLHttpRequest();
+      }else{
+        return new ActiveObject('Micrsorf.XMLHttp');
+      }
+    }();
+    xhr.onreadystatechange = function(){
+    switch(xhr.readyState){
+      case 0 : 
+        printf('waiting... ','weak');
+        break;
+      case 1 : 
+        printf('waiting ...','weak');
+        break;
+      case 2 : 
+        printf('waiting... ','weak');
+        break;
+      case 3 : 
+        printf('waiting ...','weak');
+        break;
+      case 4 : 
+        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
+          printf(xhr.responseText);
+          if (Boolean(callback))callback(xhr.responseText);
+        }else{
+          printf('error:' + xhr.status+'<br>'+(xhr.responseText||''),'weak');
+        }
+        //timecheck=0;
+        break;
+    }
+  }
+  xhr.open('post','http://127.0.0.1');
+  xhr.setRequestHeader('Content-Type','text/plain');
+  if(typeof(data)==typeof([][0]) || data==null)data=JSON.stringify({1:2});
+  xhr.send(data);
+  }
 
-function readUTF8file(filename,callback){
-	data={};
-	data.name='readUTF8file';
-	data.func='open';
-	data.args=[String(filename)];
-	postsomething(JSON.stringify(data),callback);
-}
+  function readUTF8file(filename,callback){
+    data={};
+    data.name='readUTF8file';
+    data.func='open';
+    data.args=[String(filename)];
+    postsomething(JSON.stringify(data),callback);
+  }
 
-function writeUTF8file(filename,filestr,callback){
-	data={};
-	data.name='writeUTF8file';
-	data.func='open';
-	data.args=[String(filename),String(filestr)];
-	postsomething(JSON.stringify(data),callback);
-}
+  function writeUTF8file(filename,filestr,callback){
+    data={};
+    data.name='writeUTF8file';
+    data.func='open';
+    data.args=[String(filename),String(filestr)];
+    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(5-mapxy.length,0)).join(' ')+mapxy;
-			filestr+=mapxy+','
-		}
-		filestr+='],\n'
-	}
-	printf('<pre>'+filestr+'\n</pre><p>已复制到剪贴板</p>'+'<textarea cols="1" rows="1" id=poutTmp>'+filestr+'\n</textarea><br><br><br>');
-	poutTmp.select();
-	document.execCommand("Copy");
-}
+  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>
 
 </html>
\ No newline at end of file
