Component is missing after drop a component on link

GoJS
1

Component is missing after drop a component on link.

before drop

image

After drop
image

Our dropOntoLink function.

function dropOntoLink(e, obj) {
        var diagram = e.diagram;
        if (e.key == "") {
            var newnode = diagram.selection.first();
            var oldlink = obj.part;
            var fromnode = oldlink.fromNode;
            var tonode = oldlink.toNode;
            oldlink.toNode = newnode;
            oldlink.isNew = 1;
            var form_port = '';
            var to_port = '';
            var form_count = 0;
            var to_count = 0;
            var in_out_count = 0;
            var old_toport = '';
            var old_port_count = 0;
            to_port = oldlink.toPort;
            jQuery.each(all_connection_positions_arr[newnode.data.ComponentTypeNo], function(index, value) {
                if ((value.Direction == "In" || value.Direction == "InOut") && old_port_count == 0) {
                    oldlink.toPort = "PORT_" + value.ConnectorNo;
                    old_toport = "PORT_" + value.ConnectorNo;
                    old_port_count++;
                }
            });
            jQuery.each(all_connection_positions_arr[newnode.data.ComponentTypeNo], function(index, value) {
                if ((value.Direction == "Out" || value.Direction == "InOut") && form_count == 0) {
                    if(old_toport != "PORT_" + value.ConnectorNo){
                        form_port = "PORT_" + value.ConnectorNo;
                        form_count++;
                    }
                }
            });
           var link_data_arr = {
                                    from: newnode.data.key,
                                    to: tonode.data.key,
                                    fromPort: form_port,
                                    toPort: to_port,
                                    key: get_key(),
                                    text: 'Pipe',
                                    ComponentTypeNo: 3,
                                    isNew: 1,

                                };
            var blankcomponentdetails_value = blankcomponentdetails_arr[0];
            var keys_arr = Object.keys(blankcomponentdetails_value);

            for(var i=0; i<keys_arr.length; i++) {
                var data_key = keys_arr[i];
                var data_key_arr = data_key.split("__");
                if(data_key.indexOf("__") > 0){
                    if(data_key_arr[6] == 'ComponentNo'){
                    }else{
                        link_data_arr[data_key] = blankcomponentdetails_value[data_key];
                    }
                }
            }
            diagram.model.addLinkData(link_data_arr);
        } else {
            myDiagram.nodeTemplateMap.each(function(nodeType) {
                if (nodeType.key == 'Converge Tee') {
                    diagram.model.addNodeData(nodeType);
                }
            });
        }
    }
2

And also in some cases “mouseDrop” of linkTemplate is perfectlu working.
When we drop a component on link it is not working in mamy instances.

3

When we programmatically set a port of a node.

linkConnected: function(node, link, port) {
                        port.opacity = 0;
                      },
                      linkDisconnected: function(node, link, port) {
                        port.opacity = 1;
                      },

function is not working.

4

I’m sorry, but I do not understand what “components” there were before and what there are after the drop. What is missing?

Is dropOntoLink the Link.mouseDrop event handler? If so, it is unwise to check InputEvent.key property, since you know it represents a mouse event.

How is the Node.linkConnected event handler “not working”?

When you step through the code and check the values of all of the variables, what do you find has the wrong values?

5

Component image missing is resolved.
dropOntoLink is Link.mouseDrop event handler. On drop a node on link “dropOntoLink” function is not calling every time. many time it is not calling.

Node.linkConnected If link is connected with a port, port opacity is set to 0.
When we dynamically set port to a link.

var link = myDiagram.model.findLinkDataForKey(key);
myDiagram.model.setDataProperty(link, 'toPort', toport);

link is connected to port correctly. But port opacity is not set to 0.
We have not find any wrong value.

6

Perhaps the mouseDrop handler is not being called because the mouse was not over the link at the time of the mouse-up. Try implementing Link.mouseDragEnter and mouseDragLeave handlers so that the user has feedback to know when the mouse actually is over a link.

7

This code is wrong. You are adding an instance of an internal data structure, a key-value pair where the .value is a Node, to your model’s Model.nodeDataArray.

Besides, if you wanted a particular node template, just: myDiagram.nodeTemplateMap.get("Converge Tee"). But you should not be inserting a GraphObject into your Model as data.

8

This is already remove. This code is not needed.

9

Your code to manipulate blankcomponentdetails doesn’t make sense to me either.

Are you not running with the go-debug.js library? I recommend that you do so, because that will catch errors like adding a GraphObject to the model.

10

blankcomponentdetails_value are the extra fields that are assign to that component.

11

Then why don’t you start link_data_arr with a copy of that and then set the properties that you want? Much simpler. Much less chance of error.

Please clean up your code until it cannot be made simpler. Then if you still have a problem, post a new topic that provides details for precisely how something is going wrong. The code and the descriptions in this topic are too messy for me to understand what is going on, which make it hard for me to help. But at least you did provide before-and-after screenshots and some code, which is more than what many people do.