save
This commit is contained in:
Alexander Wang
parent
a33dce3729
commit
e4a7bb5215
7 changed files with 391 additions and 0 deletions
|
|
@ -39,10 +39,15 @@ const (
|
||||||
DEFAULT_PADDING = 100
|
DEFAULT_PADDING = 100
|
||||||
MIN_ARROWHEAD_STROKE_WIDTH = 2
|
MIN_ARROWHEAD_STROKE_WIDTH = 2
|
||||||
threeDeeOffset = 15
|
threeDeeOffset = 15
|
||||||
|
|
||||||
|
tooltipIconLen = 32
|
||||||
)
|
)
|
||||||
|
|
||||||
var multipleOffset = geo.NewVector(10, -10)
|
var multipleOffset = geo.NewVector(10, -10)
|
||||||
|
|
||||||
|
//go:embed tooltip.svg
|
||||||
|
var tooltipIcon string
|
||||||
|
|
||||||
//go:embed style.css
|
//go:embed style.css
|
||||||
var styleCSS string
|
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>`)
|
fmt.Fprintf(writer, `</g>`)
|
||||||
return labelMask, nil
|
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{
|
triggers = []string{
|
||||||
`class="text-bold"`,
|
`class="text-bold"`,
|
||||||
`<b>`,
|
`<b>`,
|
||||||
|
|
|
||||||
5
d2renderers/d2svg/tooltip.svg
Normal file
5
d2renderers/d2svg/tooltip.svg
Normal 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>
|
||||||
|
After Width: | Height: | Size: 650 B |
|
|
@ -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 }
|
papa bear: { shape: text; style.font-size: 32; style.underline: true }
|
||||||
mama bear -> bear
|
mama bear -> bear
|
||||||
papa 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
136
e2etests/testdata/stable/tooltips/dagre/board.exp.json
generated
vendored
Normal 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
44
e2etests/testdata/stable/tooltips/dagre/sketch.exp.svg
vendored
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 326 KiB |
127
e2etests/testdata/stable/tooltips/elk/board.exp.json
generated
vendored
Normal file
127
e2etests/testdata/stable/tooltips/elk/board.exp.json
generated
vendored
Normal 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
44
e2etests/testdata/stable/tooltips/elk/sketch.exp.svg
vendored
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 326 KiB |
Loading…
Reference in a new issue