Update mobile ui

_server/css/editor_mobile.css

@@ -63,14 +63,6 @@ body {
     overflow: auto;
 }
 
-#editTip {
-    position: absolute;
-    width: 100%;
-    margin-bottom: 120px;
-    bottom: 0;
-    left: 10px;
-}
-
 #editArea p {
     margin: 10px;
     display: block;
@@ -117,14 +109,19 @@ body {
 #tip {
     float: right;
     width: 50%;
-    height: 95%;
+    /* height: 95%; */
+    min-height: 9rem;
     padding: 5px 10px 10px 10px;
     margin-right: 0;
     box-sizing: border-box;
     border: 1px solid #ccc;
     border-radius: 2px;
-    font-size: 15px;
+    font-size: 1rem;
-    line-height: 14px;
+    line-height: 0.93rem;
+}
+
+#tip p{
+    margin: 0.5rem
 }
 
 .files {
@@ -251,8 +248,8 @@ body {
     line-height: 1.2em;
 }
 
-table, td {
+td {
-    border: 1px solid #fff;
+    border: 0.230vmin solid #fff;
     color: #fff;
     cursor: crosshair;
 }
@@ -290,14 +287,17 @@ table.col td {
 
 
 #mapColMark td {
-    width: 29px;
+    width: 7.15vmin;
+    padding: 0;
+    border-bottom-width: 0px;
+    border-top-width: 0px;
 }
 
 #mapColMark td:hover .colBlock {
     position: absolute;
     top: 4vmin;
     height: 96vmin;
-    width: 7.38vmin;
+    width: 7.15vmin;
     z-index: 100;
     background-color: rgba(38, 166, 154, .5);
 }
@@ -330,13 +330,16 @@ table.row td {
 }
 
 #mapRowMark td {
-    height: 29px;
+    height: 7.15vmin;
+    padding: 0;
+    border-left-width: 0px;
+    border-right-width: 0px;
 }
 
 #mapRowMark td:hover .rowBlock {
     position: absolute;
     left: 4vmin;
-    height: 7.38vmin;
+    height: 7.15vmin;
     width: 96vmin;
     z-index: 100;
     background-color: rgba(76, 34, 27, .5);

_server/css/editor_mode_mobile.css

@@ -59,15 +59,15 @@
     overflow: hidden;
 }
 #left6 h3{
-    font-size: 3vmax;
+    font-size: 3.5vh;
-    margin: 2vmax 0;
+    margin: 1vh 0;
     
 }
 
 #left6 #blocklyArea {
 
     width: 100vmin;
-    height: 55vmax;
+    height: 60vh;
 }
 
 #left6 #blocklyDiv {
@@ -77,7 +77,7 @@
 #left6 .CodeMirror {
     border: 1px solid #eee;
 
-    height: 27vmax;
+    height: 21vh;
     width: 100%;
 }
 

_server/editor_mode.js

@@ -122,9 +122,9 @@ editor_mode = function (editor) {
                     if (cobj._type === 'event') editor_blockly.import(guid, {type: cobj._event});
                     if (cobj._type === 'textarea') editor_multi.import(guid, {lint: cobj._lint, string: cobj._string});
                 }
-                thisTr.onclick = function(){
+                // thisTr.onclick = function(){
-                    editor.lastClickId=guid;
+                //     editor.lastClickId=guid;
-                }
+                // }
             });
         }
         return {"HTML": outstr.join(''), "guids": guids, "listen": listen};

_server/vm.js

