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

Merge branch 'master' into alixander/orientation

Browse source
This commit is contained in:
Alexander Wang 2022-11-29 16:49:13 -08:00
commit de786787bb
No known key found for this signature in database
GPG key ID: D89FA31966BDBECE
10 changed files with 262 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

126
d2renderers/d2svg/d2svg.go
View file

@ -509,6 +509,91 @@ func defineShadowFilter(writer io.Writer) {
</defs>`)
}
func render3dRect(targetShape d2target.Shape) string {
moveTo := func(p d2target.Point) string {
return fmt.Sprintf("M%d,%d", p.X+targetShape.Pos.X, p.Y+targetShape.Pos.Y)
}
lineTo := func(p d2target.Point) string {
return fmt.Sprintf("L%d,%d", p.X+targetShape.Pos.X, p.Y+targetShape.Pos.Y)
}
// draw border all in one path to prevent overlapping sections
var borderSegments []string
borderSegments = append(borderSegments,
moveTo(d2target.Point{X: 0, Y: 0}),
)
for _, v := range []d2target.Point{
{X: threeDeeOffset, Y: -threeDeeOffset},
{X: targetShape.Width + threeDeeOffset, Y: -threeDeeOffset},
{X: targetShape.Width + threeDeeOffset, Y: targetShape.Height - threeDeeOffset},
{X: targetShape.Width, Y: targetShape.Height},
{X: 0, Y: targetShape.Height},
{X: 0, Y: 0},
{X: targetShape.Width, Y: 0},
{X: targetShape.Width, Y: targetShape.Height},
} {
borderSegments = append(borderSegments, lineTo(v))
}
// move to top right to draw last segment without overlapping
borderSegments = append(borderSegments,
moveTo(d2target.Point{X: targetShape.Width, Y: 0}),
)
borderSegments = append(borderSegments,
lineTo(d2target.Point{X: targetShape.Width + threeDeeOffset, Y: -threeDeeOffset}),
)
border := targetShape
border.Fill = "none"
borderStyle := shapeStyle(border)
renderedBorder := fmt.Sprintf(`<path d="%s" style="%s"/>`,
strings.Join(borderSegments, " "), borderStyle)
// create mask from border stroke, to cut away from the shape fills
maskID := fmt.Sprintf("border-mask-%v", escapeText(targetShape.ID))
borderMask := strings.Join([]string{
fmt.Sprintf(`<defs><mask id="%s" maskUnits="userSpaceOnUse" x="%d" y="%d" width="%d" height="%d">`,
maskID, targetShape.Pos.X, targetShape.Pos.Y-threeDeeOffset, targetShape.Width+threeDeeOffset, targetShape.Height+threeDeeOffset,
),
fmt.Sprintf(`<rect x="%d" y="%d" width="%d" height="%d" fill="white"></rect>`,
targetShape.Pos.X, targetShape.Pos.Y-threeDeeOffset, targetShape.Width+threeDeeOffset, targetShape.Height+threeDeeOffset,
),
fmt.Sprintf(`<path d="%s" style="%s;stroke:#000;fill:none;opacity:1;"/></mask></defs>`,
strings.Join(borderSegments, ""), borderStyle),
}, "\n")
// render the main rectangle without stroke and the border mask
mainShape := targetShape
mainShape.Stroke = "none"
mainRect := fmt.Sprintf(`<rect x="%d" y="%d" width="%d" height="%d" style="%s" mask="url(#%s)"/>`,
targetShape.Pos.X, targetShape.Pos.Y, targetShape.Width, targetShape.Height, shapeStyle(mainShape), maskID,
)
// render the side shapes in the darkened color without stroke and the border mask
var sidePoints []string
for _, v := range []d2target.Point{
{X: 0, Y: 0},
{X: threeDeeOffset, Y: -threeDeeOffset},
{X: targetShape.Width + threeDeeOffset, Y: -threeDeeOffset},
{X: targetShape.Width + threeDeeOffset, Y: targetShape.Height - threeDeeOffset},
{X: targetShape.Width, Y: targetShape.Height},
{X: targetShape.Width, Y: 0},
} {
sidePoints = append(sidePoints,
fmt.Sprintf("%d,%d", v.X+targetShape.Pos.X, v.Y+targetShape.Pos.Y),
)
}
darkerColor, err := color.Darken(targetShape.Fill)
if err != nil {
darkerColor = targetShape.Fill
}
sideShape := targetShape
sideShape.Fill = darkerColor
sideShape.Stroke = "none"
renderedSides := fmt.Sprintf(`<polygon points="%s" style="%s" mask="url(#%s)"/>`,
strings.Join(sidePoints, " "), shapeStyle(sideShape), maskID)
return borderMask + mainRect + renderedSides + renderedBorder
}
func drawShape(writer io.Writer, targetShape d2target.Shape) error {
fmt.Fprintf(writer, `<g id="%s">`, escapeText(targetShape.ID))
tl := geo.NewPoint(float64(targetShape.Pos.X), float64(targetShape.Pos.Y))
@ -561,50 +646,15 @@ func drawShape(writer io.Writer, targetShape d2target.Shape) error {
// TODO should standardize "" to rectangle
case d2target.ShapeRectangle, "":
if targetShape.ThreeDee {
darkerColor, err := color.Darken(targetShape.Fill)
if err != nil {
darkerColor = targetShape.Fill
}
sideShape := targetShape
sideShape.Fill = darkerColor
sideStyle := shapeStyle(sideShape)
var topPolygonPoints []string
for _, v := range []d2target.Point{
{X: 0, Y: 0},
{X: threeDeeOffset, Y: -1 * threeDeeOffset},
{X: targetShape.Width + threeDeeOffset, Y: -1 * threeDeeOffset},
{X: targetShape.Width, Y: 0},
{X: 0, Y: 0},
} {
topPolygonPoints = append(topPolygonPoints,
fmt.Sprintf("%d,%d ", v.X+targetShape.Pos.X, v.Y+targetShape.Pos.Y),
)
}
fmt.Fprintf(writer, `<polygon points="%s" style="%s"/>`,
strings.Join(topPolygonPoints, ""), sideStyle)
var rightPolygonPoints []string
for _, v := range []d2target.Point{
{X: targetShape.Width, Y: 0},
{X: targetShape.Width + threeDeeOffset, Y: -1 * threeDeeOffset},
{X: targetShape.Width + threeDeeOffset, Y: targetShape.Height - threeDeeOffset},
{X: targetShape.Width, Y: targetShape.Height},
} {
rightPolygonPoints = append(rightPolygonPoints,
fmt.Sprintf("%d,%d ", v.X+targetShape.Pos.X, v.Y+targetShape.Pos.Y),
)
}
fmt.Fprintf(writer, `<polygon points="%s" style="%s"/>`,
strings.Join(rightPolygonPoints, ""), sideStyle)
}
fmt.Fprint(writer, render3dRect(targetShape))
} else {
if targetShape.Multiple {
fmt.Fprintf(writer, `<rect x="%d" y="%d" width="%d" height="%d" style="%s" />`,
targetShape.Pos.X+10, targetShape.Pos.Y-10, targetShape.Width, targetShape.Height, style)
}
fmt.Fprintf(writer, `<rect x="%d" y="%d" width="%d" height="%d" style="%s" />`,
targetShape.Pos.X, targetShape.Pos.Y, targetShape.Width, targetShape.Height, style)
}
case d2target.ShapeText, d2target.ShapeCode:
default:
if targetShape.Multiple {

14
e2etests/stable_test.go
View file

@ -1000,6 +1000,20 @@ b: {
a -> b -> c -> d -> e
}
}
`,
},
{
name: "transparent_3d",
script: `
cube: {
style: {
3d: true
opacity: 0.5
fill: orange
stroke: "#53C0D8"
stroke-width: 7
}
}
`,
},
}

