Set the path pattern color doesn't work

GoJS
1

Hi There,

I separated my color properties to background color and the fore ground color, so what I want to achive is to set the foreground color stroke on the path pattern but with no luck. please help.

var inspector = new Inspector(‘myInspectorDiv’, myDiagram,
{
properties: {
“backgroundColor”: { show: Inspector.showIfLink, type: ‘color’, defaultValue: “Pink” },
“foregroundColor”: { show: Inspector.showIfLink, type: ‘color’, defaultValue: “Green”, },
“patt”: { show: Inspector.showIfLink, type: “select”, defaultValue: “Single”, choices: linkStyles },
“fromArrow”: { show: Inspector.showIfLink, defaultValue: “Circle”, type: “select”, choices: fromArrowHeads },
“toArrow”: { show: Inspector.showIfLink, type: “select”, defaultValue: “Standard”, choices: toArrowHeads },
}
});

//link properties
$(go.Shape, // the link’s path shape
new go.Binding(“stroke”, “backgroundColor” ).makeTwoWay(),
new go.Binding(“strokeWidth”, “width”).makeTwoWay(),
new go.Binding(“pathPattern”, “patt”, convertPathPatternToShape, new go.Binding(“stroke”, “foregroundColor”).makeTwoWay()),
),

function definePathPattern(name, geostr, color, width, cap) {
if (typeof name !== ‘string’ || typeof geostr !== ‘string’) throw new Error("invalid name or geometry string argument: " + name + " " + geostr);
if (color === undefined) color = “black”;
if (width === undefined) width = 1;
if (cap === undefined) cap = “square”;
PathPatterns.add(name,
$(go.Shape,
{
geometryString: geostr,
fill: “transparent”,
stroke: color,
strokeWidth: width,
strokeCap: cap
}
));
}

function convertPathPatternToShape(name) {
if (!name) return null;
return PathPatterns.getValue(name);
}

2

Well I got this sorted out with this method, by sending the whole link :)

function convertPathPatternToShape(link) {
if (!link.lineStyle) return null;
var _pattern;
if (link.foregroundColor) {
var pattern = PathPatterns.getValue(link.lineStyle);
definePathPattern(link.lineStyle + link.foregroundColor, pattern.geometryString, link.foregroundColor, pattern.strokeWidth, pattern.strokeCap)
_pattern = PathPatterns.getValue(link.lineStyle + link.foregroundColor);
}
else {
_pattern = PathPatterns.getValue(link.lineStyle);
}
return _pattern;
}

the shape looks like this:

   $(go.Shape,  
            new go.Binding("stroke", "backgroundColor" ).makeTwoWay(),
            new go.Binding("strokeWidth", "backgroundWidth").makeTwoWay(),
            new go.Binding("pathPattern", "lineStyle").makeTwoWay(),
            new go.Binding("pathPattern", "", convertPathPatternToShape),
3

It is the case that the Shape you use as the Shape.pathPattern does not support data bindings because a pattern Shape may be shared by many Shapes’ pathPatterns.

So if you really want to have path pattern Shapes whose colors are determined by link data properties, you’ll want to create them on demand and cache them in a global variable.

The binding could be something like:

$(go.Link, . . . ,
  $(go.Shape,
    new go.Binding("pathPattern", "", getPattern)),
  . . .
)

The binding conversion function could be something like:

var Patterns = {};

function getPattern(data) {
  var back = data.backgroundColor || "pink";
  var fore = data.foregroundColor || "green";
  var patt = data.patt || "Single";
  var p = Patterns[back + "/" + fore + "/" + patt];
  if (p) return p;
  p = new go.Shape();
  ... initialize the pattern Shape to match the back, fore, and patt information ...
  Patterns[back + "/" + fore + "/" + patt] = p;
  return p;
}

Caution: I haven’t actually tried this code – please pardon any typos. Hopefully there won’t be too many combinations of colors and pattern geometries.

4

Thanks Walter, I have a problem though, it looks like the inpector looses the selection of the line style after selection. How do I get the dropdown to retain the selection?

“lineStyle”: { show: Inspector.showIfLink, type: “select”, defaultValue: “Single”, choices: linkStyles },

            new go.Binding("pathPattern", "lineStyle").makeTwoWay(),
            new go.Binding("pathPattern", "", convertPathPatternToShape),
5

I also need to verify what property is being selected.

6

Those two Bindings don’t make sense – they seem to contradict each other. I would delete the first one.

And no, it should not matter which properties get set by the user, nor what order they get set.

7

Okay cool thanks Walter all works fine now.