WorkFlow项目（二）

今天研究了一下组件的组合问题，即一个组件内可以包含多个组件，平常显示为一个组件，需要修改可展开为多组件模式，如下图。

收缩模式

展开模式

两种模式之间的切换通过双击组件来实现。

paper.on({
    'cell:pointerdblclick': function(cellView) {
        var isElement = cellView.model.isElement();
        var type = cellView.model.prop('type');
        if (isElement && type == 'devs.GroupAtomic') {
            expendGraph(cellView.model);
        } else if (isElement && type == 'devs.Coupled') {
            collapseGraph(cellView.model);
        }
    }
});

同时还需要限制子cell不能移出父cell的边界。

restrictTranslate: function(elementView) {
    var parentId = elementView.model.get('parent');
    return parentId && this.model.getCell(parentId).getBBox();
},

Joint缺省的动作是当子cell（atomic）移动到父cell（Coupled）边界内时，自动执行embed操作，而当子cell移出父cell边界时执行unembed操作。但实际上，validateEmbedding函数控制了是否要执行embed操作，而只要一移动子cell，立即执行unembed操作，并不是在移出边界时才执行。

我目前的想法是已经在父cell内的子cell不允许移出来，这个由restrictTranslate来控制。同时不允许外部的cell移动到父cell内，这个就比较困难了，因为如果在validateEmbedding函数内判断，是无法用model.get('parent')来判断这个cell是否属于该父cell（因为此时已经执行过unembed操作了）。

最后我的解决办法就是在子cell的属性中多加一个pid，当自动进行unembed时只是删除了parent属性，而我添加的pid属性还存在，就可以在validate中进行判断了。

//add extra prop
c1.embed(a1);
a1.attr({pid: c1.id});

//judge logic
validateEmbedding: function(childView, parentView) {
    if (parentView.model instanceof joint.shapes.devs.Coupled) {
        return childView.model.attr('pid') == parentView.model.id;
    }
    return false;
},

但是这个实现比较麻烦，属于非标操作，以后看看有没有更好地解决方案吧。