Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic How to: customize and set fill color of the lasso rectangle (Read 395 times)
ZM
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 3
Joined: Jan 25th, 2024
How to: customize and set fill color of the lasso rectangle
Jan 25th, 2024 at 11:46pm
Print Post  
Hi,
I'm trying to customize and change the fill color of the lasso rectangle which is displayed allowing the selection of items.

The lasso rectangle is being displayed when drawing on empty space on the canvas, with the diagram behavior set as below:

Code (Javascript)
Select All
diagram.setBehavior(Behavior.DrawLinks); 



But it seems that the default fill color of the lasso rectangle is always gray with some opacity, and the border is always solid gray.
I was wondering how to change the fill color and the border style of the lasso rectangle?
For example, I would like to set the fill color as light blue, with 20% opacity, and border style as dash pattern.

The MindFusion Diagram library version being used is 3.5.7.

Thanks in advance!
« Last Edit: Jan 26th, 2024 at 6:43am by ZM »  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3157
Joined: Oct 19th, 2005
Re: How to: customize and set fill color of the lasso rectangle
Reply #1 - Jan 26th, 2024 at 6:40am
Print Post  
Hi,

The lasso colors are hardcoded at this time. You could override drawInteraction method to change them -

Code
Select All
Diagramming.CreateSelectionController.prototype.drawInteraction = function(context /* CanvasRenderingContext2D */ ) {
	this.selectionRect.pen = 'blue';
	this.selectionRect.brush = 'rgba(200,0,0,0.5)';
	this.selectionRect.draw(context, false);
}; 



and possibly directly call CanvasRenderingContext2D methods to draw lasso representation yourself.

Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3157
Joined: Oct 19th, 2005
Re: How to: customize and set fill color of the lasso rectangle
Reply #2 - Jan 26th, 2024 at 6:44am
Print Post  
add this for dashed border -

Code
Select All
this.selectionRect.strokeDashStyle = Drawing.DashStyle.Dot; 



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


I Love MindFusion!

Posts: 3
Joined: Jan 25th, 2024
Re: How to: customize and set fill color of the lasso rectangle
Reply #3 - Jan 26th, 2024 at 7:44am
Print Post  
Thank you for the quick replies, Slavcho!

In the code snippet above, how should "this.selectionRect" be defined?

I'm currently using Diagram library version 3.5.7, and the IDE shows a typing error:
"Property 'selectionRect' does not exist on type 'CreateSelectionController'."
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3157
Joined: Oct 19th, 2005
Re: How to: customize and set fill color of the lasso rectangle
Reply #4 - Jan 26th, 2024 at 8:01am
Print Post  
It's called selectionRect in v3 too, but not listed in d.ts file there as public. You should be able to access it regardless, using 'as any' cast if you are coding in TypeScript, or possibly add it to the definitions file yourself. We have it listed in d.ts since v4 like this:

Code
Select All
/**
* @class A controller used to draw selection rectangle in the diagram.
* @augments SinglePointerController
*/
export class CreateSelectionController extends SinglePointerController {
	/**
	* Initializes a new instance of the CreateSelectionController class.
	* @constructor
	* @param {Selection} selection The selection that will be drawn by this controller.
	*/
	constructor(selection: Selection);
	selection: Selection;
	selectionRect: Rect;
	lastPosition: any;
} 



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


I Love MindFusion!

Posts: 3
Joined: Jan 25th, 2024
Re: How to: customize and set fill color of the lasso rectangle
Reply #5 - Jan 26th, 2024 at 8:40am
Print Post  
Great! It is working now.

Thanks a lot for your help!
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint