Hi,
I am seeing the following log after I add a new node to my canvas that has an svg not yet currently loaded.
Change not within a transaction: !d position: id-ddf8ece9-a610-44e7-a6b4-8ceb0ceffa9a old: Point(800,0) new: Point(799.9999999999999,0)
I’ve read through similar posts such as Change not within a transaction specifically starting at reply 24 and on. It seems to be a similar situation but there is a difference.
My svgs themselves have explicit width and heights within. For my svg, I am doing as recommended and am setting a desiredSize for the Picture element. But that seems to have no impact on resolving the warning. I see mention that it’s because the loading of the svg can impact node dimensions which can impact positioning. To fix this, I added a fixed width and height to the node as recommended.
This is where I see the difference in behavior from previous posts. The user said fixed node dimensions did in fact solve the issue but on my end, it doesn’t. It doesn’t even solve the issue when I set the node dimensions way bigger than the svg. Fixed node dimensions isn’t really an option for us anyways but curious on your thoughts around this. If the node dimensions are fixed, it feels like the asynchronous loading of the image should have no impact on the layout.
Here is a very simplified sample displaying the issue. You will have to replace 1.svg and 2.svg with actual paths pointing to svgs.
<!DOCTYPE html>
<html>
<head>
<title>Splice Node into Link with DropZone</title>
<!-- Copyright 1998-2024 by Northwoods Software Corporation. -->
</head>
<body>
<div id="myDiagramDiv" style="width: 100%; height: 400px; border: solid 1px black"></div>
<script src="https://unpkg.com/[email protected]/release/go-debug.js"></script>
<script id="code">
const $ = go.GraphObject.make;
const myDiagram = new go.Diagram('myDiagramDiv', {
contentAlignment: go.Spot.Center,
layout: new go.TreeLayout(),
'undoManager.isEnabled': true,
});
myDiagram.nodeTemplate = $(
go.Node,
'Auto',
{
// width: 50,
// height: 50,
doubleClick: (e, obj) => {
const part = obj.part;
if (part instanceof go.Node) {
if (part.findNodesOutOf().count === 0) {
e.diagram.startTransaction('add');
var newKey = Math.floor(Math.random() * 10000);
e.diagram.model.addNodeData({ key: newKey, text: 'red node', color: 'red', source: '1.svg' });
e.diagram.model.addLinkData({ to: newKey, from: part.key });
e.diagram.commitTransaction('add');
}
}
},
locationSpot: go.Spot.Center,
},
$(go.Picture, { desiredSize: new go.Size(40, 40) }, new go.Binding('source', 'source'))
);
myDiagram.linkTemplate = $(
go.Link,
// the highlight path Shape
$(
go.Shape,
{ isPanelMain: true, strokeWidth: 7, stroke: 'transparent' },
),
// the normal path Shape
$(go.Shape, { isPanelMain: true, strokeWidth: 1.5 }),
$(go.Shape, { toArrow: 'OpenTriangle' })
);
myDiagram.model = new go.GraphLinksModel(
[
{ key: 1, source: '2.svg' },
{ key: 3, source: '2.svg' },
],
[
{ from: 1, to: 3 },
]
);
</script>
</body>
</html>