文档章节

学习 kityminder 笔记(八)

刘军兴
 刘军兴
发布于 2015/11/24 09:46
字数 960
阅读 121
收藏 0

继续接上篇(文本多了似乎容易丢)...

== module/image.js ==

// 为选中的节点添加图片.
class ImageCommand : Command {
   execute(): for-each node.data += {.image=, ...}
     这里发布了事件 saveScene, 可能会存图片? 
}
这里小结一下 Command.queryState() 应是获取状态, 一般表示是否可执行此命令.
Command.queryValue() 应是获取该命令对应保存/使用的数据, 一般在 node.data{} 中.

class ImageRenderer : Renderer {
   create(): 创建容纳 image 所需的 kity.Image 元素, 实际查看对应 <image>.
   update(): 根据 image size 等, 计算布局位置 box 吧?
}

register module image {
   commands: image->ImageCommand,
   renderers: top->ImageRenderer (那么图片总是显示在上部分?)
}

 

== module/keynav.js ==

register module KeyboardModule {
   event layoutallfinish: 重新计算一个 position-network
   event keydown: 对上下左右箭头导航.
}
这里有一个被赞的点子用于计算位置网络(position-network), 矩形最近距离等.
由于需要箭头按下能移动到合理的节点, 这里的算法值得看看. (以后有时间再说吧)

 

== module/layout.js: 布局模块 ==

// 设置选中节点的布局.
class LayoutCommand : Command {
   execute(): 每个节点都做 .layout()
}

class ResetLayoutCommand : Command {
   execute(): 对每个选中节点做 resetLayoutOffset(), 重置数据后重新布局.
}

