Palette Node Items Arrange With Table Layout

pawan · April 21, 2020, 10:18pm

How to arrange each node item in palette with table layout (instead of grid layout) with two columns in each row?
Currently it is showing with grid layout and it auto arranges randomly (sometime 2 or 3 or one item ) with same available space. How can we disable auto arrange ?
Some palettes nodes show really big and some are small. How to make them same size?
Once node from palette dragged to diagram , it shows very small . How to make them same size?

walter · April 22, 2020, 2:17am

You can set GridLayout.wrappingColumn to 2 in your Palette.layout.

By default the GridLayout.cellSize is computed based on the widest node and the tallest node, so that each cell will be able to hold any node. If you had set GridLayout.cellSize to a smaller value, then you can get the effects of having one or two nodes per row, or even more if the nodes are narrow and you had not set GridLayout.wrappingColumn to 2.

You’ll have to define your node template(s) so that they have the appearance and widths that you want.

I guess it depends on what the Diagram.scale is in both the Palette and in the main Diagram – if the value is much smaller in the main Diagram, you would expect the dropped nodes to appear much smaller than in the Palette, even though they are actually the same size in document units.

pawan · April 22, 2020, 4:04pm

Thanks for your response.

After some digging I found that there is a TableLayout (even though there is no documentation about that). Using that layout with each node specify row and column value seems to working fine so far with two columns in each row. I will try GridLayout.wrappingColumn solution also.
I don’t provide width and height for node item.They are very big in palette and very small in Diagram. When I provide width (desired…) and height in node-template node seems to be chopped instead of scaling down.
I have not specified initial scale in either palette or diagram. So default scale should be same in both places. But it is not for some reason. When I specify scale in palette , text under node geometry is unreadable. Do I have to scale shape and text separately? Doesn’t seem right to me.
One more thing I didn’t mentioned earlier was that there is watermark about GoJs2.1 display . Even though I specify value for ‘go.Diagram.licenseKey’.

walter · April 22, 2020, 4:40pm

There is some documentation for TableLayout: TableLayout | GoJS API But I agree that using GridLayout should be sufficient.

The default Diagram.scale for both the Palette class and the base Diagram class are the same: 1.0. Are you sure you haven’t set the initial scale somehow? Have you set Diagram.initialScale, initialAutoScale, or autoScale?

The watermark will go away if you are serving the page from localhost or from the domain for which the license key was requested.

pawan · April 22, 2020, 5:19pm

GridLayout with wrapping column seems to be same layout effect as Table. However cellSize does not change anything. May be node is bigger than cell size. Not sure why node is that big of a size.

I am not specifying any scale related property in palette or diagram. But node template is different. For palette it is ‘vertical’ with shape and text and for diagram it is auto. May be auto is scaling with some calculation.

I am using localhost instance for development . So it should not appear as per your comment. But it does.

walter · April 22, 2020, 5:49pm

Ah, the screenshot reveals that you are using different templates. The one in the Palette has the TextBlock below the Shape using a “Vertical” Panel (and my guess is that the Shape gets the default size of 100x100). The one in the Diagram has the TextBlock inside the Shape using an “Auto” Panel, so the size of the shape has to be large enough to wrap around the text, which in your case is a short string.

pawan · April 22, 2020, 10:25pm

I am able to look similar size in both palette and diagram. But noticed that node is not draggable after selection in diagram. Instead of node whole canvas is moving during drag of selected node in diagram.
Is there any property to not move canvas and move only selected node?

walter · April 22, 2020, 10:55pm

My guess is that you have set Part.movable to false.

pawan · April 23, 2020, 2:09am

I am not using movable or canMove property anywhere. May be it is a bug in angular version of GoJS.

Item has been dragged from simple palette and dropped somewhere in diagram. Selecting same dropped item in diagram could not be moved to another location in diagram. Whenever I try to move , link is being created originating from selected node. It seems something (event) is conflicting between moving action and create node-link action from the item. May be I am missing something.

walter · April 23, 2020, 2:32am

If you had mentioned before that the user can only draw new links from the dropped node, I would have suggested that perhaps you have set fromLinkable or toLinkable on the node, making the whole node a place from which the user can start a linking operation.

https://gojs.net/latest/intro/validation.html#SpanOfLinkableProperties

pawan · April 23, 2020, 7:40pm

