FlowChart.NET - FAQ - User Interaction
Overview   Features   Online Demo   Download   Gallery   FAQ   Forum   Online Help   Buy  

User Interaction

    Event fired when moving a shape?

    Setting the FlowChart.NET control to behave as a drop target?

    ResizeToFitItems event?

    SelectionMoved event?

    Table double click event?

    Drag & Drop from external control?

    Prevent node's text editing?

    DrawLinks behavior?

    Customising the flowchart behavior (Select and Move nodes - custom behavior)?

    Dynamic Link Anchoring?

    How to control in place editing in tables or cells?

    Scrolling and zooming a diagram using the mouse wheel?

    Move Entire Selection?

    Painting while sizing/moving?

    Click on RowHeaders?

    Maximum Links?

    Maximum Nodes?

    How to prevent users from creating cycles in the graph?

    Nodes overlapping?

    SnapToNodeBorder property of DiagramLink?

    Tables' Relations?

 

 

Q:    Is there any event raised after moving a shape? We maintain some state related to the position of the shapes in the control and need to know when they are moved?

A:   The NodeModified event is raised when moving or resizing a node. Check the AdjustmentHandle event argument to find out exactly what happened. If it is AdjustmentHandles.Move, the node has been moved.

 

back to top

 

Q:    I am trying to get the FlowChart.NET control to behave as a drop target by setting AllowDrop to true on the instance of the DiagramView control in my form. It looks like (based on the feedback from the mouse cursor) that the control is not responding as a drop target. What should I do?

A:   You must also handle the DragOver and DragDrop events:

diagramView_OnDragOver...
{
// for mouse feedback
e.Effect = DragDropEffects.Copy; 
}
 
