JointJS中文文檔

時間 2019-11-06

標籤 jointjs 中文文檔简体版

原文原文鏈接

JointJS中文文檔

JointJS是一款功能強大的圖形可視化交互工具，可用來開發流程圖，思惟導圖等複雜圖形交互應用css

核心概念

paper和graph

paper即畫布，圖形將在paper上繪製
graph即圖形數據，可與paper進行綁定，對graph的修改會即時反映到paper上
一個graph可與多個paper綁定git
cellView和cell

cellView: 視圖元素，是paper的基本元素，用來處理UI交互
cell: 圖形元素，是graph的基本元素，用來存儲圖形元素數據
cellView能夠經過.model屬性獲取它的cell
graph其實就是cell的集合json
link和element

cell有兩種類型，link是連線，element是節點
他們的視圖元素對應爲linkView和elementView瀏覽器
source和target

即連線的起點和終點dom
port

端口，依附於圖形節點，能夠被連線鏈接ide
座標系統

client - 相對於瀏覽器窗口
page - 相對於body
local - 圖形絕對座標
paper - 圖形畫布座標 (畫布是能夠移動的，當畫布移動時paper座標會改變，而local座標不會改變)svg

The joint namespace

joint.dia
模型(類)庫，包含: Paper Graph Cell CellView Element Link 等等
joint.shapes
圖形元素樣式庫，包含多個分組(basic standard custom ...)
以basic爲例，其下有Circle Ellipse Rect Text等多個圖形元素

API

Paper option

實例化參數 new joint.dia.Paper(option)

el: 圖形容器
model: 圖形數據，此處可綁定graph
width: 圖形寬度
height: 圖形高度
drawGrid: 柵格參考線
gridSize: 參考線密度
background: 背景
defaultLink: 默認連線樣式
interactive: 控制元素的交互屬性（例如是否能夠移動）

Paper prototype method

paper實例方法

findViewByModel(model)

經過model(即cell)尋找到對應的cellView

getContentBBox()

獲取paper內圖形實體(不包含空白)的邊界(client座標)

getContentArea()

獲取paper內圖形實體(不包含空白)的邊界(local座標)

paperToLocalPoint(point) or (x, y)

將paper座標的point轉換成local座標
相似的轉換: `localToPaperPoint` `pageToLocalPoint` 等等

paperToLocalRect(rect)

將paper座標的rect轉換成local座標
相似的: `localToPaperRect` `pageToLocalRect` 等等

scale(scale) or (sx, sy)

將paper縮放至指定倍數
若是參數爲空，將返回paper當前的縮放倍數

translate(x, y)

將paper原點移動到指定座標(原點在左上角)
若是參數爲空，將返回paper當前的位移

Graph prototype method

graph實例方法

addCell(cell)

添加一個元素工具
addCells(cells)

添加一組元素佈局
getCell(modelId)

獲取指定id的元素優化
getCells()

獲取全部元素
getElements()

獲取全部節點
getLinks()

獲取全部連線
clear()

清空全部元素
getNeighbors(element [, opt])

獲取與某節點相連的全部連線
toJSON()

導出JSON
fromJSON(json)

導入JSON

Cell模型

Cell.prototype.define(type [, properties])

定義一個新的圖形元素，或繼承一個已有的元素

