(UTC)
  The MindFusion Forums › Flow Diagramming Components › Html Canvas & JavaScript › Custom Expand/Collapse buttons
(Moderator: Slavcho)
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic Custom Expand/Collapse buttons (Read 2259 times)
Santosh
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 28
Joined: Mar 25th, 2015
Custom Expand/Collapse buttons
Aug 17th, 2015 at 6:53am
Print Post  
Hi,

How to replace the existing [+] or [-] icon for expand/collapse, with custom icons?

Also, can we place the icon on top-right corner of the node(which should expand/collapse)?
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Custom Expand/Collapse buttons
Reply #1 - Aug 17th, 2015 at 9:08am
Print Post  
Hi,

You can change the button position as shown here:
http://mindfusion.eu/Forum/YaBB.pl?num=1359379520/4#4

Drawing a bitmap image looks like this:

Code
Select All
ExpandButton.prototype.updateContent = function ()
{
	var localRect = this.getRect();
	localRect.x = localRect.y = 0;
	var image = new MindFusion.Drawing.Image(localRect);
	image.image.src = "icon1.png";
	image.loaded = true;
	this.content.push(image);
}


I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
Srinath
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 2
Joined: May 23rd, 2024
Re: Custom Expand/Collapse buttons
Reply #2 - Aug 12th, 2024 at 5:24pm
Print Post  
Hi Team, When I try to use the above logic in JS Diagramming Library, it throws "ExpandButton is undefined" error.

Am I missing anything here?

Thanks,
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3370
Joined: Oct 19th, 2005
Re: Custom Expand/Collapse buttons
Reply #3 - Aug 12th, 2024 at 10:06pm
Print Post  
Hi,

Unfortunately this class is considered internal and no longer accessible since we moved to es6 classes (the module does not export ExpandButton). For time being you can access the prototype via an instance -

Code
Select All
var temp = new ShapeNode(diagram);
temp.expandable = true;
var ExpandButton = temp.expandButton.constructor;
ExpandButton.prototype.updateContent = function ()
{
    var localRect = this.getRect();
    localRect.x = localRect.y = 0;
    var image = new MindFusion.Drawing.Image(localRect);
    image.image.src = "icon1.png";
    image.loaded = true;
    this.content.push(image);
}


We'll have in mind exporting it for next release.

Regards,
Slavcho
Mindfusion
« Last Edit: Aug 13th, 2024 at 10:36am by Slavcho »  
Back to top
 
IP Logged
 
Srinath
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 2
Joined: May 23rd, 2024
Re: Custom Expand/Collapse buttons
Reply #4 - Aug 13th, 2024 at 9:48am
Print Post  
Hi Slavcho,

Thanks for your update. It works !!

Is there a similar logic to change collapse button for shape nodes?

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


tech.support

Posts: 3370
Joined: Oct 19th, 2005
Re: Custom Expand/Collapse buttons
Reply #5 - Aug 13th, 2024 at 10:35am
Print Post  
Hi Srinath,

If you mean displaying different icons for expanded and collapsed states, try modifying the code like this -

Code
Select All
if (this.node.expanded)
    image.image.src = "collapse.png";
else
    image.image.src = "expand.png";


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


tech.support

Posts: 3370
Joined: Oct 19th, 2005
Re: Custom Expand/Collapse buttons
Reply #6 - Sep 11th, 2024 at 10:41am
Print Post  
Hi Srinath,

This version exports the ExpandButton class as public -

https://mindfusion.eu/_beta/jsdiag45.zip

Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint
‹ Previous Topic | Next Topic ›
 
  « Board Index ‹ Board Top  

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

Valid RSS Valid XHTML Valid CSS Powered by Perl Source Forge