Date: Fri, 29 Mar 2024 01:11:23 +0000 (UTC) Message-ID: <1587686390.6467.1711674683227@2f9704fbf185> Subject: Exported From Confluence MIME-Version: 1.0 Content-Type: multipart/related; boundary="----=_Part_6466_813948873.1711674683227" ------=_Part_6466_813948873.1711674683227 Content-Type: text/html; charset=UTF-8 Content-Transfer-Encoding: quoted-printable Content-Location: file:///C:/exported.html
JSON (JavaScript Object Notation) is an open standard format that is wid= ely used and accepted as interchange format on the web. JSON consists of ar= bitrary key-value pairs. We specify some conventions to represent a graph w= ithin this format.
We specify positions of nodes and edges relative to parent nodes, see ou= r KLayoutData= Meta Model documentation for further information.
The JSON graph format comprises of= four basic elements - Nodes, Ports, Labels, and Edges.
Below are some example graphs in t= he JSON graph format. You can hop to the Live se= ction of our web service and try them! If you use SVG as output format the = graph will be rendered as an SVG image directly within your browser.=
The following example sh= ows a very simple graph consisting of two nodes connected by one edge. Each= node owns a width and height as well= as a label.
{ id: "root", // root node children: [{ id: "n1", // node n1 labels: [ { text: "n1" } ], width: 100,=20 height: 100, },{ id: "n2", // node n2 labels: [ { text: "n2" } ], width: 100, height: 50 }], edges: [{ id: "e1", // edge n1 -> n2 source: "n1", target: "n2" }] }=20
This example illustrates nesting of nodes to establish hierarchy. =
The node n2
serves as parent node for nodes n4
. The latter two nodes are connec=
ted via edge e2
. Furthermore, edge e1
&n=
bsp;is connected to port n2_p1
of node n2=
.
{ id: "root", =20 children: [{ id: "n1", =20 labels: [ { text: "n1" } ], width: 100,=20 height: 100 },{ id: "n2",=20 labels: [ { text: "n2" } ], width: 100, height: 50, ports: [{ id: "n2_p1", width: 10, height: 10 }], children: [{ =20 id: "n3", =20 labels: [ { text: "n3" } ], width: 40, height: 40 },{ id: "n4",=20 labels: [ { text: "n4" } ], width: 40, height: 40} ], edges: [{ id: "e4", =20 source: "n3", target: "n4" }] }], edges: [{ id: "e1", =20 labels: [ { text: "e1" } ], source: "n1", target: "n2", targetPort: "n2_p1" }] }=20
All graph elements can hold further properties that s=
pecify certain behavior. In the example below, the both nodes have FIXED_SIDE portConstraints
, indicating that the por=
ts may also be moved on their respective side. The side of each port is spe=
cified using the portSide
property.
Note that properties might be coupled with a certain layout algorithm an= d hence are not always available. The two properties used in this example a= re only available for our Klay Layered algorithm.
{ id: "root", // root node children: [{ id: "n1", // node n1 labels: [ { text: "n1" } ], // node n1 has fixed port constraints properties: {"de.cau.cs.kieler.portConstraints": "FIXED_SIDE"}, width: 100,=20 height: 100, ports: [{ id: "p1", width: 10, height: 10, // port p1 should be located on the north side properties: {"de.cau.cs.kieler.portSide": "NORTH"} }] },{ id: "n2", // node n2 labels: [ { text: "n2" } ], properties: {"de.cau.cs.kieler.portConstraints": "FIXED_SIDE"}, width: 100, height: 50, ports: [{ id: "p2", width: 10, height: 10, properties: {"de.cau.cs.kieler.portSide": "SOUTH"} }] }], // children end edges: [{ id: "e1", // edge n1 -> n2 source: "n1", target: "n2", sourcePort: "p1", // p1 -> p2 targetPort: "p2" }] }=20
One can assign padding
to compound nodes. In the following =
example the node n2
contains four different padding values for=
the each side.
Note, that positions of child nodes are relative to the parent nodes (0,= 0) plus the left and top padding. Refer to the documentati= on of KLayout= Data for further information on relative positioning.
{ id: "root",=20 children: [{ id: "n1",=20 labels: [ { text: "n1" } ], width: 100, height: 100 },{ id: "n2", labels: [ { text: "n2" } ], width: 100, height: 50, padding: { left: 40, top: 20, right: 50, bottom: 10 }, ports: [{ id: "n2_p1", width: 10, height: 10 }], children: [{=20 id: "n3",=20 labels: [ { text: "n3" } ], width: 40, height: 40 },{ id: "n4", labels: [ { text: "n4" } ], width: 40, height: 40} ], edges: [{ id: "e4",=20 source: "n3", target: "n4" }] }], edges: [{ id: "e1",=20 labels: [ { text: "e1" } ], source: "n1", target: "n2", targetPort: "n2_p1" }] }=20
The example below shows how to mix existing positions with automatic lay=
out. To activate this the de.cau.cs.kieler.fixed
algorith=
m can be used, see the properties specification of the n2
=
node.
Fixed positions are specified for the two child nodes of the compound no=
de n2
and the edge that connects them. Positions can either be=
directly set to x
and y
or specified v=
ia the position
property. Bendpoints are specified via b=
endPoints
, where the first and the last pair of coordinates determin=
es the attachment positions at the node or port and any further pair repres=
ents a bendpoint.
{ id : "root", children : [ { id : "n1", width : 50, height : 50 }, { id : "n2", width : 100, height : 50, properties : { algorithm : "de.cau.cs.kieler.fixed" }, ports : [ { id : "n2_p1", width : 10, height : 10 } ], children : [ { id : "n3", labels : [ { text : "n3" } ], width : 40, height : 40, properties : { position : "20, 40" } }, { id : "n4", labels : [ { text : "n4" } ], width : 40, height : 40, properties : { position : "140, 95" } } ], edges : [ { id : "e4", source : "n3", target : "n4", properties : { // first and last are src and target bendPoints : "60, 60, 80, 10, 140, 115" } } ] } ], edges : [ { id : "e1", labels : [ { text : "e1" } ], source : "n1", target : "n2", targetPort : "n2_p1" } ] };=20