Palette Node Items Arrange With Table Layout

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.

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.

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?

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

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.

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

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?

Have you read the two pages I referenced?

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”}
]

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.

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.

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

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?

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)

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)
)

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"))
      );

Hi Walter,
Your sample code works fine and that is not a problem. I don’t have two elements inside node . I only have one shape element and as I mentioned in one of my earlier comment that it seems to be conflict between linking and moving event and that may be the reason for not having both these actions work from same elements (in this case shape). I can try having empty text block and achieve both these actions . Unless there is some better option.

OK, what is your current node template?

If you really only have one GraphObject within your Node, I suppose there are some possibilities for customizing the tools, but it would be easier to have at least two GraphObjects so that one can be linkable and the other not, as the examples I just listed do.

With empty text block it is working fine for both moving and linking.
Thanks for your help.

2 posts were split to a new topic: Preventing the deletion of the selection