Hi all, I’m trying to get an svg with multiple paths to render but am struggling a bit.
My set up is as follows:
Panel
– figure (data binding)
– stroke (data binding)
…
– itemArray (an SVG)
---- svg path 1
---- svg path 2… etc
My itemArray looks like
new go.Binding("itemArray", "", function (data) {
return renderSvg(data.svgIcon);
})
and renderSvg is pretty much the tiger example, and I have it returning an array of go.Shape()s. but in my console I see No item template Panel found for category "" on Panel(Position)#957 and “Shape(None)” on my canvas. The template should be the shape(s) returned, I believe. But where/how do I set that?
Sure. Really just concerned with the bottom of the first code block, and if I am returning renderSvg correctly.
$(
go.Panel,
go.Panel.Position,
$(go.Shape, "RoundedRectangle", {
fill: "transparent",
width: NODE_SIZE + BOUNDING_BOX_EXTRA_WIDTH,
height: NODE_SIZE + BOUNDING_BOX_EXTRA_HEIGHT,
stroke: null,
position: new go.Point(
-(BOUNDING_BOX_EXTRA_WIDTH / 2),
-(BOUNDING_BOX_EXTRA_HEIGHT / 2)
),
}),
$(go.Shape, new go.Binding("figure", "", function(data) {
if (data.hasExperienceType)
return "RoundedRectangle";
else
return "Circle";
}),
new go.Binding("fill", "", function(data) {
if (data.nowIcon)
globalData = data.nowIcon;
if (data.hasExperienceType && data.color)
return data.color;
else
return defaultNodeFill;
}),
new go.Binding("stroke", "", function(data) {
if (data.isSelected)
return colorPrimary;
if (data.color)
return go.Brush.darkenBy(data.color, .4);
else
return defaultNodeBorderColor;
}),
new go.Binding("strokeWidth", "", function(data) {
if (data.isSelected)
return 2;
else
return 1;
}),
{
name: "MAIN_NODE_SHAPE",
width: NODE_SIZE,
height: NODE_SIZE,
position: new go.Point(0, 0)
}),
new go.Binding("itemArray", '', function(data) {
return renderSvg(data.nowIcon);
}, {
itemTemplate: '' //something ??
})
in rendersvg function:
function renderSvg(svgData) {
const parsedSvg = new DOMParser().parseFromString(svgData, "image/svg+xml");
const paths = parsedSvg.getElementsByTagName("path");
var svgItems = [];
for (var i = 0; i < paths.length; i++) {
var path = paths[i];
var shape = new go.Shape();
var stroke = path.getAttribute("stroke");
if (typeof stroke === "string" && stroke !== "none") {
shape.stroke = stroke;
} else {
shape.stroke = null;
}
var strokewidth = parseFloat(path.getAttribute("stroke-width"));
if (!isNaN(strokewidth)) shape.strokeWidth = strokewidth;
var id = path.getAttribute("id");
if (typeof id === "string") shape.name = id;
var fill = path.getAttribute("fill");
if (typeof fill === "string") {
shape.fill = (fill === "none") ? null : fill;
}
// convert the path data string into a go.Geometry
var data = path.getAttribute("d");
if (typeof data === "string") shape.geometry = go.Geometry.parse(data, true);
svgItems.push(shape);
}
return svgItems; // an array of shapes with the geometry data
}