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

use ports in ELK plugin

Browse source 
fixes #1429
This commit is contained in:
Michał Wieluński 2023-10-22 13:44:48 +02:00
parent 0a7e6c83a3
commit 28c04bbcb2
No known key found for this signature in database
18 changed files with 1914 additions and 780 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

195
d2layouts/d2elklayout/layout.go
View file

@ -41,10 +41,38 @@ type ELKNode struct {
Width float64 `json:"width"`
Height float64 `json:"height"`
Children []*ELKNode `json:"children,omitempty"`
Ports []*ELKPort `json:"ports,omitempty"`
Labels []*ELKLabel `json:"labels,omitempty"`
LayoutOptions *elkOpts `json:"layoutOptions,omitempty"`
}
type PortSide string
const (
South PortSide = "SOUTH"
North PortSide = "NORTH"
East PortSide = "EAST"
West PortSide = "WEST"
)
type Direction string
const (
Down Direction = "DOWN"
Up Direction = "UP"
Right Direction = "RIGHT"
Left Direction = "LEFT"
)
type ELKPort struct {
ID string `json:"id"`
X float64 `json:"x"`
Y float64 `json:"y"`
Width float64 `json:"width"`
Height float64 `json:"height"`
LayoutOptions *elkOpts `json:"layoutOptions,omitempty"`
}
type ELKLabel struct {
Text string `json:"text"`
X float64 `json:"x"`
@ -101,16 +129,16 @@ var port_spacing = 40.
var edge_node_spacing = 40
type elkOpts struct {
EdgeNode int `json:"elk.spacing.edgeNode,omitempty"`
FixedAlignment string `json:"elk.layered.nodePlacement.bk.fixedAlignment,omitempty"`
Thoroughness int `json:"elk.layered.thoroughness,omitempty"`
EdgeEdgeBetweenLayersSpacing int `json:"elk.layered.spacing.edgeEdgeBetweenLayers,omitempty"`
Direction string `json:"elk.direction"`
HierarchyHandling string `json:"elk.hierarchyHandling,omitempty"`
InlineEdgeLabels bool `json:"elk.edgeLabels.inline,omitempty"`
ForceNodeModelOrder bool `json:"elk.layered.crossingMinimization.forceNodeModelOrder,omitempty"`
ConsiderModelOrder string `json:"elk.layered.considerModelOrder.strategy,omitempty"`
CycleBreakingStrategy string `json:"elk.layered.cycleBreaking.strategy,omitempty"`
EdgeNode int `json:"elk.spacing.edgeNode,omitempty"`
FixedAlignment string `json:"elk.layered.nodePlacement.bk.fixedAlignment,omitempty"`
Thoroughness int `json:"elk.layered.thoroughness,omitempty"`
EdgeEdgeBetweenLayersSpacing int `json:"elk.layered.spacing.edgeEdgeBetweenLayers,omitempty"`
Direction Direction `json:"elk.direction"`
HierarchyHandling string `json:"elk.hierarchyHandling,omitempty"`
InlineEdgeLabels bool `json:"elk.edgeLabels.inline,omitempty"`
ForceNodeModelOrder bool `json:"elk.layered.crossingMinimization.forceNodeModelOrder,omitempty"`
ConsiderModelOrder string `json:"elk.layered.considerModelOrder.strategy,omitempty"`
CycleBreakingStrategy string `json:"elk.layered.cycleBreaking.strategy,omitempty"`
SelfLoopDistribution string `json:"elk.layered.edgeRouting.selfLoopDistribution,omitempty"`
@ -118,6 +146,9 @@ type elkOpts struct {
ContentAlignment string `json:"elk.contentAlignment,omitempty"`
NodeSizeMinimum string `json:"elk.nodeSize.minimum,omitempty"`
PortSide PortSide `json:"elk.port.side,omitempty"`
PortConstraints string `json:"elk.portConstraints,omitempty"`
ConfigurableOpts
}
@ -171,15 +202,15 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err
}
switch g.Root.Direction.Value {
case "down":
elkGraph.LayoutOptions.Direction = "DOWN"
elkGraph.LayoutOptions.Direction = Down
case "up":
elkGraph.LayoutOptions.Direction = "UP"
elkGraph.LayoutOptions.Direction = Up
case "right":
elkGraph.LayoutOptions.Direction = "RIGHT"
elkGraph.LayoutOptions.Direction = Right
case "left":
elkGraph.LayoutOptions.Direction = "LEFT"
elkGraph.LayoutOptions.Direction = Left
default:
elkGraph.LayoutOptions.Direction = "DOWN"
elkGraph.LayoutOptions.Direction = Down
}
// set label and icon positions for ELK
@ -257,9 +288,9 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err
}
switch elkGraph.LayoutOptions.Direction {
case "DOWN", "UP":
case Down, Up:
n.LayoutOptions.NodeSizeMinimum = fmt.Sprintf("(%d, %d)", int(math.Ceil(height)), int(math.Ceil(width)))
case "RIGHT", "LEFT":
case Right, Left:
n.LayoutOptions.NodeSizeMinimum = fmt.Sprintf("(%d, %d)", int(math.Ceil(width)), int(math.Ceil(height)))
}
} else {
@ -287,6 +318,33 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err
} else {
elkNodes[parent].Children = append(elkNodes[parent].Children, n)
}
if obj.SQLTable != nil {
n.LayoutOptions.PortConstraints = "FIXED_POS"
columns := obj.SQLTable.Columns
colHeight := n.Height / float64(len(columns)+1)
n.Ports = make([]*ELKPort, 0, len(columns)*2)
var srcSide, dstSide PortSide
switch elkGraph.LayoutOptions.Direction {
case Left:
srcSide, dstSide = West, East
default:
srcSide, dstSide = East, West
}
for i, col := range columns {
n.Ports = append(n.Ports, &ELKPort{
ID: srcPortID(obj, col.Name.Label),
Y: float64(i+1)*colHeight + colHeight/2,
LayoutOptions: &elkOpts{PortSide: srcSide},
})
n.Ports = append(n.Ports, &ELKPort{
ID: dstPortID(obj, col.Name.Label),
Y: float64(i+1)*colHeight + colHeight/2,
LayoutOptions: &elkOpts{PortSide: dstSide},
})
}
}
elkNodes[obj] = n
})
@ -325,11 +383,64 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err
}
}
for _, edge := range g.Edges {
var srcSide, dstSide PortSide
switch elkGraph.LayoutOptions.Direction {
case Up:
srcSide, dstSide = North, South
default:
srcSide, dstSide = South, North
}
ports := map[struct {
obj *d2graph.Object
side PortSide
}][]*ELKPort{}
for ei, edge := range g.Edges {
var src, dst string
switch {
case edge.SrcTableColumnIndex != nil:
src = srcPortID(edge.Src, edge.Src.SQLTable.Columns[*edge.SrcTableColumnIndex].Name.Label)
case edge.Src.SQLTable != nil:
p := &ELKPort{
ID: fmt.Sprintf("%s.%d", srcPortID(edge.Src, "__root__"), ei),
LayoutOptions: &elkOpts{PortSide: srcSide},
}
src = p.ID
elkNodes[edge.Src].Ports = append(elkNodes[edge.Src].Ports, p)
k := struct {
obj *d2graph.Object
side PortSide
}{edge.Src, srcSide}
ports[k] = append(ports[k], p)
default:
src = edge.Src.AbsID()
}
switch {
case edge.DstTableColumnIndex != nil:
dst = dstPortID(edge.Dst, edge.Dst.SQLTable.Columns[*edge.DstTableColumnIndex].Name.Label)
case edge.Dst.SQLTable != nil:
p := &ELKPort{
ID: fmt.Sprintf("%s.%d", dstPortID(edge.Dst, "__root__"), ei),
LayoutOptions: &elkOpts{PortSide: dstSide},
}
dst = p.ID
elkNodes[edge.Dst].Ports = append(elkNodes[edge.Dst].Ports, p)
k := struct {
obj *d2graph.Object
side PortSide
}{edge.Dst, dstSide}
ports[k] = append(ports[k], p)
default:
dst = edge.Dst.AbsID()
}
e := &ELKEdge{
ID: edge.AbsID(),
Sources: []string{edge.Src.AbsID()},
Targets: []string{edge.Dst.AbsID()},
Sources: []string{src},
Targets: []string{dst},
}
if edge.Label.Value != "" {
e.Labels = append(e.Labels, &ELKLabel{
@ -345,6 +456,14 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err
elkEdges[edge] = e
}
for k, ports := range ports {
width := elkNodes[k.obj].Width
spacing := width / float64(len(ports)+1)
for i, p := range ports {
p.X = float64(i+1) * spacing
}
}
raw, err := json.Marshal(elkGraph)
if err != nil {
return err
@ -507,6 +626,14 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err
return nil
}
func srcPortID(obj *d2graph.Object, column string) string {
return fmt.Sprintf("%s.%s.src", obj.AbsID(), column)
}
func dstPortID(obj *d2graph.Object, column string) string {
return fmt.Sprintf("%s.%s.dst", obj.AbsID(), column)
}
// deleteBends is a shim for ELK to delete unnecessary bends
// see https://github.com/terrastruct/d2/issues/1030
func deleteBends(g *d2graph.Graph) {
@ -525,30 +652,40 @@ func deleteBends(g *d2graph.Graph) {
var corner *geo.Point
var end *geo.Point
var columnIndex *int
if isSource {
start = e.Route[0]
corner = e.Route[1]
end = e.Route[2]
endpoint = e.Src
columnIndex = e.SrcTableColumnIndex
} else {
start = e.Route[len(e.Route)-1]
corner = e.Route[len(e.Route)-2]
end = e.Route[len(e.Route)-3]
endpoint = e.Dst
columnIndex = e.DstTableColumnIndex
}
isHorizontal := math.Ceil(start.Y) == math.Ceil(corner.Y)
dx, dy := endpoint.GetModifierElementAdjustments()
// Make sure it's still attached
if isHorizontal {
switch {
case columnIndex != nil:
maxRowOffset := endpoint.Height / float64(len(endpoint.SQLTable.Columns)+1) / 3
rowCenter := endpoint.TopLeft.Y + maxRowOffset*float64(*columnIndex+1)*2 + maxRowOffset
if math.Abs(end.Y-rowCenter) > maxRowOffset {
continue
}
case isHorizontal:
if end.Y <= endpoint.TopLeft.Y+10-dy {
continue
}
if end.Y >= endpoint.TopLeft.Y+endpoint.Height-10 {
continue
}
} else {
default:
if end.X <= endpoint.TopLeft.X+10 {
continue
}
@ -610,12 +747,21 @@ func deleteBends(g *d2graph.Graph) {
}
}
}
// Get rid of ladders
// ELK likes to do these for some reason
// . ┌─
// . ┌─┘
// . │
// We want to transform these into L-shapes
points := map[geo.Point]int{}
for _, e := range g.Edges {
for _, p := range e.Route {
points[*p]++
}
}
for ei, e := range g.Edges {
if len(e.Route) < 6 {
continue
@ -631,6 +777,11 @@ func deleteBends(g *d2graph.Graph) {
end := e.Route[i+2]
after := e.Route[i+3]
if c, _ := points[*corner]; c > 1 {
// If corner is shared with another edge, they merge
continue
}
// S-shape on sources only concerned one segment, since the other was just along the bound of endpoint
// These concern two segments

61
e2etests/stable_test.go
View file

@ -1190,18 +1190,21 @@ a -> md -> b
`,
}, {
name: "sql_tables",
script: `users: {
script: `
direction: left
users: {
shape: sql_table
id: int
id: int { constraint: primary_key }
name: string
email: string
password: string
last_login: datetime { constraint: primary_key }
last_login: datetime
}
products: {
shape: sql_table
id: int
id: int { constraint: primary_key }
price: decimal
sku: string
name: string
@ -1209,22 +1212,41 @@ products: {
orders: {
shape: sql_table
id: int
user_id: int
product_id: int
id: int { constraint: primary_key }
user_id: int { constraint: foreign_key }
product_id: int { constraint: foreign_key }
}
shipments: {
shape: sql_table
id: int
order_id: int
id: int { constraint: primary_key }
order_id: int { constraint: foreign_key }
tracking_number: string
status: string
}
users.id <-> orders.user_id
products.id <-> orders.product_id
shipments.order_id <-> orders.id`,
orders.user_id -> users.id
orders.product_id -> products.id
shipments.order_id -> orders.id`,
}, {
name: "sql_table_row_connections",
script: `
direction: left
a: {
shape: sql_table
id: int { constraint: primary_key }
}
b: {
shape: sql_table
id: int { constraint: primary_key }
a_1: int { constraint: foreign_key }
a_2: int { constraint: foreign_key }
}
b.a_1 -> a.id
b.a_2 -> a.id`,
}, {
name: "images",
script: `a: {
@ -2364,20 +2386,27 @@ a -> b
{
name: "sql_table_tooltip_animated",
script: `
direction: left
x: {
shape: sql_table
y
y { constraint: primary_key }
tooltip: I like turtles
}
a: {
shape: sql_table
b
b { constraint: foreign_key }
}
x.y -> a.b: {
a.b <-> x.y: {
style.animated: true
target-arrowhead.shape: cf-many
source-arrowhead: {
shape: cf-many
}
target-arrowhead: {
shape: cf-one
}
}
`,
},

118
e2etests/testdata/stable/ent2d2_basic/elk/board.exp.json generated vendored
View file

@ -7,8 +7,8 @@
"id": "User",
"type": "sql_table",
"pos": {
"x": 411,
"y": 12
"x": 376,
"y": 110
},
"width": 280,
"height": 144,
@ -142,7 +142,7 @@
"type": "sql_table",
"pos": {
"x": 12,
"y": 377
"y": 573
},
"width": 194,
"height": 108,
@ -246,7 +246,7 @@
"type": "sql_table",
"pos": {
"x": 226,
"y": 377
"y": 573
},
"width": 194,
"height": 108,
@ -350,7 +350,7 @@
"type": "sql_table",
"pos": {
"x": 440,
"y": 377
"y": 573
},
"width": 222,
"height": 144,
@ -482,7 +482,7 @@
"type": "sql_table",
"pos": {
"x": 682,
"y": 377
"y": 573
},
"width": 146,
"height": 108,
@ -584,7 +584,7 @@
"type": "sql_table",
"pos": {
"x": 848,
"y": 377
"y": 573
},
"width": 308,
"height": 108,
@ -709,19 +709,27 @@
"route": [
{
"x": 411,
"y": 60
},
{
"x": 323,
"y": 60
},
{
"x": 323,
"y": 108
"y": 254
},
{
"x": 411,
"y": 108
"y": 342
},
{
"x": 288,
"y": 342
},
{
"x": 288,
"y": 22
},
{
"x": 469.3330078125,
"y": 22
},
{
"x": 469.3330078125,
"y": 110
}
],
"animated": false,
@ -754,20 +762,28 @@
"labelPercentage": 0,
"route": [
{
"x": 691,
"y": 108
"x": 446,
"y": 254
},
{
"x": 779,
"y": 108
"x": 446,
"y": 352
},
{
"x": 779,
"y": 60
"x": 228,
"y": 352
},
{
"x": 691,
"y": 60
"x": 228,
"y": 12
},
{
"x": 562.666015625,
"y": 12
},
{
"x": 562.666015625,
"y": 110
}
],
"animated": false,
@ -800,20 +816,20 @@
"labelPercentage": 0,
"route": [
{
"x": 457.6659851074219,
"y": 156
"x": 481,
"y": 254
},
{
"x": 457.6659851074219,
"y": 196
"x": 481,
"y": 392
},
{
"x": 109,
"y": 196
"y": 392
},
{
"x": 109,
"y": 377
"y": 573
}
],
"animated": false,
@ -846,20 +862,20 @@
"labelPercentage": 0,
"route": [
{
"x": 504.3330078125,
"y": 156
"x": 516,
"y": 254
},
{
"x": 504.3330078125,
"y": 246
"x": 516,
"y": 442
},
{
"x": 323,
"y": 246
"y": 442
},
{
"x": 323,
"y": 377
"y": 573
}
],
"animated": false,
@ -893,11 +909,11 @@
"route": [
{
"x": 551,
"y": 156
"y": 254
},
{
"x": 551,
"y": 377
"y": 573
}
],
"animated": false,
@ -930,20 +946,20 @@
"labelPercentage": 0,
"route": [
{
"x": 597.666015625,
"y": 156
"x": 586,
"y": 254
},
{
"x": 597.666015625,
"y": 246
"x": 586,
"y": 442
},
{
"x": 755,
"y": 246
"y": 442
},
{
"x": 755,
"y": 377
"y": 573
}
],
"animated": false,
@ -976,20 +992,20 @@
"labelPercentage": 0,
"route": [
{
"x": 644.3330078125,
"y": 156
"x": 621,
"y": 254
},
{
"x": 644.3330078125,
"y": 196
"x": 621,
"y": 392
},
{
"x": 1002,
"y": 196
"y": 392
},
{
"x": 1002,
"y": 377
"y": 573
}
],
"animated": false,

174
e2etests/testdata/stable/ent2d2_basic/elk/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: 29 KiB

After

Width:  |  Height:  |  Size: 30 KiB

150
e2etests/testdata/stable/ent2d2_right/elk/board.exp.json generated vendored
View file

@ -7,8 +7,8 @@
"id": "User",
"type": "sql_table",
"pos": {
"x": 12,
"y": 200
"x": 72,
"y": 198
},
"width": 201,
"height": 280,
@ -141,8 +141,8 @@
"id": "Pet",
"type": "sql_table",
"pos": {
"x": 514,
"y": 12
"x": 571,
"y": 1406
},
"width": 194,
"height": 108,
@ -245,8 +245,8 @@
"id": "Card",
"type": "sql_table",
"pos": {
"x": 514,
"y": 140
"x": 571,
"y": 618
},
"width": 194,
"height": 108,
@ -349,8 +349,8 @@
"id": "Post",
"type": "sql_table",
"pos": {
"x": 514,
"y": 268
"x": 557,
"y": 1182
},
"width": 222,
"height": 144,
@ -481,8 +481,8 @@
"id": "Metadata",
"type": "sql_table",
"pos": {
"x": 514,
"y": 432
"x": 595,
"y": 806
},
"width": 146,
"height": 108,
@ -584,7 +584,7 @@
"type": "sql_table",
"pos": {
"x": 514,
"y": 560
"y": 994
},
"width": 308,
"height": 108,
@ -708,20 +708,28 @@
"labelPercentage": 0,
"route": [
{
"x": 79,
"y": 200
"x": 97.125,
"y": 478
},
{
"x": 79,
"y": 150
"x": 97.125,
"y": 528
},
{
"x": 146,
"y": 150
"x": 22,
"y": 528
},
{
"x": 146,
"y": 200
"x": 22,
"y": 148
},
{
"x": 139,
"y": 148
},
{
"x": 139,
"y": 198
}
],
"animated": false,
@ -754,20 +762,28 @@
"labelPercentage": 0,
"route": [
{
"x": 146,
"y": 480
"x": 122.25,
"y": 478
},
{
"x": 146,
"y": 530
"x": 122.25,
"y": 538
},
{
"x": 79,
"y": 530
"x": 12,
"y": 538
},
{
"x": 79,
"y": 480
"x": 12,
"y": 99
},
{
"x": 206,
"y": 99
},
{
"x": 206,
"y": 198
}
],
"animated": false,
@ -800,20 +816,20 @@
"labelPercentage": 0,
"route": [
{
"x": 213,
"y": 246.66600036621094
"x": 147.375,
"y": 478
},
{
"x": 253,
"y": 246.66600036621094
"x": 147.375,
"y": 1366
},
{
"x": 253,
"y": 66
"x": 668,
"y": 1366
},
{
"x": 514,
"y": 66
"x": 668,
"y": 1406
}
],
"animated": false,
@ -846,20 +862,20 @@
"labelPercentage": 0,
"route": [
{
"x": 213,
"y": 293.3330078125
"x": 172.5,
"y": 478
},
{
"x": 303,
"y": 293.3330078125
"x": 172.5,
"y": 578
},
{
"x": 303,
"y": 194
"x": 668,
"y": 578
},
{
"x": 514,
"y": 194
"x": 668,
"y": 618
}
],
"animated": false,
@ -892,12 +908,20 @@
"labelPercentage": 0,
"route": [
{
"x": 213,
"y": 340
"x": 197.625,
"y": 478
},
{
"x": 514,
"y": 340
"x": 197.625,
"y": 1142
},
{
"x": 668,
"y": 1142
},
{
"x": 668,
"y": 1182
}
],
"animated": false,
@ -930,20 +954,20 @@
"labelPercentage": 0,
"route": [
{
"x": 213,
"y": 386.6659851074219
"x": 222.75,
"y": 478
},
{
"x": 303,
"y": 386.6659851074219
"x": 222.75,
"y": 766
},
{
"x": 303,
"y": 486
"x": 668,
"y": 766
},
{
"x": 514,
"y": 486
"x": 668,
"y": 806
}
],
"animated": false,
@ -976,20 +1000,20 @@
"labelPercentage": 0,
"route": [
{
"x": 213,
"y": 433.3330078125
"x": 247.875,
"y": 478
},
{
"x": 253,
"y": 433.3330078125
"x": 247.875,
"y": 954
},
{
"x": 253,
"y": 614
"x": 668,
"y": 954
},
{
"x": 514,
"y": 614
"x": 668,
"y": 994
}
],
"animated": false,

174
e2etests/testdata/stable/ent2d2_right/elk/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: 30 KiB

After

Width:  |  Height:  |  Size: 30 KiB

351
e2etests/testdata/stable/sql_table_row_connections/dagre/board.exp.json generated vendored Normal file
View file

@ -0,0 +1,351 @@
{
"name": "",
"isFolderOnly": false,
"fontFamily": "SourceSansPro",
"shapes": [
{
"id": "a",
"type": "sql_table",
"pos": {
"x": 0,
"y": 36
},
"width": 131,
"height": 72,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "N1",
"stroke": "N7",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": [
{
"name": {
"label": "id",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 15,
"labelHeight": 26
},
"type": {
"label": "int",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 23,
"labelHeight": 26
},
"constraint": [
"primary_key"
],
"reference": ""
}
],
"label": "a",
"fontSize": 20,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 11,
"labelHeight": 31,
"zIndex": 0,
"level": 1,
"primaryAccentColor": "B2",
"secondaryAccentColor": "AA2",
"neutralAccentColor": "N2"
},
{
"id": "b",
"type": "sql_table",
"pos": {
"x": 231,
"y": 0
},
"width": 146,
"height": 144,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "N1",
"stroke": "N7",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": [
{
"name": {
"label": "id",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 15,
"labelHeight": 26
},
"type": {
"label": "int",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 23,
"labelHeight": 26
},
"constraint": [
"primary_key"
],
"reference": ""
},
{
"name": {
"label": "a_1",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 29,
"labelHeight": 26
},
"type": {
"label": "int",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 23,
"labelHeight": 26
},
"constraint": [
"foreign_key"
],
"reference": ""
},
{
"name": {
"label": "a_2",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 30,
"labelHeight": 26
},
"type": {
"label": "int",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 23,
"labelHeight": 26
},
"constraint": [
"foreign_key"
],
"reference": ""
}
],
"label": "b",
"fontSize": 20,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 12,
"labelHeight": 31,
"zIndex": 0,
"level": 1,
"primaryAccentColor": "B2",
"secondaryAccentColor": "AA2",
"neutralAccentColor": "N2"
}
],
"connections": [
{
"id": "(b -> a)[0]",
"src": "b",
"srcArrow": "none",
"dst": "a",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"borderRadius": 10,
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N2",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"route": [
{
"x": 231,
"y": 66
},
{
"x": 191,
"y": 62.79999923706055
},
{
"x": 171,
"y": 62.79999923706055
},
{
"x": 131,
"y": 66
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(b -> a)[1]",
"src": "b",
"srcArrow": "none",
"dst": "a",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"borderRadius": 10,
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N2",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"route": [
{
"x": 231,
"y": 78
},
{
"x": 191,
"y": 81.19999694824219
},
{
"x": 171,
"y": 81.19999694824219
},
{
"x": 131,
"y": 78
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
}
],
"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
}
}

95
e2etests/testdata/stable/sql_table_row_connections/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: 12 KiB

341
e2etests/testdata/stable/sql_table_row_connections/elk/board.exp.json generated vendored Normal file
View file

@ -0,0 +1,341 @@
{
"name": "",
"isFolderOnly": false,
"fontFamily": "SourceSansPro",
"shapes": [
{
"id": "a",
"type": "sql_table",
"pos": {
"x": 12,
"y": 42
},
"width": 131,
"height": 80,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "N1",
"stroke": "N7",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": [
{
"name": {
"label": "id",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 15,
"labelHeight": 26
},
"type": {
"label": "int",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 23,
"labelHeight": 26
},
"constraint": [
"primary_key"
],
"reference": ""
}
],
"label": "a",
"fontSize": 20,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 11,
"labelHeight": 31,
"zIndex": 0,
"level": 1,
"primaryAccentColor": "B2",
"secondaryAccentColor": "AA2",
"neutralAccentColor": "N2"
},
{
"id": "b",
"type": "sql_table",
"pos": {
"x": 223,
"y": 12
},
"width": 146,
"height": 144,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "N1",
"stroke": "N7",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": [
{
"name": {
"label": "id",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 15,
"labelHeight": 26
},
"type": {
"label": "int",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 23,
"labelHeight": 26
},
"constraint": [
"primary_key"
],
"reference": ""
},
{
"name": {
"label": "a_1",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 29,
"labelHeight": 26
},
"type": {
"label": "int",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 23,
"labelHeight": 26
},
"constraint": [
"foreign_key"
],
"reference": ""
},
{
"name": {
"label": "a_2",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 30,
"labelHeight": 26
},
"type": {
"label": "int",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 23,
"labelHeight": 26
},
"constraint": [
"foreign_key"
],
"reference": ""
}
],
"label": "b",
"fontSize": 20,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 12,
"labelHeight": 31,
"zIndex": 0,
"level": 1,
"primaryAccentColor": "B2",
"secondaryAccentColor": "AA2",
"neutralAccentColor": "N2"
}
],
"connections": [
{
"id": "(b -> a)[0]",
"src": "b",
"srcArrow": "none",
"dst": "a",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"borderRadius": 10,
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N2",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"route": [
{
"x": 223,
"y": 102
},
{
"x": 143,
"y": 102
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(b -> a)[1]",
"src": "b",
"srcArrow": "none",
"dst": "a",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"borderRadius": 10,
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N2",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"route": [
{
"x": 223,
"y": 138
},
{
"x": 183,
"y": 138
},
{
"x": 183,
"y": 102
},
{
"x": 143,
"y": 102
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
}
],
"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
}
}

95
e2etests/testdata/stable/sql_table_row_connections/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: 12 KiB

42
e2etests/testdata/stable/sql_table_tooltip_animated/dagre/board.exp.json generated vendored
View file

@ -10,7 +10,7 @@
"x": 0,
"y": 0
},
"width": 60,
"width": 103,
"height": 72,
"opacity": 1,
"strokeDash": 0,
@ -55,7 +55,9 @@
"labelWidth": 0,
"labelHeight": 0
},
"constraint": null,
"constraint": [
"primary_key"
],
"reference": ""
}
],
@ -79,10 +81,10 @@
"id": "a",
"type": "sql_table",
"pos": {
"x": 0,
"y": 172
"x": 203,
"y": 0
},
"width": 60,
"width": 101,
"height": 72,
"opacity": 1,
"strokeDash": 0,
@ -127,7 +129,9 @@
"labelWidth": 0,
"labelHeight": 0
},
"constraint": null,
"constraint": [
"foreign_key"
],
"reference": ""
}
],
@ -150,11 +154,11 @@
],
"connections": [
{
"id": "(x -> a)[0]",
"src": "x",
"srcArrow": "none",
"dst": "a",
"dstArrow": "cf-many",
"id": "(a <-> x)[0]",
"src": "a",
"srcArrow": "cf-many",
"dst": "x",
"dstArrow": "cf-one",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
@ -174,20 +178,20 @@
"labelPercentage": 0,
"route": [
{
"x": 30,
"y": 72
"x": 203,
"y": 36
},
{
"x": 30,
"y": 112
"x": 163,
"y": 36
},
{
"x": 30,
"y": 132
"x": 143,
"y": 36
},
{
"x": 30,
"y": 172
"x": 103,
"y": 36
}
],
"isCurve": true,

158
e2etests/testdata/stable/sql_table_tooltip_animated/dagre/sketch.exp.svg vendored
View file

@ -1,10 +1,10 @@
<?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 79 263"><svg id="d2-svg" class="d2-1756795631" width="79" height="263" viewBox="-1 -18 79 263"><rect x="-1.000000" y="-18.000000" width="79.000000" height="263.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[
.d2-1756795631 .text {
font-family: "d2-1756795631-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 306 91"><svg id="d2-svg" class="d2-3096218097" width="306" height="91" viewBox="-1 -18 306 91"><rect x="-1.000000" y="-18.000000" width="306.000000" height="91.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[
.d2-3096218097 .text {
font-family: "d2-3096218097-font-regular";
}
@font-face {
font-family: d2-1756795631-font-regular;
src: url("data:application/font-woff;base64,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");
font-family: d2-3096218097-font-regular;
src: url("data:application/font-woff;base64,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");
}
@keyframes dashdraw {
from {
@ -27,78 +27,78 @@
opacity: 0.5;
}
.d2-1756795631 .fill-N1{fill:#0A0F25;}
.d2-1756795631 .fill-N2{fill:#676C7E;}
.d2-1756795631 .fill-N3{fill:#9499AB;}
.d2-1756795631 .fill-N4{fill:#CFD2DD;}
.d2-1756795631 .fill-N5{fill:#DEE1EB;}
.d2-1756795631 .fill-N6{fill:#EEF1F8;}
.d2-1756795631 .fill-N7{fill:#FFFFFF;}
.d2-1756795631 .fill-B1{fill:#0D32B2;}
.d2-1756795631 .fill-B2{fill:#0D32B2;}
.d2-1756795631 .fill-B3{fill:#E3E9FD;}
.d2-1756795631 .fill-B4{fill:#E3E9FD;}
.d2-1756795631 .fill-B5{fill:#EDF0FD;}
.d2-1756795631 .fill-B6{fill:#F7F8FE;}
.d2-1756795631 .fill-AA2{fill:#4A6FF3;}
.d2-1756795631 .fill-AA4{fill:#EDF0FD;}
.d2-1756795631 .fill-AA5{fill:#F7F8FE;}
.d2-1756795631 .fill-AB4{fill:#EDF0FD;}
.d2-1756795631 .fill-AB5{fill:#F7F8FE;}
.d2-1756795631 .stroke-N1{stroke:#0A0F25;}
.d2-1756795631 .stroke-N2{stroke:#676C7E;}
.d2-1756795631 .stroke-N3{stroke:#9499AB;}
.d2-1756795631 .stroke-N4{stroke:#CFD2DD;}
.d2-1756795631 .stroke-N5{stroke:#DEE1EB;}
.d2-1756795631 .stroke-N6{stroke:#EEF1F8;}
.d2-1756795631 .stroke-N7{stroke:#FFFFFF;}
.d2-1756795631 .stroke-B1{stroke:#0D32B2;}
.d2-1756795631 .stroke-B2{stroke:#0D32B2;}
.d2-1756795631 .stroke-B3{stroke:#E3E9FD;}
.d2-1756795631 .stroke-B4{stroke:#E3E9FD;}
.d2-1756795631 .stroke-B5{stroke:#EDF0FD;}
.d2-1756795631 .stroke-B6{stroke:#F7F8FE;}
.d2-1756795631 .stroke-AA2{stroke:#4A6FF3;}
.d2-1756795631 .stroke-AA4{stroke:#EDF0FD;}
.d2-1756795631 .stroke-AA5{stroke:#F7F8FE;}
.d2-1756795631 .stroke-AB4{stroke:#EDF0FD;}
.d2-1756795631 .stroke-AB5{stroke:#F7F8FE;}
.d2-1756795631 .background-color-N1{background-color:#0A0F25;}
.d2-1756795631 .background-color-N2{background-color:#676C7E;}
.d2-1756795631 .background-color-N3{background-color:#9499AB;}
.d2-1756795631 .background-color-N4{background-color:#CFD2DD;}
.d2-1756795631 .background-color-N5{background-color:#DEE1EB;}
.d2-1756795631 .background-color-N6{background-color:#EEF1F8;}
.d2-1756795631 .background-color-N7{background-color:#FFFFFF;}
.d2-1756795631 .background-color-B1{background-color:#0D32B2;}
.d2-1756795631 .background-color-B2{background-color:#0D32B2;}
.d2-1756795631 .background-color-B3{background-color:#E3E9FD;}
.d2-1756795631 .background-color-B4{background-color:#E3E9FD;}
.d2-1756795631 .background-color-B5{background-color:#EDF0FD;}
.d2-1756795631 .background-color-B6{background-color:#F7F8FE;}
.d2-1756795631 .background-color-AA2{background-color:#4A6FF3;}
.d2-1756795631 .background-color-AA4{background-color:#EDF0FD;}
.d2-1756795631 .background-color-AA5{background-color:#F7F8FE;}
.d2-1756795631 .background-color-AB4{background-color:#EDF0FD;}
.d2-1756795631 .background-color-AB5{background-color:#F7F8FE;}
.d2-1756795631 .color-N1{color:#0A0F25;}
.d2-1756795631 .color-N2{color:#676C7E;}
.d2-1756795631 .color-N3{color:#9499AB;}
.d2-1756795631 .color-N4{color:#CFD2DD;}
.d2-1756795631 .color-N5{color:#DEE1EB;}
.d2-1756795631 .color-N6{color:#EEF1F8;}
.d2-1756795631 .color-N7{color:#FFFFFF;}
.d2-1756795631 .color-B1{color:#0D32B2;}
.d2-1756795631 .color-B2{color:#0D32B2;}
.d2-1756795631 .color-B3{color:#E3E9FD;}
.d2-1756795631 .color-B4{color:#E3E9FD;}
.d2-1756795631 .color-B5{color:#EDF0FD;}
.d2-1756795631 .color-B6{color:#F7F8FE;}
.d2-1756795631 .color-AA2{color:#4A6FF3;}
.d2-1756795631 .color-AA4{color:#EDF0FD;}
.d2-1756795631 .color-AA5{color:#F7F8FE;}
.d2-1756795631 .color-AB4{color:#EDF0FD;}
.d2-1756795631 .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="x"><g class="shape" ><rect x="0.000000" y="0.000000" width="60.000000" height="72.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="0.000000" width="60.000000" height="36.000000" class="class_header fill-N1" /><text x="10.000000" y="25.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">x</text><text x="10.000000" y="59.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">y</text><text x="40.000000" y="59.000000" class="text fill-N2" style="text-anchor:start;font-size:20px" /><text x="50.000000" y="59.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px" /><line x1="0.000000" x2="60.000000" y1="72.000000" y2="72.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="a"><g class="shape" ><rect x="0.000000" y="172.000000" width="60.000000" height="72.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="172.000000" width="60.000000" height="36.000000" class="class_header fill-N1" /><text x="10.000000" y="197.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">a</text><text x="10.000000" y="231.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">b</text><text x="40.000000" y="231.000000" class="text fill-N2" style="text-anchor:start;font-size:20px" /><text x="50.000000" y="231.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px" /><line x1="0.000000" x2="60.000000" y1="244.000000" y2="244.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="(x -&gt; a)[0]"><marker id="mk-599773101" markerWidth="18.000000" markerHeight="18.000000" refX="15.000000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="2"><circle r="3.300000" cx="5.300000" cy="9.000000" class="connection stroke-B1 fill-N7" stroke-width="2" /><path d="M15.000000,9.000000 24.600000,9.000000 M9.600000,9.000000 24.600000,0.000000 M9.600000,9.000000 24.600000,18.000000" /></g> </marker><path d="M 30.000000 74.000000 C 30.000000 112.000000 30.000000 132.000000 30.000000 168.000000" fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-end="url(#mk-599773101)" mask="url(#d2-1756795631)" /></g><g transform="translate(44 -16)" class="appendix-icon"><title>I like turtles</title><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
.d2-3096218097 .fill-N1{fill:#0A0F25;}
.d2-3096218097 .fill-N2{fill:#676C7E;}
.d2-3096218097 .fill-N3{fill:#9499AB;}
.d2-3096218097 .fill-N4{fill:#CFD2DD;}
.d2-3096218097 .fill-N5{fill:#DEE1EB;}
.d2-3096218097 .fill-N6{fill:#EEF1F8;}
.d2-3096218097 .fill-N7{fill:#FFFFFF;}
.d2-3096218097 .fill-B1{fill:#0D32B2;}
.d2-3096218097 .fill-B2{fill:#0D32B2;}
.d2-3096218097 .fill-B3{fill:#E3E9FD;}
.d2-3096218097 .fill-B4{fill:#E3E9FD;}
.d2-3096218097 .fill-B5{fill:#EDF0FD;}
.d2-3096218097 .fill-B6{fill:#F7F8FE;}
.d2-3096218097 .fill-AA2{fill:#4A6FF3;}
.d2-3096218097 .fill-AA4{fill:#EDF0FD;}
.d2-3096218097 .fill-AA5{fill:#F7F8FE;}
.d2-3096218097 .fill-AB4{fill:#EDF0FD;}
.d2-3096218097 .fill-AB5{fill:#F7F8FE;}
.d2-3096218097 .stroke-N1{stroke:#0A0F25;}
.d2-3096218097 .stroke-N2{stroke:#676C7E;}
.d2-3096218097 .stroke-N3{stroke:#9499AB;}
.d2-3096218097 .stroke-N4{stroke:#CFD2DD;}
.d2-3096218097 .stroke-N5{stroke:#DEE1EB;}
.d2-3096218097 .stroke-N6{stroke:#EEF1F8;}
.d2-3096218097 .stroke-N7{stroke:#FFFFFF;}
.d2-3096218097 .stroke-B1{stroke:#0D32B2;}
.d2-3096218097 .stroke-B2{stroke:#0D32B2;}
.d2-3096218097 .stroke-B3{stroke:#E3E9FD;}
.d2-3096218097 .stroke-B4{stroke:#E3E9FD;}
.d2-3096218097 .stroke-B5{stroke:#EDF0FD;}
.d2-3096218097 .stroke-B6{stroke:#F7F8FE;}
.d2-3096218097 .stroke-AA2{stroke:#4A6FF3;}
.d2-3096218097 .stroke-AA4{stroke:#EDF0FD;}
.d2-3096218097 .stroke-AA5{stroke:#F7F8FE;}
.d2-3096218097 .stroke-AB4{stroke:#EDF0FD;}
.d2-3096218097 .stroke-AB5{stroke:#F7F8FE;}
.d2-3096218097 .background-color-N1{background-color:#0A0F25;}
.d2-3096218097 .background-color-N2{background-color:#676C7E;}
.d2-3096218097 .background-color-N3{background-color:#9499AB;}
.d2-3096218097 .background-color-N4{background-color:#CFD2DD;}
.d2-3096218097 .background-color-N5{background-color:#DEE1EB;}
.d2-3096218097 .background-color-N6{background-color:#EEF1F8;}
.d2-3096218097 .background-color-N7{background-color:#FFFFFF;}
.d2-3096218097 .background-color-B1{background-color:#0D32B2;}
.d2-3096218097 .background-color-B2{background-color:#0D32B2;}
.d2-3096218097 .background-color-B3{background-color:#E3E9FD;}
.d2-3096218097 .background-color-B4{background-color:#E3E9FD;}
.d2-3096218097 .background-color-B5{background-color:#EDF0FD;}
.d2-3096218097 .background-color-B6{background-color:#F7F8FE;}
.d2-3096218097 .background-color-AA2{background-color:#4A6FF3;}
.d2-3096218097 .background-color-AA4{background-color:#EDF0FD;}
.d2-3096218097 .background-color-AA5{background-color:#F7F8FE;}
.d2-3096218097 .background-color-AB4{background-color:#EDF0FD;}
.d2-3096218097 .background-color-AB5{background-color:#F7F8FE;}
.d2-3096218097 .color-N1{color:#0A0F25;}
.d2-3096218097 .color-N2{color:#676C7E;}
.d2-3096218097 .color-N3{color:#9499AB;}
.d2-3096218097 .color-N4{color:#CFD2DD;}
.d2-3096218097 .color-N5{color:#DEE1EB;}
.d2-3096218097 .color-N6{color:#EEF1F8;}
.d2-3096218097 .color-N7{color:#FFFFFF;}
.d2-3096218097 .color-B1{color:#0D32B2;}
.d2-3096218097 .color-B2{color:#0D32B2;}
.d2-3096218097 .color-B3{color:#E3E9FD;}
.d2-3096218097 .color-B4{color:#E3E9FD;}
.d2-3096218097 .color-B5{color:#EDF0FD;}
.d2-3096218097 .color-B6{color:#F7F8FE;}
.d2-3096218097 .color-AA2{color:#4A6FF3;}
.d2-3096218097 .color-AA4{color:#EDF0FD;}
.d2-3096218097 .color-AA5{color:#F7F8FE;}
.d2-3096218097 .color-AB4{color:#EDF0FD;}
.d2-3096218097 .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="x"><g class="shape" ><rect x="0.000000" y="0.000000" width="103.000000" height="72.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="0.000000" y="0.000000" width="103.000000" height="36.000000" class="class_header fill-N1" /><text x="10.000000" y="25.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">x</text><text x="10.000000" y="59.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">y</text><text x="40.000000" y="59.000000" class="text fill-N2" style="text-anchor:start;font-size:20px" /><text x="93.000000" y="59.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px">PK</text><line x1="0.000000" x2="103.000000" y1="72.000000" y2="72.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="a"><g class="shape" ><rect x="203.000000" y="0.000000" width="101.000000" height="72.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="203.000000" y="0.000000" width="101.000000" height="36.000000" class="class_header fill-N1" /><text x="213.000000" y="25.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">a</text><text x="213.000000" y="59.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">b</text><text x="243.000000" y="59.000000" class="text fill-N2" style="text-anchor:start;font-size:20px" /><text x="294.000000" y="59.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px">FK</text><line x1="203.000000" x2="304.000000" y1="72.000000" y2="72.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="(a &lt;-&gt; x)[0]"><marker id="mk-2288727530" markerWidth="18.000000" markerHeight="18.000000" refX="3.000000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-18.000000, -18.000000)" class="connection stroke-B1 fill-N7" stroke-width="2"><circle r="3.300000" cx="5.300000" cy="9.000000" class="connection stroke-B1 fill-N7" stroke-width="2" /><path d="M15.000000,9.000000 24.600000,9.000000 M9.600000,9.000000 24.600000,0.000000 M9.600000,9.000000 24.600000,18.000000" /></g> </marker><marker id="mk-1268614626" markerWidth="18.000000" markerHeight="18.000000" refX="15.000000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="2"><circle r="3.300000" cx="5.300000" cy="9.000000" class="connection stroke-B1 fill-N7" stroke-width="2" /><path d="M15.000000,9.000000 24.600000,9.000000 M13.200000,0.000000 13.200000,18.000000" /></g> </marker><path d="M 199.000000 36.000000 C 163.000000 36.000000 143.000000 36.000000 107.000000 36.000000" fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-start="url(#mk-2288727530)" marker-end="url(#mk-1268614626)" mask="url(#d2-3096218097)" /></g><g transform="translate(87 -16)" class="appendix-icon"><title>I like turtles</title><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3427_35082111)">
<path d="M16 31.1109C24.3456 31.1109 31.1111 24.3454 31.1111 15.9998C31.1111 7.65415 24.3456 0.888672 16 0.888672C7.65436 0.888672 0.888885 7.65415 0.888885 15.9998C0.888885 24.3454 7.65436 31.1109 16 31.1109Z" fill="white" stroke="#DEE1EB"/>
<path d="M16 26C21.5228 26 26 21.5228 26 16C26 10.4772 21.5228 6 16 6C10.4772 6 6 10.4772 6 16C6 21.5228 10.4772 26 16 26Z" stroke="#2E3346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
@ -111,7 +111,7 @@
</clipPath>
</defs>
</svg>
</g><mask id="d2-1756795631" maskUnits="userSpaceOnUse" x="-1" y="-18" width="79" height="263">
<rect x="-1" y="-18" width="79" height="263" fill="white"></rect>
</g><mask id="d2-3096218097" maskUnits="userSpaceOnUse" x="-1" y="-18" width="306" height="91">
<rect x="-1" y="-18" width="306" height="91" fill="white"></rect>
</mask></svg></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 14 KiB

34
e2etests/testdata/stable/sql_table_tooltip_animated/elk/board.exp.json generated vendored
View file

@ -10,7 +10,7 @@
"x": 12,
"y": 12
},
"width": 60,
"width": 103,
"height": 72,
"opacity": 1,
"strokeDash": 0,
@ -55,7 +55,9 @@
"labelWidth": 0,
"labelHeight": 0
},
"constraint": null,
"constraint": [
"primary_key"
],
"reference": ""
}
],
@ -79,10 +81,10 @@
"id": "a",
"type": "sql_table",
"pos": {
"x": 12,
"y": 154
"x": 185,
"y": 12
},
"width": 60,
"width": 101,
"height": 72,
"opacity": 1,
"strokeDash": 0,
@ -127,7 +129,9 @@
"labelWidth": 0,
"labelHeight": 0
},
"constraint": null,
"constraint": [
"foreign_key"
],
"reference": ""
}
],
@ -150,11 +154,11 @@
],
"connections": [
{
"id": "(x -> a)[0]",
"src": "x",
"srcArrow": "none",
"dst": "a",
"dstArrow": "cf-many",
"id": "(a <-> x)[0]",
"src": "a",
"srcArrow": "cf-many",
"dst": "x",
"dstArrow": "cf-one",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
@ -174,12 +178,12 @@
"labelPercentage": 0,
"route": [
{
"x": 42,
"y": 84
"x": 185,
"y": 66
},
{
"x": 42,
"y": 154
"x": 115,
"y": 66
}
],
"animated": true,

158
e2etests/testdata/stable/sql_table_tooltip_animated/elk/sketch.exp.svg vendored
View file

@ -1,10 +1,10 @@
<?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 79 233"><svg id="d2-svg" class="d2-1870435628" width="79" height="233" viewBox="11 -6 79 233"><rect x="11.000000" y="-6.000000" width="79.000000" height="233.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[
.d2-1870435628 .text {
font-family: "d2-1870435628-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 276 91"><svg id="d2-svg" class="d2-3579465052" width="276" height="91" viewBox="11 -6 276 91"><rect x="11.000000" y="-6.000000" width="276.000000" height="91.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[
.d2-3579465052 .text {
font-family: "d2-3579465052-font-regular";
}
@font-face {
font-family: d2-1870435628-font-regular;
src: url("data:application/font-woff;base64,d09GRgABAAAAAAnsAAoAAAAAD2gAAguFAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAAA9AAAAGAAAABgXd/Vo2NtYXAAAAFUAAAAdQAAAIwB5QK4Z2x5ZgAAAcwAAAPtAAAEsEWBc3JoZWFkAAAFvAAAADYAAAA2G4Ue32hoZWEAAAX0AAAAJAAAACQKhAXUaG10eAAABhgAAABIAAAASBs6A6Vsb2NhAAAGYAAAACYAAAAmC8gKom1heHAAAAaIAAAAIAAAACAAKgD2bmFtZQAABqgAAAMjAAAIFAbDVU1wb3N0AAAJzAAAAB0AAAAg/9EAMgADAgkBkAAFAAACigJYAAAASwKKAlgAAAFeADIBIwAAAgsFAwMEAwICBGAAAvcAAAADAAAAAAAAAABBREJPAEAAIP//Au7/BgAAA9gBESAAAZ8AAAAAAeYClAAAACAAA3icZMzLrQEBAEbhb+7M9RyPhQK0oAxlkFgIK4mEnSbEhkR0oRmJSn7JxM5ZnsWHQqlArXLCxFipMjUzt7SytrV3TPjeRXM3dg5J3nnlmUfuueWaS86N91th5K+x/7W0dXT19NUGhnwAAAD//wEAAP//vB8ajgAAAHicXJTPb9tkGMef940br43TxsQ/kjaJY3uLm2RJs7yxTZs1pVky0tIubaqxJmWdRoGiDRCdENOkaUPqBLsAFesNCQ5w4YAEQtrgugkIIA3tMjiAxClU7EQIJ1QbxckA8Qf4+3m/n+fxAwNQB8A63gUXDMIIPAI8AGFl9pCsaSptEtNURZepIZauo5+sHYTmcpRhUEeKD4qXrl5Fq1fw7v4LU9c2N79cv3jRerO1Z2XR3T1A0ACAj/EOuLp5hG2s4J39lwFDzu6gT1EbRuEggKjE9Jxh5mIxVXHTmmGQrMCzqqa63VrWMHW3m+eE29PLb7/LJscT8+GosjFVXyrRLmVZUAvqpbNZZm526SQrPapGuUkh/uKadX8qlCgq0hsjRyfihwBDze6gv3AT/BAFGFBimkqrLOHpHotzQHrO4fOCgOLKXNRFF2tYro6feTp/5vjRar4sPaZGZxg5nMXN26th7fWtlVcL5c3G0oYStUMiAACGtN1B36I2BEByON1ifQQtCwLJGqbodrtkB4XE2XOFmWfM088ibH0+cOq4mh8LS9XvEDUzSZaZ6QvVpQuFy897g4OLT/GswUVQbH6xCmDbUAaAz/BNHAMfALiBvdzlI6gBoBZuAtPzTfyE9qsazdeWXd+vffBF46013LQiCO5YP/927rX+N3YHfsRNGOlNgiUs9/ChH6XjteFBiqY9BwRmUsfP7e/6WYQKFNVnraM2sA5LJN2iIt0bIlsr0a5gJR4WfQw3Ih0LotZq2hiqUFS2YDV73JDdQduoDQmHq5mOHj0Xi2lprOe61vppPCcIYgR3x3Qvt67Go6VkJiOTMaWYqFdTJ0LjQSOaTkYyY2opFa8yWsgMyikpqIhDXlmP56tRMecPJEJimPd4ZTOtFccdfsDuoDJ+CcR+b1U3TcITXv23/4MT05WFofL2tpzwRhgfN8E0KshbGLh+/ZjVTh0ZpAq0x8l6wu6gu6gF3P8csqS3x78sVlaSmVhe6XpRFpizp1HO+qFU0JKobo0ujGcAwTAA+gS1IAhATI2IgtB1apqEFlUtFuvG0PTw+zfqs56Al/IInvyTN96rP+4dHaa8AaZo7Z33Jzgu4T//+59bwmGeT4pbztsYewJ9jVow9l/Ppuki/j7BT1zDuOELM74D3GDcGPHcObnhCXooDzd0aukWO1G+56Zm8UA+dRD9av0hVRS5EkXe/XZmIdXNrwKgW/iKs3M6YVXdMEzCEr76ziuHZ0dnrpXQff2A6Nv/qvTPjsKHqPXwJtRqqGWNArK/wfNg4pvgAWCdi9D7bwKSFAhIEp4PBwORSCAYhr8BAAD//wEAAP//knf17AAAAAABAAAAAguFs3i4w18PPPUAAwPoAAAAANhdoKEAAAAA3WYvNv46/tsIbwPIAAAAAwACAAAAAAAAAAEAAAPY/u8AAAiY/jr+OghvAAEAAAAAAAAAAAAAAAAAAAASAo0AWQDIAAABBwBaAfgANAIpAFIB8AAuAPYARQHvAFIA/wBSAVsAUgGjABwBUgAYAiAASwG+AA4B0wAMAfEATwD2AFIAAP/JAAAALAAsADgAcACkANgA5AD+ARoBOgF6AaABwgHuAh4CNgJCAlgAAAABAAAAEgCMAAwAZgAHAAEAAAAAAAAAAAAAAAAABAADeJyclN1OG1cUhT8H221UNRcVisgNOpdtlYzdCKIErkwJilWEU4/TH6mqNHjGP2I8M/IMUKo+QK/7Fn2LXPU5+hBVr6uzvA02qhSBELDOnL33WWevtQ+wyb9sUKs/BP5q/mC4xnZzz/ADHjWfGt7guPG34fpKTIO48ZvhJl82+oY/4n39D8Mfs1P/2fBDtupHhj/heX3T8Kcbjn8MP2KH9wtcg5f8brjGFoXhB2zyk+ENHmM1a3Ue0zbc4DO2DTfZBgZMqUiZkjHGMWLKmHPmJJSEJMyZMiIhxtGlQ0qlrxmRkGP8v18jQirmRKo4ocKREpISUTKxir8qK+etThxpNbe9DhUTIk6VcUZEhiNnTE5GwpnqVFQU7NGiRclQfAsqSgJKpqQE5MwZ06LHEccMmDClxHGkSp5ZSM6Iiksine8swndmSEJGaazOyYjF04lfouwuxzh6FIpdrXy8VuEpju+U7bnliv2KQL9uhdn6uUs2ERfqZ6qupNq5lIIT7fpzO3wrXLGHu1d/1pl8uEex/leqfMq59I+lVCYmGc5t0SGUg0L3BMeB1l1CdeR7ugx4Q493DLTu0KdPhxMGdHmt3B59HF/T44RDZXSFF3tHcswJP+L4hq5ifO3E+rNQLOEXCnN3KY5z3WNGoZ575oHumuiGd1fYz1C+5o5SOUPNkY900i/TnEWMzRWFGM7Uy6U3SutfbI6Y6S5e25t9Pw0XNnvLKb4i1wx7ty44eeUWjD6kanDLM5f6CYiIyTlVxJCcGS0qrsT7LRHnpDgO1b03mpKKznWOP+dKLkmYiUGXTHXmFPobmW9C4z5c872ztyRWvmd6dn2r+5zi1Ksbjd6pe8u90LqcrCjQMlXzFTcNxTUz7yeaqVX+oXJLvW45z+iTSPVUN7j9DjwnoM0Ou+wz0TlD7VzYG9HWO9HmFfvqwRmJokZydWIVdgl4wS67vOLFWs0OhxzQY/8OHBdZPQ54fWtnXadlFWd1/hSbtvg6nl2vXt5br8/v4MsvNFE3L2Nf2vhuX1i1G/+fEDHzXNzW6p3cE4L/AAAA//8BAAD//wdbTDAAeJxiYGYAg//nGIwYsAAAAAAA//8BAAD//y8BAgMAAAA=");
font-family: d2-3579465052-font-regular;
src: url("data:application/font-woff;base64,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");
}
@keyframes dashdraw {
from {
@ -27,78 +27,78 @@
opacity: 0.5;
}
.d2-1870435628 .fill-N1{fill:#0A0F25;}
.d2-1870435628 .fill-N2{fill:#676C7E;}
.d2-1870435628 .fill-N3{fill:#9499AB;}
.d2-1870435628 .fill-N4{fill:#CFD2DD;}
.d2-1870435628 .fill-N5{fill:#DEE1EB;}
.d2-1870435628 .fill-N6{fill:#EEF1F8;}
.d2-1870435628 .fill-N7{fill:#FFFFFF;}
.d2-1870435628 .fill-B1{fill:#0D32B2;}
.d2-1870435628 .fill-B2{fill:#0D32B2;}
.d2-1870435628 .fill-B3{fill:#E3E9FD;}
.d2-1870435628 .fill-B4{fill:#E3E9FD;}
.d2-1870435628 .fill-B5{fill:#EDF0FD;}
.d2-1870435628 .fill-B6{fill:#F7F8FE;}
.d2-1870435628 .fill-AA2{fill:#4A6FF3;}
.d2-1870435628 .fill-AA4{fill:#EDF0FD;}
.d2-1870435628 .fill-AA5{fill:#F7F8FE;}
.d2-1870435628 .fill-AB4{fill:#EDF0FD;}
.d2-1870435628 .fill-AB5{fill:#F7F8FE;}
.d2-1870435628 .stroke-N1{stroke:#0A0F25;}
.d2-1870435628 .stroke-N2{stroke:#676C7E;}
.d2-1870435628 .stroke-N3{stroke:#9499AB;}
.d2-1870435628 .stroke-N4{stroke:#CFD2DD;}
.d2-1870435628 .stroke-N5{stroke:#DEE1EB;}
.d2-1870435628 .stroke-N6{stroke:#EEF1F8;}
.d2-1870435628 .stroke-N7{stroke:#FFFFFF;}
.d2-1870435628 .stroke-B1{stroke:#0D32B2;}
.d2-1870435628 .stroke-B2{stroke:#0D32B2;}
.d2-1870435628 .stroke-B3{stroke:#E3E9FD;}
.d2-1870435628 .stroke-B4{stroke:#E3E9FD;}
.d2-1870435628 .stroke-B5{stroke:#EDF0FD;}
.d2-1870435628 .stroke-B6{stroke:#F7F8FE;}
.d2-1870435628 .stroke-AA2{stroke:#4A6FF3;}
.d2-1870435628 .stroke-AA4{stroke:#EDF0FD;}
.d2-1870435628 .stroke-AA5{stroke:#F7F8FE;}
.d2-1870435628 .stroke-AB4{stroke:#EDF0FD;}
.d2-1870435628 .stroke-AB5{stroke:#F7F8FE;}
.d2-1870435628 .background-color-N1{background-color:#0A0F25;}
.d2-1870435628 .background-color-N2{background-color:#676C7E;}
.d2-1870435628 .background-color-N3{background-color:#9499AB;}
.d2-1870435628 .background-color-N4{background-color:#CFD2DD;}
.d2-1870435628 .background-color-N5{background-color:#DEE1EB;}
.d2-1870435628 .background-color-N6{background-color:#EEF1F8;}
.d2-1870435628 .background-color-N7{background-color:#FFFFFF;}
.d2-1870435628 .background-color-B1{background-color:#0D32B2;}
.d2-1870435628 .background-color-B2{background-color:#0D32B2;}
.d2-1870435628 .background-color-B3{background-color:#E3E9FD;}
.d2-1870435628 .background-color-B4{background-color:#E3E9FD;}
.d2-1870435628 .background-color-B5{background-color:#EDF0FD;}
.d2-1870435628 .background-color-B6{background-color:#F7F8FE;}
.d2-1870435628 .background-color-AA2{background-color:#4A6FF3;}
.d2-1870435628 .background-color-AA4{background-color:#EDF0FD;}
.d2-1870435628 .background-color-AA5{background-color:#F7F8FE;}
.d2-1870435628 .background-color-AB4{background-color:#EDF0FD;}
.d2-1870435628 .background-color-AB5{background-color:#F7F8FE;}
.d2-1870435628 .color-N1{color:#0A0F25;}
.d2-1870435628 .color-N2{color:#676C7E;}
.d2-1870435628 .color-N3{color:#9499AB;}
.d2-1870435628 .color-N4{color:#CFD2DD;}
.d2-1870435628 .color-N5{color:#DEE1EB;}
.d2-1870435628 .color-N6{color:#EEF1F8;}
.d2-1870435628 .color-N7{color:#FFFFFF;}
.d2-1870435628 .color-B1{color:#0D32B2;}
.d2-1870435628 .color-B2{color:#0D32B2;}
.d2-1870435628 .color-B3{color:#E3E9FD;}
.d2-1870435628 .color-B4{color:#E3E9FD;}
.d2-1870435628 .color-B5{color:#EDF0FD;}
.d2-1870435628 .color-B6{color:#F7F8FE;}
.d2-1870435628 .color-AA2{color:#4A6FF3;}
.d2-1870435628 .color-AA4{color:#EDF0FD;}
.d2-1870435628 .color-AA5{color:#F7F8FE;}
.d2-1870435628 .color-AB4{color:#EDF0FD;}
.d2-1870435628 .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="x"><g class="shape" ><rect x="12.000000" y="12.000000" width="60.000000" height="72.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="12.000000" y="12.000000" width="60.000000" height="36.000000" class="class_header fill-N1" /><text x="22.000000" y="37.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">x</text><text x="22.000000" y="71.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">y</text><text x="52.000000" y="71.000000" class="text fill-N2" style="text-anchor:start;font-size:20px" /><text x="62.000000" y="71.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px" /><line x1="12.000000" x2="72.000000" y1="84.000000" y2="84.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="a"><g class="shape" ><rect x="12.000000" y="154.000000" width="60.000000" height="72.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="12.000000" y="154.000000" width="60.000000" height="36.000000" class="class_header fill-N1" /><text x="22.000000" y="179.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">a</text><text x="22.000000" y="213.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">b</text><text x="52.000000" y="213.000000" class="text fill-N2" style="text-anchor:start;font-size:20px" /><text x="62.000000" y="213.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px" /><line x1="12.000000" x2="72.000000" y1="226.000000" y2="226.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="(x -&gt; a)[0]"><marker id="mk-599773101" markerWidth="18.000000" markerHeight="18.000000" refX="15.000000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="2"><circle r="3.300000" cx="5.300000" cy="9.000000" class="connection stroke-B1 fill-N7" stroke-width="2" /><path d="M15.000000,9.000000 24.600000,9.000000 M9.600000,9.000000 24.600000,0.000000 M9.600000,9.000000 24.600000,18.000000" /></g> </marker><path d="M 42.000000 86.000000 L 42.000000 150.000000" fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-end="url(#mk-599773101)" mask="url(#d2-1870435628)" /></g><g transform="translate(56 -4)" class="appendix-icon"><title>I like turtles</title><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
.d2-3579465052 .fill-N1{fill:#0A0F25;}
.d2-3579465052 .fill-N2{fill:#676C7E;}
.d2-3579465052 .fill-N3{fill:#9499AB;}
.d2-3579465052 .fill-N4{fill:#CFD2DD;}
.d2-3579465052 .fill-N5{fill:#DEE1EB;}
.d2-3579465052 .fill-N6{fill:#EEF1F8;}
.d2-3579465052 .fill-N7{fill:#FFFFFF;}
.d2-3579465052 .fill-B1{fill:#0D32B2;}
.d2-3579465052 .fill-B2{fill:#0D32B2;}
.d2-3579465052 .fill-B3{fill:#E3E9FD;}
.d2-3579465052 .fill-B4{fill:#E3E9FD;}
.d2-3579465052 .fill-B5{fill:#EDF0FD;}
.d2-3579465052 .fill-B6{fill:#F7F8FE;}
.d2-3579465052 .fill-AA2{fill:#4A6FF3;}
.d2-3579465052 .fill-AA4{fill:#EDF0FD;}
.d2-3579465052 .fill-AA5{fill:#F7F8FE;}
.d2-3579465052 .fill-AB4{fill:#EDF0FD;}
.d2-3579465052 .fill-AB5{fill:#F7F8FE;}
.d2-3579465052 .stroke-N1{stroke:#0A0F25;}
.d2-3579465052 .stroke-N2{stroke:#676C7E;}
.d2-3579465052 .stroke-N3{stroke:#9499AB;}
.d2-3579465052 .stroke-N4{stroke:#CFD2DD;}
.d2-3579465052 .stroke-N5{stroke:#DEE1EB;}
.d2-3579465052 .stroke-N6{stroke:#EEF1F8;}
.d2-3579465052 .stroke-N7{stroke:#FFFFFF;}
.d2-3579465052 .stroke-B1{stroke:#0D32B2;}
.d2-3579465052 .stroke-B2{stroke:#0D32B2;}
.d2-3579465052 .stroke-B3{stroke:#E3E9FD;}
.d2-3579465052 .stroke-B4{stroke:#E3E9FD;}
.d2-3579465052 .stroke-B5{stroke:#EDF0FD;}
.d2-3579465052 .stroke-B6{stroke:#F7F8FE;}
.d2-3579465052 .stroke-AA2{stroke:#4A6FF3;}
.d2-3579465052 .stroke-AA4{stroke:#EDF0FD;}
.d2-3579465052 .stroke-AA5{stroke:#F7F8FE;}
.d2-3579465052 .stroke-AB4{stroke:#EDF0FD;}
.d2-3579465052 .stroke-AB5{stroke:#F7F8FE;}
.d2-3579465052 .background-color-N1{background-color:#0A0F25;}
.d2-3579465052 .background-color-N2{background-color:#676C7E;}
.d2-3579465052 .background-color-N3{background-color:#9499AB;}
.d2-3579465052 .background-color-N4{background-color:#CFD2DD;}
.d2-3579465052 .background-color-N5{background-color:#DEE1EB;}
.d2-3579465052 .background-color-N6{background-color:#EEF1F8;}
.d2-3579465052 .background-color-N7{background-color:#FFFFFF;}
.d2-3579465052 .background-color-B1{background-color:#0D32B2;}
.d2-3579465052 .background-color-B2{background-color:#0D32B2;}
.d2-3579465052 .background-color-B3{background-color:#E3E9FD;}
.d2-3579465052 .background-color-B4{background-color:#E3E9FD;}
.d2-3579465052 .background-color-B5{background-color:#EDF0FD;}
.d2-3579465052 .background-color-B6{background-color:#F7F8FE;}
.d2-3579465052 .background-color-AA2{background-color:#4A6FF3;}
.d2-3579465052 .background-color-AA4{background-color:#EDF0FD;}
.d2-3579465052 .background-color-AA5{background-color:#F7F8FE;}
.d2-3579465052 .background-color-AB4{background-color:#EDF0FD;}
.d2-3579465052 .background-color-AB5{background-color:#F7F8FE;}
.d2-3579465052 .color-N1{color:#0A0F25;}
.d2-3579465052 .color-N2{color:#676C7E;}
.d2-3579465052 .color-N3{color:#9499AB;}
.d2-3579465052 .color-N4{color:#CFD2DD;}
.d2-3579465052 .color-N5{color:#DEE1EB;}
.d2-3579465052 .color-N6{color:#EEF1F8;}
.d2-3579465052 .color-N7{color:#FFFFFF;}
.d2-3579465052 .color-B1{color:#0D32B2;}
.d2-3579465052 .color-B2{color:#0D32B2;}
.d2-3579465052 .color-B3{color:#E3E9FD;}
.d2-3579465052 .color-B4{color:#E3E9FD;}
.d2-3579465052 .color-B5{color:#EDF0FD;}
.d2-3579465052 .color-B6{color:#F7F8FE;}
.d2-3579465052 .color-AA2{color:#4A6FF3;}
.d2-3579465052 .color-AA4{color:#EDF0FD;}
.d2-3579465052 .color-AA5{color:#F7F8FE;}
.d2-3579465052 .color-AB4{color:#EDF0FD;}
.d2-3579465052 .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="x"><g class="shape" ><rect x="12.000000" y="12.000000" width="103.000000" height="72.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="12.000000" y="12.000000" width="103.000000" height="36.000000" class="class_header fill-N1" /><text x="22.000000" y="37.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">x</text><text x="22.000000" y="71.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">y</text><text x="52.000000" y="71.000000" class="text fill-N2" style="text-anchor:start;font-size:20px" /><text x="105.000000" y="71.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px">PK</text><line x1="12.000000" x2="115.000000" y1="84.000000" y2="84.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="a"><g class="shape" ><rect x="185.000000" y="12.000000" width="101.000000" height="72.000000" class="shape stroke-N1 fill-N7" style="stroke-width:2;" /><rect x="185.000000" y="12.000000" width="101.000000" height="36.000000" class="class_header fill-N1" /><text x="195.000000" y="37.750000" class="text fill-N7" style="text-anchor:start;font-size:24px">a</text><text x="195.000000" y="71.000000" class="text fill-B2" style="text-anchor:start;font-size:20px">b</text><text x="225.000000" y="71.000000" class="text fill-N2" style="text-anchor:start;font-size:20px" /><text x="276.000000" y="71.000000" class="text fill-AA2" style="text-anchor:end;font-size:20px">FK</text><line x1="185.000000" x2="286.000000" y1="84.000000" y2="84.000000" class=" stroke-N1" style="stroke-width:2" /></g></g><g id="(a &lt;-&gt; x)[0]"><marker id="mk-2288727530" markerWidth="18.000000" markerHeight="18.000000" refX="3.000000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g transform="scale(-1) translate(-18.000000, -18.000000)" class="connection stroke-B1 fill-N7" stroke-width="2"><circle r="3.300000" cx="5.300000" cy="9.000000" class="connection stroke-B1 fill-N7" stroke-width="2" /><path d="M15.000000,9.000000 24.600000,9.000000 M9.600000,9.000000 24.600000,0.000000 M9.600000,9.000000 24.600000,18.000000" /></g> </marker><marker id="mk-1268614626" markerWidth="18.000000" markerHeight="18.000000" refX="15.000000" refY="9.000000" viewBox="0.000000 0.000000 18.000000 18.000000" orient="auto" markerUnits="userSpaceOnUse"> <g class="connection stroke-B1 fill-N7" stroke-width="2"><circle r="3.300000" cx="5.300000" cy="9.000000" class="connection stroke-B1 fill-N7" stroke-width="2" /><path d="M15.000000,9.000000 24.600000,9.000000 M13.200000,0.000000 13.200000,18.000000" /></g> </marker><path d="M 181.000000 66.000000 L 119.000000 66.000000" fill="none" class="connection animated-connection stroke-B1" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;" marker-start="url(#mk-2288727530)" marker-end="url(#mk-1268614626)" mask="url(#d2-3579465052)" /></g><g transform="translate(99 -4)" class="appendix-icon"><title>I like turtles</title><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3427_35082111)">
<path d="M16 31.1109C24.3456 31.1109 31.1111 24.3454 31.1111 15.9998C31.1111 7.65415 24.3456 0.888672 16 0.888672C7.65436 0.888672 0.888885 7.65415 0.888885 15.9998C0.888885 24.3454 7.65436 31.1109 16 31.1109Z" fill="white" stroke="#DEE1EB"/>
<path d="M16 26C21.5228 26 26 21.5228 26 16C26 10.4772 21.5228 6 16 6C10.4772 6 6 10.4772 6 16C6 21.5228 10.4772 26 16 26Z" stroke="#2E3346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
@ -111,7 +111,7 @@
</clipPath>
</defs>
</svg>
</g><mask id="d2-1870435628" maskUnits="userSpaceOnUse" x="11" y="-6" width="79" height="233">
<rect x="11" y="-6" width="79" height="233" fill="white"></rect>
</g><mask id="d2-3579465052" maskUnits="userSpaceOnUse" x="11" y="-6" width="276" height="91">
<rect x="11" y="-6" width="276" height="91" fill="white"></rect>
</mask></svg></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 14 KiB

118
e2etests/testdata/stable/sql_tables/dagre/board.exp.json generated vendored
View file

@ -55,7 +55,9 @@
"labelWidth": 23,
"labelHeight": 26
},
"constraint": null,
"constraint": [
"primary_key"
],
"reference": ""
},
{
@ -167,9 +169,7 @@
"labelWidth": 77,
"labelHeight": 26
},
"constraint": [
"primary_key"
],
"constraint": null,
"reference": ""
}
],
@ -193,10 +193,10 @@
"id": "products",
"type": "sql_table",
"pos": {
"x": 311,
"y": 18
"x": 22,
"y": 276
},
"width": 164,
"width": 207,
"height": 180,
"opacity": 1,
"strokeDash": 0,
@ -241,7 +241,9 @@
"labelWidth": 23,
"labelHeight": 26
},
"constraint": null,
"constraint": [
"primary_key"
],
"reference": ""
},
{
@ -349,10 +351,10 @@
"id": "orders",
"type": "sql_table",
"pos": {
"x": 311,
"y": 316
"x": 351,
"y": 165
},
"width": 164,
"width": 207,
"height": 144,
"opacity": 1,
"strokeDash": 0,
@ -397,7 +399,9 @@
"labelWidth": 23,
"labelHeight": 26
},
"constraint": null,
"constraint": [
"primary_key"
],
"reference": ""
},
{
@ -425,7 +429,9 @@
"labelWidth": 23,
"labelHeight": 26
},
"constraint": null,
"constraint": [
"foreign_key"
],
"reference": ""
},
{
@ -453,7 +459,9 @@
"labelWidth": 23,
"labelHeight": 26
},
"constraint": null,
"constraint": [
"foreign_key"
],
"reference": ""
}
],
@ -477,10 +485,10 @@
"id": "shipments",
"type": "sql_table",
"pos": {
"x": 535,
"y": 18
"x": 658,
"y": 147
},
"width": 244,
"width": 287,
"height": 180,
"opacity": 1,
"strokeDash": 0,
@ -525,7 +533,9 @@
"labelWidth": 23,
"labelHeight": 26
},
"constraint": null,
"constraint": [
"primary_key"
],
"reference": ""
},
{
@ -553,7 +563,9 @@
"labelWidth": 23,
"labelHeight": 26
},
"constraint": null,
"constraint": [
"foreign_key"
],
"reference": ""
},
{
@ -632,10 +644,10 @@
],
"connections": [
{
"id": "(users <-> orders)[0]",
"src": "users",
"srcArrow": "triangle",
"dst": "orders",
"id": "(orders -> users)[0]",
"src": "orders",
"srcArrow": "none",
"dst": "users",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
@ -656,20 +668,20 @@
"labelPercentage": 0,
"route": [
{
"x": 125.5,
"y": 216
"x": 369,
"y": 165
},
{
"x": 125.5,
"y": 256
"x": 314.6000061035156,
"y": 119.4000015258789
},
{
"x": 162.6999969482422,
"y": 283
"x": 291,
"y": 108
},
{
"x": 311.5,
"y": 351
"x": 251,
"y": 108
}
],
"isCurve": true,
@ -679,10 +691,10 @@
"zIndex": 0
},
{
"id": "(products <-> orders)[0]",
"src": "products",
"srcArrow": "triangle",
"dst": "orders",
"id": "(orders -> products)[0]",
"src": "orders",
"srcArrow": "none",
"dst": "products",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
@ -703,20 +715,20 @@
"labelPercentage": 0,
"route": [
{
"x": 393,
"y": 198
"x": 369,
"y": 309
},
{
"x": 393,
"y": 252.39999389648438
"x": 314.6000061035156,
"y": 354.6000061035156
},
{
"x": 393,
"y": 276
"x": 286.6000061035156,
"y": 366
},
{
"x": 393,
"y": 316
"x": 229,
"y": 366
}
],
"isCurve": true,
@ -726,9 +738,9 @@
"zIndex": 0
},
{
"id": "(shipments <-> orders)[0]",
"id": "(shipments -> orders)[0]",
"src": "shipments",
"srcArrow": "triangle",
"srcArrow": "none",
"dst": "orders",
"dstArrow": "triangle",
"opacity": 1,
@ -750,20 +762,20 @@
"labelPercentage": 0,
"route": [
{
"x": 657,
"y": 198
"x": 658,
"y": 237
},
{
"x": 657,
"y": 252.39999389648438
"x": 618,
"y": 237
},
{
"x": 620.5999755859375,
"y": 282.79998779296875
"x": 598,
"y": 237
},
{
"x": 475,
"y": 350
"x": 558,
"y": 237
}
],
"isCurve": true,

156
e2etests/testdata/stable/sql_tables/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: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

118
e2etests/testdata/stable/sql_tables/elk/board.exp.json generated vendored
View file

@ -55,7 +55,9 @@
"labelWidth": 23,
"labelHeight": 26
},
"constraint": null,
"constraint": [
"primary_key"
],
"reference": ""
},
{
@ -167,9 +169,7 @@
"labelWidth": 77,
"labelHeight": 26
},
"constraint": [
"primary_key"
],
"constraint": null,
"reference": ""
}
],
@ -193,10 +193,10 @@
"id": "products",
"type": "sql_table",
"pos": {
"x": 283,
"y": 48
"x": 56,
"y": 248
},
"width": 164,
"width": 207,
"height": 180,
"opacity": 1,
"strokeDash": 0,
@ -241,7 +241,9 @@
"labelWidth": 23,
"labelHeight": 26
},
"constraint": null,
"constraint": [
"primary_key"
],
"reference": ""
},
{
@ -349,10 +351,10 @@
"id": "orders",
"type": "sql_table",
"pos": {
"x": 283,
"y": 308
"x": 343,
"y": 76
},
"width": 164,
"width": 207,
"height": 144,
"opacity": 1,
"strokeDash": 0,
@ -397,7 +399,9 @@
"labelWidth": 23,
"labelHeight": 26
},
"constraint": null,
"constraint": [
"primary_key"
],
"reference": ""
},
{
@ -425,7 +429,9 @@
"labelWidth": 23,
"labelHeight": 26
},
"constraint": null,
"constraint": [
"foreign_key"
],
"reference": ""
},
{
@ -453,7 +459,9 @@
"labelWidth": 23,
"labelHeight": 26
},
"constraint": null,
"constraint": [
"foreign_key"
],
"reference": ""
}
],
@ -477,10 +485,10 @@
"id": "shipments",
"type": "sql_table",
"pos": {
"x": 467,
"y": 48
"x": 620,
"y": 40
},
"width": 244,
"width": 287,
"height": 180,
"opacity": 1,
"strokeDash": 0,
@ -525,7 +533,9 @@
"labelWidth": 23,
"labelHeight": 26
},
"constraint": null,
"constraint": [
"primary_key"
],
"reference": ""
},
{
@ -553,7 +563,9 @@
"labelWidth": 23,
"labelHeight": 26
},
"constraint": null,
"constraint": [
"foreign_key"
],
"reference": ""
},
{
@ -632,10 +644,10 @@
],
"connections": [
{
"id": "(users <-> orders)[0]",
"src": "users",
"srcArrow": "triangle",
"dst": "orders",
"id": "(orders -> users)[0]",
"src": "orders",
"srcArrow": "none",
"dst": "users",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
@ -656,20 +668,20 @@
"labelPercentage": 0,
"route": [
{
"x": 137.5,
"y": 228
"x": 343,
"y": 166
},
{
"x": 137.5,
"y": 268
"x": 303,
"y": 166
},
{
"x": 324,
"y": 268
"x": 303,
"y": 66
},
{
"x": 324,
"y": 308
"x": 263,
"y": 66
}
],
"animated": false,
@ -678,10 +690,10 @@
"zIndex": 0
},
{
"id": "(products <-> orders)[0]",
"src": "products",
"srcArrow": "triangle",
"dst": "orders",
"id": "(orders -> products)[0]",
"src": "orders",
"srcArrow": "none",
"dst": "products",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
@ -702,12 +714,20 @@
"labelPercentage": 0,
"route": [
{
"x": 365,
"y": 228
"x": 343,
"y": 202
},
{
"x": 365,
"y": 308
"x": 303,
"y": 202
},
{
"x": 303,
"y": 302
},
{
"x": 263,
"y": 302
}
],
"animated": false,
@ -716,9 +736,9 @@
"zIndex": 0
},
{
"id": "(shipments <-> orders)[0]",
"id": "(shipments -> orders)[0]",
"src": "shipments",
"srcArrow": "triangle",
"srcArrow": "none",
"dst": "orders",
"dstArrow": "triangle",
"opacity": 1,
@ -740,20 +760,12 @@
"labelPercentage": 0,
"route": [
{
"x": 589,
"y": 228
"x": 620,
"y": 130
},
{
"x": 589,
"y": 268
},
{
"x": 406,
"y": 268
},
{
"x": 406,
"y": 308
"x": 550,
"y": 130
}
],
"animated": false,

156
e2etests/testdata/stable/sql_tables/elk/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: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB