Palette Node Data

GoJS
1

Hi All,

I’ve taken the SwimLanes example and removed the restrictions so the lanes can be moved around, all working the way I had hoped.

I’ve then tried to add a Palette so to have one node entry for the Lane and another for the node that goes into the Lane:

// create the Palette

var myPalette =

$(go.Palette, "myPalette");

myPalette.nodeTemplate =

$(go.Node, "Vertical", //node template is a Node object (can have a Panel layout)

$(go.Panel, "Auto",

$(go.Shape, "RoundedRectangle", new go.Binding("fill", "color"),

{ height: 40, width: 40, fill: "white" }),

$(go.TextBlock,

{

font: "bold 11pt Helvetica, Arial, sans-serif",

//stroke: lightText,

margin: 8,

maxSize: new go.Size(40, 40),

wrap: go.TextBlock.WrapFit,

textAlign: "center",

editable: false

},

new go.Binding("text", "text"))

));

myPalette.model.nodeDataArray = [

{name: "Lane", text: "Lane", isGroup: true, color:"#C0C0C0", },

{key:"Node", name: "Node", text: "Node", isGroup: false, color:"#00A9C9"},

];

This works in terms of functionality, the first node allows me drop in Lanes, the second entry allows nodes into the Lanes (using the Shift function).

The issue is however, the palette diagram - the first entry doesn't appear correctly, it appears with the text 'Lane' and below it a small square. The second entry in the palette appears correctly (40x40 Rounded Rectangle with the text 'Node' in the middle).

If I change the Lane data so isGroup is false I get the right appearance in the Palette but the functionality is wrong.

Not sure why all entries in the Palette wouldn't appear the same as I though the Palette would only get its data from myPalette variable.

Possibly the lane entry diagram entry in the Palette is being overridden by something else?

Or I don't have the NodeDataEntry correct?

Thanks,

Z

2

I think you are getting the results of the default groupTemplate.
I suggest that you set myPalette.groupTemplate to be whatever satisfies your requirements.

You could even use the myPalette.nodeTemplate, although that might be visually confusing to users.

3

Thanks Walter, got it. I thought that the Palette Nodes were separate diagram completely and so didn’t need to refer to themselves as being a group even if that was their functionality - i.e. adding a group to the canvas.

My goal is to have a completely uniform palette - some nodes/groups would be far too large to put in the Palette and others will be very similar in nature - I’ll probably end up putting in some icons to differentiate between them all.

Solution was to copy/paste the myPalette.nodeTemplate, change it to myPalette.groupTemplate AND to change go.Node to go.Group at the beginning - because it’s a Group!! (couldn’t figure out why myPalette.groupTemplate with go.Node wouldn’t work) - much clearer.

myPalette.groupTemplate =
  $(go.Group, "Vertical",
	$(go.Panel, "Auto",
	$(go.Shape, "RoundedRectangle", new go.Binding("fill", "color"),
	{ height: 40, width: 40, fill: "white" }),

	$(go.TextBlock,
		{
		font: "bold 11pt Helvetica, Arial, sans-serif",
		//stroke: lightText,
		margin: 8,
		maxSize: new go.Size(40, 40),
		wrap: go.TextBlock.WrapFit,
		textAlign: "center",
		editable: false
		},
		new go.Binding("text", "text"))
	)
  );
4

I had the same issue, and followed the method above. It worked and allowed me to draw a Group object in the Palette…however, when I dragdrop it into the Diagram, it appears incorrectly (40x40 Rounded Rectangle with the text ‘Node’ in the middle). Also, I’m not able to drop any other nodes into this group object.

Any ideas on what I need to do to preserve the appearance of the group object through the drag-drop operation?

Thanks!

Jack

5

make sure your Group Templates and Node Templates involved are shared between your Palette and your Diagram. If not, they might take on a very different appearance.

Simple example of Diagram and Palette having different node templates: GoJS Palette -- Northwoods Software (you’d want to avoid this, I assume)

Most of our samples make sure the Palette and Diagram share templates, for example:

// initialize the Palette that is on the left side of the page
myPalette =
  $(go.Palette, "myPalette",  // must name or refer to the DIV HTML element
    {
      nodeTemplateMap: myDiagram.nodeTemplateMap,  // share the templates used by myDiagram