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();
}