学习 kityminder 笔记(十)

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

=== 布局基类 Layout 位于 core/layout.js ===

布局的基类, 各种不同的布局从此类派生.
class Layout {
  // 子类需要实现此布局算法. 算法输入是父节点, 及其子节点(数组), 
  //   要求布局这些子节点(即相对于父节点的变换)
  virtual doLayout(parent, children[]): throw 'sub-class impl'
  align(),stack(),move() 等辅助方法(子类可使用), 稍后看.
}

 

在理解布局前, 需要先了解一点变换的知识, 以及 kity 中对变换的包装(和实现).

变换这里指将一个点(x1,y1) 经函数 f 映射到另一个点 (x2,y2).

对于平移(translate)有:
     x2 = x1 + a, y2 = y1 + b
这里 a,b 分别是 x,y 轴平移量.

在 svg 中相当于为元素设置一个 transform="translate(a,b)" (或其它等价形式).

对于缩放(scale)有:
    x2 = a*x1, y2 = b*y1
在 svg 中相当于为元素设置 transform="scale(a,b)" (或等价形式)

对于旋转(rotate)一个角度 α:
   x2 = x1*cosα + y1*sinα
   y2 = y1*cosα - x1*sinα
对应 svg 中相当于 transform="rotate(α)"

斜切变换 skewX(α), skewY() 相似:
    x2 = x1 + y1*tanα, y2 = y1

上述各种变换都可是线性变化, 即 x2,y2 是 a*x1+b*y1+c 的形式, 因此可表示为线性代数的
矩阵乘法. 这样变换就可以写作:

点 x,y 平移 tx,ty 距离:
     [1 0 tx] [x]   [x+tx]
     [0 1 ty]*[y] = [y+ty]
     [0 0 1 ] [1]   [ 1  ]
点 x,y 缩放 sx,sy 倍:
     [sx 0 0] [x]   [x*sx]
     [0 sy 0]*[y] = [y*sy]
     [0  0 1] [1]   [1]
点 x,y 绕原点旋转 α 角的矩阵, 向量和乘的结果略:
     [cos -sin 0]
     [sin cos  0]
     [ 0   0   1]
斜切  skewX:         skewY:
     [1 tan(ax) 0]  [1       0 0]
     [0  1      0]  [tan(ay) 1 0]
     [0  0      1]  [0       0 1]

使用矩阵的最强大的地方在于, 多个线性变换可以乘积, 而矩阵*矩阵还是矩阵, 这即是 svg matrix 的含义了.

多个(线性)变换组合在一起, 即是多个矩阵的乘积, 矩阵乘积仍然是矩阵, 
svg 中 transform="matrix(a,b,c,d,e,f)" 即表示矩阵:
     [a c e]
     [b d f]
     [0 0 1]

这样, 你无论为一个元素施加多少次线性变换, 其最终结果都是一个简单的矩阵.

因此我合理地猜测这些变换,矩阵在 kity svg 库中都有对应的封装类/方法. 例如 kity.Matrix 类...

 

=== 下面研究 layout/mind.js, btree.js ===

以上我们看到了 Layout (虚)基类, 现在我们找一个实做的子类来查看 doLayout() 是具体怎么实现的.
位于 src/layout 目录下有 6 个 js 文件. 例如 tianpan.js(拼音天盘?), fish-bone*(鱼骨图) 等.
我简单看了下, 其中 mind.js 对应缺省布局, 其引用了 btree.js, 所以我们先研究这两个.

// 实际名字可称为 MindLayout 或 DefaultLayout
class <noname-layout> : public Layout {
  doLayout(node, children): {  // 这里算法需要仔细看
    // 1. 将 children 切分成两部分 left~right. 也可认为是 up~down.
    var left[] = 前一半 children,
        right[] = 后一半 children;

    // 2. 得到 left, right (子)布局器 (layout)
    var left_layout = Minder.left_layout_object;
    // right_layout 也一样, 所以只需研究明白 left 一半即可.
    
    // 3. 使用子布局器 布局各自一半.
    left_layout.doLayout(node, left[])  // right 一半相同

    // 4. 合在一起, 设置 node 的 vertex_out, vector_out
    box = node.content_box
    set out-vertex,out-vector // 估计和连线有关, 以后看.
  }
}

 