@@ -1,9 +1,21 @@
 // vue 相关处理
 document.body.onmousedown = function (e) {
     //console.log(e);
-
     var clickpath = [];
-    e.path.forEach(function (node) {
+    var getpath=function(e) {
+        var path = [];
+        var currentElem = e.target;
+        while (currentElem) {
+            path.push(currentElem);
+            currentElem = currentElem.parentElement;
+        }
+        if (path.indexOf(window) === -1 && path.indexOf(document) === -1)
+            path.push(document);
+        if (path.indexOf(window) === -1)
+            path.push(window);
+        return path;
+    }
+    getpath(e).forEach(function (node) {
         if (!node.getAttribute) return;
         var id_ = node.getAttribute('id');
         if (id_) {
@@ -32,7 +44,7 @@ document.body.onmousedown = function (e) {
     if (e.button!=2 && !editor.isMobile){
         editor.hideMidMenu();
     }
-    if (clickpath.indexOf('down') !== -1 && editor.isMobile){
+    if (clickpath.indexOf('down') !== -1 && editor.isMobile && clickpath.indexOf('midMenu') === -1){
         editor.hideMidMenu();
     }
     if(clickpath.length>=2 && clickpath[0].indexOf('id_')===0){editor.lastClickId=clickpath[0]}

editor-mobile.html

@@ -22,13 +22,13 @@
                 <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">
+            <div id="editTip" style="position: absolute;width: 100%;margin-bottom: 20%;bottom: 0;left: 10px;">
                 <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">
+            <div style="position: absolute;left: 10px;bottom:0; margin-bottom: 0%">
                 <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"/>
@@ -221,7 +221,7 @@
         </div>
     </div>
     <div id="down">
-        <div style="margin:1rem">
+        <div style="margin:0.5rem">
             <div class="tools">
                 <div id="tip" v-cloak>
                     <div v-if="isSelectedBlock">
@@ -245,6 +245,15 @@
                     <input type="button" value="地图区"/>
                     <input type="button" value="素材库"/>
                 </span>
+                <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>
                 <select id="editModeSelect">
                     <option value="map">地图编辑</option>
                     <option value="loc">地图选点</option>
@@ -257,21 +266,11 @@
                 <br>
                 <select id="selectFloor"></select>
                 <input type="button" value="保存地图" id='saveFloor'/>
-                <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>
                 <span id='mobileeditdata' style="display:none">
                     <input type="button" value="编辑"/>
                     <input type="button" value="显示完整名称"/>
                     <input type="button" value="显示完整注释"/>
                 </span>
-                <input type="button" value="取消素材区的选中" id='cancelright'/>
                 <!--  -->
                 <div id="bgSelect" v-cloak style="display:none">
                     <span>当前地板: </span>
@@ -453,7 +452,6 @@ var editor_mobile_listen=function(){
     var mid=document.getElementById('mid');
     var right=document.getElementById('right');
     var mobileeditdata=document.getElementById('mobileeditdata');
-    var cancelright=document.getElementById('cancelright');
 
     mobileview.children[0].onclick=function(){
         mid.style='z-index:-1;opacity: 0;';
@@ -500,10 +498,27 @@ var editor_mobile_listen=function(){
         printf(info[0].children[1].getAttribute('title'))
     }
 
-    cancelright.onclick=function(){
+    document.body.ontouchstart=document.body.onmousedown;
-        selectBox.isSelected = false;
+    document.body.onmousedown=null;
-        editor.info = {};
+
-    }
+    //=====
+
+    var chooseThis = document.getElementById('chooseThis');
+    chooseThis.ontouchstart=chooseThis.onmousedown
+    chooseThis.onmousedown=null
+    var chooseInRight = document.getElementById('chooseInRight');
+    chooseInRight.ontouchstart=chooseInRight.onmousedown
+    chooseInRight.onmousedown=null
+    var copyLoc = document.getElementById('copyLoc');
+    copyLoc.ontouchstart=copyLoc.onmousedown
+    copyLoc.onmousedown=null
+    var moveLoc = document.getElementById('moveLoc');
+    moveLoc.ontouchstart=moveLoc.onmousedown
+    moveLoc.onmousedown=null
+    var clearLoc = document.getElementById('clearLoc');
+    clearLoc.ontouchstart=clearLoc.onmousedown
+    clearLoc.onmousedown=null
+    
 }
 
     var useCompress = main.useCompress;