GoJS equivalent of CSS position absolute

GoJS
1

Hi,

Despite the great documentation (seriously, respect!), I’ve been searching the docs for some time now but i can’t seem to find what i am looking for.

I’m trying to create an "error badge’ which should show up in the top right corner of a Panel.
I know Spot panel and TopRight etc exists, the problem is that the panel in question itself is nested in another panel, and it is important that the Error badge does not change the panel’s size.

Using a simple Auto panel, note the input and output port position.
Screenshot 2022-10-25 at 16.48.31

Using a Spot and TopRight
Screenshot 2022-10-25 at 16.49.13

Note how the entire node changes due to the error badge’s position changing the dimensions of the panel it belongs to.

How does one do the CSS equivalent to position:absolute to make sure a layer does not impact its parent dimensions? I want the error badge top right without its ‘overflow’ making the parent layer grow too.

I’m sure its possible, just can’t seem to find the right name of the property.

2

Please read: GoJS Nodes -- Northwoods Software

I can answer in more detail later.

3

Thanks for the fast reply.
It is indeed the ‘Node decorations’ i’m trying to achieve.

To clarify the extra challenge in my situation:
The default state is a Table panel (with potential ports on top, right, and left, and a label on the bottom)
Screenshot 2022-10-25 at 17.10.37

Inside this Table panel, in row 1, column 1, is another Auto panel that contains the rounded rectangle and Icon. Adding the node decoration (red circle with warning) changes the Table panel, making the ports no longer appear attached to the node.

Screenshot 2022-10-25 at 17.09.40

This Auto panel should be able to grow in height based on the number of ports (which it currently does).
This means i can’t specify a fixed dimensions to prevent the rounded rectangle’s parent Auto panel from growing.

4

You will want to adjust the alignment Spot so that it overlaps the shape in the middle row&column the way that you want.

<!DOCTYPE html>
<html>
<head>
  <title>Minimal GoJS Sample</title>
  <!-- Copyright 1998-2022 by Northwoods Software Corporation. -->
</head>
<body>
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
  <script src="https://unpkg.com/gojs"></script>
  <script id="code">
const $ = go.GraphObject.make;

const myDiagram =
  $(go.Diagram, "myDiagramDiv");

myDiagram.nodeTemplate =
  $(go.Node, "Table",
    $(go.Shape, { row: 1, column: 1, stretch: go.GraphObject.Fill,
        minSize: new go.Size(50, 50),
        fill: "white", strokeWidth: 0 },
      new go.Binding("fill", "color")),
    $(go.TextBlock, { row: 1, column: 1 },
      new go.Binding("text")),
    $(go.Shape, { row: 0, column: 1, width: 10, height: 10, opacity: 0 },
      new go.Binding("opacity", "top", t => t ? 1 : 0)),
    $(go.Shape, { row: 1, column: 0, width: 10, height: 10, opacity: 0 },
      new go.Binding("opacity", "left", t => t ? 1 : 0)),
    $(go.Shape, { row: 1, column: 2, width: 10, height: 10, opacity: 0 },
      new go.Binding("opacity", "right", t => t ? 1 : 0)),
    $(go.Shape, { row: 0, column: 1, rowSpan: 2, columnSpan: 2,
        width: 20, height: 20, alignment: go.Spot.TopRight, margin: 3,
        fill: 'red', strokeWidth: 0, visible: false },
      new go.Binding("visible", "decorated"))
  );


myDiagram.model = new go.GraphLinksModel(
[
  { key: 1, text: "Alpha", color: "lightblue", left: true, right: true },
  { key: 2, text: "Beta", color: "orange", left: true, right: true, decorated: true },
  { key: 3, text: "Gamma", color: "lightgreen", left: true, right: true, top: true },
  { key: 4, text: "Delta", color: "pink", left: true, right: true, top: true, decorated: true }
]);
  </script>
</body>
</html>

[EDIT: fixed a bug]
image

5

Thanks,

It was the rowSpan, ColumnSpan, and setting a fixed height for the top row that solved it.