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

Merge pull request #521 from alixander/table-class-themes

Browse source 
apply themes to tables and classes, use mono font for class
This commit is contained in:
Alexander Wang 2022-12-24 16:22:32 -08:00 committed by GitHub
commit 3d168f9ddd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
28 changed files with 627 additions and 558 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -8,6 +8,8 @@
#### Improvements 🧹
- Improved label placements for shapes with images to avoid overlapping container labels. [#474](https://github.com/terrastruct/d2/pull/474)
- Themes are applied to sql_table and class shapes. [#521](https://github.com/terrastruct/d2/pull/521)
- `class` shapes use monospaced font. [#521](https://github.com/terrastruct/d2/pull/521)
- Sequence diagram edge group labels have more reasonable padding. [#512](https://github.com/terrastruct/d2/pull/512)
- ELK layout engine preserves order of nodes. [#282](https://github.com/terrastruct/d2/issues/282)

5
d2exporter/export.go
View file

@ -40,6 +40,11 @@ func applyTheme(shape *d2target.Shape, obj *d2graph.Object, theme *d2themes.Them
if obj.Attributes.Shape.Value == d2target.ShapeText {
shape.Color = theme.Colors.Neutrals.N1
}
if obj.Attributes.Shape.Value == d2target.ShapeSQLTable || obj.Attributes.Shape.Value == d2target.ShapeClass {
shape.PrimaryAccentColor = theme.Colors.B2
shape.SecondaryAccentColor = theme.Colors.AA2
shape.NeutralAccentColor = theme.Colors.Neutrals.N2
}
}
func applyStyles(shape *d2target.Shape, obj *d2graph.Object) {

21
d2graph/d2graph.go
View file

@ -392,17 +392,23 @@ func (obj *Object) GetFill(theme *d2themes.Theme) string {
return theme.Colors.Neutrals.N5
}
if strings.EqualFold(shape, d2target.ShapeSQLTable) || strings.EqualFold(shape, d2target.ShapeClass) {
return theme.Colors.Neutrals.N1
}
return theme.Colors.Neutrals.N7
}
func (obj *Object) GetStroke(theme *d2themes.Theme, dashGapSize interface{}) string {
shape := obj.Attributes.Shape.Value
if strings.EqualFold(shape, d2target.ShapeCode) ||
strings.EqualFold(shape, d2target.ShapeClass) ||
strings.EqualFold(shape, d2target.ShapeSQLTable) ||
strings.EqualFold(shape, d2target.ShapeText) {
return theme.Colors.Neutrals.N1
}
if strings.EqualFold(shape, d2target.ShapeClass) ||
strings.EqualFold(shape, d2target.ShapeSQLTable) {
return theme.Colors.Neutrals.N7
}
if dashGapSize != 0.0 {
return theme.Colors.B2
}
@ -451,6 +457,9 @@ func (obj *Object) Text() *d2target.MText {
if obj.Class != nil || obj.SQLTable != nil {
fontSize = d2fonts.FONT_SIZE_XL
}
if obj.Class != nil {
isBold = false
}
return &d2target.MText{
Text: obj.Attributes.Label.Value,
FontSize: fontSize,
@ -907,6 +916,8 @@ func (g *Graph) SetDimensions(mtexts []*d2target.MText, ruler *textmeasure.Ruler
}
}
innerLabelPadding = 0
} else if obj.Attributes.Shape.Value == d2target.ShapeClass {
dims = getTextDimensions(mtexts, ruler, obj.Text(), go2.Pointer(d2fonts.SourceCodePro))
} else {
dims = getTextDimensions(mtexts, ruler, obj.Text(), fontFamily)
}
@ -962,7 +973,7 @@ func (g *Graph) SetDimensions(mtexts []*d2target.MText, ruler *textmeasure.Ruler
maxWidth := dims.Width
for _, f := range obj.Class.Fields {
fdims := getTextDimensions(mtexts, ruler, f.Text(), fontFamily)
fdims := getTextDimensions(mtexts, ruler, f.Text(), go2.Pointer(d2fonts.SourceCodePro))
if fdims == nil {
return fmt.Errorf("dimensions for class field %#v not found", f.Text())
}
@ -972,7 +983,7 @@ func (g *Graph) SetDimensions(mtexts []*d2target.MText, ruler *textmeasure.Ruler
}
}
for _, m := range obj.Class.Methods {
mdims := getTextDimensions(mtexts, ruler, m.Text(), fontFamily)
mdims := getTextDimensions(mtexts, ruler, m.Text(), go2.Pointer(d2fonts.SourceCodePro))
if mdims == nil {
return fmt.Errorf("dimensions for class method %#v not found", m.Text())
}
@ -991,7 +1002,7 @@ func (g *Graph) SetDimensions(mtexts []*d2target.MText, ruler *textmeasure.Ruler
}
if anyRowText != nil {
// 10px of padding top and bottom so text doesn't look squished
rowHeight := getTextDimensions(mtexts, ruler, anyRowText, fontFamily).Height + 20
rowHeight := getTextDimensions(mtexts, ruler, anyRowText, go2.Pointer(d2fonts.SourceCodePro)).Height + 20
obj.Height = float64(rowHeight * (len(obj.Class.Fields) + len(obj.Class.Methods) + 2))
}
// Leave room for padding

66
d2renderers/d2sketch/sketch.go
View file

@ -66,8 +66,13 @@ func DefineFillPattern() string {
func shapeStyle(shape d2target.Shape) string {
out := ""
out += fmt.Sprintf(`fill:%s;`, shape.Fill)
out += fmt.Sprintf(`stroke:%s;`, shape.Stroke)
if shape.Type == d2target.ShapeSQLTable || shape.Type == d2target.ShapeClass {
out += fmt.Sprintf(`fill:%s;`, shape.Stroke)
out += fmt.Sprintf(`stroke:%s;`, shape.Fill)
} else {
out += fmt.Sprintf(`fill:%s;`, shape.Fill)
out += fmt.Sprintf(`stroke:%s;`, shape.Stroke)
}
out += fmt.Sprintf(`opacity:%f;`, shape.Opacity)
out += fmt.Sprintf(`stroke-width:%d;`, shape.StrokeWidth)
if shape.StrokeDash != 0 {
@ -226,10 +231,9 @@ func Table(r *Runner, shape d2target.Shape) (string, error) {
return "", err
}
for _, p := range paths {
// TODO header fill
output += fmt.Sprintf(
`<path class="class_header" transform="translate(%d %d)" d="%s" style="fill:%s" />`,
shape.Pos.X, shape.Pos.Y, p, "#0a0f25",
shape.Pos.X, shape.Pos.Y, p, shape.Fill,
)
}
@ -241,7 +245,6 @@ func Table(r *Runner, shape d2target.Shape) (string, error) {
float64(shape.LabelHeight),
)
// TODO header font color
output += fmt.Sprintf(`<text class="%s" x="%f" y="%f" style="%s">%s</text>`,
"text",
tl.X,
@ -249,7 +252,7 @@ func Table(r *Runner, shape d2target.Shape) (string, error) {
fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s",
"start",
4+shape.FontSize,
"white",
shape.Stroke,
),
svg.EscapeText(shape.Label),
)
@ -276,31 +279,23 @@ func Table(r *Runner, shape d2target.Shape) (string, error) {
float64(shape.FontSize),
)
// TODO theme based
primaryColor := "rgb(13, 50, 178)"
accentColor := "rgb(74, 111, 243)"
neutralColor := "rgb(103, 108, 126)"
output += strings.Join([]string{
fmt.Sprintf(`<text class="text" x="%f" y="%f" style="%s">%s</text>`,
nameTL.X,
nameTL.Y+float64(shape.FontSize)*3/4,
fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "start", float64(shape.FontSize), primaryColor),
fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "start", float64(shape.FontSize), shape.PrimaryAccentColor),
svg.EscapeText(f.Name.Label),
),
// TODO light font
fmt.Sprintf(`<text class="text" x="%f" y="%f" style="%s">%s</text>`,
nameTL.X+float64(longestNameWidth)+2*d2target.NamePadding,
nameTL.Y+float64(shape.FontSize)*3/4,
fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "start", float64(shape.FontSize), neutralColor),
fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "start", float64(shape.FontSize), shape.NeutralAccentColor),
svg.EscapeText(f.Type.Label),
),
fmt.Sprintf(`<text class="text" x="%f" y="%f" style="%s">%s</text>`,
constraintTR.X,
constraintTR.Y+float64(shape.FontSize)*3/4,
fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s;letter-spacing:2px;", "end", float64(shape.FontSize), accentColor),
fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s;letter-spacing:2px;", "end", float64(shape.FontSize), shape.SecondaryAccentColor),
f.ConstraintAbbr(),
),
}, "\n")
@ -316,8 +311,8 @@ func Table(r *Runner, shape d2target.Shape) (string, error) {
}
for _, p := range paths {
output += fmt.Sprintf(
`<path class="class_header" d="%s" style="fill:%s" />`,
p, "#0a0f25",
`<path d="%s" style="fill:%s" />`,
p, shape.Fill,
)
}
}
@ -365,10 +360,9 @@ func Class(r *Runner, shape d2target.Shape) (string, error) {
return "", err
}
for _, p := range paths {
// TODO header fill
output += fmt.Sprintf(
`<path class="class_header" transform="translate(%d %d)" d="%s" style="fill:%s" />`,
shape.Pos.X, shape.Pos.Y, p, "#0a0f25",
shape.Pos.X, shape.Pos.Y, p, shape.Fill,
)
}
@ -378,22 +372,21 @@ func Class(r *Runner, shape d2target.Shape) (string, error) {
)
if shape.Label != "" {
tl := label.InsideMiddleLeft.GetPointOnBox(
tl := label.InsideMiddleCenter.GetPointOnBox(
headerBox,
0,
float64(shape.LabelWidth),
float64(shape.LabelHeight),
)
// TODO header font color
output += fmt.Sprintf(`<text class="%s" x="%f" y="%f" style="%s">%s</text>`,
"text",
"text-mono",
tl.X+float64(shape.LabelWidth)/2,
tl.Y+float64(shape.LabelHeight)*3/4,
fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s",
"middle",
4+shape.FontSize,
"white",
shape.Stroke,
),
svg.EscapeText(shape.Label),
)
@ -402,7 +395,7 @@ func Class(r *Runner, shape d2target.Shape) (string, error) {
rowBox := geo.NewBox(box.TopLeft.Copy(), box.Width, rowHeight)
rowBox.TopLeft.Y += headerBox.Height
for _, f := range shape.Fields {
output += classRow(rowBox, f.VisibilityToken(), f.Name, f.Type, float64(shape.FontSize))
output += classRow(shape, rowBox, f.VisibilityToken(), f.Name, f.Type, float64(shape.FontSize))
rowBox.TopLeft.Y += rowHeight
}
@ -416,19 +409,19 @@ func Class(r *Runner, shape d2target.Shape) (string, error) {
for _, p := range paths {
output += fmt.Sprintf(
`<path class="class_header" d="%s" style="fill:%s" />`,
p, "#0a0f25",
p, shape.Fill,
)
}
for _, m := range shape.Methods {
output += classRow(rowBox, m.VisibilityToken(), m.Name, m.Return, float64(shape.FontSize))
output += classRow(shape, rowBox, m.VisibilityToken(), m.Name, m.Return, float64(shape.FontSize))
rowBox.TopLeft.Y += rowHeight
}
return output, nil
}
func classRow(box *geo.Box, prefix, nameText, typeText string, fontSize float64) string {
func classRow(shape d2target.Shape, box *geo.Box, prefix, nameText, typeText string, fontSize float64) string {
output := ""
prefixTL := label.InsideMiddleLeft.GetPointOnBox(
box,
@ -443,28 +436,25 @@ func classRow(box *geo.Box, prefix, nameText, typeText string, fontSize float64)
fontSize,
)
// TODO theme based
accentColor := "rgb(13, 50, 178)"
output += strings.Join([]string{
fmt.Sprintf(`<text class="text" x="%f" y="%f" style="%s">%s</text>`,
fmt.Sprintf(`<text class="text-mono" x="%f" y="%f" style="%s">%s</text>`,
prefixTL.X,
prefixTL.Y+fontSize*3/4,
fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "start", fontSize, accentColor),
fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "start", fontSize, shape.PrimaryAccentColor),
prefix,
),
fmt.Sprintf(`<text class="text" x="%f" y="%f" style="%s">%s</text>`,
fmt.Sprintf(`<text class="text-mono" x="%f" y="%f" style="%s">%s</text>`,
prefixTL.X+d2target.PrefixWidth,
prefixTL.Y+fontSize*3/4,
fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "start", fontSize, "black"),
fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "start", fontSize, shape.Fill),
svg.EscapeText(nameText),
),
fmt.Sprintf(`<text class="text" x="%f" y="%f" style="%s">%s</text>`,
fmt.Sprintf(`<text class="text-mono" x="%f" y="%f" style="%s">%s</text>`,
typeTR.X,
typeTR.Y+fontSize*3/4,
fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s;", "end", fontSize, accentColor),
fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s;", "end", fontSize, shape.SecondaryAccentColor),
svg.EscapeText(typeText),
),
}, "\n")

2
d2renderers/d2sketch/sketch_test.go
View file

@ -255,7 +255,7 @@ shipments: {
shape: sql_table
id: int
order_id: int
tracking_number: string
tracking_number: string {constraint: primary_key}
status: string
}

38
d2renderers/d2sketch/testdata/class/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: 65 KiB

After

Width:  |  Height:  |  Size: 196 KiB

70
d2renderers/d2sketch/testdata/sql_tables/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: 87 KiB

After

Width:  |  Height:  |  Size: 86 KiB

36
d2renderers/d2svg/class.go
View file

@ -11,9 +11,9 @@ import (
"oss.terrastruct.com/d2/lib/svg"
)
func classHeader(box *geo.Box, text string, textWidth, textHeight, fontSize float64) string {
str := fmt.Sprintf(`<rect class="class_header" x="%f" y="%f" width="%f" height="%f" fill="black" />`,
box.TopLeft.X, box.TopLeft.Y, box.Width, box.Height)
func classHeader(shape d2target.Shape, box *geo.Box, text string, textWidth, textHeight, fontSize float64) string {
str := fmt.Sprintf(`<rect class="class_header" x="%f" y="%f" width="%f" height="%f" fill="%s" />`,
box.TopLeft.X, box.TopLeft.Y, box.Width, box.Height, shape.Fill)
if text != "" {
tl := label.InsideMiddleCenter.GetPointOnBox(
@ -24,14 +24,13 @@ func classHeader(box *geo.Box, text string, textWidth, textHeight, fontSize floa
)
str += fmt.Sprintf(`<text class="%s" x="%f" y="%f" style="%s">%s</text>`,
// TODO use monospace font
"text",
"text-mono",
tl.X+textWidth/2,
tl.Y+textHeight*3/4,
fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s",
fmt.Sprintf(`text-anchor:%s;font-size:%vpx;fill:%s`,
"middle",
4+fontSize,
"white",
shape.Stroke,
),
svg.EscapeText(text),
)
@ -39,7 +38,7 @@ func classHeader(box *geo.Box, text string, textWidth, textHeight, fontSize floa
return str
}
func classRow(box *geo.Box, prefix, nameText, typeText string, fontSize float64) string {
func classRow(shape d2target.Shape, box *geo.Box, prefix, nameText, typeText string, fontSize float64) string {
// Row is made up of prefix, name, and type
// e.g. | + firstName string |
prefixTL := label.InsideMiddleLeft.GetPointOnBox(
@ -54,27 +53,26 @@ func classRow(box *geo.Box, prefix, nameText, typeText string, fontSize float64)
0,
fontSize,
)
accentColor := "rgb(13, 50, 178)"
return strings.Join([]string{
fmt.Sprintf(`<text class="text" x="%f" y="%f" style="%s">%s</text>`,
fmt.Sprintf(`<text class="text-mono" x="%f" y="%f" style="%s">%s</text>`,
prefixTL.X,
prefixTL.Y+fontSize*3/4,
fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "start", fontSize, accentColor),
fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "start", fontSize, shape.PrimaryAccentColor),
prefix,
),
fmt.Sprintf(`<text class="text" x="%f" y="%f" style="%s">%s</text>`,
fmt.Sprintf(`<text class="text-mono" x="%f" y="%f" style="%s">%s</text>`,
prefixTL.X+d2target.PrefixWidth,
prefixTL.Y+fontSize*3/4,
fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "start", fontSize, "black"),
fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "start", fontSize, shape.Fill),
svg.EscapeText(nameText),
),
fmt.Sprintf(`<text class="text" x="%f" y="%f" style="%s">%s</text>`,
fmt.Sprintf(`<text class="text-mono" x="%f" y="%f" style="%s">%s</text>`,
typeTR.X,
typeTR.Y+fontSize*3/4,
fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "end", fontSize, accentColor),
fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "end", fontSize, shape.SecondaryAccentColor),
svg.EscapeText(typeText),
),
}, "\n")
@ -93,14 +91,14 @@ func drawClass(writer io.Writer, targetShape d2target.Shape) {
headerBox := geo.NewBox(box.TopLeft, box.Width, 2*rowHeight)
fmt.Fprint(writer,
classHeader(headerBox, targetShape.Label, float64(targetShape.LabelWidth), float64(targetShape.LabelHeight), float64(targetShape.FontSize)),
classHeader(targetShape, headerBox, targetShape.Label, float64(targetShape.LabelWidth), float64(targetShape.LabelHeight), float64(targetShape.FontSize)),
)
rowBox := geo.NewBox(box.TopLeft.Copy(), box.Width, rowHeight)
rowBox.TopLeft.Y += headerBox.Height
for _, f := range targetShape.Fields {
fmt.Fprint(writer,
classRow(rowBox, f.VisibilityToken(), f.Name, f.Type, float64(targetShape.FontSize)),
classRow(targetShape, rowBox, f.VisibilityToken(), f.Name, f.Type, float64(targetShape.FontSize)),
)
rowBox.TopLeft.Y += rowHeight
}
@ -108,11 +106,11 @@ func drawClass(writer io.Writer, targetShape d2target.Shape) {
fmt.Fprintf(writer, `<line x1="%f" y1="%f" x2="%f" y2="%f" style="%s" />`,
rowBox.TopLeft.X, rowBox.TopLeft.Y,
rowBox.TopLeft.X+rowBox.Width, rowBox.TopLeft.Y,
fmt.Sprintf("stroke-width:1;stroke:%v", targetShape.Stroke))
fmt.Sprintf("stroke-width:1;stroke:%v", targetShape.Fill))
for _, m := range targetShape.Methods {
fmt.Fprint(writer,
classRow(rowBox, m.VisibilityToken(), m.Name, m.Return, float64(targetShape.FontSize)),
classRow(targetShape, rowBox, m.VisibilityToken(), m.Name, m.Return, float64(targetShape.FontSize)),
)
rowBox.TopLeft.Y += rowHeight
}

12
d2renderers/d2svg/d2svg.go
View file

@ -863,8 +863,16 @@ func renderText(text string, x, height float64) string {
func shapeStyle(shape d2target.Shape) string {
out := ""
out += fmt.Sprintf(`fill:%s;`, shape.Fill)
out += fmt.Sprintf(`stroke:%s;`, shape.Stroke)
if shape.Type == d2target.ShapeSQLTable || shape.Type == d2target.ShapeClass {
// Fill is used for header fill in these types
// This fill property is just background of rows
out += fmt.Sprintf(`fill:%s;`, shape.Stroke)
// Stroke (border) of these shapes should match the header fill
out += fmt.Sprintf(`stroke:%s;`, shape.Fill)
} else {
out += fmt.Sprintf(`fill:%s;`, shape.Fill)
out += fmt.Sprintf(`stroke:%s;`, shape.Stroke)
}
out += fmt.Sprintf(`opacity:%f;`, shape.Opacity)
out += fmt.Sprintf(`stroke-width:%d;`, shape.StrokeWidth)
if shape.StrokeDash != 0 {

28
d2renderers/d2svg/table.go
View file

@ -12,9 +12,9 @@ import (
"oss.terrastruct.com/util-go/go2"
)
func tableHeader(box *geo.Box, text string, textWidth, textHeight, fontSize float64) string {
func tableHeader(shape d2target.Shape, box *geo.Box, text string, textWidth, textHeight, fontSize float64) string {
str := fmt.Sprintf(`<rect class="class_header" x="%f" y="%f" width="%f" height="%f" fill="%s" />`,
box.TopLeft.X, box.TopLeft.Y, box.Width, box.Height, "#0a0f25")
box.TopLeft.X, box.TopLeft.Y, box.Width, box.Height, shape.Fill)
if text != "" {
tl := label.InsideMiddleLeft.GetPointOnBox(
@ -31,7 +31,7 @@ func tableHeader(box *geo.Box, text string, textWidth, textHeight, fontSize floa
fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s",
"start",
4+fontSize,
"white",
shape.Stroke,
),
svg.EscapeText(text),
)
@ -39,7 +39,7 @@ func tableHeader(box *geo.Box, text string, textWidth, textHeight, fontSize floa
return str
}
func tableRow(box *geo.Box, nameText, typeText, constraintText string, fontSize, longestNameWidth float64) string {
func tableRow(shape d2target.Shape, box *geo.Box, nameText, typeText, constraintText string, fontSize, longestNameWidth float64) string {
// Row is made up of name, type, and constraint
// e.g. | diagram int FK |
nameTL := label.InsideMiddleLeft.GetPointOnBox(
@ -55,31 +55,25 @@ func tableRow(box *geo.Box, nameText, typeText, constraintText string, fontSize,
fontSize,
)
// TODO theme based
primaryColor := "rgb(13, 50, 178)"
accentColor := "rgb(74, 111, 243)"
neutralColor := "rgb(103, 108, 126)"
return strings.Join([]string{
fmt.Sprintf(`<text class="text" x="%f" y="%f" style="%s">%s</text>`,
nameTL.X,
nameTL.Y+fontSize*3/4,
fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "start", fontSize, primaryColor),
fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "start", fontSize, shape.PrimaryAccentColor),
svg.EscapeText(nameText),
),
// TODO light font
fmt.Sprintf(`<text class="text" x="%f" y="%f" style="%s">%s</text>`,
nameTL.X+longestNameWidth+2*d2target.NamePadding,
nameTL.Y+fontSize*3/4,
fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "start", fontSize, neutralColor),
fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "start", fontSize, shape.NeutralAccentColor),
svg.EscapeText(typeText),
),
fmt.Sprintf(`<text class="text" x="%f" y="%f" style="%s">%s</text>`,
constraintTR.X,
constraintTR.Y+fontSize*3/4,
fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s;letter-spacing:2px;", "end", fontSize, accentColor),
fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s;letter-spacing:2px;", "end", fontSize, shape.SecondaryAccentColor),
constraintText,
),
}, "\n")
@ -98,7 +92,8 @@ func drawTable(writer io.Writer, targetShape d2target.Shape) {
headerBox := geo.NewBox(box.TopLeft, box.Width, rowHeight)
fmt.Fprint(writer,
tableHeader(headerBox, targetShape.Label, float64(targetShape.LabelWidth), float64(targetShape.LabelHeight), float64(targetShape.FontSize)),
tableHeader(targetShape, headerBox, targetShape.Label,
float64(targetShape.LabelWidth), float64(targetShape.LabelHeight), float64(targetShape.FontSize)),
)
var longestNameWidth int
@ -110,12 +105,13 @@ func drawTable(writer io.Writer, targetShape d2target.Shape) {
rowBox.TopLeft.Y += headerBox.Height
for _, f := range targetShape.Columns {
fmt.Fprint(writer,
tableRow(rowBox, f.Name.Label, f.Type.Label, f.ConstraintAbbr(), float64(targetShape.FontSize), float64(longestNameWidth)),
tableRow(targetShape, rowBox, f.Name.Label, f.Type.Label, f.ConstraintAbbr(), float64(targetShape.FontSize), float64(longestNameWidth)),
)
rowBox.TopLeft.Y += rowHeight
fmt.Fprintf(writer, `<line x1="%f" y1="%f" x2="%f" y2="%f" style="stroke-width:2;stroke:#0a0f25" />`,
fmt.Fprintf(writer, `<line x1="%f" y1="%f" x2="%f" y2="%f" style="stroke-width:2;stroke:%s" />`,
rowBox.TopLeft.X, rowBox.TopLeft.Y,
rowBox.TopLeft.X+rowBox.Width, rowBox.TopLeft.Y,
targetShape.Fill,
)
}
}

5
d2target/d2target.go
View file

@ -146,6 +146,11 @@ type Shape struct {
ZIndex int `json:"zIndex"`
Level int `json:"level"`
// These are used for special shapes, sql_table and class
PrimaryAccentColor string `json:"primaryAccentColor,omitempty"`
SecondaryAccentColor string `json:"secondaryAccentColor,omitempty"`
NeutralAccentColor string `json:"neutralAccentColor,omitempty"`
}
func (s *Shape) SetType(t string) {

2
e2etests/stable_test.go
View file

@ -840,7 +840,7 @@ a -> md -> b
name: string
email: string
password: string
last_login: datetime
last_login: datetime { constraint: primary_key }
}
products: {

18
e2etests/testdata/regression/sql_table_overflow/dagre/board.exp.json generated vendored
View file

@ -15,8 +15,8 @@
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#FFFFFF",
"stroke": "#0A0F25",
"fill": "#0A0F25",
"stroke": "#FFFFFF",
"shadow": false,
"3d": false,
"multiple": false,
@ -96,7 +96,10 @@
"labelWidth": 211,
"labelHeight": 36,
"zIndex": 0,
"level": 1
"level": 1,
"primaryAccentColor": "#0D32B2",
"secondaryAccentColor": "#4A6FF3",
"neutralAccentColor": "#676C7E"
},
{
"id": "table_constrained",
@ -111,8 +114,8 @@
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#FFFFFF",
"stroke": "#0A0F25",
"fill": "#0A0F25",
"stroke": "#FFFFFF",
"shadow": false,
"3d": false,
"multiple": false,
@ -192,7 +195,10 @@
"labelWidth": 350,
"labelHeight": 36,
"zIndex": 0,
"level": 1
"level": 1,
"primaryAccentColor": "#0D32B2",
"secondaryAccentColor": "#4A6FF3",
"neutralAccentColor": "#676C7E"
}
],
"connections": []

18
e2etests/testdata/regression/sql_table_overflow/dagre/sketch.exp.svg vendored
View file

@ -18,15 +18,15 @@ width="1388" height="308" viewBox="-100 -100 1388 308"><style type="text/css">
}
]]>
</style><g id="table"><g class="shape" ><rect class="shape" x="0" y="0" width="534" height="108" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="0.000000" y="0.000000" width="534.000000" height="36.000000" fill="#0a0f25" /><text class="text" x="20.000000" y="27.000000" style="text-anchor:start;font-size:24px;fill:white">sql_table_overflow</text><text class="text" x="10.000000" y="59.000000" style="text-anchor:start;font-size:20px;fill:rgb(13, 50, 178)">short</text>
<text class="text" x="272.000000" y="59.000000" style="text-anchor:start;font-size:20px;fill:rgb(103, 108, 126)">loooooooooooooooooooong</text>
<text class="text" x="514.000000" y="59.000000" style="text-anchor:end;font-size:20px;fill:rgb(74, 111, 243);letter-spacing:2px;"></text><line x1="0.000000" y1="72.000000" x2="534.000000" y2="72.000000" style="stroke-width:2;stroke:#0a0f25" /><text class="text" x="10.000000" y="95.000000" style="text-anchor:start;font-size:20px;fill:rgb(13, 50, 178)">loooooooooooooooooooong</text>
<text class="text" x="272.000000" y="95.000000" style="text-anchor:start;font-size:20px;fill:rgb(103, 108, 126)">short</text>
<text class="text" x="514.000000" y="95.000000" style="text-anchor:end;font-size:20px;fill:rgb(74, 111, 243);letter-spacing:2px;"></text><line x1="0.000000" y1="108.000000" x2="534.000000" y2="108.000000" style="stroke-width:2;stroke:#0a0f25" /></g></g><g id="table_constrained"><g class="shape" ><rect class="shape" x="594" y="0" width="594" height="108" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="594.000000" y="0.000000" width="594.000000" height="36.000000" fill="#0a0f25" /><text class="text" x="614.000000" y="27.000000" style="text-anchor:start;font-size:24px;fill:white">sql_table_constrained_overflow</text><text class="text" x="604.000000" y="59.000000" style="text-anchor:start;font-size:20px;fill:rgb(13, 50, 178)">short</text>
<text class="text" x="866.000000" y="59.000000" style="text-anchor:start;font-size:20px;fill:rgb(103, 108, 126)">loooooooooooooooooooong</text>
<text class="text" x="1168.000000" y="59.000000" style="text-anchor:end;font-size:20px;fill:rgb(74, 111, 243);letter-spacing:2px;">UNQ</text><line x1="594.000000" y1="72.000000" x2="1188.000000" y2="72.000000" style="stroke-width:2;stroke:#0a0f25" /><text class="text" x="604.000000" y="95.000000" style="text-anchor:start;font-size:20px;fill:rgb(13, 50, 178)">loooooooooooooooooooong</text>
<text class="text" x="866.000000" y="95.000000" style="text-anchor:start;font-size:20px;fill:rgb(103, 108, 126)">short</text>
<text class="text" x="1168.000000" y="95.000000" style="text-anchor:end;font-size:20px;fill:rgb(74, 111, 243);letter-spacing:2px;">FK</text><line x1="594.000000" y1="108.000000" x2="1188.000000" y2="108.000000" style="stroke-width:2;stroke:#0a0f25" /></g></g><mask id="1631228640" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1388" height="308">
</style><g id="table"><g class="shape" ><rect class="shape" x="0" y="0" width="534" height="108" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="0.000000" y="0.000000" width="534.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="20.000000" y="27.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">sql_table_overflow</text><text class="text" x="10.000000" y="59.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">short</text>
<text class="text" x="272.000000" y="59.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">loooooooooooooooooooong</text>
<text class="text" x="514.000000" y="59.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="0.000000" y1="72.000000" x2="534.000000" y2="72.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="10.000000" y="95.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">loooooooooooooooooooong</text>
<text class="text" x="272.000000" y="95.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">short</text>
<text class="text" x="514.000000" y="95.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="0.000000" y1="108.000000" x2="534.000000" y2="108.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="table_constrained"><g class="shape" ><rect class="shape" x="594" y="0" width="594" height="108" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="594.000000" y="0.000000" width="594.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="614.000000" y="27.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">sql_table_constrained_overflow</text><text class="text" x="604.000000" y="59.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">short</text>
<text class="text" x="866.000000" y="59.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">loooooooooooooooooooong</text>
<text class="text" x="1168.000000" y="59.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;">UNQ</text><line x1="594.000000" y1="72.000000" x2="1188.000000" y2="72.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="604.000000" y="95.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">loooooooooooooooooooong</text>
<text class="text" x="866.000000" y="95.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">short</text>
<text class="text" x="1168.000000" y="95.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;">FK</text><line x1="594.000000" y1="108.000000" x2="1188.000000" y2="108.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><mask id="3570027740" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1388" height="308">
<rect x="-100" y="-100" width="1388" height="308" fill="white"></rect>
</mask><style type="text/css"><![CDATA[

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 327 KiB

After

Width:  |  Height:  |  Size: 327 KiB

18
e2etests/testdata/regression/sql_table_overflow/elk/board.exp.json generated vendored
View file

@ -15,8 +15,8 @@
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#FFFFFF",
"stroke": "#0A0F25",
"fill": "#0A0F25",
"stroke": "#FFFFFF",
"shadow": false,
"3d": false,
"multiple": false,
@ -96,7 +96,10 @@
"labelWidth": 211,
"labelHeight": 36,
"zIndex": 0,
"level": 1
"level": 1,
"primaryAccentColor": "#0D32B2",
"secondaryAccentColor": "#4A6FF3",
"neutralAccentColor": "#676C7E"
},
{
"id": "table_constrained",
@ -111,8 +114,8 @@
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#FFFFFF",
"stroke": "#0A0F25",
"fill": "#0A0F25",
"stroke": "#FFFFFF",
"shadow": false,
"3d": false,
"multiple": false,
@ -192,7 +195,10 @@
"labelWidth": 350,
"labelHeight": 36,
"zIndex": 0,
"level": 1
"level": 1,
"primaryAccentColor": "#0D32B2",
"secondaryAccentColor": "#4A6FF3",
"neutralAccentColor": "#676C7E"
}
],
"connections": []

18
e2etests/testdata/regression/sql_table_overflow/elk/sketch.exp.svg vendored
View file

@ -18,15 +18,15 @@ width="1348" height="308" viewBox="-88 -88 1348 308"><style type="text/css">
}
]]>
</style><g id="table"><g class="shape" ><rect class="shape" x="12" y="12" width="534" height="108" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="12.000000" y="12.000000" width="534.000000" height="36.000000" fill="#0a0f25" /><text class="text" x="32.000000" y="39.000000" style="text-anchor:start;font-size:24px;fill:white">sql_table_overflow</text><text class="text" x="22.000000" y="71.000000" style="text-anchor:start;font-size:20px;fill:rgb(13, 50, 178)">short</text>
<text class="text" x="284.000000" y="71.000000" style="text-anchor:start;font-size:20px;fill:rgb(103, 108, 126)">loooooooooooooooooooong</text>
<text class="text" x="526.000000" y="71.000000" style="text-anchor:end;font-size:20px;fill:rgb(74, 111, 243);letter-spacing:2px;"></text><line x1="12.000000" y1="84.000000" x2="546.000000" y2="84.000000" style="stroke-width:2;stroke:#0a0f25" /><text class="text" x="22.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:rgb(13, 50, 178)">loooooooooooooooooooong</text>
<text class="text" x="284.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:rgb(103, 108, 126)">short</text>
<text class="text" x="526.000000" y="107.000000" style="text-anchor:end;font-size:20px;fill:rgb(74, 111, 243);letter-spacing:2px;"></text><line x1="12.000000" y1="120.000000" x2="546.000000" y2="120.000000" style="stroke-width:2;stroke:#0a0f25" /></g></g><g id="table_constrained"><g class="shape" ><rect class="shape" x="566" y="12" width="594" height="108" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="566.000000" y="12.000000" width="594.000000" height="36.000000" fill="#0a0f25" /><text class="text" x="586.000000" y="39.000000" style="text-anchor:start;font-size:24px;fill:white">sql_table_constrained_overflow</text><text class="text" x="576.000000" y="71.000000" style="text-anchor:start;font-size:20px;fill:rgb(13, 50, 178)">short</text>
<text class="text" x="838.000000" y="71.000000" style="text-anchor:start;font-size:20px;fill:rgb(103, 108, 126)">loooooooooooooooooooong</text>
<text class="text" x="1140.000000" y="71.000000" style="text-anchor:end;font-size:20px;fill:rgb(74, 111, 243);letter-spacing:2px;">UNQ</text><line x1="566.000000" y1="84.000000" x2="1160.000000" y2="84.000000" style="stroke-width:2;stroke:#0a0f25" /><text class="text" x="576.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:rgb(13, 50, 178)">loooooooooooooooooooong</text>
<text class="text" x="838.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:rgb(103, 108, 126)">short</text>
<text class="text" x="1140.000000" y="107.000000" style="text-anchor:end;font-size:20px;fill:rgb(74, 111, 243);letter-spacing:2px;">FK</text><line x1="566.000000" y1="120.000000" x2="1160.000000" y2="120.000000" style="stroke-width:2;stroke:#0a0f25" /></g></g><mask id="1355556118" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1348" height="308">
</style><g id="table"><g class="shape" ><rect class="shape" x="12" y="12" width="534" height="108" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="12.000000" y="12.000000" width="534.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="32.000000" y="39.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">sql_table_overflow</text><text class="text" x="22.000000" y="71.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">short</text>
<text class="text" x="284.000000" y="71.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">loooooooooooooooooooong</text>
<text class="text" x="526.000000" y="71.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="12.000000" y1="84.000000" x2="546.000000" y2="84.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="22.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">loooooooooooooooooooong</text>
<text class="text" x="284.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">short</text>
<text class="text" x="526.000000" y="107.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="12.000000" y1="120.000000" x2="546.000000" y2="120.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="table_constrained"><g class="shape" ><rect class="shape" x="566" y="12" width="594" height="108" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="566.000000" y="12.000000" width="594.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="586.000000" y="39.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">sql_table_constrained_overflow</text><text class="text" x="576.000000" y="71.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">short</text>
<text class="text" x="838.000000" y="71.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">loooooooooooooooooooong</text>
<text class="text" x="1140.000000" y="71.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;">UNQ</text><line x1="566.000000" y1="84.000000" x2="1160.000000" y2="84.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="576.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">loooooooooooooooooooong</text>
<text class="text" x="838.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">short</text>
<text class="text" x="1140.000000" y="107.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;">FK</text><line x1="566.000000" y1="120.000000" x2="1160.000000" y2="120.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><mask id="1110839858" maskUnits="userSpaceOnUse" x="-100" y="-100" width="1348" height="308">
<rect x="-100" y="-100" width="1348" height="308" fill="white"></rect>
</mask><style type="text/css"><![CDATA[

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 327 KiB

After

Width:  |  Height:  |  Size: 327 KiB

13
e2etests/testdata/stable/class/dagre/board.exp.json generated vendored
View file

@ -9,14 +9,14 @@
"x": 0,
"y": 0
},
"width": 339,
"width": 422,
"height": 368,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#FFFFFF",
"stroke": "#0A0F25",
"fill": "#0A0F25",
"stroke": "#FFFFFF",
"shadow": false,
"3d": false,
"multiple": false,
@ -68,10 +68,13 @@
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 150,
"labelWidth": 175,
"labelHeight": 36,
"zIndex": 0,
"level": 1
"level": 1,
"primaryAccentColor": "#0D32B2",
"secondaryAccentColor": "#4A6FF3",
"neutralAccentColor": "#676C7E"
}
],
"connections": []

38
e2etests/testdata/stable/class/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: 327 KiB

After

Width:  |  Height:  |  Size: 184 KiB

13
e2etests/testdata/stable/class/elk/board.exp.json generated vendored
View file

@ -9,14 +9,14 @@
"x": 12,
"y": 12
},
"width": 339,
"width": 422,
"height": 368,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#FFFFFF",
"stroke": "#0A0F25",
"fill": "#0A0F25",
"stroke": "#FFFFFF",
"shadow": false,
"3d": false,
"multiple": false,
@ -68,10 +68,13 @@
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 150,
"labelWidth": 175,
"labelHeight": 36,
"zIndex": 0,
"level": 1
"level": 1,
"primaryAccentColor": "#0D32B2",
"secondaryAccentColor": "#4A6FF3",
"neutralAccentColor": "#676C7E"
}
],
"connections": []

38
e2etests/testdata/stable/class/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: 327 KiB

After

Width:  |  Height:  |  Size: 184 KiB

196
e2etests/testdata/stable/sequence_diagram_all_shapes/dagre/board.exp.json generated vendored
View file

@ -86,17 +86,17 @@
"id": "c",
"type": "class",
"pos": {
"x": 486,
"x": 481,
"y": 74
},
"width": 241,
"width": 302,
"height": 184,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#EDF0FD",
"stroke": "#0A0F25",
"stroke": "#FFFFFF",
"shadow": false,
"3d": false,
"multiple": false,
@ -127,17 +127,20 @@
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 71,
"labelWidth": 104,
"labelHeight": 36,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
"level": 1,
"primaryAccentColor": "#0D32B2",
"secondaryAccentColor": "#4A6FF3",
"neutralAccentColor": "#676C7E"
},
{
"id": "d",
"type": "cloud",
"pos": {
"x": 777,
"x": 833,
"y": 132
},
"width": 174,
@ -177,7 +180,7 @@
"id": "e",
"type": "code",
"pos": {
"x": 1016,
"x": 1072,
"y": 188
},
"width": 196,
@ -217,7 +220,7 @@
"id": "f",
"type": "cylinder",
"pos": {
"x": 1289,
"x": 1345,
"y": 132
},
"width": 150,
@ -257,7 +260,7 @@
"id": "g",
"type": "diamond",
"pos": {
"x": 1539,
"x": 1595,
"y": 132
},
"width": 150,
@ -297,7 +300,7 @@
"id": "h",
"type": "document",
"pos": {
"x": 1789,
"x": 1845,
"y": 132
},
"width": 150,
@ -337,7 +340,7 @@
"id": "i",
"type": "hexagon",
"pos": {
"x": 2025,
"x": 2082,
"y": 132
},
"width": 177,
@ -377,7 +380,7 @@
"id": "j",
"type": "image",
"pos": {
"x": 2289,
"x": 2345,
"y": 109
},
"width": 150,
@ -428,7 +431,7 @@
"id": "k",
"type": "oval",
"pos": {
"x": 2539,
"x": 2595,
"y": 132
},
"width": 150,
@ -468,7 +471,7 @@
"id": "l",
"type": "package",
"pos": {
"x": 2789,
"x": 2845,
"y": 132
},
"width": 150,
@ -508,7 +511,7 @@
"id": "m",
"type": "page",
"pos": {
"x": 3027,
"x": 3084,
"y": 132
},
"width": 173,
@ -548,7 +551,7 @@
"id": "n",
"type": "parallelogram",
"pos": {
"x": 3275,
"x": 3332,
"y": 116
},
"width": 177,
@ -588,7 +591,7 @@
"id": "o",
"type": "person",
"pos": {
"x": 3538,
"x": 3595,
"y": 79
},
"width": 151,
@ -628,7 +631,7 @@
"id": "p",
"type": "queue",
"pos": {
"x": 3784,
"x": 3841,
"y": 132
},
"width": 159,
@ -668,7 +671,7 @@
"id": "q",
"type": "rectangle",
"pos": {
"x": 4032,
"x": 4089,
"y": 95
},
"width": 163,
@ -708,7 +711,7 @@
"id": "r",
"type": "step",
"pos": {
"x": 4260,
"x": 4317,
"y": 132
},
"width": 207,
@ -748,7 +751,7 @@
"id": "s",
"type": "stored_data",
"pos": {
"x": 4539,
"x": 4595,
"y": 132
},
"width": 150,
@ -788,7 +791,7 @@
"id": "t",
"type": "sql_table",
"pos": {
"x": 4783,
"x": 4840,
"y": 150
},
"width": 161,
@ -798,7 +801,7 @@
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#EDF0FD",
"stroke": "#0A0F25",
"stroke": "#FFFFFF",
"shadow": false,
"3d": false,
"multiple": false,
@ -879,7 +882,10 @@
"labelHeight": 36,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
"level": 1,
"primaryAccentColor": "#0D32B2",
"secondaryAccentColor": "#4A6FF3",
"neutralAccentColor": "#676C7E"
}
],
"connections": [
@ -952,7 +958,7 @@
"y": 518
},
{
"x": 606.5,
"x": 632,
"y": 518
}
],
@ -987,11 +993,11 @@
"labelPercentage": 0,
"route": [
{
"x": 606.5,
"x": 632,
"y": 648
},
{
"x": 864,
"x": 920,
"y": 648
}
],
@ -1026,11 +1032,11 @@
"labelPercentage": 0,
"route": [
{
"x": 864,
"x": 920,
"y": 778
},
{
"x": 1114,
"x": 1170,
"y": 778
}
],
@ -1065,11 +1071,11 @@
"labelPercentage": 0,
"route": [
{
"x": 1114,
"x": 1170,
"y": 908
},
{
"x": 1364,
"x": 1420,
"y": 908
}
],
@ -1104,11 +1110,11 @@
"labelPercentage": 0,
"route": [
{
"x": 1364,
"x": 1420,
"y": 1038
},
{
"x": 1614,
"x": 1670,
"y": 1038
}
],
@ -1143,11 +1149,11 @@
"labelPercentage": 0,
"route": [
{
"x": 1614,
"x": 1670,
"y": 1168
},
{
"x": 1864,
"x": 1920,
"y": 1168
}
],
@ -1182,11 +1188,11 @@
"labelPercentage": 0,
"route": [
{
"x": 1864,
"x": 1920,
"y": 1298
},
{
"x": 2113.5,
"x": 2170.5,
"y": 1298
}
],
@ -1221,11 +1227,11 @@
"labelPercentage": 0,
"route": [
{
"x": 2113.5,
"x": 2170.5,
"y": 1428
},
{
"x": 2364,
"x": 2420,
"y": 1428
}
],
@ -1260,11 +1266,11 @@
"labelPercentage": 0,
"route": [
{
"x": 2364,
"x": 2420,
"y": 1558
},
{
"x": 2614,
"x": 2670,
"y": 1558
}
],
@ -1299,11 +1305,11 @@
"labelPercentage": 0,
"route": [
{
"x": 2614,
"x": 2670,
"y": 1688
},
{
"x": 2864,
"x": 2920,
"y": 1688
}
],
@ -1338,11 +1344,11 @@
"labelPercentage": 0,
"route": [
{
"x": 2864,
"x": 2920,
"y": 1818
},
{
"x": 3113.5,
"x": 3170.5,
"y": 1818
}
],
@ -1377,11 +1383,11 @@
"labelPercentage": 0,
"route": [
{
"x": 3113.5,
"x": 3170.5,
"y": 1948
},
{
"x": 3363.5,
"x": 3420.5,
"y": 1948
}
],
@ -1416,11 +1422,11 @@
"labelPercentage": 0,
"route": [
{
"x": 3363.5,
"x": 3420.5,
"y": 2078
},
{
"x": 3613.5,
"x": 3670.5,
"y": 2078
}
],
@ -1455,11 +1461,11 @@
"labelPercentage": 0,
"route": [
{
"x": 3613.5,
"x": 3670.5,
"y": 2208
},
{
"x": 3863.5,
"x": 3920.5,
"y": 2208
}
],
@ -1494,11 +1500,11 @@
"labelPercentage": 0,
"route": [
{
"x": 3863.5,
"x": 3920.5,
"y": 2338
},
{
"x": 4113.5,
"x": 4170.5,
"y": 2338
}
],
@ -1533,11 +1539,11 @@
"labelPercentage": 0,
"route": [
{
"x": 4113.5,
"x": 4170.5,
"y": 2468
},
{
"x": 4363.5,
"x": 4420.5,
"y": 2468
}
],
@ -1572,11 +1578,11 @@
"labelPercentage": 0,
"route": [
{
"x": 4363.5,
"x": 4420.5,
"y": 2598
},
{
"x": 4614,
"x": 4670,
"y": 2598
}
],
@ -1611,11 +1617,11 @@
"labelPercentage": 0,
"route": [
{
"x": 4614,
"x": 4670,
"y": 2728
},
{
"x": 4863.5,
"x": 4920.5,
"y": 2728
}
],
@ -1728,11 +1734,11 @@
"labelPercentage": 0,
"route": [
{
"x": 606.5,
"x": 632,
"y": 258
},
{
"x": 606.5,
"x": 632,
"y": 2858
}
],
@ -1767,11 +1773,11 @@
"labelPercentage": 0,
"route": [
{
"x": 864,
"x": 920,
"y": 258
},
{
"x": 864,
"x": 920,
"y": 2858
}
],
@ -1806,11 +1812,11 @@
"labelPercentage": 0,
"route": [
{
"x": 1114,
"x": 1170,
"y": 258
},
{
"x": 1114,
"x": 1170,
"y": 2858
}
],
@ -1845,11 +1851,11 @@
"labelPercentage": 0,
"route": [
{
"x": 1364,
"x": 1420,
"y": 258
},
{
"x": 1364,
"x": 1420,
"y": 2858
}
],
@ -1884,11 +1890,11 @@
"labelPercentage": 0,
"route": [
{
"x": 1614,
"x": 1670,
"y": 258
},
{
"x": 1614,
"x": 1670,
"y": 2858
}
],
@ -1923,11 +1929,11 @@
"labelPercentage": 0,
"route": [
{
"x": 1864,
"x": 1920,
"y": 258
},
{
"x": 1864,
"x": 1920,
"y": 2858
}
],
@ -1962,11 +1968,11 @@
"labelPercentage": 0,
"route": [
{
"x": 2113.5,
"x": 2170.5,
"y": 258
},
{
"x": 2113.5,
"x": 2170.5,
"y": 2858
}
],
@ -2001,11 +2007,11 @@
"labelPercentage": 0,
"route": [
{
"x": 2364,
"x": 2420,
"y": 263
},
{
"x": 2364,
"x": 2420,
"y": 2858
}
],
@ -2040,11 +2046,11 @@
"labelPercentage": 0,
"route": [
{
"x": 2614,
"x": 2670,
"y": 258
},
{
"x": 2614,
"x": 2670,
"y": 2858
}
],
@ -2079,11 +2085,11 @@
"labelPercentage": 0,
"route": [
{
"x": 2864,
"x": 2920,
"y": 258
},
{
"x": 2864,
"x": 2920,
"y": 2858
}
],
@ -2118,11 +2124,11 @@
"labelPercentage": 0,
"route": [
{
"x": 3113.5,
"x": 3170.5,
"y": 258
},
{
"x": 3113.5,
"x": 3170.5,
"y": 2858
}
],
@ -2157,11 +2163,11 @@
"labelPercentage": 0,
"route": [
{
"x": 3363.5,
"x": 3420.5,
"y": 258
},
{
"x": 3363.5,
"x": 3420.5,
"y": 2858
}
],
@ -2196,11 +2202,11 @@
"labelPercentage": 0,
"route": [
{
"x": 3613.5,
"x": 3670.5,
"y": 263
},
{
"x": 3613.5,
"x": 3670.5,
"y": 2858
}
],
@ -2235,11 +2241,11 @@
"labelPercentage": 0,
"route": [
{
"x": 3863.5,
"x": 3920.5,
"y": 258
},
{
"x": 3863.5,
"x": 3920.5,
"y": 2858
}
],
@ -2274,11 +2280,11 @@
"labelPercentage": 0,
"route": [
{
"x": 4113.5,
"x": 4170.5,
"y": 258
},
{
"x": 4113.5,
"x": 4170.5,
"y": 2858
}
],
@ -2313,11 +2319,11 @@
"labelPercentage": 0,
"route": [
{
"x": 4363.5,
"x": 4420.5,
"y": 258
},
{
"x": 4363.5,
"x": 4420.5,
"y": 2858
}
],
@ -2352,11 +2358,11 @@
"labelPercentage": 0,
"route": [
{
"x": 4614,
"x": 4670,
"y": 258
},
{
"x": 4614,
"x": 4670,
"y": 2858
}
],
@ -2391,11 +2397,11 @@
"labelPercentage": 0,
"route": [
{
"x": 4863.5,
"x": 4920.5,
"y": 258
},
{
"x": 4863.5,
"x": 4920.5,
"y": 2858
}
],

26
e2etests/testdata/stable/sequence_diagram_all_shapes/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: 669 KiB

After

Width:  |  Height:  |  Size: 669 KiB

196
e2etests/testdata/stable/sequence_diagram_all_shapes/elk/board.exp.json generated vendored
View file

@ -86,17 +86,17 @@
"id": "c",
"type": "class",
"pos": {
"x": 486,
"x": 481,
"y": 74
},
"width": 241,
"width": 302,
"height": 184,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#EDF0FD",
"stroke": "#0A0F25",
"stroke": "#FFFFFF",
"shadow": false,
"3d": false,
"multiple": false,
@ -127,17 +127,20 @@
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 71,
"labelWidth": 104,
"labelHeight": 36,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
"level": 1,
"primaryAccentColor": "#0D32B2",
"secondaryAccentColor": "#4A6FF3",
"neutralAccentColor": "#676C7E"
},
{
"id": "d",
"type": "cloud",
"pos": {
"x": 777,
"x": 833,
"y": 132
},
"width": 174,
@ -177,7 +180,7 @@
"id": "e",
"type": "code",
"pos": {
"x": 1016,
"x": 1072,
"y": 188
},
"width": 196,
@ -217,7 +220,7 @@
"id": "f",
"type": "cylinder",
"pos": {
"x": 1289,
"x": 1345,
"y": 132
},
"width": 150,
@ -257,7 +260,7 @@
"id": "g",
"type": "diamond",
"pos": {
"x": 1539,
"x": 1595,
"y": 132
},
"width": 150,
@ -297,7 +300,7 @@
"id": "h",
"type": "document",
"pos": {
"x": 1789,
"x": 1845,
"y": 132
},
"width": 150,
@ -337,7 +340,7 @@
"id": "i",
"type": "hexagon",
"pos": {
"x": 2025,
"x": 2082,
"y": 132
},
"width": 177,
@ -377,7 +380,7 @@
"id": "j",
"type": "image",
"pos": {
"x": 2289,
"x": 2345,
"y": 109
},
"width": 150,
@ -428,7 +431,7 @@
"id": "k",
"type": "oval",
"pos": {
"x": 2539,
"x": 2595,
"y": 132
},
"width": 150,
@ -468,7 +471,7 @@
"id": "l",
"type": "package",
"pos": {
"x": 2789,
"x": 2845,
"y": 132
},
"width": 150,
@ -508,7 +511,7 @@
"id": "m",
"type": "page",
"pos": {
"x": 3027,
"x": 3084,
"y": 132
},
"width": 173,
@ -548,7 +551,7 @@
"id": "n",
"type": "parallelogram",
"pos": {
"x": 3275,
"x": 3332,
"y": 116
},
"width": 177,
@ -588,7 +591,7 @@
"id": "o",
"type": "person",
"pos": {
"x": 3538,
"x": 3595,
"y": 79
},
"width": 151,
@ -628,7 +631,7 @@
"id": "p",
"type": "queue",
"pos": {
"x": 3784,
"x": 3841,
"y": 132
},
"width": 159,
@ -668,7 +671,7 @@
"id": "q",
"type": "rectangle",
"pos": {
"x": 4032,
"x": 4089,
"y": 95
},
"width": 163,
@ -708,7 +711,7 @@
"id": "r",
"type": "step",
"pos": {
"x": 4260,
"x": 4317,
"y": 132
},
"width": 207,
@ -748,7 +751,7 @@
"id": "s",
"type": "stored_data",
"pos": {
"x": 4539,
"x": 4595,
"y": 132
},
"width": 150,
@ -788,7 +791,7 @@
"id": "t",
"type": "sql_table",
"pos": {
"x": 4783,
"x": 4840,
"y": 150
},
"width": 161,
@ -798,7 +801,7 @@
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#EDF0FD",
"stroke": "#0A0F25",
"stroke": "#FFFFFF",
"shadow": false,
"3d": false,
"multiple": false,
@ -879,7 +882,10 @@
"labelHeight": 36,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
"level": 1,
"primaryAccentColor": "#0D32B2",
"secondaryAccentColor": "#4A6FF3",
"neutralAccentColor": "#676C7E"
}
],
"connections": [
@ -952,7 +958,7 @@
"y": 518
},
{
"x": 606.5,
"x": 632,
"y": 518
}
],
@ -987,11 +993,11 @@
"labelPercentage": 0,
"route": [
{
"x": 606.5,
"x": 632,
"y": 648
},
{
"x": 864,
"x": 920,
"y": 648
}
],
@ -1026,11 +1032,11 @@
"labelPercentage": 0,
"route": [
{
"x": 864,
"x": 920,
"y": 778
},
{
"x": 1114,
"x": 1170,
"y": 778
}
],
@ -1065,11 +1071,11 @@
"labelPercentage": 0,
"route": [
{
"x": 1114,
"x": 1170,
"y": 908
},
{
"x": 1364,
"x": 1420,
"y": 908
}
],
@ -1104,11 +1110,11 @@
"labelPercentage": 0,
"route": [
{
"x": 1364,
"x": 1420,
"y": 1038
},
{
"x": 1614,
"x": 1670,
"y": 1038
}
],
@ -1143,11 +1149,11 @@
"labelPercentage": 0,
"route": [
{
"x": 1614,
"x": 1670,
"y": 1168
},
{
"x": 1864,
"x": 1920,
"y": 1168
}
],
@ -1182,11 +1188,11 @@
"labelPercentage": 0,
"route": [
{
"x": 1864,
"x": 1920,
"y": 1298
},
{
"x": 2113.5,
"x": 2170.5,
"y": 1298
}
],
@ -1221,11 +1227,11 @@
"labelPercentage": 0,
"route": [
{
"x": 2113.5,
"x": 2170.5,
"y": 1428
},
{
"x": 2364,
"x": 2420,
"y": 1428
}
],
@ -1260,11 +1266,11 @@
"labelPercentage": 0,
"route": [
{
"x": 2364,
"x": 2420,
"y": 1558
},
{
"x": 2614,
"x": 2670,
"y": 1558
}
],
@ -1299,11 +1305,11 @@
"labelPercentage": 0,
"route": [
{
"x": 2614,
"x": 2670,
"y": 1688
},
{
"x": 2864,
"x": 2920,
"y": 1688
}
],
@ -1338,11 +1344,11 @@
"labelPercentage": 0,
"route": [
{
"x": 2864,
"x": 2920,
"y": 1818
},
{
"x": 3113.5,
"x": 3170.5,
"y": 1818
}
],
@ -1377,11 +1383,11 @@
"labelPercentage": 0,
"route": [
{
"x": 3113.5,
"x": 3170.5,
"y": 1948
},
{
"x": 3363.5,
"x": 3420.5,
"y": 1948
}
],
@ -1416,11 +1422,11 @@
"labelPercentage": 0,
"route": [
{
"x": 3363.5,
"x": 3420.5,
"y": 2078
},
{
"x": 3613.5,
"x": 3670.5,
"y": 2078
}
],
@ -1455,11 +1461,11 @@
"labelPercentage": 0,
"route": [
{
"x": 3613.5,
"x": 3670.5,
"y": 2208
},
{
"x": 3863.5,
"x": 3920.5,
"y": 2208
}
],
@ -1494,11 +1500,11 @@
"labelPercentage": 0,
"route": [
{
"x": 3863.5,
"x": 3920.5,
"y": 2338
},
{
"x": 4113.5,
"x": 4170.5,
"y": 2338
}
],
@ -1533,11 +1539,11 @@
"labelPercentage": 0,
"route": [
{
"x": 4113.5,
"x": 4170.5,
"y": 2468
},
{
"x": 4363.5,
"x": 4420.5,
"y": 2468
}
],
@ -1572,11 +1578,11 @@
"labelPercentage": 0,
"route": [
{
"x": 4363.5,
"x": 4420.5,
"y": 2598
},
{
"x": 4614,
"x": 4670,
"y": 2598
}
],
@ -1611,11 +1617,11 @@
"labelPercentage": 0,
"route": [
{
"x": 4614,
"x": 4670,
"y": 2728
},
{
"x": 4863.5,
"x": 4920.5,
"y": 2728
}
],
@ -1728,11 +1734,11 @@
"labelPercentage": 0,
"route": [
{
"x": 606.5,
"x": 632,
"y": 258
},
{
"x": 606.5,
"x": 632,
"y": 2858
}
],
@ -1767,11 +1773,11 @@
"labelPercentage": 0,
"route": [
{
"x": 864,
"x": 920,
"y": 258
},
{
"x": 864,
"x": 920,
"y": 2858
}
],
@ -1806,11 +1812,11 @@
"labelPercentage": 0,
"route": [
{
"x": 1114,
"x": 1170,
"y": 258
},
{
"x": 1114,
"x": 1170,
"y": 2858
}
],
@ -1845,11 +1851,11 @@
"labelPercentage": 0,
"route": [
{
"x": 1364,
"x": 1420,
"y": 258
},
{
"x": 1364,
"x": 1420,
"y": 2858
}
],
@ -1884,11 +1890,11 @@
"labelPercentage": 0,
"route": [
{
"x": 1614,
"x": 1670,
"y": 258
},
{
"x": 1614,
"x": 1670,
"y": 2858
}
],
@ -1923,11 +1929,11 @@
"labelPercentage": 0,
"route": [
{
"x": 1864,
"x": 1920,
"y": 258
},
{
"x": 1864,
"x": 1920,
"y": 2858
}
],
@ -1962,11 +1968,11 @@
"labelPercentage": 0,
"route": [
{
"x": 2113.5,
"x": 2170.5,
"y": 258
},
{
"x": 2113.5,
"x": 2170.5,
"y": 2858
}
],
@ -2001,11 +2007,11 @@
"labelPercentage": 0,
"route": [
{
"x": 2364,
"x": 2420,
"y": 263
},
{
"x": 2364,
"x": 2420,
"y": 2858
}
],
@ -2040,11 +2046,11 @@
"labelPercentage": 0,
"route": [
{
"x": 2614,
"x": 2670,
"y": 258
},
{
"x": 2614,
"x": 2670,
"y": 2858
}
],
@ -2079,11 +2085,11 @@
"labelPercentage": 0,
"route": [
{
"x": 2864,
"x": 2920,
"y": 258
},
{
"x": 2864,
"x": 2920,
"y": 2858
}
],
@ -2118,11 +2124,11 @@
"labelPercentage": 0,
"route": [
{
"x": 3113.5,
"x": 3170.5,
"y": 258
},
{
"x": 3113.5,
"x": 3170.5,
"y": 2858
}
],
@ -2157,11 +2163,11 @@
"labelPercentage": 0,
"route": [
{
"x": 3363.5,
"x": 3420.5,
"y": 258
},
{
"x": 3363.5,
"x": 3420.5,
"y": 2858
}
],
@ -2196,11 +2202,11 @@
"labelPercentage": 0,
"route": [
{
"x": 3613.5,
"x": 3670.5,
"y": 263
},
{
"x": 3613.5,
"x": 3670.5,
"y": 2858
}
],
@ -2235,11 +2241,11 @@
"labelPercentage": 0,
"route": [
{
"x": 3863.5,
"x": 3920.5,
"y": 258
},
{
"x": 3863.5,
"x": 3920.5,
"y": 2858
}
],
@ -2274,11 +2280,11 @@
"labelPercentage": 0,
"route": [
{
"x": 4113.5,
"x": 4170.5,
"y": 258
},
{
"x": 4113.5,
"x": 4170.5,
"y": 2858
}
],
@ -2313,11 +2319,11 @@
"labelPercentage": 0,
"route": [
{
"x": 4363.5,
"x": 4420.5,
"y": 258
},
{
"x": 4363.5,
"x": 4420.5,
"y": 2858
}
],
@ -2352,11 +2358,11 @@
"labelPercentage": 0,
"route": [
{
"x": 4614,
"x": 4670,
"y": 258
},
{
"x": 4614,
"x": 4670,
"y": 2858
}
],
@ -2391,11 +2397,11 @@
"labelPercentage": 0,
"route": [
{
"x": 4863.5,
"x": 4920.5,
"y": 258
},
{
"x": 4863.5,
"x": 4920.5,
"y": 2858
}
],

26
e2etests/testdata/stable/sequence_diagram_all_shapes/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: 669 KiB

After

Width:  |  Height:  |  Size: 669 KiB

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

@ -9,14 +9,14 @@
"x": 0,
"y": 0
},
"width": 208,
"width": 268,
"height": 216,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#FFFFFF",
"stroke": "#0A0F25",
"fill": "#0A0F25",
"stroke": "#FFFFFF",
"shadow": false,
"3d": false,
"multiple": false,
@ -165,7 +165,7 @@
"labelWidth": 77,
"labelHeight": 26
},
"constraint": "",
"constraint": "primary_key",
"reference": ""
}
],
@ -180,13 +180,16 @@
"labelWidth": 61,
"labelHeight": 36,
"zIndex": 0,
"level": 1
"level": 1,
"primaryAccentColor": "#0D32B2",
"secondaryAccentColor": "#4A6FF3",
"neutralAccentColor": "#676C7E"
},
{
"id": "products",
"type": "sql_table",
"pos": {
"x": 268,
"x": 328,
"y": 18
},
"width": 164,
@ -195,8 +198,8 @@
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#FFFFFF",
"stroke": "#0A0F25",
"fill": "#0A0F25",
"stroke": "#FFFFFF",
"shadow": false,
"3d": false,
"multiple": false,
@ -332,13 +335,16 @@
"labelWidth": 99,
"labelHeight": 36,
"zIndex": 0,
"level": 1
"level": 1,
"primaryAccentColor": "#0D32B2",
"secondaryAccentColor": "#4A6FF3",
"neutralAccentColor": "#676C7E"
},
{
"id": "orders",
"type": "sql_table",
"pos": {
"x": 268,
"x": 328,
"y": 316
},
"width": 164,
@ -347,8 +353,8 @@
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#FFFFFF",
"stroke": "#0A0F25",
"fill": "#0A0F25",
"stroke": "#FFFFFF",
"shadow": false,
"3d": false,
"multiple": false,
@ -456,13 +462,16 @@
"labelWidth": 74,
"labelHeight": 36,
"zIndex": 0,
"level": 1
"level": 1,
"primaryAccentColor": "#0D32B2",
"secondaryAccentColor": "#4A6FF3",
"neutralAccentColor": "#676C7E"
},
{
"id": "shipments",
"type": "sql_table",
"pos": {
"x": 492,
"x": 552,
"y": 18
},
"width": 244,
@ -471,8 +480,8 @@
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#FFFFFF",
"stroke": "#0A0F25",
"fill": "#0A0F25",
"stroke": "#FFFFFF",
"shadow": false,
"3d": false,
"multiple": false,
@ -608,7 +617,10 @@
"labelWidth": 116,
"labelHeight": 36,
"zIndex": 0,
"level": 1
"level": 1,
"primaryAccentColor": "#0D32B2",
"secondaryAccentColor": "#4A6FF3",
"neutralAccentColor": "#676C7E"
}
],
"connections": [
@ -638,20 +650,20 @@
"labelPercentage": 0,
"route": [
{
"x": 104,
"x": 134,
"y": 216
},
{
"x": 104,
"x": 134,
"y": 256
},
{
"x": 136.8,
"y": 282.2
"x": 172.8,
"y": 283.2
},
{
"x": 268,
"y": 347
"x": 328,
"y": 352
}
],
"isCurve": true,
@ -686,19 +698,19 @@
"labelPercentage": 0,
"route": [
{
"x": 350,
"x": 410,
"y": 198
},
{
"x": 350,
"x": 410,
"y": 252.4
},
{
"x": 350,
"x": 410,
"y": 276
},
{
"x": 350,
"x": 410,
"y": 316
}
],
@ -734,19 +746,19 @@
"labelPercentage": 0,
"route": [
{
"x": 614,
"x": 674,
"y": 198
},
{
"x": 614,
"x": 674,
"y": 252.4
},
{
"x": 577.6,
"x": 637.6,
"y": 282.8
},
{
"x": 432,
"x": 492,
"y": 350
}
],

70
e2etests/testdata/stable/sql_tables/dagre/sketch.exp.svg vendored
View file

@ -2,7 +2,7 @@
<svg
style="background: white;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="936" height="660" viewBox="-100 -100 936 660"><style type="text/css">
width="996" height="660" viewBox="-100 -100 996 660"><style type="text/css">
<![CDATA[
.shape {
shape-rendering: geometricPrecision;
@ -18,40 +18,40 @@ width="936" height="660" viewBox="-100 -100 936 660"><style type="text/css">
}
]]>
</style><g id="users"><g class="shape" ><rect class="shape" x="0" y="0" width="208" height="216" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="0.000000" y="0.000000" width="208.000000" height="36.000000" fill="#0a0f25" /><text class="text" x="20.000000" y="27.000000" style="text-anchor:start;font-size:24px;fill:white">users</text><text class="text" x="10.000000" y="59.000000" style="text-anchor:start;font-size:20px;fill:rgb(13, 50, 178)">id</text>
<text class="text" x="111.000000" y="59.000000" style="text-anchor:start;font-size:20px;fill:rgb(103, 108, 126)">int</text>
<text class="text" x="188.000000" y="59.000000" style="text-anchor:end;font-size:20px;fill:rgb(74, 111, 243);letter-spacing:2px;"></text><line x1="0.000000" y1="72.000000" x2="208.000000" y2="72.000000" style="stroke-width:2;stroke:#0a0f25" /><text class="text" x="10.000000" y="95.000000" style="text-anchor:start;font-size:20px;fill:rgb(13, 50, 178)">name</text>
<text class="text" x="111.000000" y="95.000000" style="text-anchor:start;font-size:20px;fill:rgb(103, 108, 126)">string</text>
<text class="text" x="188.000000" y="95.000000" style="text-anchor:end;font-size:20px;fill:rgb(74, 111, 243);letter-spacing:2px;"></text><line x1="0.000000" y1="108.000000" x2="208.000000" y2="108.000000" style="stroke-width:2;stroke:#0a0f25" /><text class="text" x="10.000000" y="131.000000" style="text-anchor:start;font-size:20px;fill:rgb(13, 50, 178)">email</text>
<text class="text" x="111.000000" y="131.000000" style="text-anchor:start;font-size:20px;fill:rgb(103, 108, 126)">string</text>
<text class="text" x="188.000000" y="131.000000" style="text-anchor:end;font-size:20px;fill:rgb(74, 111, 243);letter-spacing:2px;"></text><line x1="0.000000" y1="144.000000" x2="208.000000" y2="144.000000" style="stroke-width:2;stroke:#0a0f25" /><text class="text" x="10.000000" y="167.000000" style="text-anchor:start;font-size:20px;fill:rgb(13, 50, 178)">password</text>
<text class="text" x="111.000000" y="167.000000" style="text-anchor:start;font-size:20px;fill:rgb(103, 108, 126)">string</text>
<text class="text" x="188.000000" y="167.000000" style="text-anchor:end;font-size:20px;fill:rgb(74, 111, 243);letter-spacing:2px;"></text><line x1="0.000000" y1="180.000000" x2="208.000000" y2="180.000000" style="stroke-width:2;stroke:#0a0f25" /><text class="text" x="10.000000" y="203.000000" style="text-anchor:start;font-size:20px;fill:rgb(13, 50, 178)">last_login</text>
<text class="text" x="111.000000" y="203.000000" style="text-anchor:start;font-size:20px;fill:rgb(103, 108, 126)">datetime</text>
<text class="text" x="188.000000" y="203.000000" style="text-anchor:end;font-size:20px;fill:rgb(74, 111, 243);letter-spacing:2px;"></text><line x1="0.000000" y1="216.000000" x2="208.000000" y2="216.000000" style="stroke-width:2;stroke:#0a0f25" /></g></g><g id="products"><g class="shape" ><rect class="shape" x="268" y="18" width="164" height="180" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="268.000000" y="18.000000" width="164.000000" height="36.000000" fill="#0a0f25" /><text class="text" x="288.000000" y="45.000000" style="text-anchor:start;font-size:24px;fill:white">products</text><text class="text" x="278.000000" y="77.000000" style="text-anchor:start;font-size:20px;fill:rgb(13, 50, 178)">id</text>
<text class="text" x="345.000000" y="77.000000" style="text-anchor:start;font-size:20px;fill:rgb(103, 108, 126)">int</text>
<text class="text" x="412.000000" y="77.000000" style="text-anchor:end;font-size:20px;fill:rgb(74, 111, 243);letter-spacing:2px;"></text><line x1="268.000000" y1="90.000000" x2="432.000000" y2="90.000000" style="stroke-width:2;stroke:#0a0f25" /><text class="text" x="278.000000" y="113.000000" style="text-anchor:start;font-size:20px;fill:rgb(13, 50, 178)">price</text>
<text class="text" x="345.000000" y="113.000000" style="text-anchor:start;font-size:20px;fill:rgb(103, 108, 126)">decimal</text>
<text class="text" x="412.000000" y="113.000000" style="text-anchor:end;font-size:20px;fill:rgb(74, 111, 243);letter-spacing:2px;"></text><line x1="268.000000" y1="126.000000" x2="432.000000" y2="126.000000" style="stroke-width:2;stroke:#0a0f25" /><text class="text" x="278.000000" y="149.000000" style="text-anchor:start;font-size:20px;fill:rgb(13, 50, 178)">sku</text>
<text class="text" x="345.000000" y="149.000000" style="text-anchor:start;font-size:20px;fill:rgb(103, 108, 126)">string</text>
<text class="text" x="412.000000" y="149.000000" style="text-anchor:end;font-size:20px;fill:rgb(74, 111, 243);letter-spacing:2px;"></text><line x1="268.000000" y1="162.000000" x2="432.000000" y2="162.000000" style="stroke-width:2;stroke:#0a0f25" /><text class="text" x="278.000000" y="185.000000" style="text-anchor:start;font-size:20px;fill:rgb(13, 50, 178)">name</text>
<text class="text" x="345.000000" y="185.000000" style="text-anchor:start;font-size:20px;fill:rgb(103, 108, 126)">string</text>
<text class="text" x="412.000000" y="185.000000" style="text-anchor:end;font-size:20px;fill:rgb(74, 111, 243);letter-spacing:2px;"></text><line x1="268.000000" y1="198.000000" x2="432.000000" y2="198.000000" style="stroke-width:2;stroke:#0a0f25" /></g></g><g id="orders"><g class="shape" ><rect class="shape" x="268" y="316" width="164" height="144" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="268.000000" y="316.000000" width="164.000000" height="36.000000" fill="#0a0f25" /><text class="text" x="288.000000" y="343.000000" style="text-anchor:start;font-size:24px;fill:white">orders</text><text class="text" x="278.000000" y="375.000000" style="text-anchor:start;font-size:20px;fill:rgb(13, 50, 178)">id</text>
<text class="text" x="389.000000" y="375.000000" style="text-anchor:start;font-size:20px;fill:rgb(103, 108, 126)">int</text>
<text class="text" x="412.000000" y="375.000000" style="text-anchor:end;font-size:20px;fill:rgb(74, 111, 243);letter-spacing:2px;"></text><line x1="268.000000" y1="388.000000" x2="432.000000" y2="388.000000" style="stroke-width:2;stroke:#0a0f25" /><text class="text" x="278.000000" y="411.000000" style="text-anchor:start;font-size:20px;fill:rgb(13, 50, 178)">user_id</text>
<text class="text" x="389.000000" y="411.000000" style="text-anchor:start;font-size:20px;fill:rgb(103, 108, 126)">int</text>
<text class="text" x="412.000000" y="411.000000" style="text-anchor:end;font-size:20px;fill:rgb(74, 111, 243);letter-spacing:2px;"></text><line x1="268.000000" y1="424.000000" x2="432.000000" y2="424.000000" style="stroke-width:2;stroke:#0a0f25" /><text class="text" x="278.000000" y="447.000000" style="text-anchor:start;font-size:20px;fill:rgb(13, 50, 178)">product_id</text>
<text class="text" x="389.000000" y="447.000000" style="text-anchor:start;font-size:20px;fill:rgb(103, 108, 126)">int</text>
<text class="text" x="412.000000" y="447.000000" style="text-anchor:end;font-size:20px;fill:rgb(74, 111, 243);letter-spacing:2px;"></text><line x1="268.000000" y1="460.000000" x2="432.000000" y2="460.000000" style="stroke-width:2;stroke:#0a0f25" /></g></g><g id="shipments"><g class="shape" ><rect class="shape" x="492" y="18" width="244" height="180" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="492.000000" y="18.000000" width="244.000000" height="36.000000" fill="#0a0f25" /><text class="text" x="512.000000" y="45.000000" style="text-anchor:start;font-size:24px;fill:white">shipments</text><text class="text" x="502.000000" y="77.000000" style="text-anchor:start;font-size:20px;fill:rgb(13, 50, 178)">id</text>
<text class="text" x="668.000000" y="77.000000" style="text-anchor:start;font-size:20px;fill:rgb(103, 108, 126)">int</text>
<text class="text" x="716.000000" y="77.000000" style="text-anchor:end;font-size:20px;fill:rgb(74, 111, 243);letter-spacing:2px;"></text><line x1="492.000000" y1="90.000000" x2="736.000000" y2="90.000000" style="stroke-width:2;stroke:#0a0f25" /><text class="text" x="502.000000" y="113.000000" style="text-anchor:start;font-size:20px;fill:rgb(13, 50, 178)">order_id</text>
<text class="text" x="668.000000" y="113.000000" style="text-anchor:start;font-size:20px;fill:rgb(103, 108, 126)">int</text>
<text class="text" x="716.000000" y="113.000000" style="text-anchor:end;font-size:20px;fill:rgb(74, 111, 243);letter-spacing:2px;"></text><line x1="492.000000" y1="126.000000" x2="736.000000" y2="126.000000" style="stroke-width:2;stroke:#0a0f25" /><text class="text" x="502.000000" y="149.000000" style="text-anchor:start;font-size:20px;fill:rgb(13, 50, 178)">tracking_number</text>
<text class="text" x="668.000000" y="149.000000" style="text-anchor:start;font-size:20px;fill:rgb(103, 108, 126)">string</text>
<text class="text" x="716.000000" y="149.000000" style="text-anchor:end;font-size:20px;fill:rgb(74, 111, 243);letter-spacing:2px;"></text><line x1="492.000000" y1="162.000000" x2="736.000000" y2="162.000000" style="stroke-width:2;stroke:#0a0f25" /><text class="text" x="502.000000" y="185.000000" style="text-anchor:start;font-size:20px;fill:rgb(13, 50, 178)">status</text>
<text class="text" x="668.000000" y="185.000000" style="text-anchor:start;font-size:20px;fill:rgb(103, 108, 126)">string</text>
<text class="text" x="716.000000" y="185.000000" style="text-anchor:end;font-size:20px;fill:rgb(74, 111, 243);letter-spacing:2px;"></text><line x1="492.000000" y1="198.000000" x2="736.000000" y2="198.000000" style="stroke-width:2;stroke:#0a0f25" /></g></g><g id="(users &lt;-&gt; orders)[0]"><marker id="mk-2510427236" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 104.000000 220.000000 C 104.000000 256.000000 136.800000 282.200000 264.413587 345.228662" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#3490208275)"/></g><g id="(products &lt;-&gt; orders)[0]"><path d="M 350.000000 202.000000 C 350.000000 252.400000 350.000000 276.000000 350.000000 312.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#3490208275)"/></g><g id="(shipments &lt;-&gt; orders)[0]"><path d="M 614.000000 202.000000 C 614.000000 252.400000 577.600000 282.800000 435.631838 348.323767" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#3490208275)"/></g><mask id="3490208275" maskUnits="userSpaceOnUse" x="-100" y="-100" width="936" height="660">
<rect x="-100" y="-100" width="936" height="660" fill="white"></rect>
</style><g id="users"><g class="shape" ><rect class="shape" x="0" y="0" width="268" height="216" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="0.000000" y="0.000000" width="268.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="20.000000" y="27.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">users</text><text class="text" x="10.000000" y="59.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">id</text>
<text class="text" x="111.000000" y="59.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">int</text>
<text class="text" x="248.000000" y="59.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="0.000000" y1="72.000000" x2="268.000000" y2="72.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="10.000000" y="95.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">name</text>
<text class="text" x="111.000000" y="95.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">string</text>
<text class="text" x="248.000000" y="95.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="0.000000" y1="108.000000" x2="268.000000" y2="108.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="10.000000" y="131.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">email</text>
<text class="text" x="111.000000" y="131.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">string</text>
<text class="text" x="248.000000" y="131.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="0.000000" y1="144.000000" x2="268.000000" y2="144.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="10.000000" y="167.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">password</text>
<text class="text" x="111.000000" y="167.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">string</text>
<text class="text" x="248.000000" y="167.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="0.000000" y1="180.000000" x2="268.000000" y2="180.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="10.000000" y="203.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">last_login</text>
<text class="text" x="111.000000" y="203.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">datetime</text>
<text class="text" x="248.000000" y="203.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;">PK</text><line x1="0.000000" y1="216.000000" x2="268.000000" y2="216.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="products"><g class="shape" ><rect class="shape" x="328" y="18" width="164" height="180" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="328.000000" y="18.000000" width="164.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="348.000000" y="45.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">products</text><text class="text" x="338.000000" y="77.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">id</text>
<text class="text" x="405.000000" y="77.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">int</text>
<text class="text" x="472.000000" y="77.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="328.000000" y1="90.000000" x2="492.000000" y2="90.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="338.000000" y="113.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">price</text>
<text class="text" x="405.000000" y="113.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">decimal</text>
<text class="text" x="472.000000" y="113.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="328.000000" y1="126.000000" x2="492.000000" y2="126.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="338.000000" y="149.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">sku</text>
<text class="text" x="405.000000" y="149.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">string</text>
<text class="text" x="472.000000" y="149.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="328.000000" y1="162.000000" x2="492.000000" y2="162.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="338.000000" y="185.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">name</text>
<text class="text" x="405.000000" y="185.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">string</text>
<text class="text" x="472.000000" y="185.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="328.000000" y1="198.000000" x2="492.000000" y2="198.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="orders"><g class="shape" ><rect class="shape" x="328" y="316" width="164" height="144" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="328.000000" y="316.000000" width="164.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="348.000000" y="343.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">orders</text><text class="text" x="338.000000" y="375.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">id</text>
<text class="text" x="449.000000" y="375.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">int</text>
<text class="text" x="472.000000" y="375.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="328.000000" y1="388.000000" x2="492.000000" y2="388.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="338.000000" y="411.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">user_id</text>
<text class="text" x="449.000000" y="411.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">int</text>
<text class="text" x="472.000000" y="411.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="328.000000" y1="424.000000" x2="492.000000" y2="424.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="338.000000" y="447.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">product_id</text>
<text class="text" x="449.000000" y="447.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">int</text>
<text class="text" x="472.000000" y="447.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="328.000000" y1="460.000000" x2="492.000000" y2="460.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="shipments"><g class="shape" ><rect class="shape" x="552" y="18" width="244" height="180" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="552.000000" y="18.000000" width="244.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="572.000000" y="45.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">shipments</text><text class="text" x="562.000000" y="77.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">id</text>
<text class="text" x="728.000000" y="77.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">int</text>
<text class="text" x="776.000000" y="77.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="552.000000" y1="90.000000" x2="796.000000" y2="90.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="562.000000" y="113.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">order_id</text>
<text class="text" x="728.000000" y="113.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">int</text>
<text class="text" x="776.000000" y="113.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="552.000000" y1="126.000000" x2="796.000000" y2="126.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="562.000000" y="149.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">tracking_number</text>
<text class="text" x="728.000000" y="149.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">string</text>
<text class="text" x="776.000000" y="149.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="552.000000" y1="162.000000" x2="796.000000" y2="162.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="562.000000" y="185.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">status</text>
<text class="text" x="728.000000" y="185.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">string</text>
<text class="text" x="776.000000" y="185.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="552.000000" y1="198.000000" x2="796.000000" y2="198.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="(users &lt;-&gt; orders)[0]"><marker id="mk-2510427236" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 134.000000 220.000000 C 134.000000 256.000000 172.800000 283.200000 324.343201 350.378945" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#3451668275)"/></g><g id="(products &lt;-&gt; orders)[0]"><path d="M 410.000000 202.000000 C 410.000000 252.400000 410.000000 276.000000 410.000000 312.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#3451668275)"/></g><g id="(shipments &lt;-&gt; orders)[0]"><path d="M 674.000000 202.000000 C 674.000000 252.400000 637.600000 282.800000 495.631838 348.323767" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#3451668275)"/></g><mask id="3451668275" maskUnits="userSpaceOnUse" x="-100" y="-100" width="996" height="660">
<rect x="-100" y="-100" width="996" height="660" fill="white"></rect>
</mask><style type="text/css"><![CDATA[
.text {

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 335 KiB

After

Width:  |  Height:  |  Size: 335 KiB

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

@ -9,14 +9,14 @@
"x": 12,
"y": 12
},
"width": 208,
"width": 268,
"height": 216,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#FFFFFF",
"stroke": "#0A0F25",
"fill": "#0A0F25",
"stroke": "#FFFFFF",
"shadow": false,
"3d": false,
"multiple": false,
@ -165,7 +165,7 @@
"labelWidth": 77,
"labelHeight": 26
},
"constraint": "",
"constraint": "primary_key",
"reference": ""
}
],
@ -180,13 +180,16 @@
"labelWidth": 61,
"labelHeight": 36,
"zIndex": 0,
"level": 1
"level": 1,
"primaryAccentColor": "#0D32B2",
"secondaryAccentColor": "#4A6FF3",
"neutralAccentColor": "#676C7E"
},
{
"id": "products",
"type": "sql_table",
"pos": {
"x": 240,
"x": 300,
"y": 48
},
"width": 164,
@ -195,8 +198,8 @@
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#FFFFFF",
"stroke": "#0A0F25",
"fill": "#0A0F25",
"stroke": "#FFFFFF",
"shadow": false,
"3d": false,
"multiple": false,
@ -332,13 +335,16 @@
"labelWidth": 99,
"labelHeight": 36,
"zIndex": 0,
"level": 1
"level": 1,
"primaryAccentColor": "#0D32B2",
"secondaryAccentColor": "#4A6FF3",
"neutralAccentColor": "#676C7E"
},
{
"id": "orders",
"type": "sql_table",
"pos": {
"x": 240,
"x": 300,
"y": 328
},
"width": 164,
@ -347,8 +353,8 @@
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#FFFFFF",
"stroke": "#0A0F25",
"fill": "#0A0F25",
"stroke": "#FFFFFF",
"shadow": false,
"3d": false,
"multiple": false,
@ -456,13 +462,16 @@
"labelWidth": 74,
"labelHeight": 36,
"zIndex": 0,
"level": 1
"level": 1,
"primaryAccentColor": "#0D32B2",
"secondaryAccentColor": "#4A6FF3",
"neutralAccentColor": "#676C7E"
},
{
"id": "shipments",
"type": "sql_table",
"pos": {
"x": 424,
"x": 484,
"y": 48
},
"width": 244,
@ -471,8 +480,8 @@
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#FFFFFF",
"stroke": "#0A0F25",
"fill": "#0A0F25",
"stroke": "#FFFFFF",
"shadow": false,
"3d": false,
"multiple": false,
@ -608,7 +617,10 @@
"labelWidth": 116,
"labelHeight": 36,
"zIndex": 0,
"level": 1
"level": 1,
"primaryAccentColor": "#0D32B2",
"secondaryAccentColor": "#4A6FF3",
"neutralAccentColor": "#676C7E"
}
],
"connections": [
@ -638,19 +650,19 @@
"labelPercentage": 0,
"route": [
{
"x": 116,
"x": 146,
"y": 228
},
{
"x": 116,
"x": 146,
"y": 278
},
{
"x": 281,
"x": 341,
"y": 278
},
{
"x": 281,
"x": 341,
"y": 328
}
],
@ -685,11 +697,11 @@
"labelPercentage": 0,
"route": [
{
"x": 322,
"x": 382,
"y": 228
},
{
"x": 322,
"x": 382,
"y": 328
}
],
@ -724,19 +736,19 @@
"labelPercentage": 0,
"route": [
{
"x": 546,
"x": 606,
"y": 228
},
{
"x": 546,
"x": 606,
"y": 278
},
{
"x": 363,
"x": 423,
"y": 278
},
{
"x": 363,
"x": 423,
"y": 328
}
],

70
e2etests/testdata/stable/sql_tables/elk/sketch.exp.svg vendored
View file

@ -2,7 +2,7 @@
<svg
style="background: white;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="856" height="660" viewBox="-88 -88 856 660"><style type="text/css">
width="916" height="660" viewBox="-88 -88 916 660"><style type="text/css">
<![CDATA[
.shape {
shape-rendering: geometricPrecision;
@ -18,40 +18,40 @@ width="856" height="660" viewBox="-88 -88 856 660"><style type="text/css">
}
]]>
</style><g id="users"><g class="shape" ><rect class="shape" x="12" y="12" width="208" height="216" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="12.000000" y="12.000000" width="208.000000" height="36.000000" fill="#0a0f25" /><text class="text" x="32.000000" y="39.000000" style="text-anchor:start;font-size:24px;fill:white">users</text><text class="text" x="22.000000" y="71.000000" style="text-anchor:start;font-size:20px;fill:rgb(13, 50, 178)">id</text>
<text class="text" x="123.000000" y="71.000000" style="text-anchor:start;font-size:20px;fill:rgb(103, 108, 126)">int</text>
<text class="text" x="200.000000" y="71.000000" style="text-anchor:end;font-size:20px;fill:rgb(74, 111, 243);letter-spacing:2px;"></text><line x1="12.000000" y1="84.000000" x2="220.000000" y2="84.000000" style="stroke-width:2;stroke:#0a0f25" /><text class="text" x="22.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:rgb(13, 50, 178)">name</text>
<text class="text" x="123.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:rgb(103, 108, 126)">string</text>
<text class="text" x="200.000000" y="107.000000" style="text-anchor:end;font-size:20px;fill:rgb(74, 111, 243);letter-spacing:2px;"></text><line x1="12.000000" y1="120.000000" x2="220.000000" y2="120.000000" style="stroke-width:2;stroke:#0a0f25" /><text class="text" x="22.000000" y="143.000000" style="text-anchor:start;font-size:20px;fill:rgb(13, 50, 178)">email</text>
<text class="text" x="123.000000" y="143.000000" style="text-anchor:start;font-size:20px;fill:rgb(103, 108, 126)">string</text>
<text class="text" x="200.000000" y="143.000000" style="text-anchor:end;font-size:20px;fill:rgb(74, 111, 243);letter-spacing:2px;"></text><line x1="12.000000" y1="156.000000" x2="220.000000" y2="156.000000" style="stroke-width:2;stroke:#0a0f25" /><text class="text" x="22.000000" y="179.000000" style="text-anchor:start;font-size:20px;fill:rgb(13, 50, 178)">password</text>
<text class="text" x="123.000000" y="179.000000" style="text-anchor:start;font-size:20px;fill:rgb(103, 108, 126)">string</text>
<text class="text" x="200.000000" y="179.000000" style="text-anchor:end;font-size:20px;fill:rgb(74, 111, 243);letter-spacing:2px;"></text><line x1="12.000000" y1="192.000000" x2="220.000000" y2="192.000000" style="stroke-width:2;stroke:#0a0f25" /><text class="text" x="22.000000" y="215.000000" style="text-anchor:start;font-size:20px;fill:rgb(13, 50, 178)">last_login</text>
<text class="text" x="123.000000" y="215.000000" style="text-anchor:start;font-size:20px;fill:rgb(103, 108, 126)">datetime</text>
<text class="text" x="200.000000" y="215.000000" style="text-anchor:end;font-size:20px;fill:rgb(74, 111, 243);letter-spacing:2px;"></text><line x1="12.000000" y1="228.000000" x2="220.000000" y2="228.000000" style="stroke-width:2;stroke:#0a0f25" /></g></g><g id="products"><g class="shape" ><rect class="shape" x="240" y="48" width="164" height="180" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="240.000000" y="48.000000" width="164.000000" height="36.000000" fill="#0a0f25" /><text class="text" x="260.000000" y="75.000000" style="text-anchor:start;font-size:24px;fill:white">products</text><text class="text" x="250.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:rgb(13, 50, 178)">id</text>
<text class="text" x="317.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:rgb(103, 108, 126)">int</text>
<text class="text" x="384.000000" y="107.000000" style="text-anchor:end;font-size:20px;fill:rgb(74, 111, 243);letter-spacing:2px;"></text><line x1="240.000000" y1="120.000000" x2="404.000000" y2="120.000000" style="stroke-width:2;stroke:#0a0f25" /><text class="text" x="250.000000" y="143.000000" style="text-anchor:start;font-size:20px;fill:rgb(13, 50, 178)">price</text>
<text class="text" x="317.000000" y="143.000000" style="text-anchor:start;font-size:20px;fill:rgb(103, 108, 126)">decimal</text>
<text class="text" x="384.000000" y="143.000000" style="text-anchor:end;font-size:20px;fill:rgb(74, 111, 243);letter-spacing:2px;"></text><line x1="240.000000" y1="156.000000" x2="404.000000" y2="156.000000" style="stroke-width:2;stroke:#0a0f25" /><text class="text" x="250.000000" y="179.000000" style="text-anchor:start;font-size:20px;fill:rgb(13, 50, 178)">sku</text>
<text class="text" x="317.000000" y="179.000000" style="text-anchor:start;font-size:20px;fill:rgb(103, 108, 126)">string</text>
<text class="text" x="384.000000" y="179.000000" style="text-anchor:end;font-size:20px;fill:rgb(74, 111, 243);letter-spacing:2px;"></text><line x1="240.000000" y1="192.000000" x2="404.000000" y2="192.000000" style="stroke-width:2;stroke:#0a0f25" /><text class="text" x="250.000000" y="215.000000" style="text-anchor:start;font-size:20px;fill:rgb(13, 50, 178)">name</text>
<text class="text" x="317.000000" y="215.000000" style="text-anchor:start;font-size:20px;fill:rgb(103, 108, 126)">string</text>
<text class="text" x="384.000000" y="215.000000" style="text-anchor:end;font-size:20px;fill:rgb(74, 111, 243);letter-spacing:2px;"></text><line x1="240.000000" y1="228.000000" x2="404.000000" y2="228.000000" style="stroke-width:2;stroke:#0a0f25" /></g></g><g id="orders"><g class="shape" ><rect class="shape" x="240" y="328" width="164" height="144" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="240.000000" y="328.000000" width="164.000000" height="36.000000" fill="#0a0f25" /><text class="text" x="260.000000" y="355.000000" style="text-anchor:start;font-size:24px;fill:white">orders</text><text class="text" x="250.000000" y="387.000000" style="text-anchor:start;font-size:20px;fill:rgb(13, 50, 178)">id</text>
<text class="text" x="361.000000" y="387.000000" style="text-anchor:start;font-size:20px;fill:rgb(103, 108, 126)">int</text>
<text class="text" x="384.000000" y="387.000000" style="text-anchor:end;font-size:20px;fill:rgb(74, 111, 243);letter-spacing:2px;"></text><line x1="240.000000" y1="400.000000" x2="404.000000" y2="400.000000" style="stroke-width:2;stroke:#0a0f25" /><text class="text" x="250.000000" y="423.000000" style="text-anchor:start;font-size:20px;fill:rgb(13, 50, 178)">user_id</text>
<text class="text" x="361.000000" y="423.000000" style="text-anchor:start;font-size:20px;fill:rgb(103, 108, 126)">int</text>
<text class="text" x="384.000000" y="423.000000" style="text-anchor:end;font-size:20px;fill:rgb(74, 111, 243);letter-spacing:2px;"></text><line x1="240.000000" y1="436.000000" x2="404.000000" y2="436.000000" style="stroke-width:2;stroke:#0a0f25" /><text class="text" x="250.000000" y="459.000000" style="text-anchor:start;font-size:20px;fill:rgb(13, 50, 178)">product_id</text>
<text class="text" x="361.000000" y="459.000000" style="text-anchor:start;font-size:20px;fill:rgb(103, 108, 126)">int</text>
<text class="text" x="384.000000" y="459.000000" style="text-anchor:end;font-size:20px;fill:rgb(74, 111, 243);letter-spacing:2px;"></text><line x1="240.000000" y1="472.000000" x2="404.000000" y2="472.000000" style="stroke-width:2;stroke:#0a0f25" /></g></g><g id="shipments"><g class="shape" ><rect class="shape" x="424" y="48" width="244" height="180" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="424.000000" y="48.000000" width="244.000000" height="36.000000" fill="#0a0f25" /><text class="text" x="444.000000" y="75.000000" style="text-anchor:start;font-size:24px;fill:white">shipments</text><text class="text" x="434.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:rgb(13, 50, 178)">id</text>
<text class="text" x="600.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:rgb(103, 108, 126)">int</text>
<text class="text" x="648.000000" y="107.000000" style="text-anchor:end;font-size:20px;fill:rgb(74, 111, 243);letter-spacing:2px;"></text><line x1="424.000000" y1="120.000000" x2="668.000000" y2="120.000000" style="stroke-width:2;stroke:#0a0f25" /><text class="text" x="434.000000" y="143.000000" style="text-anchor:start;font-size:20px;fill:rgb(13, 50, 178)">order_id</text>
<text class="text" x="600.000000" y="143.000000" style="text-anchor:start;font-size:20px;fill:rgb(103, 108, 126)">int</text>
<text class="text" x="648.000000" y="143.000000" style="text-anchor:end;font-size:20px;fill:rgb(74, 111, 243);letter-spacing:2px;"></text><line x1="424.000000" y1="156.000000" x2="668.000000" y2="156.000000" style="stroke-width:2;stroke:#0a0f25" /><text class="text" x="434.000000" y="179.000000" style="text-anchor:start;font-size:20px;fill:rgb(13, 50, 178)">tracking_number</text>
<text class="text" x="600.000000" y="179.000000" style="text-anchor:start;font-size:20px;fill:rgb(103, 108, 126)">string</text>
<text class="text" x="648.000000" y="179.000000" style="text-anchor:end;font-size:20px;fill:rgb(74, 111, 243);letter-spacing:2px;"></text><line x1="424.000000" y1="192.000000" x2="668.000000" y2="192.000000" style="stroke-width:2;stroke:#0a0f25" /><text class="text" x="434.000000" y="215.000000" style="text-anchor:start;font-size:20px;fill:rgb(13, 50, 178)">status</text>
<text class="text" x="600.000000" y="215.000000" style="text-anchor:start;font-size:20px;fill:rgb(103, 108, 126)">string</text>
<text class="text" x="648.000000" y="215.000000" style="text-anchor:end;font-size:20px;fill:rgb(74, 111, 243);letter-spacing:2px;"></text><line x1="424.000000" y1="228.000000" x2="668.000000" y2="228.000000" style="stroke-width:2;stroke:#0a0f25" /></g></g><g id="(users &lt;-&gt; orders)[0]"><marker id="mk-2510427236" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 116.000000 232.000000 L 116.000000 268.000000 S 116.000000 278.000000 126.000000 278.000000 L 271.000000 278.000000 S 281.000000 278.000000 281.000000 288.000000 L 281.000000 324.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#3591892320)"/></g><g id="(products &lt;-&gt; orders)[0]"><path d="M 322.000000 232.000000 L 322.000000 324.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#3591892320)"/></g><g id="(shipments &lt;-&gt; orders)[0]"><path d="M 546.000000 232.000000 L 546.000000 268.000000 S 546.000000 278.000000 536.000000 278.000000 L 373.000000 278.000000 S 363.000000 278.000000 363.000000 288.000000 L 363.000000 324.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#3591892320)"/></g><mask id="3591892320" maskUnits="userSpaceOnUse" x="-100" y="-100" width="856" height="660">
<rect x="-100" y="-100" width="856" height="660" fill="white"></rect>
</style><g id="users"><g class="shape" ><rect class="shape" x="12" y="12" width="268" height="216" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="12.000000" y="12.000000" width="268.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="32.000000" y="39.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">users</text><text class="text" x="22.000000" y="71.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">id</text>
<text class="text" x="123.000000" y="71.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">int</text>
<text class="text" x="260.000000" y="71.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="12.000000" y1="84.000000" x2="280.000000" y2="84.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="22.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">name</text>
<text class="text" x="123.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">string</text>
<text class="text" x="260.000000" y="107.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="12.000000" y1="120.000000" x2="280.000000" y2="120.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="22.000000" y="143.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">email</text>
<text class="text" x="123.000000" y="143.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">string</text>
<text class="text" x="260.000000" y="143.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="12.000000" y1="156.000000" x2="280.000000" y2="156.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="22.000000" y="179.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">password</text>
<text class="text" x="123.000000" y="179.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">string</text>
<text class="text" x="260.000000" y="179.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="12.000000" y1="192.000000" x2="280.000000" y2="192.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="22.000000" y="215.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">last_login</text>
<text class="text" x="123.000000" y="215.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">datetime</text>
<text class="text" x="260.000000" y="215.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;">PK</text><line x1="12.000000" y1="228.000000" x2="280.000000" y2="228.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="products"><g class="shape" ><rect class="shape" x="300" y="48" width="164" height="180" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="300.000000" y="48.000000" width="164.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="320.000000" y="75.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">products</text><text class="text" x="310.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">id</text>
<text class="text" x="377.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">int</text>
<text class="text" x="444.000000" y="107.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="300.000000" y1="120.000000" x2="464.000000" y2="120.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="310.000000" y="143.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">price</text>
<text class="text" x="377.000000" y="143.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">decimal</text>
<text class="text" x="444.000000" y="143.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="300.000000" y1="156.000000" x2="464.000000" y2="156.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="310.000000" y="179.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">sku</text>
<text class="text" x="377.000000" y="179.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">string</text>
<text class="text" x="444.000000" y="179.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="300.000000" y1="192.000000" x2="464.000000" y2="192.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="310.000000" y="215.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">name</text>
<text class="text" x="377.000000" y="215.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">string</text>
<text class="text" x="444.000000" y="215.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="300.000000" y1="228.000000" x2="464.000000" y2="228.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="orders"><g class="shape" ><rect class="shape" x="300" y="328" width="164" height="144" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="300.000000" y="328.000000" width="164.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="320.000000" y="355.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">orders</text><text class="text" x="310.000000" y="387.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">id</text>
<text class="text" x="421.000000" y="387.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">int</text>
<text class="text" x="444.000000" y="387.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="300.000000" y1="400.000000" x2="464.000000" y2="400.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="310.000000" y="423.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">user_id</text>
<text class="text" x="421.000000" y="423.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">int</text>
<text class="text" x="444.000000" y="423.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="300.000000" y1="436.000000" x2="464.000000" y2="436.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="310.000000" y="459.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">product_id</text>
<text class="text" x="421.000000" y="459.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">int</text>
<text class="text" x="444.000000" y="459.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="300.000000" y1="472.000000" x2="464.000000" y2="472.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="shipments"><g class="shape" ><rect class="shape" x="484" y="48" width="244" height="180" style="fill:#FFFFFF;stroke:#0A0F25;opacity:1.000000;stroke-width:2;"/><rect class="class_header" x="484.000000" y="48.000000" width="244.000000" height="36.000000" fill="#0A0F25" /><text class="text" x="504.000000" y="75.000000" style="text-anchor:start;font-size:24px;fill:#FFFFFF">shipments</text><text class="text" x="494.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">id</text>
<text class="text" x="660.000000" y="107.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">int</text>
<text class="text" x="708.000000" y="107.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="484.000000" y1="120.000000" x2="728.000000" y2="120.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="494.000000" y="143.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">order_id</text>
<text class="text" x="660.000000" y="143.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">int</text>
<text class="text" x="708.000000" y="143.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="484.000000" y1="156.000000" x2="728.000000" y2="156.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="494.000000" y="179.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">tracking_number</text>
<text class="text" x="660.000000" y="179.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">string</text>
<text class="text" x="708.000000" y="179.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="484.000000" y1="192.000000" x2="728.000000" y2="192.000000" style="stroke-width:2;stroke:#0A0F25" /><text class="text" x="494.000000" y="215.000000" style="text-anchor:start;font-size:20px;fill:#0D32B2">status</text>
<text class="text" x="660.000000" y="215.000000" style="text-anchor:start;font-size:20px;fill:#676C7E">string</text>
<text class="text" x="708.000000" y="215.000000" style="text-anchor:end;font-size:20px;fill:#4A6FF3;letter-spacing:2px;"></text><line x1="484.000000" y1="228.000000" x2="728.000000" y2="228.000000" style="stroke-width:2;stroke:#0A0F25" /></g></g><g id="(users &lt;-&gt; orders)[0]"><marker id="mk-2510427236" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" /> </marker><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 146.000000 232.000000 L 146.000000 268.000000 S 146.000000 278.000000 156.000000 278.000000 L 331.000000 278.000000 S 341.000000 278.000000 341.000000 288.000000 L 341.000000 324.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#1979920288)"/></g><g id="(products &lt;-&gt; orders)[0]"><path d="M 382.000000 232.000000 L 382.000000 324.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#1979920288)"/></g><g id="(shipments &lt;-&gt; orders)[0]"><path d="M 606.000000 232.000000 L 606.000000 268.000000 S 606.000000 278.000000 596.000000 278.000000 L 433.000000 278.000000 S 423.000000 278.000000 423.000000 288.000000 L 423.000000 324.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-start="url(#mk-2510427236)" marker-end="url(#mk-3990223579)" mask="url(#1979920288)"/></g><mask id="1979920288" maskUnits="userSpaceOnUse" x="-100" y="-100" width="916" height="660">
<rect x="-100" y="-100" width="916" height="660" fill="white"></rect>
</mask><style type="text/css"><![CDATA[
.text {

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 336 KiB

After

Width:  |  Height:  |  Size: 335 KiB