这里 left, right 子布局器在 btree.js 中. 该文件其实生成了 dir=left,right,top,bottom 四个布局器,
为了简化问题, 我实际代入该生成函数以 dir=left, 模拟出一个类, 以方便理解.

// 将一组子节点布局到自己的左侧, 子节点右边界是对齐的(right, align), 
//   垂直方向(即沿着 y 轴)顺序排列(stack).
class LeftLayout : public Layout {
  doLayout(node, children[]): {
    // 1.
    axis = 'x', oppsite = 'right'  // left 是 x 轴的, 相对方向为 right.
    parent.out_vertex = ..., .out_vector = ... (略)

    // 2.
    for-each (child in children[]) {
      child.layout_transform = new kity.Matrix() // 等于重置了变换矩阵?
      child.in_vertex = ..., .in_vector = ... (暂时略)
    }

    // 3. 使用基类辅助方法. 对齐子节点, 堆叠成一列.
    base::align(children[], 'right')  // right = oppsite of left
    base::stack(children[], 'y')      // y = oppsite of x-axis

    // 4. 计算偏移各子节点的一个 dx,dy 值. 
    p_box = parent.content_box  // 父节点位置.
    c_box = getBranchBox() // 工具方法：获取给点的子节点所占的布局区域
    // 这里还是对 dx 的计算有点疑惑, 可能需要调试下...
    dx = ..., dy = ...  // c_box 放 p_box 左边+margin, y 值中心对齐.
    // 平移子节点到该偏移, 实际是调用 base::move() 方法. 
    for-each (child)
      node.translate(dx, dy)
  }
}

这里重点是将一组子节点靠右对齐(即所有 child.right 值相同), 沿着 y 轴堆叠(顺序排列, 中间有间距),
然后布置在父节点的左侧. 实际使用三个 Layout 基类的方法: align(), stack(), move().

下面特化 align() 为 align_right(), 在上面的例子中调用的 align() 给出参数为 'right':
(其它 align left,top,bottom 类似, 只是多一个 switch(dir) 判断.

class Layout {
  align_right(nodes[]) {
    for-each (node in nodes[]) {
      // 经此平移, 所有 node 节点的 right 值变为 0, 所以就右对齐了.
      node.transform_matrix.translate(-node.right, 0)
    }
  }
}

下面特化 stack() 为 stack_y():

class Layout {
  stack_y(nodes) {
    distance = node.margin-bottom  // 节点间距离
    position = 0  // 节点在 y 轴上的位置.
    for-each (node) {
      // 对 node 的当前变换矩阵 再叠加一个 dy 平移, 使得其 y 轴定位到 position 位置.
      matrix = node.transform_matrix
      matrix.translate(0, position - node.top)
       // 计算下一个位置. 考虑两个节点之间的间距.
       position += node.height + distance_of_curr_node_and_next_node
    }
  }
}

一组 nodes[] 在 align_right() 之后, node.right = 0; 在 stack_y() 之后 nodes[0].top = 0;
这相当于整组节点的右上角是 (0,0) 原点了. 上面计算偏移 dx,dy 的疑惑也略微解开了一些, 因为那里已经
知道整个 children_box .top=0, .right=0 了. 

现在我们知道了 Layout 的作用是计算子节点的布局位置, 该位置是相对于父节点的. 对于其它布局形式,
如鱼骨图, 天盘?图估计作用类似, 只是计算方法有所不同, 布局的子节点的位置也就有些不同.

这里 Layout 只是算出了位置, 但并未将节点实际移动到那里, 于是问题就产生了:
   谁,什么时候,怎么移动(动画?)节点到新的位置的呢?