finish

2018-07-05 18:13:04 +08:00 · 2018-07-05 18:13:04 +08:00 · cd23d0abba
commit cd23d0abba
parent 11ed345321
7 changed files with 136 additions and 46 deletions
--- a/_server/css/editor_mobile.css
+++ b/_server/css/editor_mobile.css
@ -203,8 +203,8 @@ body {

 #iconLib {
    position: absolute;
-    width: 435px;
-    height: 620px;
+    width: 100vmin;
+    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 */
--- a/_server/css/editor_mode_mobile.css
+++ b/_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;
-    top: 10px;
-    width: 435px;
+    left: 0;
+    top: 0;
+    width: 100vmin;
 }

 .leftTab .leftTabHeader {
@ -49,8 +49,8 @@
 }

 #left6 {
-    left: 5px;
-    top: 5px;
+    left: 0;
+    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%;
-    height: 95%;
+
+    width: 100vmin;
+    height: 55vmax;
 }

 #left6 #blocklyDiv {
@ -71,9 +76,9 @@

 #left6 .CodeMirror {
    border: 1px solid #eee;
-    float: left;
-    height: 95%;
-    width: 35%;
+
+    height: 27vmax;
+    width: 100%;
 }

 #left6 #codeArea {
@ -84,8 +89,8 @@

 #left7 {
    /* height: 440px; width: 375px;float:left; */
-    left: 5px;
-    top: 5px;
+    left: 0;
+    top: 0;
    z-index: 200;
    position: fixed;
    background-color: rgb(245, 245, 245);
--- a/_server/editor.js
+++ b/_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,8 +444,10 @@ 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;
@ -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();
--- a/_server/editor_mode.js
+++ b/_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;
                }
            });
        }
--- a/_server/vm.js
+++ b/_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');
-            eid.push(id_);
+            if (['left', 'left1', 'left2', 'left3', 'left4', 'left5', 'left8', 'mobileview'].indexOf(id_) !== -1) clickpath.push('edit');
+            clickpath.push(id_);
        }
    });
-    //console.log(eid);
-    if (eid.indexOf('edit') === -1) {
-        if (eid.indexOf('tip') === -1) {
+
+    if (clickpath.indexOf('edit') === -1 && clickpath.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){
+    if (e.button!=2 && !editor.isMobile){
        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();
--- a/editor-mobile.html
+++ b/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, 点击确定跳转')
-        window.location='./editor.html'
+        confirm('宽大于高的设备请使用正常版本的editor, 点击确定跳转')?(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();
        });
    });

--- a/editor.html
+++ b/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">