文档章节

学习 kityminder 笔记(八)

刘军兴
 刘军兴
发布于 2015/11/24 09:46
字数 960
阅读 113
收藏 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)

 

© 著作权归作者所有

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

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

06/04
0
0
学习 kityminder 笔记(五)

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

刘军兴
2015/11/19
0
0
学习 kityminder 笔记(六)

接上篇, 接着学习 kityminder. == core/keyreceiver.js == extend class Minder { init-hook(): 构造时设置选项, 侦听 'paperrender' 事件, 以调用 _initKeyReceiver() _initKeyReceiver():......

刘军兴
2015/11/19
0
0
学习 kityminder 笔记(七)

接上篇继续学习. 本段都是 seajs require(module/*.js) 的, 看起来是按照字母顺序 a-z 排列的, 所以应没什么互相依赖性. 考虑到前面有很多细节都略过, 或不懂, 在学习过程中可能还要不断回顾...

刘军兴
2015/11/20
0
0
再学习 Kity 笔记(五) 初步

在过去两周左右, 一直在学习 kity, kityminder, nodejs, seajs 等一系列项目. 有些认识经过一段时间学习, 已经发生了 变化, 使得原有笔记过时. 兹为深入学习, 有必要回顾复习重新看一遍. Kit...

刘军兴
2015/12/04
68
0

没有更多内容

加载失败,请刷新页面

加载更多

利用碎片化时间Get Linux系统

起初,我做着一份与IT毫无关系的工作,每月领着可怜的工资,一直想改变现状,但无从下手,也就是大家熟知的迷茫。我相信,每一个人都会或多或少的经历过迷茫,迷茫每一个选择,迷茫工作或者生...

Linux就该这么学
17分钟前
0
0
图像显示深入学习一:Activity启动过程

一个月左右写了图像显示深入学习之文章开篇文章表明了自己近期的计划,前半年重新学习了opengl es,c++以及Linux的一些知识,觉得是时候开始看图像这一块的源码了,边看边补缺补漏吧。 作为该...

JerryLin123
40分钟前
1
0
给MySQL授权远程访问

putty登录服务器; 登录MySQL: mysql -u root -p 新建远程用户: CREATE USER 'myusername' IDENTIFIED BY 'mypassword'; 授权: grant all on *.* to john@'101.102.103.104' identified by......

sweethome
今天
1
0
在t-io老巢造谣,不过有造谣的就会有反造谣的!

只发当事人的截图,不发表评论,以免有引导嫌疑 PS: 截图是由不同的人发过来的 本人已经不在此微信群 图3:有造谣的,就有反造谣的 图4是2018-09-23的t-io官方群的一个发言小统计,有助于让...

talent-tan
今天
99
0
heartbeat 资源

drbd+apache+heartbeat : http://blog.51cto.com/11838039/1827901 heartbeat双机热备的架设 : http://blog.51cto.com/11838039/1827560 对heaetbeat的深一步认识 : http://blog.51cto.co......

寰宇01
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部