(UTC)
  MindFusion Forums › Diagramming Components › JavaScript › Draw link between canvas
(Moderator: Slavcho)
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic Draw link between canvas (Read 3508 times)
Davaaron
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 42
Joined: Jul 12th, 2018
Draw link between canvas
Aug 22nd, 2018 at 10:36am
Print Post  
Hi,

I got different canvas elements beside each other. What I wanna do is being able to draw links from one canvas element A to another canvas element B. When drawing a link from A to the edge of B, a node should be created in B. But the user should not be able to draw a node within B manually.
Is this possible? Or do I need to put all my 5 canvas elements into one canvas element and draw specific areas, handlers for the specific areas, etc?
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3435
Joined: Oct 19th, 2005
Re: Draw link between canvas
Reply #1 - Aug 23rd, 2018 at 6:29am
Print Post  
Hi,

The diagram cannot draw links between different canvases. Try replacing the separate canvases with ContainerNodes or with cells in a background TableNode / swimlane grid. These won't be scrollable though, if that's what you are aiming at.

Regards,
Slavcho
  
Back to top
 
IP Logged
 
Davaaron
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 42
Joined: Jul 12th, 2018
Re: Draw link between canvas
Reply #2 - Aug 23rd, 2018 at 7:52pm
Print Post  
That's a pity. Now I have to rebuild my complete application  Embarrassed
Is there a way to set empty LaneHeader (column wise)? I need a gap between two SubHeaders. Additionally, the column boundaries should be drawn from top to bottom.
That'd be awesome Smiley
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3435
Joined: Oct 19th, 2005
Re: Draw link between canvas
Reply #3 - Aug 29th, 2018 at 8:32pm
Print Post  
Hi,

No gaps, but try hiding a column's graphics like this to show empty space between its adjacent columns -

Code
Select All
var col = grid.getColumnHeaders()[1];

// style header area
var colStyle = col.getStyle();
colStyle.setBackgroundBrush('transparent');
colStyle.setTopBorderPen('transparent');
colStyle.setBottomBorderPen('transparent');
colStyle.setLeftBorderPen('transparent');
colStyle.setRightBorderPen('transparent');

// style cells
var rngStyle = grid.get(col, null).getStyle();
rngStyle.setBackgroundBrush('transparent');
rngStyle.setTopBorderPen('transparent');
rngStyle.setBottomBorderPen('transparent');
rngStyle.setLeftBorderPen('transparent');
rngStyle.setRightBorderPen('transparent');


Regards,
Slavcho
  
Back to top
 
IP Logged
 
Davaaron
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 42
Joined: Jul 12th, 2018
Re: Draw link between canvas
Reply #4 - Aug 30th, 2018 at 7:19pm
Print Post  
Hmm... I figured out that the solution does not fit the requirements I have.

I tried adding rectangles to the canvas as a replacement for a div. The code is as follows:

Code (Javascript)
Select All
var canvas: HTMLCanvasElement = document.getElementById('diagram') as HTMLCanvasElement;
   var ctx: CanvasRenderingContext2D = canvas.getContext('2d');
    ctx.fillStyle = "#FF0000"
    ctx.fillRect(0, 0, canvas.width * 0.2, canvas.height);


But the rectangle is not shown. Is it even possible to manipúlate the canvas element without using mindfusion specific methods?

Edit: I just use ShapeNodes instead of drawing rectangles by my own. It works, but not as expected. The rectangles are ways too big.
When summing up the widths of the rectangles, then it should be the same width as the canvas' width. And the canvas' width is the same than the wrapping div's width.
Code (Java)
Select All
var firstRect= new MindFusion.Drawing.Rect(0, 0, canvas.width * 0.2, canvas.height);

Im creating the bounds as given above. The width of the first rectangle should be 1/5 of the canvas width, but in real it's like 1/3. Changing the measurement unit has an effect, but none choice gives me the expected result.
Seems like I'm doing something or do I miss a conversion?
« Last Edit: Aug 30th, 2018 at 8:30pm by Davaaron »  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3435
Joined: Oct 19th, 2005
Re: Draw link between canvas
Reply #5 - Aug 31st, 2018 at 11:59am
Print Post  
You can replace the drawBackround function if you want to draw through the Canvas drawing context API -

Code
Select All
// in measure units
Diagram.prototype.drawBackground = function ()
{
	var b = this.bounds;

	var ctx = this.context;
	ctx.save();
	ctx.transform.apply(ctx, ctx._mf_transform.matrix());
	ctx.fillStyle = "#FF0000"
	ctx.fillRect(b.x, b.y, b.width, b.height);
	ctx.restore();
};

// or in pixels
Diagram.prototype.drawBackground = function ()
{
	var ctx = this.context;
	ctx.fillStyle = "#FF0000"
	ctx.fillRect(0, 0, canvas.width, canvas.height);
};


If using nodes, note that canvas size is specified in pixels and nodes are in units. Call diagram.clientToDocLength or docToClientLength to convert between pixels / units.

Regards,
Slavcho
  
Back to top
 
IP Logged
 
Davaaron
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 42
Joined: Jul 12th, 2018
Re: Draw link between canvas
Reply #6 - Aug 31st, 2018 at 2:50pm
Print Post  
Thanks for your quick response.
Before I will try the drawBackground API (because right now I'm unsure if I can draw multiple backgrounds and I need a reference for them and I think a ShapeNode would do it), I read somewhere else here to use the suggested method clientToDocLength. The problem is, that I cannot find it. I'm using TypeScript but it the function doesn't seem to be available. Neither in the DevTools (it even shows members missing in the def.ts) nor in the online documentation.
Do you mean simply clientToDoc?

Edit: Got it. Thanks!
« Last Edit: Aug 31st, 2018 at 4:03pm by Davaaron »  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint
‹ Previous Topic | Next Topic ›
 
  « Board Index ‹ Board Top  

MindFusion Forums » Powered by YaBB 2.6.11!
YaBB Forum Software © 2000-2026. All Rights Reserved.

Valid RSS Valid XHTML Valid CSS Powered by Perl Source Forge