6
e2etests/testdata/stable/square_3d/dagre/sketch.exp.svg vendored
View file

@ -14,7 +14,11 @@ width="371" height="580" viewBox="-100 -100 371 580"><style type="text/css">
}
]]>
</style><g id="rectangle"><g class="shape" ><polygon points="0,0 15,-15 186,-15 171,0 0,0 " style="fill:#cad0f8;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><polygon points="171,0 186,-15 186,111 171,126 " style="fill:#cad0f8;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><rect x="0" y="0" width="171" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="85.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">rectangle</text></g><g id="square"><g class="shape" ><polygon points="9,226 24,211 178,211 163,226 9,226 " style="fill:#cad0f8;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><polygon points="163,226 178,211 178,365 163,380 " style="fill:#cad0f8;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><rect x="9" y="226" width="154" height="154" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="86.000000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">square</text></g><g id="(rectangle -&gt; square)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 85.500000 128.000000 C 85.500000 166.000000 85.500000 186.000000 85.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><style type="text/css"><![CDATA[
</style><g id="rectangle"><g class="shape" ><defs><mask id="border-mask-rectangle" maskUnits="userSpaceOnUse" x="0" y="-15" width="186" height="141">
<rect x="0" y="-15" width="186" height="141" fill="white"></rect>
<path d="M0,0L15,-15L186,-15L186,111L171,126L0,126L0,0L171,0L171,126M171,0L186,-15" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="0" y="0" width="171" height="126" style="fill:#F7F8FE;stroke:none;opacity:1.000000;stroke-width:2;" mask="url(#border-mask-rectangle)"/><polygon points="0,0 15,-15 186,-15 186,111 171,126 171,0" style="fill:#cad0f8;stroke:none;opacity:1.000000;stroke-width:2;" mask="url(#border-mask-rectangle)"/><path d="M0,0 L15,-15 L186,-15 L186,111 L171,126 L0,126 L0,0 L171,0 L171,126 M171,0 L186,-15" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="85.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">rectangle</text></g><g id="square"><g class="shape" ><defs><mask id="border-mask-square" maskUnits="userSpaceOnUse" x="9" y="211" width="169" height="169">
<rect x="9" y="211" width="169" height="169" fill="white"></rect>
<path d="M9,226L24,211L178,211L178,365L163,380L9,380L9,226L163,226L163,380M163,226L178,211" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="9" y="226" width="154" height="154" style="fill:#F7F8FE;stroke:none;opacity:1.000000;stroke-width:2;" mask="url(#border-mask-square)"/><polygon points="9,226 24,211 178,211 178,365 163,380 163,226" style="fill:#cad0f8;stroke:none;opacity:1.000000;stroke-width:2;" mask="url(#border-mask-square)"/><path d="M9,226 L24,211 L178,211 L178,365 L163,380 L9,380 L9,226 L163,226 L163,380 M163,226 L178,211" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="86.000000" y="306.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">square</text></g><g id="(rectangle -&gt; square)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 85.500000 128.000000 C 85.500000 166.000000 85.500000 186.000000 85.500000 222.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><style type="text/css"><![CDATA[
.text-bold {
font-family: "font-bold";
}

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 325 KiB

