Link is not creating

GoJS
1

can’t create a link no idea what is missing

let flowData = await getData(props.messageflow)
      let model = new go.GraphLinksModel()
      model.nodeKeyProperty = (nodeVal: NodeData, oldKey?: go.Key) => {
        return nodeVal.data.uid
      }
      model.nodeCategoryProperty = (nodeVal: NodeData, oldCategory?: go.Key) => {
        return nodeVal.volanteActivityType
      }
      model.linkFromKeyProperty = (linkData: LinkData, oldKey?: go.Key) => {
        return linkData.link.outputPort.uid
      }
      model.linkToKeyProperty = (linkData: LinkData, oldKey?: go.Key) => {
        return linkData.link.inputPort.uid
      }
      model.linkFromPortIdProperty = (linkVal: LinkData, oldProp?: string) => {
        return linkVal.link.outputPort.portIndex.toString()
      }
      model.linkToPortIdProperty = (linkVal: LinkData, oldProp?: string) => {
        return linkVal.link.inputPort.portIndex.toString()
      }
      model.linkCategoryProperty = (linkVal: LinkData, oldProp?: string) => {
        return linkVal.link.type
      }
      model.nodeIsGroupProperty = (nodeVal: NodeData, oldProp?: boolean) => { return isGroup(nodeVal.data) }
      model.nodeDataArray = flowData[0]
      model.linkDataArray = flowData[1]
      diagramRef.current.model = model

its my model

2

I think you misunderstand how those functions are used.

You seem to have implemented them correctly for getting property values. However those functions are also called when setting property values. That is when the second argument is supplied. It would not be an “old” value but the “new” value.

However one cannot change whether a node data object is a group or not, so the GraphLinksModel.nodeIsGroupProperty function does not need to handle setting the property.

Are you going to be setting GraphLinksModel.nodeGroupKeyProperty?

3

no, I set the nodeIsGroupProperty only

 const isGroup = (nodeVal: IMessageFlowElement) => {
    let tempNode = nodeVal as IMessageFlowStructuredFlowElement
    return tempNode.messageFlow ? true : false
  }

its my isGroup method it returns boolean only

4 
let model = new go.GraphLinksModel()
      model.nodeKeyProperty = (nodeVal: NodeData) => {
        return nodeVal.data.uid
      }
      model.nodeCategoryProperty = (nodeVal: NodeData) => {
        return nodeVal.volanteActivityType
      }
      model.linkFromKeyProperty = (linkData: LinkData) => {
        return linkData.link.outputPort.uid
      }
      model.linkToKeyProperty = (linkData: LinkData) => {
        return linkData.link.inputPort.uid
      }
      model.linkFromPortIdProperty = (linkVal: LinkData) => {
        return linkVal.link.outputPort.portIndex.toString()
      }
      model.linkToPortIdProperty = (linkVal: LinkData) => {
        return linkVal.link.inputPort.portIndex.toString()
      }
      model.linkCategoryProperty = (linkVal: LinkData) => {
        return linkVal.link.type
      }
      model.nodeIsGroupProperty = (nodeVal: NodeData) => { return isGroup(nodeVal.data) }
      model.nodeDataArray = flowData[0]
      model.linkDataArray = flowData[1]

now I removed “old” , now also link is not creating

5

For example: GraphLinksModel | GoJS API

So if you set that GraphLinksModel property to a function, you have to handle the situation when there are two arguments passed to your function. In that case you have to modify the state of the first argument so that the link is coming out of the second argument, a node.

model.linkFromKeyProperty = function(linkData: LinkData, newKey?: Key) {
  if (arguments.length > 1) linkData.link.outputPort.uid = newKey;
  return linkData.link.outputPort.uid;
}
6 
model.linkFromKeyProperty = (linkData: LinkData, oldKey?: go.Key) => {
        if (oldKey) linkData.link.outputPort.uid = oldKey as string
        return linkData.link.outputPort.uid
      }
      model.linkToKeyProperty = (linkData: LinkData, oldKey?: go.Key) => {
        if (oldKey) linkData.link.inputPort.uid = oldKey as string
        return linkData.link.inputPort.uid
      }
      model.linkFromPortIdProperty = (linkVal: LinkData, oldProp?: string) => {
        if (oldProp) linkVal.link.outputPort.portIndex = parseInt(oldProp)
        return linkVal.link.outputPort.portIndex.toString()
      }
      model.linkToPortIdProperty = (linkVal: LinkData, oldProp?: string) => {
        if (oldProp) linkVal.link.inputPort.portIndex = parseInt(oldProp)
        return linkVal.link.inputPort.portIndex.toString()
      }

still link is not creating

7

How do you know that the Links are not being created?
Is diagramRef.current.links.count wrong?
Does calling Diagram.findLinkForData return null?

8

it doesn’t reaches the linkconnected method in node, there is no new link visible in ui itself, is there any method will be called when new link is created…?

9

So you have defined a Node | GoJS API event handler, and it is never called?

What are the answers to my other two questions?
And could you please confirm that the value of Diagram.model’s GraphLinksModel.linkDataArray has the data that you expect.
And what is an example of that data?

10

ya diagramRef.current.links.count is incremented when I connected, but in that newly added object there is no from key , to key, from port, to port

11

And what is the link data object that you added to the linkDataArray by calling GraphLinksModel.addLinkData?

12

i need fromnodekey,tonodekey,fromportid,toportid

13

is there any event handler will be called while creation of link

14

It is impossible to help you unless I can understand what you are doing and what you want to do. That is why I keep asking questions – otherwise I just have to guess. It would help if you provided answers and asked clear, directed, detailed, and concise questions.

So, are you calling GraphLinksModel.addLinkData to create a link? If so, what data are you passing to it?

15

image
image976×278 14.4 KB

6 th element is already added linkdata from the response

7 th element is now created while trying to make a link

till now I’m not caling addlinkData method, clearly I dont know when I have to make that addLinkData method call and how to get its argument

16

To clarify, you are saying that after loading the model with an Array of seven link data objects, everything looks correct. Then some event happens that causes you to want to create another link.

The way to do that is to add a new link data object to the model within a transaction. An example is at State Chart – look at the addNodeAndLink function.

By the way, the eighth data that you added, at #7, seems incomplete. There is no data.link property.

17

ya exactly

18

in that example there is an click event for that button but in my case I clicking a port in a from node then dragged and dropped in a to port in another node

19

Ah, you had said that you were creating a link, but given the discussion about getting the model implemented correctly, I thought you were talking about doing so programmatically. You did not mention being the user and drawing a new link interactively.

The problem is that LinkingTool | GoJS API isn’t creating the link data object that you need. Are you not getting an exception when the user draws a link? Always check the console for warnings and errors. Use go-debug.js during development. Why isn’t your code

if (oldKey) linkData.link.outputPort.uid = oldKey as string

causing an exception because there is no linkData.link property value?

You will want to set LinkingTool | GoJS API

And you will need to set

I also question the need for having the “link” property on the data at all. Why shouldn’t the properties be linkdata.type, linkdata.outputPort, and linkdata.inputPort? And what other properties do the inputPort and outputPort objects have?

20

like that only we will get response from backend, we only handling it in frontend, inputport and outputport contains fromkey,fromportid,tokey,toportid