Custom Node Template creation

GoJS
1

I am completely new to GO.JS and wanted to create a node template with following constrains -

  1. Node template is rectangle shape with two inner rectangle shape.
  2. The inner rectangle should be with dotted lines.
  3. The dotted rectangle contains text blocks

Now, depending on my setting, I should be able to see dotted lines optionally. For eq. By using the created node in design interface I should be able to see the dotted rectangle (so user can drag-drop custom information) and when actual results is displayed using same node template the dotted lines should not be visible (final result).

How I can achieve this ? I am tring to modify the same of Entity relationship template and found that Shape cannot be added within another shape.

Will you provide some sample code for same.

2

You will want to use either nested Spot panels or Auto panels. Read this page to see how they work.

Here’s an example template for you, take a careful look at its structure:

3

Thanks for your quick reply. Yesterday I also managed to show dotted rectangle in the Entity Relation sample.
With my change, when re sizing the node , inner rectangle remains at same position ( the margin from outer rectangle node to dotted lines gets increased. It should remain same)

Even i tried the sample of “Viewbox Panels”, as per the link by allowing nodes to resizable. With this sample the outer most shape gets resized. By providing the margin to outer most shape, it gets displayed inside of node but then node doesn’t have any border.

With your example also, the inner dotted rectangle remains at same position when re-sized the node. Instead of that it should preserve the margin.

Final expected thing is one node with two text area surrounded by dotted border. By resizing the node the inner dotted rectangle should get resized.

4

Could you please sketch images before and after resizing? Also, what should happen when the user tries to resize very small, smaller than will fit the text?

It would also help you to have read the following pages, so that you are familuar with the basics ideas and terminology:
http://gojs.net/latest/intro/panels.html
http://gojs.net/latest/intro/tablePanels.html
http://gojs.net/latest/intro/sizing.html

5

I updated your example to have two text box inside a node and resizing possibility. Also it has minimum constrain on node width & height so it cannot be resized beyound specific width & height.

Sample

In the sample the bigger node (long text) shows the left & right margin properly but not top & bottom.
In case of Beta node, dotted lines should start at left position as shown in node with large text.

Resizing the large nodes (reducing the width) , should preserve the margin of 5 given to “Vertical” panel.

6

I think you are missing some stretch: go.GraphObject.Fill properties to make sure panels expand to fill the available area.

I just tried this template:

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        { resizable: true },
        $(go.Shape, { fill: "coral", strokeWidth: 3 }),
        $(go.Panel, "Table", { stretch: go.GraphObject.Fill, margin: 15 },
          $(go.Panel, "Auto", { row: 0, stretch: go.GraphObject.Fill },
            $(go.Shape, { fill: null, strokeDashArray: [3, 3] }),
            $(go.TextBlock, { margin: 3 },
              new go.Binding("text", "key"))
          ),
          $(go.Panel, "Auto", { row: 1, stretch: go.GraphObject.Fill },
            $(go.Shape, { fill: null, strokeDashArray: [3, 3] }),
            $(go.TextBlock, { margin: 3 },
              new go.Binding("text", "key"))
          )
        )
      );

and got these results: