Skip to content

K
kityminder-core
Commit a097fa49 authored by techird's avatar techird
Browse files
Options

remove doc

parent f964949f
Hide whitespace changes
Inline Side-by-side
Showing with 0 additions and 288 deletions
doc/Import Export.md deleted 100644 → 0
View file @ f964949f
# 导入导出功能设计
## 名词
* 本地格式
指一种公开的脑图编码格式，如 XMind、FreeMind、MinderManager、PDF等。下文代码中，local 表示本地格式字符串或二进制流（Blob）。
* Json格式
指 KityMinder 自身使用的 JS 内存对象，是带数据的树结构。数据结构如下：
```js
// A <MinderNode> is:
{
"data" : {...},
"children" : [<MinderNode>, <MinderNode>, ...]
}
```
下文代码中，json 表示 json 格式字符串。
* 编码
把 Json 格式转换为一种本地格式的过程
* 解码
把一种本地格式解析回 Json 格式的过程
* 协议
协议包含名称（作为标识）、编码方法（encode）、解码方法（decode）、识别判断（recognize）。解码方法是可选项，因为对于某些协议可以只支持导出而不需支持导入（如 PDF ）。识别判断也是可选的，识别判断用于快速判断一个字符串或 Blob 是否改协议的本地数据，这个方法用于自动识别未知格式的协议。如果不提供这个方法，那么将不能把未知格式识别为该协议的格式，所以建议提供。
## 协议注册
使用 `KityMinder` 上的静态方法 `registerProtocal()` 来注册协议。
```js
KityMinder.registerProtocal( "xmind", function() {
return {
encode: function( json ) {
// return local;
},
decode: function( local ) {
// return json;
},
recognize: function( local ) {
// return bool;
}
}
});
```
## 协议使用
使用 `KityMinder` 上的静态方法 `findProtocal()` 来获取协议。
```js
var pXMind = KityMinder.findProtocal( "xmind" );
if (pXMind && pXMind.encode) {
local = pXMind.encode( json );
}
```
## 协议枚举
使用 `KityMinder` 上的静态方法 `getSupportedProtocals()` 来获取支持的协议列表。
```js
var supported = KityMinder.getSupportedProtocals();
// supported == [ 'xmind', 'txt', 'pdf', ... ]
```
## 导入导出接口
导入导出接口名称与原来架构的保持一致，只是参数有所调整。
### 导入
```js
minder.importData( local [, protocalName] );
```
导入数据需要提供读取到的本地数据，如果指明协议，则直接用指明的协议来解析；否则尝试去识别本地数据的协议格式。
### 导出
```js
var exported = minder.exportData( [protocalName] );
```
使用指定的协议来导出数据，如果不指定，则导出成 Json 格式。
doc/脑图提测-上线流程.md deleted 100644 → 0
View file @ f964949f
#脑图提测－上线流程
###前提
* 测试的浏览器版本默认涵盖Chrome/FireFox/IE9+
* 对全部功能的测试都涵盖快捷键和菜单两种操作方式
* 目前只进行PC端的测试
### 提测前确认
* 确认大家的代码全部成功提交，在<a href='fex.baidu.com/kityminder.dist'>fex.baidu.com/kityminder.dist</a>上可运行
* 统一github上issue和项目文件夹里的CHANGELOG.md的修改点
###新上线功能测试
* 根据CHANGELOG.md的列表测试本次待上线功能
###回归测试
* 每次上线需要回归测试的点：
1.导入功能
第三方格式：包括xmind/freemind/mindmanager
kityMinder自带格式：.km,.txt
加载最近脑图：打开应用时自动加载最近编辑的脑图
从网盘中加载：点选文件列表中的文件可以从网盘中加载相应的内容
－－－
2.导出功能
文本格式：.km,.txt
图片格式：.png,.svg
保存到网盘：1)保存操作可用 2）网盘中存在相应的文件
－－－
3.分享功能
复制分享链接:1）保证分享链接能够成功复制，2)复制的链接能够成功打开
分享到社交网络:1）分享按钮可点 2)分享到社交网络的内容可看
－－－
4.编辑功能
文本编辑: 1)光标定位在任何情况下都与编辑区中的文字相符 2）字体、字号、颜色、加粗加斜可用 3）文本拖动框选功能 4）复制粘贴
－－－
Icon:1) 选中节点的时候，Icon面板上的选项根据节点上的标签自动高亮 2）点击面板上的选项可添加Icon 3）点击高亮的选项可以删除节点上的Icon
－－－
5. 历史记录
UNDO/REDO
－－－
＊6. 切换主题、节点拖动
###上线前确认
* 当前标识的版本是否与待上线版本相符
* 待上线文件夹中的内容是否与测试通过的版本相符
###上线
* 版本上线
* 对线上版本进行主要功能测试，保证可用
1. 分享功能
2. 保存功能
\ No newline at end of file
doc/重构方案.md deleted 100644 → 0
View file @ f964949f
KityMinder 渲染和布局重构方案
=====
## 背景
当前的节点渲染和布局把很多部分的功能都揉在一起来实现，维护和添加新功能都比较困难，所以决定把现有的 layout.js、layout.default.js 和 layout.bottom.js 重构。
## 约定
为了不产生误会，下面约定一些词汇的意思。
样式：对节点或脑图其他内容的外观的描述。
渲染：对节点的绘制的过程。渲染参照的坐标系是节点画布的坐标系。
布局：对节点定位的过程，发生在渲染之后。定位使用的坐标系是脑图画布的坐标系。
节点树多边形：表示一个节点以及其子树所占的多边形区域。
## 样式、渲染和布局的梳理
### Theme
负责注册和管理样式。
注册样式：
```js
KityMinder.registerTheme( 'default', {
'root-padding': [30, 20],
'root-color': 'black',
'root-background': '#A4c5c0',
'root-stroke': 'none',
'root-radius': 4,
'root-space': [10, 5],
'root-font-family': 'Arial',
'root-font-size': 14,
'main-connect-width': 2,
'main-connect-color': 'white',
'main-connect-type': 'arc',
'sub-connect-type': 'fold'
...
});
```
切换样式：
```js
minder.useTheme('default');
```
读取样式：
```js
minder.getStyle('root-radius'); // returns 4
```
```js
node.getStyle('radius'); // node.getType() 返回 'root', 会自动拼接样式项，返回 4
node.getStyle('padding-left'); // returns 20 发现结尾是 '-left'、'-right' 等的会自动找到样式表描述的数组按照 CSS 的方式查找值
```
### Render
Render 负责渲染工作。
对于一个节点，有两个渲染容器（以前是多个），一个是通过 `getContentGroup()` 来获取的内容容器，一个是通过 `getDecorationGroup()` 来获得的装饰容器。布局的时候，内容容器最终决定该节点的渲染大小，装饰容器里的内容会被忽略。
节点的渲染分步进行，按顺序描述是：`center`, `left`, `right`, `top`, `bottom`。之前渲染这五个步骤是通过事件的形式来通知，每次渲染都清除了原本的内容重新创建节点，造成性能浪费。修改渲染的机制，改成从模块直接注册渲染的节：
```js
KityMinder.registerModule( 'MyModule', {
commands: { ... },
events: { ... },
renderers: {
left: kity.createClass( 'MyRenderer', {
base: Renderer,
create: function(node) {
this.content = new kity.Group();
// 添加元素
node.getContentGroup().addShape(this.content);
},
update: function(node) {
var content = this.content;
// update content
// 需要返回更新后内容所占的矩形区域，简单的返回形式是 return this.content.getRenderBox();
return {
x: 30,
y: -30,
width: 24,
height: 24
};
}
}
}
});
```
用 `renderers` 节来描述渲染器，节的 `key` 指定渲染器使用的阶段，节的 `value` 给出渲染器的类。渲染器需要继承 `Renderer` 类，并且实现两个抽象方法：`create()` 和 `update()`。
`create` 方法只会在节点创建的时候调用一次，此时应该创建渲染所需要的元素，并且附加到节点上。
`update` 方法会在节点需要重新渲染的时候被调用，此时可以选择隐藏、显示或更新元素。
在渲染过程中，节点提供下述信息：
- `node.getStyle(name)` 获得节点当前的某个样式描述
- `node.getContentBox()` 获得节点当前已渲染的内容在节点的 ConentGroup 的坐标系中所占的矩形区域。
- `node.getType()` 获得节点的类型（'root' | 'main' | 'sub'）
要触发一个节点的渲染，直接调用 'node.render()' 即可。
### Layout
Layout 负责布局工作，布局一般发生在渲染之后。对一个节点的布局，指的是排列其子树。
允许多种布局，布局注册的方式如下：
```js
KityMinder.registerLayout('default', kity.createClass('DefaultLayout', {
base: Layout,
doLayout: function(node) {
// do layout
}
}));
```
让节点布局的方式是调用节点的 `node.layout([name])` 方法。该方法的执行过程如下：
- 调用 `node.getLayout()` 获得节点的布局名称
- 如果节点中的 data 包含布局名称，返回该布局名称，否则下一步
- 如果节点是根节点，返回 KityMinder.getDefaultLayout()
- 返回父节点的 `getLayout()`
- 根据布局名称获得相应的布局方法，把节点作为参数传进去调用
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment