Background panel not fully covered by another panel

GoJS
1

I use the Auto Panel with the Rectangle shape as the main shape. Now I want to clip the panel using some shape. I’m currently trying to achieve that by nesting another AutoPanel with white background with the main shape set to RoundedRectangle. The problem is that it doesn’t fully cover the root panel area. How could I prevent that, or how could I clip the root panel using some shape? Ideally I’d like to be able to create a “hole” somewhere in the middle of a node so that I can see through what’s behind a node.

image
image295×277 708 Bytes

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>GoJS Single Node Example</title>
    <script src="https://unpkg.com/gojs/release/go.js"></script>
    <style>
      #myDiagramDiv {
        width: 400px;
        height: 400px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div id="myDiagramDiv"></div>

    <script>
      function init() {
        var $ = go.GraphObject.make;
        var myDiagram = $(go.Diagram, "myDiagramDiv", {
          "undoManager.isEnabled": true,
        });

        myDiagram.nodeTemplate = $(
          go.Node,
          "Auto",
          { width: 100 },
          $(go.Shape, "Rectangle", { fill: "red", strokeWidth: 0 }),
          $(
            go.Panel,
            "Auto",
            {
              alignment: go.Spot.Left,
              width: 20,
              background: "white",
            },
            $(go.Shape, "RoundedRectangle", {
              fill: "red",
              strokeWidth: 0,
              parameter1: 20,
              parameter2: 1 | 8,
            })
          )
        );

        myDiagram.model = new go.GraphLinksModel([{ key: 1 }]);
      }

      window.onload = init;
    </script>
  </body>
</html>
2

“Auto” Panels act to surround or provide a border for other elements.
In your case the inner “Auto” Panel only seems to have one element in it – so what is that Shape supposed to surround?

Read more about panels at Panels | GoJS

What is it that you are trying to do? Can you show a sketch or screenshot?

3

I was able to achieve what I currently need with the Horizontal Panel. But I still can see some space between shapes when I zoom out (white vertical line between shapes). I don’t set position of panels, only width and height:

So my template is now like this:

$(go.Panel, "Horizontal", $(go.Shape, "RoundedRectangle", {width: 20, parameter1: 20, parameter2: 1 | 8 }), $(go.Shape, "Rectangle", {width: 100}))

image

4

I still don’t know what you really want.

If you just want a rounded rectangle that is only rounded on the left side, then use:

        new go.Shape("RoundedRectangle", {
            fill: "lightblue", strokeWidth: 0,
            width: 120, height: 20,
            parameter1: 20, parameter2: 1 | 8
          })
5

It could be any shape on the left side, triangle, spades, etc…

Currently with triangle and zoomed out (some space between shapes)
image

Zoomed in (no space between shapes)

image
image590×438 1.72 KB

6

That’s caused by antialiasing. With solid colors you could use a very tiny negative margin between the two Shapes.

Another solution is to generate a new Geometry that is the combination of the two Geometries.