This is my template.
function createItemTemplates(type) {
var itemtemplates = new
go.Map('string', go.Panel);
itemtemplates.add('textPanel',
GO(go.Panel, 'Position',
new go.Binding('alignment', '', locateLabel),
{
background: '#fff',
desiredSize: new go.Size(55, 35)
}
)
);
itemtemplates.add('pointPanel',
GO(go.Panel, 'Position',
new go.Binding('alignment', '', locatePoint),
{
background: '#fff',
desiredSize: new go.Size(35, 35)
}
)
);
itemtemplates.add('point',
GO(go.Panel, 'Position',
new go.Binding('alignment', '', locatePoint),
GO(go.Shape, 'Circle',
{
name: 'CIRCLE',
fill: '#fb7e00',
strokeWidth: null,
stroke: null,
desiredSize: new go.Size(10, 10),
//margin: new go.Margin(13)
}
)
)
);
itemtemplates.add('text',
GO(go.Panel, 'Position',
{ name: "PANEL" },
new go.Binding('alignment', '', locateLabel),
GO('CheckBox', 'wall',
{
'Button.width': 20,
'Button.height': 21,
'Button.cursor': 'pointer',
//'ButtonIcon.visible': true,
'ButtonIcon.stroke': '#fff',
'ButtonIcon.strokeWidth': 3,
'ButtonBorder.fill': '#dadada',
'ButtonBorder.stroke': null,
'_buttonFillOver': '#dadada',
'_buttonStrokeOver': null,
margin: new go.Margin(7.5, 0, 7.5, 8.5),
'_doClick': function(e, obj) {
if(obj.panel.data.wall) {
obj.findObject('ButtonIcon').fill = '#fb7e00';
obj._buttonFillOver = "#fb7e00";
} else {
obj._buttonFillNormal = "#dadada";
obj._buttonFillOver = "#dadada";
}
}
}
),
GO(go.Shape, 'Rectangle',
{
name: 'RECT',
fill: '#444',
desiredSize: new go.Size(20, 20),
stroke: null,
margin: new go.Margin(7.5, 7.5, 7.5, 27.5)
}
),
GO(go.TextBlock,
{
name: 'TEXT',
stroke: '#fff',
textAlign: 'center',
verticalAlignment: go.Spot.Center,
desiredSize: new go.Size(20, 20),
font: '11px bold',
margin: new go.Margin(8, 8, 8, 28)
},
new go.Binding('text', (type === 'floor' ? 'value' : 'text'))
)
)
);
return itemtemplates;
}
And data:
diagram.model.addNodeData({
category: 'PolygonDrawing',
size: '150 150',
geo: 'F M0 0 L0 150 150 150 150 0Z',
labels: [
{ type: 'textPanel' },
{ type: 'textPanel' },
{ type: 'textPanel' },
{ type: 'textPanel' },
{ type: 'pointPanel' },
{ type: 'pointPanel' },
{ type: 'pointPanel' },
{ type: 'pointPanel' },
{ type: 'point' },
{ type: 'point' },
{ type: 'point' },
{ type: 'point' },
{ type: 'text', text: 'D' },
{ type: 'text', text: 'C' },
{ type: 'text', text: 'B' },
{ type: 'text', text: 'A' }
],
loc: '100 100'
});