Modifying Diagram Draw Area

[Jeremy Kolpak]

Hello,

I am relatively new to using the Syncfusion libraries and I'm trying to work with the Diagram /MVC class. I've got 2 questions regarding this:

1) I am having trouble adapting the layout of the diagram and model to fit my needs. Ideally I want the rendered diagram to be constrained in a window, and bound to that window (allowing scroll bars for anything that exceeds the dimensions of the window). However it seems like no matter the size of the diagram or draw area the total area rendered is quite large and the actual view area (white area) is quite small. Is there a way to bind the model viewing area to a space?

2) I want to programatically generate a diagram and not just load a pre-created one from a file. I saw a forum entry on this, but a further question is are there any samples of creating a custom Model for the diagram class? I am already working with an internal graph class which represents the model in this design pattern.

Thank you!

~Jeremy

[Meera Fathima]

Hello Jeremy,

I am sorry about this delay in responding. Please find my response provided below on your queries.

1. If your intention is to make the model size to fit to its content size, you can do this by setting the Diagram.Model.SizeToContent = true. If you are placing the node outside of the diagram model bounds and you want the model size get increased automatically to fit to its node, you need to set Diagram.Model.BoundaryConstraintsEnabled to false in addition with the Model.SizeToContent setting.

2. If your intention is to create diagram programmatically, this is demonstrated in many of the diagram samples. For e.g. please refer the Diagram Samples\Symbol Design\Palette Load sample that shows to get the Symbol Palette by deserializing the Symbol Palette file and drawing the simple flow diagram programmatically.

At present we don't have any sample demonstrating about customizing the diagram model class. However you can easily do this. Below is the sample code snippet that shows how to do this.

class MyDiagram : Diagram
{
public MyDiagram()
{
}
public override Model CreateModel()
{
return new MyModel();
}
}
public class MyModel : Model
{
public MyModel()
{
this.BackgroundStyle.Type = FillStyleType.Texture;
this.BackgroundStyle.Texture = Image.FromFile("..\\..\\syncfusion.gif");
}
}

Using the above custom diagram and custom model will let you have the diagram model with the background image.

Please let me know if you have any questions. We will be glad to assist you.

Many Thanks,
Meera.

[Jeremy Kolpak]

Hi Meera,

Thank you for responding. My issue with the model is not fitting to the size of the nodes rendered, but the fact that even when nothing is rendered the diagram size is very large and does not seem to be set to fit to the size of the model. The attached picture shows how even though the model has nothing in it, the scroll bars are setup as if there were lots of content and also the model (white area) does not fill the screen.

Regarding the second question that sample is enough to get me started. Thank you,

~Jeremy
>
Hello Jeremy,

I am sorry about this delay in responding. Please find my response provided below on your queries.

1. If your intention is to make the model size to fit to its content size, you can do this by setting the Diagram.Model.SizeToContent = true. If you are placing the node outside of the diagram model bounds and you want the model size get increased automatically to fit to its node, you need to set Diagram.Model.BoundaryConstraintsEnabled to false in addition with the Model.SizeToContent setting.

2. If your intention is to create diagram programmatically, this is demonstrated in many of the diagram samples. For e.g. please refer the Diagram Samples\Symbol Design\Palette Load sample that shows to get the Symbol Palette by deserializing the Symbol Palette file and drawing the simple flow diagram programmatically.

At present we don't have any sample demonstrating about customizing the diagram model class. However you can easily do this. Below is the sample code snippet that shows how to do this.

class MyDiagram : Diagram
{
public MyDiagram()
{
}
public override Model CreateModel()
{
return new MyModel();
}
}
public class MyModel : Model
{
public MyModel()
{
this.BackgroundStyle.Type = FillStyleType.Texture;
this.BackgroundStyle.Texture = Image.FromFile("..\\..\\syncfusion.gif");
}
}

Using the above custom diagram and custom model will let you have the diagram model with the background image.

Please let me know if you have any questions. We will be glad to assist you.

Many Thanks,
Meera.


diagram_model_view.zip

[Ajish]

Hi Jeremy,

Could you please open a new direct – trac incident with subject line as Forum 62908 - Modifying Diagram Draw Area So that it would be possible for us to provide more details regarding this issue.

Thanks,
Ajish.

[Giancarlo Aguilera]

Hi,

Has this issue been resolved yet? I am also having the same problem. Please see attached screenshot. Please notice all the extra space.

Thanks

GA

Doc124.zip

[J.Nagarajan]

Hi GA,

Sorry for the inconvenience caused, This is default behavior of the diagram model. Because in our source code we have positioned the diagram model as A4 sheet style type. Please refer to the following code snippet in our source code.

private void ResetScrollPosition()
{
MeasureUnits docUnits = this.Model.MeasurementUnits;

// get model size
int nWidth = (int)Math.Round( MeasureUnitsConverter.ToPixelX( this.Model.Size.Width, docUnits ) );
int nHeight =(int)Math.Round( MeasureUnitsConverter.ToPixelX( this.Model.Size.Height/2, docUnits ) );

// update virtual bounds
m_rcVirtualBounds.Location = new PointF( -nWidth, -nHeight );
m_rcVirtualBounds.Size = new SizeF( nWidth, nHeight );

//update scroll min and max value
UpdateScrollRange();
// reset origin referance to update scroll value
this.ptScrollOriginRef = new PointF( this.Origin.X - 1, 0 );
// update scroll position to origin
UpdateScrolls( this.Origin );
}

We could not change this behavior in an application level.Please let me know if you have any questions.

Thanks,
Nagaraj