HI , I tried to add a new panel outlining the old one ,
myDiagram.nodeTemplateMap.add("", // the default category
$(go.Node, "Spot", nodeStyle(),
$(go.Panel,"Viewbox",
// the main object is a Panel that surrounds a TextBlock with a rectangular Shape
$(go.Shape, "RoundedRectangle",
{ stroke: null ,width: 150, height: 60},
new go.Binding("figure", "figure"),
new go.Binding("fill","color")),
$(go.Panel, "Table",
{width:150,height:60},
$(go.RowColumnDefinition,
{ column: 0, alignment: go.Spot.Left,width: 15}),
$(go.RowColumnDefinition,
{ column: 6, alignment: go.Spot.Right,width:15}),
$(go.RowColumnDefinition,
{ row: 0, alignment: go.Spot.Top}),
$(go.RowColumnDefinition,
{ row: 5, alignment: go.Spot.Bottom }),
$(go.RowColumnDefinition,
{ row: 3, alignment: go.Spot.Top, height:12 }),
$(go.TextBlock,
{
column: 1, row: 1, rowSpan:4 , columnSpan:5, alignment: go.Spot.Center,
font: "bold 11pt Helvetica, Arial, sans-serif",
stroke: lightText,
wrap: go.TextBlock.WrapFit,
textAlign: "center",
editable: true,
maxSize: new go.Size(110, 30),
minSize: new go.Size(110, NaN)
},
new go.Binding("text").makeTwoWay()
),
$(go.Panel, "Vertical",
{ column: 0, row: 1 ,height:12,alignment: go.Spot.LeftCenter},
makePort("L1", go.Spot.LeftCenter, true, true)
),
$(go.Panel, "Vertical",
{ column: 0, row: 2 ,rowSpan:2,height:12,alignment: go.Spot.LeftCenter,margin:new go.Margin(2, 0, 2, 0)},
makePort("L2", go.Spot.LeftCenter, true, true)
),
$(go.Panel, "Vertical",
{ column: 0, row: 4 ,height:12,alignment: go.Spot.LeftCenter},
makePort("L3", go.Spot.LeftCenter, true, true)
),
$(go.Panel, "Vertical",
{ column: 6, row: 1 ,height:12,alignment: go.Spot.RightCenter},
makePort("R1", go.Spot.RightCenter, true, true)
),
$(go.Panel, "Vertical",
{ column: 6, row: 2 ,rowSpan:2,height:12,alignment: go.Spot.RightCenter},
makePort("R2", go.Spot.RightCenter, true, true)
),
$(go.Panel, "Vertical",
{ column: 6, row: 4 ,height:12,alignment: go.Spot.Right},
makePort("R3", go.Spot.RightCenter, true, true)
),
$(go.Panel, "Vertical",
{ column: 1, row: 0,width:20 ,alignment: go.Spot.TopCenter,margin:2},
makePort("T1", go.Spot.TopCenter, true, true)
),
$(go.Panel, "Vertical",
{ column: 2, row: 0,width:20 ,alignment: go.Spot.TopCenter,margin:2},
makePort("T2", go.Spot.TopCenter, true, true)
),
$(go.Panel, "Vertical",
{ column: 3, row: 0 ,width:20,alignment: go.Spot.TopCenter,margin:2},
makePort("T3", go.Spot.TopCenter, true, true)
),
$(go.Panel, "Vertical",
{ column: 4, row: 0 ,width:20,alignment: go.Spot.TopCenter,margin:2},
makePort("T4", go.Spot.TopCenter, true, true)
),
$(go.Panel, "Vertical",
{ column: 5, row: 0 ,width:20,alignment: go.Spot.TopCenter,margin:2},
makePort("T5", go.Spot.TopCenter, true, true)
),
$(go.Panel, "Vertical",
{ column: 1, row: 5 ,width:20 ,alignment: go.Spot.BottomCenter},
makePort("B1", go.Spot.BottomCenter, true, true)
),
$(go.Panel, "Vertical",
{ column: 2, row: 5,width:20 ,alignment: go.Spot.TopCenter },
makePort("B2", go.Spot.BottomCenter, true, true)
),
$(go.Panel, "Vertical",
{ column: 3, row: 5 ,width:20 ,alignment: go.Spot.TopCenter},
makePort("B3", go.Spot.BottomCenter, true, true)
),
$(go.Panel, "Vertical",
{ column: 4, row: 5 ,width:20 ,alignment: go.Spot.TopCenter},
makePort("B4", go.Spot.BottomCenter, true, true)
),
$(go.Panel, "Vertical",
{ column: 5, row: 5 ,width:20 ,alignment: go.Spot.TopCenter},
makePort("B5", go.Spot.BottomCenter, true, true)
)
// four named ports, one on each side:
)
)
)
);
myDiagram.nodeTemplateMap.add("Start",
$(go.Node, "Spot", nodeStyle(),
$(go.Panel, "Auto",
$(go.Shape, "Circle",
{ minSize: new go.Size(40, 40), fill: "#79C900", stroke: null }),
$(go.TextBlock, "Start",
{ font: "bold 11pt Helvetica, Arial, sans-serif", stroke: lightText },
new go.Binding("text"))
),
// three named ports, one on each side except the top, all output only:
//makePort("L", go.Spot.Left, true, false),
//makePort("R", go.Spot.Right, true, false),
makePort("B", go.Spot.Bottom, true, false)
));
jQuery(’#create’).bind(‘click’,function(){
jQuery(’#cE’).css(‘display’,‘block’);
jQuery(’#cL’).css(‘display’,‘none’);
});
jQuery('#link').bind('click',function(){
jQuery('#cL').css('display','block');
jQuery('#cE').css('display','none');
});
jQuery('#createnew').bind('click',function(){
myDiagram.startTransaction("make new node");
var text = jQuery('#statename').attr('value');
myDiagram.model.addNodeData({ key: text ,text:text});
myDiagram.commitTransaction("make new node");
});
jQuery('#disable').bind('click',function(){
myDiagram.isEnabled = false;
});
jQuery('#enable').bind('click',function(){
myDiagram.isEnabled = true;
});
jQuery('#createlink').bind('click',function(){
var text1 = jQuery('#from').attr('value');
var text2 = jQuery('#to').attr('value');
var text3 = jQuery('#tname').attr('value');
myDiagram.startTransaction("make new node");
myDiagram.model.addLinkData({ from: text1 ,to:text2,text:text3,fromPort:"B3", toPort:"T3"});
myDiagram.commitTransaction("make new node");
});
jQuery('button[name=flow]').each(function(){
var element = jQuery(this);
element.bind('click',function(){
var flowname = element.attr('id');
if(flowname == "itflow"){
jQuery('#mySavedModel').attr('value',JSON.stringify(itflow));
}
else if(flowname == "swflow"){
jQuery('#mySavedModel').attr('value',JSON.stringify(swflow));
}
else{
jQuery('#mySavedModel').attr('value',JSON.stringify(tcflow));
}
load();
});
});
myDiagram.nodeTemplateMap.add("End",
$(go.Node, "Spot", nodeStyle(),
$(go.Panel, "Auto",
$(go.Shape, "Circle",
{ minSize: new go.Size(40, 40), fill: "#DC3C00", stroke: null }),
$(go.TextBlock, "End",
{ font: "bold 11pt Helvetica, Arial, sans-serif", stroke: lightText },
new go.Binding("text"))
),
// three named ports, one on each side except the bottom, all input only:
makePort("T", go.Spot.Top, false, true),
makePort("L", go.Spot.Left, false, true),
makePort("R", go.Spot.Right, false, true)
));
myDiagram.nodeTemplateMap.add("Comment",
$(go.Node, "Auto", nodeStyle(),
$(go.Shape, "File",
{ fill: "#EFFAB4", stroke: null }),
$(go.TextBlock,
{
margin: 5,
maxSize: new go.Size(200, NaN),
wrap: go.TextBlock.WrapFit,
textAlign: "center",
editable: true,
font: "bold 12pt Helvetica, Arial, sans-serif",
stroke: '#454545'
},
new go.Binding("text").makeTwoWay())
// no ports, because no links are allowed to connect with a comment
));
// replace the default Link template in the linkTemplateMap
myDiagram.linkTemplate =
$(go.Link, // the whole link panel
{
routing:go.Link.AvoidsNodes,
adjusting: go.Link.End,
curve: go.Link.JumpOver,
corner: 5, toShortLength: 4,
relinkableFrom: true,
relinkableTo: true,
reshapable: true,
resegmentable: true,
// mouse-overs subtly highlight links:
mouseEnter: function(e, link) { link.findObject("HIGHLIGHT").stroke = "rgba(30,144,255,0.2)";console.log(e) },
mouseLeave: function(e, link) { link.findObject("HIGHLIGHT").stroke = "transparent"; },
},
new go.Binding("points").makeTwoWay(),
$(go.Shape, // the highlight shape, normally transparent
{ isPanelMain: true, strokeWidth: 8, stroke: "transparent", name: "HIGHLIGHT" }),
$(go.Shape, // the link path shape
{ isPanelMain: true, stroke: "gray", strokeWidth: 2},
new go.Binding("stroke","color").makeTwoWay()),
$(go.Shape, // the arrowhead
{ toArrow: "standard", stroke: null, fill: "gray"}),
$(go.Panel, "Auto", // the link label, normally not visible
{ visible: true, name: "LABEL", segmentIndex: 2, segmentFraction: 0.5},
new go.Binding("visible", "visible").makeTwoWay(),
$(go.Shape, "RoundedRectangle", // the label shape
{ fill: "white", stroke:null}),
$(go.TextBlock, // the label
{
textAlign: "center",
font: "10pt helvetica, arial, sans-serif",
stroke: "black",
editable: true
},
new go.Binding("text", "text").makeTwoWay())
)
);
getting error in console (Uncaught Error: Viewbox Panel cannot contain more than one GraphObject.)
Could you help me with this , i want the recatngle , ports and textblock to be fixed so that when user edits the label of a node , size or position doesnt change resulting in routes remaining the same