After

Width:  |  Height:  |  Size: 326 KiB

6
e2etests/testdata/stable/square_3d/elk/sketch.exp.svg vendored
View file

@ -14,7 +14,11 @@ width="371" height="580" viewBox="-88 -88 371 580"><style type="text/css">
}
]]>
</style><g id="rectangle"><g class="shape" ><polygon points="12,12 27,-3 198,-3 183,12 12,12 " style="fill:#cad0f8;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><polygon points="183,12 198,-3 198,123 183,138 " style="fill:#cad0f8;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><rect x="12" y="12" width="171" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="97.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">rectangle</text></g><g id="square"><g class="shape" ><polygon points="21,238 36,223 190,223 175,238 21,238 " style="fill:#cad0f8;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><polygon points="175,238 190,223 190,377 175,392 " style="fill:#cad0f8;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><rect x="21" y="238" width="154" height="154" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="98.000000" y="318.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">square</text></g><g id="(rectangle -&gt; square)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 97.500000 140.000000 L 97.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><style type="text/css"><![CDATA[
</style><g id="rectangle"><g class="shape" ><defs><mask id="border-mask-rectangle" maskUnits="userSpaceOnUse" x="12" y="-3" width="186" height="141">
<rect x="12" y="-3" width="186" height="141" fill="white"></rect>
<path d="M12,12L27,-3L198,-3L198,123L183,138L12,138L12,12L183,12L183,138M183,12L198,-3" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="12" y="12" width="171" height="126" style="fill:#F7F8FE;stroke:none;opacity:1.000000;stroke-width:2;" mask="url(#border-mask-rectangle)"/><polygon points="12,12 27,-3 198,-3 198,123 183,138 183,12" style="fill:#cad0f8;stroke:none;opacity:1.000000;stroke-width:2;" mask="url(#border-mask-rectangle)"/><path d="M12,12 L27,-3 L198,-3 L198,123 L183,138 L12,138 L12,12 L183,12 L183,138 M183,12 L198,-3" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="97.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">rectangle</text></g><g id="square"><g class="shape" ><defs><mask id="border-mask-square" maskUnits="userSpaceOnUse" x="21" y="223" width="169" height="169">
<rect x="21" y="223" width="169" height="169" fill="white"></rect>
<path d="M21,238L36,223L190,223L190,377L175,392L21,392L21,238L175,238L175,392M175,238L190,223" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="21" y="238" width="154" height="154" style="fill:#F7F8FE;stroke:none;opacity:1.000000;stroke-width:2;" mask="url(#border-mask-square)"/><polygon points="21,238 36,223 190,223 190,377 175,392 175,238" style="fill:#cad0f8;stroke:none;opacity:1.000000;stroke-width:2;" mask="url(#border-mask-square)"/><path d="M21,238 L36,223 L190,223 L190,377 L175,392 L21,392 L21,238 L175,238 L175,392 M175,238 L190,223" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text-bold" x="98.000000" y="318.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">square</text></g><g id="(rectangle -&gt; square)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 97.500000 140.000000 L 97.500000 234.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" /></g><style type="text/css"><![CDATA[
.text-bold {
font-family: "font-bold";
}

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 325 KiB