I am confused here. Diagram nodeTemplate has set fromLinkable and toLinkable to true. Which makes me able to create link between two dragged nodes. When I remove these properties I could not create link between nodes. But it allows to move selected node in the diagram.

How can I achieve both node movement and link creation?

walter · April 23, 2020, 8:02pm

Have you read the two pages I referenced?

pawan · April 23, 2020, 9:52pm

I read that document and I think I am doing as per document. But it is still showing same behavior. May be I am missing something.

Here is my code:

"diagram.nodeTemplate = (go.Node, go.Panel.Auto, (go.Shape, {portId: “”, fromLinkable:true, toLinkable:true,
width: 50, height: 50, fill:“lightgrey”, cursor:‘crosshair’},
new go.Binding(“figure”, “fig”)),
);

paletteNodeTemplate = (go.Node, "Auto", (go.Shape,
new go.Binding(“figure”, “fig”)),
$(go.TextBlock,
{margin: 5},
new go.Binding(“text”, “key”))
);
paletteData = [
{key: “Decision”, fig: “Diamond”},
{key: “Database”, fig: “Database”}
]

walter · April 23, 2020, 9:59pm

Both of those pages talk about setting fromLinkable and toLinkable to false on those GraphObjects within the port panel from which you do not want to start drawing a new link.

pawan · April 24, 2020, 9:55pm

I want to draw links from and to every node. So these have been set to true and it is allowing to link each other. That is not a problem. The problem I am facing (as i mentioned earlier also) that selected node does not move. So i could not arrange nodes manually on diagram. However If I remove linkable properties (or make it false) then it allows selected node to move manually. But linking does not work in that case.

walter · April 24, 2020, 10:03pm

Please try what the documentation suggests and what I just suggested – set fromLinkable and toLinkable to false on some GraphObjects within your Node.

pawan · May 1, 2020, 10:09pm

As I mentioned earlier, setting false for both fromLinkable and toLinkable resolves not-moving issue. But it removes create link from node feature and we need create link also.

Another issue we are facing that retrieving saved diagram (or model data) does not have location data. So user could not see exact same diagram he created. Is there any property which captures location data in node/link data array while diagram creation?

walter · May 2, 2020, 5:56pm

I am sorry I am unable to make clear what I am saying.

Here are two examples of setting GraphObject | GoJS API. Look carefully at how the following node templates set fromLinkable (and toLinkable, which is basically the same):
Different Criteria for Hiding "Children" of Collapsed Nodes
Record Mapper (in the field template)

pawan · May 6, 2020, 2:53pm

I am setting either ways, but it is still allowing only one of the feature (moving or linking). Not both.
Here are the options I tried:

Option1:

(go.Node, go.Panel.Auto,{fromLinkable:true, toLinkable:true}, (go.Shape, {
width: 70, height: 70, fill: “lightgrey”,fromLinkable:false, toLinkable:false
}),
new go.Binding(“location”, “loc”, go.Point.parse).makeTwoWay(go.Point.stringify)
)

Option 2:
(go.Node, go.Panel.Auto,{fromLinkable:false, toLinkable:false}, (go.Shape, {
width: 70, height: 70, fill: “lightgrey”,fromLinkable:true, toLinkable:true
}),
new go.Binding(“location”, “loc”, go.Point.parse).makeTwoWay(go.Point.stringify)
)

walter · May 6, 2020, 4:59pm

Let’s start with a minimal node template and add fromLinkable et al:

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        {
          fromLinkable: true, toLinkable: true, cursor: "pointer"
        },
        $(go.Shape,
          { fill: "white" },
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: 8 },
          new go.Binding("text"))
      );

As you should expect, the whole node is now “linkable”, so the LinkingTool runs on a mouse down and drag, and the DraggingTool doesn’t get a chance to run.

Change the Shape to be the port:

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Shape,
          { fill: "white", portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer" },
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: 8, editable: true },
          new go.Binding("text").makeTwoWay())
      );

And now the user can drag the text in order to drag the node, but the user can start drawing a link from the Shape.

Or if you really want the whole node to be a port:

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        {
          fromLinkable: true, toLinkable: true, cursor: "pointer"
        },
        $(go.Shape,
          { fill: "white" },
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: 8, fromLinkable: false, toLinkable: false, cursor: "auto" },
          new go.Binding("text"))
      );