Conditional right border

[ridhi]

Hi,

I want to set the right border to a RoundedRectangle shape conditionally.

[walter]

First it is convenient to define a figure for that kind of shape:

go.Shape.defineFigureGenerator("RoundedRightRectangle", function (shape, w, h) {
  // this figure takes one parameter, the size of the corner
  var p1 = 5;  // default corner size
  if (shape !== null) {
    var param1 = shape.parameter1;
    if (!isNaN(param1) && param1 >= 0) p1 = param1;  // can't be negative or NaN
  }
  p1 = Math.min(p1, w / 2);
  p1 = Math.min(p1, h / 2);  // limit by whole height or by half height?
  var geo = new go.Geometry();
  // a single figure consisting of straight lines and quarter-circle arcs
  geo.add(new go.PathFigure(0, 0)
    .add(new go.PathSegment(go.PathSegment.Line, w - p1, 0))
    .add(new go.PathSegment(go.PathSegment.Arc, 270, 90, w - p1, p1, p1, p1))
    .add(new go.PathSegment(go.PathSegment.Line, w, h - p1))
    .add(new go.PathSegment(go.PathSegment.Arc, 0, 90, w - p1, h - p1, p1, p1))
    .add(new go.PathSegment(go.PathSegment.Line, 0, h).close()));
  // don't intersect with two bottom corners when used in an "Auto" Panel
  geo.spot1 = new go.Spot(0, 0, 0.3 * p1, 0);
  geo.spot2 = new go.Spot(1, 1, -0.3 * p1, -0.3 * p1);
  return geo;
});

Then “RoundedRightRectangle” can be used as a Shape.figure in your templates.

Let’s say you start off with whatever node template you already have before wanting to add that rounded red right border. The contents of the node don’t matter, so I’ll just use a simple TextBlock:

    $(go.Node, "Auto",
      $(go.Shape, "RoundedRectangle",
        { fill: "white", strokeWidth: 0 },
        new go.Binding("fill", "color")),
      $(go.TextBlock,
        { margin: 8 },
        new go.Binding("text"))
    )

Now change the node to be a “Spot” Panel that surrounds a new Panel that includes everything that the node template had before:

    $(go.Node, "Spot",
      $(go.Panel, "Auto",
        $(go.Shape, "RoundedRectangle",
          { fill: "white", strokeWidth: 0 },
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: 8 },
          new go.Binding("text"))
      ),
      $(go.Shape, "RoundedRightRectangle",
        {
          fill: "orangered", strokeWidth: 0,
          width: 6, stretch: go.GraphObject.Vertical,
          alignment: go.Spot.Right, alignmentFocus: go.Spot.Right,
          visible: false
        },
        new go.Binding("visible", "bordered"))
    )

Of course you’ll have to move any Node or Part-specific properties up from the old node panel to the new node panel.

Note how that right border is not visible unless the data.bordered property is true.

And you can show/hide it dynamically by setting that data property. For example, to toggle it for a given node:

node.diagram.model.commit(m => {
    m.set(node.data, "bordered", !node.data.bordered);
});

[ridhi]

Thanks. It helped