JointJS中文文件

Unreal發表於2019-02-16
JS

JointJS中文文件

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

核心概念

  • paper和graph

    paper即畫布，圖形將在paper上繪製
    graph即圖形資料，可與paper進行繫結，對graph的修改會即時反映到paper上
    一個graph可與多個paper繫結

  • cellView和cell

    cellView: 檢視元素，是paper的基本元素，用來處理UI互動
    cell: 圖形元素，是graph的基本元素，用來儲存圖形元素資料
    cellView可以通過.model屬性獲取它的cell
    graph其實就是cell的集合

  • link和element

    cell有兩種型別，link是連線，element是節點
    他們的檢視元素對應為linkView和elementView

  • source和target

    即連線的起點和終點

  • port

    埠，依附於圖形節點，可以被連線連線

  • 座標系統

    client – 相對於瀏覽器視窗
    page – 相對於body
    local – 圖形絕對座標
    paper – 圖形畫布座標 (畫布是可以移動的，當畫布移動時paper座標會改變，而local座標不會改變)

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

    連線連線時觸發

Graph

  • add

    新建圖形

  • remove

    移除圖形

  • change

    圖形屬性改變
    change可以新增字尾，以區分不同的屬性改變：
    change:position 節點位置改變
    change:vertices 連線折點改變
    change:custom 節點自定義屬性改變

相關文章