Node Badge/Ribbon

GoJS
1

Hi,

I was wondering if there is a way to create a node badge or ribbon placed in the corner to make the node stand out, marking it as “New”, or “Updated” or something like that. See below graphic for an illustration.

Thanks!

2

Take a look at: [EDIT: now an Introduction page] GoJS Nodes -- Northwoods Software You can do a View Source of the page to see the complete implementation.

I didn’t know what you had in your rectangular node body, so I just used a light gray Rectangle Shape. The contents of the body of course do not matter to the implementation of the ribbon decoration.

Note that the ribbon appears automatically if you set the “ribbon” property to a non-empty string on the node data.

3

Precisely what I wanted to accomplish! I appreciate a lot how many new features and enhancements you guys put into new releases. Just plain awesome.

What would be the best way to customize the ribbon based on the data? Say based on some condition, draw “New” as red, and “Updated” as orange? I’m just trying to stay ahead of my users, and I am sure this will be the next logical question. I suppose template maps, but that might be somewhat inefficient. Any pointers would be greatly appreciated

As always, thanks so much for being super prompt and on point every time.

4

Here is the node template that includes the corner ribbon:

myDiagram.nodeTemplate = $(go.Node, "Spot", { locationSpot: go.Spot.Center, locationObjectName: "BODY" }, { selectionObjectName: "BODY" }, $(go.Panel, "Auto", { name: "BODY", width: 150, height: 100 }, { portId: "" }, $(go.Shape, { fill: "lightgray", stroke: null, strokeWidth: 0 }), $(go.TextBlock, new go.Binding("text")) ), $(go.Panel, "Spot", new go.Binding("opacity", "ribbon", function(t) { return t ? 1 : 0; }), { opacity: 0, alignment: new go.Spot(1, 0, 5, -5), alignmentFocus: go.Spot.TopRight }, $(go.Shape, { geometryString: "F1 M0 0 L30 0 70 40 70 70z", fill: "red", stroke: null, strokeWidth: 0 }), $(go.TextBlock, new go.Binding("text", "ribbon"), { alignment: new go.Spot(1, 0, -29, 29), angle: 45, maxSize: new go.Size(100, NaN), stroke: "white", font: "bold 13px sans-serif", textAlign: "center" }) ) );
You can see the Shape with the geometryString that defines the shape of the ribbon. It has a default fill color of “red”. If you add a Binding of Shape.fill there to some property that you add to the node data, you can control the ribbon’s color by the data.

If you want some explanatory documentation, read http://gojs.net/latest/intro/dataBinding.html