文档章节

学习 kityminder 笔记(八)

刘军兴
 刘军兴
发布于 2015/11/24 09:46
字数 960
阅读 107
收藏 0
点赞 0
评论 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
学习 kityminder 笔记(九)

继续学习 kityminder. === module/style.js === // 拷贝选中节点的当前样式,包括字体、字号、粗体、斜体、背景色、字体色// 对应为 styleNames = ['font-size', 'font-family', 'font-weig...

刘军兴
2015/11/24
61
0
学习 kityminder 笔记(十)

今天学习 layout 下的各个 js. 在此之前, 需要回顾一下 core/layout. 注意在 core 下面有 layout.js, module 下面也有 layout.js, 我是被混淆了, 不能换个名字么? === 布局基类 Layout 位于 ...

刘军兴
2015/11/25
56
0
KityMinder 1.2.0 发布,脑图工具

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

战毅
2014/07/10
8.2K
12
《数据分析师八大能力培养》课程能力一和能力二学习作业福利热力来袭!

口碑讲师、白金课程、活跃社群,我们也有最独特的作业福利! 数据分析师八大能力培养课程学习笔记活动热力来袭! 1、课程链接: 数据分析师八大能力培养 https://edu.hellobi.com/course/272...

天善学院
05/16
0
0
Sequence to Sequence学习资料

Sequence to Sequence学习资料 seq2seq学习笔记 - CSDN博客 深度学习方法(八):自然语言处理中的Encoder-Decoder模型,基本Sequence to Sequence模型 - CSDN博客 Sequence to Sequence学习...

致Great
05/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

about git flow

  昨天元芳做了git分支管理规范的分享,为了拓展大家关于git分支的认知,这里我特意再分享这两个关于git flow的链接,大家可以看一下。 Git 工作流程 Git分支管理策略   git flow本质上是...

qwfys
今天
1
0
Linux系统日志文件

/var/log/messages linux系统总日志 /etc/logrotate.conf 日志切割配置文件 参考https://my.oschina.net/u/2000675/blog/908189 dmesg命令 dmesg’命令显示linux内核的环形缓冲区信息,我们可...

chencheng-linux
今天
1
0
MacOS下给树莓派安装Raspbian系统

下载镜像 前往 树莓派官网 下载镜像。 点击 最新版Raspbian 下载最新版镜像。 下载后请,通过 访达 双击解压,或通过 unzip 命令解压。 检查下载的文件 ls -lh -rw-r--r-- 1 dingdayu s...

dingdayu
今天
0
0
spring boot使用通用mapper(tk.mapper) ,id自增和回显等问题

最近项目使用到tk.mapper设置id自增,数据库是mysql。在使用通用mapper主键生成过程中有一些问题,在总结一下。 1、UUID生成方式-字符串主键 在主键上增加注解 @Id @GeneratedValue...

北岩
今天
2
0
告警系统邮件引擎、运行告警系统

告警系统邮件引擎 cd mail vim mail.py #!/usr/bin/env python#-*- coding: UTF-8 -*-import os,sysreload(sys)sys.setdefaultencoding('utf8')import getoptimport smtplibfr......

Zhouliang6
今天
0
0
Java工具类—随机数

Java中常用的生成随机数有Math.random()方法及java.util.Random类.但他们生成的随机数都是伪随机的. Math.radom()方法 在jdk1.8的Math类中可以看到,Math.random()方法实际上就是调用Random类...

PrivateO2
今天
1
0
关于java内存模型、并发编程的好文

Java并发编程:volatile关键字解析    volatile这个关键字可能很多朋友都听说过,或许也都用过。在Java 5之前,它是一个备受争议的关键字,因为在程序中使用它往往会导致出人意料的结果。在...

DannyCoder
昨天
0
0
dubbo @Reference retries 重试次数 一个坑

在代码一中设置 成retries=0,也就是调用超时不用重试,结果DEBUG的时候总是重试,不是0吗,0就不用重试啊。为什么还是调用了多次呢? 结果在网上看到 这篇文章才明白 https://www.cnblogs....

奋斗的小牛
昨天
2
0
数据结构与算法3

要抓紧喽~~~~~~~放羊的孩纸回来喽 LowArray类和LowArrayApp类 程序将一个普通的Java数组封装在LowArray类中。类中的数组隐藏了起来,它是私有的,所以只有类自己的方法才能访问他。 LowArray...

沉迷于编程的小菜菜
昨天
0
0
spring boot应用测试框架介绍

一、spring boot应用测试存在的问题 官方提供的测试框架spring-boot-test-starter,虽然提供了很多功能(junit、spring test、assertj、hamcrest、mockito、jsonassert、jsonpath),但是在数...

yangjianzhou
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部