Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic Example Needed: Custom Drag&Drop icon (Read 3429 times)
LuckyWolf19
YaBB Newbies
*
Offline


I love YaBB 1G - SP1!

Posts: 11
Joined: Apr 13th, 2007
Example Needed: Custom Drag&Drop icon
Apr 15th, 2007 at 2:02pm
Print Post  
Hi MindFusion,
I am evaluating the FlowChart.NET component and have been through 4 other controls which could not do what we wanted so far. Can you please post an example of how to create a custom drag and drop icon when dragging something in from another control (ie treeview).

The samples provided have a good one which could used this. It is called the "FlowCharter" sample.

Thanks,

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


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Example Needed: Custom Drag&Drop icon
Reply #1 - Apr 16th, 2007 at 6:52am
Print Post  
Hi Scott,

We could not find a way to create a Cursor object dynamically, but it is possible to draw the shape while dragging as shown below. This is the modified OnDragOver method of the Flowchart example:

Code
Select All
private void FlowChart_OnDragOver(object sender, System.Windows.Forms.DragEventArgs e)
{
	if(e.Data.GetDataPresent(NodeDragItem._GetType()))
	{
		// repaint the background
		_flowChart.Refresh();

		// draw the dragged shape
		NodeDragItem sdi = (NodeDragItem)e.Data.GetData(NodeDragItem._GetType());
		Graphics graphics = _flowChart.CreateGraphics();
		Box b = new Box(_flowChart);
		b.Style = BoxStyle.Shape;
		b.Shape = _nodes[sdi.Index].Template;
		Point p = _flowChart.PointToClient(new Point(e.X, e.Y));
		b.BoundingRect = new RectangleF(p.X, p.Y, 32, 32);
		b.Draw(graphics, false);
		graphics.Dispose();

		e.Effect = DragDropEffects.Copy;
	}
	else
	{
		e.Effect = DragDropEffects.None;
	}
}
 



This can be optimized a bit by creating the temporary box in the DragEnter event handler. To stop the flicker, handle the Paint event and draw the dragged shape from there, and only call Invalidate from the Drag handler.

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


I love YaBB 1G - SP1!

Posts: 11
Joined: Apr 13th, 2007
Re: Example Needed: Custom Drag&Drop icon
Reply #2 - Apr 16th, 2007 at 11:47am
Print Post  
Stoyan,

Thanks for the wonderful help. Just a quick question. What is the NodeDragItem? Is this being set in the OnEnter event?

What is the _nodes? This looks like a private variable? Is this the parent node?

Thanks again Stoyan.
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Example Needed: Custom Drag&Drop icon
Reply #3 - Apr 16th, 2007 at 11:53am
Print Post  
Hello Scott,

NodeDragItem is a class defined in the Flowcharter example. Its instances are used as drag-and-drop data objects, i.e. they are passed as data to the DoDragDrop method. It should be accessible in the DragEnter event too, passed as an argument through the same DragEventArgs object as in DragOver.

_nodes is an array of ShapeTemplate objects used in the Flowcharter, the ones shown in the list box there.

Stoyan
  
Back to top
 
IP Logged
 
LuckyWolf19
YaBB Newbies
*
Offline


I love YaBB 1G - SP1!

Posts: 11
Joined: Apr 13th, 2007
Re: Example Needed: Custom Drag&Drop icon
Reply #4 - Apr 16th, 2007 at 12:18pm
Print Post  
Stoyan,

Ahhh, duhh. I guess I should have figured that out since I asked for it in the sample application.

The code you provided is wonderful and works great. I need for this to work with host .NET controls, so I will test that out next.

With great service like this, sign me up for a PRO copy of the component.

Thanks again,

Scott Peal
  
Back to top
 
IP Logged
 
LuckyWolf19
YaBB Newbies
*
Offline


I love YaBB 1G - SP1!

