I am binding figure to my model and it works fine for different kind of figures except for Procedure
As you can see in the palette, the SubProcess name looks like a regular Rectangle. However when I drag it to the diagram, it looks like a Procedure. So the problem only occurs in the palette.
This is how I define the node template in the palettte
palette.nodeTemplate =
$(go.Node, 'Auto',
{
locationSpot: go.Spot.Center, locationObjectName: 'SHAPE',
desiredSize: new go.Size(120, 60), minSize: new go.Size(40, 40),
resizable: true, resizeCellSize: new go.Size(20, 20)
},
$(go.Shape, new go.Binding('figure', 'figure'),
{
stroke: null,
},
new go.Binding('fill', 'color1', convertLinearBrush),
new go.Binding('fill', 'color2', convertLinearBrush)
// new go.Binding('fill', 'color')
),
$(go.TextBlock, { margin: 8 },
new go.Binding('text', 'label'))
);
and in the diagram:
dia.nodeTemplate =
$(go.Node, 'Auto',
{
// locationSpot: go.Spot.Center, locationObjectName: 'SHAPE',
// desiredSize: new go.Size(120, 60), minSize: new go.Size(40, 40),
resizable: true, resizeCellSize: new go.Size(20, 20), resizeObjectName: 'SHAPE',
// portId:'', fromLinkable: true, toLinkable: true
},
new go.Binding('location', 'location', go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Panel, 'Auto',
$(go.Shape, new go.Binding('figure', 'figure'), {
name: 'SHAPE',
minSize: new go.Size(60, 40),
portId: '',
fromLinkable: false, fromLinkableSelfNode: true, fromLinkableDuplicates: true,
toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true,
spot1: go.Spot.TopLeft, spot2: go.Spot.BottomRight,
cursor: 'pointer'
},
new go.Binding('desiredSize', 'desiredSize', go.Size.parse).makeTwoWay(go.Size.stringify),
new go.Binding('fill', 'color1', convertLinearBrush),
new go.Binding('fill', 'color2', convertLinearBrush),
new go.Binding('stroke', 'isHighlighted', h => h ? 'red' : 'black').ofObject(),
new go.Binding('strokeWidth', 'isHighlighted', h => h ? 2 : 0.5).ofObject(),
// new go.Binding('fill', 'color')
),
$(go.TextBlock, { margin: 2 },
new go.Binding('text', 'label'))
),
Of course I also define the extra figure Procedure before loading the screen, in the constructor of my angular component. Any idea why that wouldn’t work in the palette ?
export const defineFigures = (): void => {
go.Shape.defineFigureGenerator('Procedure', (shape, w, h) => {
const geo = new go.Geometry();
let param1 = shape ? shape.parameter1 : NaN;
// Distance of left and right lines from edge
if (isNaN(param1)) { param1 = .1; }
const fig = new go.PathFigure(0, 0, true);
geo.add(fig);
fig.add(new go.PathSegment(go.PathSegment.Line, w, 0));
fig.add(new go.PathSegment(go.PathSegment.Line, w, h));
fig.add(new go.PathSegment(go.PathSegment.Line, 0, h).close());
const fig2 = new go.PathFigure((1 - param1) * w, 0, false);
geo.add(fig2);
fig2.add(new go.PathSegment(go.PathSegment.Line, (1 - param1) * w, h));
fig2.add(new go.PathSegment(go.PathSegment.Move, param1 * w, 0));
fig2.add(new go.PathSegment(go.PathSegment.Line, param1 * w, h));
return geo;
});
};