Why does the change of model text change a lot at the same time?

GoJS
1

Click the event ：_designer.addDiagramListener(“ObjectSingleClicked”, onObjectSingleClicked);
function onObjectSingleClicked(ev) {
var part = ev.subject.part;
showEditNode(part);
};
function showEditNode(node) {
if ((node instanceof go.Node) && node.data.figure === ‘Circle’) {
layer.msg(“开始和结束步骤不可编辑~”);
return;
}
experimentVue.sheetInputName = node.data.text;

    $('.sheetName').on('blur',function(){
       var text=  $(this).val();
        _designer.startTransaction("vacate");
    _designer.model.setDataProperty(node.data, "text", text);
    _designer.commitTransaction("vacate");
    })
};

image.png1425×133 8.83 KB

2

Are you saying that with a single call to Model.setDataProperty multiple properties are changing in the Diagram?

How is the node data structured and what is the node template? I’m guessing that there is some shared data structure that might cause multiple values to change simultaneously.

3

yes,As long as you have been clicked, modify it on the right，it will be changed at the same time
this is node data and node template,
var imagesArr = [
{‘name’:‘inputTemplate’,‘images’:‘resources/images/readData.png’},
{‘name’:‘outTemplate’,‘images’:‘resources/images/readData.png’},
{‘name’:‘ARIMA’,‘images’:‘resources/images/append sting.png’},
{‘name’:‘zhishupinghua’,‘images’:‘resources/images/zhishupinghua.png’},
{‘name’:‘Lasso’,‘images’:‘resources/images/Lasso.png’},
{‘name’:‘xbfx’,‘images’:‘resources/images/xbfx.png’},
{‘name’:‘Lasso’,‘images’:‘resources/images/Lasso.png’},
{‘name’:‘gyh’,‘images’:‘resources/images/guiyihua.png’},
{‘name’:‘bzh’,‘images’:‘resources/images/biaozhunhua.png’},
{‘name’:‘jdh’,‘images’:‘resources/images/jiandu.png’},
{‘name’:‘cfsj’,‘images’:‘resources/images/chaifen.png’},
{‘name’:‘zqd’,‘images’:‘resources/images/zhunquedu.png’},
{‘name’:‘xlhs’,‘images’:‘resources/images/xlyy.png’},

        ]
    // define templates for each type of node
    
    // add the templates created above to _designer and palette
    
    function imageData(){
        for(i=0;i<imagesArr.length;i++){
            var dataName = G(go.Node, "Vertical",
                { selectable: true, selectionAdornmentTemplate: makeNodeSelectionAdornmentTemplate() },
                G(go.Shape, "Rectangle", portStyle(true),
                        { portId: "in1", alignment: new go.Spot(0.5, 0) }),
                G(go.Picture, imagesArr[i].images, shapeStyle()
                ),  // override the default fill (from shapeStyle()) to be red
            G(go.Panel, "Table",
                {
                    maxSize: new go.Size(86, 550),
                    margin: new go.Margin(0, 2, 0, 1),
                    defaultAlignment: go.Spot.Left
                },

                G(go.TextBlock, textStyle(),  // the name

                    new go.Binding("text", "text").makeTwoWay())),
            
            G(go.Shape, "Rectangle", portStyle(false),
                { portId: "out", alignment: new go.Spot(0.5, 1) }),
            nodeStyle()
        );
        _designer.nodeTemplateMap.add(imagesArr[i].name, dataName);
        }
    }
    imageData();
    myPalette.nodeTemplateMap = _designer.nodeTemplateMap;
    myPalette.model.nodeDataArray = [
        { category: "gyh",text:'归一化'},
        { category: "bzh",text:'标准化'},
        { category: "jdh",text:'监督化'},
        { category: "cfsj",text:'拆分数据'},
        { category: "zqd",text:'特征重要性评估'},
        { category: "xlhs",text:'特征选择'}
    ];
4

Your templates look OK to me. (Except you have two 'Lasso’s.)

I suspect the problem is that you have more than one ‘blur’ event handler, where each one is remembering and then modifying a clicked node.

5

thans,I’ve solved it. I put the blur event outside the function and assign the value of the node to itself.

Function showEditNode (node) {
NodeCur = node;
};

$('.sheetName').On ('blur', function ()) {
Var sheetName = $(this).Val ();
UpdateNodeData (nodeCur, sheetName);
})
Function updateNodeData (node, text) {
_designer.startTransaction ("vacate");
_designer.model.setDataProperty (node.data, "text", text);
_designer.commitTransaction ("vacate");
};

and I have a question to ask,
I want to change the text name when dragging to the canvas. According to the number of the same type of canvas, I want to add numbers after the name. Is there any good way?

6

Implement an “ExternalObjectsDropped” DiagramEvent listener.

7

yes，But how do I get the attributes of text? With DiagramEvent.subject? What about the back?

8

Yes, or the myDiagram.selection, which is what was just dropped.

myDiagram.addDiagramListener("ExternalObjectsDropped", function(e) {
  var node  = e.subject.first(); // assuming you're only dropping one node
  // look at node.data maybe, or set some property on node.data
   model.setDataProperty(node.data, "myProp1", ...);
});
9

yes，But how do I get the attributes of text? With DiagramEvent.subject? What about the back?

10

image.png1117×456 15.8 KB

Hello, I want to change the value of node data dynamically through the setDataProperty attribute.
I wrote the change event on the right and then changed the node data by using setDataProperty to change the current click element, and I found that all the elements were changed, but I just wanted to change the element of the current click.

image.png1028×179 9.2 KB