Build a workflow designer using Silverlight (19th)-smooth movement of the intersection of rules and activities

Source codeDownload: http://www.shareidea.net/opensource.htm

Online Demo: http://www.shareidea.net/workflow.htm

Video tutorial: http://www.shareidea.net/video/sharedesigner/sharedesigner.html

QQ: 85444465 

Series of indexes in this article:

Using Silverlight to build a workflow designer (1)

Build a workflow designer using Silverlight (2)

Using Silverlight to build a workflow designer (3)

Build a workflow designer using Silverlight (4)

Build a workflow designer using Silverlight (5)

Build a workflow designer using Silverlight (6)

Using Silverlight to build a workflow designer (7)

Using Silverlight to build a workflow designer (8)

Using Silverlight to build a workflow designer (9)

Build a workflow designer using Silverlight (10)

Build a workflow designer using Silverlight (11)

Build a workflow designer using Silverlight (12)

Build a workflow designer using Silverlight (13)

Build a workflow designer using Silverlight (14th)

Build a workflow designer using Silverlight (15th) 

Build a workflow designer using Silverlight (16)

Build a workflow designer using Silverlight (17th)

Build a workflow designer using Silverlight (18)

Build a workflow designer using Silverlight (19th)

19.1 Smooth movement of rule and activity intersections

In earlier versions, the association between rules and activities. If the active image is a rectangle or a diamond, the system only defines4Join points, respectively, in the upper and lower left, as shown in:

 

Such association settings can also be used, but they are not perfect. After improvement, the link between the two activities is now the intersection of the activities. If you drag an activity or rule, the intersection point will move smoothly, not as before.4As shown in:

 

The implementation of this function is not complex. It is only possible to analyze various relationships. The following uses the rectangular chart activity as an example to describe the corresponding ideas andCode. As shown in:

 

Now we know the starting point coordinates and the ending point sitting table, and the activity.AThe length and width of the line and activity from the start point to the end point.A. This is a very simple question about geometric calculation of the plane. We need to note that when the starting point coordinate and the ending point sit table are not at the same position (for example, the start point is in the upper left, lower left, upper right, and lower right of the end point. The formula is slightly changed. The following code describes the calculation method.

 

Code
// The angle between the start coordinate and the end coordinate (relative to the Y axis coordinate system)

Double Angle = Math. Abs (math. atan (endpoint. x - Beginpoint. X) / (Endpoint. Y - Beginpoint. y )) *   180.0   / Math. Pi );

// angle between the active length and width (relative to the Y axis)

double angel2 = math. ABS (math. atan (picturewidth / pictureheight) * 180.0 / math. pi);

// radius

double radio = pictureheight PICT Urewidth ? pictureheight / 2 : picturewidth / 2 ;

If(Angle<=Angel2)//The start point coordinate is above or below the end point coordinate.

{

If(Endpoint. Y<Beginpoint. Y)//Above

{

If(Endpoint. x<Beginpoint. X)

P.x=Endpoint. x+Math. Tan (math. Pi*Angle/ 180.0)*Radio;

Else

P.x=Endpoint. x-Math. Tan (math. Pi*Angle/ 180.0)*Radio;

P. Y=Endpoint. Y+Pictureheight/ 2;

}

Else//Below

{

If(Endpoint. x<Beginpoint. X)

P.x=Endpoint. x+Math. Tan (math. Pi*Angle/ 180.0)*Radio;

Else

P. x = endpoint. x - math. tan (math. pI * Angle / 180.0 ) * radio;

P. Y=Endpoint. Y-Pictureheight/ 2;

}

}
 

Else//Left or Right

{

If(Endpoint. x<Beginpoint. X)//On the right side

{

P.x=Endpoint. x+Picturewidth/ 2;

If (endpoint. Y beginpoint. y)

P. Y=Endpoint. Y+Math. Tan (math. Pi*(90 -Angle)/ 180.0)*Radio;

Else

P. Y=Endpoint. Y-Math. Tan (math. Pi*(90 -Angle)/ 180.0)*Radio;

}

Else//On the left side

{

P.x=Endpoint. x-Picturewidth/ 2;

If(Endpoint. Y<Beginpoint. Y)

P. Y=Endpoint. Y+Math. Tan (math. Pi*(90 -Angle)/ 180.0)*Radio;

Else

P. Y=Endpoint. Y-Math. Tan (math. Pi*(90 -Angle)/ 180.0)*Radio;

}

 

19.2 Double-click a panel to generate an activity

This feature is also recommended by netizens. Currently, you can generate an activity in either of the following ways: Click to add an activity. Button, and use the right-click menu. According to suggestions from netizens, add a new method, double-click the container panel, and generate an activity at the current position. This function is simple. It detects the double-click mouse event and generates an activity at the current mouse position. The Code is as follows:

 

Activity A = new activity (icontainer) This, activitytype. Interaction );

A. activityname = text. newactivity + nextnewactivityindex. tostring ();

Point P = E. getposition (this );

A. centerpoint = new point (p. x-This. Left, P. Y-This. Top );

This. addactivity ();