pathPattern link styles cause an error

@Alpheus wrote:

Hi There,

So I saved the path pattern definitions in the database and retrieve and show them in the inspector. When I link node onjects
-I get the black box on the link,
when I try to change the pattern
-I get:Uncaught TypeError: Cannot read property 'width' of undefined
Then one of the nodes disappears

Is there something wrong with my link definition? please see the code below.

var dotted = [1, 9];
var dashed = [5, 5];

var genericLinkTemplate =
    $(go.Link,
        {
            routing: go.Link.Orthogonal, curve: go.Link.JumpOver, corner: 10,
            fromSpot: go.Spot.AllSides, toSpot: go.Spot.AllSides, resegmentable: true,
            reshapable: true, relinkableFrom: true, relinkableTo: true, toEndSegmentLength: 20,
        },
        new go.Binding("points").makeTwoWay(),
        new go.Binding("curviness"),
        $(go.Shape,
            new go.Binding("stroke", "color").makeTwoWay(),
            new go.Binding("strokeWidth", "width").makeTwoWay(),
            new go.Binding("strokeDashArray", "dash",
                function (d) {
                    return d === "Dotted Line" ? dotted :
                        (d === "Dash Line" ? dashed : null);
                }),
        ),
        $(go.Shape,  // the link's path shape
            { isPanelMain: true, stroke: "transparent" },
            new go.Binding("stroke", "patt", function (f) { return (f === "") ? "black" : "transparent"; }),
            new go.Binding("pathPattern", "patt", convertPathPatternToShape)),
        $(go.Shape,  // the link's path shape
            { isPanelMain: true, stroke: "transparent", strokeWidth: 3 },
            new go.Binding("pathPattern", "patt2", convertPathPatternToShape)),
        $(go.Shape,
            new go.Binding("fromArrow", "fromArrow"), { fromArrow: "Circle" }, new go.Binding("fill", "color").makeTwoWay()),
        $(go.Shape,
            new go.Binding("toArrow", "toArrow"), { toArrow: "Standard" }, new go.Binding("fill", "color").makeTwoWay()),
        $(go.Panel, "Auto",
            { cursor: "move" },  // visual hint that the user can do something with this link label
            $(go.TextBlock, "",  // the label text
                {
                    textAlign: "center",
                    font: "10pt helvetica, arial, sans-serif",
                    stroke: "black",
                    margin: 4,
                    editable: true  // editing the text automatically updates the model data
                },
                new go.Binding("text", "text").makeTwoWay()),
        )
    );

function makeInspector(fromArrowHeads, toArrowHeads, linkStyles) {

var inspector = new Inspector('myInspectorDiv', myDiagram,
    {
        // uncomment this line to only inspect the named properties below instead of all properties on each object:
        // includesOwnProperties: false,
        properties: {
            "text": { defaultValue: "" },
            // an example of specifying the <input> type
            // key would be automatically added for nodes, but we want to declare it read-only also:
            // color would be automatically added for nodes, but we want to declare it a color also:
            "color": { show: Inspector.showIfLink, type: 'color', defaultValue: "DimGray",},
            // Comments and LinkComments are not in any node or link data (yet), so we add them here:
            "patt": { show: Inspector.showIfLink, type: "select", choices: linkStyles },
            "fromArrow": { show: Inspector.showIfLink, defaultValue: "Circle", type: "select", choices: fromArrowHeads },
            "toArrow": { show: Inspector.showIfLink, type: "select", defaultValue: "Standard", choices: toArrowHeads },
            "dash": {
                show: Inspector.showIfLink, type: 'select',
                choices: ["Dotted Line", "Dash Line"]
            },
            "width": {
                show: Inspector.showIfLink, type: 'select',
                choices: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]
            }
        }
    });

window.inspector = inspector;

}
var PathPatterns = new go.Map('string', go.Shape);

function definePathPattern(name, geostr, color, width, cap) {
if (typeof name !== 'string' || typeof geostr !== 'string') throw new Error("invalid name or geometry string argument: " + name + " " + geostr);
if (color === undefined) color = "black";
if (width === undefined) width = 1;
if (cap === undefined) cap = "square";
PathPatterns.add(name,
$(go.Shape,
{
geometryString: geostr,
fill: "transparent",
stroke: color,
strokeWidth: width,
strokeCap: cap
}
));
}

Posts: 2

Participants: 2

Read full topic