Namespace: DiagramUtils

Oracle® JavaScript Extension Toolkit (JET)
8.0.0
F18189-01

QuickNav

Methods

Type Definitions


DiagramUtils

Version:
  • 8.0.0
Since:
  • 3.0
Module:
  • ojdiagram-utils

Module usage

See JET Module Loading for an overview of module usage within JET.

Javascript Import Format
define(['ojs/ojdiagram-utils'], function(DiagramUtils) {
 // Application should call API on DiagramUtils 
})
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

JET In Typescript

A detailed description of working with JET elements and classes in your typescript project can be found at: JET Typescript Usage.

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 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);

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.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
x number x-coordinate for the node
y number y-coordinate for the node
labelLayout oj.DiagramUtils.LabelLayout <optional>
 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> <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
id K2 id for the link
path string <optional>
 A string that represents an SVG path for the link.
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.
labelLayout oj.DiagramUtils.LabelLayout <optional>
 An object that defines label layout for the link. See oj.DiagramUtils.LabelLayout object.
obj.nodeDefaults Object <optional>
 An object that defines the default layout of the node label
Properties
Name Type Description
labelLayout oj.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 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 <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
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
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 oj.DiagramUtils.LabelLayout
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.

Properties
Name Type Description
x number x-coordinate
y number y-coordinate
w number width
h number height
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
x number x-coordinate for the label
y number y-coordinate for the label
rotationPointX number <optional>
 x-coordinate for label rotation point
rotationPointY number <optional>
 y-coordinate for label rotation point
angle number <optional>
 rotation angle for the label
halign string <optional>
 horizontal alignment for the label. Valid values are "left", "right" or "center"
valign string <optional>
 vertical alignment for the label. Valid values are "top", "middle", "bottom" or "baseline". The default value is "top"