update _server/README.md

_server/README.md

@@ -1,140 +1,57 @@
 # editor
 
-[重构](refactoring.md)
+直接使用游戏运行时(之后简称core)的代码来绘制游戏画面, 借助fs.js来实现浏览器编辑文件. 通过表格编辑数据, blockly图块编辑事件, code mirror编辑文本的可视化魔塔编辑器.
 
->! 以下均是v2.0时的说明, 未及时改动
+![](img_md/view1.png)
 
-本目录下所有文件,以及`../editor.html`和`../启动服务.exe`([源码](http://github.com/ckcz123/mota-js-server/))是地图编辑器的所有组件.
+左侧数据区, 中间地图区, 右侧素材区
 
-`editor.js`,`editor_file.js`和`editor_mode.js`耦合较强,`editor_blockly.js`和`editor_multi.js`和`fs.js`基本可以独立使用.
+![](img_md/view2.png)
 
-## 各组件功能
+事件编辑器
 
-### 总体上
+![](img_md/view3.png)
 
-以`display:none`的形式引入了`index.html`的`dom`,修改了原来的`.gameCanvas #ui #data`等的名字以避免冲突
+脚本编辑器
 
-通过`main.init('editor')`加载数据
+> 此文件是editor的结构说明, 不是使用文档
 
-`editor`模式关闭了部分动画
+## 组成
 
-`core.drawMap`中`editor`模式下不再画图,而是生成画图的函数提供给`editor`
+本目录下所有文件,以及`../editor.html`,`../editor-mobile.html`和`../启动服务.exe`,`../server.py`是地图编辑器的所有组件.
 
-`editor`模式下`GlobalAnimate`可以独立的选择是否播放
+### 父目录
++ editor(-mobile).html  
+  编辑器的[入口页面](http://127.0.0.1:1055/editor.html)  
+  以`display:none`的形式引入了core的`index.html`的`dom`,修改了原来的`.gameCanvas #ui #data`等的名字以避免冲突  
++ 启动服务.exe [源码](http://github.com/ckcz123/mota-js-server/)  
+  为fs.js提供后端支持, 同时集成了一些实用工具
++ server.py  
+  非windows平台中为fs.js提供后端支持  
 
-`core.playBgm`和`core.playSound`中非`play`模式不再播放声音
+### core
 
-`core.show`和`core.hide`中非`play`模式不再进行动画而是立刻完成并执行回调
+游戏运行时中部分代码根据`main.mod=='editor'`进行了调整
 
-`editor`模式不执行`core.resize`
++ 通过`main.init('editor')`加载数据
 
-### editor.js
++ `editor`模式关闭了部分动画
 
-``` js
++ `core.drawMap`中`editor`模式下不再画图,而是生成画图的函数提+ 供给`editor`
-editor.mapInit();//清空地图
-editor.changeFloor('MT2')//切换地图
-editor.util.guid()//产生一个可以作为id的长随机字符串
-```
 
-`editor.updateMap`中画未定义快的报错
++ `editor`模式下`GlobalAnimate`可以独立的选择是否播放
 
-### editor_file.js
++ `core.playBgm`和`core.playSound`中非`play`模式不再播放声音
 
-提供了以下函数进行楼层`map`数组相关的操作
++ `core.show`和`core.hide`中非`play`模式不再进行动画而是立刻+ 完成并执行回调
-```javascript
-editor.file.saveFloorFile
-editor.file.saveFloorFileAs
-```
 
-编辑模式有关的查询
++ `editor`模式不执行`core.resize`
-```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)});
-editor.file.editFunctions([],function(a){console.log(a)});
-```
 
-编辑模式有关的编辑
-```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.file.editFunctions(["change","['events']['afterChangeLight']","function(x,y){console.log(x,y)}"],function(a){console.log(a)});
-```
-
-### editor_mode.js
-生成表格并绑定事件的函数
-```javascript
-editor.mode.loc();
-editor.mode.enemyitem();
-editor.mode.floor();
-editor.mode.tower();
-editor.mode.functions();
-```
-
-切换模式
-```javascript
-editor.mode.onmode('');//清空
-editor.mode.onmode('save');//保存
-editor.mode.onmode('nextChange');//下次onmode时前端进行切换
-
-editor.mode.onmode('loc');
-editor.mode.onmode('enemyitem');
-editor.mode.onmode('floor');
-editor.mode.onmode('tower');
-editor.mode.onmode('functions');
-editor.mode.onmode('map');
-editor.mode.onmode('appendpic');
-```
-在`onmode('save')`时,改动才会保存到文件,涉及到图片的改动需要刷新页面使得`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.mode.listen`中提供了追加素材的支持.
-
-
-### editor_blockly.js
-
-把选定`id_`的事件用blockly编辑
-``` js
-editor_blockly.import(id_,{type:'event'});
-```
-
-把文本区域的代码转换成图块
-``` js
-editor_blockly.parse();
-```
-
-### editor_multi.js
-
-用[CodeMirror](https://github.com/codemirror/CodeMirror) 实现有高亮的多行文本编辑
-
-编辑选定`id_`的文本域
-``` js
-editor_multi.import(id_,{lint:true})
-```
-
-编辑blockly方块的特定域
-``` js
-editor_multi.multiLineEdit(value,b,f,{lint:true},callback)
-```
 
 ### fs.js
 
-模仿node的fs模块提供如下api,与`启动服务.exe`配合为js提供文件读写功能
+依照[issue#31](https://github.com/ckcz123/mota-js/issues/13)的约定, 模仿node的fs模块提供如下api,与`启动服务.exe`,`server.py`配合为js提供文件读写功能, 是编辑器成立的前提
+
 ``` js
 fs.readFile('file.in','utf-8',callback) 
 //读文本文件
@@ -162,3 +79,205 @@ fs.readdir(path, callback)
 //所有参数不允许缺省
 ```
 
+### editor_multi.js
+
+用[CodeMirror](https://github.com/codemirror/CodeMirror) 实现有高亮的多行文本编辑
+
+编辑选定`id_`的文本域
+``` js
+editor_multi.import(id_,{lint:true})
+```
+
+编辑blockly方块的特定域
+``` js
+editor_multi.multiLineEdit(value,b,f,{lint:true},callback)
+```
+
+配置表格
+``` js
+editor_multi.editCommentJs(mod)
+```
+
+### MotaAction.g4
+
+通过[antlr-blockly](https://github.com/zhaouv/antlr-blockly)的语法定义core中各事件对应的方块.  
+
+借助google的[blockly](https://github.com/google/blockly)来实现事件的可视化编辑.
+
+入口方块以`_m`结尾
+
+一般语句写在`action`中, 以`_s`结尾
+
+### editor_blockly.js
+
+把选定`id_`的事件用blockly编辑
+``` js
+editor_blockly.import(id_,{type:'event'});
+```
+
+把文本区域的代码转换成图块
+``` js
+editor_blockly.parse();
+```
+
+`initscript中`的`toolboxObj`定义了侧边栏中显示的图块
+
+自定义`Blockly.FieldColour.prototype.createWidget_`修改了颜色选择器的行为
+
+自定义`Blockly.FieldTextInput.prototype.showInlineEditor_`添加了自动补全
+
+
+### editor_mode.js
+
+用于切换数据区
+
+加载数据
+```javascript
+editor.mode.loc();
+editor.mode.enemyitem();
+editor.mode.floor();
+editor.mode.tower();
+editor.mode.functions();
+```
+
+切换模式
+```javascript
+editor.mode.onmode('');//清空
+editor.mode.onmode('save');//保存
+editor.mode.onmode('nextChange');//下次onmode时前端进行切换
+
+editor.mode.onmode('loc');
+editor.mode.onmode('enemyitem');
+editor.mode.onmode('floor');
+editor.mode.onmode('tower');
+editor.mode.onmode('functions');
+editor.mode.onmode('map');
+editor.mode.onmode('appendpic');
+```
+在`onmode('save')`时,改动才会保存到文件,涉及到图片的改动需要刷新页面使得`editor`能看到
+
+数据区一些通用的函数也定义在这里
+
+### editor_table.js
+
+处理表格的生成, 及其响应的事件
+
+其接受来自../project/\*.js的数据`obj`和来自table/\*.comment.js的注释`commentObj`
+
+commentObj的结构如示例
+``` js
+{
+	"_type": "object",
+	"_data": {
+		"events": {
+			"_type": "object",
+			"_data": {
+				"resetGame": {
+					"_leaf": true,
+					"_type": "textarea",
+					"_lint": true,
+					"_data": "重置整个游戏"
+				},
+				"setInitData": {
+					"_leaf": true,
+					"_type": "textarea",
+					"_lint": true,
+					"_data": "设置初始属性"
+        },
+```
+一层正常数据, 一层`_`开头的结构说明, 忽略`_`层的话与obj同结构
+
+通过
+``` js
+editor.table.objToTable(obj, commentObj)
+editor.table.objToTr
+editor.table.objToTd
+```
+遍历这两个对象来生成表格, 叶节点根据`_type`渲染成对应的dom
+
+表格的值变化`onchange`, 双击`dblclickfunc`, 删除`deletefunc`, 添加`addfunc`也定义在此文件
+
+### editor_mappanel.js
+
+与地图区相关的功能
++ 画地图 线/矩形/tileset
++ 通过地图选中事件或素材
++ 右键菜单
++ 切换楼层
++ 大地图移动可视窗口
+
+### editor_materialpanel.js
+
+与素材区相关的功能
++ 选中
++ 展开/折叠
+
+### editor_datapanel.js
+
+与数据区相关的功能 (且与表格无关的功能)
++ 地图编辑
+  - 创建新地图
+  - 批量创建
++ 地图选点
++ 图块属性
+  - 注册素材
+  - 修改id
++ 楼层属性
+  - 修改楼层id
++ 全塔属性
++ 脚本编辑
++ 追加素材
+  - 选择导入的区域
+  - 导入图片
+  - 改色相
+  - 选中图片中的格子
+  - 确认追加
++ 公共事件
++ 插件编写
+
+### editor_ui.js
+
+ui事件中没有具体到前三个区中的函数
++ 响应点击
++ 快捷键
++ 显示帮助
++ UI预览 & 地图选点相关
+
+### editor_util.js
+
+一些通用的函数
++ 生成id
++ HTML转义
++ 像素处理
++ base64的encode/decode
++ 检查值是否为空
+
+### editor_listen.js
+
+界面与功能的绑定
+
+### editor_file.js
+
+包装fs.js, 把数据读写到对应的文件
+
+### editor_game.js
+
+游戏数据的处理
+
+此部分的重构未完成, 实际上是由editor_file.js和editor_file_unsorted.js来做的
+
+### editor.js
+
+``` js
+editor.mapInit();//清空地图
+editor.changeFloor('MT2')//切换地图
+editor.util.guid()//产生一个可以作为id的长随机字符串
+```
+
+`editor.updateMap`中画未定义快的报错
+
+### editor_file.js
+
+初始化加整合各模块
+
+现状是还放了一些游戏数据有关的函数未挪到editor_game, 以及部分和入口页面生成有关的函数

_server/refactoring.md

@@ -1,6 +1,6 @@
 # 重构
 
-> 目前状态: 按功能分类已基本完成
+> 目前状态: 按功能分类已基本完成, 未完成file/game的重写
 
 总体思路  
 + 按功能拆分文件
@@ -24,11 +24,11 @@ editor_file之后是更改editor.map的储存方式, 现有的存对象的模式
 + [ ] editor_file 调用fs.js编辑文件, 把原editor\_file模块化, 并且只负责文件写入
 + [ ] editor_game 处理游戏数据, 导入为editor的数据, 编辑数据, 从原editor和editor_file中抽离. **只有此文件允许`\s(main|core)`形式的调用**(以及其初始化`editor_game_wrapper(editor, main, core);`)
 + [x] editor_util 生成guid/处理颜色 等函数, 从editor分离
-+ [ ] editor_action 处理界面上的按钮/下拉框点击等用户的操作与功能函数的绑定, 维护editor.dom, unsorted_1/2中的绑定挪到此处, 其中的函数内容, 分类放在其他文件
++ [ ] editor_listen 处理界面上的按钮/下拉框点击等用户的操作与功能函数的绑定, 维护editor.dom, unsorted_1/2中的绑定挪到此处, 其中的函数内容, 分类放在其他文件
-+ [ ] editor_mappanel 与地图面板相关的功能, <-unsorted_1/2/3
++ [ ] editor_mappanel 与地图区相关的功能, <-unsorted_1/2/3
-+ [ ] editor_datapanel 与数据面板相关的功能, <-unsorted_1/2/3
++ [ ] editor_datapanel 与数据区相关的功能, <-unsorted_1/2/3
-+ [ ] editor_materialpanel 与素材面板相关的功能, <-unsorted_1/2/3
++ [ ] editor_materialpanel 与素材区相关的功能, <-unsorted_1/2/3
-+ [ ] editor_ui 维护printe/printf/tip, 以及之后可能的窗口化, ui事件中没有具体到前三个面板中的函数 <-unsorted_1/2/3
++ [ ] editor_ui 维护printe/printf/tip, 以及之后可能的窗口化, ui事件中没有具体到前三个区中的函数 <-unsorted_1/2/3
 + [ ] editor 执行初始化流程加组合各组件
 + [ ] 原editor_mode 移除
 + [x] 原vm 移除