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
}
));
}