Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic Customizing Handle Style (Read 450 times)
Aman Shaikh
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 6
Joined: Nov 9th, 2023
Customizing Handle Style
Dec 21st, 2023 at 11:46am
Print Post  
I am trying to change the color of the handle styles, it currently is bright red; My code looks something like:

    const handlesStlye = new HandlesVisualStyle(diagram);
    handlesStlye.setHandleBrush("#FFFFFF");
    handlesStlye.setControlHandleBrush("#FFFFFF");
    diagram.setActiveItemHandlesStyle(handlesStlye);


I get the error:

TypeError: handlesStlye.setControlHandleBrush is not a function.

Context, I do have a custom shape node being used.

not sure, if I'm doing something wrong, any help is appreciated, thanks Smiley
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3159
Joined: Oct 19th, 2005
Re: Customizing Handle Style
Reply #1 - Dec 21st, 2023 at 12:38pm
Print Post  
Hi,

If you are on version 4+, use property assignment syntax -

Code
Select All
const handlesStlye = new HandlesVisualStyle(diagram);
handlesStlye.handleBrush = "#FFFFFF";
handlesStlye.controlHandleBrush = "#FFFFFF";
diagram.activeItemHandlesStyle = handlesStlye; 



If you are trying to change red handles, these usually show when flag in node.enabledHandles is off, and you'd need to change disabledHandlesStyle instead of activeItemHandlesStyle.

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


I Love MindFusion!

Posts: 6
Joined: Nov 9th, 2023
Re: Customizing Handle Style
Reply #2 - Jan 2nd, 2024 at 8:07am
Print Post  
Thanks @Slavcho

I'm using version 3.5.7.

You suggestion works, I can change the fill and stroke color of the Handle when the node is selected, but when i hover over the node, it's Handle fill color is gray. is there any other method to set this as well ?
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3159
Joined: Oct 19th, 2005
Re: Customizing Handle Style
Reply #3 - Jan 2nd, 2024 at 12:23pm
Print Post  
Hi Aman,

There's also a style for selected but not active node, which you can also see used in multiple selection. You can customize that through selectedItemHandlesStyle instead of activeItemHandlesStyle.

Active node is usually the last selected one, and e.g. you use it as a source when letting users align nodes from multiple selection, making them same color, etc.

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


I Love MindFusion!

Posts: 6
Joined: Nov 9th, 2023
Re: Customizing Handle Style
Reply #4 - Jan 3rd, 2024 at 11:05am
Print Post  
Thanks once again @Slavcho

I had 2 more questions

1. I realized i get  `TypeError: diagram.setDisabledItemHandlesStyle is not a function`; when i try to set setDisabledItemHandlesStyle styles. this becomes a problem when i set node.setEnabledHandles(AdjustmentHandles.Move);

context: I setEnabledHandles on the node , the handles become red, without it the setActiveItemHandlesStyle and setSelectedItemHandlesStyle get the job done, but i would like to restrict the interaction to just MOVE ( ideally Move and ResizeBottomCenter )

2. Is there a way to reduce to number of adjustment handles apart from the default selections ( Currently using SquareHandles2 ), I tried creating a custom handle using "drawAdjustmentHandles" but came across some behavior regressions, so is there any other solution apart from custom handles ?
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3159
Joined: Oct 19th, 2005
Re: Customizing Handle Style
Reply #5 - Jan 3rd, 2024 at 1:06pm
Print Post  
Hi Aman,

1. The correct property name is disabledHandlesStyle and not disabledItemHandlesStyle. In v3 the get/set functions names are get/setDisabledHandlesStyle and not get/setDisabledItemHandlesStyle.

2. You could disable some handles by clearing respective bits in node.enabledHandles property, and then set diagram.showDisabledHandles = false to hide them.

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


I Love MindFusion!

Posts: 6
Joined: Nov 9th, 2023
Re: Customizing Handle Style
Reply #6 - Jan 4th, 2024 at 12:20pm
Print Post  
Thanks once again Slavcho,

Using bit manipulation is a very cool way to alter something like this. I managed to reduce the handles.

As for disabledHandlesStyle , it shows setDisabledItemHandlesStyle in the typing file and i couldn't get it to work using disabledHandlesStyle. Thankfully I no longer need this to work, I can manage via the Selected and Active handle styles !
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3159
Joined: Oct 19th, 2005
Re: Customizing Handle Style
Reply #7 - Jan 4th, 2024 at 12:57pm
Print Post  
Right, I've checked the old TypeScript definition file jsdiag.d.ts, seems our bad. You can edit it to match correct JS name get/setDisabledHandlesStyle if you need to call these. The diagramming.d.ts from current v4.4 is correct.

Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint