About the arrowhead

Hi~ here is the problem
I defined the linkTemplate, the normal link goes forward has right color with arrowhead, but the backward arrow doesn’t work in correct color.
I try to delete the Text Panel named ‘LABEL’, but the same result.


a68c74da463ef0e78ef926d40e28e48 087f370fb37debec4f1d785bb9e1a9f
also I wrote this to increase the zOrder of ‘LABEL’:

            selectionChanged: function(link) {
              if(link.isSelected) {
                if(link.data.reset == 1) {
                  // make zOrder higher
                  myDiagram.model.setDataProperty(myDiagram.findLinkForKey(link.data.fid), 'zOrder', 30 + (new Date().getTime() / 100000000))
                  link.findObject('LABEL').visible = true
                }
              } else {
                link.findObject('LABEL').visible = false
              }
            },
1 Like

The order in which Bindings are evaluated, and the number of times they are evaluated, are not determined.

On the arrowhead shape, why don’t you write:

  new go.Binding('fill', 'active', function(a) { return a ? 'red' : '#5f5f5f'; })

The problem is I wrote too many times Binding ?
Then I remove all the link & arrowhead’s Binding, but there is a default active style with doggerblue line, can I prevent it?
also I want it turn to red when it is on ‘select blur’, so I wrote it in the ‘isSelected’…

How can I help when you do not provide the link template in a form that I can use?

It would also help to simplify the link template as much as you can while still reproducing the problem.

here is the data:

 "data": {
   "nodeDataArray":[
            {
                "key":-1,
                "text":"\u6d41\u7a0b\u5f00\u59cb",
                "flowname":"\u6d41\u7a0b\u5f00\u59cb",
                "flowkey":"1",
                "x":0,
                "y":0,
                "flowkey3":"1",
                "nodeData":[
                ],
                "child":[
                ],
                "fid":-1,
                "category":"Start",
                "loc":"-200 0",
                "pid":0,
                "pidkey":0,
                "active":true,
                "color":"#2E79FF"
            },
            {
                "key":1,
                "text":"\u8bf7\u5047\u4eba",
                "flowname":"\u8bf7\u5047\u4eba",
                "flowkey":"1",
                "x":0,
                "y":0,
                "flowkey3":"2",
                "nodeData":[
                    {
                        "approvaldate":"",
                        "lnstructions":"",
                        "flowuser":" \u7ba1\u7406\u5458 ",
                        "pertype":"0"
                    }],
                "flowuser":"",
                "child":[
                    2],
                "fid":9205,
                "category":"",
                "loc":"0 0",
                "pid":0,
                "pidKey":0,
                "color":"#F5A703"
            },
            {
                "key":2,
                "text":"\u90e8\u95e8\u9886\u5bfc\u5ba1\u6279",
                "flowname":"\u90e8\u95e8\u9886\u5bfc\u5ba1\u6279",
                "flowkey":"1",
                "x":250,
                "y":0,
                "flowkey3":"2",
                "nodeData":[
                ],
                "flowuser":"",
                "child":[
                    3],
                "fid":9206,
                "category":"Conditional",
                "pid":1,
                "pidKey":0,
                "fkey":0,
                "loc":"0 250",
                "color":"#35aa47"
            },
            {
                "key":3,
                "text":"\u4eba\u529b\u8d44\u6e90\u90e8\u5ba1\u6838",
                "flowname":"\u4eba\u529b\u8d44\u6e90\u90e8\u5ba1\u6838",
                "flowkey":"2",
                "flowkey3":"",
                "x":450,
                "y":0,
                "flowuser":"",
                "child":[
                ],
                "fid":9207,
                "loc":"0 450",
                "nodeData":[
                ],
                "color":"#35aa47"
            },
            {
                "category":"End",
                "key":-2,
                "text":"\u6d41\u7a0b\u7ed3\u675f",
                "flowname":"",
                "flowkey":"",
                "flowkey3":"",
                "x":0,
                "y":0,
                "flowuser":"",
                "child":[
                ],
                "fid":0,
                "loc":"0 450",
                "nodeData":[
                ],
                "color":"#35aa47"
            }],
  "linkDataArray":[
            {
                "from":-1,
                "to":1,
                "name":"\u6d41\u7a0b\u5f00\u59cb",
                "active":true,
                "fid":-1
            },
            {
                "from":1,
                "to":2,
                "name":"\u90e8\u95e8\u9886\u5bfc\u5ba1\u6279",
                "active":false,
                "fid":1
            },
            {
                "from":2,
                "to":3,
                "name":"\u4eba\u529b\u8d44\u6e90\u90e8\u5ba1\u6838",
                "active":false,
                "fid":2
            },
            {
                "from":3,
                "to":-2,
                "name":"\u6d41\u7a0b\u7ed3\u675f",
                "active":false,
                "fid":3
            },
            {
                "from":2,
                "to":1,
                "name":"\u4eba\u529b\u8d44\u6e90\u90e8\u5ba1\u6838",
                "active":false,
                "reset":1,
                "title":"\u56de \u9000",
                "namflowusere":"\u8bf7\u5047\u4eba",
                "fid":4
            }],
}

