From 79abc91ea3f0003a02e17b66be0ed112dc57cccb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vojt=C4=9Bch=20Fo=C5=A1n=C3=A1r?= <vfosnar@fosny.eu>
Date: Wed, 22 Feb 2023 18:50:06 +0100
Subject: [PATCH] fix filled circle arrowhead offset

---
 d2renderers/d2svg/d2svg.go                                    | 4 ++--
 .../testdata/stable/circle_arrowhead/dagre/sketch.exp.svg     | 2 +-
 e2etests/testdata/stable/circle_arrowhead/elk/sketch.exp.svg  | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/d2renderers/d2svg/d2svg.go b/d2renderers/d2svg/d2svg.go
index 9b5eb49ee..1eff1ff89 100644
--- a/d2renderers/d2svg/d2svg.go
+++ b/d2renderers/d2svg/d2svg.go
@@ -245,7 +245,7 @@ func arrowheadMarker(isTarget bool, id string, connection d2target.Connection) s
 
 		circleEl := d2themes.NewThemableElement("circle")
 		circleEl.Cy = radius
-		circleEl.R = radius - strokeWidth/2 // @alixander says there maybe should be a plus sign instead
+		circleEl.R = radius - strokeWidth/2
 		circleEl.Fill = connection.Stroke
 		circleEl.ClassName = "connection"
 		circleEl.Attributes = fmt.Sprintf(`stroke-width="%d"`, connection.StrokeWidth)
@@ -253,7 +253,7 @@ func arrowheadMarker(isTarget bool, id string, connection d2target.Connection) s
 		if isTarget {
 			circleEl.Cx = radius + strokeWidth/2
 		} else {
-			circleEl.Cy = radius - strokeWidth/2
+			circleEl.Cx = radius - strokeWidth/2
 		}
 
 		path = circleEl.Render()
diff --git a/e2etests/testdata/stable/circle_arrowhead/dagre/sketch.exp.svg b/e2etests/testdata/stable/circle_arrowhead/dagre/sketch.exp.svg
index 05910403c..ae3eff550 100644
--- a/e2etests/testdata/stable/circle_arrowhead/dagre/sketch.exp.svg
+++ b/e2etests/testdata/stable/circle_arrowhead/dagre/sketch.exp.svg
@@ -44,7 +44,7 @@
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><rect x="-102.000000" y="-102.000000" width="379.000000" height="457.000000" class=" fill-N7" /><g id="a"><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;" /></g><text x="26.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="0.000000" y="187.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="225.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="114.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="140.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="113.000000" y="187.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="140.000000" y="225.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="(a &lt;-&gt; b)[0]"><marker id="mk-797047287" markerWidth="24.000000" markerHeight="24.000000" refX="3.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle r="10.000000" cx="11.000000" cy="12.000000" class=" stroke-B1 fill-N7" stroke-width="2" /> </marker><marker id="mk-2441562586" markerWidth="24.000000" markerHeight="24.000000" refX="21.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle r="10.000000" cx="13.000000" cy="12.000000" class=" stroke-B1 fill-N7" stroke-width="2" /> </marker><path d="M 26.500000 70.000000 C 26.500000 114.400000 26.500000 138.700000 26.500000 183.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-797047287)" marker-end="url(#mk-2441562586)" mask="url(#4111664628)" /><text x="27.000000" y="132.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">circle</text></g><g id="(c &lt;-&gt; d)[0]"><marker id="mk-257864790" markerWidth="24.000000" markerHeight="24.000000" refX="3.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle r="11.000000" cy="11.000000" class="connection fill-B1" stroke-width="2" /> </marker><marker id="mk-1838524849" markerWidth="24.000000" markerHeight="24.000000" refX="21.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle r="11.000000" cx="13.000000" cy="12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 140.000000 70.000000 C 140.000000 114.400000 140.000000 138.700000 140.000000 183.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-257864790)" marker-end="url(#mk-1838524849)" mask="url(#4111664628)" /><text x="140.500000" y="132.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">filled-circle</text></g><mask id="4111664628" maskUnits="userSpaceOnUse" x="-102" y="-102" width="379" height="457">
+]]></script><rect x="-102.000000" y="-102.000000" width="379.000000" height="457.000000" class=" fill-N7" /><g id="a"><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;" /></g><text x="26.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="0.000000" y="187.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="26.500000" y="225.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="114.000000" y="0.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="140.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="113.000000" y="187.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="140.000000" y="225.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="(a &lt;-&gt; b)[0]"><marker id="mk-797047287" markerWidth="24.000000" markerHeight="24.000000" refX="3.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle r="10.000000" cx="11.000000" cy="12.000000" class=" stroke-B1 fill-N7" stroke-width="2" /> </marker><marker id="mk-2441562586" markerWidth="24.000000" markerHeight="24.000000" refX="21.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle r="10.000000" cx="13.000000" cy="12.000000" class=" stroke-B1 fill-N7" stroke-width="2" /> </marker><path d="M 26.500000 70.000000 C 26.500000 114.400000 26.500000 138.700000 26.500000 183.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-797047287)" marker-end="url(#mk-2441562586)" mask="url(#4111664628)" /><text x="27.000000" y="132.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">circle</text></g><g id="(c &lt;-&gt; d)[0]"><marker id="mk-257864790" markerWidth="24.000000" markerHeight="24.000000" refX="3.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle r="11.000000" cx="11.000000" cy="12.000000" class="connection fill-B1" stroke-width="2" /> </marker><marker id="mk-1838524849" markerWidth="24.000000" markerHeight="24.000000" refX="21.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle r="11.000000" cx="13.000000" cy="12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 140.000000 70.000000 C 140.000000 114.400000 140.000000 138.700000 140.000000 183.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-257864790)" marker-end="url(#mk-1838524849)" mask="url(#4111664628)" /><text x="140.500000" y="132.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">filled-circle</text></g><mask id="4111664628" maskUnits="userSpaceOnUse" x="-102" y="-102" width="379" height="457">
 <rect x="-102" y="-102" width="379" height="457" fill="white"></rect>
 <rect x="9.000000" y="116.000000" width="36" height="21" fill="black"></rect>
 <rect x="104.000000" y="116.000000" width="73" height="21" fill="black"></rect>
