Improve this doc View source

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

## Description

Component for canvas editor which adds a toolbox where items can be dragged and dropped onto canvas, as well as other canvas operations such as: Zoom In, Zoom Out, Hide Connections, Remove Node, and Duplicate Node. 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-editor
           chart-data-model="{object}"
           chart-view-model="{object}"
           toolbox-tabs="{boolean}"
           read-only>
    </pf-canvas-editor>

#### Parameters

Param | Type | Details
--- | --- | ---
chartDataModel | object | Chart data object which defines the nodes and connections on the canvas. See patternfly.canvas.directive:pfCanvas for detailed information.
chartViewModel | object | (Optional) The chartViewModel is initialized from the chartDataModel and contains additional helper methods such as `chartViewModel.isOnlyOneNodeSelected()` and `chartViewModel.getSelectedNodes()`.

toolboxTabs

boolean

An array of Tab objects used in the Toolbox. Each Tab object many contain 'subtabs' and/or 'items'. Items may be dragged onto the canvas.

- .preTitle - (string) (Optional) A small title above the main tab title
- .title - (string) The main title of the tab
- .subtabs - (Array) An array of sub Tab objects. Supports up to three levels of nested sub tabs
- .items - (Array) An array of items which can be dragged and dropped onto the canvas
  - .name - (string) The item name/title
  - .id - (number) The item id
  - .image - (string) (Optional) The url of the item's image. Ex: "/img/kubernetes.svg"
  - .icon - (string) (Optional) The icon class of the item's icon. Ex: "pf pficon-service"

readOnly | boolean | (Optional) 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.

## Example

#### Source

#### Demo