Changing category by using setCategoryForNodeData

GoJS
1

Hello

I found out that chaging category was not displayed when calling setCategoryForNodeData like ‘Changing category of a Part’ on your sample(GoJS Template Maps -- Northwoods Software).

as you can see below

var simpletemplate =
$(go.Node, “Spot”,
$(go.Panel, “Auto”,
$(go.Shape, “Ellipse”, {
width: 100, // width
height: 50 // height
},
new go.Binding(“fill”, “color”)),
$(go.TextBlock,
new go.Binding(“text”, “key”))
),
$(“Button”,
{ alignment: go.Spot.TopRight },
$(go.Shape, “AsteriskLine”, { width: 8, height: 8 }),
{ click: changeCategory })
);
…
// this function changes the category of the node data to cause the Node to be replaced
function changeCategory(e, obj) {
var node = obj.part;
if (node) {
var diagram = node.diagram;
diagram.startTransaction(“changeCategory”);
var cat = diagram.model.getCategoryForNodeData(node.data);
if (cat === “simple”)
cat = “detailed”;
else
cat = “simple”;
diagram.model.setCategoryForNodeData(node.data, cat);
diagram.commitTransaction(“changeCategory”);
}
}

when i set maxSize or width, height property on Graphical Object, it did’nt work as ‘Changing category of a Part’.

Is it bug or did I make any mistake?

Thanks.
2

I’m sorry, but I do not understand what is happening that you do not want, and I do not understand what it is that you do want.

3

gojs version: 1.3.0

good case:
var simpletemplate =
$(go.Node, “Spot”,
$(go.Panel, “Auto”,
$(go.Shape, “Ellipse”,
new go.Binding(“fill”, “color”)),
$(go.TextBlock,
new go.Binding(“text”, “key”))
),
$(“Button”,
{ alignment: go.Spot.TopRight },
$(go.Shape, “AsteriskLine”, { width: 8, height: 8 }),
{ click: changeCategory })
);
…
// this function changes the category of the node data to cause the Node to be replaced
function changeCategory(e, obj) {
var node = obj.part;
if (node) {
var diagram = node.diagram;
diagram.startTransaction(“changeCategory”);
var cat = diagram.model.getCategoryForNodeData(node.data);
if (cat === “simple”)
cat = “detailed”;
else
cat = “simple”;
diagram.model.setCategoryForNodeData(node.data, cat);
diagram.commitTransaction(“changeCategory”);
}
}

step1.




step2.





bad case:var simpletemplate =
$(go.Node, “Spot”,
$(go.Panel, “Auto”,
$(go.Shape, “Ellipse”, {
width: 100, // width
height: 50 // height
},
new go.Binding(“fill”, “color”)),
$(go.TextBlock,
new go.Binding(“text”, “key”))
),
$(“Button”,
{ alignment: go.Spot.TopRight },
$(go.Shape, “AsteriskLine”, { width: 8, height: 8 }),
{ click: changeCategory })
);
…
// this function changes the category of the node data to cause the Node to be replaced
function changeCategory(e, obj) {
var node = obj.part;
if (node) {
var diagram = node.diagram;
diagram.startTransaction(“changeCategory”);
var cat = diagram.model.getCategoryForNodeData(node.data);
if (cat === “simple”)
cat = “detailed”;
else
cat = “simple”;
diagram.model.setCategoryForNodeData(node.data, cat);
diagram.commitTransaction(“changeCategory”);
}
}


step1.




step2.

< =“transover-tooltip” style=": rgb252, 247, 217; text-align: left; border: 1px solid rgb204, 204, 204; -shadow: rgba0, 0, 0, 0.2 0px 2px 5px; : fixed; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; : 2147483647; display: none; left: 139px; top: -1500px; width: 0px; height: 0px; -: initial initial; -repeat: initial initial;">< =“transover-tooltip” style=": rgb252, 247, 217; text-align: left; border: 1px solid rgb204, 204, 204; -shadow: rgba0, 0, 0, 0.2 0px 2px 5px; : fixed; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; : 2147483647; top: -1500px; display: none; -: initial initial; -repeat: initial initial;">

4

Thank you for the detailed description. I can reproduce the problem, which seems to involve the fact that the “simple” template node seems to be invisible because it doesn’t get a location because the Diagram.layout is not performed again in order to reposition all of the nodes.
You can get around that problem by adding the following line to the changeCategory function, just before committing the transaction:

<font size="2" face="Consolas"><font size="2" face="Consolas">diagram.model.setCategoryForNodeData(node.data, cat); <strong>diagram.layoutDiagram(true); </strong>diagram.commitTransaction("changeCategory");
We’ll investigate why the layout might not be performed again after replacing the Node due to changing its category.

5

I believe this bug will be fixed in version 1.3.4, which should be coming out in the next few days.

Thanks for reporting the problem!

6

답변 감사합니다.