From 39db1cd2352b70179cef817220365e403aac0f5f Mon Sep 17 00:00:00 2001 From: YouWei Zhao Date: Wed, 7 Mar 2018 17:35:15 +0800 Subject: [PATCH] =?UTF-8?q?blockly=E6=94=B9=E4=B8=BA=E5=BC=B9=E7=AA=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _server/README.md | 91 +++++++++++++++++++++++++++++++++++++ _server/css/editor_mode.css | 6 ++- _server/editor_blockly.js | 19 ++++++-- _server/editor_mode.js | 1 + editor.html | 6 ++- 5 files changed, 117 insertions(+), 6 deletions(-) create mode 100644 _server/README.md diff --git a/_server/README.md b/_server/README.md new file mode 100644 index 00000000..9f9a2475 --- /dev/null +++ b/_server/README.md @@ -0,0 +1,91 @@ +# editor + +本目录下所有文件,以及`../editor.html`和`../启动服务.exe`([源码](http://github.com/ckcz123/mota-js-server/))是地图编辑器的所有组件. + +`editor.js`,`editor_file.js`和`editor_mode.js`耦合较强,`editor_blockly.js`和`fs.js`基本可以独立使用. + +## 各组件功能 + +### editor.js + +暂略 + +### editor_file.js +提供了以下函数进行楼层`map`数组相关的操作 +```javascript +editor.file.getFloorFileList +editor.file.loadFloorFile +editor.file.saveFloorFile +editor.file.saveFloorFileAs +``` +5个编辑模式有关的查询 +```javascript +editor.file.editItem('redJewel',[],function(a){console.log(a)}); +editor.file.editEnemy('redBat',[],function(a){console.log(a)}); +editor.file.editLoc(2,0,[],function(a){console.log(a)}); +editor.file.editFloor([],function(a){console.log(a)}); +editor.file.editTower([],function(a){console.log(a)}); +``` +5个编辑模式有关的编辑 +```javascript +editor.info={images: "terrains", y: 9}; +editor.file.changeIdAndIdnum('yellowWall2',16,editor.info,function(a){console.log(a)}); +editor.file.editItem('book',[["change","['items']['name']","怪物手册的新名字"]],function(a){console.log(a)}); +editor.file.editEnemy('redBat',[['change',"['atk']",20]],function(a){console.log(a)}); +editor.file.editLoc(2,6,[["change","['afterBattle']",null]],function(a){console.log(a)}); +editor.file.editFloor([["change","['title']",'样板 33 层']],function(a){console.log(a)}); +editor.file.editTower([["change","['values']['lavaDamage']",200]],function(a){console.log(a)}); +``` + +### editor_mode.js +4个生成表格并绑定事件的函数 +```javascript +editor.mode.loc(); +editor.mode.emenyitem(); +editor.mode.floor(); +editor.mode.tower(); +``` +切换模式 +```javascript +editor.mode.onmode(''); +editor.mode.onmode('loc'); +editor.mode.onmode('emenyitem'); +editor.mode.onmode('floor'); +editor.mode.onmode('tower'); +``` +在切换模式时,改动才会保存到文件,并且需要刷新页面使得`editor`能看到改动 + +表格的`onchange`的实现中,获得当前模式的方式.不注意的话,修改`index.html`中页面的结构,会被坑 +```javascript +var node = thisTr.parentNode; +while (!editor_mode._ids.hasOwnProperty(node.getAttribute('id'))) { + node = node.parentNode; +} +editor_mode.onmode(editor_mode._ids[node.getAttribute('id')]); +``` +### editor_blockly.js +把选定`id_`的事件用blockly编辑 +``` js +editor_blockly.import(id_); +``` +把文本区域的代码转换成图块 +``` js +editor_blockly.parse(); +``` +把当前图块对应的事件返回给调用blockly的`id_` +``` js +editor_blockly.confirm(); +``` + +### 待调整 + +多行文本编辑器独立作为组件 +editor_multi.js + +## z-index + +目前主体部分使用了 0,75,100 + +暂定blockly使用 200 ,多行文本编辑器使用 300 + +完成后再调整 \ No newline at end of file diff --git a/_server/css/editor_mode.css b/_server/css/editor_mode.css index a3c232c9..724bb347 100644 --- a/_server/css/editor_mode.css +++ b/_server/css/editor_mode.css @@ -45,7 +45,11 @@ #left6 { left: 5px; - top: 1930px; + /* top: 1930px; */ + top: 5px; + z-index: 200; + position: fixed; + background-color: rgb(245, 245, 245); width: 1335px; height: 780px; } diff --git a/_server/editor_blockly.js b/_server/editor_blockly.js index 91a15c61..dbe164d4 100644 --- a/_server/editor_blockly.js +++ b/_server/editor_blockly.js @@ -327,7 +327,13 @@ editor_blockly.import = function(id_){ editor_blockly.show(); } -editor_blockly.show = function(){} +editor_blockly.show = function(){document.getElementById('left6').style='';} +editor_blockly.hide = function(){document.getElementById('left6').style='z-index:-1;opacity: 0;';} + +editor_blockly.cancel = function(){ + editor_blockly.id=''; + editor_blockly.hide(); +} editor_blockly.confirm = function (){ if(!editor_blockly.id){ @@ -339,6 +345,7 @@ editor_blockly.confirm = function (){ editor_blockly.id=''; var input = thisTr.children[2].children[0].children[0]; input.value = value; + editor_blockly.hide(); input.onchange(); } if(document.getElementById('codeArea').value===''){ @@ -357,21 +364,27 @@ var codeEditor = CodeMirror.fromTextArea(document.getElementById("multiLineCode" continueComments: "Enter", extraKeys: {"Ctrl-Q": "toggleComment"} }); +editor_blockly.showCodeEditor = function(){document.getElementById("multiLineDiv").style='';} +editor_blockly.hideCodeEditor = function(){document.getElementById("multiLineDiv").style='z-index:-1;opacity: 0;';} var multiLineArgs=[null,null,null]; editor_blockly.multiLineEdit = function(value,b,f,callback){ - document.getElementById("multiLineDiv").style.display=''; + editor_blockly.showCodeEditor(); codeEditor.setValue(value.split('\\n').join('\n')||''); multiLineArgs[0]=b; multiLineArgs[1]=f; multiLineArgs[2]=callback; } editor_blockly.multiLineDone = function(){ - document.getElementById("multiLineDiv").style.display='none'; + editor_blockly.hideCodeEditor(); if(!multiLineArgs[0] || !multiLineArgs[1] || !multiLineArgs[2])return; var newvalue = codeEditor.getValue()||''; multiLineArgs[2](newvalue,multiLineArgs[0],multiLineArgs[1]) } +editor_blockly.multiLineCancel = function(){ + multiLineArgs=[null,null,null]; + editor_blockly.hideCodeEditor(); +} editor_blockly.doubleClickBlock = function (blockId){ var b=editor_blockly.workspace.getBlockById(blockId); diff --git a/_server/editor_mode.js b/_server/editor_mode.js index 5ef6852d..a0092c85 100644 --- a/_server/editor_mode.js +++ b/_server/editor_mode.js @@ -1,4 +1,5 @@ editor_mode = function(editor){ +var core = editor.core; function editor_mode(){ this.ids={ diff --git a/editor.html b/editor.html index 6cde4cea..854ab8cb 100644 --- a/editor.html +++ b/editor.html @@ -99,7 +99,7 @@ -
+

事件编辑器    @@ -115,6 +115,7 @@ +

-