Merge pull request #337 from zhaouv/refactoring-editor

Refactoring editor
This commit is contained in:
Zhang Chen 2019-03-31 19:26:31 +08:00 committed by GitHub
commit 2cea5fccfc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 155 additions and 132 deletions

View File

@ -43,24 +43,11 @@ editor.info
editor.prototype.init = function (callback) {
editor_util_wrapper(editor);
editor_game_wrapper(editor, main, core);
editor_table_wrapper(editor);
var afterMainInit = function () {
core.floors = JSON.parse(JSON.stringify(core.floors, function (k, v) {
if (v instanceof Function) {
return v.toString()
} else return v
}));
core.data = JSON.parse(JSON.stringify(core.data, function (k, v) {
if (v instanceof Function) {
return v.toString()
} else return v
}));
data_a1e2fb4a_e986_4524_b0da_9b7ba7c0874d = JSON.parse(JSON.stringify(data_a1e2fb4a_e986_4524_b0da_9b7ba7c0874d, function (k, v) {
if (v instanceof Function) {
return v.toString()
} else return v
}));
editor.game.fixFunctionInGameData();
editor.main = main;
editor.core = core;
editor.fs = fs;
@ -78,10 +65,10 @@ editor.prototype.init = function (callback) {
var afterCoreReset = function () {
editor.idsInit(core.maps, core.icons.icons); // 初始化图片素材信息
editor.game.idsInit(core.maps, core.icons.icons); // 初始化图片素材信息
editor.drawInitData(core.icons.icons); // 初始化绘图
editor.fetchMapFromCore();
editor.game.fetchMapFromCore();
editor.updateMap();
editor.buildMark();
editor.drawEventBlock();
@ -105,69 +92,6 @@ editor.prototype.init = function (callback) {
afterMainInit();
}
editor.prototype.idsInit = function (maps, icons) {
editor.ids = [0];
editor.indexs = [];
var MAX_NUM = 0;
var keys=Object.keys(maps_90f36752_8815_4be8_b32b_d7fad1d0542e);
for(var ii=0;ii<keys.length;ii++){
var v=~~keys[ii];
if(v>MAX_NUM && v<core.icons.tilesetStartOffset)MAX_NUM=v;
}
editor.MAX_NUM=MAX_NUM;
var getInfoById = function (id) {
var block = maps.initBlock(0, 0, id);
if (hasOwnProp(block, 'event')) {
return block;
}
}
var point = 0;
for (var i = 0; i <= MAX_NUM; i++) {
var indexBlock = getInfoById(i);
editor.indexs[i] = [];
if (indexBlock) {
var id = indexBlock.event.id;
var indexId = indexBlock.id;
var allCls = Object.keys(icons);
if(i==17){
editor.ids.push({'idnum': 17, 'id': id, 'images': 'terrains'});
point++;
editor.indexs[i].push(point);
continue;
}
for (var j = 0; j < allCls.length; j++) {
if (id in icons[allCls[j]]) {
editor.ids.push({'idnum': indexId, 'id': id, 'images': allCls[j], 'y': icons[allCls[j]][id]});
point++;
editor.indexs[i].push(point);
}
}
}
}
editor.indexs[0] = [0];
var startOffset = core.icons.tilesetStartOffset;
for (var i in core.tilesets) {
var imgName = core.tilesets[i];
var img = core.material.images.tilesets[imgName];
var width = Math.floor(img.width/32), height = Math.floor(img.height/32);
if(img.width%32 || img.height%32){
alert(imgName+'的长或宽不是32的整数倍, 请修改后刷新页面');
}
if(img.width*img.height > 32*32*3000){
alert(imgName+'上的图块数量超过了3000请修改后刷新页面');
}
for (var id=startOffset; id<startOffset+width*height;id++) {
var x = (id-startOffset)%width, y = parseInt((id-startOffset)/width);
var indexBlock = getInfoById(id);
editor.ids.push({'idnum': id, 'id': indexBlock.event.id, 'images': imgName, "x": x, "y": y, isTile: true});
point++;
editor.indexs[id]=[point];
}
startOffset += core.icons.tilesetStartOffset;
}
}
editor.prototype.mapInit = function () {
var ec = document.getElementById('event').getContext('2d');
ec.clearRect(0, 0, core.bigmap.width*32, core.bigmap.height*32);
@ -195,39 +119,6 @@ editor.prototype.mapInit = function () {
editor.currentFloorData.cannotMove = {};
}
editor.prototype.fetchMapFromCore = function(){
var mapArray = core.maps.saveMap(core.status.floorId);
editor.map = mapArray.map(function (v) {
return v.map(function (v) {
var x = parseInt(v), y = editor.indexs[x];
if (y == null) {
printe("素材数字"+x+"未定义。是不是忘了注册或者接档时没有覆盖icons.js和maps.js");
y = [0];
}
return editor.ids[y[0]]
})
});
editor.currentFloorId = core.status.floorId;
editor.currentFloorData = core.floors[core.status.floorId];
for(var ii=0,name;name=['bgmap','fgmap'][ii];ii++){
var mapArray = editor.currentFloorData[name];
if(!mapArray || JSON.stringify(mapArray)==JSON.stringify([])){//未设置或空数组
//与editor.map同形的全0
mapArray=eval('['+Array(editor.map.length+1).join('['+Array(editor.map[0].length+1).join('0,')+'],')+']');
}
editor[name]=mapArray.map(function (v) {
return v.map(function (v) {
var x = parseInt(v), y = editor.indexs[x];
if (y == null) {
printe("素材数字"+x+"未定义。是不是忘了注册或者接档时没有覆盖icons.js和maps.js");
y = [0];
}
return editor.ids[y[0]]
})
});
}
}
editor.prototype.changeFloor = function (floorId, callback) {
for(var ii=0,name;name=['map','bgmap','fgmap'][ii];ii++){
var mapArray=editor[name].map(function (v) {
@ -243,7 +134,7 @@ editor.prototype.changeFloor = function (floorId, callback) {
core.bigmap.offsetY=0;
editor.moveViewport(0,0);
editor.fetchMapFromCore();
editor.game.fetchMapFromCore();
editor.updateMap();
editor_mode.floor();
editor.drawEventBlock();

124
_server/editor_game.js Normal file
View File

@ -0,0 +1,124 @@
editor_game_wrapper = function (editor, main, core) {
editor_game = function () {
}
editor_game.prototype.fixFunctionInGameData = function () {
core.floors = JSON.parse(JSON.stringify(core.floors, function (_k, v) {
if (v instanceof Function) {
return v.toString()
} else return v
}));
core.data = JSON.parse(JSON.stringify(core.data, function (_k, v) {
if (v instanceof Function) {
return v.toString()
} else return v
}));
data_a1e2fb4a_e986_4524_b0da_9b7ba7c0874d = JSON.parse(JSON.stringify(data_a1e2fb4a_e986_4524_b0da_9b7ba7c0874d, function (_k, v) {
if (v instanceof Function) {
return v.toString()
} else return v
}));
}
editor_game.prototype.idsInit = function (maps, icons) {
editor.ids = [0];
editor.indexs = [];
var MAX_NUM = 0;
var keys=Object.keys(maps_90f36752_8815_4be8_b32b_d7fad1d0542e);
for(var ii=0;ii<keys.length;ii++){
var v=~~keys[ii];
if(v>MAX_NUM && v<core.icons.tilesetStartOffset)MAX_NUM=v;
}
editor.MAX_NUM=MAX_NUM;
var getInfoById = function (id) {
var block = maps.initBlock(0, 0, id);
if (hasOwnProp(block, 'event')) {
return block;
}
}
var point = 0;
for (var i = 0; i <= MAX_NUM; i++) {
var indexBlock = getInfoById(i);
editor.indexs[i] = [];
if (indexBlock) {
var id = indexBlock.event.id;
var indexId = indexBlock.id;
var allCls = Object.keys(icons);
if(i==17){
editor.ids.push({'idnum': 17, 'id': id, 'images': 'terrains'});
point++;
editor.indexs[i].push(point);
continue;
}
for (var j = 0; j < allCls.length; j++) {
if (id in icons[allCls[j]]) {
editor.ids.push({'idnum': indexId, 'id': id, 'images': allCls[j], 'y': icons[allCls[j]][id]});
point++;
editor.indexs[i].push(point);
}
}
}
}
editor.indexs[0] = [0];
var startOffset = core.icons.tilesetStartOffset;
for (var i in core.tilesets) {
var imgName = core.tilesets[i];
var img = core.material.images.tilesets[imgName];
var width = Math.floor(img.width/32), height = Math.floor(img.height/32);
if(img.width%32 || img.height%32){
alert(imgName+'的长或宽不是32的整数倍, 请修改后刷新页面');
}
if(img.width*img.height > 32*32*3000){
alert(imgName+'上的图块数量超过了3000请修改后刷新页面');
}
for (var id=startOffset; id<startOffset+width*height;id++) {
var x = (id-startOffset)%width, y = parseInt((id-startOffset)/width);
var indexBlock = getInfoById(id);
editor.ids.push({'idnum': id, 'id': indexBlock.event.id, 'images': imgName, "x": x, "y": y, isTile: true});
point++;
editor.indexs[id]=[point];
}
startOffset += core.icons.tilesetStartOffset;
}
}
editor_game.prototype.fetchMapFromCore = function(){
var mapArray = core.maps.saveMap(core.status.floorId);
editor.map = mapArray.map(function (v) {
return v.map(function (v) {
var x = parseInt(v), y = editor.indexs[x];
if (y == null) {
printe("素材数字"+x+"未定义。是不是忘了注册或者接档时没有覆盖icons.js和maps.js");
y = [0];
}
return editor.ids[y[0]]
})
});
editor.currentFloorId = core.status.floorId;
editor.currentFloorData = core.floors[core.status.floorId];
for(var ii=0,name;name=['bgmap','fgmap'][ii];ii++){
var mapArray = editor.currentFloorData[name];
if(!mapArray || JSON.stringify(mapArray)==JSON.stringify([])){//未设置或空数组
//与editor.map同形的全0
mapArray=eval('['+Array(editor.map.length+1).join('['+Array(editor.map[0].length+1).join('0,')+'],')+']');
}
editor[name]=mapArray.map(function (v) {
return v.map(function (v) {
var x = parseInt(v), y = editor.indexs[x];
if (y == null) {
printe("素材数字"+x+"未定义。是不是忘了注册或者接档时没有覆盖icons.js和maps.js");
y = [0];
}
return editor.ids[y[0]]
})
});
}
}
editor.constructor.prototype.game = new editor_game();
}
//editor_game_wrapper(editor);

View File

@ -1,48 +1,52 @@
# 重构
+ [ ] 按功能拆分文件
+ [ ] 左侧页面模块化, 方便添加
+ [ ] 不同的模式的文件操作尽可能模块化
+ 按功能拆分文件
+ 左侧页面模块化, 方便添加
+ 不同的模式的文件操作尽可能模块化
---
文件结构
## 文件结构
+ [x] editor_blockly 图块化事件编辑器, 基本不改动
+ [x] editor_multi 多行文本编辑器, 基本不改动
+ [ ] editor_table 处理表格的生成, 及其响应的事件, 从原editor\_mode中分离
+ [x] editor_table 处理表格的生成, 及其响应的事件, 从原editor\_mode中分离
+ [ ] editor_file 调用fs.js编辑文件, 把原editor\_file模块化
+ [ ] editor_game 处理来自core的数据, 导入为editor的数据, 从原editor中分离
+ [ ] editor_util 生成guid等函数, 从editor分离
+ [x] editor_util 生成guid等函数, 从editor分离
+ [ ] editor 执行初始化流程加组合各组件
+ [ ] 原editor_mode 移除
+ [ ] 原vm 移除
---
对象结构
## 对象结构
```
editor: {
__proto__: {
blockly: 组件
multi: 组件
file: 组件
table: 组件
util: 组件
fs
util
file
table
multi
blockly
game
}
game: 来自游戏的数据
config: 编辑器配置
mode: 当前的模式(左侧的选择)
map: 当前编辑层的地图
isMobile: 编辑器是否是手机端
currentFloorData: 当前编辑的楼层数据
...
}
```
---
某些注意到的点
## 某些注意到的点&准备修改的内容
+ 插入公共事件的参数的转义处理, .g4中添加ObjectString, 要求其中的值可以JSON.parse, 生成的code中也是作为对象而不是字符串出现
+ 转义改由editor.blockly处理,editor.multi原样接受和返回
+ 地图的编辑与其他(如全塔属性和楼层属性), 现在的文件操作的模式是完全不同的
楼层文件的储存与其他不同
@ -51,6 +55,8 @@ editor: {
+ 目前editor.map中储存的是info\<object\>, 准备改为和core一致只储存数字
+ editor.file在修改是不再返回obj和commentobj,只在查询时返回
## 功能改进
+ [ ] 大地图
@ -60,7 +66,7 @@ editor: {
+ [ ] ? 表格折叠
变为四栏, 可以折叠展开
+ [ ] blockly对于无法识别的图块原样返回
+ [x] blockly对于无法识别的图块原样返回
+ [ ] ? 简洁的事件方块注册
`editor.registerEvent('log',[['test','Int','测试',0],['floorId','Idstring','楼层','MT0']])`

View File

@ -527,6 +527,7 @@ if (location.protocol.indexOf("http")!=0) {
<script src='_server/fs.js'></script>
<script src='_server/editor_util.js'></script>
<script src='_server/editor_file.js'></script>
<script src='_server/editor_game.js'></script>
<script src='_server/editor_table.js'></script>
<script src='_server/editor_mode.js'></script>
<script src='_server/vm.js'></script>

View File

@ -510,6 +510,7 @@ if (location.protocol.indexOf("http")!=0) {
<script src='_server/fs.js'></script>
<script src='_server/editor_util.js'></script>
<script src='_server/editor_file.js'></script>
<script src='_server/editor_game.js'></script>
<script src='_server/editor_table.js'></script>
<script src='_server/editor_mode.js'></script>
<script src='_server/vm.js'></script>