diff --git a/_server/css/editor_mobile.css b/_server/css/editor_mobile.css new file mode 100644 index 00000000..db75764b --- /dev/null +++ b/_server/css/editor_mobile.css @@ -0,0 +1,400 @@ +html{ + font-size: 4vmin; +} +input, textarea, select, button { + font-size: 1rem; +} + +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); */ + background-color: #F5F5F5; + width: 100vmin; + height: 100vmin; +} + +#left { + position: absolute; +} + +#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; +} + +.map { + position: absolute; + left: 4vmin; + top: 4vmin; + width: 96vmin; + height: 96vmin; +} +.map canvas{ + width: 96vmin; + height: 96vmin; +} + +#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; + /* border: 1px solid rgb(238, 13, 13); */ +} + +#iconLib { + position: absolute; + width: 100vmin; + height: 100vmin; + 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: 0; + left: 4vmin; + width: 96vmin; + height: 4vmin; + font-size: 3vmin; +} + + +#mapColMark td { + width: 29px; +} + +#mapColMark td:hover .colBlock { + position: absolute; + top: 4vmin; + height: 96vmin; + width: 7.38vmin; + 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: 0; + left: 0; + width: 4vmin; + height: 96vmin; + font-size: 3vmin; +} + +#mapRowMark td { + height: 29px; +} + +#mapRowMark td:hover .rowBlock { + position: absolute; + left: 4vmin; + height: 7.38vmin; + width: 96vmin; + 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 2.5vmin Arial, sans-serif; + margin: 0; + outline: none; + padding: 4px 0; + overflow-y: auto; + overflow-x: hidden; + max-height: 100%; + max-width: 40%; + z-index: 101; + + border-radius: 4px; +} +#midMenu .menuitem{ + color: #000; + font: normal 2.5vmin 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 2.5vmin Arial, sans-serif; +} + +/* for vue dom */ +[v-cloak] { + display: none !important; +} + +#down{ + position: absolute; + left:0; + top:100vmin; + bottom: 0; + width: 100vmin; +} \ No newline at end of file diff --git a/_server/css/editor_mode_mobile.css b/_server/css/editor_mode_mobile.css new file mode 100644 index 00000000..c8e9fc4c --- /dev/null +++ b/_server/css/editor_mode_mobile.css @@ -0,0 +1,235 @@ +.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); */ + background-color: #F5F5F5; + width: 100vmin; + height: 100vmin; +} + +.leftTab { + overflow: auto; + position: absolute; + height: 100vmin; +} + +.leftTab > * { + margin: 2.5px 5px; +} + +.leftTab > :first-child { + margin-top: 5px; +} + +.leftTab > :last-child { + margin-bottom: 5px; +} + +.leftTab { + left: 0; + top: 0; + width: 100vmin; +} + +.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: 0; + top: 0; + z-index: 200; + position: fixed; + background-color: rgb(245, 245, 245); + width: 100%; + height: 100%; + overflow: hidden; +} +#left6 h3{ + font-size: 3vmax; + margin: 2vmax 0; + +} + +#left6 #blocklyArea { + + width: 100vmin; + height: 55vmax; +} + +#left6 #blocklyDiv { + position: relative; +} + +#left6 .CodeMirror { + border: 1px solid #eee; + + height: 27vmax; + width: 100%; +} + +#left6 #codeArea { + width: 99.5%; + height: 15.4em; + overflow: y; /* resize:none; */ +} + +#left7 { + /* height: 440px; width: 375px;float:left; */ + left: 0; + top: 0; + 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/_server/editor.js b/_server/editor.js index ebbbd889..9485a60a 100644 --- 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(); diff --git a/_server/editor_mode.js b/_server/editor_mode.js index 8b263262..c35d9cd1 100644 --- 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; } }); } diff --git a/_server/vm.js b/_server/vm.js index e23fd65d..82b3139d 100644 --- 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(); diff --git a/editor-mobile.html b/editor-mobile.html new file mode 100644 index 00000000..8fb7d599 --- /dev/null +++ b/editor-mobile.html @@ -0,0 +1,551 @@ + + + + + + + + + + + +
+
+
+
+
+
+ +

{{ errors[error-1] }}

+
+
+ + + + 保留楼层属性 +
+
+ + + + +
+
+
+ +
+
+ +
+ +
+
+

追加素材

+
+

+ + + + +

+
+ + + + +
+
1
+
2
+
3
+
4
+
+
+
+
+
+

地图选点   +

+
+

0,0

+
+ + + + + + + + +
条目注释
+
+
+
+
+

图块属性   +

+
+
+ + + +
+ +
+
+
+ + + + + + + + +
条目注释
+
+
+
+
+
+

楼层属性   +

+
+
+ + + + + + + + +
条目注释
+
+
+
+
+

全塔属性   +

+
+
+ + + + + + + + +
条目注释
+
+
+
+
+
+

事件编辑器    + + + + + + +

+
+
+
+
+ +
+
+
+
+ + + + 语法检查 + +
+
+

脚本编辑   +

+
+
+ + + + + + + + +
条目注释
+
+
+
+
+
+
+
+ + + + + +
+ +
+ +
+
+
+
+
+

当前选择为清除块,可擦除地图上块

+
+

图块编号:{{ infos['idnum'] }}

+

图块ID:{{ infos['id'] }}

+

该图块无对应的数字或ID存在,请先前往icons.js和maps.js中进行定义!

+

图块所在素材:{{ infos['images'] + (isAutotile ? '( '+infos['id']+' )' : '') }} +

+

图块索引:{{ infos['y'] }}

+
+
+
+

{{ mapMsg }}

+
+
+ + + + + + + +
+ + + + + + + + +
+
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/editor.html b/editor.html index 81b028f5..9041889e 100644 --- a/editor.html +++ b/editor.html @@ -7,6 +7,11 @@ +