Page Index Toggle Pages: [1] 2  Send TopicPrint
Hot Topic (More than 10 Replies) Guidance on node placement/linking (Read 15673 times)
TimNZ
Junior Member
**
Offline


I love YaBB 1G - SP1!

Posts: 60
Joined: Feb 23rd, 2009
Guidance on node placement/linking
Sep 8th, 2009 at 2:55am
Print Post  
Hi,

I am developing a DB explorer for a particular CRM package.

Users can add a table to a Diagram, TreeViewNode is used to represent the table.

By clicking on an underlined TreeViewItem, the following should happen:

1. New TreeViewNode is added to diagram representing the foreign table.

2. Link between the TreeViewItem clicked and the new Node needs to be created (Origin = item, Dest = node).
Polyline, Segment Count = 1 (e.g. straight line)

The Origin end of link should be anchored to either left or right of item in TreeViewNode, and scroll as TreeViewNode is scrolled (as per Demo app)
Dest end of link can be anchored anywhere on node boundary, ideally it will move around node (Dynamic/AutoRoute?) if origin node is moved.


3. Layout is performed (I'm thinking Spring) which keeps all existing nodes/links in same position, so only the new node is repositioned, along with any new links.

Obviously #1 is straight forward, but can I please get guidance for #2 & #3.

The idea is the diagram keeps on expanding outwards smartly in all direction as the user drills through tables.

If they click an item for a table already on the diagram, I only add a new link (keeping that tidy is another issue).

Thanks in advance

« Last Edit: Sep 8th, 2009 at 4:05am by TimNZ »  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Guidance on node placement/linking
Reply #1 - Sep 8th, 2009 at 7:40am
Print Post  
Hi,

2. You can create a link that joins a specific item with a node like this:

Code
Select All
DiagramLink link = new DiagramLink(diagram);
link.OriginConnection = new TreeViewConnectionPoint(
	clickedNode, link, false, clickedItem);
link.DestinationConnection = new TreeViewConnectionPoint(
	newNode, link, true, null);
diagram.Links.Add(link);

link.AutoRoute = false;
link.Dynamic = true;
link.Style = LinkStyle.Polyline;
link.SegmentCount = 1;
 



3. You could set LayoutTraits[SpringLayoutTraits.Frozen] for all older nodes, place the new node somewhere on the right or below them, and run a few iteration of SpringLayout.

I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
TimNZ
Junior Member
**
Offline


I love YaBB 1G - SP1!

Posts: 60
Joined: Feb 23rd, 2009
Re: Guidance on node placement/linking
Reply #2 - Sep 8th, 2009 at 1:06pm
Print Post  
Nice one Stoyan, thanks.  That gives me a good starting point.

Guess I need to think of the appropriate logic for positioning new nodes.


  
Back to top
 
IP Logged
 
TimNZ
Junior Member
**
Offline


I love YaBB 1G - SP1!

Posts: 60
Joined: Feb 23rd, 2009
Re: Guidance on node placement/linking
Reply #3 - Sep 9th, 2009 at 12:13am
Print Post  
This is my code, ArrangeAround I grabbed off here and have been playing with it.

As you can see in the video link below, the nodes overlap? (UpdateLinks does nothing at this stage)

I checked out SpringLayout example in Demo and can't see anything special, I even added a TableNode in Demo and it was positioned properly.

The 2nd video shows that SpringLayout actually appears to do nothing. I even changed the Links to be Node to Node in case the Item linking was an issue.
I'm not yet doing any logic on where to place new nodes.

I've also got a link for a serialised diagram,
Diagram.RegisterItemClass(typeof(TableNode)
http://www.enetworks.co.nz/images/SpringLayout.avi
http://www.enetworks.co.nz/images/SpringLayout2.avi

Code
Select All
        public void AddTable(ITable table, TreeViewItem sourceItem)
        {
            TableNode destNode = null;
            if (!_DiagramTables.TryGetValue(table.Name, out destNode))
            {
                destNode = new TableNode(diagram, table);
                destNode.CaptionImage = imgList.Images["Table"];
                _DiagramTables.Add(table.Name, destNode);
                diagram.Nodes.Add(destNode);
            }

            if (sourceItem != null)
            {
                TableItem sourceTableItem = sourceItem.Tag as TableItem;
                DiagramLink link = new DiagramLink(diagram);
                link.OriginConnection = new TreeViewConnectionPoint(sourceTableItem.TableNode, link, true, sourceItem);
                link.DestinationConnection = new TreeViewConnectionPoint(destNode, link, false, null);
                link.AutoRoute = false;
                link.Dynamic = true;
                link.Style = LinkStyle.Polyline;
                link.SegmentCount = 1;
                diagram.Links.Add(link);
            }

            UpdateLinks();
            ArrangeAround(diagram.Nodes[0]);
        }

        private void ArrangeAround(DiagramNode node)
        {
            // node.LayoutTraits[SpringLayoutTraits.Frozen] = true;

            SpringLayout layout = new SpringLayout(500,15f, true, true);
            layout.Anchoring = Anchoring.Reassign;
            layout.Root = node;
            layout.Arrange(diagram);

            node.LayoutTraits.Remove(SpringLayoutTraits.Frozen);
        }

 

  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Guidance on node placement/linking
Reply #4 - Sep 9th, 2009 at 6:54am
Print Post  
Loading Diagram.xml and pressing Layout! worked as expected in the project you sent me. The nodes definitely moved and did not overlap... Do you expect them arranged in some different way?
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Guidance on node placement/linking
Reply #5 - Sep 9th, 2009 at 8:15am
Print Post  
and this should fix the expand/collapse problem you have found with TreeViewNodes:
https://mindfusion.eu/_beta/fcnet532.zip

I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
TimNZ
Junior Member
**
Offline


I love YaBB 1G - SP1!

Posts: 60
Joined: Feb 23rd, 2009
Re: Guidance on node placement/linking
Reply #6 - Sep 9th, 2009 at 10:55am
Print Post  
Sorry, I was meant to send another message.

The layout *doesn't* work in my proper app though, so I will remove the diagramView and diagram and re-add to the form, perhaps I set some property preventing it from working?

Stoyo wrote on Sep 9th, 2009 at 6:54am:
Loading Diagram.xml and pressing Layout! worked as expected in the project you sent me. The nodes definitely moved and did not overlap... Do you expect them arranged in some different way?

  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Guidance on node placement/linking
Reply #7 - Sep 9th, 2009 at 11:20am
Print Post  
Do you perhaps have more than one diagram in the app? Then you might be calling Arrange on a different diagram than the visible one?
  
Back to top
 
IP Logged
 
TimNZ
Junior Member
**
Offline


I love YaBB 1G - SP1!

Posts: 60
Joined: Feb 23rd, 2009
Re: Guidance on node placement/linking
Reply #8 - Sep 9th, 2009 at 11:45am
Print Post  
Behavior = LinkTreeViews

Can create new nodes, but Link is not created when starting drawing over node.

Behavior = LinkTables works as expected.

I'm having real trouble getting things to work the same in my app versus the example project..


Stoyo wrote on Sep 9th, 2009 at 8:15am:
and this should fix the expand/collapse problem you have found with TreeViewNodes:
https://mindfusion.eu/_beta/fcnet532.zip

I hope that helps,
Stoyan

  
Back to top
 
IP Logged
 
TimNZ
Junior Member
**
Offline


I love YaBB 1G - SP1!

Posts: 60
Joined: Feb 23rd, 2009
Re: Guidance on node placement/linking
Reply #9 - Sep 9th, 2009 at 12:24pm
Print Post  
Nope, definitely not.

Check out the video here for even more weirdness.
http://www.enetworks.co.nz/images/Argh.avi

First app is proper app, note the SpringLayout doesn't work, and clicking Expand button doesn't work at all as expected.

2nd app is test app I emailed you. I load the actual diagram that is in the 1st app, and everything works fine.

The proper app is hosting Diagram in a UserControl embedded in a 3rd party tab control - any potential issues there?
My next option is to replicate the test app in proper app, i.e. embedding DIagram directly onto Main Form (can't think of anything else...)

  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Guidance on node placement/linking
Reply #10 - Sep 9th, 2009 at 12:42pm
Print Post  
Have you rebuilt the user control with the latest diagramming assemblies? I suppose if it uses older dlls and the bug with collapsed treeviewnodes is there, it might have some effect on the SpringLayout if you run it when the nodes are collapsed.
  
Back to top
 
IP Logged
 
TimNZ
Junior Member
**
Offline


I love YaBB 1G - SP1!

Posts: 60
Joined: Feb 23rd, 2009
Re: Guidance on node placement/linking
Reply #11 - Sep 9th, 2009 at 12:58pm
Print Post  
Yes, rebuilt with latest .dll

Update: This video shows me persisting the diagram to XML, then loading it back into the proper app so the same UserControl is used.

Note that the layout and Expand/Collapse works fine in the loaded diagram ( the TreeViewNode.EnableStyledText property doesn't seem to be applied on the Load).

I'm stumped.

http://www.enetworks.co.nz/images/video.avi

  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Guidance on node placement/linking
Reply #12 - Sep 9th, 2009 at 1:37pm
Print Post  
What application can I use to play these videos? My Windows Media Player can't open any of them... The custom node class you inherit from TreeViewnNode - is the code you sent us with the test project then same as what you are using in the proper project?
  
Back to top
 
IP Logged
 
TimNZ
Junior Member
**
Offline


I love YaBB 1G - SP1!

Posts: 60
Joined: Feb 23rd, 2009
Re: Guidance on node placement/linking
Reply #13 - Sep 9th, 2009 at 9:06pm
Print Post  
WMP12 (Windows 7), VLC.
Open Source MPC works much better than VLC:
http://sourceforge.net/projects/guliverkli2/
Recordings made with Camtasia

Full derived class below.

Code
Select All
    public class TableNode : TreeViewNode
    {
        protected override void SaveToXml(System.Xml.XmlElement xmlElement, XmlPersistContext context)
        {

            base.SaveToXml(xmlElement, context);

        }

        public TableNode(Diagram diagram) : base(diagram)
        {
        }
        public TableNode(Diagram diagram, ITable table)
            : base(diagram)
        {
            Caption = String.Format("{0} (Table)",table.Name);
            CaptionHeight = 5;
            EnableStyledText = true;
            Expandable = true;
            Tag = table;
            Font = new Font("Tahoma", 8, FontStyle.Regular);
            ConnectionStyle = TreeViewConnectionStyle.Node;
            // Fields
            TreeViewItem fieldsItem = new TreeViewItem("Fields") { LabelFont = new Font(Font, FontStyle.Bold), Height = 4 };
            RootItems.Add(fieldsItem);
            foreach (TableField field in table.Fields)
            {
                TreeViewItem fieldItem = new TreeViewItem(field.FieldName);
                fieldItem.LabelFont = new Font(Font, FontStyle.Regular);
                fieldItem.Height = 4;
                fieldItem.Tag = new TableItem() { Field = field, TableNode = this };
                if (field.ForeignTable != null)
                    fieldItem.Label = String.Format("<u>{0}</u>", field.FieldName);
                fieldsItem.Children.Add(fieldItem);
            }

            // Secondaries
            TreeViewItem secondariesItem = new TreeViewItem("Secondaries") { LabelFont = new Font(Font, FontStyle.Bold), Height = 4 };
            RootItems.Add(secondariesItem);
            foreach (TableField field in table.LinkedFromFields)
            {
                TreeViewItem secondaryItem = new TreeViewItem(field.FieldName);
                secondaryItem.LabelFont = new Font(Font, FontStyle.Regular);
                secondaryItem.Height = 4;
                secondaryItem.Tag = new TableItem() { Field = field, TableNode = this };
                secondaryItem.Label = String.Format("<u>{0}</u>", String.Format("{0} - {1}", field.Table.Name, field.Label));
                secondariesItem.Children.Add(secondaryItem);
            }

            Resize(ResizeMethod.AllFieldsAndExpand);
            Resize(Bounds.Width, 80);
        }

        private void Resize(ResizeMethod resizeMethod)
        {
            float newHeight = 80;
            float newWidth = 80;

            switch (resizeMethod)
            {
                case ResizeMethod.AllFieldsAndExpand:
                    ResizeToFitText();
                    return;
                case ResizeMethod.DefaultSize:
                    break;
            }

            Resize(newWidth, newHeight);
            Bounds = new RectangleF(Bounds.X, Bounds.Y, newWidth, newHeight);
        }

        protected override void OnClick(MouseButton mouseButton, PointF mousePosition)
        {
            base.OnClick(mouseButton, mousePosition);

        }


    }
 


« Last Edit: Sep 9th, 2009 at 10:12pm by TimNZ »  
Back to top
 
IP Logged
 
TimNZ
Junior Member
**
Offline


I love YaBB 1G - SP1!

Posts: 60
Joined: Feb 23rd, 2009
Re: Guidance on node placement/linking
Reply #14 - Sep 10th, 2009 at 8:12am
Print Post  
Tried just adding dummy/empty TreeViewNodes, and on NodeClicked adding a new TreeViewNode to the diagram, and linking the new node to the clicked node.

Still the same problem.

So, I've replaced TreeViewNode with your TableNode and everything works fine, as expected, so it's TreeViewNode specific.

Only programmtically added TreeViewNodes are
affected. I loaded a diagram from XML, everything worked, then programatically added another TreeView node and linked to a loaded node, and it is only that programatically added node that doesn't move when doing the Layout, as well as having the Expand/Collapse issue.

That's why the test app I emailed was working fine.

Seperate query:
How can I detect the Expand/Collapse button was clicked in Diagram.MouseClick?
Diagram.GetNodeAt returns null when the Expand button is clicked, and I want to do something in MouseClick if empty space is clicked with left mouse button.

Thanks ,
Tim
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: [1] 2 
Send TopicPrint