Merge pull request #474 from gavin-ts/image-label-placement

render: improve image label placement
This commit is contained in:
gavin-ts 2022-12-19 23:44:57 -08:00 committed by GitHub
commit b6fd1e527c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 2367 additions and 311 deletions

View file

@ -2,6 +2,8 @@
#### Improvements 🧹
- Improved label placements for shapes with images to avoid overlapping container labels. [#474](https://github.com/terrastruct/d2/pull/474)
#### Bugfixes ⛑️
- `d2 fmt` only rewrites if it has changes, instead of always rewriting. [#470](https://github.com/terrastruct/d2/pull/470)

View file

@ -90,7 +90,14 @@ func Layout(ctx context.Context, g *d2graph.Graph) (err error) {
for _, obj := range g.Objects {
id := obj.AbsID()
idToObj[id] = obj
loadScript += generateAddNodeLine(id, int(obj.Width), int(obj.Height))
height := obj.Height
if obj.LabelWidth != nil && obj.LabelHeight != nil {
if obj.Attributes.Shape.Value == d2target.ShapeImage || obj.Attributes.Icon != nil {
height += float64(*obj.LabelHeight) + label.PADDING
}
}
loadScript += generateAddNodeLine(id, int(obj.Width), int(height))
if obj.Parent != g.Root {
loadScript += generateAddParentLine(id, obj.Parent.AbsID())
}
@ -151,8 +158,12 @@ func Layout(ctx context.Context, g *d2graph.Graph) (err error) {
if obj.LabelWidth != nil && obj.LabelHeight != nil {
if len(obj.ChildrenArray) > 0 {
obj.LabelPosition = go2.Pointer(string(label.InsideTopCenter))
} else if obj.Attributes.Shape.Value == d2target.ShapeImage || obj.Attributes.Icon != nil {
obj.LabelPosition = go2.Pointer(string(label.OutsideTopCenter))
} else if obj.Attributes.Shape.Value == d2target.ShapeImage {
obj.LabelPosition = go2.Pointer(string(label.OutsideBottomCenter))
// remove the extra height we added to the node when passing to dagre
obj.Height -= float64(*obj.LabelHeight) + label.PADDING
} else if obj.Attributes.Icon != nil {
obj.LabelPosition = go2.Pointer(string(label.InsideTopCenter))
} else {
obj.LabelPosition = go2.Pointer(string(label.InsideMiddleCenter))
}

View file

@ -142,10 +142,15 @@ func Layout(ctx context.Context, g *d2graph.Graph) (err error) {
}
walk(g.Root, nil, func(obj, parent *d2graph.Object) {
height := obj.Height
if obj.Attributes.Shape.Value == d2target.ShapeImage || obj.Attributes.Icon != nil {
height += float64(*obj.LabelHeight) + label.PADDING
}
n := &ELKNode{
ID: obj.AbsID(),
Width: obj.Width,
Height: obj.Height,
Height: height,
}
if len(obj.ChildrenArray) > 0 {
@ -250,8 +255,11 @@ func Layout(ctx context.Context, g *d2graph.Graph) (err error) {
if obj.LabelWidth != nil && obj.LabelHeight != nil {
if len(obj.ChildrenArray) > 0 {
obj.LabelPosition = go2.Pointer(string(label.InsideTopCenter))
} else if obj.Attributes.Shape.Value == d2target.ShapeImage || obj.Attributes.Icon != nil {
obj.LabelPosition = go2.Pointer(string(label.OutsideTopCenter))
} else if obj.Attributes.Shape.Value == d2target.ShapeImage {
obj.LabelPosition = go2.Pointer(string(label.OutsideBottomCenter))
obj.Height -= float64(*obj.LabelHeight) + label.PADDING
} else if obj.Attributes.Icon != nil {
obj.LabelPosition = go2.Pointer(string(label.InsideTopCenter))
} else {
obj.LabelPosition = go2.Pointer(string(label.InsideMiddleCenter))
}

View file

@ -1513,6 +1513,78 @@ no container.style: {
stroke: red
fill: "#CEEDEE"
}
`,
},
{
name: "overlapping_image_container_labels",
script: `
root: {
shape: image
icon: https://icons.terrastruct.com/essentials/004-picture.svg
}
root -> container.root
container: {
root: {
shape: image
icon: https://icons.terrastruct.com/essentials/004-picture.svg
}
left: {
root: {
shape: image
icon: https://icons.terrastruct.com/essentials/004-picture.svg
}
inner: {
left: {
shape: image
icon: https://icons.terrastruct.com/essentials/004-picture.svg
}
right: {
shape: image
icon: https://icons.terrastruct.com/essentials/004-picture.svg
}
}
root -> inner.left: {
label: to inner left
}
root -> inner.right: {
label: to inner right
}
}
right: {
root: {
shape: image
icon: https://icons.terrastruct.com/essentials/004-picture.svg
}
inner: {
left: {
shape: image
icon: https://icons.terrastruct.com/essentials/004-picture.svg
}
right: {
shape: image
icon: https://icons.terrastruct.com/essentials/004-picture.svg
}
}
root -> inner.left: {
label: to inner left
}
root -> inner.right: {
label: to inner right
}
}
root -> left.root: {
label: to left container root
}
root -> right.root: {
label: to right container root
}
}
`,
},
}

View file

@ -9,7 +9,7 @@
"y": 0
},
"width": 140,
"height": 126,
"height": 152,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
@ -48,7 +48,7 @@
"underline": false,
"labelWidth": 40,
"labelHeight": 26,
"labelPosition": "OUTSIDE_TOP_CENTER",
"labelPosition": "INSIDE_TOP_CENTER",
"zIndex": 0,
"level": 1
}

View file

@ -2,7 +2,7 @@
<svg
style="background: white;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="340" height="357" viewBox="-100 -131 340 357"><style type="text/css">
width="340" height="352" viewBox="-100 -100 340 352"><style type="text/css">
<![CDATA[
.shape {
shape-rendering: geometricPrecision;
@ -18,8 +18,8 @@ width="340" height="357" viewBox="-100 -131 340 357"><style type="text/css">
}
]]>
</style><g id="ww"><g class="shape" ><rect x="0" y="0" width="140" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><image href="https://icons.terrastruct.com/essentials/time.svg" x="38.500000" y="31.500000" width="63" height="63" /><text class="text-bold" x="70.000000" y="-15.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">hello</text></g><mask id="4291942518" maskUnits="userSpaceOnUse" x="0" y="0" width="340" height="357">
<rect x="0" y="0" width="340" height="357" fill="white"></rect>
</style><g id="ww"><g class="shape" ><rect x="0" y="0" width="140" height="152" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><image href="https://icons.terrastruct.com/essentials/time.svg" x="38.000000" y="44.000000" width="64" height="64" /><text class="text-bold" x="70.000000" y="21.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">hello</text></g><mask id="1946192600" maskUnits="userSpaceOnUse" x="0" y="0" width="340" height="352">
<rect x="0" y="0" width="340" height="352" fill="white"></rect>
</mask><style type="text/css"><![CDATA[
.text-bold {

Before

Width:  |  Height:  |  Size: 324 KiB

After

Width:  |  Height:  |  Size: 324 KiB

View file

@ -9,7 +9,7 @@
"y": 12
},
"width": 140,
"height": 126,
"height": 152,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
@ -48,7 +48,7 @@
"underline": false,
"labelWidth": 40,
"labelHeight": 26,
"labelPosition": "OUTSIDE_TOP_CENTER",
"labelPosition": "INSIDE_TOP_CENTER",
"zIndex": 0,
"level": 1
}

View file

@ -2,7 +2,7 @@
<svg
style="background: white;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="340" height="357" viewBox="-88 -119 340 357"><style type="text/css">
width="340" height="352" viewBox="-88 -88 340 352"><style type="text/css">
<![CDATA[
.shape {
shape-rendering: geometricPrecision;
@ -18,8 +18,8 @@ width="340" height="357" viewBox="-88 -119 340 357"><style type="text/css">
}
]]>
</style><g id="ww"><g class="shape" ><rect x="12" y="12" width="140" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><image href="https://icons.terrastruct.com/essentials/time.svg" x="50.500000" y="43.500000" width="63" height="63" /><text class="text-bold" x="82.000000" y="-3.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">hello</text></g><mask id="1307854030" maskUnits="userSpaceOnUse" x="0" y="0" width="340" height="357">
<rect x="0" y="0" width="340" height="357" fill="white"></rect>
</style><g id="ww"><g class="shape" ><rect x="12" y="12" width="140" height="152" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><image href="https://icons.terrastruct.com/essentials/time.svg" x="50.000000" y="56.000000" width="64" height="64" /><text class="text-bold" x="82.000000" y="33.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">hello</text></g><mask id="4116288208" maskUnits="userSpaceOnUse" x="0" y="0" width="340" height="352">
<rect x="0" y="0" width="340" height="352" fill="white"></rect>
</mask><style type="text/css"><![CDATA[
.text-bold {

Before

Width:  |  Height:  |  Size: 324 KiB

After

Width:  |  Height:  |  Size: 324 KiB

View file

@ -48,7 +48,7 @@
"underline": false,
"labelWidth": 13,
"labelHeight": 26,
"labelPosition": "OUTSIDE_TOP_CENTER",
"labelPosition": "OUTSIDE_BOTTOM_CENTER",
"zIndex": 0,
"level": 1
},
@ -57,7 +57,7 @@
"type": "image",
"pos": {
"x": 0,
"y": 228
"y": 254
},
"width": 128,
"height": 128,
@ -99,7 +99,7 @@
"underline": false,
"labelWidth": 13,
"labelHeight": 26,
"labelPosition": "OUTSIDE_TOP_CENTER",
"labelPosition": "OUTSIDE_BOTTOM_CENTER",
"zIndex": 0,
"level": 1
}
@ -132,19 +132,19 @@
"route": [
{
"x": 64,
"y": 128
"y": 154
},
{
"x": 64,
"y": 168
"y": 194
},
{
"x": 64,
"y": 188
"y": 214
},
{
"x": 64,
"y": 228
"y": 254
}
],
"isCurve": true,

View file

@ -2,7 +2,7 @@
<svg
style="background: white;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="328" height="587" viewBox="-100 -131 328 587"><style type="text/css">
width="328" height="613" viewBox="-100 -100 328 613"><style type="text/css">
<![CDATA[
.shape {
shape-rendering: geometricPrecision;
@ -18,8 +18,8 @@ width="328" height="587" viewBox="-100 -131 328 587"><style type="text/css">
}
]]>
</style><g id="a"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="0" y="0" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="64.000000" y="-15.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="0" y="228" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="64.000000" y="213.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 64.000000 130.000000 C 64.000000 168.000000 64.000000 188.000000 64.000000 224.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1565697820)"/></g><mask id="1565697820" maskUnits="userSpaceOnUse" x="0" y="0" width="328" height="587">
<rect x="0" y="0" width="328" height="587" fill="white"></rect>
</style><g id="a"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="0" y="0" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="64.000000" y="149.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="0" y="254" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="64.000000" y="403.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 64.000000 156.000000 C 64.000000 194.000000 64.000000 214.000000 64.000000 250.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#537491880)"/></g><mask id="537491880" maskUnits="userSpaceOnUse" x="0" y="0" width="328" height="613">
<rect x="0" y="0" width="328" height="613" fill="white"></rect>
</mask><style type="text/css"><![CDATA[
.text-bold {

Before

Width:  |  Height:  |  Size: 325 KiB

After

Width:  |  Height:  |  Size: 325 KiB

View file

@ -48,7 +48,7 @@
"underline": false,
"labelWidth": 13,
"labelHeight": 26,
"labelPosition": "OUTSIDE_TOP_CENTER",
"labelPosition": "OUTSIDE_BOTTOM_CENTER",
"zIndex": 0,
"level": 1
},
@ -57,7 +57,7 @@
"type": "image",
"pos": {
"x": 12,
"y": 240
"y": 266
},
"width": 128,
"height": 128,
@ -99,7 +99,7 @@
"underline": false,
"labelWidth": 13,
"labelHeight": 26,
"labelPosition": "OUTSIDE_TOP_CENTER",
"labelPosition": "OUTSIDE_BOTTOM_CENTER",
"zIndex": 0,
"level": 1
}
@ -132,11 +132,11 @@
"route": [
{
"x": 76,
"y": 140
"y": 166
},
{
"x": 76,
"y": 240
"y": 266
}
],
"animated": false,

View file

@ -2,7 +2,7 @@
<svg
style="background: white;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="328" height="587" viewBox="-88 -119 328 587"><style type="text/css">
width="328" height="613" viewBox="-88 -88 328 613"><style type="text/css">
<![CDATA[
.shape {
shape-rendering: geometricPrecision;
@ -18,8 +18,8 @@ width="328" height="587" viewBox="-88 -119 328 587"><style type="text/css">
}
]]>
</style><g id="a"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="12" y="12" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="76.000000" y="-3.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="12" y="240" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="76.000000" y="225.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 76.000000 142.000000 L 76.000000 236.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#1815629444)"/></g><mask id="1815629444" maskUnits="userSpaceOnUse" x="0" y="0" width="328" height="587">
<rect x="0" y="0" width="328" height="587" fill="white"></rect>
</style><g id="a"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="12" y="12" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="76.000000" y="161.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="b"><g class="shape" ><image href="https://icons.terrastruct.com/essentials/004-picture.svg" x="12" y="266" width="128" height="128" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="76.000000" y="415.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 76.000000 168.000000 L 76.000000 262.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#2374789466)"/></g><mask id="2374789466" maskUnits="userSpaceOnUse" x="0" y="0" width="328" height="613">
<rect x="0" y="0" width="328" height="613" fill="white"></rect>
</mask><style type="text/css"><![CDATA[
.text-bold {

Before

Width:  |  Height:  |  Size: 325 KiB

After

Width:  |  Height:  |  Size: 325 KiB

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 813 KiB

After

Width:  |  Height:  |  Size: 813 KiB

View file

@ -206,7 +206,7 @@
"type": "",
"pos": {
"x": 253,
"y": 3094
"y": 3120
},
"width": 425,
"height": 427,
@ -246,7 +246,7 @@
"type": "oval",
"pos": {
"x": 472,
"y": 3169
"y": 3195
},
"width": 131,
"height": 131,
@ -286,7 +286,7 @@
"type": "",
"pos": {
"x": 254,
"y": 2436
"y": 2462
},
"width": 424,
"height": 427,
@ -326,7 +326,7 @@
"type": "oval",
"pos": {
"x": 472,
"y": 2511
"y": 2537
},
"width": 131,
"height": 131,
@ -366,7 +366,7 @@
"type": "diamond",
"pos": {
"x": 329,
"y": 2513
"y": 2539
},
"width": 123,
"height": 126,
@ -449,7 +449,7 @@
"y": 2195
},
"width": 131,
"height": 126,
"height": 152,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
@ -488,7 +488,7 @@
"underline": false,
"labelWidth": 31,
"labelHeight": 26,
"labelPosition": "OUTSIDE_TOP_CENTER",
"labelPosition": "INSIDE_TOP_CENTER",
"zIndex": 0,
"level": 1
},
@ -497,10 +497,10 @@
"type": "",
"pos": {
"x": 75,
"y": 3631
"y": 3657
},
"width": 273,
"height": 422,
"height": 448,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
@ -537,10 +537,10 @@
"type": "queue",
"pos": {
"x": 152,
"y": 3706
"y": 3732
},
"width": 120,
"height": 126,
"height": 152,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
@ -579,7 +579,7 @@
"underline": false,
"labelWidth": 20,
"labelHeight": 26,
"labelPosition": "OUTSIDE_TOP_CENTER",
"labelPosition": "INSIDE_TOP_CENTER",
"zIndex": 0,
"level": 2
},
@ -588,7 +588,7 @@
"type": "parallelogram",
"pos": {
"x": 333,
"y": 4554
"y": 4606
},
"width": 123,
"height": 126,
@ -628,7 +628,7 @@
"type": "cylinder",
"pos": {
"x": 117,
"y": 4173
"y": 4225
},
"width": 557,
"height": 276,
@ -788,7 +788,7 @@
"type": "",
"pos": {
"x": 476,
"y": 4248
"y": 4300
},
"width": 123,
"height": 126,
@ -828,7 +828,7 @@
"type": "",
"pos": {
"x": 329,
"y": 2662
"y": 2688
},
"width": 123,
"height": 126,
@ -868,7 +868,7 @@
"type": "",
"pos": {
"x": 328,
"y": 3172
"y": 3198
},
"width": 124,
"height": 126,
@ -908,7 +908,7 @@
"type": "",
"pos": {
"x": 331,
"y": 3320
"y": 3346
},
"width": 118,
"height": 126,
@ -1108,7 +1108,7 @@
"type": "",
"pos": {
"x": 109,
"y": 3295
"y": 3321
},
"width": 124,
"height": 126,
@ -1148,7 +1148,7 @@
"type": "",
"pos": {
"x": 192,
"y": 4248
"y": 4300
},
"width": 122,
"height": 126,
@ -1188,7 +1188,7 @@
"type": "",
"pos": {
"x": 150,
"y": 3852
"y": 3904
},
"width": 123,
"height": 126,
@ -1228,7 +1228,7 @@
"type": "",
"pos": {
"x": 334,
"y": 4248
"y": 4300
},
"width": 122,
"height": 126,
@ -1429,15 +1429,15 @@
},
{
"x": 23,
"y": 2381
"y": 2407
},
{
"x": 369.5,
"y": 2381
"y": 2407
},
{
"x": 369,
"y": 2534
"y": 2560
}
],
"animated": false,
@ -1632,7 +1632,7 @@
},
{
"x": 537,
"y": 2511
"y": 2537
}
],
"animated": false,
@ -1667,11 +1667,11 @@
"route": [
{
"x": 537,
"y": 2642
"y": 2668
},
{
"x": 537,
"y": 3169
"y": 3195
}
],
"animated": false,
@ -1706,11 +1706,11 @@
"route": [
{
"x": 537,
"y": 3300
"y": 3326
},
{
"x": 537,
"y": 4248
"y": 4300
}
],
"animated": false,
@ -1745,11 +1745,11 @@
"route": [
{
"x": 391,
"y": 2639
"y": 2665
},
{
"x": 390.5,
"y": 2662
"y": 2688
}
],
"animated": false,
@ -1784,19 +1784,19 @@
"route": [
{
"x": 390,
"y": 2788
"y": 2814
},
{
"x": 390,
"y": 2918
"y": 2944
},
{
"x": 389.5,
"y": 2918
"y": 2944
},
{
"x": 389.5,
"y": 3171.5
"y": 3197.5
}
],
"animated": false,
@ -1831,11 +1831,11 @@
"route": [
{
"x": 390,
"y": 3297.5
"y": 3323.5
},
{
"x": 390,
"y": 3320
"y": 3346
}
],
"animated": false,
@ -2042,11 +2042,11 @@
"route": [
{
"x": 170,
"y": 2321
"y": 2347
},
{
"x": 170.5,
"y": 3294.6666666666665
"y": 3320.6666666666665
}
],
"animated": false,
@ -2081,27 +2081,27 @@
"route": [
{
"x": 149.83333333333331,
"y": 3420.6666666666665
"y": 3446.6666666666665
},
{
"x": 149.83333333333331,
"y": 3576
"y": 3602
},
{
"x": 63.666666666666664,
"y": 3576
"y": 3602
},
{
"x": 63.666666666666664,
"y": 4118
"y": 4170
},
{
"x": 252.5,
"y": 4118
"y": 4170
},
{
"x": 252.5,
"y": 4248
"y": 4300
}
],
"animated": false,
@ -2136,19 +2136,19 @@
"route": [
{
"x": 389.5,
"y": 3446
"y": 3472
},
{
"x": 389.5,
"y": 3576
"y": 3602
},
{
"x": 231.16666666666666,
"y": 3576
"y": 3602
},
{
"x": 231,
"y": 3706
"y": 3732
}
],
"animated": false,
@ -2183,11 +2183,11 @@
"route": [
{
"x": 191.16666666666666,
"y": 3420.6666666666665
"y": 3446.6666666666665
},
{
"x": 191,
"y": 3706
"y": 3732
}
],
"animated": false,
@ -2222,11 +2222,11 @@
"route": [
{
"x": 211,
"y": 3832
"y": 3884
},
{
"x": 211.5,
"y": 3852
"y": 3904
}
],
"animated": false,
@ -2261,19 +2261,19 @@
"route": [
{
"x": 211.16666666666666,
"y": 3978
"y": 4030
},
{
"x": 211.16666666666666,
"y": 4108
"y": 4160
},
{
"x": 394.5,
"y": 4108
"y": 4160
},
{
"x": 394.5,
"y": 4248
"y": 4300
}
],
"animated": false,
@ -2308,11 +2308,11 @@
"route": [
{
"x": 394.5,
"y": 4374
"y": 4426
},
{
"x": 395,
"y": 4554
"y": 4606
}
],
"animated": false,
@ -2347,19 +2347,19 @@
"route": [
{
"x": 214,
"y": 2321
"y": 2347
},
{
"x": 214.16666666666669,
"y": 2371
"y": 2397
},
{
"x": 410.5,
"y": 2371
"y": 2397
},
{
"x": 411,
"y": 2532
"y": 2558
}
],
"animated": false,

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 809 KiB

After

Width:  |  Height:  |  Size: 809 KiB

View file

@ -0,0 +1,951 @@
{
"name": "",
"shapes": [
{
"id": "root",
"type": "image",
"pos": {
"x": 492,
"y": 0
},
"width": 128,
"height": 128,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#FFFFFF",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": {
"Scheme": "https",
"Opaque": "",
"User": null,
"Host": "icons.terrastruct.com",
"Path": "/essentials/004-picture.svg",
"RawPath": "",
"ForceQuery": false,
"RawQuery": "",
"Fragment": "",
"RawFragment": ""
},
"iconPosition": "INSIDE_MIDDLE_CENTER",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "root",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 35,
"labelHeight": 26,
"labelPosition": "OUTSIDE_BOTTOM_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "container",
"type": "",
"pos": {
"x": 0,
"y": 254
},
"width": 1112,
"height": 962,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#E3E9FD",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "container",
"fontSize": 28,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 117,
"labelHeight": 41,
"labelPosition": "INSIDE_TOP_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "container.root",
"type": "image",
"pos": {
"x": 492,
"y": 304
},
"width": 128,
"height": 128,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#FFFFFF",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": {
"Scheme": "https",
"Opaque": "",
"User": null,
"Host": "icons.terrastruct.com",
"Path": "/essentials/004-picture.svg",
"RawPath": "",
"ForceQuery": false,
"RawQuery": "",
"Fragment": "",
"RawFragment": ""
},
"iconPosition": "INSIDE_MIDDLE_CENTER",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "root",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 35,
"labelHeight": 26,
"labelPosition": "OUTSIDE_BOTTOM_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "container.left",
"type": "",
"pos": {
"x": 40,
"y": 558
},
"width": 496,
"height": 608,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#EDF0FD",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "left",
"fontSize": 24,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 38,
"labelHeight": 36,
"labelPosition": "INSIDE_TOP_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "container.left.root",
"type": "image",
"pos": {
"x": 224,
"y": 608
},
"width": 128,
"height": 128,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#FFFFFF",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": {
"Scheme": "https",
"Opaque": "",
"User": null,
"Host": "icons.terrastruct.com",
"Path": "/essentials/004-picture.svg",
"RawPath": "",
"ForceQuery": false,
"RawQuery": "",
"Fragment": "",
"RawFragment": ""
},
"iconPosition": "INSIDE_MIDDLE_CENTER",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "root",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 35,
"labelHeight": 26,
"labelPosition": "OUTSIDE_BOTTOM_CENTER",
"zIndex": 0,
"level": 3
},
{
"id": "container.left.inner",
"type": "",
"pos": {
"x": 80,
"y": 862
},
"width": 416,
"height": 254,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#F7F8FE",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "inner",
"fontSize": 20,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 49,
"labelHeight": 31,
"labelPosition": "INSIDE_TOP_CENTER",
"zIndex": 0,
"level": 3
},
{
"id": "container.left.inner.left",
"type": "image",
"pos": {
"x": 130,
"y": 912
},
"width": 128,
"height": 128,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#FFFFFF",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": {
"Scheme": "https",
"Opaque": "",
"User": null,
"Host": "icons.terrastruct.com",
"Path": "/essentials/004-picture.svg",
"RawPath": "",
"ForceQuery": false,
"RawQuery": "",
"Fragment": "",
"RawFragment": ""
},
"iconPosition": "INSIDE_MIDDLE_CENTER",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "left",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 29,
"labelHeight": 26,
"labelPosition": "OUTSIDE_BOTTOM_CENTER",
"zIndex": 0,
"level": 4
},
{
"id": "container.left.inner.right",
"type": "image",
"pos": {
"x": 318,
"y": 912
},
"width": 128,
"height": 128,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#FFFFFF",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": {
"Scheme": "https",
"Opaque": "",
"User": null,
"Host": "icons.terrastruct.com",
"Path": "/essentials/004-picture.svg",
"RawPath": "",
"ForceQuery": false,
"RawQuery": "",
"Fragment": "",
"RawFragment": ""
},
"iconPosition": "INSIDE_MIDDLE_CENTER",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "right",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 39,
"labelHeight": 26,
"labelPosition": "OUTSIDE_BOTTOM_CENTER",
"zIndex": 0,
"level": 4
},
{
"id": "container.right",
"type": "",
"pos": {
"x": 576,
"y": 558
},
"width": 496,
"height": 608,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#EDF0FD",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "right",
"fontSize": 24,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 52,
"labelHeight": 36,
"labelPosition": "INSIDE_TOP_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "container.right.root",
"type": "image",
"pos": {
"x": 760,
"y": 608
},
"width": 128,
"height": 128,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#FFFFFF",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": {
"Scheme": "https",
"Opaque": "",
"User": null,
"Host": "icons.terrastruct.com",
"Path": "/essentials/004-picture.svg",
"RawPath": "",
"ForceQuery": false,
"RawQuery": "",
"Fragment": "",
"RawFragment": ""
},
"iconPosition": "INSIDE_MIDDLE_CENTER",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "root",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 35,
"labelHeight": 26,
"labelPosition": "OUTSIDE_BOTTOM_CENTER",
"zIndex": 0,
"level": 3
},
{
"id": "container.right.inner",
"type": "",
"pos": {
"x": 616,
"y": 862
},
"width": 416,
"height": 254,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#F7F8FE",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "inner",
"fontSize": 20,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 49,
"labelHeight": 31,
"labelPosition": "INSIDE_TOP_CENTER",
"zIndex": 0,
"level": 3
},
{
"id": "container.right.inner.left",
"type": "image",
"pos": {
"x": 666,
"y": 912
},
"width": 128,
"height": 128,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#FFFFFF",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": {
"Scheme": "https",
"Opaque": "",
"User": null,
"Host": "icons.terrastruct.com",
"Path": "/essentials/004-picture.svg",
"RawPath": "",
"ForceQuery": false,
"RawQuery": "",
"Fragment": "",
"RawFragment": ""
},
"iconPosition": "INSIDE_MIDDLE_CENTER",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "left",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 29,
"labelHeight": 26,
"labelPosition": "OUTSIDE_BOTTOM_CENTER",
"zIndex": 0,
"level": 4
},
{
"id": "container.right.inner.right",
"type": "image",
"pos": {
"x": 854,
"y": 912
},
"width": 128,
"height": 128,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#FFFFFF",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": {
"Scheme": "https",
"Opaque": "",
"User": null,
"Host": "icons.terrastruct.com",
"Path": "/essentials/004-picture.svg",
"RawPath": "",
"ForceQuery": false,
"RawQuery": "",
"Fragment": "",
"RawFragment": ""
},
"iconPosition": "INSIDE_MIDDLE_CENTER",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "right",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 39,
"labelHeight": 26,
"labelPosition": "OUTSIDE_BOTTOM_CENTER",
"zIndex": 0,
"level": 4
}
],
"connections": [
{
"id": "(root -> container.root)[0]",
"src": "root",
"srcArrow": "none",
"srcLabel": "",
"dst": "container.root",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"route": [
{
"x": 556,
"y": 154
},
{
"x": 556,
"y": 194
},
{
"x": 556,
"y": 264
},
{
"x": 556,
"y": 304
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "container.left.(root -> inner.left)[0]",
"src": "container.left.root",
"srcArrow": "none",
"srcLabel": "",
"dst": "container.left.inner.left",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "to inner left",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 76,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 231.00787401574803,
"y": 762
},
{
"x": 201.4015748031496,
"y": 802
},
{
"x": 194,
"y": 872
},
{
"x": 194,
"y": 912
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "container.left.(root -> inner.right)[0]",
"src": "container.left.root",
"srcArrow": "none",
"srcLabel": "",
"dst": "container.left.inner.right",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "to inner right",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 86,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 344.99212598425197,
"y": 762
},
{
"x": 374.59842519685037,
"y": 802
},
{
"x": 382,
"y": 872
},
{
"x": 382,
"y": 912
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "container.right.(root -> inner.left)[0]",
"src": "container.right.root",
"srcArrow": "none",
"srcLabel": "",
"dst": "container.right.inner.left",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "to inner left",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 76,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 767.007874015748,
"y": 762
},
{
"x": 737.4015748031496,
"y": 802
},
{
"x": 730,
"y": 872
},
{
"x": 730,
"y": 912
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "container.right.(root -> inner.right)[0]",
"src": "container.right.root",
"srcArrow": "none",
"srcLabel": "",
"dst": "container.right.inner.right",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "to inner right",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 86,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 880.992125984252,
"y": 762
},
{
"x": 910.5984251968504,
"y": 802
},
{
"x": 918,
"y": 872
},
{
"x": 918,
"y": 912
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "container.(root -> left.root)[0]",
"src": "container.root",
"srcArrow": "none",
"srcLabel": "",
"dst": "container.left.root",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "to left container root",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 136,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 492,
"y": 411.32835820895525
},
{
"x": 328.79999999999995,
"y": 488.66567164179105
},
{
"x": 288,
"y": 568
},
{
"x": 288,
"y": 608
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "container.(root -> right.root)[0]",
"src": "container.root",
"srcArrow": "none",
"srcLabel": "",
"dst": "container.right.root",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "to right container root",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 146,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 620,
"y": 411.32835820895525
},
{
"x": 783.2,
"y": 488.66567164179105
},
{
"x": 824,
"y": 568
},
{
"x": 824,
"y": 608
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
}
]
}

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 798 KiB

View file

@ -0,0 +1,912 @@
{
"name": "",
"shapes": [
{
"id": "root",
"type": "image",
"pos": {
"x": 280,
"y": 12
},
"width": 128,
"height": 128,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#FFFFFF",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": {
"Scheme": "https",
"Opaque": "",
"User": null,
"Host": "icons.terrastruct.com",
"Path": "/essentials/004-picture.svg",
"RawPath": "",
"ForceQuery": false,
"RawQuery": "",
"Fragment": "",
"RawFragment": ""
},
"iconPosition": "INSIDE_MIDDLE_CENTER",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "root",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 35,
"labelHeight": 26,
"labelPosition": "OUTSIDE_BOTTOM_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "container",
"type": "",
"pos": {
"x": 12,
"y": 271
},
"width": 1322,
"height": 1044,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#E3E9FD",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "container",
"fontSize": 28,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 117,
"labelHeight": 41,
"labelPosition": "INSIDE_TOP_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "container.root",
"type": "image",
"pos": {
"x": 280,
"y": 346
},
"width": 128,
"height": 128,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#FFFFFF",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": {
"Scheme": "https",
"Opaque": "",
"User": null,
"Host": "icons.terrastruct.com",
"Path": "/essentials/004-picture.svg",
"RawPath": "",
"ForceQuery": false,
"RawQuery": "",
"Fragment": "",
"RawFragment": ""
},
"iconPosition": "INSIDE_MIDDLE_CENTER",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "root",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 35,
"labelHeight": 26,
"labelPosition": "OUTSIDE_BOTTOM_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "container.left",
"type": "",
"pos": {
"x": 87,
"y": 566
},
"width": 576,
"height": 674,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#EDF0FD",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "left",
"fontSize": 24,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 38,
"labelHeight": 36,
"labelPosition": "INSIDE_TOP_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "container.left.root",
"type": "image",
"pos": {
"x": 258,
"y": 641
},
"width": 128,
"height": 128,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#FFFFFF",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": {
"Scheme": "https",
"Opaque": "",
"User": null,
"Host": "icons.terrastruct.com",
"Path": "/essentials/004-picture.svg",
"RawPath": "",
"ForceQuery": false,
"RawQuery": "",
"Fragment": "",
"RawFragment": ""
},
"iconPosition": "INSIDE_MIDDLE_CENTER",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "root",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 35,
"labelHeight": 26,
"labelPosition": "OUTSIDE_BOTTOM_CENTER",
"zIndex": 0,
"level": 3
},
{
"id": "container.left.inner",
"type": "",
"pos": {
"x": 162,
"y": 861
},
"width": 426,
"height": 304,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#F7F8FE",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "inner",
"fontSize": 20,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 49,
"labelHeight": 31,
"labelPosition": "INSIDE_TOP_CENTER",
"zIndex": 0,
"level": 3
},
{
"id": "container.left.inner.left",
"type": "image",
"pos": {
"x": 237,
"y": 936
},
"width": 128,
"height": 128,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#FFFFFF",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": {
"Scheme": "https",
"Opaque": "",
"User": null,
"Host": "icons.terrastruct.com",
"Path": "/essentials/004-picture.svg",
"RawPath": "",
"ForceQuery": false,
"RawQuery": "",
"Fragment": "",
"RawFragment": ""
},
"iconPosition": "INSIDE_MIDDLE_CENTER",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "left",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 29,
"labelHeight": 26,
"labelPosition": "OUTSIDE_BOTTOM_CENTER",
"zIndex": 0,
"level": 4
},
{
"id": "container.left.inner.right",
"type": "image",
"pos": {
"x": 385,
"y": 936
},
"width": 128,
"height": 128,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#FFFFFF",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": {
"Scheme": "https",
"Opaque": "",
"User": null,
"Host": "icons.terrastruct.com",
"Path": "/essentials/004-picture.svg",
"RawPath": "",
"ForceQuery": false,
"RawQuery": "",
"Fragment": "",
"RawFragment": ""
},
"iconPosition": "INSIDE_MIDDLE_CENTER",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "right",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 39,
"labelHeight": 26,
"labelPosition": "OUTSIDE_BOTTOM_CENTER",
"zIndex": 0,
"level": 4
},
{
"id": "container.right",
"type": "",
"pos": {
"x": 683,
"y": 566
},
"width": 576,
"height": 674,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#EDF0FD",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "right",
"fontSize": 24,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 52,
"labelHeight": 36,
"labelPosition": "INSIDE_TOP_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "container.right.root",
"type": "image",
"pos": {
"x": 854,
"y": 641
},
"width": 128,
"height": 128,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#FFFFFF",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": {
"Scheme": "https",
"Opaque": "",
"User": null,
"Host": "icons.terrastruct.com",
"Path": "/essentials/004-picture.svg",
"RawPath": "",
"ForceQuery": false,
"RawQuery": "",
"Fragment": "",
"RawFragment": ""
},
"iconPosition": "INSIDE_MIDDLE_CENTER",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "root",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 35,
"labelHeight": 26,
"labelPosition": "OUTSIDE_BOTTOM_CENTER",
"zIndex": 0,
"level": 3
},
{
"id": "container.right.inner",
"type": "",
"pos": {
"x": 758,
"y": 861
},
"width": 426,
"height": 304,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#F7F8FE",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "inner",
"fontSize": 20,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 49,
"labelHeight": 31,
"labelPosition": "INSIDE_TOP_CENTER",
"zIndex": 0,
"level": 3
},
{
"id": "container.right.inner.left",
"type": "image",
"pos": {
"x": 833,
"y": 936
},
"width": 128,
"height": 128,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#FFFFFF",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": {
"Scheme": "https",
"Opaque": "",
"User": null,
"Host": "icons.terrastruct.com",
"Path": "/essentials/004-picture.svg",
"RawPath": "",
"ForceQuery": false,
"RawQuery": "",
"Fragment": "",
"RawFragment": ""
},
"iconPosition": "INSIDE_MIDDLE_CENTER",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "left",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 29,
"labelHeight": 26,
"labelPosition": "OUTSIDE_BOTTOM_CENTER",
"zIndex": 0,
"level": 4
},
{
"id": "container.right.inner.right",
"type": "image",
"pos": {
"x": 981,
"y": 936
},
"width": 128,
"height": 128,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#FFFFFF",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": {
"Scheme": "https",
"Opaque": "",
"User": null,
"Host": "icons.terrastruct.com",
"Path": "/essentials/004-picture.svg",
"RawPath": "",
"ForceQuery": false,
"RawQuery": "",
"Fragment": "",
"RawFragment": ""
},
"iconPosition": "INSIDE_MIDDLE_CENTER",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "right",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 39,
"labelHeight": 26,
"labelPosition": "OUTSIDE_BOTTOM_CENTER",
"zIndex": 0,
"level": 4
}
],
"connections": [
{
"id": "(root -> container.root)[0]",
"src": "root",
"srcArrow": "none",
"srcLabel": "",
"dst": "container.root",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"route": [
{
"x": 343.6666666666667,
"y": 166
},
{
"x": 343.6666666666667,
"y": 346
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "container.left.(root -> inner.left)[0]",
"src": "container.left.root",
"srcArrow": "none",
"srcLabel": "",
"dst": "container.left.inner.left",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "to inner left",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 76,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 301,
"y": 795
},
{
"x": 301,
"y": 936
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "container.left.(root -> inner.right)[0]",
"src": "container.left.root",
"srcArrow": "none",
"srcLabel": "",
"dst": "container.left.inner.right",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "to inner right",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 86,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 343.6666666666667,
"y": 795
},
{
"x": 343.6666666666667,
"y": 846
},
{
"x": 449,
"y": 846
},
{
"x": 449,
"y": 936
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "container.right.(root -> inner.left)[0]",
"src": "container.right.root",
"srcArrow": "none",
"srcLabel": "",
"dst": "container.right.inner.left",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "to inner left",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 76,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 897,
"y": 795
},
{
"x": 897,
"y": 936
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "container.right.(root -> inner.right)[0]",
"src": "container.right.root",
"srcArrow": "none",
"srcLabel": "",
"dst": "container.right.inner.right",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "to inner right",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 86,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 939.6666666666667,
"y": 795
},
{
"x": 939.6666666666667,
"y": 846
},
{
"x": 1045,
"y": 846
},
{
"x": 1045,
"y": 936
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "container.(root -> left.root)[0]",
"src": "container.root",
"srcArrow": "none",
"srcLabel": "",
"dst": "container.left.root",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "to left container root",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 136,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 322.33333333333337,
"y": 500
},
{
"x": 322.33333333333337,
"y": 641
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "container.(root -> right.root)[0]",
"src": "container.root",
"srcArrow": "none",
"srcLabel": "",
"dst": "container.right.root",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "to right container root",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 146,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 365,
"y": 500
},
{
"x": 365,
"y": 510
},
{
"x": 918.3333333333334,
"y": 510
},
{
"x": 918.3333333333334,
"y": 641
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
}
]
}

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 798 KiB