Improve this doc View source

# `pfCanvas`
directive in module `patternfly.canvas`

## Description

Directive for core operations and rendering of a canvas. Does not work in IE 11 or lower because they do not support latest svg specification's 'foreignObject' api. Tested in FireFox, Chrome, and MS-Edge.

## Usage

as element:

    <pf-canvas
           chart-data-model="{object}"
           chart-view-model="{object}"
           read-only
           hide-connectors="{boolean}">
    </pf-canvas>

#### Parameters

Param | Type | Details
--- | --- | ---

chartDataModel

object

Chart data object which defines the nodes and connections on the canvas

- .nodes - An array of node objects. For each node's main icon/image you can define either an image url, an icon class, or fontContent unicode characters. For more information please see the details below:
  - .name - (string) The name of the node
  - .x - (number) The canvas x-coordinate to place the node
  - .y - (number) The canvas y-coordinate to place the node
  - .id - (number) The node id. Used to define connections between nodes.
  - .width - (number) The width of the node rectangle
  - .image - (string) (Optional) The url of the main node image. Ex: "/img/kubernetes.svg"
  - .icon - (string) (Optional) The icon class of the node icon. Ex: "pf pficon-service" Note: Does not work in IE browsers
  - .fontSize - (string) (Optional) The size of the main node icon. Used with icon
  - .fontFamily - (string) (Optional) The font family of the node icon. Ex: "fontawesome"
  - .fontContent - (string) (Optional) The unicode characters of the node icon. Used with fontFamily. Ex: "\uf0c2"
  - .backgroundColor - (string) The background color of the node rectangle
  - .inputConnectors - An array of input connectors. Connectors appear on the left side of a node's rectangle when in 'connection mode' and are endpoints of connections between nodes.
    - .name - (string) The name of the connector
    - .type - (string) A user defined 'type' of input connector. Nodes can only connect to certain 'types' of connectors. Used with validConnectionTypes. Ex: "network".
    - .fontFamily - (string) (Optional) The font family of the connector icon. Ex: "PatternFlyIcons-webfont"
    - .fontContent - (string) (Optional) The unicode characters of the connector icon. Used with fontFamily. Ex: "\ue621"
  - .validConnectionTypes - An array of valid connector types which the node can connect to. Used with node.type's. Ex: "["network","container"]
- .nodeActions - An array of actions which appear in a toolbar under a node.
  - .id - (number) The id of the node action
  - .name - (string) The name of the node action
  - .iconClass - (string) The icon class of the action. Ex: "pf pficon-edit"
  - .action - (string) The action identifier, which is passed along with the action event.
- .connections - An array of connections between nodes
  - .source - (object) The source of a connection
    - .nodeID - (number) The id of the source node
    - .connectorIndex - (number) The index of the output connector on the source node. Since all nodes have a single output connector, this value is always 0
  - .dest - (object) The destination/target of a connection
    - .nodeID - (number) The id of the destination node
    - .connectorIndex - (number) The index of the input connector on the dest/target node to connect. Zero equals the top input connector, increment for subsequent input connectors.

chartViewModel | object | (Optional) The chartViewModel is initialized from the chartDataModel and contains additional helper methods such as `chartViewModel.isOnlyOneNodeSelected()` and `chartViewModel.getSelectedNodes()`. You only need to specify a chartViewModel object if you plan on using advanced canvas operations.
readOnly | boolean | A flag indicating whether the canvas is in 'read-only' mode. When in 'read-only' mode nodes cannot be moved, selected, or deleted, and the node action toolbar is hidden.
hideConnectors | boolean | A flag indicating whether connections should be hidden or shown on the canvas

## Example

#### Source

#### Demo