// Define a new Ellipse class in `joint.shapes.examples` namespace
// Inherits from generic Element class
var Ellipse = joint.dia.Element.define('examples.Ellipse', {
    // default attributes
    markup: [{
        tagName: 'ellipse',
        selector: 'ellipse' // not necessary but faster
    ],
    attrs: {
        ellipse: {
            fill: 'white',
            stroke: 'black',
            strokeWidth: 4,
            refRx: .5,
            refRy: .5,
            refCx: .5,
            refCy: .5
        }
    }
});

// Instantiate an element
var ellipse = (new Ellipse()).position(100, 100).size(120, 50).addTo(graph);

// Define a new ColoredEllipse class
// Inherits from Ellipse
var ColoredEllipse = Ellipse.define('examples.ColoredEllipse', {
    // overridden Ellipse default attributes
    // other Ellipse attributes preserved
    attrs: {
        ellipse: {
            fill: 'lightgray'
        }
    }
}, {
    // prototype properties
    // accessible on `this.(...)` - as well as, more precisely, `this.prototype.(...)`
    // useful for custom methods that need access to this instance
    // shared by all instances of the class
    randomizeStrokeColor: function() {
        var randomColor = '#' + ('000000' + Math.floor(Math.random() * 16777215).toString(16)).slice(-6);
        return this.attr('ellipse/stroke', randomColor);
    }
}, {
    // static properties
    // accessible on `this.constructor.(...)`
    // useful for custom methods and constants that do not need an instance to operate
    // however, a new set of static properties is generated every time the constructor is called
    // (try to only use static properties if absolutely necessary)
    createRandom: function() {
        return (new ColoredEllipse()).randomizeStrokeColor();
    }
});

// Instantiate an element
var coloredEllipse = ColoredEllipse.createRandom().position(300, 100).size(120, 50).addTo(graph);

markup

markup(標籤)是用來生成svg元素的模板，能夠接收XML標籤或JSON對象

markup: '<rect class="rectangle"/>'
markup: [{
  tagName: 'rect',
  selector: 'body'
}]

attrs

attrs(屬性)用來定義svg元素的樣式，經過selector或標籤名查找對應的元素

attrs: {
  ellipse: {
    fill: 'lightgray'
  },
  body: {
    fill: 'white'
  }
}

Cell.prototype.attr()
```
設置cell的attrs屬性
```

Cell.prototype.prop()

設置cell的屬性，包括自定義屬性

cell.attr('body/fill', 'black')
cell.prop('attrs/body/fill', 'black')
cell.prop('attrs', {body: {fill: 'black'}})
cell.prop('custom', 'data')

Cell.prototype.isElement()
```
判斷元素是不是節點
```
Cell.prototype.isLink()
```
判斷元素是不是連線
```
Cell.prototype.addTo(graph)
```
添加到graph
```
Cell.prototype.remove()
```
移除元素
```

Element

圖形節點模型，繼承自Cell

Element模型示例

{
  id: '3d90f661-fe5f-45dc-a938-bca137691eeb',// Some randomly generated UUID.
  type: 'basic.Rect',
  attrs: {
        'stroke': '#000'
  },
  position: {
        x: 0,
        y: 50
  },
  angle: 90,
  size: {
        width: 100,
        height: 50
  },
  z: 2,
  embeds: [
        '0c6bf4f1-d5db-4058-9e85-f2d6c74a7a30',
        'cdbfe073-b160-4e8f-a9a0-22853f29cc06'
  ],
  parent: '31f348fe-f5c6-4438-964e-9fc9273c02cb'
  // ... and some other, maybe custom, data properties
}

Geometry 幾何屬性
- position 座標，可經過.position()方法設置
- angle 旋轉，可經過.rotate()方法設置
- size 尺寸，可經過.resize()方法設置
Presentation 外觀
- attrs 同Cell，經過.attr()方法設置
- z 層級
Nesting 嵌套
- embeds 子節點ids
- parent 父節點id

Element prototype method

getBBox() 獲取節點的bounding box(邊界，rect)

portProp(portId, path, [value]) 設置端口屬性

element.portProp('port-id', 'attrs/circle/fill', 'red');
element.portProp('port-id', 'attrs/circle/fill');  // 'red'

element.portProp('port-id', 'attrs/circle', { r: 10, stroke: 'green' });
element.portProp('port-id', 'attrs/circle'); // { r: 10, stroke: 'green', fill: 'red' }

Ports

端口，依附於圖形節點，能夠被連線鏈接

Port API on joint.dia.Element

如下是與port相關的Element的實例方法
- hasPort / hasPorts
- addPort / addPorts
- removePort / removePorts
- getPort / getPorts
- portProp
- getPortPositions

Port示例

// Single port definition
var port = {
    // id: 'abc', // generated if `id` value is not present
    group: 'a',
    args: {}, // extra arguments for the port layout function, see `layout.Port` section
    label: {
        position: {
            name: 'right',
            args: { y: 6 } // extra arguments for the label layout function, see `layout.PortLabel` section
        },
        markup: '<text class="label-text" fill="blue"/>'
    },
    attrs: { text: { text: 'port1' } },
    markup: '<rect width="16" height="16" x="-8" strokegit ="red" fill="gray"/>'
};

// a.) add a port in constructor.
var rect = new joint.shapes.standard.Rectangle({
    position: { x: 50, y: 50 },
    size: { width: 90, height: 90 },
    ports: {
        groups: {
            'a': {}
        },
        items: [port]
    }
});

// b.) or add a single port using API
rect.addPort(port);

Port屬性
- group 相似於css的class，定義一組port的屬性
- args 佈局參數
- label 文字

Link

圖形連線模型，繼承自Cell

Link示例

var link = new joint.dia.Link();
link.source({ id: sourceId }, { anchor: defaultAnchor });
link.target({ id: targetId, port: portId });
link.addTo(graph)

Link屬性
- anchor 錨點，link與element的鏈接點
- connectionPoint 視圖鄰接點
  例如，當anchor在節點元素中心時，咱們並不須要把連線真的畫到中心，而只要連到節點的邊界上便可
- vertices 連線上的折點
- connector 線型
```
'normal' - 普通
'jumpover' - 連線交叉時顯示一個bridge
'rounded' - 轉折處顯示爲圓角
'smooth' - 貝塞爾曲線
```
- router 路徑，設置router以後連線再也不呈直線鏈接，而是經過一條設定的路線
```
'normal' - 普通線
'orthogonal' - 基礎版的正交折線
'manhattan' - 優化版的正交折線
'metro' - 另外一種正交折線
'oneSide' - 單側正交折線
```
Link實例方法
- source(source [, opt]) 設置起點
- target(target [, opt]) 設置終點
```
// opt示例
link.source({ id: sourceId }, {anchor})
```
- connector() 設置線型
- router() 設置路徑
- vertices() 設置折點

事件

Paper

pointerclick

點擊事件
能夠添加前綴，以區分不一樣的點擊區域(blank是空白區域)：
cell:pointerdblclick link:pointerdblclick element:pointerdblclick blank:pointerdblclick
pointerdown

鼠標按下
pointermove

鼠標拖拽
pointerup

鼠標鬆開
link:connect

連線鏈接時觸發