From 2998b7ff3827e465da94c65cc3f96273a7a43fb9 Mon Sep 17 00:00:00 2001 From: Alexander Wang Date: Sun, 23 Jul 2023 19:20:48 -0700 Subject: [PATCH] fix icon pad --- d2target/d2target.go | 4 +- e2etests/stable_test.go | 19 ++ .../icon_positions/dagre/sketch.exp.svg | 6 +- .../stable/label-near/dagre/board.exp.json | 202 ++++++++++++++++++ .../stable/label-near/dagre/sketch.exp.svg | 96 +++++++++ .../stable/label-near/elk/board.exp.json | 193 +++++++++++++++++ .../stable/label-near/elk/sketch.exp.svg | 96 +++++++++ 7 files changed, 611 insertions(+), 5 deletions(-) create mode 100644 e2etests/testdata/stable/label-near/dagre/board.exp.json create mode 100644 e2etests/testdata/stable/label-near/dagre/sketch.exp.svg create mode 100644 e2etests/testdata/stable/label-near/elk/board.exp.json create mode 100644 e2etests/testdata/stable/label-near/elk/sketch.exp.svg diff --git a/d2target/d2target.go b/d2target/d2target.go index a4502ef905..b05641df72 100644 --- a/d2target/d2target.go +++ b/d2target/d2target.go @@ -215,11 +215,11 @@ func (diagram Diagram) BoundingBox() (topLeft, bottomRight Point) { if strings.HasPrefix(targetShape.IconPosition, "OUTSIDE_TOP") { y1 = go2.Min(y1, targetShape.Pos.Y-label.PADDING-size) } else if strings.HasPrefix(targetShape.IconPosition, "OUTSIDE_BOTTOM") { - y2 = go2.Max(y2, targetShape.Pos.Y+label.PADDING+size) + y2 = go2.Max(y2, targetShape.Pos.Y+targetShape.Height+label.PADDING+size) } else if strings.HasPrefix(targetShape.IconPosition, "OUTSIDE_LEFT") { x1 = go2.Min(x1, targetShape.Pos.X-label.PADDING-size) } else if strings.HasPrefix(targetShape.IconPosition, "OUTSIDE_RIGHT") { - x2 = go2.Max(x2, targetShape.Pos.X+label.PADDING+size) + x2 = go2.Max(x2, targetShape.Pos.X+targetShape.Width+label.PADDING+size) } } diff --git a/e2etests/stable_test.go b/e2etests/stable_test.go index 3d2b0b4443..59bfa0f050 100644 --- a/e2etests/stable_test.go +++ b/e2etests/stable_test.go @@ -2766,6 +2766,25 @@ scenarios: { thunder } }`, + }, + { + name: "label-near", + script: ` +direction: right +x -> y + +x: worker { + label.near: top-center + icon: https://icons.terrastruct.com/essentials%2F005-programmer.svg + icon.near: outside-top-right +} + +y: profits { + label.near: bottom-right + icon: https://icons.terrastruct.com/essentials%2Fprofits.svg + icon.near: outside-bottom-center +} +`, }, loadFromFile(t, "arrowhead_scaling"), loadFromFile(t, "teleport_grid"), diff --git a/e2etests/testdata/stable/icon_positions/dagre/sketch.exp.svg b/e2etests/testdata/stable/icon_positions/dagre/sketch.exp.svg index 5496daf1f1..fef027fed5 100644 --- a/e2etests/testdata/stable/icon_positions/dagre/sketch.exp.svg +++ b/e2etests/testdata/stable/icon_positions/dagre/sketch.exp.svg @@ -1,4 +1,4 @@ -non containercontainerimageDefaultOutsideTopLeftOutsideTopCenterOutsideTopRightOutsideLeftTopOutsideLeftMiddleOutsideLeftBottomOutsideRightTopOutsideRightMiddleOutsideRightBottomOutsideBottomLeftOutsideBottomCenterOutsideBottomRightInsideTopLeftInsideTopCenterInsideTopRightInsideMiddleLeftInsideMiddleCenterInsideMiddleRightInsideBottomLeftInsideBottomCenterInsideBottomRightDefaultOutsideTopLeftOutsideTopCenterOutsideTopRightOutsideLeftTopOutsideLeftMiddleOutsideLeftBottomOutsideRightTopOutsideRightMiddleOutsideRightBottomOutsideBottomLeftOutsideBottomCenterOutsideBottomRightInsideTopLeftInsideTopCenterInsideTopRightInsideMiddleLeftInsideMiddleCenterInsideMiddleRightInsideBottomLeftInsideBottomCenterInsideBottomRightDefaultOutsideTopLeftOutsideTopCenterOutsideTopRightOutsideLeftTopOutsideLeftMiddleOutsideLeftBottomOutsideRightTopOutsideRightMiddleOutsideRightBottomOutsideBottomLeftOutsideBottomCenterOutsideBottomRightInsideTopLeftInsideTopCenterInsideTopRightInsideMiddleLeftInsideMiddleCenterInsideMiddleRightInsideBottomLeftInsideBottomCenterInsideBottomRightDefaultOutsideTopLeftOutsideTopCenterOutsideTopRightOutsideLeftTopOutsideLeftMiddleOutsideLeftBottomOutsideRightTopOutsideRightMiddleOutsideRightBottomOutsideBottomLeftOutsideBottomCenterOutsideBottomRightInsideTopLeftInsideTopCenterInsideTopRightInsideMiddleLeftInsideMiddleCenterInsideMiddleRightInsideBottomLeftInsideBottomCenterInsideBottomRight - + .d2-2106678569 .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}]]>non containercontainerimageDefaultOutsideTopLeftOutsideTopCenterOutsideTopRightOutsideLeftTopOutsideLeftMiddleOutsideLeftBottomOutsideRightTopOutsideRightMiddleOutsideRightBottomOutsideBottomLeftOutsideBottomCenterOutsideBottomRightInsideTopLeftInsideTopCenterInsideTopRightInsideMiddleLeftInsideMiddleCenterInsideMiddleRightInsideBottomLeftInsideBottomCenterInsideBottomRightDefaultOutsideTopLeftOutsideTopCenterOutsideTopRightOutsideLeftTopOutsideLeftMiddleOutsideLeftBottomOutsideRightTopOutsideRightMiddleOutsideRightBottomOutsideBottomLeftOutsideBottomCenterOutsideBottomRightInsideTopLeftInsideTopCenterInsideTopRightInsideMiddleLeftInsideMiddleCenterInsideMiddleRightInsideBottomLeftInsideBottomCenterInsideBottomRightDefaultOutsideTopLeftOutsideTopCenterOutsideTopRightOutsideLeftTopOutsideLeftMiddleOutsideLeftBottomOutsideRightTopOutsideRightMiddleOutsideRightBottomOutsideBottomLeftOutsideBottomCenterOutsideBottomRightInsideTopLeftInsideTopCenterInsideTopRightInsideMiddleLeftInsideMiddleCenterInsideMiddleRightInsideBottomLeftInsideBottomCenterInsideBottomRightDefaultOutsideTopLeftOutsideTopCenterOutsideTopRightOutsideLeftTopOutsideLeftMiddleOutsideLeftBottomOutsideRightTopOutsideRightMiddleOutsideRightBottomOutsideBottomLeftOutsideBottomCenterOutsideBottomRightInsideTopLeftInsideTopCenterInsideTopRightInsideMiddleLeftInsideMiddleCenterInsideMiddleRightInsideBottomLeftInsideBottomCenterInsideBottomRight + diff --git a/e2etests/testdata/stable/label-near/dagre/board.exp.json b/e2etests/testdata/stable/label-near/dagre/board.exp.json new file mode 100644 index 0000000000..58330c06c0 --- /dev/null +++ b/e2etests/testdata/stable/label-near/dagre/board.exp.json @@ -0,0 +1,202 @@ +{ + "name": "", + "isFolderOnly": false, + "fontFamily": "SourceSansPro", + "shapes": [ + { + "id": "x", + "type": "rectangle", + "pos": { + "x": 0, + "y": 74 + }, + "width": 123, + "height": 123, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B6", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": { + "Scheme": "https", + "Opaque": "", + "User": null, + "Host": "icons.terrastruct.com", + "Path": "/essentials/005-programmer.svg", + "RawPath": "/essentials%2F005-programmer.svg", + "OmitHost": false, + "ForceQuery": false, + "RawQuery": "", + "Fragment": "", + "RawFragment": "" + }, + "iconPosition": "OUTSIDE_TOP_RIGHT", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "worker", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 52, + "labelHeight": 21, + "labelPosition": "INSIDE_TOP_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "y", + "type": "rectangle", + "pos": { + "x": 223, + "y": 74 + }, + "width": 118, + "height": 123, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B6", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": { + "Scheme": "https", + "Opaque": "", + "User": null, + "Host": "icons.terrastruct.com", + "Path": "/essentials/profits.svg", + "RawPath": "/essentials%2Fprofits.svg", + "OmitHost": false, + "ForceQuery": false, + "RawQuery": "", + "Fragment": "", + "RawFragment": "" + }, + "iconPosition": "OUTSIDE_BOTTOM_CENTER", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "profits", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 47, + "labelHeight": 21, + "labelPosition": "INSIDE_BOTTOM_RIGHT", + "zIndex": 0, + "level": 1 + } + ], + "connections": [ + { + "id": "(x -> y)[0]", + "src": "x", + "srcArrow": "none", + "dst": "y", + "dstArrow": "triangle", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "B1", + "borderRadius": 10, + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 123, + "y": 151 + }, + { + "x": 163, + "y": 151 + }, + { + "x": 183, + "y": 151 + }, + { + "x": 223, + "y": 151 + } + ], + "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 + } +} diff --git a/e2etests/testdata/stable/label-near/dagre/sketch.exp.svg b/e2etests/testdata/stable/label-near/dagre/sketch.exp.svg new file mode 100644 index 0000000000..ff9e7cddeb --- /dev/null +++ b/e2etests/testdata/stable/label-near/dagre/sketch.exp.svg @@ -0,0 +1,96 @@ +workerprofits + + + + \ No newline at end of file diff --git a/e2etests/testdata/stable/label-near/elk/board.exp.json b/e2etests/testdata/stable/label-near/elk/board.exp.json new file mode 100644 index 0000000000..77309cf938 --- /dev/null +++ b/e2etests/testdata/stable/label-near/elk/board.exp.json @@ -0,0 +1,193 @@ +{ + "name": "", + "isFolderOnly": false, + "fontFamily": "SourceSansPro", + "shapes": [ + { + "id": "x", + "type": "rectangle", + "pos": { + "x": 12, + "y": 12 + }, + "width": 123, + "height": 118, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B6", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": { + "Scheme": "https", + "Opaque": "", + "User": null, + "Host": "icons.terrastruct.com", + "Path": "/essentials/005-programmer.svg", + "RawPath": "/essentials%2F005-programmer.svg", + "OmitHost": false, + "ForceQuery": false, + "RawQuery": "", + "Fragment": "", + "RawFragment": "" + }, + "iconPosition": "OUTSIDE_TOP_RIGHT", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "worker", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 52, + "labelHeight": 21, + "labelPosition": "INSIDE_TOP_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "y", + "type": "rectangle", + "pos": { + "x": 205, + "y": 12 + }, + "width": 118, + "height": 118, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B6", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": { + "Scheme": "https", + "Opaque": "", + "User": null, + "Host": "icons.terrastruct.com", + "Path": "/essentials/profits.svg", + "RawPath": "/essentials%2Fprofits.svg", + "OmitHost": false, + "ForceQuery": false, + "RawQuery": "", + "Fragment": "", + "RawFragment": "" + }, + "iconPosition": "OUTSIDE_BOTTOM_CENTER", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "profits", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 47, + "labelHeight": 21, + "labelPosition": "INSIDE_BOTTOM_RIGHT", + "zIndex": 0, + "level": 1 + } + ], + "connections": [ + { + "id": "(x -> y)[0]", + "src": "x", + "srcArrow": "none", + "dst": "y", + "dstArrow": "triangle", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "B1", + "borderRadius": 10, + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 135, + "y": 71 + }, + { + "x": 205, + "y": 71 + } + ], + "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 + } +} diff --git a/e2etests/testdata/stable/label-near/elk/sketch.exp.svg b/e2etests/testdata/stable/label-near/elk/sketch.exp.svg new file mode 100644 index 0000000000..c86741a3d2 --- /dev/null +++ b/e2etests/testdata/stable/label-near/elk/sketch.exp.svg @@ -0,0 +1,96 @@ +workerprofits + + + + \ No newline at end of file