I am using two different node templates one for the palette and another one for the canvas diagrams and i have JSON data for the diagrams that has location,angle and other properties for the shapes.
so i was getting the location of the shapes in palette’s nodeTemplate using location binding .
Because I want to show diagrams differently in palette i don’t want to use location binding in palette’s nodeTemplate.If i don’t use location binding in palette’s nodeTemplate when i drag the shape to the canvas it doesn’t appear the way i made it because i removed the location binding from nodeTemplate of palette.
So how can i achieve the same diagram on dragging from palette to canvas that i made without using location binding in palette’s nodeTemplate.
Thanks.
I don’t understand the problem. You say you are already using different templates in the Palette than in the main Diagram. So presumably you don’t have a Node.location binding in your Palette’s node template, but you do in your main Diagram’s node template. That’s because you are depending on the Palette.layout to assign locations to the Nodes within the Palette, but you want to remember the locations of user-dragged Nodes in the main Diagram.
The appearance of each node doesn’t depend on the location, does it? That would be surprising.
yes, i removed Node.location binding from my Palette’s node template,and
after that when i dragged the diagram to the canvas…it breaks the diagram…and if use Node.location binding in my Palette’s node template the diagrams displays correctly on the canvas after dragging.
This is what i get on dragging the diagram to canvas :
1) when i don’t use location binding in palette’s node template.
2)When i use location binding in palette’s node template (this is what i saved …this is the correct diagram)
So my question is,Is it possible to show the diagram(after dragging to the canvas) the way i saved it without using location binding in palette’s node template.
I assume you meant to say that when the user drags the node from the palette to the diagram it breaks the copied node, not the diagram.
What is the template?
Are you using the debug library and are there any warnings or errors in the console output?
customDynamicPallete.nodeTemplate =
GO(go.Node,"Auto",
{ selectionObjectName: "SHAPE",
selectionAdorned: false, // don't show the standard selection handle
selectable:false,
// locationSpot: go.Spot.Center,
rotatable: true, // user can rotate the Shape
resizable: true, resizeObjectName: "SHAPE", // user can resize the Shape
layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized
},
new go.Binding("angle", "ang").makeTwoWay(),
new go.Binding("location", "loc",go.Point.parse).makeTwoWay(go.Point.stringify),
GO(go.Panel, "Auto",
GO(go.Shape,
{
name:"SHAPE",
cursor: "pointer",
fill: "transparent",
stroke:"transparent",
// strokeWidth:2,
desiredSize: new go.Size(1,1)
}
)
)
);Also i don’t see any warning in the console.
You are not using the debug library, otherwise you would have seen a warning about having an “Auto” Panel with only one element in it.
There is only one Shape in your Node, and because you don’t bind Shape.geometry or .geometryString or .figure, the shape will just be a rectangle. So I do not see how you are getting either of the renderings that you show in your two screenshots.
I am using .figure binding in node template for canvas shapes.
And because the fill and stroke are “transparent”, the user won’t see anything in the Palette for that node. So that palette template seems completely useless to me – it doesn’t show anything and takes up just one document unit worth of space in each direction.
Anyway, the problem seems to be with your template in your main diagram, since that is where both screenshots were taken, yes?
customDynamicPallete.groupTemplate =
GO(go.Group, "Auto",
{selectionAdorned: true},
new go.Binding("location", "loc",go.Point.parse),
GO(go.Panel, "Auto",
GO(go.Shape, "Rectangle", // surrounds the Placeholder
{ parameter1: 0,
fill: "lightskyblue",
stroke:"black",
desiredSize: new go.Size(170, 20) }),
GO(go.TextBlock,
{
font: "bold 11px sans-serif",
alignment: go.Spot.Center,
wrap: go.TextBlock.WrapFit,
stroke:"black",
editable: true
},
new go.Binding("text", "text").makeTwoWay(),
new go.Binding("stroke", "textcolor"),
new go.Binding("font", "fontstyle"))
)
);
These shapes are inside a group…so i am hiding everything from the node template and showing a textblock inside the palette using group template.No the problem is in the palette because when i use location binding in palette’s node template diagram shows correctly after dragging to the canvas and
if i don’t use location binding in node template of palette diagram breaks on dragging to the canvas.
Ah, you hadn’t mentioned groups at all until just now.
So everything appears the way that you want in the palette? I assume in the palette’s model there are two node data objects that refer to that group as their container.
What’s the problem with having a Node.location binding in the palette’s node template? Both the group and its member nodes are being copied to the target diagram, yes?
If i use Node.location binding in the palette’s node template .Diagrams in palette appear like this
and if i don’t use Node.location binding in the palette’s node template,diagrams in palette appear like this…(the way i want to show the diagrams)
that’s why i don’t want to use location binding.
Set Group.layout to null in your palette’s group template. That way the Palette.layout, which defaults to being an instance of GridLayout will ignore all Groups and apply to all their member Nodes.
Setting layout : null in group template of palette results in this
only one diagram is showing in the palette also when i dragged this to canvas,the diagram is not correct location wise and angle wise also.
this is how i was showing the diagrams.then i changed this group to blue coloured group with desiredSize:new go.Size(170, 20) ,made the inside shapes transparent and made a text-block inside the group…so i want to show the data in palette like this :
but it shows like this because I changed the minSize:new go.Size(170, 20) of group template to desiredSize:new go.Size(170, 20)
and diagrams look like below because of desiredSize –
Oh, I misunderstood you – I thought the blue rectangles with “shape…” text were individual nodes, not whole groups. You need to give us all of the relevant information, and none of the irrelevant stuff, when describing your needs.
I still don’t understand your situation, so I cannot give you good advice. As became clear with my previous suggestion.
As you see this palette with grey coloured groups consisting of multiple shapes and a text block that is inside group template not in node template…Now what i want to do is
1)Make the shapes (that are inside the groups) transparent that i already did.
2)Fix the size of group that i did by using desiredSize …before it was minSize.and changed the colour of group to skyblue as you can see in the screenshots i provided above.
3)And now there was only a text box that was showing inside a blue coloured group after i did point 1 and point 2.
Now my problem is the blue coloured groups start after taking some gap from the top inside the palette (see the image below)
but i want these blue coloured groups to show as the grey coloured group are showing(grey groups doesn’t take any gap from the top side as you can see in below image)
I just took your templates, unmodified, and put them into a minimal sample. Here’s what I got:
Here’s the code. (Well, I did fix the spelling of the variable name holding the palette, and I replaced “GO” with “$”.)
// initialize Palette
myPalette =
$(go.Palette, "myPaletteDiv",
{
layout:
$(go.GridLayout,
{ cellSize: new go.Size(2, 2),
isViewportSized: true })
});
myPalette.nodeTemplate =
$(go.Node, "Auto",
{
selectionObjectName: "SHAPE",
selectionAdorned: false, // don't show the standard selection handle
selectable: false,
// locationSpot: go.Spot.Center,
rotatable: true, // user can rotate the Shape
resizable: true, resizeObjectName: "SHAPE", // user can resize the Shape
layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized
},
new go.Binding("angle", "ang").makeTwoWay(),
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Panel, "Auto",
$(go.Shape,
{
name: "SHAPE",
cursor: "pointer",
fill: "transparent",
stroke: "transparent",
// strokeWidth:2,
desiredSize: new go.Size(1, 1)
}
)
)
);
myPalette.groupTemplate =
$(go.Group, "Auto",
{ selectionAdorned: true },
new go.Binding("location", "loc", go.Point.parse),
$(go.Panel, "Auto",
$(go.Shape, "Rectangle", // surrounds the Placeholder
{
parameter1: 0,
fill: "lightskyblue",
stroke: "black",
desiredSize: new go.Size(170, 20)
}),
$(go.TextBlock,
{
font: "bold 11px sans-serif",
alignment: go.Spot.Center,
wrap: go.TextBlock.WrapFit,
stroke: "black",
editable: true
},
new go.Binding("text", "text").makeTwoWay(),
new go.Binding("stroke", "textcolor"),
new go.Binding("font", "fontstyle"))
)
);
// now add the initial contents of the Palette
myPalette.model.nodeDataArray = [
{ key: 1, isGroup: true, text: "group 1" },
{ key: 2, isGroup: true, text: "group 2" },
{ key: 3, isGroup: true, text: "group 3" },
{ key: 4, isGroup: true, text: "group 4" },
// I assume the details of the regular nodes don't matter
{ text: "blue node", color: "blue", group: 1 },
{ text: "orange node", color: "orange", group: 1 },
{ text: "blue node", color: "blue", group: 2 },
{ text: "orange node", color: "orange", group: 2 },
{ text: "blue node", color: "blue", group: 3 },
{ text: "orange node", color: "orange", group: 3 },
{ text: "blue node", color: "blue", group: 4 },
{ text: "orange node", color: "orange", group: 4 }
];
So everything is working just as I think you are expecting.
Maybe you are setting contentAlignment or initialContentAlignment on the Palette?
can you give some random location like “loc”:“38 -59.5” and “loc”:“38 382” in first and second node’s json data respectively and then try how these groups appears in left panel.
I see – you are putting a node at 38,-59.5, so the palette’s documentBounds will naturally include that negative-Y point, resulting in the empty space down to the origin (0,0) where the first blue group is.
It might be easiest to set visible: false on your regular Node template. In fact, just use this node template:
myPalette.nodeTemplate =
$(go.Node,
{ visible: false });
if you aren’t going to be showing any regular nodes in the Palette at all.