makeSvg does not use location of nodes (or points of links)

@Markmeteenk wrote:

Hi!

Currently, I am working on a project which lets people draw dataflows on a canvas.

I use the Vue framework, which lets me chop up the application into components. One of the components is called diagram.vue which contains a GoJS diagram. There is another component called toolbar.vue which contains a button called 'Print'. Quite obvious, I would like to be able to print the diagram as shown in the diagram.vue component.

What I did was make sure that on every change in the GoJS diagram the diagram.model object is stored in the Vue framework (the store, more specifically).

In the toolbar.vue component I try to recreate the GoJS diagram, get the data from the Vue framework and then use the makeSvg function.

let diagram = $(go.Diagram, 'diagramHolder', {});
let storeModel = JSON.parse(JSON.parse(this.diagramSVG));

diagram.model = $(go.GraphLinksModel);

diagram.model.nodeDataArray = storeModel.nodeDataArray;
diagram.model.linkDataArray = storeModel.linkDataArray;

console.log(diagram.model.nodeDataArray); // shows the correct nodes, each with a loc property { class: "go.Point, x: , y: }
console.log(diagram.model.linkDataArray); // shows the correct links, each with a from, to and points property

let newWindow = window.open("","newWindow");
let newDocument = newWindow.document;

newDocument.body.innerHTML = '';

let newSVG = diagram.makeSvg({
// Scale 1 to make all of the diagram show
scale: 1
});

newDocument.body.appendChild(newSVG);

The new windows opens, it shows the correct nodes and links, but they are all placed in top left corner.

What am I overlooking? Why isn't makeSvg using the node loc properties?

Posts: 6

Participants: 2

Read full topic