Board aroud panel content

GoJS
1

Hello,

Is there way to get board around panel elements ?

2

Could you provide a sketch or screenshot of what you mean?

Chances are that you’ll want to use an “Auto” Panel.

3

Here is the code, I need to show tooltip with border around

go$(go.Adornment, "Spot", { background: "#EEF1F6" },
    go$(go.Panel, "Position",
        go$(go.Shape, "Rectangle", {
            width: 20,
            height: 50,
            fill: "#A80683",
            position: new go.Point(0, 0)
        }),
        go$(go.Panel, "Vertical", {
            position: new go.Point(30, 10),
            stretch: go.GraphObject.Fill
        },
            go$(go.TextBlock, {
                stroke: "black",
                font: "10px 'Open Sans Semibold', sans-serif",
                alignment: go.Spot.Left
            }, new go.Binding("text", "DisplayText")),
                go$(go.TextBlock, {
                    stroke: "black",
                    font: "10px 'Open Sans Regular', sans-serif",
                    alignment: go.Spot.Left
                }, new go.Binding("text", "ToolTipText")),
                go$(go.TextBlock, {
                    stroke: "black",
                    font: "12px 'Open Sans', sans-serif",
                    text: "This node has unlinked inputs",
                    alignment: go.Spot.Left
                }, new go.Binding("visible", "HasUnlinkedInputs")))
))
4

Here is the screenshot how it looks like right now

5

Ah, yes, for a “border”, use an “Auto” Panel. The first element should be the Shape acting as the border; the second element can be any GraphObject that is not a Part.

I think you’ll want to create a new Panel that is the second element of your Adornment, and change the Adornment to be an “Auto” Panel instead of a “Spot” Panel.

6

Thanks for your responce, I changed code as you proposed

go$(go.Adornment, "Auto", { background: "#EEF1F6" },
    go$(go.Panel, "Position",
        go$(go.Shape, "Rectangle", {
            width: 20,
            height: 50,
            fill: "#A80683",
            position: new go.Point(0, 0)
        }),
        go$(go.Panel, "Vertical", {
            position: new go.Point(30, 10),
            stretch: go.GraphObject.Fill
        },
            go$(go.TextBlock, {
                stroke: "black",
                font: "10px 'Open Sans Semibold', sans-serif",
                alignment: go.Spot.Left
            }, new go.Binding("text", "DisplayText")),
                go$(go.TextBlock, {
                    stroke: "black",
                    font: "10px 'Open Sans Regular', sans-serif",
                    alignment: go.Spot.Left
                }, new go.Binding("text", "ToolTipText")),
                go$(go.TextBlock, {
                    stroke: "black",
                    font: "12px 'Open Sans', sans-serif",
                    text: "This node has unlinked inputs",
                    alignment: go.Spot.Left
                }, new go.Binding("visible", "HasUnlinkedInputs")))
),
     go$(go.Panel, "Auto",
        {
            alignment: go.Spot.Top
        },
        go$(go.Shape, "Rectangle", { margin: new go.Margin(0, 0), fill: "transparent", height: 50 })
        )
)

But still can’t achieve what I would like. Here is screnshot what I got

I set all margins to zero. How can I fix that rectangle around my tooltip ?
Thanks.

7

OK, I get rid og margins, here is my code

go$(go.Adornment, "Auto", { background: "#EEF1F6" },
    go$(go.Panel, "Position",
        go$(go.Shape, "Rectangle", {
            width: 20,
            height: 50,
            fill: "#A80683",
            position: new go.Point(0, 0)
        }),
        go$(go.Panel, "Vertical", {
            position: new go.Point(30, 10),
        },
            go$(go.TextBlock, {
                stroke: "black",
                font: "10px 'Open Sans Semibold', sans-serif",
                alignment: go.Spot.Left
            }, new go.Binding("text", "DisplayText")),
                go$(go.TextBlock, {
                    stroke: "black",
                    font: "10px 'Open Sans Regular', sans-serif",
                    alignment: go.Spot.Left
                }, new go.Binding("text", "ToolTipText")),
                go$(go.TextBlock, {
                    stroke: "black",
                    font: "12px 'Open Sans', sans-serif",
                    text: "This node has unlinked inputs",
                    alignment: go.Spot.Left
                }, new go.Binding("visible", "HasUnlinkedInputs")))
),
     go$(go.Panel, "Auto",
        {
            alignment: go.Spot.Left
        },
        go$(go.Shape, "Rectangle", { fill: "transparent", height: 50 })
        )
)

Here is what i Got as a result

I need to extend rectangle on all text, how to do that ?

8

I think you want your tooltip to basically have the structure:

Adornment "Auto"
    Shape (the border)
    Panel "Horizontal"
        Shape (purple)
        TextBlock

I think that’s all you need.

9

Thanks a lot, it works! :)