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

fix filled circle arrowhead offset

Browse source
This commit is contained in:
Vojtěch Fošnár 2023-02-22 18:50:06 +01:00
parent 72417d5ccf
commit 79abc91ea3
No known key found for this signature in database
GPG key ID: 657727E71C40859A
3 changed files with 4 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
d2renderers/d2svg/d2svg.go
View file

@ -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()

2
e2etests/testdata/stable/circle_arrowhead/dagre/sketch.exp.svg vendored
View file

@ -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>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 474 KiB

After

Width:  |  Height:  |  Size: 474 KiB

2
e2etests/testdata/stable/circle_arrowhead/elk/sketch.exp.svg vendored
View file

@ -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>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 474 KiB

After

Width:  |  Height:  |  Size: 474 KiB