pfCanvas

directive in module patternfly.canvas

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.
• .actionIconClicked - function that listens for node actions/events when clicking the items within the node toolbar.
  • nodeClickHandler - (function) A function that starts the connection mode when clicking the items within the node toolbar. Passes the following arguments: string (action) and object (node) as parameters.
  • $scope.$emit - (function) A function that listens to the action click event via $scope.$on to log the eventText when clicking the items within the node toolbar. Passes the following arguments: string ('nodeActionClicked') and object ({action, node}) as parameters. Also is used to listen for when the mouse is currently over a node (or not) when an action is selected - in which it then passes the following argument: string ('nodeActionClosed') as parameters.
• .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.

(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.

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.

A flag indicating whether connections should be hidden or shown on the canvas