JFlow 中的绘图对象由组和单元组装而成，体现在Vue中则类似HTML的形式：

<j-group 
    :jflowId="node.id"
    @click="onClick" 
    :configs="configs">
    <j-text :configs="{
        textColor: '#EB6864',
        content: node.id,
    }">
    </j-text>
    <j-text :configs="{
        textColor: '#EB6864',
        content: node.content,
    }">
    </j-text>
</j-group>

每个组都有一个盒模型：

padding 和 margin 与css的盒模型基本一致，另外为了能够适应非矩形形状，在 padding 和 margin 之间存在一个shapeshiftbox，这层没有left和right，top和bottom之分，只是 paddingbox 的 width 与 height 的一个线性计算。

组内可以添加多个单元，单元按照设定的组布局来排列。

目前 JFlow 支持的组布局为：

• LinearLayout

组布局区别于 对象、连线的布局：

• 对象、连线的布局需要根据源数据的语义来计算布局
• 组布局负责绘图对象内部的布局，不需要知道源数据的语义

自定义组布局

组布局不需要根据源数据语义来计算布局，因此只需要实现reflow方法即可。 以下实现了一个简单的横向无遮挡布局:

class DemoLayout {
    // 入参：jflow 组对象 
    reflow(group) {
        const stack = group._stack;
        let maxHeight = 0;
        let allWidth = 0;
        stack.forEach((instance, idx) =>  {
            const { width, height } = instance.getBoundingDimension();
            allWidth += width;
            instance.anchor = [allWidth, 0]
        });
    }
}

继续了解

坐标系统