register module LayoutModule {
   commands: layout->...command,
   contextmenu: ?
   shortcutKeys: Ctrl+Shift+L -> `resetlayout' command.
}

 

== module/node.js ==

// 添加子节点到选中的节点中
class AppendChildCommand : Command {
   execute(): 创建 node = km.createNode(), 添加到当前被选中节点, 布局. 
}

// 添加选中的节点的兄弟节点
class AppendSiblingCommand : Command {
   类似于 append-child, 只是添加成为当前被选中节点的 弟节点.
}

class RemoveNodeCommand : Command {
   execute(): 移除选中的节点..., 布局.
}

class AppendParentCommand : Command {
   execute(): 创建为当前节点的父节点...
}

register module NodeModule {
   commands: 映射上面四个命令.
   shortcutKeys: Enter, Insert|Tab, Del|Backspace etc.
}

 

== module/note.js ==

// 设置节点的备注信息, 备注在节点后面显示一个小标志.
class NoteCommand : Command {
   execute(): 设置 note 数据给节点.
}

class NoteIcon : kity.Group {
   ctor(): 创建一个预定义的 shape, 应该是纸页的样子的.
      绑定事件 mouseover, mouseout 以设置透明度等样式.
}

class NoteIconRenderer : Renderer {
   create(): 创建一个 NoteIcon 对象, 并绑定 mouse 多个事件. 通过产生事件的方式请求
       minder 显示 note (包装在 div 元素的一段 html)
   update(): 计算布局位置.
}

register module NoteModule {
   renderers: right->NoteIconRenderer (note 布局在右边)
   commands: note->NoteCommand   
}


== module/outline.js ==

class OutlineRenderer : Renderer {
   create(): 创建 outline 为一个 <rect>.
   update(): 根据 padding 等设置, 计算 outline box 位置, 返回为 kity.Box
}

class ShadowRenderer : Renderer {
   create(): 创建为 <rect>
   update(): 在少许偏移的地方产生一个阴影 rect.
}

class WireframeRenderer : Renderer {
   // 可能是某种测试的 renderer? 连线有关?
}

register module OutlineModule {
   events: ?
   renderers: outside->shadow,wireframe; outline->outline
}

 

== module/priorty.js ==

// 进度(?优先级) 图标的图形
class PriorityIcon : kity.Group {
   ctor(): 创建几个 path 构成图标.
}

class PriorityCommand : Command {
   execute(): 为每个节点设置 prior 数据并渲染和布局.
}

class PriorityRenderer : Renderer {
   create(), update(): 创建 icon, 计算其位置布局 box.
}

register module PriorityModule {
   commands: priority->...
   renderers: 优先级图标在文本左边, 故而 left->PriorityRenderer
}

 

下一个 ProgressModule 与 PriorityModule 各方面都相似(后者注释是copy来的都忘改了...), 省略.

== module/resource.js ==

// 在 Minder 上拓展一些关于资源的支持接口
extend class Minder {
   getHashCode(): 获取字符串的哈希值...
   getResourceColor(): 获取脑图中某个资源对应的颜色, 如果颜色用完了则哈希一个
   getUsedResource(): 获得已使用的资源的列表
}

// 设置选中节点资源为... 用于做工程图/甘特图...?
class ResourceCommand : Command {
   execute(): 为节点设置 data.resource = ..., 渲染+布局.
}

class ResourceRenderer : Renderer {
   // 资源渲染在 node 的右边. 所以应是 right->...
}

// 资源的覆盖图形, 为一个资源以指定的颜色渲染一个动态的覆盖图形
class ResourceOverlay : kity.Group {
   // 实际是 <rect> + <text> 元素
}

register module Resource {
   commands: resource->ResourceCommand,
   renderers: right->ResourceRenderer
}

 

== module/select.js ==

register module Select {
   init: 添加事件 window.mouseup, 以处理选取结束事件
   events: mousedown, mousemove, mouseup 实现矩形选择节点功能.
      快捷键 Ctrl+A 全选. 细节先略.
}



 

 

 


 


 


 

 

 


 


 

 



 

 

 

(END)

 

© 著作权归作者所有

共有 人打赏支持
刘军兴
粉丝 56
博文 187
码字总数 231243
作品 0
昌平
私信 提问
百度脑图解析:如何进行web复杂应用的渐进式开发

内容来源:2017 年 4 月 8 日,张博在“HTML5梦工场 & 微软开发者沙龙第05期—持续集成”进行《Web复杂应用的 「渐进式」开发》演讲分享。IT 大咖说(微信id:itdakashuo)作为独家视频合作方...

06/04
0
0
KityMinder 1.2.0 发布,脑图工具

脑图工具 KityMinder 出新版本啦! 功能增加,体验提升:) 自从KityMinder1.x版本正式上线以来,得到了广大同学的热情关注。同学们为KityMinder提出了各种好的建议。我们整个小组受到了很大...

战毅
2014/07/10
9.1K
12
Kity Minder 1.1.0 发布更新

KityMinder思维脑图,正式线上使用地址已经开放 naotu.baidu.com KityMinder Change Log v1.1.0 功能更新 添加了剪贴板操作的支持 添加了本地自动保存草稿的功能 优化了文字选中效果 改进了文...

战毅
2014/03/19
1K
5
学习 kityminder 笔记(五)

接着学习 kityminder, 前面其实没看完 kity, 大致了解之后, 我们先看看 minder 部分, 两者结合起来学更好些. 下载 kityminder-core (按文档说只含核心部分), 从 git-hub, 建立起开发/构造环境...

刘军兴
2015/11/19
0
0
Kity Minder —— 来自百度的在线思维导图工具

KityMinder 是百度FEX团队的f-cube小组(原UEditor小组)的又一力作。作为一款在线的脑图编辑工具,它有着不输给Native编辑工具(如 xMind,MindManager等)的最佳用户体验。同时,它充分发挥...

oschina
2014/03/04
4
0

没有更多内容

加载失败,请刷新页面

加载更多

开源软件会被云杀死吗 ?

本文转载云头条,原作者:Michael Stiefel是Reliable Software公司的负责人,是一名软件架构和开发顾问。 文章要点 虽然开源开发不会消失,但商业开源厂商的未来不是很有希望。随着全面管理的...

linuxCool
43分钟前
4
0
OSChina 周三乱弹 —— 谈什么对象?睡什么觉?

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @胖达panda :最肯忘却古人诗,最不屑一顾是相思。分享童丽的单曲《红豆生南国》: 《红豆生南国》- 童丽 手机党少年们想听歌,请使劲儿戳(这...

小小编辑
47分钟前
237
5
stylus

stylus基础教程,stylus实例教程,stylus语法总结

miaojiangmin
今天
5
0
PHP生成CSV之内部换行

当我们使用PHP将采集到的文件内容保存到csv文件时,往往需要将采集内容进行二次过滤处理才能得到需要的内容。比如网页中的换行符,空格符等等。 对于空格等处理起来都比较简单,这里我们单独...

豆花饭烧土豆
今天
2
0
使用 mjml 生成 thymeleaf 邮件框架模板

发邮件算是系统开发的一个基本需求了,不过搞邮件模板实在是件恶心事,估计搞过的同仁都有体会。 得支持多种客户端 支持响应式 疼彻心扉的 outlook 多数客户端只支持 inline 形式的 css 布局...

郁也风
今天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部