ElementFinished in makeSvg

Hello,

I tried using elementFinished in makeSVG to change all the white stroke to black stroke in a graphobject. But I´m obtaining this:

capturaforogo

At the Diagram i have this:

screenshot

This is my makeSVG method:

makeSvg() {
    console.log('svg');
    var svg = this.myDiagram.makeSvg({
        scale: 1,
        elementFinished: function(graphObject, SVGElement) {
               SVGElement.setAttribute("background", "white");
               SVGElement.setAttribute("stroke", "black");
               SVGElement.setAttribute("fill", "black");
        }
    });

    var svgstr = new XMLSerializer().serializeToString(svg);
    var blob = new Blob([svgstr], {
        type: "image/svg+xml"
    });

    this.util.myCallback(blob);

}

And this is the figure:

    go.Shape.defineFigureGenerator("Switch", function (shape, w, h) {
    // this figure takes one parameter, the size of the corner
    h = w / 2;
    if (shape !== null) {
        var param1 = shape.parameter1;
        if (!isNaN(param1) && param1 >= 0) p1 = param1; // can't be negative or NaN
    }

    var centerX = w / 2;
    var centerY = h;
    var inputX = 0;
    var inputY = h;
    var tdX = w;
    var tdY = h;
    var tiX = w;
    var tiY = 0;
    if (shape != null && shape.part !== null) {
        var pts = shape.part.data.point[0];
        if (pts.startX !== "" && pts.id === "input") {
            centerX = pts.startX;
            centerY = pts.startY;
            inputX = pts.endX;
            inputY = pts.endY;
        }
        pts = shape.part.data.point[1];

        if (pts.startX !== "" && pts.id === "td") {
            tdX = pts.endX;
            tdY = pts.endY;
        }

        pts = shape.part.data.point[2];

        if (pts.startX !== "" && pts.id === "ti") {
            tiX = pts.endX;
            tiY = pts.endY;
        }

    }
    var geo = new go.Geometry();
    // a single figure consisting of straight lines and quarter-circle arcs
    var input = new go.PathSegment(go.PathSegment.Line, inputX, inputY).close();
    input.name = "input";

    var td = new go.PathSegment(go.PathSegment.Line, tdX, tdY).close();
    td.name = "td";

    var ti = new go.PathSegment(go.PathSegment.Line, tiX, tiY).close();
    ti.name = "ti";

    geo.add(new go.PathFigure(centerX, centerY)
        .add(input));
    geo.add(new go.PathFigure(centerX, centerY)
        .add(ti));

    geo.add(new go.PathFigure(centerX, centerY)
        .add(td));


    // don't intersect with two top corners when used in an "Auto" Panel
    return geo;
});

Any idea what is the problem?

Greetings

In your element finished, you are changing every SVG elements to use those attributes. More likely, you should be setting those properties only for specific GraphObjects.

But we only want to change those properties in the svg image not in the diagram. In elementFinished we only have one “segment” of the figure in the SVGElement. And we want to change all segments of the figure

Do you have sample data you can give us so we can reproduce this? I see that your figure generator relies on data.

This is a simplification code:

h = 50;
w=100


go.Shape.defineFigureGenerator("Switch", function (w,h) {
// this figure takes one parameter, the size of the corner

var centerX = w / 2;
var centerY = h;
var inputX = 0;
var inputY = h;
var tdX = w;
var tdY = h;
var tiX = w;
var tiY = 0;

var geo = new go.Geometry();
// a single figure consisting of straight lines and quarter-circle arcs
var input = new go.PathSegment(go.PathSegment.Line, inputX, inputY).close();
input.name = "input";

var td = new go.PathSegment(go.PathSegment.Line, tdX, tdY).close();
td.name = "td";

var ti = new go.PathSegment(go.PathSegment.Line, tiX, tiY).close();
ti.name = "ti";

geo.add(new go.PathFigure(centerX, centerY)
    .add(input));
geo.add(new go.PathFigure(centerX, centerY)
    .add(ti));

geo.add(new go.PathFigure(centerX, centerY)
    .add(td));


// don't intersect with two top corners when used in an "Auto" Panel
return geo;

});

I see what you mean. This looks like a bug, we’ll work on a fix. The basic problem is that the GoJS shape is only being associated with one of the SVG paths that makes it up rather than the whole group.

This has been fixed in the next version of GoJS, which will be out in a week or so. In the meantime, here is a workaround:

https://codepen.io/simonsarris/pen/VJPbyO?editors=1111

The issue is that Shapes make a <path> SVG element, but Shapes with geometries that have multiple figures will make several paths, which should be grouped together:

<g>
  <path>
  <path>
  <path>
</g>

In future versions if there are multiple <path> elements, they will be grouped and the SVG element you are passed will be the <g>. This is how it is currently for TextBlocks.

The code above should be forwards-compatible.

We have fixed this in 2.0.13 which was just released. If you use 2.0.13 you will no longer need the “workaround” block: https://codepen.io/simonsarris/pen/LKWOJV?editors=1111

Thanks,

That´s works