Overlapping a geometryString

@cesar.smerling wrote:

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.

Posts: 13

Participants: 2

Read full topic