After

Width:  |  Height:  |  Size: 326 KiB

4
e2etests/testdata/stable/stylish/dagre/sketch.exp.svg vendored
View file

@ -22,7 +22,9 @@ width="314" height="552" viewBox="-100 -100 314 552"><style type="text/css">
<feOffset dx="3" dy="5" result="ShadowFeOffset" in="ShadowFeComposite"></feOffset>
<feBlend in="SourceGraphic" in2="ShadowFeOffset" mode="normal" result="ShadowFeBlend"></feBlend>
</filter>
</defs><g id="x"><g class="shape" filter="url(#shadow-filter)" ><rect x="1" y="0" width="113" height="126" style="fill:orange;stroke:#53C0D8;opacity:0.600000;stroke-width:5;" /></g><text class="text-bold" x="57.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text></g><g id="y"><g class="shape" ><polygon points="0,226 15,211 129,211 114,226 0,226 " style="fill:#cc0000;stroke:black;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;"/><polygon points="114,226 129,211 129,337 114,352 " style="fill:#cc0000;stroke:black;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;"/><rect x="0" y="226" width="114" height="126" style="fill:red;stroke:black;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;" /></g><text class="text-bold" x="57.000000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text></g><g id="(x -&gt; y)[0]"><marker id="mk-1457214650" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="green" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 57.000000 129.500000 C 57.000000 166.000000 57.000000 186.000000 57.000000 222.000000" class="connection" style="fill:none;stroke:green;opacity:0.500000;stroke-width:2;stroke-dasharray:10.000000,9.865639;" marker-end="url(#mk-1457214650)" /></g><style type="text/css"><![CDATA[
</defs><g id="x"><g class="shape" filter="url(#shadow-filter)" ><rect x="1" y="0" width="113" height="126" style="fill:orange;stroke:#53C0D8;opacity:0.600000;stroke-width:5;" /></g><text class="text-bold" x="57.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text></g><g id="y"><g class="shape" ><defs><mask id="border-mask-y" maskUnits="userSpaceOnUse" x="0" y="211" width="129" height="141">
<rect x="0" y="211" width="129" height="141" fill="white"></rect>
<path d="M0,226L15,211L129,211L129,337L114,352L0,352L0,226L114,226L114,352M114,226L129,211" style="fill:none;stroke:black;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="0" y="226" width="114" height="126" style="fill:red;stroke:none;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;" mask="url(#border-mask-y)"/><polygon points="0,226 15,211 129,211 129,337 114,352 114,226" style="fill:#cc0000;stroke:none;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;" mask="url(#border-mask-y)"/><path d="M0,226 L15,211 L129,211 L129,337 L114,352 L0,352 L0,226 L114,226 L114,352 M114,226 L129,211" style="fill:none;stroke:black;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;"/></g><text class="text-bold" x="57.000000" y="292.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text></g><g id="(x -&gt; y)[0]"><marker id="mk-1457214650" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="green" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 57.000000 129.500000 C 57.000000 166.000000 57.000000 186.000000 57.000000 222.000000" class="connection" style="fill:none;stroke:green;opacity:0.500000;stroke-width:2;stroke-dasharray:10.000000,9.865639;" marker-end="url(#mk-1457214650)" /></g><style type="text/css"><![CDATA[
.text-bold {
font-family: "font-bold";
}

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 325 KiB

After

Width:  |  Height:  |  Size: 326 KiB

4
e2etests/testdata/stable/stylish/elk/sketch.exp.svg vendored
View file

@ -22,7 +22,9 @@ width="314" height="552" viewBox="-88 -88 314 552"><style type="text/css">
<feOffset dx="3" dy="5" result="ShadowFeOffset" in="ShadowFeComposite"></feOffset>
<feBlend in="SourceGraphic" in2="ShadowFeOffset" mode="normal" result="ShadowFeBlend"></feBlend>
</filter>
</defs><g id="x"><g class="shape" filter="url(#shadow-filter)" ><rect x="13" y="12" width="113" height="126" style="fill:orange;stroke:#53C0D8;opacity:0.600000;stroke-width:5;" /></g><text class="text-bold" x="69.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text></g><g id="y"><g class="shape" ><polygon points="12,238 27,223 141,223 126,238 12,238 " style="fill:#cc0000;stroke:black;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;"/><polygon points="126,238 141,223 141,349 126,364 " style="fill:#cc0000;stroke:black;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;"/><rect x="12" y="238" width="114" height="126" style="fill:red;stroke:black;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;" /></g><text class="text-bold" x="69.000000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text></g><g id="(x -&gt; y)[0]"><marker id="mk-1457214650" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="green" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 69.000000 141.500000 L 69.000000 234.000000" class="connection" style="fill:none;stroke:green;opacity:0.500000;stroke-width:2;stroke-dasharray:10.000000,9.865639;" marker-end="url(#mk-1457214650)" /></g><style type="text/css"><![CDATA[
</defs><g id="x"><g class="shape" filter="url(#shadow-filter)" ><rect x="13" y="12" width="113" height="126" style="fill:orange;stroke:#53C0D8;opacity:0.600000;stroke-width:5;" /></g><text class="text-bold" x="69.500000" y="78.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text></g><g id="y"><g class="shape" ><defs><mask id="border-mask-y" maskUnits="userSpaceOnUse" x="12" y="223" width="129" height="141">
<rect x="12" y="223" width="129" height="141" fill="white"></rect>
<path d="M12,238L27,223L141,223L141,349L126,364L12,364L12,238L126,238L126,364M126,238L141,223" style="fill:none;stroke:black;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="12" y="238" width="114" height="126" style="fill:red;stroke:none;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;" mask="url(#border-mask-y)"/><polygon points="12,238 27,223 141,223 141,349 126,364 126,238" style="fill:#cc0000;stroke:none;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;" mask="url(#border-mask-y)"/><path d="M12,238 L27,223 L141,223 L141,349 L126,364 L12,364 L12,238 L126,238 L126,364 M126,238 L141,223" style="fill:none;stroke:black;opacity:0.600000;stroke-width:2;stroke-dasharray:10.000000,9.865639;"/></g><text class="text-bold" x="69.000000" y="304.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">y</text></g><g id="(x -&gt; y)[0]"><marker id="mk-1457214650" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="green" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 69.000000 141.500000 L 69.000000 234.000000" class="connection" style="fill:none;stroke:green;opacity:0.500000;stroke-width:2;stroke-dasharray:10.000000,9.865639;" marker-end="url(#mk-1457214650)" /></g><style type="text/css"><![CDATA[
.text-bold {
font-family: "font-bold";
}

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 325 KiB

After

Width:  |  Height:  |  Size: 326 KiB

44
e2etests/testdata/stable/transparent_3d/dagre/board.exp.json generated vendored Normal file
View file

@ -0,0 +1,44 @@
{
"name": "",
"shapes": [
{
"id": "cube",
"type": "",
"pos": {
"x": 0,
"y": 0
},
"width": 139,
"height": 126,
"level": 1,
"opacity": 0.5,
"strokeDash": 0,
"strokeWidth": 7,
"borderRadius": 0,
"fill": "orange",
"stroke": "#53C0D8",
"shadow": false,
"3d": true,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"fields": null,
"methods": null,
"columns": null,
"label": "cube",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 39,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER"
}
],
"connections": []
}

26
e2etests/testdata/stable/transparent_3d/dagre/sketch.exp.svg vendored Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 324 KiB

44
e2etests/testdata/stable/transparent_3d/elk/board.exp.json generated vendored Normal file
View file

@ -0,0 +1,44 @@
{
"name": "",
"shapes": [
{
"id": "cube",
"type": "",
"pos": {
"x": 12,
"y": 12
},
"width": 139,
"height": 126,
"level": 1,
"opacity": 0.5,
"strokeDash": 0,
"strokeWidth": 7,
"borderRadius": 0,
"fill": "orange",
"stroke": "#53C0D8",
"shadow": false,
"3d": true,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"fields": null,
"methods": null,
"columns": null,
"label": "cube",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 39,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER"
}
],
"connections": []
}

26
e2etests/testdata/stable/transparent_3d/elk/sketch.exp.svg vendored Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 324 KiB