文档章节

学习 kityminder 笔记(十一)

刘军兴
 刘军兴
发布于 2015/11/30 14:49
字数 776
阅读 118
收藏 0

上次看到了 Layout 类及其实做子类 MindLayout 等, 本次研究驱动它们的部分: Minder.layout() 函数.

回顾 core/layout.js 里面相关代码(按照调用顺序):

extend class Minder {
  // 用于在 Minder 类上支持布局(layout).
  function layout(): {
    // 内部函数定义: 稍后研究.
    function layout-node();

    // 1. 清空现有所有节点的布局信息.
    this.root-node.traverse() -> clear node.layout; 

 
    
    // 2. 调用进行第一轮布局.
    layout-node(this.root-node, round = 1);

    // 3. 调用进行第二轮布局, 根据我看 layout 子类, tianpan 类型的需要两轮布局, 
    //    其它可能只需要一轮即可. 但这里不加区分地都调用两次, 是很浪费时间的...
    layout-node(root-node, round = 2);

    
    // 4. 应用布局结果(产生动画,如果图形不复杂的话).
    this.apply-layout-result(动画参数, ...)
    // 发布事件略.
  }
}

这里的重点一是调用 layout-node() 函数, 通过两轮布局计算出节点应该布局到的位置.
二是通过动画(图形复杂时直接移动) 移动 node 到目标布局位置 (从现有位置).

下面先看看 layout-node()

// node 表示要布局的节点, 此函数被递归调用.
function layout-node(node, round=1 or 2) {
  // 剪枝: 收起的节点无需计算. 但实际上 if 语句总是真, 这样白剪?
  // 这里的重点是顺序: 先(递归)访问子节点, 再访问自己. 称为后序遍历?
  if (可以不计算 || true)
    for-each(node's child) 
      -> 递归调用 layout-node(child, round) 

  // 计算一个 childrenInFlow 但却未使用, 不明白是不是调试代码忘记删除了?
  cildrenInFlow = ...

  // 实际驱动 Layout 类进行布局的核心调用在这里.
  node.layout-instance.doLayout(node, node.children, round)
}

通过最后一句调用, 我们将 Minder.layout() 和 Layout.doLayout() 关联在一起. 这样完成了 layout 的流程理解.

 

另一个重点是 Minder.applyLayoutResult():

function Minder.apply-layout-result() {
  complex? = 判断脑图是不是太复杂, 如果太复杂, 下面就不用动画了.
  
  // 内部函数 consume(), apply-matrix(), apply() 定义. 下面研究.
  // 调用内部函数 apply() 处理.
  apply(root-node, init-matrix)
}

// 上面所说内部函数, 放这里单独看.
closure function apply(node, parent-matrix) {
  // 合并变换矩阵. 这里 * 理解为数学矩阵乘法(或某种 matrix 计算即可)
  matrix = node.layout-matrix * parent-matrix;
  // 再加上布局偏移.
  matrix += node.layout-offset

  // 如果当前有动画, 停止动画.
  if (node.layout-timeline) ...timeline.stop()

  // 用动画更新位置(非动画方式略)
  node.layout-timeline = new kity.Animator(...)  // 新建动画对象.
     .start(..., duration, ...) // 开始动画.
     .on('finish', 某些处理略);
   
  // 递归调用, 子节点也产生动画.
  for-each (child)
    apply(child, matrix)
}

(其它两个内部函数如果未用到就略过)

这里的重点一是合并变换矩阵, 节点自己的变换分两部分(layout-matrix, layout-offset), 现在虽未彻底理解两者
分工, 但可先认为是通过函数中方式计算出最终(相对于全局)的布局位置 (matrix).

重点二是使用 kity.Animator() 包装动画, 为此需要先去看看 svg 动画, 以及 kity 对其封装是什么. 这里我想大致
是在 duration 时间内进行(完成)一个移动动画.

这也是为了回答本文第(十)最后提出的问题.

© 著作权归作者所有

共有 人打赏支持
刘军兴
粉丝 56
博文 189
码字总数 231687
作品 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

没有更多内容

加载失败,请刷新页面

加载更多

node.js学习笔记之koa框架和简单爬虫练习

Koa -- 基于 Node.js 平台的下一代 web 开发框架 koa是由 Express 原班人马打造的,致力于成为一个更小、更富有表现力、更健壮的 Web 框架。 使用 koa 编写 web 应用,可以免除重复繁琐的回调...

前端小攻略
27分钟前
3
0
JavaScript中的继承及实现代码

JS虽然不像是JAVA那种强类型的语言,但也有着与JAVA类型的继承属性,那么JS中的继承是如何实现的呢? 一、构造函数继承 在构造函数中,同样属于两个新创建的函数,也是不相等的 function Fn...

peakedness丶
49分钟前
3
0
记一次面试最常见的10个Redis"刁难"问题

导读:在程序员面试过程中Redis相关的知识是常被问到的话题。作为一名在互联网技术行业打击过成百上千名的资深技术面试官,本文作者总结了面试过程中经常问到的问题。十分值得一读。 Redis在...

小刀爱编程
今天
17
0
TiDB Lab 诞生记 | TiDB Hackathon 优秀项目分享

本文由红凤凰粉凤凰粉红凤凰队的成员主笔,他们的项目 TiDB Lab 在本届 TiDB Hackathon 2018 中获得了二等奖。TiDB Lab 为 TiDB 培训体系增加了一个可以动态观测 TiDB / TiKV / PD 细节的动画...

TiDB
今天
4
0
当区块链遇到零知识证明

本文由云+社区发表 当区块链遇到零知识证明 什么是零知识证明 零知识证明的官方定义是能够在不向验证者任何有用的信息的情况下,使验证者相信某个论断是正确的。这个定义有点抽象,下面笔者举...

腾讯云加社区
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部