diagramView_OnDrop...
{
//get the dragged data and apply 
//it to the diagram as you need

back to top

 

 

Q:    Can I force ResizeToFitItems each time an item is moved on the diagram?

A:   You could enable the Diagram.AutoResize property instead of calling ResizeToFitItems in response to event handlers.

back to top

 

 

Q:    The SelectionMoved event appears only to work when there are 2 or more items selected, and not for a single item. Is there another event or a property that will recognize a single object as a selection?

A:   SelectionMoved is raised only for multiple-selection. You should handle some more events, such as NodeModified, and LinkModified if you need to detect the modification of a single item.

back to top

 

 

Q:     I need to detect double clicks on a table row, however the NodeDoubleClicked event appears only to fire when the table header is clicked, and not the rows. How can I implement this when any part of the table is clicked?

A:   Handle CellDoubleClicked, it will be raised when a table cell is double clicked. Check the cell's Row property to determine which row has been clicked.

 

back to top

 

Q:    How to do drag&drop from a ListView or TreeView control to the FlowChart control?

Here is the scenario: User selects a tree node in the treeview control, and then drags it over top of the flowChart control. When dragging over the FlowChart control, the drag cursor looks like a textbox. After the drop, a text box will appear in the FlowChart control.

A:   You can do that by calling Control.DoDragDrop from the TreeView.MouseDown event handler, and creating the node in the DiagramView.DragDrop event. See the ListView in the Flowcharter sample project, and in one of the "miscellaneous" steps of the FCDemo example.

 

back to top

 

Q:    How to prevent editing the text of some nodes when AllowInplaceEdit is enabled?

A:   There is a Diagram.NodeTextEditing validation event raised when the user double-clicks a node. Set e.Cancel to true to prevent editing the text of some nodes.

 

back to top

 

Q:    I have set the Behavior property of the DiagramView object to DrawLinks, but when I drag from Node to Node, I only select the two Nodes: no link is drawn. What settings should I check that could influence this behavior?

A:   Check Diagram.AllowUnanchoredLinks and DiagramNode.AllowOutgoingLinks. If you have disabled the former, you can draw links only from nodes whose AnchorPattern is set.

 

back to top

 

Q:    I am generating diagrams with node images, and would like the user to be able to start moving nodes with a single click. In addition, the users should not be able to create new items, not resize existing ones. Should I create a custom Behavior object for this?

A:   This can be implemented by setting a few properties:

You could also implement that as a custom behavior class, where you return from the StartDraw method either
  • return new InteractionState(currentItem, 8, Action.Modify);
  • return new InteractionState(fc.Selection, -1, Action.Create);
  • return new InteractionState(fc.Selection, 8, Action.Modify);
8 is the index for the movement adjustment handle, used when the Action is set to Modify. The index is ignored when the action is Create. You can assign an instance of your Behavior-derived class to the DiagramView.CustomBehavior property.

 

back to top

 

Q:    I am looking for the simplest method to dynamically change the link anchor points on a node so that anchor is nearest to the connecting node. I don't want the links to cross over the source node if the destination node position changes.

A:   Check how links work when their Dynamic property is enabled. It will make the links change their origin and destination connection points while dragging a node around.

 

back to top

 

Q:    Is there any way to control in place text editing on per-table or per-cell basis? We have some tables that we don't want any in-place-editing and others that we only want to allow in-place editing of the cell values and not the caption...

A:   You can do that by handling the Diagram.NodeTextEditing and Diagram.CellTextEditing events. Set e.Cancel to true to prevent the user from editing the node's text.

 

back to top

 

Q:    How to scroll or to zoom the diagram using the mouse wheel?

A:   You can add support for scrolling with the mouse wheel like this:

private void Form1_Load(object sender, 
                         System.EventArgs e)

{

            diagramView.MouseWheel += 
            new MouseEventHandler(diagramView_MouseWheel);

}
 

void diagramView_MouseWheel(object sender, 
                             MouseEventArgs args)

{

            diagramView fcSender = sender as diagramView;

 

            float newScrollY = fcSender.ScrollY - args.Delta / 50;

            if (newScrollY > fcSender.DocExtents.Top)

                        fcSender.ScrollY = newScrollY;

}
This event is inherited from the Control class, but for some reason it does not appear in the event list in the IDE. You must add a handler for it manually. The handler above scrolls the document, but if you wish, you can change that to zoom in/out by altering the DiagramView.ZoomFactor property.

 

back to top

 

Q:    I want to select everything in the chart and move the selection down for a certain amount of dx and dy. Is there a way to easily move an entire selection?

A:   Moving a node also moves the link end points, so the easiest solution is to move all items in two phases. First, move all selected nodes - this also offsets the end points of the links. Next, offset all control points of all selected links, except the end points (the end points have been moved with the nodes).

 

back to top

 

Q:    I am using a ControlNode object where I have a TextEditor. How to perform painting while resizing and moving it?

A:   Windows sends WM_PAINT messages to controls only when there aren't any other messages in the message queue, so the hosted control is not repainted until you pause moving the mouse. You could force the hosted control to repaint themselves by calling their Refresh method from the NodeModifying event handler.

 

back to top

 

Q:    I divided FlowChart's area in 4 lanes. Is there any event raised upon a left-click on RowHeaders?

A:   You could handle the Clicked event and call the GetHeaderFromPoint method to find out whether some header has been clicked.

 

back to top

 

Q:     Is there a way to limit the number of links that a shape node will accept in and allow out?

A:   You can handle the LinkCreating and LinkModifying validation events and allow or prevent the operation depending on how many links are connected to a node.

 

back to top

 

Q:    Is there a way to limit the number of shape nodes of a particular type that can be added to a diagram?

A:   Handle the NodeCreating event and set e.Cancel = true if there are more than a certain number of nodes in the diagram.

 

back to top

 

Q:     How to prevent users from creating cycles in the graph?

A:   Here is an easy way to do that:

private void diagram_LinkModifying(object sender, 
          MindFusion.Diagramming.LinkValidationEventArgs e)
{
            if (e.ChangingOrigin || e.ChangingDestination)
            {
                        PathFinder finder = 
                        new PathFinder(diagram, false);
                        if (finder.FindShortestPath(
                        e.Destination, e.Origin) != null)
                                    e.Cancel = true;
            }
}

private void diagram_LinkCreating(object sender,
MindFusion.Diagramming.LinkValidationEventArgs e)
{
            PathFinder finder = 
            new PathFinder(diagram, false);
            if (finder.FindShortestPath(
            e.Destination, e.Origin) != null)
                        e.Cancel = true;
}

 

back to top

 

Q:     In my diagram, two nodes are overlapped. When I click on the overlapped area, I want that always the same node is selected. Is there a way to give a priority to a Node I want to select?

A:   Assign a bigger ZIndex value to the node that has a higher priority. Only at the time when the nodes are clicked, call GetNodesAt to find all nodes at the mouse position, and select one of them programmatically.

 

back to top

 

Q:    I want that when I move a Node, the head or base of the link connected to the node move round the border of the node, like one of the examples in FlowChart.NET Demo (Links --> Form Preservation). I set the property RetainForm to true. However, this is not enough...what is the correct property I must set?

A:   Try setting DiagramLink.Dynamic to true, that's the property that updates the link end point positions while a node is moved around. Enable RetainForm to have the positions of the intermediate control points updated too, so that the initial shape of the link is preserved. RetainForm might be ignored if AutoRoute is enabled.

 

back to top

 

Q:    How to enable the user to make more than one link from one table to another (not from the same row)?

A:   Setting Diagram.AllowLinksRepeat to true will enable that.

 

back to top

 

   
 
   
Forums: FlowChart.NET, WpfDiagram, DiagramLite, JsDiagram, MasterChart, WebChart, Planner.NET, WpfPlanner, Reporting, ReportingLite
© MindFusion Ltd. 2012