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

save

Browse source
This commit is contained in:
Alexander Wang 2022-12-26 23:56:23 -08:00
parent a33dce3729
commit e4a7bb5215
No known key found for this signature in database
GPG key ID: D89FA31966BDBECE
7 changed files with 391 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
d2renderers/d2svg/d2svg.go
View file

@ -39,10 +39,15 @@ const (
DEFAULT_PADDING = 100
MIN_ARROWHEAD_STROKE_WIDTH = 2
threeDeeOffset = 15
tooltipIconLen = 32
)
var multipleOffset = geo.NewVector(10, -10)
//go:embed tooltip.svg
var tooltipIcon string
//go:embed style.css
var styleCSS string
@ -835,6 +840,15 @@ func drawShape(writer io.Writer, targetShape d2target.Shape, sketchRunner *d2ske
}
}
}
if targetShape.Tooltip != "" {
fmt.Fprintf(writer, `<g transform="translate(%d %d) scale(2)">%s</g>`,
targetShape.Pos.X+targetShape.Width-tooltipIconLen/2,
targetShape.Pos.Y-tooltipIconLen/2,
tooltipIcon,
)
}
fmt.Fprintf(writer, `</g>`)
return labelMask, nil
}
@ -936,6 +950,20 @@ func embedFonts(buf *bytes.Buffer, fontFamily *d2fonts.FontFamily) {
}
}
triggers = []string{
`tooltip-icon`,
}
for _, t := range triggers {
if strings.Contains(content, t) {
buf.WriteString(`
.tooltip-icon {
box-shadow: 0px 0px 32px rgba(31, 36, 58, 0.1);
}`)
break
}
}
triggers = []string{
`class="text-bold"`,
`<b>`,

5
d2renderers/d2svg/tooltip.svg Normal file
View file

@ -0,0 +1,5 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg" class="tooltip-icon">
<path d="M8.00065 14.6667C11.6825 14.6667 14.6673 11.6819 14.6673 8.00004C14.6673 4.31814 11.6825 1.33337 8.00065 1.33337C4.31875 1.33337 1.33398 4.31814 1.33398 8.00004C1.33398 11.6819 4.31875 14.6667 8.00065 14.6667Z" stroke="#DEE1EB" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 10.6667V8" stroke="#272F48" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 5.33337H8.00667" stroke="#272F48" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 650 B

7
e2etests/stable_test.go
View file

@ -1624,6 +1624,13 @@ mama bear: { shape: text; style.font-size: 28; style.italic: true }
papa bear: { shape: text; style.font-size: 32; style.underline: true }
mama bear -> bear
papa bear -> bear
`,
},
{
name: "tooltips",
script: `x: { tooltip: Total abstinence is easier than perfect moderation }
y: { tooltip: Gee, I feel kind of LIGHT in the head now,\nknowing I can't make my satellite dish PAYMENTS! }
x -> y
`,
},
}

136
e2etests/testdata/stable/tooltips/dagre/board.exp.json generated vendored Normal file
View file

@ -0,0 +1,136 @@
{
"name": "",
"fontFamily": "SourceSansPro",
"shapes": [
{
"id": "x",
"type": "",
"pos": {
"x": 1,
"y": 0
},
"width": 113,
"height": 126,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#F7F8FE",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "Total abstinence is easier than perfect moderation",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "x",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 13,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "y",
"type": "",
"pos": {
"x": 0,
"y": 226
},
"width": 114,
"height": 126,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#F7F8FE",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "Gee, I feel kind of LIGHT in the head now,\nknowing I can't make my satellite dish PAYMENTS!",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "y",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 14,
"labelHeight": 26,
"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": "#0D32B2",
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"route": [
{
"x": 57,
"y": 126
},
{
"x": 57,
"y": 166
},
{
"x": 57,
"y": 186
},
{
"x": 57,
"y": 226
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
}
]
}

44
e2etests/testdata/stable/tooltips/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: 326 KiB

127
e2etests/testdata/stable/tooltips/elk/board.exp.json generated vendored Normal file
View file

@ -0,0 +1,127 @@
{
"name": "",
"fontFamily": "SourceSansPro",
"shapes": [
{
"id": "x",
"type": "",
"pos": {
"x": 12,
"y": 12
},
"width": 113,
"height": 126,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#F7F8FE",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "Total abstinence is easier than perfect moderation",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "x",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 13,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "y",
"type": "",
"pos": {
"x": 12,
"y": 238
},
"width": 114,
"height": 126,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#F7F8FE",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "Gee, I feel kind of LIGHT in the head now,\nknowing I can't make my satellite dish PAYMENTS!",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "y",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 14,
"labelHeight": 26,
"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": "#0D32B2",
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"route": [
{
"x": 69,
"y": 138
},
{
"x": 69,
"y": 238
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
}
]
}

44
e2etests/testdata/stable/tooltips/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: 326 KiB