Hi,
We are using SVG images to style our nodes and have some cases where a large amount of nodes and links are drawn on the screen at the same time much like the “Virtualized Packed” extension in the GoWinForms Demo. Is there a way to, depending on zoom level, change the nodes style from a picture to a shape?
One way to do this would be to add a ViewportBoundsChanged event listener that toggles the visibility of a Shape/Picture in your node template.
_Diagram.ViewportBoundsChanged += (s, e) => {
e.Diagram.Commit((d) => {
foreach (var n in d.Nodes) {
var pic = n.FindElement("PIC");
var shp = n.FindElement("SHAPE");
if (d.Scale < .5) {
pic.Visible = false;
shp.Visible = true;
} else {
pic.Visible = true;
shp.Visible = false;
}
}
}, null);
};
// define a simple Node template
_Diagram.NodeTemplate =
new Node("Auto") // the Shape will go around the TextBlock
.Add(
new Shape("RoundedRectangle") {
StrokeWidth = 0, // no border
Fill = "white" // default fill is white
}
// Shape.Fill is bound to Node.Data.Color
.Bind("Fill", "Color"),
new Panel("Horizontal")
.Add(
new Picture("...") { Name = "PIC", Width = 40, Height = 40 },
new Shape("...") { Name = "SHAPE", Visible = false, Width = 40, Height = 40 },
new TextBlock {
Margin = 8, // some room around the text
Font = new Font("Segoe UI", 14, FontWeight.Bold),
Stroke = "#333"
}
// TextBlock.Text is bound to Node.Data.Key
.Bind("Text", "Key")
)
);
Another option would be an OfModel binding.
I’m interested in understanding exactly when you want to substitute the shape for the image. Is it determined by the minimum width or height when drawn, in pixels? Or the area?
Also, did you want to have a different shape for each image? Did you want to generate the shape automatically depending on the image?
Would it be adequate just showing a single color over the rectangular area instead of a shape with a geometry?