GraphObject.defineBuilder with custom bindings

GoJS
1

Hello,

I’m trying to use defineBuilder to create my own reusable icon object, it works great when I hardcode the style values within the icon template, but I’d like to pass bindings from the node template into the icon template:

Icon Object:

go.GraphObject.defineBuilder('CircleIcon', function (args) {

    var icon = (
      $(
        go.Panel, 'Auto',
        $(
          go.Shape,
          {
            fill: 'orange', // <bind backgroundColor>
            figure: 'circle',
            stroke: 'none',
            minSize: new go.Size(15, 15),
          }
        ),
        $(
          go.Shape,
          {
            fill: 'Transparent', 
            figure: 'Database', // <bind icon>
            stroke: 'green', // <bind iconStroke>
            strokeWidth: 1, // <bind iconStrokeWidth>
            maxSize: new go.Size(13, 13),
            margin: 2,
            stretch: go.GraphObject.UniformToFill
          }
        ),
      )
    );
    return icon;
    });
});

Snippet from Node Template:

 $(
      'CircleIcon',
      new go.Binding('backgroundColor', 'backgroundColor'),
      new go.Binding('iconStroke', 'stroke'),
      new go.Binding('iconStrokeWidth', 'strokeWidth'),
      new go.Binding('icon', 'icon')
  )

I can see the bindings being passed into the args object, but I can’t figure out how to extract them and use them in the icon template, is this possible? Or am I misusing the defineBuilder functionality by doing this?

Thanks,
Gary

2

GraphObject.defineBuilder basically acts as a way of defining “macros” for use by GraphObject.make. They just expand in place and can take optional arguments that can control how it is expanded.

So you could just do:

    go.GraphObject.defineBuilder('CircleIcon', function(args) {
      var icon =
        $(go.Panel, 'Auto',
          $(go.Shape,
            {
              fill: 'orange', // <bind backgroundColor>
              figure: 'circle',
              stroke: null,
              minSize: new go.Size(15, 15),
            },
            new go.Binding("fill", "backgroundColor")
          ),
          $(go.Shape,
            {
              fill: 'Transparent',
              figure: 'Database', // <bind icon>
              stroke: 'green', // <bind iconStroke>
              strokeWidth: 1, // <bind iconStrokeWidth>
              maxSize: new go.Size(13, 13),
              margin: 2,
              stretch: go.GraphObject.UniformToFill
            },
            new go.Binding("figure", "icon"),
            new go.Binding("stroke", "stroke"),
            new go.Binding("strokeWidth", "strokeWidth")
          )
        );
      return icon;
    });

This works if you just have one “CircleIcon” in your template. Are you trying to implement support for multiple instances of “CircleIcon”, using different binding source properties for each one? Then you could define your builder to take the names of the source properties as argument(s) to the “CircleIcon”, by calling GraphObject.takeBuilderArgument. Once you have the name(s) of the source property names, you can call the appropriate Binding constructors with the desired source names.

3

Perfect, thanks Walter, I was overcomplicating it, it seems.
There is only one instance per template, so your solution worked fine.

Thanks,
Gary