Can set color only for custom borders of shape?

GoJS
1

I have created a shape using the svg path and PolygonDrawing tool.

diagram.nodeTemplateMap.add('PolygonDrawing',
	GO(go.Node, 'Spot',
			{
			resizable: false, resizeObjectName: "SHAPE",
			rotatable: false, rotateObjectName: "SHAPE",
			reshapable: true,
			selectionAdorned: false,
			name: 'NODE'
			},
			{
			itemTemplateMap: createItemTemplates('editor'),
			itemCategoryProperty: 'type'
			},
			new go.Binding('itemArray', 'labels'),
			new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
			GO(go.Shape,
			{
					name: 'SHAPE',
					fill: 'white',
					strokeWidth: 10,
					stroke: '#dadada'
			},
			new go.Binding('desiredSize', 'size', go.Size.parse).makeTwoWay(go.Size.stringify),
			new go.Binding('angle').makeTwoWay(),
			new go.Binding('geometryString', 'F M0 0 L150 0 L150 150 L0 150Z').makeTwoWay(),
			new go.Binding('fill'),
			new go.Binding('stroke'),
			new go.Binding('strokeWidth'),
			new go.Binding('type')
			)
	)
);

I want something like this.

2

What is the problem?

Some minor points:

  • Part.resizable and Part.rotatable default to false, so you don’t need to set them if you don’t want users to resize or rotate your nodes
  • If they are not resizable, you don’t need to set Part.resizeObjectName nor do you need to add a Binding on Shape.desiredSize
  • If they are not rotatable, you don’t need to set Part.rotateObjectName nor do you need to add a Binding on Shape.angle
  • Providing a binding on “type” should be causing a warning, because there is no Shape.type property. You are using go-debug.js now and checking the console for warnings and errors, aren’t you? If you are not, you really should until everything is completely done.
  • There’s probably no need to set name: "NODE" on the Node; but that depends on what other code you might be using
  • The Binding on Shape.geometryString probably should not be TwoWay – do you have code that is explicitly setting that property?

I have no idea of what your item templates are nor what data you are expecting to have in the model for the node that you are illustrating.

3

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'
			});
4

OK, but what is the problem?

Although before you answer, you might want to clean up your node template as I suggested, just in case that matters.

5

When I check the checkbox, I want to change the color of (for example)right border to ‘orange’ and on uncheck change the color to ‘grey’.

About Geometry.

new go.Binding(‘geometryString’, ‘geo’).makeTwoWay(),
this is geo.
{ // node data
…
geo: ‘F M0 0 L0 150 150 150 150 0Z’,
…
}

6

Isn’t that covered by this topic? How can set checkbox check mark always visible?

7

Yes, but for easy find in topics ‘borders’ and ‘checkbox’, I have created two topics.

So, can you help me solve the problem and change color of the wanted border?