Posts: 11
Joined: Apr 13th, 2007
Re: Example Needed: Custom Drag&Drop icon
Reply #5 - Apr 16th, 2007 at 12:30pm
Print Post  
Hi Stoyan,

I changed this line to allow the dragged shape to match the actual shape, however, the shape sizes still do not match up. Any thoughts?

Code
Select All
b.BoundingRect = new RectangleF(p.X, p.Y, _nodes[sdi.Index].Template.ImageRectangle.Width, _nodes[sdi.Index].Template.ImageRectangle.Height);

 

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


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Example Needed: Custom Drag&Drop icon
Reply #6 - Apr 16th, 2007 at 12:46pm
Print Post  
Hi Scott,

The drawing code above works in pixel units, while the actual box will be measured in millimeters (by default) once it is created. You could use the DocToClient method to convert from the millimeter size to pixel size.

That code will not work for ControlHost nodes, because the hosted controls paint themselves in their own windows. Instead, you could create a ControlHost in the DragEnter handler, update its position in DragOver, and either delete it or leave it be when DragDrop is raised. The same should work for Box nodes too.

Stoyan
  
Back to top
 
IP Logged
 
LuckyWolf19
YaBB Newbies
*
Offline


I love YaBB 1G - SP1!

Posts: 11
Joined: Apr 13th, 2007
Re: Example Needed: Custom Drag&Drop icon
Reply #7 - Apr 16th, 2007 at 12:55pm
Print Post  
I have modified the code you provided to simulate a hosted control creation. I realize that this is not the final look of the code, but was only a test. I wanted to simulate a .NET windows form textbox located inside a FormChart hosted control. When you run this code, the drag image stays at the 0,0 position and the textbox is not visable.

I commented out the b.BoundingRect as this seemed to be redundant for the ControlHost.

Any suggestions?



Code
Select All
private void FlowChart_OnDragOver(object sender, System.Windows.Forms.DragEventArgs e)


{
            if (e.Data.GetDataPresent(NodeDragItem._GetType()))
            {
                // repaint the background
                _flowChart.Refresh();

                // draw the dragged shape
                //NodeDragItem sdi = (NodeDragItem)e.Data.GetData(NodeDragItem._GetType());
                Graphics graphics = _flowChart.CreateGraphics();
                //Box b = new Box(_flowChart);
                //b.Style = BoxStyle.Shape;
                //b.Shape = _nodes[sdi.Index].Template;  //Shape being set to match the dragged shaope here

                Point p = _flowChart.PointToClient(new Point(e.X, e.Y));

                //Added for a test
                TextBox tb = new TextBox();
                tb.Text = "Hello World";
                tb.Width = 150;
                //tb.Enabled = false;
                PointF tbPoint = _flowChart.ClientToDoc(new Point(tb.Width, tb.Height));

                //Added for a test
                ControlHost b = _flowChart.CreateControlHost(p.X, p.Y, Convert.ToInt32(tbPoint.X), Convert.ToInt32(tbPoint.Y));
                b.Tag = 0;
                b.Control = tb;
                b.AllowIncomingArrows = false;
                b.AllowOutgoingArrows = false;

                //b.BoundingRect = new RectangleF(p.X, p.Y, _nodes[sdi.Index].Template.ImageRectangle.Width, _nodes[sdi.Index].Template.ImageRectangle.Height);
                b.Draw(graphics, false);
                graphics.Dispose();

                e.Effect = DragDropEffects.Copy;
            }
            else
            {
                e.Effect = DragDropEffects.None;
            }


}
 

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


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Example Needed: Custom Drag&Drop icon
Reply #8 - Apr 16th, 2007 at 1:11pm
Print Post  
CreateControlHost expects document coordinates (millimeters by default), so you will need one additional conversion. After the

Point p = _flowChart.PointToClient(new Point(e.X, e.Y));

line add

PointF docPt = _flowChart.ClientToDoc(p);

and then create the host node at docPt.

Stoyan
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint