finish

_server/css/editor_mobile.css

@@ -203,8 +203,8 @@ body {
 
 #iconLib {
     position: absolute;
-    width: 435px;
+    width: 100vmin;
-    height: 620px;
+    height: 100vmin;
     left: 5px;
     top: 5px;
     overflow: auto;
@@ -349,21 +349,21 @@ table.row td {
     border-style: solid;
     border-width: 1px;
     cursor: default;
-    font: normal 13px Arial, sans-serif;
+    font: normal 2.5vmin Arial, sans-serif;
     margin: 0;
     outline: none;
     padding: 4px 0;
-    position: absolute;
     overflow-y: auto;
     overflow-x: hidden;
     max-height: 100%;
+    max-width: 40%;
     z-index: 101;
 
     border-radius: 4px;
 }
 #midMenu .menuitem{
     color: #000;
-    font: normal 13px Arial, sans-serif;
+    font: normal 2.5vmin Arial, sans-serif;
     list-style: none;
     margin: 0;
     padding: 4px 7em 4px 28px;
@@ -383,7 +383,7 @@ table.row td {
 }
 #midMenu .menuitem-content{
     color: #000;
-    font: normal 13px Arial, sans-serif;
+    font: normal 2.5vmin Arial, sans-serif;
 }
 
 /* for vue dom */

_server/css/editor_mode_mobile.css

@@ -10,7 +10,7 @@
 .leftTab {
     overflow: auto;
     position: absolute;
-    height: 630px;
+    height: 100vmin;
 }
 
 .leftTab > * {
@@ -26,9 +26,9 @@
 }
 
 .leftTab {
-    left: 5px;
+    left: 0;
-    top: 10px;
+    top: 0;
-    width: 435px;
+    width: 100vmin;
 }
 
 .leftTab .leftTabHeader {
@@ -49,8 +49,8 @@
 }
 
 #left6 {
-    left: 5px;
+    left: 0;
-    top: 5px;
+    top: 0;
     z-index: 200;
     position: fixed;
     background-color: rgb(245, 245, 245);
@@ -58,11 +58,16 @@
     height: 100%;
     overflow: hidden;
 }
+#left6 h3{
+    font-size: 3vmax;
+    margin: 2vmax 0;
+    
+}
 
 #left6 #blocklyArea {
-    float: left;
+
-    width: 60%;
+    width: 100vmin;
-    height: 95%;
+    height: 55vmax;
 }
 
 #left6 #blocklyDiv {
@@ -71,9 +76,9 @@
 
 #left6 .CodeMirror {
     border: 1px solid #eee;
-    float: left;
+
-    height: 95%;
+    height: 27vmax;
-    width: 35%;
+    width: 100%;
 }
 
 #left6 #codeArea {
@@ -84,8 +89,8 @@
 
 #left7 {
     /* height: 440px; width: 375px;float:left; */
-    left: 5px;
+    left: 0;
-    top: 5px;
+    top: 0;
     z-index: 200;
     position: fixed;
     background-color: rgb(245, 245, 245);

_server/editor.js

@@ -402,7 +402,7 @@ editor.prototype.listen = function () {
         editor.loc = {
             'x': scrollLeft + e.clientX - mid.offsetLeft - mapEdit.offsetLeft,
             'y': scrollTop + e.clientY - mid.offsetTop - mapEdit.offsetTop,
-            'size': 32
+            'size': editor.isMobile?(32*innerWidth*0.96/416):32
         };
         return editor.loc;
     }//返回可用的组件内坐标
@@ -444,9 +444,11 @@ editor.prototype.listen = function () {
             editor_mode.onmode('loc');
             //editor_mode.loc();
             //tip.whichShow = 1;
+            if(editor.isMobile)editor.showMidMenu(e.clientX,e.clientY);
             return;
         }
         
+
         holdingPath = 1;
         mouseOutCheck = 2;
         setTimeout(clear1);
@@ -674,6 +676,7 @@ editor.prototype.listen = function () {
         var locStr='('+editor.lastRightButtonPos[1].x+','+editor.lastRightButtonPos[1].y+')';
         var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
         var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+        chooseThis.children[0].innerHTML='选中此点'+'('+editor.pos.x+','+editor.pos.y+')'
         copyLoc.children[0].innerHTML='复制事件'+locStr+'到此处';
         moveLoc.children[0].innerHTML='交换事件'+locStr+'与此事件的位置';
         midMenu.style='top:'+(y+scrollTop)+'px;left:'+(x+scrollLeft)+'px;';
@@ -685,8 +688,7 @@ editor.prototype.listen = function () {
         editor.hideMidMenu();
         e.stopPropagation();
         selectBox.isSelected = false;
-        var loc = eToLoc(e);
+
-        var pos = locToPos(loc);
         editor_mode.onmode('nextChange');
         editor_mode.onmode('loc');
         //editor_mode.loc();

_server/editor_mode.js

@@ -121,7 +121,9 @@ editor_mode = function (editor) {
                 input.ondblclick = function () {
                     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(){
+                    editor.lastClickId=guid;
                 }
             });
         }

_server/vm.js

@@ -1,19 +1,19 @@
 // vue 相关处理
-
 document.body.onmousedown = function (e) {
     //console.log(e);
-    var eid = [];
+
+    var clickpath = [];
     e.path.forEach(function (node) {
         if (!node.getAttribute) return;
         var id_ = node.getAttribute('id');
         if (id_) {
-            if (['left', 'left1', 'left2', 'left3', 'left4', 'left5', 'left8'].indexOf(id_) !== -1) eid.push('edit');
+            if (['left', 'left1', 'left2', 'left3', 'left4', 'left5', 'left8', 'mobileview'].indexOf(id_) !== -1) clickpath.push('edit');
-            eid.push(id_);
+            clickpath.push(id_);
         }
     });
-    //console.log(eid);
+
-    if (eid.indexOf('edit') === -1) {
+    if (clickpath.indexOf('edit') === -1 && clickpath.indexOf('tip') === -1) {
-        if (eid.indexOf('tip') === -1) {
+        if (clickpath.indexOf('eui') === -1) {
             if (selectBox.isSelected) {
                 editor_mode.onmode('');
                 editor.file.saveFloorFile(function (err) {
@@ -25,13 +25,17 @@ document.body.onmousedown = function (e) {
                 });
             }
             selectBox.isSelected = false;
+            editor.info = {};
         }
     }
     //editor.mode.onmode('');
-    editor.info = {};
+    if (e.button!=2 && !editor.isMobile){
-    if (e.button!=2){
         editor.hideMidMenu();
     }
+    if (clickpath.indexOf('down') !== -1 && editor.isMobile){
+        editor.hideMidMenu();
+    }
+    if(clickpath.length>=2 && clickpath[0].indexOf('id_')===0){editor.lastClickId=clickpath[0]}
 }
 iconLib.onmousedown = function (e) {
     e.stopPropagation();

editor-mobile.html

@@ -2,6 +2,7 @@
 <html>
 <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1,user-scalable=no" />
     <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">
@@ -9,8 +10,7 @@
 <body>
 <script>
     if(innerWidth>innerHeight){ //pic:1242*2208 | chrome info:1340*2380
-        alert('宽大于高的设备请使用正常版本的editor, 点击确定跳转')
+        confirm('宽大于高的设备请使用正常版本的editor, 点击确定跳转')?(window.location='./editor.html'):'';
-        window.location='./editor.html'
     }
 </script>
 <div class="main">
@@ -244,7 +244,11 @@
                     </div>
                 </div>
     
-                <input type="button" value="数据区"/><input type="button" value="地图区"/><input type="button" value="素材库"/>
+                <span id='mobileview'>
+                    <input type="button" value="数据区"/>
+                    <input type="button" value="地图区"/>
+                    <input type="button" value="素材库"/>
+                </span>
                 <select id="editModeSelect">
                     <option value="map">地图编辑</option>
                     <option value="loc">地图选点</option>
@@ -254,9 +258,24 @@
                     <option value="functions">脚本编辑</option>
                     <option value="appendpic">追加素材</option>
                 </select>
-                <br><br>
+                <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>
@@ -275,15 +294,7 @@
             </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'>
@@ -439,6 +450,66 @@ if (location.protocol.indexOf("http")!=0) {
 </script>
 <script src='_server/editor.js'></script>
 <script>
+editor.isMobile=true
+var editor_mobile_listen=function(){
+    var mobileview=document.getElementById('mobileview');
+    var editModeSelect=document.getElementById('editModeSelect');
+    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;';
+        right.style='z-index:-1;opacity: 0;';
+        mobileeditdata.style='';
+        editor.mode.showMode(editModeSelect.value);
+        editor.hideMidMenu();
+    }
+    mobileview.children[1].onclick=function(){
+        mid.style='';
+        right.style='z-index:-1;opacity: 0;';
+        mobileeditdata.style='z-index:-1;opacity: 0;';
+        editor.lastClickId='';
+    }
+    mobileview.children[2].onclick=function(){
+        mid.style='z-index:-1;opacity: 0;';
+        right.style='';
+        mobileeditdata.style='z-index:-1;opacity: 0;';
+        editor.lastClickId='';
+    }
+
+
+    var gettrbyid=function(){
+        if(!editor.lastClickId)return false;
+        thisTr = document.getElementById(editor.lastClickId);
+        input = thisTr.children[2].children[0].children[0];
+        field = thisTr.children[0].getAttribute('title');
+        cobj = JSON.parse(thisTr.children[1].getAttribute('cobj'));
+        return [thisTr,input,field,cobj];
+    }
+    mobileeditdata.children[0].onclick=function(){
+        var info = gettrbyid()
+        if(!info)return;
+        info[1].ondblclick()
+    }
+    mobileeditdata.children[1].onclick=function(){
+        var info = gettrbyid()
+        if(!info)return;
+        printf(info[2])
+    }
+    mobileeditdata.children[2].onclick=function(){
+        var info = gettrbyid()
+        if(!info)return;
+        printf(info[0].children[1].getAttribute('title'))
+    }
+
+    cancelright.onclick=function(){
+        selectBox.isSelected = false;
+        editor.info = {};
+    }
+}
+
     var useCompress = main.useCompress;
     main.useCompress = false;
     main.init('editor', function () {
@@ -456,6 +527,7 @@ if (location.protocol.indexOf("http")!=0) {
             editor_blockly = editor_blockly();
             editor.useCompress = useCompress;
             delete(useCompress);
+            editor_mobile_listen();
         });
     });
 

editor.html

@@ -7,6 +7,11 @@
     <link href="_server/css/editor_mode.css" rel="stylesheet">
 </head>
 <body>
+<script>
+    if(innerWidth<innerHeight){ //pic:1242*2208 | chrome info:1340*2380
+        confirm('高大于宽的设备请使用移动版本的editor, 点击确定跳转')?(window.location='./editor-mobile.html'):'';
+    }
+</script>
 <div class="main">
     <div id="left" style="z-index:-1;opacity: 0;"><!-- map -->
         <div id="arrEditor">