Hello!
I’m having some problems creating a geometryString wich overlap another geometryString.
I have a Node with ports wich have a geometryString figure, I need to overlap this figure with another one in some cases (with a fill color and stroke color).
Here is my definition of the nodeTemplate:
templateMap.add('geometryWithLabel',
$(go.Node, this.nodeStyle(this.configuratorService),
$(go.Panel, this.panelShapePortStyle(),
$(go.Panel, { type: go.Panel.Table},
$(go.Shape, this.shapeGeometryStyle()),
$(go.Shape, this.innerShapeGeometryStyle()),
),
new go.Binding('itemArray', 'ports'),
{
itemTemplate: $(go.Panel, this.portPanelStyle(),
$(go.Shape, this.portStyle())
)
},
),
$(go.TextBlock, this.textBlockStyle()),
),
);
NodeStyle
private nodeStyle(configurationService: ModelEditorConfiguratorService) {
const thisGraph = this;
return [
{
type: go.Panel.Spot,
selectionAdorned: false,
shadowOffset: new go.Point(0, 0),
shadowBlur: 15,
shadowColor: 'blue',
resizable: true,
resizeObjectName: 'NODESHAPE',
locationObjectName: 'NODESHAPE',
selectionObjectName: 'NODESHAPE',
locationSpot: go.Spot.Center,
cursor: 'move',
mouseEnter: function (e, node) {
thisGraph.mouseNode(e, node, true)
},
mouseLeave: function (e, node) {
thisGraph.mouseNode(e, node, false)
},
doubleClick: function (e, obj ) { // double click to get action. using double becuase single click is select
configurationService.shapeClickAction(obj.data, e)
},
contextClick : function (e, obj) { // rich click to get action
configurationService.shapeContextClickAction(obj.data)
},
},
new go.Binding('location', 'location', go.Point.parse).makeTwoWay(go.Point.stringify),
new go.Binding('isShadowed', 'isSelected').ofObject()
];
}
CommonShape
private shapeGeometryStyle() {
return [
{ isPanelMain: true },
{
name: 'NODESHAPE',
fill: 'white',
stroke: 'black',
strokeWidth: 0.80,
strokeCap: 'round',
strokeJoin: 'round',
strokeDashArray: null,
// row: 0, column: 0,
geometryStretch: go.GraphObject.Uniform,
// isPanelMain: true
},
new go.Binding('fill', '', this.getShapeFill),
new go.Binding('geometryString', 'figure'),
new go.Binding('width', 'width').makeTwoWay(),
new go.Binding('height', 'height').makeTwoWay(),
new go.Binding('stroke', 'lineColor'),
new go.Binding('strokeWidth', 'lineWidth'),
new go.Binding('strokeDashArray', 'linePattern', this.getLinePattern)
];
}
InnerShape
private innerShapeGeometryStyle() {
return [
{
name: 'NODESHAPE',
fill: 'transparent',
stroke: 'transparent',
strokeWidth: 0.80,
strokeCap: 'round',
strokeJoin: 'round',
strokeDashArray: null,
geometryStretch: go.GraphObject.Uniform,
// row: 0, column: 0,
scale: 1
},
// new go.Binding('alignment', 'offset',go.Spot.parse),
new go.Binding('fill', 'innerColor'),
new go.Binding('geometryString', 'innerFigure'),
new go.Binding('width', 'width').makeTwoWay(),
new go.Binding('height', 'height').makeTwoWay(),
new go.Binding('stroke', 'innerStrokeColor'),
new go.Binding('scale', 'innerScale')
];
}
The figure is show correctly but the panel table creates the border in all the node, and is only needed in the figure:
This is the wrong behavior
This is what should work:
Hope all the info helps.
Thank you.