Change node table text color based on event

GoJS
1

Hi

Could you please advise how to change node table text color based on event. Based on event i need to refresh the diagram model. based on node data need to change the node table text color.

2

Use a data Binding on the TextBlock.stroke property.

http://gojs.net/latest/intro/dataBinding.html

3

HI Walter

I have below code. I unable to change the font color. Attached screen shot for your reference.

click : function(e, node) {

		myDiagram.nodes.each(function(n) {
			if(n.data.command == self.commandSearch() && n.data.seqNum == 0) {
				var shape = n.findObject("SHAPE");
				var GO = go.GraphObject.make;
				var color =  "#fffcaf"; //levelColors[level];
				if (shape) {

					shape.fill = GO(go.Brush, "Linear", {
						0 : color,
						1 : go.Brush.lightenBy(color,
								0.05),
						start : go.Spot.Left,
						end : go.Spot.Right
					});
				}
			}
		})
						
}
4

So the problem is that the text remains white when the background becomes yellow, yes? What controls the background color being blue or yellow?

If the background color is data bound to some property, you could add a Binding from the TextBlock.stroke property to the same source property, with a conversion function that returns either blue or yellow as appropriate.

If the background color is not data bound, then when you programmatically modify the Panel.background (or wherever you set the background) you can also modify the TextBlock.stroke property.

5

Original background color is blue. when you click the node i am brushing the node to Yellow color
var shape = n.findObject(“SHAPE”);
var GO = go.GraphObject.make;
var color = “#fffcaf”; // yellow color
shape.fill = GO(go.Brush, “Linear”, {
0 : color,

here how to call TetBlock.Stoke in this node ?

called in go.TextBlock new go.Binding(“stroke”, “highlight”, function(v) { return v ? “black” : “blue”; }) not worked

6

So you have a “highlight” property on your node data?

If so, shouldn’t that control whether the node shape’s fill is blue or yellow? And you should use a binding to determine the fill rather than setting the Shape.fill property programmatically.

And also if so,

 new go.Binding("stroke", "highlight", function(v) { return v ? "black" : "blue"; })

should have worked, if you had called Model.setDataProperty within a transaction.

7

see the attached diagram

In the above diagram when creating new node. i am given below
myDiagram.model.setDataProperty(node.data,“highlight”, false);

the highlight false not applying to the parent node.

below is the code for table on the node
// define the panel where the text will appear
$(go.Panel, “Table”, {
maxSize : new go.Size(150, 999),
margin : new go.Margin(6, 12, 0, 2),
defaultAlignment : go.Spot.Left
}, $(go.RowColumnDefinition, {
column : 2,
width : 3
}), $(go.TextBlock, textStyle(), // the name
{
row : 0,
column : 0,
columnSpan : 5,
font : “8pt Segoe UI,sans-serif”,
editable : false,
isMultiline : true,
//stroke :"#a3fff1",
minSize : new go.Size(10, 16)
}, new go.Binding(“text”, “orgName”).makeTwoWay(),
new go.Binding(“stroke”, “highlight”, function(v) { return v ? “black” : “”; })),

Is there any way i can call the textStyle on the node? when new node created?

8

What does textStyle() return?

Whatever properties get set in the template are the default values used by the actual Node or Link in the Diagram. Bindings may change those values, though, as their respective source properties change.

9

below is the code for text style

function textStyle() {
return {
font : “9pt Segoe UI,sans-serif”,
stroke : “white”
};
}

when i add the new node binding on the parent TextStyle called?
I debug it. It is not calling the textStyle and it is not going to the goPanel, “Table”

10

OK, so your TextBlock has an initial value for TextBlock.stroke that is “white”.

But why is your Binding conversion function trying to set the stroke to “”? I don’t think that is valid CSS. You should be getting a warning about that.

Or are you not using go-debug.js? If you aren’t using the debug version while developing, that will slow you down.

11

Hi Walter

Yes updated “” to “white”. now working fine.

I am using go-debug.js(We got licensed once from you). I am using that

Debug means. Developer tools debug mode i used. is there special with go-debug.js?

12

Yes, use go-debug.js.

13

Please remove the image. the data is our security issue1

14

You can edit your own posts to remove images if you need to. No need to post in each of your topics.

15

i am unable to edit the post. post on Jul 14

16

And I do not see any images. Perhaps in the future you should send us email.