luciano/d2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #1624 from gavin-ts/grid-outside-labels

Browse source 
grid cell margins for labels, icons, 3d
This commit is contained in:
gavin-ts 2023-09-27 10:00:50 -07:00 committed by GitHub
commit d4fe6fd788
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 3950 additions and 497 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ci/release/changelogs/next.md
View file

@ -3,3 +3,5 @@
#### Improvements 🧹
#### Bugfixes ⛑️
- Grid layout now accounts for each cell's outside labels and icons [#1624](https://github.com/terrastruct/d2/pull/1624)

44
d2graph/layout.go
View file

@ -1,6 +1,7 @@
package d2graph
import (
"math"
"sort"
"strings"
@ -285,6 +286,49 @@ func (obj *Object) GetModifierElementAdjustments() (dx, dy float64) {
return dx, dy
}
func (obj *Object) GetMargin() geo.Spacing {
margin := geo.Spacing{}
if obj.HasLabel() && obj.LabelPosition != nil {
position := label.Position(*obj.LabelPosition)
labelWidth := float64(obj.LabelDimensions.Width + label.PADDING)
labelHeight := float64(obj.LabelDimensions.Height + label.PADDING)
switch position {
case label.OutsideTopLeft, label.OutsideTopCenter, label.OutsideTopRight:
margin.Top = labelHeight
case label.OutsideBottomLeft, label.OutsideBottomCenter, label.OutsideBottomRight:
margin.Bottom = labelHeight
case label.OutsideLeftTop, label.OutsideLeftMiddle, label.OutsideLeftBottom:
margin.Left = labelWidth
case label.OutsideRightTop, label.OutsideRightMiddle, label.OutsideRightBottom:
margin.Right = labelWidth
}
}
if obj.Icon != nil && obj.IconPosition != nil && obj.Shape.Value != d2target.ShapeImage {
position := label.Position(*obj.IconPosition)
iconSize := float64(d2target.MAX_ICON_SIZE + label.PADDING)
switch position {
case label.OutsideTopLeft, label.OutsideTopCenter, label.OutsideTopRight:
margin.Top = math.Max(margin.Top, iconSize)
case label.OutsideBottomLeft, label.OutsideBottomCenter, label.OutsideBottomRight:
margin.Bottom = math.Max(margin.Bottom, iconSize)
case label.OutsideLeftTop, label.OutsideLeftMiddle, label.OutsideLeftBottom:
margin.Left = math.Max(margin.Left, iconSize)
case label.OutsideRightTop, label.OutsideRightMiddle, label.OutsideRightBottom:
margin.Right = math.Max(margin.Right, iconSize)
}
}
dx, dy := obj.GetModifierElementAdjustments()
margin.Right += dx
margin.Top += dy
return margin
}
func (obj *Object) ToShape() shape.Shape {
tl := obj.TopLeft
if tl == nil {

17
d2layouts/d2grid/grid_diagram.go
View file

@ -2,7 +2,6 @@ package d2grid
import (
"strconv"
"strings"
"oss.terrastruct.com/d2/d2graph"
"oss.terrastruct.com/d2/lib/geo"
@ -112,19 +111,3 @@ func (gd *gridDiagram) shift(dx, dy float64) {
e.Move(dx, dy)
}
}
func (gd *gridDiagram) cleanup(obj *d2graph.Object, graph *d2graph.Graph) {
obj.Children = make(map[string]*d2graph.Object)
obj.ChildrenArray = make([]*d2graph.Object, 0)
restore := func(parent, child *d2graph.Object) {
parent.Children[strings.ToLower(child.ID)] = child
parent.ChildrenArray = append(parent.ChildrenArray, child)
graph.Objects = append(graph.Objects, child)
}
for _, child := range gd.objects {
restore(obj, child)
child.IterDescendants(restore)
}
graph.Edges = append(graph.Edges, gd.edges...)
}

71
d2layouts/d2grid/layout.go
View file

@ -77,43 +77,6 @@ func Layout(ctx context.Context, g *d2graph.Graph) error {
}
}
// also check for grid cells with outside top labels or icons
// the first grid object is at the top (and always exists)
topY := gd.objects[0].TopLeft.Y
highestOutside := topY
for _, o := range gd.objects {
// we only want to compute label positions for objects at the top of the grid
if o.TopLeft.Y > topY {
if gd.rowDirected {
// if the grid is rowDirected (row1, row2, etc) we can stop after finishing the first row
break
} else {
// otherwise we continue until the next column
continue
}
}
if o.LabelPosition != nil {
labelPosition := label.Position(*o.LabelPosition)
if labelPosition.IsOutside() {
labelTL := o.GetLabelTopLeft()
if labelTL.Y < highestOutside {
highestOutside = labelTL.Y
}
}
}
if o.IconPosition != nil {
switch label.Position(*o.IconPosition) {
case label.OutsideTopLeft, label.OutsideTopCenter, label.OutsideTopRight:
iconSpace := float64(d2target.MAX_ICON_SIZE + label.PADDING)
if topY-iconSpace < highestOutside {
highestOutside = topY - iconSpace
}
}
}
}
if highestOutside < topY {
occupiedHeight += topY - highestOutside + 2*label.PADDING
}
if occupiedHeight > float64(verticalPadding) {
// if the label doesn't fit within the padding, we need to add more
dy = occupiedHeight - float64(verticalPadding)
@ -179,12 +142,18 @@ func Layout(ctx context.Context, g *d2graph.Graph) error {
func layoutGrid(g *d2graph.Graph, obj *d2graph.Object) (*gridDiagram, error) {
gd := newGridDiagram(obj)
// to handle objects with outside labels, we adjust their dimensions before layout and
// after layout, we remove the label adjustment and reposition TopLeft if needed
revertAdjustments := gd.sizeForOutsideLabels()
if gd.rows != 0 && gd.columns != 0 {
gd.layoutEvenly(g, obj)
} else {
gd.layoutDynamic(g, obj)
}
revertAdjustments()
// position labels and icons
for _, o := range gd.objects {
if o.Icon != nil {
@ -871,3 +840,31 @@ func getDistToTarget(layout [][]*d2graph.Object, targetSize float64, horizontalG
}
return totalDelta
}
func (gd *gridDiagram) sizeForOutsideLabels() (revert func()) {
margins := make(map[*d2graph.Object]geo.Spacing)
for _, o := range gd.objects {
margin := o.GetMargin()
margins[o] = margin
o.Height += margin.Top + margin.Bottom
o.Width += margin.Left + margin.Right
}
return func() {
for _, o := range gd.objects {
margin, has := margins[o]
if !has {
continue
}
o.Height -= margin.Top + margin.Bottom
o.Width -= margin.Left + margin.Right
if margin.Left > 0 || margin.Top > 0 {
o.MoveWithDescendants(margin.Left, margin.Top)
}
}
}
}

1
e2etests/stable_test.go
View file

@ -2836,6 +2836,7 @@ y: profits {
loadFromFile(t, "simple_grid_edges"),
loadFromFile(t, "grid_nested_simple_edges"),
loadFromFile(t, "nested_diagram_types"),
loadFromFile(t, "grid_outside_labels"),
}
runa(t, tcs)

64
e2etests/testdata/files/grid_outside_labels.d2 vendored Normal file
View file

@ -0,0 +1,64 @@
container: ___________________________________container____________________________________ {
grid-columns: 3
grid-gap: 20
amscd plugin: {
ex: |tex
\\begin{CD} B @>{\\text{very long label}}>> C S^{{\\mathcal{W}}_\\Lambda}\\otimes T @>j>> T\\\\ @VVV V \\end{CD}
|
}
braket plugin: {
style.3d: true
ex: |tex
\\bra{a}\\ket{b}
|
}
cancel plugin: {
ex: |tex
\\cancel{Culture + 5}
|
}
color plugin: {
icon: https://icons.terrastruct.com/essentials/profits.svg
icon.near: outside-right-center
ex: |tex
\\textcolor{red}{y} = \\textcolor{green}{\\sin} x
|
}
gensymb plugin: {
ex: |tex
\\lambda = 10.6\\,\\micro\\mathrm{m}
|
}
mhchem plugin: {
style.multiple: true
ex: |tex
\ce{SO4^2- + Ba^2+ -> BaSO4 v}
|
}
physics plugin: {
ex: |tex
\\var{F[g(x)]}
\\dd(\\cos\\theta)
|
}
multilines: {
ex: |tex
\\displaylines{x = a + b \\\\ y = b + c}
\\sum_{k=1}^{n} h_{k} \\int_{0}^{1} \\bigl(\\partial_{k} f(x_{k-1}+t h_{k} e_{k}) -\\partial_{k} f(a)\\bigr) \\,dt
|
}
asm: {
ex: |latex
\\min_{ \\mathclap{\\substack{ x \\in \\mathbb{R}^n \\ x \\geq 0 \\ Ax \\leq b }}} c^T x
|
}
}

16
e2etests/testdata/regression/outside_grid_label_position/dagre/board.exp.json generated vendored
View file

@ -11,7 +11,7 @@
"y": 29
},
"width": 681,
"height": 390,
"height": 404,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
@ -52,7 +52,7 @@
"y": 70
},
"width": 621,
"height": 319,
"height": 333,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
@ -93,7 +93,7 @@
"y": 100
},
"width": 561,
"height": 259,
"height": 273,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
@ -131,7 +131,7 @@
"type": "rectangle",
"pos": {
"x": 120,
"y": 172
"y": 186
},
"width": 140,
"height": 127,
@ -172,7 +172,7 @@
"type": "rectangle",
"pos": {
"x": 150,
"y": 202
"y": 216
},
"width": 80,
"height": 66,
@ -213,7 +213,7 @@
"type": "rectangle",
"pos": {
"x": 300,
"y": 172
"y": 186
},
"width": 140,
"height": 127,
@ -254,7 +254,7 @@
"type": "rectangle",
"pos": {
"x": 330,
"y": 202
"y": 216
},
"width": 80,
"height": 66,
@ -295,7 +295,7 @@
"type": "rectangle",
"pos": {
"x": 480,
"y": 172
"y": 186
},
"width": 81,
"height": 127,

170
e2etests/testdata/regression/outside_grid_label_position/dagre/sketch.exp.svg vendored
View file

@ -1,16 +1,16 @@
<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" d2Version="v0.6.1-HEAD" preserveAspectRatio="xMinYMin meet" viewBox="0 0 683 432"><svg id="d2-svg" class="d2-1992982023" width="683" height="432" viewBox="-1 -12 683 432"><rect x="-1.000000" y="-12.000000" width="683.000000" height="432.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[
.d2-1992982023 .text {
font-family: "d2-1992982023-font-regular";
<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" d2Version="v0.6.1-HEAD" preserveAspectRatio="xMinYMin meet" viewBox="0 0 683 446"><svg id="d2-svg" class="d2-1894090104" width="683" height="446" viewBox="-1 -12 683 446"><rect x="-1.000000" y="-12.000000" width="683.000000" height="446.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[
.d2-1894090104 .text {
font-family: "d2-1894090104-font-regular";
}
@font-face {
font-family: d2-1992982023-font-regular;
font-family: d2-1894090104-font-regular;
src: url("data:application/font-woff;base64,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");
}
.d2-1992982023 .text-bold {
font-family: "d2-1992982023-font-bold";
.d2-1894090104 .text-bold {
font-family: "d2-1894090104-font-bold";
}
@font-face {
font-family: d2-1992982023-font-bold;
font-family: d2-1894090104-font-bold;
src: url("data:application/font-woff;base64,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");
}]]></style><style type="text/css"><![CDATA[.shape {
shape-rendering: geometricPrecision;
@ -25,85 +25,85 @@
opacity: 0.5;
}
.d2-1992982023 .fill-N1{fill:#0A0F25;}
.d2-1992982023 .fill-N2{fill:#676C7E;}
.d2-1992982023 .fill-N3{fill:#9499AB;}
.d2-1992982023 .fill-N4{fill:#CFD2DD;}
.d2-1992982023 .fill-N5{fill:#DEE1EB;}
.d2-1992982023 .fill-N6{fill:#EEF1F8;}
.d2-1992982023 .fill-N7{fill:#FFFFFF;}
.d2-1992982023 .fill-B1{fill:#0D32B2;}
.d2-1992982023 .fill-B2{fill:#0D32B2;}
.d2-1992982023 .fill-B3{fill:#E3E9FD;}
.d2-1992982023 .fill-B4{fill:#E3E9FD;}
.d2-1992982023 .fill-B5{fill:#EDF0FD;}
.d2-1992982023 .fill-B6{fill:#F7F8FE;}
.d2-1992982023 .fill-AA2{fill:#4A6FF3;}
.d2-1992982023 .fill-AA4{fill:#EDF0FD;}
.d2-1992982023 .fill-AA5{fill:#F7F8FE;}
.d2-1992982023 .fill-AB4{fill:#EDF0FD;}
.d2-1992982023 .fill-AB5{fill:#F7F8FE;}
.d2-1992982023 .stroke-N1{stroke:#0A0F25;}
.d2-1992982023 .stroke-N2{stroke:#676C7E;}
.d2-1992982023 .stroke-N3{stroke:#9499AB;}
.d2-1992982023 .stroke-N4{stroke:#CFD2DD;}
.d2-1992982023 .stroke-N5{stroke:#DEE1EB;}
.d2-1992982023 .stroke-N6{stroke:#EEF1F8;}
.d2-1992982023 .stroke-N7{stroke:#FFFFFF;}
.d2-1992982023 .stroke-B1{stroke:#0D32B2;}
.d2-1992982023 .stroke-B2{stroke:#0D32B2;}
.d2-1992982023 .stroke-B3{stroke:#E3E9FD;}
.d2-1992982023 .stroke-B4{stroke:#E3E9FD;}
.d2-1992982023 .stroke-B5{stroke:#EDF0FD;}
.d2-1992982023 .stroke-B6{stroke:#F7F8FE;}
.d2-1992982023 .stroke-AA2{stroke:#4A6FF3;}
.d2-1992982023 .stroke-AA4{stroke:#EDF0FD;}
.d2-1992982023 .stroke-AA5{stroke:#F7F8FE;}
.d2-1992982023 .stroke-AB4{stroke:#EDF0FD;}
.d2-1992982023 .stroke-AB5{stroke:#F7F8FE;}
.d2-1992982023 .background-color-N1{background-color:#0A0F25;}
.d2-1992982023 .background-color-N2{background-color:#676C7E;}
.d2-1992982023 .background-color-N3{background-color:#9499AB;}
.d2-1992982023 .background-color-N4{background-color:#CFD2DD;}
.d2-1992982023 .background-color-N5{background-color:#DEE1EB;}
.d2-1992982023 .background-color-N6{background-color:#EEF1F8;}
.d2-1992982023 .background-color-N7{background-color:#FFFFFF;}
.d2-1992982023 .background-color-B1{background-color:#0D32B2;}
.d2-1992982023 .background-color-B2{background-color:#0D32B2;}
.d2-1992982023 .background-color-B3{background-color:#E3E9FD;}
.d2-1992982023 .background-color-B4{background-color:#E3E9FD;}
.d2-1992982023 .background-color-B5{background-color:#EDF0FD;}
.d2-1992982023 .background-color-B6{background-color:#F7F8FE;}
.d2-1992982023 .background-color-AA2{background-color:#4A6FF3;}
.d2-1992982023 .background-color-AA4{background-color:#EDF0FD;}
.d2-1992982023 .background-color-AA5{background-color:#F7F8FE;}
.d2-1992982023 .background-color-AB4{background-color:#EDF0FD;}
.d2-1992982023 .background-color-AB5{background-color:#F7F8FE;}
.d2-1992982023 .color-N1{color:#0A0F25;}
.d2-1992982023 .color-N2{color:#676C7E;}
.d2-1992982023 .color-N3{color:#9499AB;}
.d2-1992982023 .color-N4{color:#CFD2DD;}
.d2-1992982023 .color-N5{color:#DEE1EB;}
.d2-1992982023 .color-N6{color:#EEF1F8;}
.d2-1992982023 .color-N7{color:#FFFFFF;}
.d2-1992982023 .color-B1{color:#0D32B2;}
.d2-1992982023 .color-B2{color:#0D32B2;}
.d2-1992982023 .color-B3{color:#E3E9FD;}
.d2-1992982023 .color-B4{color:#E3E9FD;}
.d2-1992982023 .color-B5{color:#EDF0FD;}
.d2-1992982023 .color-B6{color:#F7F8FE;}
.d2-1992982023 .color-AA2{color:#4A6FF3;}
.d2-1992982023 .color-AA4{color:#EDF0FD;}
.d2-1992982023 .color-AA5{color:#F7F8FE;}
.d2-1992982023 .color-AB4{color:#EDF0FD;}
.d2-1992982023 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="container1"><g class="shape" ><rect x="0.000000" y="29.000000" width="681.000000" height="390.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="340.500000" y="16.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">container1</text></g><g id="container1.container2"><g class="shape" ><rect x="30.000000" y="70.000000" width="621.000000" height="319.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="340.500000" y="58.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">container2</text></g><g id="container1.container2.container3"><g class="shape" ><rect x="60.000000" y="100.000000" width="561.000000" height="259.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="340.500000" y="125.000000" class="text fill-N1" style="text-anchor:middle;font-size:20px">container3</text></g><g id="container1.container2.container3.first"><g class="shape" ><rect x="120.000000" y="172.000000" width="140.000000" height="127.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="190.000000" y="162.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">first</text></g><g id="container1.container2.container3.second"><g class="shape" ><rect x="300.000000" y="172.000000" width="140.000000" height="127.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="370.000000" y="162.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">second</text></g><g id="container1.container2.container3.third"><g class="shape" ><rect x="480.000000" y="172.000000" width="81.000000" height="127.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="520.500000" y="162.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">third</text></g><g id="container1.container2.container3.first.child"><g class="shape" ><rect x="150.000000" y="202.000000" width="80.000000" height="66.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="190.000000" y="289.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">child</text></g><g id="container1.container2.container3.second.child"><g class="shape" ><rect x="330.000000" y="202.000000" width="80.000000" height="66.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="370.000000" y="289.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">child</text></g><mask id="d2-1992982023" maskUnits="userSpaceOnUse" x="-1" y="-12" width="683" height="432">
<rect x="-1" y="-12" width="683" height="432" fill="white"></rect>
.d2-1894090104 .fill-N1{fill:#0A0F25;}
.d2-1894090104 .fill-N2{fill:#676C7E;}
.d2-1894090104 .fill-N3{fill:#9499AB;}
.d2-1894090104 .fill-N4{fill:#CFD2DD;}
.d2-1894090104 .fill-N5{fill:#DEE1EB;}
.d2-1894090104 .fill-N6{fill:#EEF1F8;}
.d2-1894090104 .fill-N7{fill:#FFFFFF;}
.d2-1894090104 .fill-B1{fill:#0D32B2;}
.d2-1894090104 .fill-B2{fill:#0D32B2;}
.d2-1894090104 .fill-B3{fill:#E3E9FD;}
.d2-1894090104 .fill-B4{fill:#E3E9FD;}
.d2-1894090104 .fill-B5{fill:#EDF0FD;}
.d2-1894090104 .fill-B6{fill:#F7F8FE;}
.d2-1894090104 .fill-AA2{fill:#4A6FF3;}
.d2-1894090104 .fill-AA4{fill:#EDF0FD;}
.d2-1894090104 .fill-AA5{fill:#F7F8FE;}
.d2-1894090104 .fill-AB4{fill:#EDF0FD;}
.d2-1894090104 .fill-AB5{fill:#F7F8FE;}
.d2-1894090104 .stroke-N1{stroke:#0A0F25;}
.d2-1894090104 .stroke-N2{stroke:#676C7E;}
.d2-1894090104 .stroke-N3{stroke:#9499AB;}
.d2-1894090104 .stroke-N4{stroke:#CFD2DD;}
.d2-1894090104 .stroke-N5{stroke:#DEE1EB;}
.d2-1894090104 .stroke-N6{stroke:#EEF1F8;}
.d2-1894090104 .stroke-N7{stroke:#FFFFFF;}
.d2-1894090104 .stroke-B1{stroke:#0D32B2;}
.d2-1894090104 .stroke-B2{stroke:#0D32B2;}
.d2-1894090104 .stroke-B3{stroke:#E3E9FD;}
.d2-1894090104 .stroke-B4{stroke:#E3E9FD;}
.d2-1894090104 .stroke-B5{stroke:#EDF0FD;}
.d2-1894090104 .stroke-B6{stroke:#F7F8FE;}
.d2-1894090104 .stroke-AA2{stroke:#4A6FF3;}
.d2-1894090104 .stroke-AA4{stroke:#EDF0FD;}
.d2-1894090104 .stroke-AA5{stroke:#F7F8FE;}
.d2-1894090104 .stroke-AB4{stroke:#EDF0FD;}
.d2-1894090104 .stroke-AB5{stroke:#F7F8FE;}
.d2-1894090104 .background-color-N1{background-color:#0A0F25;}
.d2-1894090104 .background-color-N2{background-color:#676C7E;}
.d2-1894090104 .background-color-N3{background-color:#9499AB;}
.d2-1894090104 .background-color-N4{background-color:#CFD2DD;}
.d2-1894090104 .background-color-N5{background-color:#DEE1EB;}
.d2-1894090104 .background-color-N6{background-color:#EEF1F8;}
.d2-1894090104 .background-color-N7{background-color:#FFFFFF;}
.d2-1894090104 .background-color-B1{background-color:#0D32B2;}
.d2-1894090104 .background-color-B2{background-color:#0D32B2;}
.d2-1894090104 .background-color-B3{background-color:#E3E9FD;}
.d2-1894090104 .background-color-B4{background-color:#E3E9FD;}
.d2-1894090104 .background-color-B5{background-color:#EDF0FD;}
.d2-1894090104 .background-color-B6{background-color:#F7F8FE;}
.d2-1894090104 .background-color-AA2{background-color:#4A6FF3;}
.d2-1894090104 .background-color-AA4{background-color:#EDF0FD;}
.d2-1894090104 .background-color-AA5{background-color:#F7F8FE;}
.d2-1894090104 .background-color-AB4{background-color:#EDF0FD;}
.d2-1894090104 .background-color-AB5{background-color:#F7F8FE;}
.d2-1894090104 .color-N1{color:#0A0F25;}
.d2-1894090104 .color-N2{color:#676C7E;}
.d2-1894090104 .color-N3{color:#9499AB;}
.d2-1894090104 .color-N4{color:#CFD2DD;}
.d2-1894090104 .color-N5{color:#DEE1EB;}
.d2-1894090104 .color-N6{color:#EEF1F8;}
.d2-1894090104 .color-N7{color:#FFFFFF;}
.d2-1894090104 .color-B1{color:#0D32B2;}
.d2-1894090104 .color-B2{color:#0D32B2;}
.d2-1894090104 .color-B3{color:#E3E9FD;}
.d2-1894090104 .color-B4{color:#E3E9FD;}
.d2-1894090104 .color-B5{color:#EDF0FD;}
.d2-1894090104 .color-B6{color:#F7F8FE;}
.d2-1894090104 .color-AA2{color:#4A6FF3;}
.d2-1894090104 .color-AA4{color:#EDF0FD;}
.d2-1894090104 .color-AA5{color:#F7F8FE;}
.d2-1894090104 .color-AB4{color:#EDF0FD;}
.d2-1894090104 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="container1"><g class="shape" ><rect x="0.000000" y="29.000000" width="681.000000" height="404.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="340.500000" y="16.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">container1</text></g><g id="container1.container2"><g class="shape" ><rect x="30.000000" y="70.000000" width="621.000000" height="333.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="340.500000" y="58.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">container2</text></g><g id="container1.container2.container3"><g class="shape" ><rect x="60.000000" y="100.000000" width="561.000000" height="273.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="340.500000" y="125.000000" class="text fill-N1" style="text-anchor:middle;font-size:20px">container3</text></g><g id="container1.container2.container3.first"><g class="shape" ><rect x="120.000000" y="186.000000" width="140.000000" height="127.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="190.000000" y="176.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">first</text></g><g id="container1.container2.container3.second"><g class="shape" ><rect x="300.000000" y="186.000000" width="140.000000" height="127.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="370.000000" y="176.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">second</text></g><g id="container1.container2.container3.third"><g class="shape" ><rect x="480.000000" y="186.000000" width="81.000000" height="127.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="520.500000" y="176.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">third</text></g><g id="container1.container2.container3.first.child"><g class="shape" ><rect x="150.000000" y="216.000000" width="80.000000" height="66.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="190.000000" y="303.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">child</text></g><g id="container1.container2.container3.second.child"><g class="shape" ><rect x="330.000000" y="216.000000" width="80.000000" height="66.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="370.000000" y="303.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">child</text></g><mask id="d2-1894090104" maskUnits="userSpaceOnUse" x="-1" y="-12" width="683" height="446">
<rect x="-1" y="-12" width="683" height="446" fill="white"></rect>
<rect x="278.000000" y="-12.000000" width="125" height="36" fill="rgba(0,0,0,0.75)"></rect>
<rect x="287.000000" y="34.000000" width="107" height="31" fill="rgba(0,0,0,0.75)"></rect>
<rect x="295.500000" y="105.000000" width="90" height="26" fill="rgba(0,0,0,0.75)"></rect>
<rect x="176.500000" y="146.000000" width="27" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="346.000000" y="146.000000" width="48" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="502.500000" y="146.000000" width="36" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="172.500000" y="273.000000" width="35" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="352.500000" y="273.000000" width="35" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="176.500000" y="160.000000" width="27" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="346.000000" y="160.000000" width="48" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="502.500000" y="160.000000" width="36" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="172.500000" y="287.000000" width="35" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="352.500000" y="287.000000" width="35" height="21" fill="rgba(0,0,0,0.75)"></rect>
</mask></svg></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

16
e2etests/testdata/regression/outside_grid_label_position/elk/board.exp.json generated vendored
View file

@ -11,7 +11,7 @@
"y": 12
},
"width": 841,
"height": 498,
"height": 512,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
@ -52,7 +52,7 @@
"y": 62
},
"width": 741,
"height": 398,
"height": 412,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
@ -93,7 +93,7 @@
"y": 112
},
"width": 641,
"height": 298,
"height": 312,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
@ -131,7 +131,7 @@
"type": "rectangle",
"pos": {
"x": 172,
"y": 184
"y": 198
},
"width": 180,
"height": 166,
@ -172,7 +172,7 @@
"type": "rectangle",
"pos": {
"x": 222,
"y": 234
"y": 248
},
"width": 80,
"height": 66,
@ -213,7 +213,7 @@
"type": "rectangle",
"pos": {
"x": 392,
"y": 184
"y": 198
},
"width": 180,
"height": 166,
@ -254,7 +254,7 @@
"type": "rectangle",
"pos": {
"x": 442,
"y": 234
"y": 248
},
"width": 80,
"height": 66,
@ -295,7 +295,7 @@
"type": "rectangle",
"pos": {
"x": 612,
"y": 184
"y": 198
},
"width": 81,
"height": 166,

170
e2etests/testdata/regression/outside_grid_label_position/elk/sketch.exp.svg vendored
View file

@ -1,16 +1,16 @@
<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" d2Version="v0.6.1-HEAD" preserveAspectRatio="xMinYMin meet" viewBox="0 0 843 500"><svg id="d2-svg" class="d2-4059264185" width="843" height="500" viewBox="11 11 843 500"><rect x="11.000000" y="11.000000" width="843.000000" height="500.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[
.d2-4059264185 .text {
font-family: "d2-4059264185-font-regular";
<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" d2Version="v0.6.1-HEAD" preserveAspectRatio="xMinYMin meet" viewBox="0 0 843 514"><svg id="d2-svg" class="d2-2885429201" width="843" height="514" viewBox="11 11 843 514"><rect x="11.000000" y="11.000000" width="843.000000" height="514.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[
.d2-2885429201 .text {
font-family: "d2-2885429201-font-regular";
}
@font-face {
font-family: d2-4059264185-font-regular;
font-family: d2-2885429201-font-regular;
src: url("data:application/font-woff;base64,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");
}
.d2-4059264185 .text-bold {
font-family: "d2-4059264185-font-bold";
.d2-2885429201 .text-bold {
font-family: "d2-2885429201-font-bold";
}
@font-face {
font-family: d2-4059264185-font-bold;
font-family: d2-2885429201-font-bold;
src: url("data:application/font-woff;base64,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");
}]]></style><style type="text/css"><![CDATA[.shape {
shape-rendering: geometricPrecision;
@ -25,85 +25,85 @@
opacity: 0.5;
}
.d2-4059264185 .fill-N1{fill:#0A0F25;}
.d2-4059264185 .fill-N2{fill:#676C7E;}
.d2-4059264185 .fill-N3{fill:#9499AB;}
.d2-4059264185 .fill-N4{fill:#CFD2DD;}
.d2-4059264185 .fill-N5{fill:#DEE1EB;}
.d2-4059264185 .fill-N6{fill:#EEF1F8;}
.d2-4059264185 .fill-N7{fill:#FFFFFF;}
.d2-4059264185 .fill-B1{fill:#0D32B2;}
.d2-4059264185 .fill-B2{fill:#0D32B2;}
.d2-4059264185 .fill-B3{fill:#E3E9FD;}
.d2-4059264185 .fill-B4{fill:#E3E9FD;}
.d2-4059264185 .fill-B5{fill:#EDF0FD;}
.d2-4059264185 .fill-B6{fill:#F7F8FE;}
.d2-4059264185 .fill-AA2{fill:#4A6FF3;}
.d2-4059264185 .fill-AA4{fill:#EDF0FD;}
.d2-4059264185 .fill-AA5{fill:#F7F8FE;}
.d2-4059264185 .fill-AB4{fill:#EDF0FD;}
.d2-4059264185 .fill-AB5{fill:#F7F8FE;}
.d2-4059264185 .stroke-N1{stroke:#0A0F25;}
.d2-4059264185 .stroke-N2{stroke:#676C7E;}
.d2-4059264185 .stroke-N3{stroke:#9499AB;}
.d2-4059264185 .stroke-N4{stroke:#CFD2DD;}
.d2-4059264185 .stroke-N5{stroke:#DEE1EB;}
.d2-4059264185 .stroke-N6{stroke:#EEF1F8;}
.d2-4059264185 .stroke-N7{stroke:#FFFFFF;}
.d2-4059264185 .stroke-B1{stroke:#0D32B2;}
.d2-4059264185 .stroke-B2{stroke:#0D32B2;}
.d2-4059264185 .stroke-B3{stroke:#E3E9FD;}
.d2-4059264185 .stroke-B4{stroke:#E3E9FD;}
.d2-4059264185 .stroke-B5{stroke:#EDF0FD;}
.d2-4059264185 .stroke-B6{stroke:#F7F8FE;}
.d2-4059264185 .stroke-AA2{stroke:#4A6FF3;}
.d2-4059264185 .stroke-AA4{stroke:#EDF0FD;}
.d2-4059264185 .stroke-AA5{stroke:#F7F8FE;}
.d2-4059264185 .stroke-AB4{stroke:#EDF0FD;}
.d2-4059264185 .stroke-AB5{stroke:#F7F8FE;}
.d2-4059264185 .background-color-N1{background-color:#0A0F25;}
.d2-4059264185 .background-color-N2{background-color:#676C7E;}
.d2-4059264185 .background-color-N3{background-color:#9499AB;}
.d2-4059264185 .background-color-N4{background-color:#CFD2DD;}
.d2-4059264185 .background-color-N5{background-color:#DEE1EB;}
.d2-4059264185 .background-color-N6{background-color:#EEF1F8;}
.d2-4059264185 .background-color-N7{background-color:#FFFFFF;}
.d2-4059264185 .background-color-B1{background-color:#0D32B2;}
.d2-4059264185 .background-color-B2{background-color:#0D32B2;}
.d2-4059264185 .background-color-B3{background-color:#E3E9FD;}
.d2-4059264185 .background-color-B4{background-color:#E3E9FD;}
.d2-4059264185 .background-color-B5{background-color:#EDF0FD;}
.d2-4059264185 .background-color-B6{background-color:#F7F8FE;}
.d2-4059264185 .background-color-AA2{background-color:#4A6FF3;}
.d2-4059264185 .background-color-AA4{background-color:#EDF0FD;}
.d2-4059264185 .background-color-AA5{background-color:#F7F8FE;}
.d2-4059264185 .background-color-AB4{background-color:#EDF0FD;}
.d2-4059264185 .background-color-AB5{background-color:#F7F8FE;}
.d2-4059264185 .color-N1{color:#0A0F25;}
.d2-4059264185 .color-N2{color:#676C7E;}
.d2-4059264185 .color-N3{color:#9499AB;}
.d2-4059264185 .color-N4{color:#CFD2DD;}
.d2-4059264185 .color-N5{color:#DEE1EB;}
.d2-4059264185 .color-N6{color:#EEF1F8;}
.d2-4059264185 .color-N7{color:#FFFFFF;}
.d2-4059264185 .color-B1{color:#0D32B2;}
.d2-4059264185 .color-B2{color:#0D32B2;}
.d2-4059264185 .color-B3{color:#E3E9FD;}
.d2-4059264185 .color-B4{color:#E3E9FD;}
.d2-4059264185 .color-B5{color:#EDF0FD;}
.d2-4059264185 .color-B6{color:#F7F8FE;}
.d2-4059264185 .color-AA2{color:#4A6FF3;}
.d2-4059264185 .color-AA4{color:#EDF0FD;}
.d2-4059264185 .color-AA5{color:#F7F8FE;}
.d2-4059264185 .color-AB4{color:#EDF0FD;}
.d2-4059264185 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="container1"><g class="shape" ><rect x="12.000000" y="12.000000" width="841.000000" height="498.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="432.500000" y="45.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">container1</text></g><g id="container1.container2"><g class="shape" ><rect x="62.000000" y="62.000000" width="741.000000" height="398.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="432.500000" y="91.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">container2</text></g><g id="container1.container2.container3"><g class="shape" ><rect x="112.000000" y="112.000000" width="641.000000" height="298.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="432.500000" y="137.000000" class="text fill-N1" style="text-anchor:middle;font-size:20px">container3</text></g><g id="container1.container2.container3.first"><g class="shape" ><rect x="172.000000" y="184.000000" width="180.000000" height="166.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="262.000000" y="174.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">first</text></g><g id="container1.container2.container3.second"><g class="shape" ><rect x="392.000000" y="184.000000" width="180.000000" height="166.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="482.000000" y="174.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">second</text></g><g id="container1.container2.container3.third"><g class="shape" ><rect x="612.000000" y="184.000000" width="81.000000" height="166.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="652.500000" y="174.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">third</text></g><g id="container1.container2.container3.first.child"><g class="shape" ><rect x="222.000000" y="234.000000" width="80.000000" height="66.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="262.000000" y="321.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">child</text></g><g id="container1.container2.container3.second.child"><g class="shape" ><rect x="442.000000" y="234.000000" width="80.000000" height="66.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="482.000000" y="321.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">child</text></g><mask id="d2-4059264185" maskUnits="userSpaceOnUse" x="11" y="11" width="843" height="500">
<rect x="11" y="11" width="843" height="500" fill="white"></rect>
.d2-2885429201 .fill-N1{fill:#0A0F25;}
.d2-2885429201 .fill-N2{fill:#676C7E;}
.d2-2885429201 .fill-N3{fill:#9499AB;}
.d2-2885429201 .fill-N4{fill:#CFD2DD;}
.d2-2885429201 .fill-N5{fill:#DEE1EB;}
.d2-2885429201 .fill-N6{fill:#EEF1F8;}
.d2-2885429201 .fill-N7{fill:#FFFFFF;}
.d2-2885429201 .fill-B1{fill:#0D32B2;}
.d2-2885429201 .fill-B2{fill:#0D32B2;}
.d2-2885429201 .fill-B3{fill:#E3E9FD;}
.d2-2885429201 .fill-B4{fill:#E3E9FD;}
.d2-2885429201 .fill-B5{fill:#EDF0FD;}
.d2-2885429201 .fill-B6{fill:#F7F8FE;}
.d2-2885429201 .fill-AA2{fill:#4A6FF3;}
.d2-2885429201 .fill-AA4{fill:#EDF0FD;}
.d2-2885429201 .fill-AA5{fill:#F7F8FE;}
.d2-2885429201 .fill-AB4{fill:#EDF0FD;}
.d2-2885429201 .fill-AB5{fill:#F7F8FE;}
.d2-2885429201 .stroke-N1{stroke:#0A0F25;}
.d2-2885429201 .stroke-N2{stroke:#676C7E;}
.d2-2885429201 .stroke-N3{stroke:#9499AB;}
.d2-2885429201 .stroke-N4{stroke:#CFD2DD;}
.d2-2885429201 .stroke-N5{stroke:#DEE1EB;}
.d2-2885429201 .stroke-N6{stroke:#EEF1F8;}
.d2-2885429201 .stroke-N7{stroke:#FFFFFF;}
.d2-2885429201 .stroke-B1{stroke:#0D32B2;}
.d2-2885429201 .stroke-B2{stroke:#0D32B2;}
.d2-2885429201 .stroke-B3{stroke:#E3E9FD;}
.d2-2885429201 .stroke-B4{stroke:#E3E9FD;}
.d2-2885429201 .stroke-B5{stroke:#EDF0FD;}
.d2-2885429201 .stroke-B6{stroke:#F7F8FE;}
.d2-2885429201 .stroke-AA2{stroke:#4A6FF3;}
.d2-2885429201 .stroke-AA4{stroke:#EDF0FD;}
.d2-2885429201 .stroke-AA5{stroke:#F7F8FE;}
.d2-2885429201 .stroke-AB4{stroke:#EDF0FD;}
.d2-2885429201 .stroke-AB5{stroke:#F7F8FE;}
.d2-2885429201 .background-color-N1{background-color:#0A0F25;}
.d2-2885429201 .background-color-N2{background-color:#676C7E;}
.d2-2885429201 .background-color-N3{background-color:#9499AB;}
.d2-2885429201 .background-color-N4{background-color:#CFD2DD;}
.d2-2885429201 .background-color-N5{background-color:#DEE1EB;}
.d2-2885429201 .background-color-N6{background-color:#EEF1F8;}
.d2-2885429201 .background-color-N7{background-color:#FFFFFF;}
.d2-2885429201 .background-color-B1{background-color:#0D32B2;}
.d2-2885429201 .background-color-B2{background-color:#0D32B2;}
.d2-2885429201 .background-color-B3{background-color:#E3E9FD;}
.d2-2885429201 .background-color-B4{background-color:#E3E9FD;}
.d2-2885429201 .background-color-B5{background-color:#EDF0FD;}
.d2-2885429201 .background-color-B6{background-color:#F7F8FE;}
.d2-2885429201 .background-color-AA2{background-color:#4A6FF3;}
.d2-2885429201 .background-color-AA4{background-color:#EDF0FD;}
.d2-2885429201 .background-color-AA5{background-color:#F7F8FE;}
.d2-2885429201 .background-color-AB4{background-color:#EDF0FD;}
.d2-2885429201 .background-color-AB5{background-color:#F7F8FE;}
.d2-2885429201 .color-N1{color:#0A0F25;}
.d2-2885429201 .color-N2{color:#676C7E;}
.d2-2885429201 .color-N3{color:#9499AB;}
.d2-2885429201 .color-N4{color:#CFD2DD;}
.d2-2885429201 .color-N5{color:#DEE1EB;}
.d2-2885429201 .color-N6{color:#EEF1F8;}
.d2-2885429201 .color-N7{color:#FFFFFF;}
.d2-2885429201 .color-B1{color:#0D32B2;}
.d2-2885429201 .color-B2{color:#0D32B2;}
.d2-2885429201 .color-B3{color:#E3E9FD;}
.d2-2885429201 .color-B4{color:#E3E9FD;}
.d2-2885429201 .color-B5{color:#EDF0FD;}
.d2-2885429201 .color-B6{color:#F7F8FE;}
.d2-2885429201 .color-AA2{color:#4A6FF3;}
.d2-2885429201 .color-AA4{color:#EDF0FD;}
.d2-2885429201 .color-AA5{color:#F7F8FE;}
.d2-2885429201 .color-AB4{color:#EDF0FD;}
.d2-2885429201 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="container1"><g class="shape" ><rect x="12.000000" y="12.000000" width="841.000000" height="512.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="432.500000" y="45.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">container1</text></g><g id="container1.container2"><g class="shape" ><rect x="62.000000" y="62.000000" width="741.000000" height="412.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="432.500000" y="91.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">container2</text></g><g id="container1.container2.container3"><g class="shape" ><rect x="112.000000" y="112.000000" width="641.000000" height="312.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="432.500000" y="137.000000" class="text fill-N1" style="text-anchor:middle;font-size:20px">container3</text></g><g id="container1.container2.container3.first"><g class="shape" ><rect x="172.000000" y="198.000000" width="180.000000" height="166.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="262.000000" y="188.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">first</text></g><g id="container1.container2.container3.second"><g class="shape" ><rect x="392.000000" y="198.000000" width="180.000000" height="166.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="482.000000" y="188.000000" class="text fill-N1" style="text-anchor:middle;font-size:16px">second</text></g><g id="container1.container2.container3.third"><g class="shape" ><rect x="612.000000" y="198.000000" width="81.000000" height="166.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="652.500000" y="188.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">third</text></g><g id="container1.container2.container3.first.child"><g class="shape" ><rect x="222.000000" y="248.000000" width="80.000000" height="66.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="262.000000" y="335.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">child</text></g><g id="container1.container2.container3.second.child"><g class="shape" ><rect x="442.000000" y="248.000000" width="80.000000" height="66.000000" class=" stroke-B1 fill-N7" style="stroke-width:2;" /></g><text x="482.000000" y="335.000000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">child</text></g><mask id="d2-2885429201" maskUnits="userSpaceOnUse" x="11" y="11" width="843" height="514">
<rect x="11" y="11" width="843" height="514" fill="white"></rect>
<rect x="370.000000" y="17.000000" width="125" height="36" fill="rgba(0,0,0,0.75)"></rect>
<rect x="379.000000" y="67.000000" width="107" height="31" fill="rgba(0,0,0,0.75)"></rect>
<rect x="387.500000" y="117.000000" width="90" height="26" fill="rgba(0,0,0,0.75)"></rect>
<rect x="248.500000" y="158.000000" width="27" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="458.000000" y="158.000000" width="48" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="634.500000" y="158.000000" width="36" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="244.500000" y="305.000000" width="35" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="464.500000" y="305.000000" width="35" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="248.500000" y="172.000000" width="27" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="458.000000" y="172.000000" width="48" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="634.500000" y="172.000000" width="36" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="244.500000" y="319.000000" width="35" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="464.500000" y="319.000000" width="35" height="21" fill="rgba(0,0,0,0.75)"></rect>
</mask></svg></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

66
e2etests/testdata/stable/grid_icon/dagre/board.exp.json generated vendored
View file

@ -14,7 +14,7 @@
"y": 0
},
"width": 364,
"height": 417,
"height": 421,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
@ -52,10 +52,10 @@
"type": "rectangle",
"pos": {
"x": 60,
"y": 125
"y": 60
},
"width": 53,
"height": 126,
"height": 195,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
@ -93,7 +93,7 @@
"type": "rectangle",
"pos": {
"x": 153,
"y": 125
"y": 129
},
"width": 151,
"height": 126,
@ -146,7 +146,7 @@
"type": "rectangle",
"pos": {
"x": 183,
"y": 155
"y": 159
},
"width": 91,
"height": 66,
@ -187,7 +187,7 @@
"type": "rectangle",
"pos": {
"x": 60,
"y": 291
"y": 295
},
"width": 53,
"height": 66,
@ -228,7 +228,7 @@
"type": "rectangle",
"pos": {
"x": 153,
"y": 291
"y": 295
},
"width": 151,
"height": 66,
@ -272,7 +272,7 @@
],
"pos": {
"x": 424,
"y": 56
"y": 58
},
"width": 278,
"height": 306,
@ -325,7 +325,7 @@
"type": "rectangle",
"pos": {
"x": 489,
"y": 130
"y": 132
},
"width": 53,
"height": 66,
@ -366,7 +366,7 @@
"type": "rectangle",
"pos": {
"x": 582,
"y": 130
"y": 132
},
"width": 54,
"height": 66,
@ -407,7 +407,7 @@
"type": "rectangle",
"pos": {
"x": 489,
"y": 236
"y": 238
},
"width": 53,
"height": 66,
@ -448,7 +448,7 @@
"type": "rectangle",
"pos": {
"x": 582,
"y": 236
"y": 238
},
"width": 54,
"height": 66,
@ -492,10 +492,10 @@
],
"pos": {
"x": 762,
"y": 3
"y": 10
},
"width": 433,
"height": 412,
"height": 402,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
@ -545,10 +545,10 @@
"type": "rectangle",
"pos": {
"x": 856,
"y": 123
"y": 84
},
"width": 53,
"height": 126,
"height": 162,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
@ -586,7 +586,7 @@
"type": "rectangle",
"pos": {
"x": 949,
"y": 123
"y": 120
},
"width": 151,
"height": 126,
@ -627,7 +627,7 @@
"type": "rectangle",
"pos": {
"x": 979,
"y": 153
"y": 150
},
"width": 91,
"height": 66,
@ -668,7 +668,7 @@
"type": "rectangle",
"pos": {
"x": 856,
"y": 289
"y": 286
},
"width": 53,
"height": 66,
@ -709,7 +709,7 @@
"type": "rectangle",
"pos": {
"x": 949,
"y": 289
"y": 286
},
"width": 151,
"height": 66,
@ -753,10 +753,10 @@
],
"pos": {
"x": 1255,
"y": 23
"y": 0
},
"width": 364,
"height": 371,
"height": 421,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
@ -794,10 +794,10 @@
"type": "rectangle",
"pos": {
"x": 1315,
"y": 102
"y": 60
},
"width": 53,
"height": 126,
"height": 195,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
@ -835,7 +835,7 @@
"type": "rectangle",
"pos": {
"x": 1408,
"y": 102
"y": 129
},
"width": 151,
"height": 126,
@ -888,7 +888,7 @@
"type": "rectangle",
"pos": {
"x": 1438,
"y": 132
"y": 159
},
"width": 91,
"height": 66,
@ -929,7 +929,7 @@
"type": "rectangle",
"pos": {
"x": 1315,
"y": 268
"y": 295
},
"width": 53,
"height": 66,
@ -970,7 +970,7 @@
"type": "rectangle",
"pos": {
"x": 1408,
"y": 268
"y": 295
},
"width": 151,
"height": 66,
@ -1014,7 +1014,7 @@
],
"pos": {
"x": 1679,
"y": 56
"y": 58
},
"width": 267,
"height": 306,
@ -1067,7 +1067,7 @@
"type": "rectangle",
"pos": {
"x": 1739,
"y": 130
"y": 132
},
"width": 53,
"height": 66,
@ -1108,7 +1108,7 @@
"type": "rectangle",
"pos": {
"x": 1832,
"y": 130
"y": 132
},
"width": 54,
"height": 66,
@ -1149,7 +1149,7 @@
"type": "rectangle",
"pos": {
"x": 1739,
"y": 236
"y": 238
},
"width": 53,
"height": 66,
@ -1190,7 +1190,7 @@
"type": "rectangle",
"pos": {
"x": 1832,
"y": 236
"y": 238
},
"width": 54,
"height": 66,

210
e2etests/testdata/stable/grid_icon/dagre/sketch.exp.svg vendored
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 24 KiB

44
e2etests/testdata/stable/grid_nested/dagre/board.exp.json generated vendored
View file

@ -11,10 +11,10 @@
],
"pos": {
"x": 0,
"y": 99
"y": 97
},
"width": 364,
"height": 384,
"height": 388,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
@ -52,10 +52,10 @@
"type": "rectangle",
"pos": {
"x": 60,
"y": 191
"y": 157
},
"width": 53,
"height": 126,
"height": 162,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
@ -93,7 +93,7 @@
"type": "rectangle",
"pos": {
"x": 153,
"y": 191
"y": 193
},
"width": 151,
"height": 126,
@ -134,7 +134,7 @@
"type": "rectangle",
"pos": {
"x": 183,
"y": 221
"y": 223
},
"width": 91,
"height": 66,
@ -175,7 +175,7 @@
"type": "rectangle",
"pos": {
"x": 60,
"y": 357
"y": 359
},
"width": 53,
"height": 66,
@ -216,7 +216,7 @@
"type": "rectangle",
"pos": {
"x": 153,
"y": 357
"y": 359
},
"width": 151,
"height": 66,
@ -260,10 +260,10 @@
],
"pos": {
"x": 424,
"y": 5
"y": 3
},
"width": 692,
"height": 572,
"height": 576,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
@ -301,10 +301,10 @@
"type": "rectangle",
"pos": {
"x": 484,
"y": 97
"y": 63
},
"width": 53,
"height": 314,
"height": 350,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
@ -342,7 +342,7 @@
"type": "rectangle",
"pos": {
"x": 577,
"y": 97
"y": 99
},
"width": 479,
"height": 314,
@ -383,7 +383,7 @@
"type": "rectangle",
"pos": {
"x": 597,
"y": 133
"y": 135
},
"width": 439,
"height": 248,
@ -424,7 +424,7 @@
"type": "rectangle",
"pos": {
"x": 617,
"y": 164
"y": 166
},
"width": 186,
"height": 187,
@ -465,7 +465,7 @@
"type": "rectangle",
"pos": {
"x": 647,
"y": 195
"y": 197
},
"width": 126,
"height": 126,
@ -506,7 +506,7 @@
"type": "rectangle",
"pos": {
"x": 677,
"y": 225
"y": 227
},
"width": 66,
"height": 66,
@ -547,7 +547,7 @@
"type": "rectangle",
"pos": {
"x": 823,
"y": 164
"y": 166
},
"width": 193,
"height": 187,
@ -588,7 +588,7 @@
"type": "rectangle",
"pos": {
"x": 853,
"y": 195
"y": 197
},
"width": 133,
"height": 126,
@ -629,7 +629,7 @@
"type": "rectangle",
"pos": {
"x": 883,
"y": 225
"y": 227
},
"width": 73,
"height": 66,
@ -670,7 +670,7 @@
"type": "rectangle",
"pos": {
"x": 484,
"y": 451
"y": 453
},
"width": 53,
"height": 66,
@ -711,7 +711,7 @@
"type": "rectangle",
"pos": {
"x": 577,
"y": 451
"y": 453
},
"width": 479,
"height": 66,

194
e2etests/testdata/stable/grid_nested/dagre/sketch.exp.svg vendored
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 33 KiB

After

Width:  |  Height:  |  Size: 33 KiB

830
e2etests/testdata/stable/grid_outside_labels/dagre/board.exp.json generated vendored Normal file
View file

@ -0,0 +1,830 @@
{
"name": "",
"isFolderOnly": false,
"fontFamily": "SourceSansPro",
"shapes": [
{
"id": "container",
"type": "rectangle",
"pos": {
"x": 0,
"y": 0
},
"width": 1213,
"height": 524,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B4",
"stroke": "B1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "___________________________________container____________________________________",
"fontSize": 28,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 1107,
"labelHeight": 36,
"labelPosition": "INSIDE_TOP_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "container.amscd plugin",
"type": "rectangle",
"pos": {
"x": 20,
"y": 82
},
"width": 345,
"height": 132,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B5",
"stroke": "B1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "amscd plugin",
"fontSize": 24,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 133,
"labelHeight": 31,
"labelPosition": "OUTSIDE_TOP_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "container.amscd plugin.ex",
"type": "text",
"pos": {
"x": 50,
"y": 112
},
"width": 285,
"height": 72,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "transparent",
"stroke": "N1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "\\\\begin{CD} B @>{\\\\text{very long label}}>> C S^{{\\\\mathcal{W}}_\\\\Lambda}\\\\otimes T @>j>> T\\\\\\\\ @VVV V \\\\end{CD}",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "latex",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 285,
"labelHeight": 72,
"zIndex": 0,
"level": 3
},
{
"id": "container.braket plugin",
"type": "rectangle",
"pos": {
"x": 20,
"y": 285
},
"width": 330,
"height": 79,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B5",
"stroke": "B1",
"shadow": false,
"3d": true,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "braket plugin",
"fontSize": 24,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 132,
"labelHeight": 31,
"labelPosition": "OUTSIDE_TOP_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "container.braket plugin.ex",
"type": "text",
"pos": {
"x": 50,
"y": 315
},
"width": 37,
"height": 19,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "transparent",
"stroke": "N1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "\\\\bra{a}\\\\ket{b}",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "latex",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 37,
"labelHeight": 19,
"zIndex": 0,
"level": 3
},
{
"id": "container.cancel plugin",
"type": "rectangle",
"pos": {
"x": 20,
"y": 420
},
"width": 345,
"height": 84,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B5",
"stroke": "B1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "cancel plugin",
"fontSize": 24,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 132,
"labelHeight": 31,
"labelPosition": "OUTSIDE_TOP_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "container.cancel plugin.ex",
"type": "text",
"pos": {
"x": 50,
"y": 450
},
"width": 104,
"height": 24,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "transparent",
"stroke": "N1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "\\\\cancel{Culture + 5}",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "latex",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 104,
"labelHeight": 24,
"zIndex": 0,
"level": 3
},
{
"id": "container.color plugin",
"type": "rectangle",
"pos": {
"x": 385,
"y": 82
},
"width": 255,
"height": 103,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B5",
"stroke": "B1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": {
"Scheme": "https",
"Opaque": "",
"User": null,
"Host": "icons.terrastruct.com",
"Path": "/essentials/profits.svg",
"RawPath": "",
"OmitHost": false,
"ForceQuery": false,
"RawQuery": "",
"Fragment": "",
"RawFragment": ""
},
"iconPosition": "OUTSIDE_RIGHT_MIDDLE",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "color plugin",
"fontSize": 24,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 118,
"labelHeight": 31,
"labelPosition": "OUTSIDE_TOP_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "container.color plugin.ex",
"type": "text",
"pos": {
"x": 415,
"y": 112
},
"width": 69,
"height": 16,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "transparent",
"stroke": "N1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "\\\\textcolor{red}{y} = \\\\textcolor{green}{\\\\sin} x",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "latex",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 69,
"labelHeight": 16,
"zIndex": 0,
"level": 3
},
{
"id": "container.gensymb plugin",
"type": "rectangle",
"pos": {
"x": 385,
"y": 241
},
"width": 324,
"height": 103,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B5",
"stroke": "B1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "gensymb plugin",
"fontSize": 24,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 158,
"labelHeight": 31,
"labelPosition": "OUTSIDE_TOP_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "container.gensymb plugin.ex",
"type": "text",
"pos": {
"x": 415,
"y": 271
},
"width": 96,
"height": 18,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "transparent",
"stroke": "N1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "\\\\lambda = 10.6\\\\,\\\\micro\\\\mathrm{m}",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "latex",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 96,
"labelHeight": 18,
"zIndex": 0,
"level": 3
},
{
"id": "container.mhchem plugin",
"type": "rectangle",
"pos": {
"x": 385,
"y": 410
},
"width": 314,
"height": 93,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B5",
"stroke": "B1",
"shadow": false,
"3d": false,
"multiple": true,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "mhchem plugin",
"fontSize": 24,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 156,
"labelHeight": 31,
"labelPosition": "OUTSIDE_TOP_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "container.mhchem plugin.ex",
"type": "text",
"pos": {
"x": 415,
"y": 440
},
"width": 254,
"height": 18,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "transparent",
"stroke": "N1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "\\ce{SO4^2- + Ba^2+ -> BaSO4 v}",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "latex",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 254,
"labelHeight": 18,
"zIndex": 0,
"level": 3
},
{
"id": "container.physics plugin",
"type": "rectangle",
"pos": {
"x": 729,
"y": 82
},
"width": 464,
"height": 95,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B5",
"stroke": "B1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "physics plugin",
"fontSize": 24,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 141,
"labelHeight": 31,
"labelPosition": "OUTSIDE_TOP_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "container.physics plugin.ex",
"type": "text",
"pos": {
"x": 759,
"y": 112
},
"width": 128,
"height": 19,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "transparent",
"stroke": "N1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "\\\\var{F[g(x)]}\n\\\\dd(\\\\cos\\\\theta)",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "latex",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 128,
"labelHeight": 19,
"zIndex": 0,
"level": 3
},
{
"id": "container.multilines",
"type": "rectangle",
"pos": {
"x": 729,
"y": 233
},
"width": 464,
"height": 112,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B5",
"stroke": "B1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "multilines",
"fontSize": 24,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 100,
"labelHeight": 31,
"labelPosition": "OUTSIDE_TOP_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "container.multilines.ex",
"type": "text",
"pos": {
"x": 759,
"y": 263
},
"width": 404,
"height": 52,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "transparent",
"stroke": "N1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "\\\\displaylines{x = a + b \\\\\\\\ y = b + c}\n\\\\sum_{k=1}^{n} h_{k} \\\\int_{0}^{1} \\\\bigl(\\\\partial_{k} f(x_{k-1}+t h_{k} e_{k}) -\\\\partial_{k} f(a)\\\\bigr) \\\\,dt",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "latex",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 404,
"labelHeight": 52,
"zIndex": 0,
"level": 3
},
{
"id": "container.asm",
"type": "rectangle",
"pos": {
"x": 729,
"y": 401
},
"width": 464,
"height": 102,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B5",
"stroke": "B1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "asm",
"fontSize": 24,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 41,
"labelHeight": 31,
"labelPosition": "OUTSIDE_TOP_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "container.asm.ex",
"type": "text",
"pos": {
"x": 759,
"y": 431
},
"width": 62,
"height": 32,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "transparent",
"stroke": "N1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "\\\\min_{ \\\\mathclap{\\\\substack{ x \\\\in \\\\mathbb{R}^n \\\\ x \\\\geq 0 \\\\ Ax \\\\leq b }}} c^T x",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "latex",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 62,
"labelHeight": 32,
"zIndex": 0,
"level": 3
}
],
"connections": [],
"root": {
"id": "",
"type": "",
"pos": {
"x": 0,
"y": 0
},
"width": 0,
"height": 0,
"opacity": 0,
"strokeDash": 0,
"strokeWidth": 0,
"borderRadius": 0,
"fill": "N7",
"stroke": "",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"zIndex": 0,
"level": 0
}
}

851
e2etests/testdata/stable/grid_outside_labels/dagre/sketch.exp.svg vendored Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 109 KiB

830
e2etests/testdata/stable/grid_outside_labels/elk/board.exp.json generated vendored Normal file
View file

@ -0,0 +1,830 @@
{
"name": "",
"isFolderOnly": false,
"fontFamily": "SourceSansPro",
"shapes": [
{
"id": "container",
"type": "rectangle",
"pos": {
"x": 12,
"y": 12
},
"width": 1333,
"height": 536,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B4",
"stroke": "B1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "___________________________________container____________________________________",
"fontSize": 28,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 1107,
"labelHeight": 36,
"labelPosition": "INSIDE_TOP_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "container.amscd plugin",
"type": "rectangle",
"pos": {
"x": 32,
"y": 58
},
"width": 385,
"height": 172,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B5",
"stroke": "B1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "amscd plugin",
"fontSize": 24,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 133,
"labelHeight": 31,
"labelPosition": "INSIDE_TOP_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "container.amscd plugin.ex",
"type": "text",
"pos": {
"x": 82,
"y": 108
},
"width": 285,
"height": 72,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "transparent",
"stroke": "N1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "\\\\begin{CD} B @>{\\\\text{very long label}}>> C S^{{\\\\mathcal{W}}_\\\\Lambda}\\\\otimes T @>j>> T\\\\\\\\ @VVV V \\\\end{CD}",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "latex",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 285,
"labelHeight": 72,
"zIndex": 0,
"level": 3
},
{
"id": "container.braket plugin",
"type": "rectangle",
"pos": {
"x": 32,
"y": 265
},
"width": 370,
"height": 119,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B5",
"stroke": "B1",
"shadow": false,
"3d": true,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "braket plugin",
"fontSize": 24,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 132,
"labelHeight": 31,
"labelPosition": "INSIDE_TOP_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "container.braket plugin.ex",
"type": "text",
"pos": {
"x": 109,
"y": 315
},
"width": 37,
"height": 19,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "transparent",
"stroke": "N1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "\\\\bra{a}\\\\ket{b}",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "latex",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 37,
"labelHeight": 19,
"zIndex": 0,
"level": 3
},
{
"id": "container.cancel plugin",
"type": "rectangle",
"pos": {
"x": 32,
"y": 404
},
"width": 385,
"height": 124,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B5",
"stroke": "B1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "cancel plugin",
"fontSize": 24,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 132,
"labelHeight": 31,
"labelPosition": "INSIDE_TOP_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "container.cancel plugin.ex",
"type": "text",
"pos": {
"x": 82,
"y": 454
},
"width": 104,
"height": 24,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "transparent",
"stroke": "N1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "\\\\cancel{Culture + 5}",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "latex",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 104,
"labelHeight": 24,
"zIndex": 0,
"level": 3
},
{
"id": "container.color plugin",
"type": "rectangle",
"pos": {
"x": 437,
"y": 58
},
"width": 295,
"height": 148,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B5",
"stroke": "B1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": {
"Scheme": "https",
"Opaque": "",
"User": null,
"Host": "icons.terrastruct.com",
"Path": "/essentials/profits.svg",
"RawPath": "",
"OmitHost": false,
"ForceQuery": false,
"RawQuery": "",
"Fragment": "",
"RawFragment": ""
},
"iconPosition": "OUTSIDE_RIGHT_MIDDLE",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "color plugin",
"fontSize": 24,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 118,
"labelHeight": 31,
"labelPosition": "INSIDE_TOP_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "container.color plugin.ex",
"type": "text",
"pos": {
"x": 502,
"y": 124
},
"width": 69,
"height": 16,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "transparent",
"stroke": "N1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "\\\\textcolor{red}{y} = \\\\textcolor{green}{\\\\sin} x",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "latex",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 69,
"labelHeight": 16,
"zIndex": 0,
"level": 3
},
{
"id": "container.gensymb plugin",
"type": "rectangle",
"pos": {
"x": 437,
"y": 226
},
"width": 364,
"height": 139,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B5",
"stroke": "B1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "gensymb plugin",
"fontSize": 24,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 158,
"labelHeight": 31,
"labelPosition": "INSIDE_TOP_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "container.gensymb plugin.ex",
"type": "text",
"pos": {
"x": 490,
"y": 276
},
"width": 96,
"height": 18,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "transparent",
"stroke": "N1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "\\\\lambda = 10.6\\\\,\\\\micro\\\\mathrm{m}",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "latex",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 96,
"labelHeight": 18,
"zIndex": 0,
"level": 3
},
{
"id": "container.mhchem plugin",
"type": "rectangle",
"pos": {
"x": 437,
"y": 395
},
"width": 354,
"height": 132,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B5",
"stroke": "B1",
"shadow": false,
"3d": false,
"multiple": true,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "mhchem plugin",
"fontSize": 24,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 156,
"labelHeight": 31,
"labelPosition": "INSIDE_TOP_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "container.mhchem plugin.ex",
"type": "text",
"pos": {
"x": 487,
"y": 445
},
"width": 254,
"height": 18,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "transparent",
"stroke": "N1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "\\ce{SO4^2- + Ba^2+ -> BaSO4 v}",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "latex",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 254,
"labelHeight": 18,
"zIndex": 0,
"level": 3
},
{
"id": "container.physics plugin",
"type": "rectangle",
"pos": {
"x": 821,
"y": 58
},
"width": 504,
"height": 135,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B5",
"stroke": "B1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "physics plugin",
"fontSize": 24,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 141,
"labelHeight": 31,
"labelPosition": "INSIDE_TOP_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "container.physics plugin.ex",
"type": "text",
"pos": {
"x": 871,
"y": 108
},
"width": 128,
"height": 19,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "transparent",
"stroke": "N1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "\\\\var{F[g(x)]}\n\\\\dd(\\\\cos\\\\theta)",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "latex",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 128,
"labelHeight": 19,
"zIndex": 0,
"level": 3
},
{
"id": "container.multilines",
"type": "rectangle",
"pos": {
"x": 821,
"y": 213
},
"width": 504,
"height": 152,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B5",
"stroke": "B1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "multilines",
"fontSize": 24,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 100,
"labelHeight": 31,
"labelPosition": "INSIDE_TOP_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "container.multilines.ex",
"type": "text",
"pos": {
"x": 871,
"y": 263
},
"width": 404,
"height": 52,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "transparent",
"stroke": "N1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "\\\\displaylines{x = a + b \\\\\\\\ y = b + c}\n\\\\sum_{k=1}^{n} h_{k} \\\\int_{0}^{1} \\\\bigl(\\\\partial_{k} f(x_{k-1}+t h_{k} e_{k}) -\\\\partial_{k} f(a)\\\\bigr) \\\\,dt",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "latex",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 404,
"labelHeight": 52,
"zIndex": 0,
"level": 3
},
{
"id": "container.asm",
"type": "rectangle",
"pos": {
"x": 821,
"y": 385
},
"width": 504,
"height": 142,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B5",
"stroke": "B1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "asm",
"fontSize": 24,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 41,
"labelHeight": 31,
"labelPosition": "INSIDE_TOP_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "container.asm.ex",
"type": "text",
"pos": {
"x": 871,
"y": 435
},
"width": 62,
"height": 32,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "transparent",
"stroke": "N1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "\\\\min_{ \\\\mathclap{\\\\substack{ x \\\\in \\\\mathbb{R}^n \\\\ x \\\\geq 0 \\\\ Ax \\\\leq b }}} c^T x",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "latex",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 62,
"labelHeight": 32,
"zIndex": 0,
"level": 3
}
],
"connections": [],
"root": {
"id": "",
"type": "",
"pos": {
"x": 0,
"y": 0
},
"width": 0,
"height": 0,
"opacity": 0,
"strokeDash": 0,
"strokeWidth": 0,
"borderRadius": 0,
"fill": "N7",
"stroke": "",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"zIndex": 0,
"level": 0
}
}

851
e2etests/testdata/stable/grid_outside_labels/elk/sketch.exp.svg vendored Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 109 KiB