From 9a276883da46db369986840d158791ca62227a28 Mon Sep 17 00:00:00 2001
From: YouWei Zhao <zhao.uv@gmail.com>
Date: Thu, 5 Jul 2018 12:11:53 +0800
Subject: [PATCH] init

---
 _server/css/editor_mobile.css      | 390 ++++++++++++++++++++++++
 _server/css/editor_mode_mobile.css | 227 ++++++++++++++
 editor-mobile.html                 | 474 +++++++++++++++++++++++++++++
 3 files changed, 1091 insertions(+)
 create mode 100644 _server/css/editor_mobile.css
 create mode 100644 _server/css/editor_mode_mobile.css
 create mode 100644 editor-mobile.html

diff --git a/_server/css/editor_mobile.css b/_server/css/editor_mobile.css
new file mode 100644
index 00000000..f5681118
--- /dev/null
+++ b/_server/css/editor_mobile.css
@@ -0,0 +1,390 @@
+
+html, body, div, img {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;;
+    background-color: #F5F5F5;
+}
+
+/* ::-webkit-scrollbar {
+    width: 5px;
+} */
+.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: 5px;
+    top: 10px;
+    width: 435px;
+    height: 630px;
+}
+
+#editArea {
+    position: absolute;
+    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: 23px;
+    line-height: 20px;
+    font-size: 12.3px;
+    font-family: 'Lucida Console', Monaco, monospace;
+    white-space: pre;
+    border: 1px solid #ddd;
+    border-radius: 2px;
+    overflow: auto;
+}
+
+#editTip {
+    position: absolute;
+    width: 100%;
+    margin-bottom: 120px;
+    bottom: 0;
+    left: 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: 10px;
+    width: 440px;
+    height: 630px;
+}
+
+.map {
+    position: absolute;
+    left: 20px;
+    top: 21px;
+    width: 416px;
+    height: 416px;
+}
+
+#mid .tools {
+    position: absolute;
+    width: 425px;
+    height: 180px;
+    left: 0;
+    bottom: 0;
+    border-top: 1px solid #ccc;
+    padding: 10px 5px;
+    margin-left: 8px;;
+    box-sizing: border-box;
+}
+
+#tip {
+    float: right;
+    width: 50%;
+    height: 95%;
+    padding: 5px 10px 10px 10px;
+    margin-right: 0;
+    box-sizing: border-box;
+    border: 1px solid #ccc;
+    border-radius: 2px;
+    font-size: 15px;
+    line-height: 14px;
+}
+
+.files {
+    width: 50%;
+    height: 120px;
+    /* padding: 10px; */
+    margin-top: 15px;
+}
+
+.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;
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+}
+
+#bgSelect {
+    width: 50%;
+    height: 100px;
+    margin-top: 10px;
+}
+
+#bgSelect span {
+    /* display: block; */
+    font-size: 14px;
+    line-height: 30px;
+}
+
+#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;
+    margin-top: 5px;
+    font-size: 14px;
+    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: 900px;
+    top: 10px;
+    width: 440px;
+    height: 630px;
+    /* border: 1px solid rgb(238, 13, 13); */
+}
+
+#iconLib {
+    position: absolute;
+    width: 435px;
+    height: 620px;
+    left: 5px;
+    top: 5px;
+    overflow: auto;
+}
+
+.egameCanvas {
+    position: absolute;
+}
+
+.gameCanvas {
+    position: absolute;
+}
+
+#dataSelection, .appendSelection {
+    position: absolute;
+    /* top:0;
+    left:320px; */
+    z-index: 75;
+    width: 26px;
+    height: 26px;
+    margin: 3px 0 0 3px;
+    padding: 0;
+    /* display: none; */
+    box-sizing: border-box;
+    background-color: rgba(255, 255, 255, 0.0);
+    border: 1px solid #000;
+    box-shadow: 0 0 0 2px #fff,
+    0 0 0 3px #000;
+}
+
+.warnText {
+    color: #D50000;
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 1.2em;
+}
+
+.infoText {
+    color: #2196F3;
+}
+
+.successText {
+    color: #00897B;
+    line-height: 1.2em;
+}
+
+table, td {
+    border: 1px solid #fff;
+    color: #fff;
+    cursor: crosshair;
+}
+
+table.col {
+    position: relative;
+
+    text-align: center;
+    border-collapse: collapse;
+}
+
+table.col td {
+    background-color: #4DB6AC;
+}
+
+#arrColMark td {
+    width: 16px;
+}
+
+#arrColMark {
+    top: 2px;
+    left: 36px;
+    width: 385px;
+    height: 16px;
+    font-size: 13px;
+}
+
+#mapColMark {
+    top: 2px;
+    left: 19px;
+    width: 418px;
+    height: 16px;
+    font-size: 13px;
+}
+
+#mapColMark td {
+    width: 29px;
+}
+
+#mapColMark td:hover .colBlock {
+    position: absolute;
+    top: 19px;
+    height: 416px;
+    width: 32px;
+    z-index: 100;
+    background-color: rgba(38, 166, 154, .5);
+}
+
+table.row {
+    position: relative;
+    text-align: right;
+    vertical-align: middle;
+    border-collapse: collapse;
+}
+
+table.row td {
+    background-color: #4C221B;
+}
+
+#arrRowMark {
+    top: 5px;
+    left: 2px;
+    width: 16px;
+    height: 262px;
+    font-size: 12px;
+}
+
+#mapRowMark {
+    top: 1px;
+    left: 2px;
+    width: 16px;
+    height: 416px;
+    font-size: 12px;
+}
+
+#mapRowMark td {
+    height: 29px;
+}
+
+#mapRowMark td:hover .rowBlock {
+    position: absolute;
+    left: 18px;
+    height: 32px;
+    width: 416px;
+    z-index: 100;
+    background-color: rgba(76, 34, 27, .5);
+}
+
+#menuDiv * { margin: 0; padding: 0; }
+#midMenu{
+    background: #fff;
+    border-color: #ccc #666 #666 #ccc;
+    border-style: solid;
+    border-width: 1px;
+    cursor: default;
+    font: normal 13px Arial, sans-serif;
+    margin: 0;
+    outline: none;
+    padding: 4px 0;
+    position: absolute;
+    overflow-y: auto;
+    overflow-x: hidden;
+    max-height: 100%;
+    z-index: 101;
+
+    border-radius: 4px;
+}
+#midMenu .menuitem{
+    color: #000;
+    font: normal 13px Arial, sans-serif;
+    list-style: none;
+    margin: 0;
+    padding: 4px 7em 4px 28px;
+    white-space: nowrap;
+
+    /* padding-left: 12px; */
+
+    /* padding-right: 20px; */
+}
+#midMenu .menuitem:hover{
+    background-color: #d6e9f8;
+    border-color: #d6e9f8;
+    border-style: dotted;
+    border-width: 1px 0;
+    padding-bottom: 3px;
+    padding-top: 3px;
+}
+#midMenu .menuitem-content{
+    color: #000;
+    font: normal 13px Arial, sans-serif;
+}
+
+/* for vue dom */
+[v-cloak] {
+    display: none !important;
+}
diff --git a/_server/css/editor_mode_mobile.css b/_server/css/editor_mode_mobile.css
new file mode 100644
index 00000000..2cb2e95a
--- /dev/null
+++ b/_server/css/editor_mode_mobile.css
@@ -0,0 +1,227 @@
+.leftTab {
+    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);
+}
+
+.leftTab {
+    overflow: auto;
+    position: absolute;
+    height: 630px;
+}
+
+.leftTab > * {
+    margin: 2.5px 5px;
+}
+
+.leftTab > :first-child {
+    margin-top: 5px;
+}
+
+.leftTab > :last-child {
+    margin-bottom: 5px;
+}
+
+.leftTab {
+    left: 5px;
+    top: 10px;
+    width: 435px;
+}
+
+.leftTab .leftTabHeader {
+    position: fixed;
+    top: 15px;
+    left: 15px;
+}
+
+.leftTab .leftTabContent {
+    padding-top: 50px;
+}
+
+#appendPicSelection span {
+    position: absolute;
+    font-size: 11px;
+    -webkit-text-stroke: 1px red;
+    text-shadow: black 1px 0, black 0 1px, black -1px 0, black 0 -1px;
+}
+
+#left6 {
+    left: 5px;
+    top: 5px;
+    z-index: 200;
+    position: fixed;
+    background-color: rgb(245, 245, 245);
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+#left6 #blocklyArea {
+    float: left;
+    width: 60%;
+    height: 95%;
+}
+
+#left6 #blocklyDiv {
+    position: relative;
+}
+
+#left6 .CodeMirror {
+    border: 1px solid #eee;
+    float: left;
+    height: 95%;
+    width: 35%;
+}
+
+#left6 #codeArea {
+    width: 99.5%;
+    height: 15.4em;
+    overflow: y; /* resize:none; */
+}
+
+#left7 {
+    /* height: 440px; width: 375px;float:left; */
+    left: 5px;
+    top: 5px;
+    z-index: 200;
+    position: fixed;
+    background-color: rgb(245, 245, 245);
+    width: 100%;
+    height: 100%;
+}
+
+#left7 .CodeMirror {
+    /* border-top: 1px solid black;
+    border-bottom: 1px solid black; */
+    border: 1px solid #eee;
+    font-size: 14px;
+    height: 95%;
+    width: 95%;
+}
+
+.etable table,
+.etable table td {
+    color: #000;
+    cursor: auto;
+}
+
+/* copy from github-css https://github.com/sindresorhus/github-markdown-css  */
+.etable table {
+    border-spacing: 0;
+    border-collapse: collapse;
+}
+
+.etable table {
+    margin-top: 0;
+    margin-bottom: 16px;
+}
+
+.etable table {
+    display: block;
+    width: 100%;
+    overflow: auto;
+}
+
+.etable table th {
+    font-weight: 600;
+}
+
+.etable table th,
+.etable table td {
+    padding: 6px 13px;
+    border: 1px solid #dfe2e5;
+}
+
+.etable table tr {
+    background-color: #fff;
+    border-top: 1px solid #c6cbd1;
+}
+
+.etable table tr:nth-child(2n) {
+    background-color: #f6f8fa;
+}
+
+/* copy end ---------------------------------------------  */
+
+.etable tr {
+    width: 100%
+}
+
+.etable tr > :nth-child(1) {
+    width: 20%
+}
+
+.etable tr > :nth-child(2) {
+    width: 20%
+}
+
+.etable tr > :nth-child(3) {
+    width: 60%
+}
+
+.etable table {
+    overflow: visible;
+}
+
+.etable tr:not(:first-child) > :last-child:hover {
+    border: 1px solid rgb(87, 198, 232);
+    box-shadow: 0px 0px 3px rgb(87, 198, 232);
+}
+
+.etable tr:not(:first-child) > :nth-child(2):hover,
+.etable tr:not(:first-child) > :nth-child(1):hover {
+    border: 1px solid rgb(87, 232, 198);
+    box-shadow: 0px 0px 3px rgb(87, 232, 198);
+}
+
+.etable tr:not(:first-child) > :last-child {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    width: 100%;
+    position: relative;
+}
+
+div.etableInputDiv {
+    position: absolute;
+    padding: 5px 0 0 5px;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
+.etableInputDiv > * {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    width: 100%;
+    background-color: rgba(255, 255, 255, 0);
+    border: none;
+}
+
+.etableInputDiv input[type="text"] {
+
+}
+
+.etableInputDiv input[type="checkbox"] {
+    width: 16px;
+    height: 16px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    margin-left: -8px;
+    margin-top: -8px;
+}
+
+.etableInputDiv select {
+
+}
+
+.etableInputDiv textarea {
+    resize: none;
+}
+
+.etableInputDiv textarea:hover {
+    margin: -5px;
+}
diff --git a/editor-mobile.html b/editor-mobile.html
new file mode 100644
index 00000000..6222b821
--- /dev/null
+++ b/editor-mobile.html
@@ -0,0 +1,474 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <link href="_server/css/editor_mobile.css" rel="stylesheet">
+    <link href="_server/CodeMirror/codemirror.css" rel="stylesheet">
+    <link href="_server/css/editor_mode_mobile.css" rel="stylesheet">
+</head>
+<body>
+<script>
+    if(innerWidth>innerHeight){
+        alert('宽大于高的设备请使用正常版本的editor')
+        window.location='./editor.html'
+    }
+</script>
+<div class="main">
+    <div id="left" style="z-index:-1;opacity: 0;"><!-- map -->
+        <div id="arrEditor">
+            <table class="col" id='arrColMark'></table>
+            <table class="row" id='arrRowMark'></table>
+            <div id="editArea" v-cloak>
+                <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">
+                <input type="button" value="新建空白地图" id='newMap'/>
+                <input id='newFileName' placeholder="输入新楼层id" style="width: 120px"/>
+                <input type="checkbox" id='newMapStatus' checked='checked' style='vertical-align: bottom'/>
+                <span style='vertical-align: bottom; margin-left: -4px'>保留楼层属性</span>
+            </div>
+            <div style="position: absolute;left: 10px;bottom:0; margin-bottom: 90px">
+                <input type="button" value="导出地图" id="exportMap" v-on:click="exportMap"/>
+                <input type="button" value="复制地图" id="copyMap" v-on:click="copyMap"/>
+                <input type="button" value="清除地图" id='clearMap' v-on:click="clearMap"/>
+                <input type="button" value="删除地图" id="deleteMap" v-on:click="deleteMap"/>
+            </div>
+        </div>
+        <div id="objDataEditor">
+
+        </div>
+        <div id="eventEditor">
+
+        </div>
+
+    </div>
+    <div id="left1" class='leftTab' style="z-index:-1;opacity: 0;"><!-- appendpic -->
+        <h3 class="leftTabHeader">追加素材</h3>
+        <div class="leftTabContent">
+            <p>
+                <input id="selectFileBtn" type="button" value="导入文件到画板"/>
+                <select id="selectAppend"></select>
+                <!-- ["terrains", "animates", "enemys", "enemy48", "items", "npcs", "npc48"] -->
+                <input id="appendConfirm" type="button" value="追加"/>
+            </p>
+            <div id="appendPicCanvas" style="position:relative;overflow: auto;height:470px;">
+                <canvas style="position:absolute"></canvas><!-- 用于画出灰白相间背景 -->
+                <canvas style="position:absolute"></canvas><!-- 用于画出选中文件 -->
+                <canvas style="position:absolute;z-index:100"></canvas><!-- 用于响应鼠标点击 -->
+                <canvas style="position:absolute;display:none;"></canvas><!-- 画出追加后的sprite用于储存 -->
+                <div id="appendPicSelection">
+                    <div class="appendSelection"><span style="top: 0; left: 2px;">1</span></div>
+                    <div class="appendSelection"><span style="top: 0; left: 14px;">2</span></div>
+                    <div class="appendSelection"><span style="top: 12px; left: 2px;">3</span></div>
+                    <div class="appendSelection"><span style="top: 12px; left: 14px;">4</span></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div id="left2" class='leftTab' style="z-index:-1;opacity: 0;"><!-- loc -->
+        <h3 class="leftTabHeader">地图选点&nbsp;&nbsp;<button onclick="editor.mode.onmode('save')">保存</button>
+        </h3>
+        <div class="leftTabContent">
+            <p id='pos_a6771a78_a099_417c_828f_0a24851ebfce' style="margin-left: 15px">0,0</p>
+            <div class='etable'>
+                <table>
+                    <tbody id='table_3d846fc4_7644_44d1_aa04_433d266a73df'>
+                    <tr>
+                        <td>条目</td>
+                        <td>注释</td>
+                        <td>值</td>
+                    </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+    <div id="left3" class='leftTab' style="z-index:-1;opacity: 0;"><!-- emenyitem -->
+        <h3 class="leftTabHeader">图块属性&nbsp;&nbsp;<button onclick="editor.mode.onmode('save')">保存</button>
+        </h3>
+        <div class="leftTabContent">
+            <div id='newIdIdnum'><!-- id and idnum -->
+                <input placeholder="新id（唯一标识符）"/>
+                <input placeholder="新idnum（1000以内数字）"/>
+                <button>save</button>
+                <br/>
+                <button style="margin-top: 10px">自动注册</button>
+            </div>
+            <div id="enemyItemTable"><!-- enemy and item -->
+                <div class='etable'>
+                    <table>
+                        <tbody id='table_a3f03d4c_55b8_4ef6_b362_b345783acd72'>
+                        <tr>
+                            <td>条目</td>
+                            <td>注释</td>
+                            <td>值</td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div id="left4" class='leftTab' style="z-index:-1;opacity: 0;"><!-- floor -->
+        <h3 class="leftTabHeader">楼层属性&nbsp;&nbsp;<button onclick="editor.mode.onmode('save')">保存</button>
+        </h3>
+        <div class="leftTabContent">
+            <div class='etable'>
+                <table>
+                    <tbody id='table_4a3b1b09_b2fb_4bdf_b9ab_9f4cdac14c74'>
+                    <tr>
+                        <td>条目</td>
+                        <td>注释</td>
+                        <td>值</td>
+                    </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+    <div id="left5" class='leftTab' style="z-index:-1;opacity: 0;"><!-- tower -->
+        <h3 class="leftTabHeader">全塔属性&nbsp;&nbsp;<button onclick="editor.mode.onmode('save')">保存</button>
+        </h3>
+        <div class="leftTabContent">
+            <div class='etable'>
+                <table>
+                    <tbody id='table_b6a03e4c_5968_4633_ac40_0dfdd2c9cde5'>
+                    <tr>
+                        <td>条目</td>
+                        <td>注释</td>
+                        <td>值</td>
+                    </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+    <div id="left6" class='leftTab' style="z-index:-1;opacity: 0;">
+        <div style="position: relative; height: 95%"><!-- eventsEditor -->
+            <h3>事件编辑器 &nbsp;&nbsp;
+                <!--
+                <button onclick="editor_blockly.showXML()">Show XML</button>
+                <button onclick="editor_blockly.runCode()">console.log(obj=code)</button>
+                -->
+                <select id="entryType" disabled="disabled" style="display: none">
+                    <option value="event">event</option>
+                    <option value="changeFloor">changeFloor</option>
+                    <option value="point">point</option>
+                    <option value="shop">shop</option>
+                    <option value="afterBattle">afterBattle</option>
+                    <option value="afterGetItem">afterGetItem</option>
+                    <option value="afterOpenDoor">afterOpenDoor</option>
+                    <option value="firstArrive">firstArrive</option>
+                </select>
+                <button onclick="editor_blockly.confirm()">确认</button>
+                <button onclick="editor_blockly.parse()">解析</button>
+                <button onclick="editor_blockly.cancel()">取消</button>
+                <xml id="toolbox" style="display:none">
+                    <category name="入口方块"></category>
+                    <category name="语句块"></category>
+                    <category name="值块"></category>
+                    <category name="常见事件模板"></category>
+                </xml>
+            </h3>
+            <div style="position: relative;height: 100%">
+                <div id="blocklyArea">
+                    <div id="blocklyDiv"></div>
+                </div>
+                <textarea id="codeArea" spellcheck="false"></textarea>
+            </div>
+        </div>
+    </div>
+    <div id="left7" style="z-index:-1;opacity: 0;"><!-- 多行文本编辑器 -->
+        <button onclick="editor_multi.confirm()">确认</button>
+        <button onclick="editor_multi.cancel()">取消</button>
+        <input type="checkbox" onclick="editor_multi.toggerLint()" id="lintCheckbox"
+               style="vertical-align: bottom;margin-left:6px"/>
+        <span style="vertical-align: bottom; margin-left: -3px">语法检查</span>
+        <textarea id="multiLineCode" name="multiLineCode"></textarea>
+    </div>
+    <div id="left8" class='leftTab' style="z-index:-1;opacity: 0;"><!-- functions -->
+        <h3 class="leftTabHeader">脚本编辑&nbsp;&nbsp;<button onclick="editor.mode.onmode('save')">保存</button>
+        </h3>
+        <div class="leftTabContent">
+            <div class='etable'>
+                <table>
+                    <tbody id='table_e260a2be_5690_476a_b04e_dacddede78b3'>
+                    <tr>
+                        <td>条目</td>
+                        <td>注释</td>
+                        <td>值</td>
+                    </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+    <div id="mid">
+        <table class="col" id='mapColMark'></table>
+        <table class="row" id='mapRowMark'></table>
+        <div class="map" id="mapEdit">
+            <canvas class='gameCanvas' id='bg' width='416' height='416'></canvas>
+            <canvas class='gameCanvas' id='event' width='416' height='416'></canvas>
+            <canvas class='gameCanvas' id='event2' width='416' height='416'></canvas>
+            <canvas class='gameCanvas' id='efg' width='416' height='416'></canvas>
+            <canvas class='egameCanvas' id='eui' width='416' height='416' style='z-index:100'></canvas>
+        </div>
+        <div class="tools">
+            <div id="tip" v-cloak>
+                <div v-if="isSelectedBlock">
+                    <p v-if="isClearBlock" class="infoText">当前选择为清除块，可擦除地图上块</p>
+                    <div v-else>
+                        <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'] + (isAutotile ? '( '+infos['id']+' )' : '') }}</span>
+                        </p>
+                        <p>图块索引：<span class="infoText">{{ infos['y'] }}</span></p>
+                    </div>
+                </div>
+                <div v-else>
+                    <p v-if="whichShow" v-bind:class="[ (whichShow%2) ? 'warnText' : 'successText']">{{ mapMsg }}</p>
+                </div>
+            </div>
+
+
+            <select id="editModeSelect">
+                <option value="map">地图编辑</option>
+                <option value="loc">地图选点</option>
+                <option value="emenyitem">图块属性</option>
+                <option value="floor">楼层属性</option>
+                <option value="tower">全塔属性</option>
+                <option value="functions">脚本编辑</option>
+                <option value="appendpic">追加素材</option>
+            </select>
+            <br><br><br><br>
+            <select id="selectFloor"></select>
+            <input type="button" value="保存地图" id='saveFloor'/>
+            <!--  -->
+            <div id="bgSelect" v-cloak style="display:none">
+                <span>当前地板: </span>
+                <select v-model="selectedBg">
+                    <option disabled value="">请选择地板</option>
+                    <option v-for="bg in bgs" v-bind:value="bg">
+                        {{ bg }}
+                    </option>
+                </select>
+                <div class="selectpng">
+                    <input class='input' id='pin' v-model="imgname" placeholder="请输入自定义背景文件名"/>
+                    <input class='btn' type="button" value="确定" v-on:click="updatebg"/>
+                </div>
+            </div>
+            <!--  -->
+        </div>
+    </div>
+    <div id="right">
+        <div id="iconLib">
+            <canvas class='egameCanvas' id='edata' width='416' height='416' style='z-index:0'></canvas>
+            <div id="selectBox">
+                <div id='dataSelection' v-show="isSelected" v-cloak></div>
+            </div>
+        </div>
+    </div>
+    <div id="menuDiv">
+        <div id="midMenu" style="display:none">
+            <div id='chooseThis' class="menuitem"><div class="menuitem-content">选中此点</div></div>
+            <div id='chooseInRight' class="menuitem"><div class="menuitem-content">在素材区选中此图块</div></div>
+            <div id='copyLoc' class="menuitem"><div class="menuitem-content">复制此事件</div></div>
+            <div id='moveLoc' class="menuitem"><div class="menuitem-content">移动此事件</div></div>
+            <div id='clearLoc' class="menuitem"><div class="menuitem-content">清空此点及事件</div></div>
+        </div>
+    </div>
+</div>
+<!-- <script>/* -->
+<div id='gameGroup' style='display:none'>
+    <p id='mainTips'>请稍后...</p>
+    <div id='startPanel'>
+        <div id='startTop'>
+            <div id='startTopProgressBar'>
+                <div id='startTopProgress'></div>
+            </div>
+            <p id='startTopLoadTips'>资源即将开始加载</p>
+        </div>
+        <img id='startBackground'>
+        <p id='startLogo'></p>
+        <div id='startButtonGroup'>
+            <div id='startButtons'>
+                <span class='startButton' id='playGame'>开始游戏</span>
+                <span class='startButton' id='loadGame'>载入游戏</span>
+                <span class='startButton' id='replayGame'>录像回放</span>
+            </div>
+            <div id='levelChooseButtons'></div>
+        </div>
+    </div>
+    <div id='floorMsgGroup'>
+        <p id='logoLabel'></p>
+        <p id='versionLabel'></p>
+        <p id='floorNameLabel'></p>
+    </div>
+    <div id='statusBar' class="clearfix">
+        <div class="status" id="floorCol">
+            <img id="img-floor">
+            <p class='statusLabel' id='floor'></p>
+        </div>
+        <div class="status" id="lvCol">
+            <img id="img-lv">
+            <p class='statusLabel' id='lv'></p>
+        </div>
+        <div class="status" id='hpmaxCol'>
+            <img id="img-hpmax">
+            <p class='statusLabel' id='hpmax'></p>
+        </div>
+        <div class="status">
+            <img id="img-hp">
+            <p class='statusLabel' id='hp'></p>
+        </div>
+        <div class="status">
+            <img id="img-atk">
+            <p class='statusLabel' id='atk'></p>
+        </div>
+        <div class="status">
+            <img id="img-def">
+            <p class='statusLabel' id='def'></p>
+        </div>
+        <div class="status" id="mdefCol">
+            <img id="img-mdef">
+            <p class='statusLabel' id='mdef'></p>
+        </div>
+        <div class="status" id="moneyCol">
+            <img id="img-money">
+            <p class='statusLabel' id='money'></p>
+        </div>
+        <div class="status" id="expCol">
+            <img id="img-experience">
+            <p class='statusLabel' id='experience'></p>
+        </div>
+        <div class="status" id="upCol">
+            <img id="img-up">
+            <p class='statusLabel' id='up'></p>
+        </div>
+        <div class="status">
+            <span class='statusLabel' id='yellowKey' style="color:#FFCCAA"></span>
+            <span class='statusLabel' id='blueKey' style="color:#AAAADD"></span>
+            <span class='statusLabel' id='redKey' style="color:#FF8888"></span>
+        </div>
+        <div class="status" id="debuffCol">
+            <span class='statusLabel' id='poison' style="color: #AFFCA8;"></span>
+            <span class='statusLabel' id='weak' style="color: #FECCD0;"></span>
+            <span class='statusLabel' id='curse' style="color: #C2F4E7;"></span>
+        </div>
+    </div>
+    <div id="toolBar" class="clearfix">
+        <img class="tools" id='img-book'>
+        <img class="tools" id='img-fly'>
+        <img class="tools" id='img-toolbox'>
+        <img class="tools" id='img-shop'>
+        <img class="tools" id='img-save'>
+        <img class="tools" id='img-load'>
+        <img class="tools" id='img-settings'>
+        <p class="statusLabel tools" id="hard"></p>
+    </div>
+    <div id="gif"></div>
+    <div id="gif2"></div>
+    <div id="curtain"></div>
+    <!-- <canvas class='gameCanvas' id='bg' width='416' height='416'></canvas> -->
+    <!-- <canvas class='gameCanvas' id='event' width='416' height='416'></canvas> -->
+    <canvas class='gameCanvas' id='hero' width='416' height='416'></canvas>
+    <!-- <canvas class='gameCanvas' id='event2' width='416' height='416'></canvas> -->
+    <canvas class='gameCanvas' id='fg' width='416' height='416'></canvas>
+    <canvas class='gameCanvas' id='animate' width='416' height='416'></canvas>
+    <canvas class='gameCanvas' id='weather' width='416' height='416'></canvas>
+    <canvas class='gameCanvas' id='ui' width='416' height='416'></canvas>
+    <canvas class='gameCanvas' id='data' width='416' height='416'>此浏览器不支持HTML5</canvas>
+</div>
+<!-- */</script> -->
+<script>
+    // 生成定位编号
+    (function () {
+        var colNum = ' ';
+        for (var i = 0; i < 13; i++) {
+            var tpl = '<td>' + i + '<div class="colBlock" style="left:' + (i * 32 + 1) + 'px;"></div></td>';
+            colNum += tpl;
+        }
+        arrColMark.innerHTML = '<tr>' + colNum + '</tr>';
+        mapColMark.innerHTML = '<tr>' + colNum + '</tr>';
+        var rowNum = ' ';
+        for (var i = 0; i < 13; i++) {
+            var tpl = '<tr><td>' + i + '<div class="rowBlock" style="top:' + (i * 32 + 1) + 'px;"></div></td></tr>';
+            rowNum += tpl;
+        }
+        arrRowMark.innerHTML = rowNum;
+        mapRowMark.innerHTML = rowNum;
+    })();
+</script>
+
+<!-- =========================================================== -->
+
+<script>
+if (location.protocol.indexOf("http")!=0) {
+    alert("请在启动服务中打开本编辑器！不然包括编辑在内的绝大多数功能都无法使用。");
+}
+</script>
+
+<script src='_server/vendor/vue.min.js'></script>
+<!-- <script src="https://cdn.bootcss.com/vue/2.5.13/vue.js"></script> -->
+<script src='_server/vendor/polyfill.min.js'></script>
+<script src='_server/fs.js'></script>
+<script src='_server/editor_file.js'></script>
+<script src='_server/editor_mode.js'></script>
+<script src='_server/vm.js'></script>
+<script src='libs/thirdparty/lz-string.min.js'></script>
+<script id='mainScript' src='main.js'></script>
+<script>
+    //所有全局量
+    __all__ = ['Vue', 'fs', 'editor_file', 'editor_mode', 'main', 'core', 'hasOwnProp', 'printf', 'printe', 'editor', 'converter', 'ActionParser', 'MotaActionFunctions', 'MotaActionBlocks'];
+    __id__ = ['editArea', 'arrRowMark', 'mapRowMark', 'data', 'bg', 'dataSelection', 'blocklyDiv', 'codeAreaHL', 'entryType'];
+    __Vue__ = ['editArea', 'exportMap', 'copyMap', 'clearMap', 'deleteMap', 'tip', 'selectBox'];
+    //var event = document.getElementById('event');
+
+    var hasOwnProperty = Object.prototype.hasOwnProperty;
+
+    function hasOwnProp(obj, key) {
+        return hasOwnProperty.call(obj, key)
+    }
+</script>
+<script src='_server/editor.js'></script>
+<script>
+    var useCompress = main.useCompress;
+    main.useCompress = false;
+    main.init('editor', function () {
+        editor.init(function () {
+            editor.pos = {x: 0, y: 0};
+            editor.mode.loc();
+            editor.info = editor.ids[editor.indexs[201]];
+            editor.mode.emenyitem();
+            editor.mode.floor();
+            editor.mode.tower();
+            editor.mode.functions();
+            editor.mode.showMode('floor');
+            editor.mode.listen();
+            editor_multi = editor_multi();
+            editor_blockly = editor_blockly();
+            editor.useCompress = useCompress;
+            delete(useCompress);
+        });
+    });
+
+
+    //main.listen();
+</script>
+
+<!-- hightlight textarea -->
+<script src='_server/editor_multi.js'></script>
+<!-- blockly -->
+<script src="_server/blockly/Converter.bundle.min.js"></script>
+<script src="_server/blockly/blockly_compressed.min.js"></script>
+<script src="_server/blockly/blockly_config.min.js"></script>
+<script src='_server/editor_blockly.js'></script>
+<!-- codemirror -->
+<script src="_server/CodeMirror/codeMirror.bundle.min.js"></script>
+<script src="_server/CodeMirror/jshint.min.js"></script>
+<script src="_server/CodeMirror/codeMirror.plugin.min.js"></script>
+
+</body>
+</html>