Page Index Toggle Pages: [1] 2  Send TopicPrint
Very Hot Topic (More than 25 Replies) How to create Lane node with text area/label and manipulate it (canvas mode)? (Read 17875 times)
CrushJelly
Junior Member
**
Offline


I Love MindFusion!

Posts: 59
Joined: Oct 20th, 2016
How to create Lane node with text area/label and manipulate it (canvas mode)?
Oct 31st, 2016 at 2:14pm
Print Post  
I am making my own Swim lane node, the swim lane node should have editable with the vertical textArea/label.

I've created my own shape library with Shape that has text area, but
how do I edit this area?,
is there source code sample for this?,
do I need to use something different to create this text area?,
how can I adjust text angle?,
how can I make ShapeNode's text editable? (any node)


PS. I'm including image what it supposed to look like and where the text should go.
  

Lane.PNG ( 8 KB | 177 Downloads )
Lane.PNG
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: How to create Lane node with text area/label and manipulate it (canvas mode)?
Reply #1 - Oct 31st, 2016 at 6:39pm
Print Post  
It looks like a rotated ContainerNode, check if this will work for you -
Code
Select All
var ctr = diagram.Factory.CreateContainerNode(100, 0, 60, 200);
ctr.Caption = "Editable label";
ctr.RotationAngle = 270; 



Note that the coordinates you pass to CreateContainerNode are for the non-rotated rectangle, and RotationAngle will rotate around its center.

You can edit by setting diagramView.AllowInplaceEdit = true and double-clicking. The text area does not match the rotated rectangle though; we'll fix it for upcoming release. Alternatively instead of double-click you could call Diagram.beginEdit method from a client-side event like NodeClickedScript.

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


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: How to create Lane node with text area/label and manipulate it (canvas mode)?
Reply #2 - Nov 2nd, 2016 at 10:35am
Print Post  
This version of the script shows the edit box only over the caption-bar and considers node's rotation angle -
https://mindfusion.eu/_beta/jsdiag271.zip

If you find it too narrow that way, you can replace ContainerNode.prototype.getEditRect function with your own returning the edit box location and size you'd like to use -

Code
Select All
ContainerNode.prototype.getEditRect =
    function() { return new MindFusion.Drawing.Rect(...); }
 



Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
CrushJelly
Junior Member
**
Offline


I Love MindFusion!

Posts: 59
Joined: Oct 20th, 2016
Re: How to create Lane node with text area/label and manipulate it (canvas mode)?
Reply #3 - Nov 3rd, 2016 at 9:05am
Print Post  
Slavcho wrote on Oct 31st, 2016 at 6:39pm:
It looks like a rotated ContainerNode, check if this will work for you -
Code
Select All
var ctr = diagram.Factory.CreateContainerNode(100, 0, 60, 200);
ctr.Caption = "Editable label";
ctr.RotationAngle = 270; 



Note that the coordinates you pass to CreateContainerNode are for the non-rotated rectangle, and RotationAngle will rotate around its center.

You can edit by setting diagramView.AllowInplaceEdit = true and double-clicking. The text area does not match the rotated rectangle though; we'll fix it for upcoming release. Alternatively instead of double-click you could call Diagram.beginEdit method from a client-side event like NodeClickedScript.

Regards,
Slavcho


I created container node.
But EnableHandles doesn't work, I cant adjust containers size myself and some other properties didn't work to,

I'm including my code.


Code
Select All
 var ctr = diagramView.Diagram.Factory.CreateContainerNode(100, 0, 60, 200);
            ctr.Caption = "Editable label";
            ctr.CaptionFormat = new StringFormat() { Alignment = StringAlignment.Center }; // Doesn't work
            ctr.Foldable = false;
            ctr.RotationAngle = 270;
            ctr.AutoGrow = false; // Doesn't work
            ctr.AutoShrink = false; // Doesn't work
            ctr.EnabledHandles = AdjustmentHandles.Move; // Doesn't work
 


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


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: How to create Lane node with text area/label and manipulate it (canvas mode)?
Reply #4 - Nov 3rd, 2016 at 9:31am
Print Post  
By setting ctr.EnabledHandles = AdjustmentHandles.Move you only allow moving the node. Set ctr.EnabledHandles = AdjustmentHandles.All & ~AdjustmentHandles.Rotate to allow both moving and resizing.

Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
CrushJelly
Junior Member
**
Offline


I Love MindFusion!

Posts: 59
Joined: Oct 20th, 2016
Re: How to create Lane node with text area/label and manipulate it (canvas mode)?
Reply #5 - Nov 3rd, 2016 at 9:39am
Print Post  
Slavcho wrote on Nov 3rd, 2016 at 9:31am:
By setting ctr.EnabledHandles = AdjustmentHandles.Move you only allow moving the node. Set ctr.EnabledHandles = AdjustmentHandles.All & ~AdjustmentHandles.Rotate to allow both moving and resizing.

Regards,
Slavcho
Mindfusion


Well still no effect...(including picture of selected container)

And what about Autogrow and Shrink, and Label alignment?
  

Container.PNG ( 11 KB | 172 Downloads )
Container.PNG
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: How to create Lane node with text area/label and manipulate it (canvas mode)?
Reply #6 - Nov 3rd, 2016 at 12:06pm
Print Post  
Actually there's also the HandlesStyle property, with MoveOnly default value. Set it to another style and it should let you resize -

Code
Select All
ctr.HandlesStyle = HandlesStyle.SquareHandles;
ctr.EnabledHandles = AdjustmentHandles.All; 



Seems the AutoGrow/Shrink properties are not implemented in JS library, we'll try to add them soon. At this time you could call resizeToFitChildren method from client-side events to get similar effect.

Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
CrushJelly
Junior Member
**
Offline


