Custom binding Dash and Dotted line

GoJS
1

Hi There,

Is there a way to bind Dash to custom values on the inspector dropdown? I am trying to disply my chosen values and bind the to valid values for the dash property on the link. Please see below. Thanks in advance.

function makeInspector() {

    var inspector = new Inspector('myInspectorDiv', myDiagram,
        {
            properties: {
                "dash": {
                    show: Inspector.showIfLink, type: 'select',
                    choices: ["Dotted Line", "Dash Line"]
                }
            }
        });

    window.inspector = inspector;
}

var genericLinkTemplate =
    $(go.Link,

        $(go.Shape,
            new go.Binding("strokeDashArray", "dash", function (d) { return d == "Dotted Line" ? { dash: [3.3] } : d == "Dash Line" ? { dash: [5.5] } : { dash: []}; }).ofObject(),

);

2

The value of Shape.strokeDashArray should be either null or (typically) an Array of two numbers. Not just one number as in your code.

3

Hi Walter,
Thanks for your reply,
I changed it to the code below and it still doesn’t work. What am I missing?

var genericLinkTemplate =
$(go.Link,

    $(go.Shape,

new go.Binding(“strokeDashArray”, “dash”, function (d) { return d == “Dotted Line” ? { dash: “[3,3]” } : d == “Dash Line” ? { dash: “[5,5]” } : { dash: null }; }).ofObject(),
);

4

If you are using go-debug.js, you should be getting a warning about there not being any “dash” property on the Link.

I think you want your Binding source to be the link data, not the GraphObject. So don’t call Binding.ofObject.

5

I am using go-1.7.29.js, I remove the Binding.ofObject and changed the code to:

var dotted = [3,3];
var dashed = [5,5];

$(go.Shape,
new go.Binding(“strokeDashArray”, “dash”, function (d) { return d == “Dotted Line” ? { dash: dotted } : d == “Dash Line” ? { dash: dashed } : { dash: null }; }))

And still no luck

6

The result of the conversion function must be the expected value that the property expects, not an Object with some properties on it.

This seems to work:

    var dotted = [3, 3];
    var dashed = [5, 5];
    myDiagram.linkTemplate =
      $(go.Link,
        $(go.Shape,
          new go.Binding("strokeDashArray", "dash",
            function(d) { return d === "Dotted Line" ? dotted :
                                 (d === "Dash Line" ? dashed : null); }))
      );
7

Yep It does thank you so much bro