debug mode Returns a change in within a transaction error. Is this a problem?
I’ve shared node template below
How do I resolve these alerts?
My Node Template:
makeHelperArrow(name: any, align: any, spot: any, output: any, input: any, imageType: any) {
let horizontal = align.equals(go.Spot.Top) || align.equals(go.Spot.Bottom);
let alignmentFocus = align.opposite();
alignmentFocus.offsetX = 0;
alignmentFocus.offsetY = 0;
alignmentFocus.x = alignmentFocus.x === 1 || alignmentFocus.x === 0 ? alignmentFocus.x : 0.5;
alignmentFocus.y = alignmentFocus.y === 1 || alignmentFocus.y === 0 ? alignmentFocus.y : 0.5;
return goMake(go.Picture, Tools.LinkHelpers[imageType],
{
name: name,
cursor: "copy",
desiredSize: new go.Size(8, 8),
alignment: align,
portId: name,
fromSpot: spot,
toSpot: spot,
toLinkable: false,
opacity: 0,
alignmentFocus: alignmentFocus,
mouseEnter: (e: any, node: any) => {
if (node.name == "L_H") {
this.diagram.toolManager.linkingTool.temporaryLink.fromSpot = go.Spot.LeftSide;
} else if (node.name == "R_H") {
this.diagram.toolManager.linkingTool.temporaryLink.fromSpot = go.Spot.RightSide;
} else if (node.name == "T_H") {
this.diagram.toolManager.linkingTool.temporaryLink.fromSpot = go.Spot.TopSide;
} else if (node.name == "B_H") {
this.diagram.toolManager.linkingTool.temporaryLink.fromSpot = go.Spot.BottomSide;
}
let fromLinkable = this.bindNodeFromLinkable(node.part.data);
node.cursor = fromLinkable ? "copy" : "default";
let items = ["T_H", "L_H", "R_H", "B_H"];
node.opacity = fromLinkable ? .8 : 0;
for (let i = 0; i <= items.length; i++) {
if (node.name !== items[i]) {
if (node.part.findObject(items[i])) {
node.part.findObject(items[i]).opacity = fromLinkable ? .4 : 0;
}
}
}
}
},
new go.Binding("visible", "", this.bindNodeFromLinkable.bind(this)),
new go.Binding("fromLinkable", "", this.bindNodeFromLinkable.bind(this)),
);
}
makePort(name: string, align: any, spot: any, output: any, input: any, horizontal: any) {
return goMake(go.Shape,
{
fill: "transparent", // changed to a color in the mouseEnter event handler
strokeWidth: 0, // no stroke
width: horizontal ? NaN : 8, // if not stretching horizontally, just 8 wide
height: !horizontal ? NaN : 8, // if not stretching vertically, just 8 tall
alignment: align, // align the port on the main Shape
stretch: (horizontal ? go.GraphObject.Horizontal : go.GraphObject.Vertical),
portId: name, // declare this object to be a "port"
fromSpot: spot, // declare where links may connect at this port
fromLinkable: false, // declare whether the user may draw links from here
toSpot: spot, // declare where links may connect at this port
fromLinkableSelfNode: false,
fromLinkableDuplicates: true,
toLinkableSelfNode: false,
toLinkableDuplicates: true
},
new go.Binding("toLinkable", "typeCode", this.bindNodeToLinkable.bind(this))
);
}
this.diagram.nodeTemplateMap.add("", goMake(go.Node, "Spot", {
zOrder: 5,
locationObjectName: "Shape",
locationSpot: go.Spot.Center,
selectionAdornmentTemplate: nodeSelectionAdornmentTemplate,
selectionObjectName: "Shape",
resizeObjectName: "Shape",
rotateObjectName: "Shape",
resizeAdornmentTemplate: nodeResizeAdornmentTemplate,
rotatable: true,
rotateAdornmentTemplate: nodeRotateAdornmentTemplate,
background: "transparent",
shadowOffset: new go.Point(0, 0),
click: (e: go.InputEvent, obj: go.GraphObject) => {
if (obj && obj.part && obj.part.data && obj.part.data.isLock) {
this.diagram.select(obj.part);
}
},
doubleClick: () => {
this.openPropertyInspector();
},
mouseEnter: (e: go.InputEvent, node: go.Node) => {
let fromLinkable = this.bindNodeFromLinkable(node.data);
let items = ["T_H", "L_H", "R_H", "B_H"];
for (let i = 0; i <= items.length; i++) {
if (node.part.findObject(items[i])) {
node.part.findObject(items[i]).opacity = fromLinkable ? .4 : 0;
node.part.findObject(items[i]).opacity = fromLinkable ? e.diagram.findObjectAt(e.documentPoint).portId === items[i] ? .8 : .4 : 0;
}
}
this.toggleHighlightLinksAndNodes(node.part.data.key, true);
},
mouseLeave: (e: go.InputEvent, node: go.Node) => {
let items = ["T_H", "L_H", "R_H", "B_H"];
for (let i = 0; i <= items.length; i++) {
if (node.part.findObject(items[i])) {
node.part.findObject(items[i]).opacity = 0;
}
}
}
},
new go.Binding("location", "location", this.bindShapeLocation).makeTwoWay(),
new go.Binding("movable", "isLock", (val: boolean) => !val),
new go.Binding("deletable", "isLock", this.bindIsLock),
new go.Binding("rotatable", "isLock", this.bindIsLock),
new go.Binding("resizable", "isLock", this.bindIsLock),
goMake(go.Panel, "Vertical",
goMake(go.Panel, "Spot",
goMake(go.Panel, "Spot",
{
shadowVisible: false,
name: "Shape"
},
new go.Binding("desiredSize", "size", this.bindShapeSize).makeTwoWay(),
new go.Binding("angle", "angle"),
this.getNodeShape()
),
this.makePort("T", new go.Spot(0.5, 0, 0, -6), go.Spot.TopSide, false, true, 1),
this.makePort("L", new go.Spot(0, 0.5, -6, 0), go.Spot.LeftSide, false, true, 0),
this.makePort("R", new go.Spot(1, 0.5, 6, 0), go.Spot.RightSide, false, true, 0),
this.makeHelperArrow("T_H", new go.Spot(0.5, 0, 0, -2), go.Spot.TopSide, false, true, "imageTop"),
this.makeHelperArrow("L_H", new go.Spot(0, 0.5, -2, 0), go.Spot.LeftSide, true, true, "imageLeft"),
this.makeHelperArrow("R_H", new go.Spot(1, 0.5, 2, 0), go.Spot.RightSide, true, true, "imageRight")
),
goMake(go.Panel, "Spot", { margin: new go.Margin(2.5, 0, 0, 0) },
goMake(go.Panel, "Auto",
goMake(go.Shape, "RoundedRectangle", { fill: "rgba(0, 0, 0, 0.05)", strokeWidth: 0 },
new go.Binding("fill", "textBackgroundColor", this.bindShapeTextBackgroundColor),
),
goMake(go.TextBlock,
{
editable: true,
verticalAlignment: go.Spot.Center,
alignment: go.Spot.Center,
margin: new go.Margin(1, 5, 0, 5),
background: "transparent"
},
this.makeTwoWaySubBinding("text", this.props.currentLanguage.culture),
new go.Binding("font", "font", this.bindShapeTextFont),
new go.Binding("isUnderline", "font", this.bindShapeTextIsUnderline),
new go.Binding("stroke", "font", this.bindShapeTextColor)
)
),
this.makePort("B", new go.Spot(0.5, 1, 0, 4.5), go.Spot.BottomSide, false, true, 1),
this.makeHelperArrow("B_H", new go.Spot(0.5, 1, 0, 0.5), go.Spot.BottomSide, true, false, "imageBottom"),
),
goMake(go.Panel, "Spot", { width: 22, height: 10, name: "anglePanel", visible: false },
goMake(go.Shape, "RoundedRectangle", {
fill: "#fff",
stroke: "rgba(0, 0, 0, 0.25)",
strokeWidth: 0.5,
parameter1: 1
}),
goMake(go.TextBlock, {
height: 4.5,
name: "angleText",
textAlign: "center",
verticalAlignment: go.Spot.Center,
stroke: "black",
font: "4pt sans-serif"
})
)
)
));