here is link template:

        myDiagram.linkTemplate = gojs(go.Link,
          { 
            routing: go.Link.AvoidsNodes,
            curve: go.Link.JumpOver,
            corner: 5,
            relinkableFrom: false,
            relinkableTo: false,
            reshapable: false,
            resegmentable: false,
            reshapable: false,
            zOrder: 1,
            selectionChanged: function(link) {
              if(link.isSelected) {
                if(link.data.reset == 1) {
                  myDiagram.model.setDataProperty(myDiagram.findLinkForKey(link.data.fid), 'zOrder', 30 + (new Date().getTime() / 100000000))
                }
              } else {
              }
            },
            mouseEnter: function(e, link) {
                link.findObject('HIGHLIGHT').stroke = 'rgba(30,144,255,0.2)'
              },
            mouseLeave: function(e, link) { link.findObject('HIGHLIGHT').stroke = 'transparent' },
          },
          new go.Binding('points').makeTwoWay(),
          gojs(go.Shape, // the highlight shape, normally transparent
            { 
              isPanelMain: true, 
              strokeWidth: 8, 
              stroke: 'transparent', 
              name: 'HIGHLIGHT' 
            }
          ),
          gojs(go.Shape, // the PATH
            { isPanelMain: true, stroke: "#5f5f5f", strokeWidth: 2 },
            new go.Binding('stroke', 'isSelected', function(isSelected) { return isSelected ? '#1e90ff' : '#5f5f5f'; }).ofObject(),
            new go.Binding('stroke', 'active', function(active) { console.log(active);return active ? '#ff0000' : '#5f5f5f'; }).ofObject()
          ),
          gojs(go.Shape, // the arrowhead
            { toArrow: 'standard', strokeWidth: 0, fill: '#5f5f5f' },
            new go.Binding('fill', 'isSelected', function(isSelected) { return isSelected ? '#1e90ff' : '#5f5f5f'; }).ofObject()
          ),
        );

I delete the LABEL, now the select event is correct, but the defualt red color dosen’t work…

There is no property named “active” on any GraphObject class, so it does not make sense to have a Binding that is ofObject.

But you do have a property named “active” on the link data, so the Binding should be a regular one.

The other problem is that when the link becomes not selected, the conversion function always returns the gray color rather than the red color when data.active is true.

        $(go.Shape, // the PATH
          { isPanelMain: true, stroke: "#5f5f5f", strokeWidth: 2 },
          new go.Binding('stroke', 'isSelected',
            function(isSelected, shape) {
              return isSelected ? '#1e90ff' : (shape.part.data.active ? '#ff0000' : '#5f5f5f');
            }).ofObject(),
          new go.Binding('stroke', 'active',
            function(active) { return active ? '#ff0000' : '#5f5f5f'; })
        ),
1 Like

THX!!! It works!! <3
And then I should learn more about the GarphObject, but my English not very well…