学习 kityminder 笔记(八)

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

== 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)