From de817bef3a9c75c40cbc1bcc0d679c4297de7fec Mon Sep 17 00:00:00 2001 From: YouWei Zhao Date: Mon, 19 Aug 2019 19:45:56 +0800 Subject: [PATCH] reorder unsorted1 (unfinished) --- _server/editor.js | 57 +++- _server/editor_datapanel.js | 1 + _server/editor_file_unsorted.js | 2 +- _server/editor_mappanel.js | 258 +++++++++++++++ _server/editor_materialpanel.js | 4 + _server/editor_ui.js | 266 +++++++++++++++ _server/editor_unsorted_1.js | 567 +++----------------------------- _server/refactoring.md | 2 +- editor-mobile.html | 4 + editor.html | 4 + 10 files changed, 625 insertions(+), 540 deletions(-) create mode 100644 _server/editor_datapanel.js create mode 100644 _server/editor_mappanel.js create mode 100644 _server/editor_materialpanel.js create mode 100644 _server/editor_ui.js diff --git a/_server/editor.js b/_server/editor.js index cb7490a3..f28237eb 100644 --- a/_server/editor.js +++ b/_server/editor.js @@ -4,6 +4,39 @@ function editor() { this.layerMod = "map";//["fgmap","map","bgmap"] this.isMobile = false; + this.dom={ + body:document.body, + eui:document.getElementById('eui'), + euiCtx:document.getElementById('eui').getContext('2d'), + mid:document.getElementById('mid'), + mapEdit:document.getElementById('mapEdit'), + selectFloor:document.getElementById('selectFloor'), + iconExpandBtn :document.getElementById('iconExpandBtn'), + }; + + this.uifunctions={}; + this.uivalues={ + // 绘制区拖动有关 + holdingPath : 0, + stepPostfix : null,//用于存放寻路检测的第一个点之后的后续移动 + mouseOutCheck : 2, + startPos:null, + endPos:null, + // 撤销/恢复 + currDrawData : { + pos: [], + info: {} + }, + reDo : null, + preMapData : null, + // + shortcut:{}, + copyedInfo : null, + scrollBarHeight :0, + folded:false, + + }; + window.onerror = function (msg, url, lineNo, columnNo, error) { var string = msg.toLowerCase(); var substring = "script error"; @@ -52,6 +85,10 @@ editor.prototype.init = function (callback) { editor_game_wrapper(editor, main, core); editor_file_wrapper(editor); editor_table_wrapper(editor); + editor_ui_wrapper(editor); + editor_mappanel_wrapper(editor); + editor_datapanel_wrapper(editor); + editor_materialpanel_wrapper(editor); editor_unsorted_1_wrapper(editor); editor.printe=printe; afterMainInit(); @@ -148,7 +185,7 @@ editor.prototype.changeFloor = function (floorId, callback) { }); editor.currentFloorData[name]=mapArray; } - editor.preMapData = null; + editor.uivalues.preMapData = null; core.changeFloor(floorId, null, {"x": 0, "y": 0, "direction": "up"}, null, function () { editor.game.fetchMapFromCore(); editor.updateMap(); @@ -284,8 +321,8 @@ editor.prototype.drawInitData = function (icons) { var maxHeight = 700; var sumWidth = 0; editor.widthsX = {}; - editor.folded = core.getLocalStorage('folded', false); - // editor.folded = true; + editor.uivalues.folded = core.getLocalStorage('folded', false); + // editor.uivalues.folded = true; editor.foldPerCol = 50; // var imgNames = Object.keys(images); //还是固定顺序吧； var imgNames = ["terrains", "animates", "enemys", "enemy48", "items", "npcs", "npc48", "autotile"]; @@ -297,14 +334,14 @@ editor.prototype.drawInitData = function (icons) { for (var im in autotiles) { tempy += autotiles[im].height; } - var tempx = editor.folded ? 32 : 3 * 32; + var tempx = editor.uivalues.folded ? 32 : 3 * 32; editor.widthsX[img] = [img, sumWidth / 32, (sumWidth + tempx) / 32, tempy]; sumWidth += tempx; maxHeight = Math.max(maxHeight, tempy); continue; } var width = images[img].width, height = images[img].height, mh = height; - if (editor.folded) { + if (editor.uivalues.folded) { var per_height = (img == 'enemy48' || img == 'npc48' ? 48 : 32); width = Math.ceil(height / per_height / editor.foldPerCol) * 32; if (width > 32) mh = per_height * editor.foldPerCol; @@ -353,7 +390,7 @@ editor.prototype.drawInitData = function (icons) { editor.updateMap(); } })(editor.airwallImg,nowx); - if (editor.folded) { + if (editor.uivalues.folded) { // --- 单列 & 折行 var subimgs = core.splitImage(images[img], 32, editor.foldPerCol * 32); var frames = images[img].width / 32; @@ -370,7 +407,7 @@ editor.prototype.drawInitData = function (icons) { } if (img == 'autotile') { var autotiles = images[img]; - var tempx = editor.folded ? 32 : 96; + var tempx = editor.uivalues.folded ? 32 : 96; for (var im in autotiles) { var subimgs = core.splitImage(autotiles[im], tempx, autotiles[im].height); drawImage(subimgs[0], nowx, nowy); @@ -379,7 +416,7 @@ editor.prototype.drawInitData = function (icons) { nowx += tempx; continue; } - if (editor.folded) { + if (editor.uivalues.folded) { // --- 单列 & 折行 var per_height = img.endsWith('48') ? 48 : 32; var subimgs = core.splitImage(images[img], 32, editor.foldPerCol * per_height); @@ -471,7 +508,7 @@ editor.prototype.setSelectBoxFromInfo=function(thisevent){ pos.y=thisevent.y; if(thisevent.x)pos.x+=thisevent.x; ysize = thisevent.images.endsWith('48') ? 48 : 32; - if (editor.folded && core.tilesets.indexOf(thisevent.images)==-1) { + if (editor.uivalues.folded && core.tilesets.indexOf(thisevent.images)==-1) { pos.x += Math.floor(pos.y / editor.foldPerCol); pos.y %= editor.foldPerCol; } @@ -596,7 +633,7 @@ editor.prototype.clearPos = function (clearPos, pos, callback) { var fields = Object.keys(editor.file.comment._data.floors._data.loc._data); pos = pos || editor.pos; editor.hideMidMenu(); - editor.preMapData = null; + editor.uivalues.preMapData = null; editor.info = 0; editor_mode.onmode(''); if (clearPos) diff --git a/_server/editor_datapanel.js b/_server/editor_datapanel.js new file mode 100644 index 00000000..f6a73d4a --- /dev/null +++ b/_server/editor_datapanel.js @@ -0,0 +1 @@ +editor_datapanel_wrapper = function (editor) {} \ No newline at end of file diff --git a/_server/editor_file_unsorted.js b/_server/editor_file_unsorted.js index ca2d146b..c068a8c4 100644 --- a/_server/editor_file_unsorted.js +++ b/_server/editor_file_unsorted.js @@ -24,7 +24,7 @@ editor_file = function (editor, callback) { editor.currentFloorData[name]=mapArray; } } - editor.file.saveFloor(editor.currentFloorData) + editor.file.saveFloor(editor.currentFloorData, callback) } /////////////////////////////////////////////////////////////////////////// diff --git a/_server/editor_mappanel.js b/_server/editor_mappanel.js new file mode 100644 index 00000000..6e74fca5 --- /dev/null +++ b/_server/editor_mappanel.js @@ -0,0 +1,258 @@ +editor_mappanel_wrapper = function (editor) { + + // 暂时先 注释+分类 内部函数未完成重构 + + /** + * 在绘图区格子内画一个随机色块 + */ + editor.uifunctions.fillPos=function(pos) { + editor.dom.euiCtx.fillStyle = '#' + ~~(Math.random() * 8) + ~~(Math.random() * 8) + ~~(Math.random() * 8); + editor.dom.euiCtx.fillRect(pos.x * 32 + 12 - core.bigmap.offsetX, pos.y * 32 + 12 - core.bigmap.offsetY, 8, 8); + } + + /** + * 从鼠标点击返回可用的组件内坐标 + */ + editor.uifunctions.eToLoc=function (e) { + var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft + var scrollTop = document.documentElement.scrollTop || document.body.scrollTop + var xx=e.clientX,yy=e.clientY + if(editor.isMobile){xx=e.touches[0].clientX,yy=e.touches[0].clientY} + editor.loc = { + 'x': scrollLeft + xx - editor.dom.mid.offsetLeft - editor.dom.mapEdit.offsetLeft, + 'y': scrollTop + yy - editor.dom.mid.offsetTop - editor.dom.mapEdit.offsetTop, + 'size': editor.isMobile?(32*innerWidth*0.96/core.__PIXELS__):32 + }; + return editor.loc; + } + + /** + * 组件内坐标转地图位置 + * @param {Boolean} addViewportOffset 是否加上大地图的偏置 + */ + editor.uifunctions.locToPos= function(loc, addViewportOffset) { + var offsetX=0, offsetY=0; + if (addViewportOffset){ + offsetX=core.bigmap.offsetX/32; + offsetY=core.bigmap.offsetY/32; + } + editor.pos = {'x': ~~(loc.x / loc.size)+offsetX, 'y': ~~(loc.y / loc.size)+offsetY} + return editor.pos; + } + + /** + * editor.dom.eui.ondblclick + * 双击地图可以选中素材 + */ + editor.uifunctions.map_doubleClick= function(e) { + var loc = editor.uifunctions.eToLoc(e); + var pos = editor.uifunctions.locToPos(loc,true); + editor.setSelectBoxFromInfo(editor[editor.layerMod][pos.y][pos.x]); + return; + } + + /** + * 用于鼠标移出map后清除状态 + */ + editor.uifunctions.clearMapStepStatus=function() { + if (editor.uivalues.mouseOutCheck > 1) { + editor.uivalues.mouseOutCheck--; + setTimeout(editor.uifunctions.clearMapStepStatus, 1000); + return; + } + editor.uivalues.holdingPath = 0; + editor.uivalues.stepPostfix = []; + editor.dom.euiCtx.clearRect(0, 0, core.__PIXELS__, core.__PIXELS__); + editor.uivalues.startPos = editor.uivalues.endPos = null; + } + + /** + * editor.dom.eui.onmousedown + * + 右键进入菜单 + * + 非绘图时选中 + * + 绘图时画个矩形在那个位置 + */ + editor.uifunctions.map_ondown= function (e) { + var loc = editor.uifunctions.eToLoc(e); + var pos = editor.uifunctions.locToPos(loc,true); + if (e.button==2){ + editor.showMidMenu(e.clientX,e.clientY); + return false; + } + if (!selectBox.isSelected()) { + editor_mode.onmode('nextChange'); + editor_mode.onmode('loc'); + //editor_mode.loc(); + //tip.whichShow(1); + tip.showHelp(6); + editor.uivalues.startPos = pos; + editor.dom.euiCtx.strokeStyle = '#FF0000'; + editor.dom.euiCtx.lineWidth = 3; + if(editor.isMobile)editor.showMidMenu(e.clientX,e.clientY); + return false; + } + + editor.uivalues.holdingPath = 1; + editor.uivalues.mouseOutCheck = 2; + setTimeout(editor.uifunctions.clearMapStepStatus); + editor.dom.euiCtx.clearRect(0, 0, core.__PIXELS__, core.__PIXELS__); + editor.uivalues.stepPostfix = []; + editor.uivalues.stepPostfix.push(pos); + editor.uifunctions.fillPos(pos); + return false; + } + + /** + * editor.dom.eui.onmousemove + * + 非绘图模式时维护起止位置并画箭头 + * + 绘图模式时找到与队列尾相邻的鼠标方向的点画个矩形 + */ + editor.uifunctions.map_onmove= function (e) { + if (!selectBox.isSelected()) { + if (editor.uivalues.startPos == null) return; + //tip.whichShow(1); + var loc = editor.uifunctions.eToLoc(e); + var pos = editor.uifunctions.locToPos(loc,true); + if (editor.uivalues.endPos != null && editor.uivalues.endPos.x == pos.x && editor.uivalues.endPos.y == pos.y) return; + if (editor.uivalues.endPos != null) { + editor.dom.euiCtx.clearRect(Math.min(32 * editor.uivalues.startPos.x - core.bigmap.offsetX, 32 * editor.uivalues.endPos.x - core.bigmap.offsetX), + Math.min(32 * editor.uivalues.startPos.y - core.bigmap.offsetY, 32 * editor.uivalues.endPos.y - core.bigmap.offsetY), + (Math.abs(editor.uivalues.startPos.x - editor.uivalues.endPos.x) + 1) * 32, (Math.abs(editor.uivalues.startPos.y - editor.uivalues.endPos.y) + 1) * 32) + } + editor.uivalues.endPos = pos; + if (editor.uivalues.startPos != null) { + if (editor.uivalues.startPos.x != editor.uivalues.endPos.x || editor.uivalues.startPos.y != editor.uivalues.endPos.y) { + core.drawArrow('eui', + 32 * editor.uivalues.startPos.x + 16 - core.bigmap.offsetX, 32 * editor.uivalues.startPos.y + 16 - core.bigmap.offsetY, + 32 * editor.uivalues.endPos.x + 16 - core.bigmap.offsetX, 32 * editor.uivalues.endPos.y + 16 - core.bigmap.offsetY); + } + } + // editor_mode.onmode('nextChange'); + // editor_mode.onmode('loc'); + //editor_mode.loc(); + //tip.whichShow(1); + // tip.showHelp(6); + return false; + } + + if (editor.uivalues.holdingPath == 0) { + return false; + } + editor.uivalues.mouseOutCheck = 2; + var loc = editor.uifunctions.eToLoc(e); + var pos = editor.uifunctions.locToPos(loc,true); + var pos0 = editor.uivalues.stepPostfix[editor.uivalues.stepPostfix.length - 1] + var directionDistance = [pos.y - pos0.y, pos0.x - pos.x, pos0.y - pos.y, pos.x - pos0.x] + var max = 0, index = 4; + for (var i = 0; i < 4; i++) { + if (directionDistance[i] > max) { + index = i; + max = directionDistance[i]; + } + } + var pos = [{'x': 0, 'y': 1}, {'x': -1, 'y': 0}, {'x': 0, 'y': -1}, {'x': 1, 'y': 0}, false][index] + if (pos) { + pos.x += pos0.x; + pos.y += pos0.y; + editor.uivalues.stepPostfix.push(pos); + editor.uifunctions.fillPos(pos); + } + return false; + } + + /** + * editor.dom.eui.onmouseup + * + 非绘图模式时, 交换首末点的内容 + * + 绘图模式时, 根据画线/画矩形/画tileset 做对应的绘制 + */ + editor.uifunctions.map_onup=function (e) { + if (!selectBox.isSelected()) { + //tip.whichShow(1); + // editor.movePos(editor.uivalues.startPos, editor.uivalues.endPos); + if (editor.layerMod == 'map') + editor.exchangePos(editor.uivalues.startPos, editor.uivalues.endPos); + else + editor.exchangeBgFg(editor.uivalues.startPos, editor.uivalues.endPos, editor.layerMod); + editor.uivalues.startPos = editor.uivalues.endPos = null; + editor.dom.euiCtx.clearRect(0, 0, core.__PIXELS__, core.__PIXELS__); + return false; + } + editor.uivalues.holdingPath = 0; + if (editor.uivalues.stepPostfix && editor.uivalues.stepPostfix.length) { + editor.uivalues.preMapData = JSON.parse(JSON.stringify({map:editor.map,fgmap:editor.fgmap,bgmap:editor.bgmap})); + if(editor.brushMod!=='line'){ + var x0=editor.uivalues.stepPostfix[0].x; + var y0=editor.uivalues.stepPostfix[0].y; + var x1=editor.uivalues.stepPostfix[editor.uivalues.stepPostfix.length-1].x; + var y1=editor.uivalues.stepPostfix[editor.uivalues.stepPostfix.length-1].y; + if(x0>x1){x0^=x1;x1^=x0;x0^=x1;}//swap + if(y0>y1){y0^=y1;y1^=y0;y0^=y1;}//swap + editor.uivalues.stepPostfix=[]; + for(var jj=y0;jj<=y1;jj++){ + for(var ii=x0;ii<=x1;ii++){ + editor.uivalues.stepPostfix.push({x:ii,y:jj}) + } + } + } + editor.uivalues.currDrawData.pos = JSON.parse(JSON.stringify(editor.uivalues.stepPostfix)); + editor.uivalues.currDrawData.info = JSON.parse(JSON.stringify(editor.info)); + editor.uivalues.reDo = null; + // console.log(editor.uivalues.stepPostfix); + if(editor.brushMod==='tileset' && core.tilesets.indexOf(editor.info.images)!==-1){ + var imgWidth=~~(core.material.images.tilesets[editor.info.images].width/32); + var x0=editor.uivalues.stepPostfix[0].x; + var y0=editor.uivalues.stepPostfix[0].y; + var idnum=editor.info.idnum; + for (var ii = 0; ii < editor.uivalues.stepPostfix.length; ii++){ + if(editor.uivalues.stepPostfix[ii].y!=y0){ + y0++; + idnum+=imgWidth; + } + editor[editor.layerMod][editor.uivalues.stepPostfix[ii].y][editor.uivalues.stepPostfix[ii].x] = editor.ids[editor.indexs[idnum+editor.uivalues.stepPostfix[ii].x-x0]]; + } + } else { + for (var ii = 0; ii < editor.uivalues.stepPostfix.length; ii++) + editor[editor.layerMod][editor.uivalues.stepPostfix[ii].y][editor.uivalues.stepPostfix[ii].x] = editor.info; + } + // console.log(editor.map); + editor.updateMap(); + editor.uivalues.holdingPath = 0; + editor.uivalues.stepPostfix = []; + editor.dom.euiCtx.clearRect(0, 0, core.__PIXELS__, core.__PIXELS__); + } + return false; + } + + /** + * editor.dom.mid.onmousewheel + * 在地图编辑区域滚轮切换楼层 + */ + editor.uifunctions.map_mousewheel=function (e) { + var wheel = function (direct) { + var index=editor.core.floorIds.indexOf(editor.currentFloorId); + var toId = editor.currentFloorId; + + if (direct>0 && index0) + toId = editor.core.floorIds[index-1]; + else return; + + editor_mode.onmode('nextChange'); + editor_mode.onmode('floor'); + editor.dom.selectFloor.value = toId; + editor.changeFloor(toId); + } + + try { + if (e.wheelDelta) + wheel(Math.sign(e.wheelDelta)) + else if (e.detail) + wheel(Math.sign(e.detail)); + } + catch (ee) { + console.log(ee); + } + return false; + } +} \ No newline at end of file diff --git a/_server/editor_materialpanel.js b/_server/editor_materialpanel.js new file mode 100644 index 00000000..531714be --- /dev/null +++ b/_server/editor_materialpanel.js @@ -0,0 +1,4 @@ +editor_materialpanel_wrapper = function (editor) { + + +} \ No newline at end of file diff --git a/_server/editor_ui.js b/_server/editor_ui.js new file mode 100644 index 00000000..936a791c --- /dev/null +++ b/_server/editor_ui.js @@ -0,0 +1,266 @@ +editor_ui_wrapper = function (editor) { + + + /** + * 根据鼠标点击, 得到从元素向上到body的所有id + */ + editor.uifunctions.getClickpath=function(e){ + //console.log(e); + var clickpath = []; + 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_) { + if (['left', 'left1', 'left2', 'left3', 'left4', 'left5', 'left8', 'mobileview'].indexOf(id_) !== -1) clickpath.push('edit'); + clickpath.push(id_); + } + }); + return clickpath; + } + + /** + * editor.dom.body.onmousedown + * 检测鼠标点击, + * + 如果选中了绘图区域之外, 就保存地图 + * + 维护绘图区的菜单的隐藏 + * + 记录最后一次点击的id(主要为了数据区服务) + */ + editor.uifunctions.body_click=function (e) { + var clickpath=editor.uifunctions.getClickpath(e); + + var unselect=true; + for(var ii=0,thisId;thisId=['edit','tip','brushMod','brushMod2','brushMod3','layerMod','layerMod2','layerMod3','viewportButtons'][ii];ii++){ + if (clickpath.indexOf(thisId) !== -1){ + unselect=false; + break; + } + } + if (unselect) { + if (clickpath.indexOf('eui') === -1) { + if (selectBox.isSelected()) { + editor_mode.onmode(''); + editor.file.saveFloorFile(function (err) { + if (err) { + printe(err); + throw(err) + } + ;printf('地图保存成功'); + }); + } + selectBox.isSelected(false); + editor.info = {}; + } + } + //editor.mode.onmode(''); + if (e.button!=2 && !editor.isMobile){ + editor.hideMidMenu(); + } + 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.dom.body.onkeydown + * 绑定快捷键 + */ + editor.uifunctions.body_shortcut=function (e) { + + // UI预览 & 地图选点 + if (uievent && uievent.isOpen) { + e.preventDefault(); + if (e.keyCode == 27) uievent.close(); + else if (e.keyCode == 13) uievent.confirm(); + else if (e.keyCode==87) uievent.move(0,-1) + else if (e.keyCode==65) uievent.move(-1,0) + else if (e.keyCode==83) uievent.move(0,1); + else if (e.keyCode==68) uievent.move(1,0); + return; + } + + // 监听Ctrl+S保存 + if (e.ctrlKey && e.keyCode == 83) { + e.preventDefault(); + if (editor_multi.id != "") { + editor_multi.confirm(); // 保存脚本编辑器 + } + else if (editor_blockly.id != "") { + editor_blockly.confirm(); // 保存事件编辑器 + } + else { + editor_mode.saveFloor(); + } + return; + } + + // 如果是开启事件/脚本编辑器状态，则忽略 + if (editor_multi.id!="" || editor_blockly.id!="") + return; + + // 禁止快捷键的默认行为 + if (e.ctrlKey && [89, 90, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57].indexOf(e.keyCode) !== -1) + e.preventDefault(); + if (e.altKey && [48, 49, 50, 51, 52, 53, 54, 55, 56, 57].indexOf(e.keyCode) !== -1) + e.preventDefault(); + //Ctrl+z 撤销上一步undo + if (e.keyCode == 90 && e.ctrlKey && editor.uivalues.preMapData && editor.uivalues.currDrawData.pos.length && selectBox.isSelected()) { + editor.map = JSON.parse(JSON.stringify(editor.uivalues.preMapData.map)); + editor.fgmap = JSON.parse(JSON.stringify(editor.uivalues.preMapData.fgmap)); + editor.bgmap = JSON.parse(JSON.stringify(editor.uivalues.preMapData.bgmap)); + editor.updateMap(); + editor.uivalues.reDo = JSON.parse(JSON.stringify(editor.uivalues.currDrawData)); + editor.uivalues.currDrawData = {pos: [], info: {}}; + editor.uivalues.preMapData = null; + return; + } + //Ctrl+y 重做一步redo + if (e.keyCode == 89 && e.ctrlKey && editor.uivalues.reDo && editor.uivalues.reDo.pos.length && selectBox.isSelected()) { + editor.uivalues.preMapData = JSON.parse(JSON.stringify({map:editor.map,fgmap:editor.fgmap,bgmap:editor.bgmap})); + for (var j = 0; j < editor.uivalues.reDo.pos.length; j++) + editor.map[editor.uivalues.reDo.pos[j].y][editor.uivalues.reDo.pos[j].x] = JSON.parse(JSON.stringify(editor.uivalues.reDo.info)); + + editor.updateMap(); + editor.uivalues.currDrawData = JSON.parse(JSON.stringify(editor.uivalues.reDo)); + editor.uivalues.reDo = null; + return; + } + + // PGUP和PGDOWN切换楼层 + if (e.keyCode==33 || e.keyCode==34) { + e.preventDefault(); + var index=editor.core.floorIds.indexOf(editor.currentFloorId); + var nextIndex = index + (e.keyCode==33?1:-1); + if (nextIndex>=0 && nextIndex=2 && clickpath[0].indexOf('id_')===0){editor.lastClickId=clickpath[0]} - } - - var eui=document.getElementById('eui'); - var uc = eui.getContext('2d'); - - function fillPos(pos) { - uc.fillStyle = '#' + ~~(Math.random() * 8) + ~~(Math.random() * 8) + ~~(Math.random() * 8); - uc.fillRect(pos.x * 32 + 12 - core.bigmap.offsetX, pos.y * 32 + 12 - core.bigmap.offsetY, 8, 8); - }//在格子内画一个随机色块 - - function eToLoc(e) { - var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft - var scrollTop = document.documentElement.scrollTop || document.body.scrollTop - var xx=e.clientX,yy=e.clientY - if(editor.isMobile){xx=e.touches[0].clientX,yy=e.touches[0].clientY} - editor.loc = { - 'x': scrollLeft + xx - mid.offsetLeft - mapEdit.offsetLeft, - 'y': scrollTop + yy - mid.offsetTop - mapEdit.offsetTop, - 'size': editor.isMobile?(32*innerWidth*0.96/core.__PIXELS__):32 - }; - return editor.loc; - }//返回可用的组件内坐标 - - function locToPos(loc, addViewportOffset) { - var offsetX=0, offsetY=0; - if (addViewportOffset){ - offsetX=core.bigmap.offsetX/32; - offsetY=core.bigmap.offsetY/32; - } - editor.pos = {'x': ~~(loc.x / loc.size)+offsetX, 'y': ~~(loc.y / loc.size)+offsetY} - return editor.pos; - } - - var holdingPath = 0; - var stepPostfix = null;//用于存放寻路检测的第一个点之后的后续移动 - - var mouseOutCheck = 2; - - function clear1() { - if (mouseOutCheck > 1) { - mouseOutCheck--; - setTimeout(clear1, 1000); - return; - } - holdingPath = 0; - stepPostfix = []; - uc.clearRect(0, 0, core.__PIXELS__, core.__PIXELS__); - startPos = endPos = null; - }//用于鼠标移出canvas时的自动清除状态 - - eui.oncontextmenu=function(e){e.preventDefault()} - - eui.ondblclick = function(e) { - // 双击地图可以选中素材 - var loc = eToLoc(e); - var pos = locToPos(loc,true); - editor.setSelectBoxFromInfo(editor[editor.layerMod][pos.y][pos.x]); - return; - } - - var startPos=null, endPos=null; - eui.onmousedown = function (e) { - if (e.button==2){ - var loc = eToLoc(e); - var pos = locToPos(loc,true); - editor.showMidMenu(e.clientX,e.clientY); - return false; - } - if (!selectBox.isSelected()) { - var loc = eToLoc(e); - var pos = locToPos(loc,true); - editor_mode.onmode('nextChange'); - editor_mode.onmode('loc'); - //editor_mode.loc(); - //tip.whichShow(1); - tip.showHelp(6); - startPos = pos; - uc.strokeStyle = '#FF0000'; - uc.lineWidth = 3; - if(editor.isMobile)editor.showMidMenu(e.clientX,e.clientY); - return false; - } - - holdingPath = 1; - mouseOutCheck = 2; - setTimeout(clear1); - uc.clearRect(0, 0, core.__PIXELS__, core.__PIXELS__); - var loc = eToLoc(e); - var pos = locToPos(loc,true); - stepPostfix = []; - stepPostfix.push(pos); - fillPos(pos); - return false; - } - - eui.onmousemove = function (e) { - if (!selectBox.isSelected()) { - if (startPos == null) return; - //tip.whichShow(1); - var loc = eToLoc(e); - var pos = locToPos(loc,true); - if (endPos != null && endPos.x == pos.x && endPos.y == pos.y) return; - if (endPos != null) { - uc.clearRect(Math.min(32 * startPos.x - core.bigmap.offsetX, 32 * endPos.x - core.bigmap.offsetX), - Math.min(32 * startPos.y - core.bigmap.offsetY, 32 * endPos.y - core.bigmap.offsetY), - (Math.abs(startPos.x - endPos.x) + 1) * 32, (Math.abs(startPos.y - endPos.y) + 1) * 32) - } - endPos = pos; - if (startPos != null) { - if (startPos.x != endPos.x || startPos.y != endPos.y) { - core.drawArrow('eui', - 32 * startPos.x + 16 - core.bigmap.offsetX, 32 * startPos.y + 16 - core.bigmap.offsetY, - 32 * endPos.x + 16 - core.bigmap.offsetX, 32 * endPos.y + 16 - core.bigmap.offsetY); - } - } - // editor_mode.onmode('nextChange'); - // editor_mode.onmode('loc'); - //editor_mode.loc(); - //tip.whichShow(1); - // tip.showHelp(6); - return false; - } - - if (holdingPath == 0) { - return false; - } - mouseOutCheck = 2; - var loc = eToLoc(e); - var pos = locToPos(loc,true); - var pos0 = stepPostfix[stepPostfix.length - 1] - var directionDistance = [pos.y - pos0.y, pos0.x - pos.x, pos0.y - pos.y, pos.x - pos0.x] - var max = 0, index = 4; - for (var i = 0; i < 4; i++) { - if (directionDistance[i] > max) { - index = i; - max = directionDistance[i]; - } - } - var pos = [{'x': 0, 'y': 1}, {'x': -1, 'y': 0}, {'x': 0, 'y': -1}, {'x': 1, 'y': 0}, false][index] - if (pos) { - pos.x += pos0.x; - pos.y += pos0.y; - stepPostfix.push(pos); - fillPos(pos); - } - return false; - } - - eui.onmouseup = function (e) { - if (!selectBox.isSelected()) { - //tip.whichShow(1); - // editor.movePos(startPos, endPos); - if (editor.layerMod == 'map') - editor.exchangePos(startPos, endPos); - else - editor.exchangeBgFg(startPos, endPos, editor.layerMod); - startPos = endPos = null; - uc.clearRect(0, 0, core.__PIXELS__, core.__PIXELS__); - return false; - } - holdingPath = 0; - if (stepPostfix && stepPostfix.length) { - editor.preMapData = JSON.parse(JSON.stringify({map:editor.map,fgmap:editor.fgmap,bgmap:editor.bgmap})); - if(editor.brushMod!=='line'){ - var x0=stepPostfix[0].x; - var y0=stepPostfix[0].y; - var x1=stepPostfix[stepPostfix.length-1].x; - var y1=stepPostfix[stepPostfix.length-1].y; - if(x0>x1){x0^=x1;x1^=x0;x0^=x1;}//swap - if(y0>y1){y0^=y1;y1^=y0;y0^=y1;}//swap - stepPostfix=[]; - for(var jj=y0;jj<=y1;jj++){ - for(var ii=x0;ii<=x1;ii++){ - stepPostfix.push({x:ii,y:jj}) - } - } - } - currDrawData.pos = JSON.parse(JSON.stringify(stepPostfix)); - currDrawData.info = JSON.parse(JSON.stringify(editor.info)); - reDo = null; - // console.log(stepPostfix); - if(editor.brushMod==='tileset' && core.tilesets.indexOf(editor.info.images)!==-1){ - var imgWidth=~~(core.material.images.tilesets[editor.info.images].width/32); - var x0=stepPostfix[0].x; - var y0=stepPostfix[0].y; - var idnum=editor.info.idnum; - for (var ii = 0; ii < stepPostfix.length; ii++){ - if(stepPostfix[ii].y!=y0){ - y0++; - idnum+=imgWidth; - } - editor[editor.layerMod][stepPostfix[ii].y][stepPostfix[ii].x] = editor.ids[editor.indexs[idnum+stepPostfix[ii].x-x0]]; - } - } else { - for (var ii = 0; ii < stepPostfix.length; ii++) - editor[editor.layerMod][stepPostfix[ii].y][stepPostfix[ii].x] = editor.info; - } - // console.log(editor.map); - editor.updateMap(); - holdingPath = 0; - stepPostfix = []; - uc.clearRect(0, 0, core.__PIXELS__, core.__PIXELS__); - } - return false; - } - - /* - document.getElementById('mid').onkeydown = function (e) { - console.log(e); - if (e.keyCode==37) { - editor.moveViewport(-1, 0); - } - if (e.keyCode==38) { - editor.moveViewport(0, -1); - } - if (e.keyCode==39) { - editor.moveViewport(1, 0); - } - if (e.keyCode==40) { - editor.moveViewport(0, 1); - } - } - */ - - document.getElementById('mid').onmousewheel = function (e) { - var wheel = function (direct) { - var index=editor.core.floorIds.indexOf(editor.currentFloorId); - var toId = editor.currentFloorId; - - if (direct>0 && index0) - toId = editor.core.floorIds[index-1]; - else return; - - editor_mode.onmode('nextChange'); - editor_mode.onmode('floor'); - document.getElementById('selectFloor').value = toId; - editor.changeFloor(toId); - } - - try { - if (e.wheelDelta) - wheel(Math.sign(e.wheelDelta)) - else if (e.detail) - wheel(Math.sign(e.detail)); - } - catch (ee) { - console.log(ee); - } - return false; - } - - editor.preMapData = null; - var currDrawData = { - pos: [], - info: {} - }; - var reDo = null; - var shortcut = core.getLocalStorage('shortcut',{48: 0, 49: 0, 50: 0, 51: 0, 52: 0, 53: 0, 54: 0, 55: 0, 56: 0, 57: 0}); - var copyedInfo = null; - document.body.onkeydown = function (e) { - - // UI预览 & 地图选点 - if (uievent && uievent.isOpen) { - e.preventDefault(); - if (e.keyCode == 27) uievent.close(); - else if (e.keyCode == 13) uievent.confirm(); - else if (e.keyCode==87) uievent.move(0,-1) - else if (e.keyCode==65) uievent.move(-1,0) - else if (e.keyCode==83) uievent.move(0,1); - else if (e.keyCode==68) uievent.move(1,0); - return; - } - - // 监听Ctrl+S保存 - if (e.ctrlKey && e.keyCode == 83) { - e.preventDefault(); - if (editor_multi.id != "") { - editor_multi.confirm(); // 保存脚本编辑器 - } - else if (editor_blockly.id != "") { - editor_blockly.confirm(); // 保存事件编辑器 - } - else { - editor_mode.saveFloor(); - } - return; - } - - // 如果是开启事件/脚本编辑器状态，则忽略 - if (editor_multi.id!="" || editor_blockly.id!="") - return; - - // 禁止快捷键的默认行为 - if (e.ctrlKey && [89, 90, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57].indexOf(e.keyCode) !== -1) - e.preventDefault(); - if (e.altKey && [48, 49, 50, 51, 52, 53, 54, 55, 56, 57].indexOf(e.keyCode) !== -1) - e.preventDefault(); - //Ctrl+z 撤销上一步undo - if (e.keyCode == 90 && e.ctrlKey && editor.preMapData && currDrawData.pos.length && selectBox.isSelected()) { - editor.map = JSON.parse(JSON.stringify(editor.preMapData.map)); - editor.fgmap = JSON.parse(JSON.stringify(editor.preMapData.fgmap)); - editor.bgmap = JSON.parse(JSON.stringify(editor.preMapData.bgmap)); - editor.updateMap(); - reDo = JSON.parse(JSON.stringify(currDrawData)); - currDrawData = {pos: [], info: {}}; - editor.preMapData = null; - return; - } - //Ctrl+y 重做一步redo - if (e.keyCode == 89 && e.ctrlKey && reDo && reDo.pos.length && selectBox.isSelected()) { - editor.preMapData = JSON.parse(JSON.stringify({map:editor.map,fgmap:editor.fgmap,bgmap:editor.bgmap})); - for (var j = 0; j < reDo.pos.length; j++) - editor.map[reDo.pos[j].y][reDo.pos[j].x] = JSON.parse(JSON.stringify(reDo.info)); - - editor.updateMap(); - currDrawData = JSON.parse(JSON.stringify(reDo)); - reDo = null; - return; - } - - // PGUP和PGDOWN切换楼层 - if (e.keyCode==33 || e.keyCode==34) { - e.preventDefault(); - var index=editor.core.floorIds.indexOf(editor.currentFloorId); - var nextIndex = index + (e.keyCode==33?1:-1); - if (nextIndex>=0 && nextIndex=iconLib.offsetHeight - scrollBarHeight) return; + if (!editor.isMobile && e.clientY>=iconLib.offsetHeight - editor.uivalues.scrollBarHeight) return; var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var loc = { @@ -553,14 +66,14 @@ editor.constructor.prototype.listen=function () { 'size': 32 }; editor.loc = loc; - var pos = locToPos(loc); + var pos = editor.uifunctions.locToPos(loc); for (var spriter in editor.widthsX) { if (pos.x >= editor.widthsX[spriter][1] && pos.x < editor.widthsX[spriter][2]) { var ysize = spriter.endsWith('48') ? 48 : 32; loc.ysize = ysize; pos.images = editor.widthsX[spriter][0]; pos.y = ~~(loc.y / loc.ysize); - if(!editor.folded && core.tilesets.indexOf(pos.images)==-1) pos.x = editor.widthsX[spriter][1]; + if(!editor.uivalues.folded && core.tilesets.indexOf(pos.images)==-1) pos.x = editor.widthsX[spriter][1]; var autotiles = core.material.images['autotile']; if (pos.images == 'autotile') { var imNames = Object.keys(autotiles); @@ -577,7 +90,7 @@ editor.constructor.prototype.listen=function () { } else { var height = editor.widthsX[spriter][3], col = height / ysize; - if (editor.folded && core.tilesets.indexOf(pos.images)==-1) { + if (editor.uivalues.folded && core.tilesets.indexOf(pos.images)==-1) { col = (pos.x == editor.widthsX[spriter][2] - 1) ? ((col - 1) % editor.foldPerCol + 1) : editor.foldPerCol; } if (spriter == 'terrains' && pos.x == editor.widthsX[spriter][1]) col += 2; @@ -600,7 +113,7 @@ editor.constructor.prototype.listen=function () { else if (core.tilesets.indexOf(pos.images)!=-1) editor.info = {'images': pos.images, 'y': pos.y, 'x': pos.x-editor.widthsX[spriter][1]}; else { var y = pos.y; - if (editor.folded) { + if (editor.uivalues.folded) { y += editor.foldPerCol * (pos.x-editor.widthsX[spriter][1]); } if (pos.images == 'terrains' && pos.x == 0) y -= 2; @@ -728,8 +241,8 @@ editor.constructor.prototype.listen=function () { copyLoc.onmousedown = function(e){ editor.hideMidMenu(); e.stopPropagation(); - editor.preMapData = null; - reDo = null; + editor.uivalues.preMapData = null; + editor.uivalues.reDo = null; editor_mode.onmode(''); var now = editor.pos, last = editor.lastRightButtonPos[1]; if (now.x == last.x && now.y == last.y) return; @@ -749,8 +262,8 @@ editor.constructor.prototype.listen=function () { moveLoc.onmousedown = function(e){ editor.hideMidMenu(); e.stopPropagation(); - editor.preMapData = null; - reDo = null; + editor.uivalues.preMapData = null; + editor.uivalues.reDo = null; editor_mode.onmode(''); editor.exchangePos(editor.pos, editor.lastRightButtonPos[1]); } @@ -758,14 +271,14 @@ editor.constructor.prototype.listen=function () { var clearEvent = document.getElementById('clearEvent'); clearEvent.onmousedown = function (e) { e.stopPropagation(); - reDo = null; + editor.uivalues.reDo = null; editor.clearPos(false); } var clearLoc = document.getElementById('clearLoc'); clearLoc.onmousedown = function(e){ e.stopPropagation(); - reDo = null; + editor.uivalues.reDo = null; editor.clearPos(true); } @@ -927,14 +440,12 @@ editor.constructor.prototype.mobile_listen=function () { document.body.ontouchstart=document.body.onmousedown; document.body.onmousedown=null; - - var eui=document.getElementById('eui'); - eui.ontouchstart=eui.onmousedown - eui.onmousedown=null - eui.ontouchmove=eui.onmousemove - eui.onmousemove=null - eui.ontouchend=eui.onmouseup - eui.onmouseup=null + editor.dom.eui.ontouchstart=editor.dom.eui.onmousedown + editor.dom.eui.onmousedown=null + editor.dom.eui.ontouchmove=editor.dom.eui.onmousemove + editor.dom.eui.onmousemove=null + editor.dom.eui.ontouchend=editor.dom.eui.onmouseup + editor.dom.eui.onmouseup=null var chooseThis = document.getElementById('chooseThis'); diff --git a/_server/refactoring.md b/_server/refactoring.md index 168d1e6f..d3450f08 100644 --- a/_server/refactoring.md +++ b/_server/refactoring.md @@ -28,7 +28,7 @@ editor_file之后是更改editor.map的储存方式, 现有的存对象的模式 + [ ] editor_mappanel 与地图面板相关的功能, <-unsorted_1/2/3 + [ ] editor_datapanel 与数据面板相关的功能, <-unsorted_1/2/3 + [ ] editor_materialpanel 与素材面板相关的功能, <-unsorted_1/2/3 -+ [ ] editor_ui 维护printe/printf/tip, 以及之后可能的窗口化 ++ [ ] editor_ui 维护printe/printf/tip, 以及之后可能的窗口化, ui事件中没有具体到前三个面板中的函数 <-unsorted_1/2/3 + [ ] editor 执行初始化流程加组合各组件 + [ ] 原editor_mode 移除 + [x] 原vm 移除 diff --git a/editor-mobile.html b/editor-mobile.html index b8d2e0eb..acbe0d1b 100644 --- a/editor-mobile.html +++ b/editor-mobile.html @@ -569,6 +569,10 @@ + + + + diff --git a/editor.html b/editor.html index 116d8de4..adc23948 100644 --- a/editor.html +++ b/editor.html @@ -554,6 +554,10 @@ + + + +