I’m going crazy here.
I’m using setDataProperty with a custom, data-inspector-like sidebar. Updating an input in the side bar updates a node in the diagram associated with the information currently displayed in the sidebar.
I have, from what I can tell, two identically-coded inputs. One successfully updates the data model. One doesn’t. I cannot, for the life of me, figure out why.
Is there something specific to GoJS that’s going on here?
Am I just missing something?
Relevant Code Bits
function init() {
var $ = go.GraphObject.make;
//------------------- Define Diagram Properties -------------------
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
"undoManager.isEnabled": true,
"toolManager.hoverDelay": 10,
"toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,
layout: $(go.ForceDirectedLayout, { defaultSpringLength: 10 }),
});
//------------------- node template common parts -------------------
function commonGroupStyle() {
return [
{
selectionAdorned: false, // this line removes the blue rectangle around selected objects
shadowOffset: new go.Point(0, 0),
shadowBlur: 10,
shadowColor: "blue",
click: fillInfoBox //FILLS MY CUSTOM DATA-INSPECTOR-LIKE SIDEBAR
},
]
}
function commonShapeStyle() {
return [
{
name: "NODESHAPE",
fill: "lightgray",
stroke: "darkslategray"
},
];
}
function commonTextBlock() {
return $(go.TextBlock,
new go.Binding("text", "label").makeTwoWay(), //DOES MY PROBLEM INVOLVE THIS?
{
name: "NODELABEL",
stroke: "darkslategray",
margin: 10
}
);
}
//------------------- group templates -------------------
var basicTemplate =
$(go.Group, "Auto", commonGroupStyle(),
$(go.Shape, "RoundedRectangle", commonShapeStyle()),
commonTextBlock()
);
var projectTemplate =
$(go.Group, "Auto", commonGroupStyle(),
$(go.Shape, "Rectangle", commonShapeStyle()),
commonTextBlock()
);
myDiagram.groupTemplateMap.add("concept", basicTemplate);
myDiagram.groupTemplateMap.add("project", projectTemplate);
//------------------- link template common parts -------------------
function commonLinkStyle() {
return [
{ relinkableFrom: true, relinkableTo: true }
]
}
//------------------- link templates -------------------
myDiagram.linkTemplate = //taken from the conceptMap example
$(go.Link, // the whole link panel
commonLinkStyle(),
$(go.Shape, // the link shape
{ stroke: "black" }),
$(go.Shape, // the arrowhead
{ toArrow: "standard", stroke: null }),
$(go.Panel, "Auto",
$(go.Shape, // the label background, which becomes transparent around the edges
{
fill: $(go.Brush, "Radial", { 0: "rgb(240, 240, 240)", 0.3: "rgb(240, 240, 240)", 1: "rgba(240, 240, 240, 0)" }),
stroke: null
}),
$(go.TextBlock, // the label text
{
textAlign: "center",
font: "10pt helvetica, arial, sans-serif",
stroke: "#555555",
margin: 4,
text: "WHATEVER"
},
new go.Binding("text", "label").makeTwoWay())
)
);
//------------------- select model -------------------
//GETMODEL FUNCTION WORKS FINE, ITS CODE IS EXCLUDED HERE BECAUSE
//IT'S LONG AND IS ONLY USED FOR INITIALIZING THE DIAGRAM
myDiagram.model = go.Model.fromJson(getModel("tester"));
} //End Init
//WRITES DATA INPUT INTO THE DATA-INSPECTOR-LIKE SIDEBAR BACK TO THE MODEL
function writeBack(key, property, value){
var node = myDiagram.findNodeForKey(key);
myDiagram.startTransaction('set new node property');
console.log(node.data);
console.log(`Attempting to set ${property} on node with key ${key} to ${value}`);
myDiagram.model.setDataProperty(node, property, value);
console.log(node.data);
myDiagram.commitTransaction('set new node property')
}
//FILLS IN MY CUSTOM DATA-INSPECTOR-LIKE SIDEBAR
function fillInfoBox(e, o){
//obtain data reference using the object
const d = o.part.data
//set hidden ID & title
document.getElementById("info-id").textContent = d.key;
//THESE NEXT THREE LINES DON'T WORK
var title = document.getElementById("info-title");
title.value = d.label;
title.onchange = function(){writeBack(d.key, "label", title.value)}
//THESE NEXT THREE LINES DO WORK
var type = document.getElementById("type");
type.value = d.category;
type.onchange = function(){writeBack(d.key, "category", type.value)}
}
Here’s the console after updating the “type” input (which works), then updating the “info-title” input (which does not work):
Notice “category” updates to the model just fine, but “label” doesn’t update at all.
What I’m doing seems simple enough… I’m going crazy trying to figure out why “category” gets set just fine, yet “label” refuses to update?
Does it have something to do with the fact that I’ve used Label as a binding in my diagram?
Any help would be greatly appreciated.