I Love MindFusion!

Posts: 59
Joined: Oct 20th, 2016
Re: How to create Lane node with text area/label and manipulate it (canvas mode)?
Reply #7 - Nov 7th, 2016 at 2:43pm
Print Post  
Slavcho wrote on Nov 3rd, 2016 at 12:06pm:
Actually there's also the HandlesStyle property, with MoveOnly default value. Set it to another style and it should let you resize -

Code
Select All
ctr.HandlesStyle = HandlesStyle.SquareHandles;
ctr.EnabledHandles = AdjustmentHandles.All; 



Seems the AutoGrow/Shrink properties are not implemented in JS library, we'll try to add them soon. At this time you could call resizeToFitChildren method from client-side events to get similar effect.

Regards,
Slavcho
Mindfusion


Ok, and how to adjust alignment of label?

I've set this property, but it's not working, the text stays at the bottom (like in prev ex.):

Code
Select All
ctr.CaptionFormat = new StringFormat() { Alignment = StringAlignment.Center }; 

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


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: How to create Lane node with text area/label and manipulate it (canvas mode)?
Reply #8 - Nov 8th, 2016 at 11:55am
Print Post  
  
Back to top
 
IP Logged
 
CrushJelly
Junior Member
**
Offline


I Love MindFusion!

Posts: 59
Joined: Oct 20th, 2016
Re: How to create Lane node with text area/label and manipulate it (canvas mode)?
Reply #9 - Nov 15th, 2016 at 2:48pm
Print Post  
Slavcho wrote on Nov 8th, 2016 at 11:55am:



I try to add my custom ContainerNode to NodeListView, but when application runs there is no NodeListView, it disappears, when I turn on the browser console I see this error (see included pic.).
I checked my converter class, the serialization goes through perfectly, maybe I need to change my js class?

PS. When I prototype my custom container through ContainerNode constructor, everything works.
  

ContainerNodeProblem.png ( 28 KB | 168 Downloads )
ContainerNodeProblem.png
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: How to create Lane node with text area/label and manipulate it (canvas mode)?
Reply #10 - Nov 15th, 2016 at 3:15pm
Print Post  
Any stack-trace for this exception? I can see "params" accessed as a field in Shape and ShapeRenderer classes, which are used only by ShapeNode but not ContainerNode. Maybe verify that the JavaScript class name you pass to DiagramView.RegisterItemType refers to ContainerNode-derived class and not ShapeNode one - you might get similar exception if JavaScript ShapeNode code tries to load a Shape instance, which would not be provided by server-side ContainerNode serializer.
  
Back to top
 
IP Logged
 
CrushJelly
Junior Member
**
Offline


I Love MindFusion!

Posts: 59
Joined: Oct 20th, 2016
Re: How to create Lane node with text area/label and manipulate it (canvas mode)?
Reply #11 - Nov 15th, 2016 at 3:36pm
Print Post  
Slavcho wrote on Nov 15th, 2016 at 3:15pm:
Any stack-trace for this exception? I can see "params" accessed as a field in Shape and ShapeRenderer classes, which are used only by ShapeNode but not ContainerNode. Maybe verify that the JavaScript class name you pass to DiagramView.RegisterItemType refers to ContainerNode-derived class and not ShapeNode one - you might get similar exception if JavaScript ShapeNode code tries to load a Shape instance, which would not be provided by server-side ContainerNode serializer.



Sorry my bad.  Embarrassed
After debugging, by mistake I spotted that I forgot to register the CustomContainer class in my JS file.
Now it works.
  
Back to top
 
IP Logged
 
CrushJelly
Junior Member
**
Offline


I Love MindFusion!

Posts: 59
Joined: Oct 20th, 2016
Re: How to create Lane node with text area/label and manipulate it (canvas mode)?
Reply #12 - Nov 18th, 2016 at 7:33am
Print Post  
How to make container node Transparent?

I am now using:

Code
Select All
 new MindFusion.Drawing.SolidBrush(Color.Transparent); 



But my result is not what I expected.
  

ContainerNode.PNG ( 11 KB | 172 Downloads )
ContainerNode.PNG
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: How to create Lane node with text area/label and manipulate it (canvas mode)?
Reply #13 - Nov 18th, 2016 at 9:18am
Print Post  
Set ShadowBrush to transparent too -
Code
Select All
ctr.Brush = ctr.ShadowBrush = new MindFusion.Drawing.SolidBrush(Color.Transparent);  



or disable shadows altogether -
Code
Select All
diagram.ShadowsStyle = ShadowsStyle.None; 



Regards,
Slavcho
  
Back to top
 
IP Logged
 
CrushJelly
Junior Member
**
Offline


I Love MindFusion!

Posts: 59
Joined: Oct 20th, 2016
Re: How to create Lane node with text area/label and manipulate it (canvas mode)?
Reply #14 - Nov 18th, 2016 at 9:37am
Print Post  
Slavcho wrote on Nov 18th, 2016 at 9:18am:
Set ShadowBrush to transparent too -
Code
Select All
ctr.Brush = ctr.ShadowBrush = new MindFusion.Drawing.SolidBrush(Color.Transparent);  



or disable shadows altogether -
Code
Select All
diagram.ShadowsStyle = ShadowsStyle.None; 



Regards,
Slavcho


Cool, that works.

OK, then I got NodeListView problem, for some reason the ContainerNode box in the NodeListView appears bigger than other boxes and the whole visual view is messed up (see pic), I selected that node in the pic, the node above is normal looking.

Is there a way to fix this, or this is ContainerNode problem?
« Last Edit: Nov 28th, 2016 at 1:05pm by CrushJelly »  
Back to top
 
IP Logged
 
Page Index Toggle Pages: [1] 2 
Send TopicPrint