今天研究了一下组件的组合问题，即一个组件内可以包含多个组件，平常显示为一个组件，需要修改可展开为多组件模式，如下图。
收缩模式
展开模式
两种模式之间的切换通过双击组件来实现。
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;
},
但是这个实现比较麻烦，属于非标操作，以后看看有没有更好地解决方案吧。
