Namespace: DiagramUtils

Oracle® JavaScript Extension Toolkit (JET)
17.0.0
F92240-01

Since:
  • 3.0
Module:
  • ojdiagram-utils

QuickNav

Methods

Type Definitions

Description

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 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 DiagramUtils
// pass the generated function to the oj.ojDiagram as the 'layout' option
var layoutFunc = DiagramUtils.getLayout(data);


Usage

Typescript Import Format
//This namespace exports multiple static methods or members. To import 
import * as DiagramUtils from "ojs/ojdiagram-utils";

//Now you can access the methods as DiagramUtils.methodName and so on

For additional information visit:


Methods

(static) getLayout<K1, K2, D1, D2>(obj) : {(context: DvtDiagramLayoutContext<K1, K2, D1, D2>) => void}

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 Argument Description
obj.linkDefaults Object <optional>
 An object that defines a function for generating a link path and a default layout for the link label
Properties
Name Type Argument Description
labelLayout (context: DvtDiagramLayoutContext<K1, K2, D1, D2>, link: DvtDiagramLayoutContextLink<K1, K2, D2>) => DiagramUtils.LabelLayout <optional>
 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 DiagramUtils.LabelLayout
path (context: DvtDiagramLayoutContext<K1, K2, D1, D2>, link: DvtDiagramLayoutContextLink<K1, K2, D2>) => string <optional>
 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
obj.links Array.<Object> <optional>
 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 Argument Description
coordinateSpace K1 <optional>
 The coordinate container id for the link. 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.
id K2 id for the link
labelLayout DiagramUtils.LabelLayout <optional>
 An object that defines label layout for the link. See DiagramUtils.LabelLayout object.
path string <optional>
 A string that represents an SVG path for the link.
obj.nodeDefaults Object <optional>
 An object that defines the default layout of the node label
Properties
Name Type Description
labelLayout DiagramUtils.LabelLayout | ((context: DvtDiagramLayoutContext<K1, K2, D1, D2>, node: DvtDiagramLayoutContextNode<K1, D1>) => DiagramUtils.LabelLayout) An object that defines default label layout for diagram nodes. See 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 : DiagramUtils.LabelLayout. The object defines absolute coordinates for label position.

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 Argument Description
id K1 id for the node
labelLayout DiagramUtils.LabelLayout <optional>
 An object that defines label layout for the node. See DiagramUtils.LabelLayout object. The object defines absolute coordinates for label position.
x number x-coordinate for the node
y number y-coordinate for the node
obj.panZoomState {zoom: number, centerX: number, centerY: number} | ((context: DvtDiagramLayoutContext<K1, K2, D1, D2>) => {zoom: number, centerY: number, centerX: number}) <optional>
 An object with the following properties that defines diagram panZoom state.

Alternatively a panZoom State 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 panZoom state object with the properties defined below.

Properties
Name Type Description
centerX number center x value
centerY number center y value
zoom number zoom value
obj.viewport {x: number, y: number, w: number, h: number} | ((context: DvtDiagramLayoutContext<K1, K2, D1, D2>) => {x: number, y: number, w: number, h: number}) <optional>
 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.

Deprecated:
Since Description
13.0.0 Viewport has been deprecated, please use panZoomState property instead.
Properties
Name Type Description
h number height
w number width
x number x-coordinate
y number y-coordinate
Returns:

layout callback function

Type
(context: DvtDiagramLayoutContext<K1, K2, D1, D2>) => void

Type Definitions

LabelLayout

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