Hi i am new in using your libraries . I just saw that tutorial:
https://mindfusion.eu/blog/javascript-database-designer-with-sql-generator/

and i want to stretch the canvas from this state:
https://i.ibb.co/4KnXyJb/image.png

To this state:
https://i.ibb.co/GHXjg05/image.png

but after 2 days i am still not able to do this...
I was able to stretch the canvas halfway through the screen by manipulating css pixels. This canvas with that diagram is some special... It wont move more than half of the screen.


Canvas code:

<div style="position: absolute; width: 100%; height: 100%; overflow: auto;">
	<canvas id="diagram" width="2100" height="2100">
	This page requires a browser that supports HTML 5 Canvas element.
	</canvas>
</div> 

Guys can you give me a tip how to do this properly, please? Maybe some example... I am so confuse

I also attach a working example to you, of course you can also download it from the article I mentioned earlier.

Thanks for the tip and example Slavcho, but there is a problem. This "setBounds" method is not available in the Diagram class. It is in another class called DiagramNode. This is my code responsible for creating the diagram and hooking it under canvas.

var Diagram = MindFusion.Diagramming.Diagram;
var TableNode = MindFusion.Diagramming.TableNode;
var DiagramLink = MindFusion.Diagramming.DiagramLink;
var Behavior = MindFusion.Diagramming.Behavior;
var Events = MindFusion.Diagramming.Events;
var Theme = MindFusion.Diagramming.Theme;
var Style = MindFusion.Diagramming.Style;
var ColumnStyle = MindFusion.Diagramming.ColumnStyle;
var ConnectionStyle = MindFusion.Diagramming.ConnectionStyle;
var ArrayList = MindFusion.Collections.ArrayList;
var AbstractionLayer = MindFusion.AbstractionLayer;


var diagram;
var tableCount = 0, rowClicked = -1;
var tblClicked = null, currentLink = null;
var addRowDialog = null, addRowForm = null, addRowName = null, addRowType = null;
var editRowDialog = null, editRowForm = null, editRowName = null, editRowType = null;
var renameTableDialog = null, renameTableForm = null, renameTableCaption = null;
var infoDialog = null, infoText = null;
var btnAddRow, btnEditRow, btnDeleteRow, btnRenameTable, btnInfo;

$(document).ready(function () {
	// create a Diagram component that wraps the "diagram" canvas
	diagram = MindFusion.AbstractionLayer.createControl(Diagram, null, null, null, $("#diagram")[0]);

	// set some Diagram properties.
	diagram.setBehavior(Behavior.LinkTables);
	diagram.setAllowSelfLoops(false);
	diagram.setBackBrush('#3e4349');
	diagram.setLinkHeadShape('Triangle');
	diagram.setLinkHeadShapeSize(4);
	diagram.getSelection().allowMultipleSelection = false;

	//diagram.setAllowInplaceEdit(true);

	// set the Diagram style.
	var theme = new Theme();

	var tableNodeStyle = new Style();
	tableNodeStyle.setBrush({ type: 'LinearGradientBrush', color1: 'rgb(170,194,255)', color2: 'rgb(125,160,204)', angle: 30 });
	tableNodeStyle.setTextColor({ type: 'SolidBrush', color: 'rgb(0,0,0)' });
	tableNodeStyle.setStroke('rgb(255,255,255)');

	var linkStyle = new Style();
	linkStyle.setBrush({ type: 'SolidBrush', color: 'rgb(0, 52, 102)' });
	linkStyle.setStroke('rgb(192, 192, 192)');

	theme.styles['std:TableNode'] = tableNodeStyle;
	theme.styles['std:DiagramLink'] = linkStyle;

	diagram.setTheme(theme);

 

My JavaScript skills are bad, I took that code from articule on blog. That is why i can't write new code using DiagramNode. Is there any way to change this size using method from class Diagram?

Maybe here i can do this?

	// create a Diagram component that wraps the "diagram" canvas
	diagram = MindFusion.AbstractionLayer.createControl(Diagram, null, null, null, $("#diagram")[0]); 

Can someone explain what parametres of this method "createControl" doing?

Regards,
poor student