Options to Create new Nodes on Selection of Node

srinivasdonapati · January 21, 2014, 9:12am

Requirement: On Node Selection/MouseOver - give options to create new nodes, Each NodeType can have it’s own set of Options for node creation

We have different node types. We have added multiple buttons in an Adornment depending on the node type. We achieved the requirement by binding “selectionAdornmentTemplate” at run-time. We have created multiple selection adornmnet temmplates and depending on the NodeType we bind it to “selectionAdornmentTemplate”.

The requirement was achieved, but this broke the saving logic[myDiagram.model.toJson()], it enters into some infinite loop. We fixed this by removing the selectionAdornmentTemplate from the Node before saving it.

Question#

Was this the correct way of achieving the requirement? If not what could have been tried.
If answer to question 1, is Yes then how to fix the broken saving logic.

//My Node Template
 myDiagram.nodeTemplate = G(go.Node, “Auto”, {
 selectionChanged : onNodeSelect,
 doubleClick : showDecTable,
 contextMenu : partContextMenu,
 resizable : true,
 visible : true,
 desiredSize : new go.Size(NaN, NaN)
 }, G(go.Shape, {
 portId : “”,
 fromLinkable : true,
 name : “Node”
 }, new go.Binding(“strokeWidth”, “strokeWidth”).makeTwoWay(),
 new go.Binding(“toLinkable”, “to”),
 new go.Binding(“figure”, “fig”), new go.Binding(“fill”, “color”)
 .makeTwoWay(), new go.Binding(“geometry”, “geo”)), G(
 go.TextBlock, {
 name : “TextBlk”,
 margin : 8,
 wrap : go.TextBlock.WrapFit,
 editable : true,
 font : smallfont,
 stroke : “black”
 }, new go.Binding(“text”, “text”).makeTwoWay(), new go.Binding(
 “stroke”, “stroke”).makeTwoWay(), new go.Binding(“font”,
 “font”).makeTwoWay()), new go.Binding(“location”, “loc”,
 go.Point.parse).makeTwoWay(go.Point.stringify), new go.Binding(
 “selectionAdornmentTemplate”, “selectionAdornmentTemplate”),
 new go.Binding(“desiredSize”, “desiredSize”).makeTwoWay(),
 new go.Binding(“visible”, “visible”).makeTwoWay());

//Sample selectionAdornmentTemplate, we have created multiple adornment templates to have the requirement met
 AdornmentTemplate1 = G(go.Adornment, “Spot”, G(go.Panel,
 “Auto”, G(go.Shape, {
 fill : null,
 stroke : “#707070”,
 strokeWidth : 2
 }), G(go.Placeholder)),
 G(“Button”, {
 alignment : new go.Spot(1, 0, 5, 0),
 alignmentFocus : go.Spot.Left,
 click : addNodeType1
 },
 G(go.Shape, {
 fill : G(go.Brush, go.Brush.Linear, {
 0 : “white”,
 1 : “#CCFFCC”,
 start : new go.Spot(0, 0),
 end : new go.Spot(1, 0)
 }),
 figure : “Rectangle”,
 desiredSize : new go.Size(15, 10)
 })), G(“Button”, {
 alignment : new go.Spot(1, 1, 5, 0),
 alignmentFocus : go.Spot.Left,
 click : addNodeType2
 },
 G(go.Shape, {
 fill : G(go.Brush, go.Brush.Linear, {
 0 : “white”,
 1 : “#FFCC00”,
 start : new go.Spot(0, 0),
 end : new go.Spot(1, 0)
 }),
 geometry : NodeType2Geometry,
 desiredSize : new go.Size(15, 10)
 })));

srinivasdonapati · January 21, 2014, 9:21am

walter · January 21, 2014, 10:25am

Yes, that’s right. Showing the Adornment on mouse-over is also possible. I assume you copied the examples in the Grafcet sample.

2. The problem is that GraphObjects, including Adornments, should only be part of the “view”, not part of the “model”. I suggest that you just keep a simple data property, probably a string, on the data to name the kind of Adornment to show. Use a conversion function to look up the Adornment using the string value in a global object. This also avoids putting multiple copies of templates into your model. Templates ought to be shared.

In the future Model.toJson could detect the presence of a GraphObject and signal an error or warning.