Class: DiagramUtils

Oracle® JavaScript Extension Toolkit (JET)
3.2.0

E87541-01

QuickNav

oj. DiagramUtils

Version:
  • 3.2.0

Diagram Layout Utilities

DiagramUtils is a helper object that provides a function to generate a layout callback for ojDiagram out of JSON object. A JSON object contains positions for the nodes, paths for the links and properties for positioning a label for a node and a link. See object details oj.DiagramUtils.getLayout

Usage :


// create JSON object that contains positions for the nodes and SVG paths for the links
// the nodes and links are identified by ids
var data = {
 "nodes":[
  {"id":"N0", "x":100, "y":0},
  {"id":"N1", "x":200, "y":100},
  {"id":"N2", "x":100, "y":200},
  {"id":"N3", "x":0, "y":100}
],
"links":[
  {"id":"L0", "path":"M120,20L220,120"},
  {"id":"L1", "path":"M220,120L120,220"},
  {"id":"L2", "path":"M120,220L20,120"},
  {"id":"L3", "path":"M20,120L120,20"}
]
};
//generate the layout callback function using data and the oj.DiagramUtils
// pass the generated function to the oj.ojDiagram as the 'layout' option
var layoutFunc = oj.DiagramUtils.getLayout(data);

Constructor

new DiagramUtils()

Source:

Methods

<static> getLayout(obj) → {Function}

A function that generates the layout callback function for the ojDiagram component.
Parameters:
Name Type Description
obj Object JSON object that defines positions of nodes, links paths and label layouts. The object supports the following properties.
Properties:
Name Type Description
obj.nodes Array<Object> An array of objects with the following properties that describe a position for the diagram node and a layout for the node's label
Properties
Name Type Description
x number x-coordinate for the node
y number y-coordinate for the node
labelLayout Object An object that defines label layout for the node. See oj.DiagramUtils~LabelLayout object. The object defines absolute coordinates for label position.
obj.links Array<Object> An array of objects with the following properties that describe a path for the diagram link and a layout for the link's label.
Properties
Name Type Description
path string A string that represents an SVG path for the link.
coordinateSpace string The coordinate container id for the. If specified the link points will be applied relative to that container. If the value is not set, the link points are in the global coordinate space.
labelLayout Object An object that defines label layout for the link. See oj.DiagramUtils~LabelLayout object.
obj.nodeDefaults Object An object that defines the default layout of the node label
Properties
Name Type Description
labelLayout Object | Function An object that defines default label layout for diagram nodes. See oj.DiagramUtils~LabelLayout object. The object defines relative coordinates for label position. E.g. if all the node labels should be positioned with a certain offset relative to the node, a label position can be defined using an object in node defaults.

Alternatively a label layout can be defined with a function. The function will receive the following parameters:

  • {DvtDiagramLayoutContext} - layout context for the diagram
  • {DvtDiagramLayoutContextNode} - layout context for the current node
The return value of the function is a label object with the following properties : oj.DiagramUtils~LabelLayout. The object defines absolute coordinates for label position.

obj.linkDefaults Object An object that defines a function for generating a link path and a default layout for the link label
Properties
Name Type Description
path Function a callback function that will be used to generate a link path. The function will receive the following parameters:
  • {DvtDiagramLayoutContext} - layout context for the diagram
  • {DvtDiagramLayoutContextLink} - layout context for the current link
The return value of the function is a string that represents an SVG path for the link
labelLayout Function a function that defines default label layout for diagram links. The function will receive the following parameters:
  • {DvtDiagramLayoutContext} - layout context for the diagram
  • {DvtDiagramLayoutContextLink} - layout context for the current link
The return value of the function is a label object with the following properties oj.DiagramUtils~LabelLayout
obj.viewport Object | Function An object with the following properties that defines diagram viewport.

Alternatively a viewport can be defined with a function. The function will receive the following parameters:

  • {DvtDiagramLayoutContext} - layout context for the diagram
The return value of the function is a viewport object with the properties defined below.

Properties
Name Type Description
x number x-coordinate
y number y-coordinate
w number width
h number height
Source:
Returns:
layout callback function
Type
Function

Type Definitions

LabelLayout

The complete label layout object used to position node and link label
Properties:
Name Type Description
x number x-coordinate for the label
y number y-coordinate for the label
rotationPointX number x-coordinate for label rotation point
rotationPointY number y-coordinate for label rotation point
number number angle of rotation for the labelLayout
halign string horizontal alignment for the label. Valid values are "left", "right" or "center"
valign string vertical alignment for the label. Valid values are "top", "middle", "bottom" or "baseline". The default value is "top"
Source: