Merge pull request #1024 from alixander/pattern

implement `fill-pattern`
This commit is contained in:
Alexander Wang 2023-03-14 10:24:17 -07:00 committed by GitHub
commit 32fdc989c7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
42 changed files with 6891 additions and 19 deletions

View file

@ -392,6 +392,8 @@ func compileStyleFieldInit(attrs *d2graph.Attributes, f *d2ir.Field) {
attrs.Style.Stroke = &d2graph.Scalar{MapKey: f.LastPrimaryKey()}
case "fill":
attrs.Style.Fill = &d2graph.Scalar{MapKey: f.LastPrimaryKey()}
case "fill-pattern":
attrs.Style.FillPattern = &d2graph.Scalar{MapKey: f.LastPrimaryKey()}
case "stroke-width":
attrs.Style.StrokeWidth = &d2graph.Scalar{MapKey: f.LastPrimaryKey()}
case "stroke-dash":

View file

@ -242,6 +242,25 @@ containers: {
}
},
},
{
name: "fill-pattern",
text: `x: {
style: {
fill-pattern: dots
}
}
`,
},
{
name: "invalid-fill-pattern",
text: `x: {
style: {
fill-pattern: ddots
}
}
`,
expErr: `d2/testdata/d2compiler/TestCompile/invalid-fill-pattern.d2:3:19: expected "fill-pattern" to be one of: dots`,
},
{
name: "shape_unquoted_hex",

View file

@ -60,6 +60,9 @@ func applyStyles(shape *d2target.Shape, obj *d2graph.Object) {
} else if obj.Attributes.Shape.Value == d2target.ShapeText {
shape.Fill = "transparent"
}
if obj.Attributes.Style.FillPattern != nil {
shape.FillPattern = obj.Attributes.Style.FillPattern.Value
}
if obj.Attributes.Style.Stroke != nil {
shape.Stroke = obj.Attributes.Style.Stroke.Value
}

View file

@ -150,6 +150,7 @@ type Style struct {
Opacity *Scalar `json:"opacity,omitempty"`
Stroke *Scalar `json:"stroke,omitempty"`
Fill *Scalar `json:"fill,omitempty"`
FillPattern *Scalar `json:"fillPattern,omitempty"`
StrokeWidth *Scalar `json:"strokeWidth,omitempty"`
StrokeDash *Scalar `json:"strokeDash,omitempty"`
BorderRadius *Scalar `json:"borderRadius,omitempty"`
@ -194,6 +195,14 @@ func (s *Style) Apply(key, value string) error {
return errors.New(`expected "fill" to be a valid named color ("orange") or a hex code ("#f0ff3a")`)
}
s.Fill.Value = value
case "fill-pattern":
if s.FillPattern == nil {
break
}
if !go2.Contains(FillPatterns, strings.ToLower(value)) {
return fmt.Errorf(`expected "fill-pattern" to be one of: %s`, strings.Join(FillPatterns, ","))
}
s.FillPattern.Value = value
case "stroke-width":
if s.StrokeWidth == nil {
break
@ -1499,6 +1508,7 @@ var StyleKeywords = map[string]struct{}{
"opacity": {},
"stroke": {},
"fill": {},
"fill-pattern": {},
"stroke-width": {},
"stroke-dash": {},
"border-radius": {},
@ -1540,6 +1550,11 @@ var NearConstantsArray = []string{
}
var NearConstants map[string]struct{}
var FillPatterns = []string{
// TODO add lined later
"dots",
}
// BoardKeywords contains the keywords that create new boards.
var BoardKeywords = map[string]struct{}{
"layers": {},

View file

@ -98,6 +98,7 @@ func Rect(r *Runner, shape d2target.Shape) (string, error) {
pathEl := d2themes.NewThemableElement("path")
pathEl.SetTranslate(float64(shape.Pos.X), float64(shape.Pos.Y))
pathEl.Fill, pathEl.Stroke = d2themes.ShapeTheme(shape)
pathEl.FillPattern = shape.FillPattern
pathEl.ClassName = "shape"
pathEl.Style = shape.CSSStyle()
for _, p := range paths {
@ -145,6 +146,7 @@ func DoubleRect(r *Runner, shape d2target.Shape) (string, error) {
pathEl := d2themes.NewThemableElement("path")
pathEl.SetTranslate(float64(shape.Pos.X), float64(shape.Pos.Y))
pathEl.Fill, pathEl.Stroke = d2themes.ShapeTheme(shape)
pathEl.FillPattern = shape.FillPattern
pathEl.ClassName = "shape"
pathEl.Style = shape.CSSStyle()
for _, p := range pathsBigRect {
@ -192,6 +194,7 @@ func Oval(r *Runner, shape d2target.Shape) (string, error) {
pathEl := d2themes.NewThemableElement("path")
pathEl.SetTranslate(float64(shape.Pos.X), float64(shape.Pos.Y))
pathEl.Fill, pathEl.Stroke = d2themes.ShapeTheme(shape)
pathEl.FillPattern = shape.FillPattern
pathEl.ClassName = "shape"
pathEl.Style = shape.CSSStyle()
for _, p := range paths {
@ -242,6 +245,7 @@ func DoubleOval(r *Runner, shape d2target.Shape) (string, error) {
pathEl := d2themes.NewThemableElement("path")
pathEl.SetTranslate(float64(shape.Pos.X), float64(shape.Pos.Y))
pathEl.Fill, pathEl.Stroke = d2themes.ShapeTheme(shape)
pathEl.FillPattern = shape.FillPattern
pathEl.ClassName = "shape"
pathEl.Style = shape.CSSStyle()
for _, p := range pathsBigCircle {
@ -292,6 +296,7 @@ func Paths(r *Runner, shape d2target.Shape, paths []string) (string, error) {
}
pathEl := d2themes.NewThemableElement("path")
pathEl.Fill, pathEl.Stroke = d2themes.ShapeTheme(shape)
pathEl.FillPattern = shape.FillPattern
pathEl.ClassName = "shape"
pathEl.Style = shape.CSSStyle()
for _, p := range sketchPaths {

View file

@ -1058,6 +1058,122 @@ something
}
`,
},
{
name: "dots-real",
script: `
NETWORK: {
style: {
stroke: black
fill-pattern: dots
double-border: true
fill: "#E7E9EE"
font: mono
}
CELL TOWER: {
style: {
stroke: black
fill-pattern: dots
fill: "#F5F6F9"
font: mono
}
satellites: SATELLITES {
shape: stored_data
style: {
font: mono
fill: white
stroke: black
multiple: true
}
}
transmitter: TRANSMITTER {
style: {
font: mono
fill: white
stroke: black
}
}
satellites -> transmitter: SEND {
style.stroke: black
style.font: mono
}
satellites -> transmitter: SEND {
style.stroke: black
style.font: mono
}
satellites -> transmitter: SEND {
style.stroke: black
style.font: mono
}
}
}
`,
},
{
name: "dots-3d",
script: `x: {style.3d: true; style.fill-pattern: dots}
y: {shape: hexagon; style.3d: true; style.fill-pattern: dots}
`,
},
{
name: "dots-multiple",
script: `
rectangle: {shape: "rectangle"; style.fill-pattern: dots; style.multiple: true}
square: {shape: "square"; style.fill-pattern: dots; style.multiple: true}
page: {shape: "page"; style.fill-pattern: dots; style.multiple: true}
parallelogram: {shape: "parallelogram"; style.fill-pattern: dots; style.multiple: true}
document: {shape: "document"; style.fill-pattern: dots; style.multiple: true}
cylinder: {shape: "cylinder"; style.fill-pattern: dots; style.multiple: true}
queue: {shape: "queue"; style.fill-pattern: dots; style.multiple: true}
package: {shape: "package"; style.fill-pattern: dots; style.multiple: true}
step: {shape: "step"; style.fill-pattern: dots; style.multiple: true}
callout: {shape: "callout"; style.fill-pattern: dots; style.multiple: true}
stored_data: {shape: "stored_data"; style.fill-pattern: dots; style.multiple: true}
person: {shape: "person"; style.fill-pattern: dots; style.multiple: true}
diamond: {shape: "diamond"; style.fill-pattern: dots; style.multiple: true}
oval: {shape: "oval"; style.fill-pattern: dots; style.multiple: true}
circle: {shape: "circle"; style.fill-pattern: dots; style.multiple: true}
hexagon: {shape: "hexagon"; style.fill-pattern: dots; style.multiple: true}
cloud: {shape: "cloud"; style.fill-pattern: dots; style.multiple: true}
rectangle -> square -> page
parallelogram -> document -> cylinder
queue -> package -> step
callout -> stored_data -> person
diamond -> oval -> circle
hexagon -> cloud
`,
},
{
name: "dots-all",
script: `
rectangle: {shape: "rectangle"; style.fill-pattern: dots}
square: {shape: "square"; style.fill-pattern: dots}
page: {shape: "page"; style.fill-pattern: dots}
parallelogram: {shape: "parallelogram"; style.fill-pattern: dots}
document: {shape: "document"; style.fill-pattern: dots}
cylinder: {shape: "cylinder"; style.fill-pattern: dots}
queue: {shape: "queue"; style.fill-pattern: dots}
package: {shape: "package"; style.fill-pattern: dots}
step: {shape: "step"; style.fill-pattern: dots}
callout: {shape: "callout"; style.fill-pattern: dots}
stored_data: {shape: "stored_data"; style.fill-pattern: dots}
person: {shape: "person"; style.fill-pattern: dots}
diamond: {shape: "diamond"; style.fill-pattern: dots}
oval: {shape: "oval"; style.fill-pattern: dots}
circle: {shape: "circle"; style.fill-pattern: dots}
hexagon: {shape: "hexagon"; style.fill-pattern: dots}
cloud: {shape: "cloud"; style.fill-pattern: dots}
rectangle -> square -> page
parallelogram -> document -> cylinder
queue -> package -> step
callout -> stored_data -> person
diamond -> oval -> circle
hexagon -> cloud
`,
},
}
runa(t, tcs)
}

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 228 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 333 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 336 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 316 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 316 KiB

View file

@ -59,6 +59,9 @@ var baseStylesheet string
//go:embed github-markdown.css
var mdCSS string
//go:embed dots.txt
var dots string
type RenderOpts struct {
Pad int
Sketch bool
@ -621,21 +624,22 @@ func renderArrowheadLabel(connection d2target.Connection, text string, position,
return textEl.Render()
}
func renderOval(tl *geo.Point, width, height float64, fill, stroke, style string) string {
func renderOval(tl *geo.Point, width, height float64, fill, fillPattern, stroke, style string) string {
el := d2themes.NewThemableElement("ellipse")
el.Rx = width / 2
el.Ry = height / 2
el.Cx = tl.X + el.Rx
el.Cy = tl.Y + el.Ry
el.Fill, el.Stroke = fill, stroke
el.FillPattern = fillPattern
el.ClassName = "shape"
el.Style = style
return el.Render()
}
func renderDoubleOval(tl *geo.Point, width, height float64, fill, stroke, style string) string {
func renderDoubleOval(tl *geo.Point, width, height float64, fill, fillStroke, stroke, style string) string {
var innerTL *geo.Point = tl.AddVector(geo.NewVector(d2target.INNER_BORDER_OFFSET, d2target.INNER_BORDER_OFFSET))
return renderOval(tl, width, height, fill, stroke, style) + renderOval(innerTL, width-10, height-10, fill, stroke, style)
return renderOval(tl, width, height, fill, fillStroke, stroke, style) + renderOval(innerTL, width-10, height-10, fill, "", stroke, style)
}
func defineShadowFilter(writer io.Writer) {
@ -713,6 +717,7 @@ func render3dRect(targetShape d2target.Shape) string {
mainShape.SetMaskUrl(maskID)
mainShapeFill, _ := d2themes.ShapeTheme(targetShape)
mainShape.Fill = mainShapeFill
mainShape.FillPattern = targetShape.FillPattern
mainShape.Stroke = color.None
mainShape.Style = targetShape.CSSStyle()
mainShapeRendered := mainShape.Render()
@ -833,6 +838,7 @@ func render3dHexagon(targetShape d2target.Shape) string {
mainShape.Points = mainPointsPoly
mainShape.SetMaskUrl(maskID)
mainShapeFill, _ := d2themes.ShapeTheme(targetShape)
mainShape.FillPattern = targetShape.FillPattern
mainShape.Fill = mainShapeFill
mainShape.Stroke = color.None
mainShape.Style = targetShape.CSSStyle()
@ -952,7 +958,7 @@ func drawShape(writer io.Writer, diagramHash string, targetShape d2target.Shape,
case d2target.ShapeOval:
if targetShape.DoubleBorder {
if targetShape.Multiple {
fmt.Fprint(writer, renderDoubleOval(multipleTL, width, height, fill, stroke, style))
fmt.Fprint(writer, renderDoubleOval(multipleTL, width, height, fill, "", stroke, style))
}
if sketchRunner != nil {
out, err := d2sketch.DoubleOval(sketchRunner, targetShape)
@ -961,11 +967,11 @@ func drawShape(writer io.Writer, diagramHash string, targetShape d2target.Shape,
}
fmt.Fprint(writer, out)
} else {
fmt.Fprint(writer, renderDoubleOval(tl, width, height, fill, stroke, style))
fmt.Fprint(writer, renderDoubleOval(tl, width, height, fill, targetShape.FillPattern, stroke, style))
}
} else {
if targetShape.Multiple {
fmt.Fprint(writer, renderOval(multipleTL, width, height, fill, stroke, style))
fmt.Fprint(writer, renderOval(multipleTL, width, height, fill, "", stroke, style))
}
if sketchRunner != nil {
out, err := d2sketch.Oval(sketchRunner, targetShape)
@ -974,7 +980,7 @@ func drawShape(writer io.Writer, diagramHash string, targetShape d2target.Shape,
}
fmt.Fprint(writer, out)
} else {
fmt.Fprint(writer, renderOval(tl, width, height, fill, stroke, style))
fmt.Fprint(writer, renderOval(tl, width, height, fill, targetShape.FillPattern, stroke, style))
}
}
@ -1027,6 +1033,7 @@ func drawShape(writer io.Writer, diagramHash string, targetShape d2target.Shape,
el.Width = float64(targetShape.Width)
el.Height = float64(targetShape.Height)
el.Fill = fill
el.FillPattern = targetShape.FillPattern
el.Stroke = stroke
el.Style = style
el.Attributes = rx
@ -1040,6 +1047,7 @@ func drawShape(writer io.Writer, diagramHash string, targetShape d2target.Shape,
el.Width = float64(targetShape.Width)
el.Height = float64(targetShape.Height)
el.Fill = fill
el.FillPattern = targetShape.FillPattern
el.Stroke = stroke
el.Style = style
el.Attributes = rx
@ -1069,6 +1077,7 @@ func drawShape(writer io.Writer, diagramHash string, targetShape d2target.Shape,
el.Width = float64(targetShape.Width)
el.Height = float64(targetShape.Height)
el.Fill = fill
el.FillPattern = targetShape.FillPattern
el.Stroke = stroke
el.Style = style
el.Attributes = rx
@ -1079,7 +1088,7 @@ func drawShape(writer io.Writer, diagramHash string, targetShape d2target.Shape,
el.Y = float64(targetShape.Pos.Y + d2target.INNER_BORDER_OFFSET)
el.Width = float64(targetShape.Width - 2*d2target.INNER_BORDER_OFFSET)
el.Height = float64(targetShape.Height - 2*d2target.INNER_BORDER_OFFSET)
el.Fill = fill
el.Fill = "transparent"
el.Stroke = stroke
el.Style = style
el.Attributes = rx
@ -1112,6 +1121,7 @@ func drawShape(writer io.Writer, diagramHash string, targetShape d2target.Shape,
} else {
el := d2themes.NewThemableElement("path")
el.Fill = fill
el.FillPattern = targetShape.FillPattern
el.Stroke = stroke
el.Style = style
for _, pathData := range s.GetSVGPathData() {
@ -1143,6 +1153,7 @@ func drawShape(writer io.Writer, diagramHash string, targetShape d2target.Shape,
} else {
el := d2themes.NewThemableElement("path")
el.Fill = fill
el.FillPattern = targetShape.FillPattern
el.Stroke = stroke
el.Style = style
for _, pathData := range s.GetSVGPathData() {
@ -1720,6 +1731,7 @@ func Render(diagram *d2target.Diagram, opts *RenderOpts) ([]byte, error) {
css = strings.ReplaceAll(css, "font-regular", fmt.Sprintf("%s-font-regular", diagramHash))
fmt.Fprintf(upperBuf, `<style type="text/css">%s</style>`, css)
}
if sketchRunner != nil {
d2sketch.DefineFillPatterns(upperBuf)
}
@ -1737,6 +1749,7 @@ func Render(diagram *d2target.Diagram, opts *RenderOpts) ([]byte, error) {
backgroundEl.Height = float64(h)
backgroundEl.Fill = diagram.Root.Fill
backgroundEl.Stroke = diagram.Root.Stroke
backgroundEl.FillPattern = diagram.Root.FillPattern
backgroundEl.Rx = float64(diagram.Root.BorderRadius)
if diagram.Root.StrokeDash != 0 {
dashSize, gapSize := svg.GetStrokeDashAttributes(float64(diagram.Root.StrokeWidth), diagram.Root.StrokeDash)
@ -1775,6 +1788,20 @@ func Render(diagram *d2target.Diagram, opts *RenderOpts) ([]byte, error) {
h += int(math.Ceil(float64(diagram.Root.StrokeWidth)/2.) * 2.)
}
bufStr := buf.String()
if strings.Contains(bufStr, "dots-overlay") || diagram.Root.FillPattern != "" {
fmt.Fprint(upperBuf, `<style type="text/css"><![CDATA[`)
fmt.Fprint(upperBuf, `
.dots-overlay {
fill: url(#dots);
mix-blend-mode: multiply;
}`)
fmt.Fprint(upperBuf, `]]></style>`)
fmt.Fprint(upperBuf, "<defs>")
fmt.Fprintf(upperBuf, dots)
fmt.Fprint(upperBuf, "</defs>")
}
var dimensions string
if setDimensions {
dimensions = fmt.Sprintf(` width="%d" height="%d"`, w, h)

View file

@ -0,0 +1,29 @@
<pattern id="dots" x="0" y="0" width="15" height="15" patternUnits="userSpaceOnUse">
<g style="mix-blend-mode:multiply" opacity="0.1">
<rect x="2" y="2" width="1" height="1" fill="#0A0F25"/>
</g>
<g style="mix-blend-mode:multiply" opacity="0.1">
<rect x="12" y="2" width="1" height="1" fill="#0A0F25"/>
</g>
<g style="mix-blend-mode:multiply" opacity="0.1">
<rect x="12" y="12" width="1" height="1" fill="#0A0F25"/>
</g>
<g style="mix-blend-mode:multiply" opacity="0.1">
<rect x="2" y="12" width="1" height="1" fill="#0A0F25"/>
</g>
<g style="mix-blend-mode:multiply" opacity="0.1">
<rect x="2" y="7" width="1" height="1" fill="#0A0F25"/>
</g>
<g style="mix-blend-mode:multiply" opacity="0.1">
<rect x="12" y="7" width="1" height="1" fill="#0A0F25"/>
</g>
<g style="mix-blend-mode:multiply" opacity="0.1">
<rect x="7" y="2" width="1" height="1" fill="#0A0F25"/>
</g>
<g style="mix-blend-mode:multiply" opacity="0.1">
<rect x="7" y="12" width="1" height="1" fill="#0A0F25"/>
</g>
<g style="mix-blend-mode:multiply" opacity="0.1">
<rect x="7" y="7" width="1" height="1" fill="#0A0F25"/>
</g>
</pattern>

View file

@ -177,6 +177,7 @@ type Shape struct {
BorderRadius int `json:"borderRadius"`
Fill string `json:"fill"`
FillPattern string `json:"fillPattern,omitempty"`
Stroke string `json:"stroke"`
Shadow bool `json:"shadow"`

View file

@ -47,6 +47,8 @@ type ThemableElement struct {
Content string
ClipPath string
FillPattern string
}
func NewThemableElement(tag string) *ThemableElement {
@ -86,6 +88,7 @@ func NewThemableElement(tag string) *ThemableElement {
"",
"",
"",
"",
}
}
@ -211,5 +214,16 @@ func (el *ThemableElement) Render() string {
return fmt.Sprintf("%s>%s</%s>", out, el.Content, el.tag)
}
return out + " />"
out += " />"
if el.FillPattern != "" {
patternEl := el.Copy()
patternEl.Fill = ""
patternEl.Stroke = ""
patternEl.BackgroundColor = ""
patternEl.Color = ""
patternEl.ClassName = fmt.Sprintf("%s-overlay", el.FillPattern)
patternEl.FillPattern = ""
out += patternEl.Render()
}
return out
}

View file

@ -0,0 +1,24 @@
package d2themes
import (
"fmt"
)
type PatternOverlay struct {
el *ThemableElement
pattern string
}
func NewPatternOverlay(el *ThemableElement, pattern string) *PatternOverlay {
return &PatternOverlay{
el,
pattern,
}
}
func (o *PatternOverlay) Render() (string, error) {
el := o.el.Copy()
el.Fill = ""
el.ClassName = fmt.Sprintf("%s-overlay", o.pattern)
return el.Render(), nil
}

View file

@ -18,6 +18,7 @@ func NewThemableSketchOverlay(el *ThemableElement, fill string) *ThemableSketchO
}
}
// TODO we can just call el.Copy() to prevent that
// WARNING: Do not reuse the element afterwards as this function changes the Class propery
func (o *ThemableSketchOverlay) Render() (string, error) {
if color.IsThemeColor(o.fill) {

View file

@ -37,6 +37,7 @@ func TestE2E(t *testing.T) {
t.Run("sanity", testSanity)
t.Run("stable", testStable)
t.Run("regression", testRegression)
t.Run("patterns", testPatterns)
t.Run("todo", testTodo)
t.Run("measured", testMeasured)
t.Run("unicode", testUnicode)
@ -76,6 +77,8 @@ a -> c
type testCase struct {
name string
// if the test is just testing a render/style thing, no need to exercise both engines
justDagre bool
script string
mtexts []*d2target.MText
assertions func(t *testing.T, diagram *d2target.Diagram)
@ -136,7 +139,10 @@ func run(t *testing.T, tc testCase) {
serde(t, tc, ruler)
}
layoutsTested := []string{"dagre", "elk"}
layoutsTested := []string{"dagre"}
if !tc.justDagre {
layoutsTested = append(layoutsTested, "elk")
}
for _, layoutName := range layoutsTested {
var layout func(context.Context, *d2graph.Graph) error

162
e2etests/patterns_test.go Normal file
View file

@ -0,0 +1,162 @@
package e2etests
import (
_ "embed"
"testing"
)
func testPatterns(t *testing.T) {
tcs := []testCase{
{
name: "root-dots",
script: `style.fill-pattern: dots
x -> y -> z
x -> abcd
x -> g
x -> z
`,
},
{
name: "root-dots-with-fill",
script: `style.fill-pattern: dots
style.fill: honeydew
x -> y -> z
x -> abcd
x -> g
x -> z
`,
},
{
name: "shape",
script: `x -> y -> z
x -> abcd
x -> g
x -> z
x.style.fill-pattern: dots
abcd.style.fill-pattern: dots
`,
},
{
name: "3d",
script: `x: {style.3d: true; style.fill-pattern: dots}
y: {shape: hexagon; style.3d: true; style.fill-pattern: dots}
`,
},
{
name: "multiple",
script: `
rectangle: {shape: "rectangle"; style.fill-pattern: dots; style.multiple: true}
square: {shape: "square"; style.fill-pattern: dots; style.multiple: true}
page: {shape: "page"; style.fill-pattern: dots; style.multiple: true}
parallelogram: {shape: "parallelogram"; style.fill-pattern: dots; style.multiple: true}
document: {shape: "document"; style.fill-pattern: dots; style.multiple: true}
cylinder: {shape: "cylinder"; style.fill-pattern: dots; style.multiple: true}
queue: {shape: "queue"; style.fill-pattern: dots; style.multiple: true}
package: {shape: "package"; style.fill-pattern: dots; style.multiple: true}
step: {shape: "step"; style.fill-pattern: dots; style.multiple: true}
callout: {shape: "callout"; style.fill-pattern: dots; style.multiple: true}
stored_data: {shape: "stored_data"; style.fill-pattern: dots; style.multiple: true}
person: {shape: "person"; style.fill-pattern: dots; style.multiple: true}
diamond: {shape: "diamond"; style.fill-pattern: dots; style.multiple: true}
oval: {shape: "oval"; style.fill-pattern: dots; style.multiple: true}
circle: {shape: "circle"; style.fill-pattern: dots; style.multiple: true}
hexagon: {shape: "hexagon"; style.fill-pattern: dots; style.multiple: true}
cloud: {shape: "cloud"; style.fill-pattern: dots; style.multiple: true}
rectangle -> square -> page
parallelogram -> document -> cylinder
queue -> package -> step
callout -> stored_data -> person
diamond -> oval -> circle
hexagon -> cloud
`,
},
{
name: "all_shapes",
script: `
rectangle: {shape: "rectangle"; style.fill-pattern: dots}
square: {shape: "square"; style.fill-pattern: dots}
page: {shape: "page"; style.fill-pattern: dots}
parallelogram: {shape: "parallelogram"; style.fill-pattern: dots}
document: {shape: "document"; style.fill-pattern: dots}
cylinder: {shape: "cylinder"; style.fill-pattern: dots}
queue: {shape: "queue"; style.fill-pattern: dots}
package: {shape: "package"; style.fill-pattern: dots}
step: {shape: "step"; style.fill-pattern: dots}
callout: {shape: "callout"; style.fill-pattern: dots}
stored_data: {shape: "stored_data"; style.fill-pattern: dots}
person: {shape: "person"; style.fill-pattern: dots}
diamond: {shape: "diamond"; style.fill-pattern: dots}
oval: {shape: "oval"; style.fill-pattern: dots}
circle: {shape: "circle"; style.fill-pattern: dots}
hexagon: {shape: "hexagon"; style.fill-pattern: dots}
cloud: {shape: "cloud"; style.fill-pattern: dots}
rectangle -> square -> page
parallelogram -> document -> cylinder
queue -> package -> step
callout -> stored_data -> person
diamond -> oval -> circle
hexagon -> cloud
`,
},
{
name: "real",
script: `
NETWORK: {
style: {
stroke: black
fill-pattern: dots
double-border: true
fill: "#E7E9EE"
font: mono
}
CELL TOWER: {
style: {
stroke: black
fill-pattern: dots
fill: "#F5F6F9"
font: mono
}
satellites: SATELLITES {
shape: stored_data
style: {
font: mono
fill: white
stroke: black
multiple: true
}
}
transmitter: TRANSMITTER {
style: {
font: mono
fill: white
stroke: black
}
}
satellites -> transmitter: SEND {
style.stroke: black
style.font: mono
}
satellites -> transmitter: SEND {
style.stroke: black
style.font: mono
}
satellites -> transmitter: SEND {
style.stroke: black
style.font: mono
}
}
}
`,
},
}
for i := range tcs {
tcs[i].justDagre = true
}
runa(t, tcs)
}

132
e2etests/testdata/patterns/3d/dagre/board.exp.json generated vendored Normal file
View file

@ -0,0 +1,132 @@
{
"name": "",
"isFolderOnly": false,
"fontFamily": "SourceSansPro",
"shapes": [
{
"id": "x",
"type": "rectangle",
"pos": {
"x": 0,
"y": 2
},
"width": 53,
"height": 66,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B6",
"fillPattern": "dots",
"stroke": "B1",
"shadow": false,
"3d": true,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "x",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 8,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "y",
"type": "hexagon",
"pos": {
"x": 113,
"y": 0
},
"width": 51,
"height": 69,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "N5",
"fillPattern": "dots",
"stroke": "B1",
"shadow": false,
"3d": true,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "y",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 9,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
}
],
"connections": [],
"root": {
"id": "",
"type": "",
"pos": {
"x": 0,
"y": 0
},
"width": 0,
"height": 0,
"opacity": 0,
"strokeDash": 0,
"strokeWidth": 0,
"borderRadius": 0,
"fill": "N7",
"stroke": "",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"zIndex": 0,
"level": 0
}
}

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 332 KiB

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 342 KiB

1302
e2etests/testdata/patterns/multiple/dagre/board.exp.json generated vendored Normal file

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 346 KiB

362
e2etests/testdata/patterns/real/dagre/board.exp.json generated vendored Normal file
View file

@ -0,0 +1,362 @@
{
"name": "",
"isFolderOnly": false,
"fontFamily": "SourceSansPro",
"shapes": [
{
"id": "NETWORK",
"type": "rectangle",
"pos": {
"x": 0,
"y": 41
},
"width": 333,
"height": 412,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#E7E9EE",
"fillPattern": "dots",
"stroke": "black",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": true,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "NETWORK",
"fontSize": 28,
"fontFamily": "mono",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 116,
"labelHeight": 36,
"labelPosition": "OUTSIDE_TOP_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "NETWORK.CELL TOWER",
"type": "rectangle",
"pos": {
"x": 20,
"y": 106
},
"width": 293,
"height": 317,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#F5F6F9",
"fillPattern": "dots",
"stroke": "black",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "CELL TOWER",
"fontSize": 24,
"fontFamily": "mono",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 143,
"labelHeight": 31,
"labelPosition": "OUTSIDE_TOP_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "NETWORK.CELL TOWER.satellites",
"type": "stored_data",
"pos": {
"x": 86,
"y": 138
},
"width": 161,
"height": 66,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "white",
"stroke": "black",
"shadow": false,
"3d": false,
"multiple": true,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "SATELLITES",
"fontSize": 16,
"fontFamily": "mono",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 96,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 3
},
{
"id": "NETWORK.CELL TOWER.transmitter",
"type": "rectangle",
"pos": {
"x": 91,
"y": 325
},
"width": 151,
"height": 66,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "white",
"stroke": "black",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "TRANSMITTER",
"fontSize": 16,
"fontFamily": "mono",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 106,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 3
}
],
"connections": [
{
"id": "NETWORK.CELL TOWER.(satellites -> transmitter)[0]",
"src": "NETWORK.CELL TOWER.satellites",
"srcArrow": "none",
"srcLabel": "",
"dst": "NETWORK.CELL TOWER.transmitter",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "black",
"borderRadius": 10,
"label": "SEND",
"fontSize": 16,
"fontFamily": "mono",
"language": "",
"color": "N2",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 37,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 142,
"y": 205
},
{
"x": 106,
"y": 253
},
{
"x": 106,
"y": 277.2
},
{
"x": 142,
"y": 326
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "NETWORK.CELL TOWER.(satellites -> transmitter)[1]",
"src": "NETWORK.CELL TOWER.satellites",
"srcArrow": "none",
"srcLabel": "",
"dst": "NETWORK.CELL TOWER.transmitter",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "black",
"borderRadius": 10,
"label": "SEND",
"fontSize": 16,
"fontFamily": "mono",
"language": "",
"color": "N2",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 37,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 166,
"y": 205
},
{
"x": 166.4,
"y": 253
},
{
"x": 166.5,
"y": 277.2
},
{
"x": 166.5,
"y": 326
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "NETWORK.CELL TOWER.(satellites -> transmitter)[2]",
"src": "NETWORK.CELL TOWER.satellites",
"srcArrow": "none",
"srcLabel": "",
"dst": "NETWORK.CELL TOWER.transmitter",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "black",
"borderRadius": 10,
"label": "SEND",
"fontSize": 16,
"fontFamily": "mono",
"language": "",
"color": "N2",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 37,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 191,
"y": 205
},
{
"x": 227,
"y": 253
},
{
"x": 227,
"y": 277.2
},
{
"x": 191,
"y": 326
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
}
],
"root": {
"id": "",
"type": "",
"pos": {
"x": 0,
"y": 0
},
"width": 0,
"height": 0,
"opacity": 0,
"strokeDash": 0,
"strokeWidth": 0,
"borderRadius": 0,
"fill": "N7",
"stroke": "",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"zIndex": 0,
"level": 0
}
}

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 268 KiB

View file

@ -0,0 +1,512 @@
{
"name": "",
"isFolderOnly": false,
"fontFamily": "SourceSansPro",
"shapes": [
{
"id": "x",
"type": "rectangle",
"pos": {
"x": 191,
"y": 0
},
"width": 53,
"height": 66,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B6",
"stroke": "B1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "x",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 8,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "y",
"type": "rectangle",
"pos": {
"x": 0,
"y": 166
},
"width": 54,
"height": 66,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B6",
"stroke": "B1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "y",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 9,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "z",
"type": "rectangle",
"pos": {
"x": 162,
"y": 332
},
"width": 52,
"height": 66,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B6",
"stroke": "B1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "z",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 7,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "abcd",
"type": "rectangle",
"pos": {
"x": 114,
"y": 166
},
"width": 80,
"height": 66,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B6",
"stroke": "B1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "abcd",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 35,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "g",
"type": "rectangle",
"pos": {
"x": 254,
"y": 166
},
"width": 54,
"height": 66,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B6",
"stroke": "B1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "g",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 9,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
}
],
"connections": [
{
"id": "(x -> y)[0]",
"src": "x",
"srcArrow": "none",
"srcLabel": "",
"dst": "y",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"borderRadius": 10,
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N2",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"route": [
{
"x": 191,
"y": 44.54593175853019
},
{
"x": 59.79999999999998,
"y": 101.70918635170604
},
{
"x": 27,
"y": 126
},
{
"x": 27,
"y": 166
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(y -> z)[0]",
"src": "y",
"srcArrow": "none",
"srcLabel": "",
"dst": "z",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"borderRadius": 10,
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N2",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"route": [
{
"x": 27,
"y": 232
},
{
"x": 27,
"y": 272
},
{
"x": 53.900000000000006,
"y": 295.91090342679126
},
{
"x": 161.5,
"y": 351.5545171339564
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(x -> abcd)[0]",
"src": "x",
"srcArrow": "none",
"srcLabel": "",
"dst": "abcd",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"borderRadius": 10,
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N2",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"route": [
{
"x": 192.25301204819277,
"y": 66
},
{
"x": 161.65060240963857,
"y": 106
},
{
"x": 154,
"y": 126
},
{
"x": 154,
"y": 166
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(x -> g)[0]",
"src": "x",
"srcArrow": "none",
"srcLabel": "",
"dst": "g",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"borderRadius": 10,
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N2",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"route": [
{
"x": 242.74698795180723,
"y": 66
},
{
"x": 273.34939759036143,
"y": 106
},
{
"x": 281,
"y": 126
},
{
"x": 281,
"y": 166
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(x -> z)[0]",
"src": "x",
"srcArrow": "none",
"srcLabel": "",
"dst": "z",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"borderRadius": 10,
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N2",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"route": [
{
"x": 244,
"y": 49.8544061302682
},
{
"x": 327.2,
"y": 102.77088122605365
},
{
"x": 348,
"y": 132.6
},
{
"x": 348,
"y": 157.5
},
{
"x": 348,
"y": 182.4
},
{
"x": 321.2,
"y": 295.8
},
{
"x": 214,
"y": 351
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
}
],
"root": {
"id": "",
"type": "",
"pos": {
"x": 0,
"y": 0
},
"width": 0,
"height": 0,
"opacity": 0,
"strokeDash": 0,
"strokeWidth": 0,
"borderRadius": 0,
"fill": "honeydew",
"fillPattern": "dots",
"stroke": "",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"zIndex": 0,
"level": 0
}
}

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 333 KiB

View file

@ -0,0 +1,512 @@
{
"name": "",
"isFolderOnly": false,
"fontFamily": "SourceSansPro",
"shapes": [
{
"id": "x",
"type": "rectangle",
"pos": {
"x": 191,
"y": 0
},
"width": 53,
"height": 66,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B6",
"stroke": "B1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "x",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 8,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "y",
"type": "rectangle",
"pos": {
"x": 0,
"y": 166
},
"width": 54,
"height": 66,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B6",
"stroke": "B1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "y",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 9,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "z",
"type": "rectangle",
"pos": {
"x": 162,
"y": 332
},
"width": 52,
"height": 66,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B6",
"stroke": "B1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "z",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 7,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "abcd",
"type": "rectangle",
"pos": {
"x": 114,
"y": 166
},
"width": 80,
"height": 66,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B6",
"stroke": "B1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "abcd",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 35,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "g",
"type": "rectangle",
"pos": {
"x": 254,
"y": 166
},
"width": 54,
"height": 66,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B6",
"stroke": "B1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "g",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 9,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
}
],
"connections": [
{
"id": "(x -> y)[0]",
"src": "x",
"srcArrow": "none",
"srcLabel": "",
"dst": "y",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"borderRadius": 10,
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N2",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"route": [
{
"x": 191,
"y": 44.54593175853019
},
{
"x": 59.79999999999998,
"y": 101.70918635170604
},
{
"x": 27,
"y": 126
},
{
"x": 27,
"y": 166
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(y -> z)[0]",
"src": "y",
"srcArrow": "none",
"srcLabel": "",
"dst": "z",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"borderRadius": 10,
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N2",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"route": [
{
"x": 27,
"y": 232
},
{
"x": 27,
"y": 272
},
{
"x": 53.900000000000006,
"y": 295.91090342679126
},
{
"x": 161.5,
"y": 351.5545171339564
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(x -> abcd)[0]",
"src": "x",
"srcArrow": "none",
"srcLabel": "",
"dst": "abcd",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"borderRadius": 10,
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N2",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"route": [
{
"x": 192.25301204819277,
"y": 66
},
{
"x": 161.65060240963857,
"y": 106
},
{
"x": 154,
"y": 126
},
{
"x": 154,
"y": 166
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(x -> g)[0]",
"src": "x",
"srcArrow": "none",
"srcLabel": "",
"dst": "g",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"borderRadius": 10,
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N2",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"route": [
{
"x": 242.74698795180723,
"y": 66
},
{
"x": 273.34939759036143,
"y": 106
},
{
"x": 281,
"y": 126
},
{
"x": 281,
"y": 166
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(x -> z)[0]",
"src": "x",
"srcArrow": "none",
"srcLabel": "",
"dst": "z",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"borderRadius": 10,
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N2",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"route": [
{
"x": 244,
"y": 49.8544061302682
},
{
"x": 327.2,
"y": 102.77088122605365
},
{
"x": 348,
"y": 132.6
},
{
"x": 348,
"y": 157.5
},
{
"x": 348,
"y": 182.4
},
{
"x": 321.2,
"y": 295.8
},
{
"x": 214,
"y": 351
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
}
],
"root": {
"id": "",
"type": "",
"pos": {
"x": 0,
"y": 0
},
"width": 0,
"height": 0,
"opacity": 0,
"strokeDash": 0,
"strokeWidth": 0,
"borderRadius": 0,
"fill": "N7",
"fillPattern": "dots",
"stroke": "",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"zIndex": 0,
"level": 0
}
}

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 333 KiB

513
e2etests/testdata/patterns/shape/dagre/board.exp.json generated vendored Normal file
View file

@ -0,0 +1,513 @@
{
"name": "",
"isFolderOnly": false,
"fontFamily": "SourceSansPro",
"shapes": [
{
"id": "x",
"type": "rectangle",
"pos": {
"x": 191,
"y": 0
},
"width": 53,
"height": 66,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B6",
"fillPattern": "dots",
"stroke": "B1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "x",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 8,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "y",
"type": "rectangle",
"pos": {
"x": 0,
"y": 166
},
"width": 54,
"height": 66,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B6",
"stroke": "B1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "y",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 9,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "z",
"type": "rectangle",
"pos": {
"x": 162,
"y": 332
},
"width": 52,
"height": 66,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B6",
"stroke": "B1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "z",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 7,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "abcd",
"type": "rectangle",
"pos": {
"x": 114,
"y": 166
},
"width": 80,
"height": 66,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B6",
"fillPattern": "dots",
"stroke": "B1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "abcd",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 35,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "g",
"type": "rectangle",
"pos": {
"x": 254,
"y": 166
},
"width": 54,
"height": 66,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B6",
"stroke": "B1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "g",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 9,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
}
],
"connections": [
{
"id": "(x -> y)[0]",
"src": "x",
"srcArrow": "none",
"srcLabel": "",
"dst": "y",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"borderRadius": 10,
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N2",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"route": [
{
"x": 191,
"y": 44.54593175853019
},
{
"x": 59.79999999999998,
"y": 101.70918635170604
},
{
"x": 27,
"y": 126
},
{
"x": 27,
"y": 166
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(y -> z)[0]",
"src": "y",
"srcArrow": "none",
"srcLabel": "",
"dst": "z",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"borderRadius": 10,
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N2",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"route": [
{
"x": 27,
"y": 232
},
{
"x": 27,
"y": 272
},
{
"x": 53.900000000000006,
"y": 295.91090342679126
},
{
"x": 161.5,
"y": 351.5545171339564
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(x -> abcd)[0]",
"src": "x",
"srcArrow": "none",
"srcLabel": "",
"dst": "abcd",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"borderRadius": 10,
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N2",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"route": [
{
"x": 192.25301204819277,
"y": 66
},
{
"x": 161.65060240963857,
"y": 106
},
{
"x": 154,
"y": 126
},
{
"x": 154,
"y": 166
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(x -> g)[0]",
"src": "x",
"srcArrow": "none",
"srcLabel": "",
"dst": "g",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"borderRadius": 10,
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N2",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"route": [
{
"x": 242.74698795180723,
"y": 66
},
{
"x": 273.34939759036143,
"y": 106
},
{
"x": 281,
"y": 126
},
{
"x": 281,
"y": 166
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(x -> z)[0]",
"src": "x",
"srcArrow": "none",
"srcLabel": "",
"dst": "z",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"borderRadius": 10,
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N2",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"route": [
{
"x": 244,
"y": 49.8544061302682
},
{
"x": 327.2,
"y": 102.77088122605365
},
{
"x": 348,
"y": 132.6
},
{
"x": 348,
"y": 157.5
},
{
"x": 348,
"y": 182.4
},
{
"x": 321.2,
"y": 295.8
},
{
"x": 214,
"y": 351
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
}
],
"root": {
"id": "",
"type": "",
"pos": {
"x": 0,
"y": 0
},
"width": 0,
"height": 0,
"opacity": 0,
"strokeDash": 0,
"strokeWidth": 0,
"borderRadius": 0,
"fill": "N7",
"stroke": "",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"zIndex": 0,
"level": 0
}
}

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 333 KiB

View file

@ -89,7 +89,7 @@
.d2-441686790 .color-AA4{color:#EDF0FD;}
.d2-441686790 .color-AA5{color:#F7F8FE;}
.d2-441686790 .color-AB4{color:#EDF0FD;}
.d2-441686790 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="x"><g class="shape" ><rect x="0.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" rx="4" /></g><text x="26.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g id="y"><g class="shape" ><rect x="113.000000" y="0.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" rx="10" /></g><text x="140.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text></g><g id="multiple2"><g class="shape" ><rect x="237.000000" y="-10.000000" width="112.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" rx="6" /><rect x="227.000000" y="0.000000" width="112.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" rx="6" /></g><text x="283.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">multiple2</text></g><g id="double"><g class="shape" ><rect x="399.000000" y="0.000000" width="94.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" rx="6" /><rect x="404.000000" y="5.000000" width="84.000000" height="56.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" rx="6" /></g><text x="446.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">double</text></g><g id="three-dee"><g class="shape" ><defs><mask id="border-mask-three-dee" maskUnits="userSpaceOnUse" x="553" y="-15" width="129" height="81">
.d2-441686790 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="x"><g class="shape" ><rect x="0.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" rx="4" /></g><text x="26.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g id="y"><g class="shape" ><rect x="113.000000" y="0.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" rx="10" /></g><text x="140.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text></g><g id="multiple2"><g class="shape" ><rect x="237.000000" y="-10.000000" width="112.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" rx="6" /><rect x="227.000000" y="0.000000" width="112.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" rx="6" /></g><text x="283.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">multiple2</text></g><g id="double"><g class="shape" ><rect x="399.000000" y="0.000000" width="94.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" rx="6" /><rect x="404.000000" y="5.000000" width="84.000000" height="56.000000" fill="transparent" class=" stroke-B1" style="stroke-width:2;" rx="6" /></g><text x="446.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">double</text></g><g id="three-dee"><g class="shape" ><defs><mask id="border-mask-three-dee" maskUnits="userSpaceOnUse" x="553" y="-15" width="129" height="81">
<rect x="553" y="-15" width="129" height="81" fill="white"></rect>
<path d="M553,0L568,-15L682,-15L682,51L667,66L553,66L553,0L667,0L667,66M667,0L682,-15" style="stroke-width:2;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="553.000000" y="0.000000" width="114.000000" height="66.000000" mask="url(#border-mask-three-dee)" stroke="none" class=" fill-B6" style="stroke-width:2;" /><polygon mask="url(#border-mask-three-dee)" points="553,0 568,-15 682,-15 682,51 667,66 667,0" class=" fill-B5" style="stroke-width:2;" /><path d="M553,0 L568,-15 L682,-15 L682,51 L667,66 L553,66 L553,0 L667,0 L667,66 M667,0 L682,-15" fill="none" class=" stroke-B1" style="stroke-width:2;" /></g><text x="610.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">three-dee</text></g><mask id="d2-441686790" maskUnits="userSpaceOnUse" x="-1" y="-17" width="685" height="84">
<rect x="-1" y="-17" width="685" height="84" fill="white"></rect>

Before

Width:  |  Height:  |  Size: 331 KiB

After

Width:  |  Height:  |  Size: 331 KiB

View file

@ -89,7 +89,7 @@
.d2-2541858325 .color-AA4{color:#EDF0FD;}
.d2-2541858325 .color-AA5{color:#F7F8FE;}
.d2-2541858325 .color-AB4{color:#EDF0FD;}
.d2-2541858325 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="x"><g class="shape" ><rect x="12.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" rx="4" /></g><text x="38.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g id="y"><g class="shape" ><rect x="85.000000" y="12.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" rx="10" /></g><text x="112.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text></g><g id="multiple2"><g class="shape" ><rect x="169.000000" y="2.000000" width="112.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" rx="6" /><rect x="159.000000" y="12.000000" width="112.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" rx="6" /></g><text x="215.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">multiple2</text></g><g id="double"><g class="shape" ><rect x="291.000000" y="12.000000" width="94.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" rx="6" /><rect x="296.000000" y="17.000000" width="84.000000" height="56.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" rx="6" /></g><text x="338.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">double</text></g><g id="three-dee"><g class="shape" ><defs><mask id="border-mask-three-dee" maskUnits="userSpaceOnUse" x="405" y="-3" width="129" height="81">
.d2-2541858325 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="x"><g class="shape" ><rect x="12.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" rx="4" /></g><text x="38.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g id="y"><g class="shape" ><rect x="85.000000" y="12.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" rx="10" /></g><text x="112.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text></g><g id="multiple2"><g class="shape" ><rect x="169.000000" y="2.000000" width="112.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" rx="6" /><rect x="159.000000" y="12.000000" width="112.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" rx="6" /></g><text x="215.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">multiple2</text></g><g id="double"><g class="shape" ><rect x="291.000000" y="12.000000" width="94.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" rx="6" /><rect x="296.000000" y="17.000000" width="84.000000" height="56.000000" fill="transparent" class=" stroke-B1" style="stroke-width:2;" rx="6" /></g><text x="338.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">double</text></g><g id="three-dee"><g class="shape" ><defs><mask id="border-mask-three-dee" maskUnits="userSpaceOnUse" x="405" y="-3" width="129" height="81">
<rect x="405" y="-3" width="129" height="81" fill="white"></rect>
<path d="M405,12L420,-3L534,-3L534,63L519,78L405,78L405,12L519,12L519,78M519,12L534,-3" style="stroke-width:2;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="405.000000" y="12.000000" width="114.000000" height="66.000000" mask="url(#border-mask-three-dee)" stroke="none" class=" fill-B6" style="stroke-width:2;" /><polygon mask="url(#border-mask-three-dee)" points="405,12 420,-3 534,-3 534,63 519,78 519,12" class=" fill-B5" style="stroke-width:2;" /><path d="M405,12 L420,-3 L534,-3 L534,63 L519,78 L405,78 L405,12 L519,12 L519,78 M519,12 L534,-3" fill="none" class=" stroke-B1" style="stroke-width:2;" /></g><text x="462.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">three-dee</text></g><mask id="d2-2541858325" maskUnits="userSpaceOnUse" x="11" y="-5" width="525" height="84">
<rect x="11" y="-5" width="525" height="84" fill="white"></rect>

Before

Width:  |  Height:  |  Size: 331 KiB

After

Width:  |  Height:  |  Size: 331 KiB

View file

@ -89,7 +89,7 @@
.d2-3292965392 .color-AA4{color:#EDF0FD;}
.d2-3292965392 .color-AA5{color:#F7F8FE;}
.d2-3292965392 .color-AB4{color:#EDF0FD;}
.d2-3292965392 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="window"><g class="shape" ><rect x="0.000000" y="0.000000" width="103.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /><rect x="5.000000" y="5.000000" width="93.000000" height="56.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="51.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">window</text></g><g id="roof"><g class="shape" ><rect x="163.000000" y="0.000000" width="75.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="200.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">roof</text></g><g id="garage"><g class="shape" ><rect x="298.000000" y="0.000000" width="94.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="345.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">garage</text></g><mask id="d2-3292965392" maskUnits="userSpaceOnUse" x="-1" y="-1" width="394" height="68">
.d2-3292965392 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="window"><g class="shape" ><rect x="0.000000" y="0.000000" width="103.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /><rect x="5.000000" y="5.000000" width="93.000000" height="56.000000" fill="transparent" class=" stroke-B1" style="stroke-width:2;" /></g><text x="51.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">window</text></g><g id="roof"><g class="shape" ><rect x="163.000000" y="0.000000" width="75.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="200.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">roof</text></g><g id="garage"><g class="shape" ><rect x="298.000000" y="0.000000" width="94.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="345.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">garage</text></g><mask id="d2-3292965392" maskUnits="userSpaceOnUse" x="-1" y="-1" width="394" height="68">
<rect x="-1" y="-1" width="394" height="68" fill="white"></rect>
</mask></svg></svg>

Before

Width:  |  Height:  |  Size: 330 KiB

After

Width:  |  Height:  |  Size: 330 KiB

View file

@ -89,7 +89,7 @@
.d2-309825249 .color-AA4{color:#EDF0FD;}
.d2-309825249 .color-AA5{color:#F7F8FE;}
.d2-309825249 .color-AB4{color:#EDF0FD;}
.d2-309825249 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="window"><g class="shape" ><rect x="12.000000" y="12.000000" width="103.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /><rect x="17.000000" y="17.000000" width="93.000000" height="56.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="63.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">window</text></g><g id="roof"><g class="shape" ><rect x="135.000000" y="12.000000" width="75.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="172.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">roof</text></g><g id="garage"><g class="shape" ><rect x="230.000000" y="12.000000" width="94.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="277.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">garage</text></g><mask id="d2-309825249" maskUnits="userSpaceOnUse" x="11" y="11" width="314" height="68">
.d2-309825249 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="window"><g class="shape" ><rect x="12.000000" y="12.000000" width="103.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /><rect x="17.000000" y="17.000000" width="93.000000" height="56.000000" fill="transparent" class=" stroke-B1" style="stroke-width:2;" /></g><text x="63.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">window</text></g><g id="roof"><g class="shape" ><rect x="135.000000" y="12.000000" width="75.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="172.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">roof</text></g><g id="garage"><g class="shape" ><rect x="230.000000" y="12.000000" width="94.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="277.000000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">garage</text></g><mask id="d2-309825249" maskUnits="userSpaceOnUse" x="11" y="11" width="314" height="68">
<rect x="11" y="11" width="314" height="68" fill="white"></rect>
</mask></svg></svg>

Before

Width:  |  Height:  |  Size: 330 KiB

After

Width:  |  Height:  |  Size: 330 KiB

View file

@ -89,7 +89,7 @@
.d2-3361144730 .color-AA4{color:#EDF0FD;}
.d2-3361144730 .color-AA5{color:#F7F8FE;}
.d2-3361144730 .color-AB4{color:#EDF0FD;}
.d2-3361144730 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="おやすみなさい"><g class="shape" ><rect x="0.000000" y="0.000000" width="185.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:15;" /><rect x="5.000000" y="5.000000" width="175.000000" height="56.000000" class=" stroke-B1 fill-B6" style="stroke-width:15;" /></g><text x="92.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">おやすみなさい</text></g><mask id="d2-3361144730" maskUnits="userSpaceOnUse" x="-8" y="-8" width="201" height="82">
.d2-3361144730 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="おやすみなさい"><g class="shape" ><rect x="0.000000" y="0.000000" width="185.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:15;" /><rect x="5.000000" y="5.000000" width="175.000000" height="56.000000" fill="transparent" class=" stroke-B1" style="stroke-width:15;" /></g><text x="92.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">おやすみなさい</text></g><mask id="d2-3361144730" maskUnits="userSpaceOnUse" x="-8" y="-8" width="201" height="82">
<rect x="-8" y="-8" width="201" height="82" fill="white"></rect>
</mask></svg></svg>

Before

Width:  |  Height:  |  Size: 329 KiB

After

Width:  |  Height:  |  Size: 329 KiB

View file

@ -89,7 +89,7 @@
.d2-580601010 .color-AA4{color:#EDF0FD;}
.d2-580601010 .color-AA5{color:#F7F8FE;}
.d2-580601010 .color-AB4{color:#EDF0FD;}
.d2-580601010 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="おやすみなさい"><g class="shape" ><rect x="12.000000" y="12.000000" width="185.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:15;" /><rect x="17.000000" y="17.000000" width="175.000000" height="56.000000" class=" stroke-B1 fill-B6" style="stroke-width:15;" /></g><text x="104.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">おやすみなさい</text></g><mask id="d2-580601010" maskUnits="userSpaceOnUse" x="4" y="4" width="201" height="82">
.d2-580601010 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="おやすみなさい"><g class="shape" ><rect x="12.000000" y="12.000000" width="185.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:15;" /><rect x="17.000000" y="17.000000" width="175.000000" height="56.000000" fill="transparent" class=" stroke-B1" style="stroke-width:15;" /></g><text x="104.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">おやすみなさい</text></g><mask id="d2-580601010" maskUnits="userSpaceOnUse" x="4" y="4" width="201" height="82">
<rect x="4" y="4" width="201" height="82" fill="white"></rect>
</mask></svg></svg>

Before

Width:  |  Height:  |  Size: 329 KiB

After

Width:  |  Height:  |  Size: 329 KiB

182
testdata/d2compiler/TestCompile/fill-pattern.exp.json generated vendored Normal file
View file

@ -0,0 +1,182 @@
{
"graph": {
"name": "",
"isFolderOnly": false,
"ast": {
"range": "d2/testdata/d2compiler/TestCompile/fill-pattern.d2,0:0:0-5:0:44",
"nodes": [
{
"map_key": {
"range": "d2/testdata/d2compiler/TestCompile/fill-pattern.d2,0:0:0-4:1:43",
"key": {
"range": "d2/testdata/d2compiler/TestCompile/fill-pattern.d2,0:0:0-0:1:1",
"path": [
{
"unquoted_string": {
"range": "d2/testdata/d2compiler/TestCompile/fill-pattern.d2,0:0:0-0:1:1",
"value": [
{
"string": "x",
"raw_string": "x"
}
]
}
}
]
},
"primary": {},
"value": {
"map": {
"range": "d2/testdata/d2compiler/TestCompile/fill-pattern.d2,0:3:3-4:0:42",
"nodes": [
{
"map_key": {
"range": "d2/testdata/d2compiler/TestCompile/fill-pattern.d2,1:1:6-3:3:41",
"key": {
"range": "d2/testdata/d2compiler/TestCompile/fill-pattern.d2,1:1:6-1:6:11",
"path": [
{
"unquoted_string": {
"range": "d2/testdata/d2compiler/TestCompile/fill-pattern.d2,1:1:6-1:6:11",
"value": [
{
"string": "style",
"raw_string": "style"
}
]
}
}
]
},
"primary": {},
"value": {
"map": {
"range": "d2/testdata/d2compiler/TestCompile/fill-pattern.d2,1:8:13-3:2:40",
"nodes": [
{
"map_key": {
"range": "d2/testdata/d2compiler/TestCompile/fill-pattern.d2,2:4:19-2:22:37",
"key": {
"range": "d2/testdata/d2compiler/TestCompile/fill-pattern.d2,2:4:19-2:16:31",
"path": [
{
"unquoted_string": {
"range": "d2/testdata/d2compiler/TestCompile/fill-pattern.d2,2:4:19-2:16:31",
"value": [
{
"string": "fill-pattern",
"raw_string": "fill-pattern"
}
]
}
}
]
},
"primary": {},
"value": {
"unquoted_string": {
"range": "d2/testdata/d2compiler/TestCompile/fill-pattern.d2,2:18:33-2:22:37",
"value": [
{
"string": "dots",
"raw_string": "dots"
}
]
}
}
}
}
]
}
}
}
}
]
}
}
}
}
]
},
"root": {
"id": "",
"id_val": "",
"label_dimensions": {
"width": 0,
"height": 0
},
"attributes": {
"label": {
"value": ""
},
"style": {},
"near_key": null,
"shape": {
"value": ""
},
"direction": {
"value": ""
},
"constraint": {
"value": ""
}
},
"zIndex": 0
},
"edges": null,
"objects": [
{
"id": "x",
"id_val": "x",
"label_dimensions": {
"width": 0,
"height": 0
},
"references": [
{
"key": {
"range": "d2/testdata/d2compiler/TestCompile/fill-pattern.d2,0:0:0-0:1:1",
"path": [
{
"unquoted_string": {
"range": "d2/testdata/d2compiler/TestCompile/fill-pattern.d2,0:0:0-0:1:1",
"value": [
{
"string": "x",
"raw_string": "x"
}
]
}
}
]
},
"key_path_index": 0,
"map_key_edge_index": -1
}
],
"attributes": {
"label": {
"value": "x"
},
"style": {
"fillPattern": {
"value": "dots"
}
},
"near_key": null,
"shape": {
"value": "rectangle"
},
"direction": {
"value": ""
},
"constraint": {
"value": ""
}
},
"zIndex": 0
}
]
},
"err": null
}

View file

@ -0,0 +1,12 @@
{
"graph": null,
"err": {
"ioerr": null,
"errs": [
{
"range": "d2/testdata/d2compiler/TestCompile/invalid-fill-pattern.d2,2:18:33-2:23:38",
"errmsg": "d2/testdata/d2compiler/TestCompile/invalid-fill-pattern.d2:3:19: expected \"fill-pattern\" to be one of: dots"
}
]
}
}