1.JointJs Paper

关于JointJs的介绍，有一篇比较好JointJS介绍

第一个类Paperjoint.dia.Paper

属性

• el css选择器，Paper将在该Css选择的Container下画SVG图.例如:el='#paper',则在
  <div id='paper'></div>下面添加SVG DOM节点

• width paper的宽度

• height paper的高度

• origin paper原点的坐标，默认{x:0,y:0}

• gridSzie 默认为1

• model joint.dia.Graph object，根据MVC，该属性对应model,paper对应view

• perpendicularLinks 链接线是否正交，默认为false

• elementView 负责渲染graph ,默认joint.dia.ElementView

• linkView 负责渲染links,默认joint.dia.LinkView

• defaultLink 用户动态建立的link（好比：从一个port drag 一条线）,默认为joint.dia.Link，也能够是一个返回值类型为 joint.dia.Link函数function(cellView, magnet) {}

• interactive 若是设置为false,则graph中的element和link将禁止操做

• validateMagnet(cellView, magnet) magnet翻译成中文就是磁石，在JointJs中它表明的是一个DOM元素，当用户点击magnet时，这个函数判断是否建立Link

• validateConnection(cellViewS, magnetS, cellViewT, magnetT, end, linkView)在source view/magnet (cellViewS/magnetS) and target view/magnet (cellViewT/magnetT)之间是否容许连接。

• linkConnectionPoint(linkView, view, magnet, reference)

这个函数容许用户指定link在渲染时stick到元素的某个坐标。这个函数返回一个点{x,y}。固然jointJS也给咱们提供了一个强大的函数shapePerimeterConnectionPoint
shapePerimeterConnectionPoint joint.util.shapePerimeterConnectionPoint(linkView, view, magnet, ref)
使用方式以下：

var paper = new joint.dia.Paper({
   ...
   linkConnectionPoint: joint.util.shapePerimeterConnectionPoint
   ...
})

效果以下：

• snapLinks 当为true时，Link会寻找离它最近的元素进行闭合

• linkPinning 当为true时，link能够终止于paper，也就是说link能够链接于一个点，而不是element

• markAvailable 当用户点击magnet时，界面上显示能够链接的magnet。为了突出能够链接的magnet，添加必要的css

  /* port styling */
  .available-magnet {
      fill: yellow;
  }
  
  /* element styling */
  .available-cell rect {
      stroke-dasharray: 5, 2;
  }

• async

• embeddingMode 当为true时，paper改变为embed模式，具体说：用户能够将一个元素拖拽到另外一个元素里面。在该模式下，全部的link和element会多一个z属性，就行css中的阴影有一个z属性表示层级。为了控制哪些元素能够embed，须要配置 validateEmbedding()。总之这个属性对于层级图是必须的。

• validateEmbedding(childView, parentView) 若是childView容许被潜入到parentView，返回true.默认全部元素均可以embed到其余元素中

• restrictTranslate/function(elementView) 当设置为true的时候，用户将不能将elemnt移动到paper边界以外。默认为false。固然它最大的好处不是这个，当给该属性配置一个函数时，你能够限制子元素不能够拖拽出父元素，好比：

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