It didn’t/doesn’t feel right either, but it was the only thing I could find to kick the location undo/redo into gear. I found the solution here: Use undoManager for virtualizedForceLayout - #7 by walter
If this isn’t the right place/way to do this then what is?
I’m using the ReactDiagram, and am using the onModelChange function to update my db data layer when I make transactions through GoJS. Using a handful of other unrelated diagramEvent listeners:
ViewportBoundsChanged: switching node/link category at a specific zoom level to use a detailed vs compact template (using: setCategoryForNodeData, setCategoryForLinkData)
LostFocus: clearing selection
ClipboardChanged: monitoring clipboard contents
The link template is:
export const defaultLinkTemplate = hideContextMenu =>
GraphObject.make(
Link,
{
corner: 6,
selectionAdorned: false,
},
new Binding('curve', 'type', type => (type === 'revert' ? Link.Bezier : Link.JumpGap)),
new Binding('curviness', 'type', type => (type === 'revert' ? 100 : 0)),
new Binding('isShadowed', 'isSelected').ofObject(),
// the "line"
GraphObject.make(
Shape,
{ strokeWidth: 2, opacity: 1 },
new Binding('stroke', '', ({ data }) => LINK_COLORS[data.state]).ofObject(),
new Binding('strokeDashArray', 'type', type => (type === 'revert' ? [6, 6] : [])),
new AnimationTrigger('stroke', { duration: 300 }),
),
{
contextMenu: GraphObject.make(HTMLInfo, { show: () => {}, hide: hideContextMenu }),
},
// the "from" end arrowhead
GraphObject.make(
Shape,
{ fromArrow: 'Circle', stroke: null, scale: 1.2, strokeWidth: 2 },
new Binding('fill', '', ({ data, isSelected }) =>
isSelected ? '#FFFFFF' : LINK_COLORS[data.state],
).ofObject(),
new AnimationTrigger('fill', { duration: 300 }),
new Binding('stroke', '', ({ data }) => LINK_COLORS[data.state]).ofObject(),
),
// the "to" end arrowhead
GraphObject.make(
Shape,
{ toArrow: 'RoundedTriangle', stroke: null, scale: 1.2, strokeWidth: 2 },
new Binding('fill', '', ({ data, isSelected }) =>
isSelected ? '#FFFFFF' : LINK_COLORS[data.state],
).ofObject(),
new AnimationTrigger('fill', { duration: 300 }),
new Binding('stroke', '', ({ data }) => LINK_COLORS[data.state]).ofObject(),
),
{
shadowColor: 'grey',
shadowBlur: 12,
shadowOffset: new Point(0, 0),
mouseHover(e, node) {
node.isShadowed = true;
},
mouseLeave(e, node) {
if (!node.isSelected) node.isShadowed = false;
},
},
);