Background opacity without affecting stroke?

GoJS
#1

Hi.

I have a requirement to show ‘highlighting’ on a node with a 50% opaque background.

My gojs node consists of a panel and rectangle. I can set the opacity on the panel OR the rectangle and both give a pleasing effect for the background.

Problem: However, in both cases the highlight (a 2 px width red stroke) is also affected by the opacity.

Question: Is there a way to set the opacity such that it affects only the background of a node and NOT the ‘border’ ?

Solutions tried: I tried putting 2 rectangles in the panel - one for the 50% opaque background and another for the border. However, only the first declared rectangle auto-sizes to fill the panel. Maybe I was missing how to tell the second rectangle to ‘go large’ ?

Poss feature request: Maybe add a backgroundOpacity setting to GraphObject ? Effect to be to apply opacity to background only.

#2

“opacity” is a GraphObject property, not a Part or a Node property, so you can set or bind the opacity of whatever specific graphical objects that you like.
Regarding your two rectangles in a panel – it depends on what kind of Panel it is.

#3

Also, instead of setting GraphObject.opacity, maybe you just want to use a translucent color for the Shape.fill.

#4

Thanks for response.

‘Type of panel’ was ‘Auto’, but I tried ‘Spot’ too. I’d like to know how to have more than one part ‘fill’ the panel for general awareness - coming from an html backgound where there is an inherent sense of nesting, I don’t see the layout of components within a part very easily.

How would I define a translucent color ? This sounds like it could be an easier solution ?

#5

Colors in GoJS are just CSS color strings. You want something like “rgba(255,0,0,0.5)” for a translucent red. https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

“Auto” Panels are supposed to have the main element surround the rest of the elements. “Spot” Panels are supposed to position the rest of the elements relative to the main element. Read http://gojs.net/latest/intro/panels.html for more details and examples.

To get a feel for the “layout” of Panels, besides the Introduction pages, all of the templates have been written so that the nesting of the panels is shown by the indentation. Dynamically, I suppose you could use the code in the Visual Tree sample, http://gojs.net/latest/samples/visualTree.html, to show you the visual tree structure of any diagram that you like. We’re working on tools like this for future releases.

#6

Thanks.

Re translucent color - I was using css color names to keep things simple. Good workaround.

Re panels: With the auto panel and 2 rectangles, the second rectangle remained at its initial dimensions after the rectangle was resized larger, and with panel type spot and no spot alignment on the rectangles the second rectangle was positioned at 0,0 (as expected) but again stayed with the initial dimensions.

Re panels: Thanks yes read that link. The panels behaved as documented. I was noticing that it’s only the first-declared rectangle (shape) in a panel that fills the space, whereas a second does not. I know there is a setting to control which is deemed the ‘filler’, but my purpose was to have both rectangles auto-fit the panel. Like the visual tree tool.

Question: Is there a way to tell a part to ‘fit’ the panel container ? In CSS I would set width & height to 100% (box model issues ignored for clarity) or set it’s top, left, right and bottom to zero, making the element ‘stick’ to the dimensions of its container ?

#7

In general, just set GraphObject.stretch: go.GraphObject.Fill. But there may be exceptions depending on the Panel type.

Read more at http://gojs.net/latest/intro/sizing.html.

#8

Thanks - ‘stretch: go.GraphObject.Fill’ did what I needed.

For other readers, this worked for me:

var highlightTemplate =
    $(go.Node
        , "Auto"
        , new go.Binding("layerName",  "layerName")
        , {
            movable: true,
            resizable: true
        }
        , new go.Binding("location", "", toLocation).makeTwoWay(fromLocation)   // location from model
        , new go.Binding("width", "", toWidth).makeTwoWay(fromWidth)            // width from model
        , new go.Binding("height", "", toHeight).makeTwoWay(fromHeight)         // height from model
        ,$(go.Panel
            , "Auto"
            , $(go.Shape
                , "Rectangle"           // this rectangle gives the translucent background color but no border 
                , { stroke: null }      // no border on this rectangle
                , new go.Binding("fill", "fill")
                , new go.Binding("opacity", "alpha") // opacity coming from the model
            )
            , $(go.Shape
                , "Rectangle"           // this rectangle gives the border but no background color
                , { fill: null          // no fill on this rectangle
                    , strokeWidth: 2    // 2 px border
                    , stroke: 'red'     // red border
                    ,<font color="#ff0000"> stretch: go.GraphObject.Fill </font> // without this only the 'first declared' rectangle will fill the panel 
                  }
            )
        )
    )