diff --git a/e2etests/testdata/stable/circle_arrowhead/elk/sketch.exp.svg b/e2etests/testdata/stable/circle_arrowhead/elk/sketch.exp.svg
index 9fe36d464..4aeccccf7 100644
--- a/e2etests/testdata/stable/circle_arrowhead/elk/sketch.exp.svg
+++ b/e2etests/testdata/stable/circle_arrowhead/elk/sketch.exp.svg
@@ -44,7 +44,7 @@
     svgEl.setAttribute("height", height * ratio - 16);
   }
 });
-]]></script><rect x="-90.000000" y="-90.000000" width="339.000000" height="497.000000" class=" fill-N7" /><g id="a"><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;" /></g><text x="38.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="12.000000" y="239.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="277.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="85.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="111.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="85.000000" y="239.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="112.000000" y="277.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="(a &lt;-&gt; b)[0]"><marker id="mk-797047287" markerWidth="24.000000" markerHeight="24.000000" refX="3.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle r="10.000000" cx="11.000000" cy="12.000000" class=" stroke-B1 fill-N7" stroke-width="2" /> </marker><marker id="mk-2441562586" markerWidth="24.000000" markerHeight="24.000000" refX="21.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle r="10.000000" cx="13.000000" cy="12.000000" class=" stroke-B1 fill-N7" stroke-width="2" /> </marker><path d="M 38.500000 82.000000 L 38.500000 235.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-797047287)" marker-end="url(#mk-2441562586)" mask="url(#72472197)" /><text x="39.000000" y="164.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">circle</text></g><g id="(c &lt;-&gt; d)[0]"><marker id="mk-257864790" markerWidth="24.000000" markerHeight="24.000000" refX="3.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle r="11.000000" cy="11.000000" class="connection fill-B1" stroke-width="2" /> </marker><marker id="mk-1838524849" markerWidth="24.000000" markerHeight="24.000000" refX="21.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle r="11.000000" cx="13.000000" cy="12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 112.000000 82.000000 L 112.000000 235.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-257864790)" marker-end="url(#mk-1838524849)" mask="url(#72472197)" /><text x="112.500000" y="164.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">filled-circle</text></g><mask id="72472197" maskUnits="userSpaceOnUse" x="-90" y="-90" width="339" height="497">
+]]></script><rect x="-90.000000" y="-90.000000" width="339.000000" height="497.000000" class=" fill-N7" /><g id="a"><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;" /></g><text x="38.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">a</text></g><g id="b"><g class="shape" ><rect x="12.000000" y="239.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="38.500000" y="277.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">b</text></g><g id="c"><g class="shape" ><rect x="85.000000" y="12.000000" width="53.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="111.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">c</text></g><g id="d"><g class="shape" ><rect x="85.000000" y="239.000000" width="54.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="112.000000" y="277.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">d</text></g><g id="(a &lt;-&gt; b)[0]"><marker id="mk-797047287" markerWidth="24.000000" markerHeight="24.000000" refX="3.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle r="10.000000" cx="11.000000" cy="12.000000" class=" stroke-B1 fill-N7" stroke-width="2" /> </marker><marker id="mk-2441562586" markerWidth="24.000000" markerHeight="24.000000" refX="21.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle r="10.000000" cx="13.000000" cy="12.000000" class=" stroke-B1 fill-N7" stroke-width="2" /> </marker><path d="M 38.500000 82.000000 L 38.500000 235.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-797047287)" marker-end="url(#mk-2441562586)" mask="url(#72472197)" /><text x="39.000000" y="164.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">circle</text></g><g id="(c &lt;-&gt; d)[0]"><marker id="mk-257864790" markerWidth="24.000000" markerHeight="24.000000" refX="3.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle r="11.000000" cx="11.000000" cy="12.000000" class="connection fill-B1" stroke-width="2" /> </marker><marker id="mk-1838524849" markerWidth="24.000000" markerHeight="24.000000" refX="21.000000" refY="12.000000" viewBox="0.000000 0.000000 24.000000 24.000000" orient="auto" markerUnits="userSpaceOnUse"> <circle r="11.000000" cx="13.000000" cy="12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 112.000000 82.000000 L 112.000000 235.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-257864790)" marker-end="url(#mk-1838524849)" mask="url(#72472197)" /><text x="112.500000" y="164.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">filled-circle</text></g><mask id="72472197" maskUnits="userSpaceOnUse" x="-90" y="-90" width="339" height="497">
 <rect x="-90" y="-90" width="339" height="497" fill="white"></rect>
 <rect x="21.000000" y="148.000000" width="36" height="21" fill="black"></rect>
 <rect x="76.000000" y="148.000000" width="73" height="21" fill="black"></rect>