Home > Others

Implementation of visual workflow designer based on extjs

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞
Document directory
  • The visual workflow design manager is part of the workflow system. Implement visualized configuration of workflow activity and transfer. Generally, the workflow system involves the following aspects.
  • Subject Function
  • Designer interface effect
  • 1. Simplest scenario: two nodes on the page that can be moved.
  • 2. Drag the draw line
1. Description: The visual workflow design manager is part of the workflow system. Implement visualized configuration of workflow activity and transfer. Generally, the workflow system involves the following aspects.

1. workflow definition

2. Implementation of organizations

3. workflow authorization implementation

4. Dynamic form implementation

5. workflow engine implementation

6. Visualized workflow definition Maintenance

This article only describes the implementation of the workflow designer. The designer has many implementation methods. This article only describes the problems that need to be addressed when extjs is used.

Ii. Main Functions of the workflow designer

1. add or delete activities

2. add, delete, and transfer

3. Modify activity and transfer attributes

Designer interface effect

1. Locate the Active Node

2. Drag the rubber band to detect overlap and rebound

3. automatic and manual Line Selection

4. line offset and circle color modification

5. Grid positioning (SNAP)

6. display the process execution path.

 

III. Basic functions

The primary problem to be solved by the designer is node positioning, drag, and draw lines.

Node positioning: the active node is represented by a DIV, which is inside the icon area and text description area. Node positioning is implemented by style postion

Node dragging: implemented through the dragdrop class of extjs.

Draw line: Use the canvas flag. IE, implemented through the library provided by Google.

1. Simplest scenario: two nodes on the page that can be moved.

 

 

 
 

 
 

There are only two related codes:
 

Ext. onready (function (){
Node1 = new Ext. dd. dd ('iconmanual', 'g2 ');
Node2 = new Ext. dd. dd ('iconauto', 'g2 ');
});
2. Drag the draw line 

Make an extension for the above example. Define a node class and encapsulate related functions.
 

Defines a canvas for draw.
 

The source code is as follows:
Testgraph00.apsx <% @ page Language = "C #" autoeventwireup = "true" codefile = "testgraph01.aspx. cs" inherits = "common_workflow_testgraph01" %> 

 

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> No title page </title>
<! -- Extjs -->
<LINK rel = "stylesheet" type = "text/CSS" href = "http://www.cnblogs.com/resources/css/ext-all.css"/>
<SCRIPT type = "text/JavaScript" src = "http://www.cnblogs.com/bootstrap.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "script/excanvas. js"> </SCRIPT>
<Link href = "CSS/testgraph01.css" rel = "stylesheet" type = "text/CSS"/>
<SCRIPT type = "text/JavaScript" src = "script/excanvas. js"> </SCRIPT>
<SCRIPT src = "script/graph01.js" type = "text/JavaScript"> </SCRIPT>
 

</Head>
<Body>
<Form ID = "form1" runat = "server">
<Div id = "canvas" class = "canvas">
<Canvas id = "maingraph" width = "800" Height = "500" class = "maingraph"> </canvas>
<Canvas id = "markgraph" width = "800" Height = "500" class = "markgraph"> </canvas>
<Div align = "center" class = "iconzone" id = "iconmanual">
<Div class = "iconactmanual">
</Div>
<Div id = 'nodenamediv '>
Manual node </div>
</Div>
<Div align = "center" class = "iconzone" id = "iconauto">
<Div class = "iconactauto">
</Div>
<Div id = "nodenamediv">
Automatic node </div>
</Div>
</Div>
</Form>
</Body>
</Html>
 

Note: markgraph is not currently in use.
 

 
 

 
JS Code: var node1, node2; 

 

Ext. onready (function (){

VaR elmaingraph = ext. Get ('maingraph ');
VaR maingraph = ext. Get ('maingraph'). Dom. getcontext ('2d ');
 

Node1 = new activitynode ('iconmanual', 'g2', null, elmaingraph );
Node2 = new activitynode ('iconauto', 'g2', null, elmaingraph );
});
 

// Node class in the process, extended from Ext. dd. dd
Activitynode = function (El, sgroup, config, elmaingraph)
{
// Construct the dd
This. INIT (El, sgroup, config );
This. maingraph = ext. Get ('maingraph'). Dom. getcontext ('2d ');
This. elmaingraph = elmaingraph;

This. nodeel = ext. Get (this. getel ());

// Define constraints
This. constraworkflow = true;
This. constrainy = true;
This. Minx = This. elmaingraph. getleft ();
This. Maxx = This. elmaingraph. getright ()-This. nodeel. getwidth ();
This. miny = This. elmaingraph. gettop ();
This. Maxy = This. elmaingraph. getbottom ()-This. nodeel. getheight ();
 

};
 

Ext. Extend (activitynode, ext. dd. DD ,{
 

// Re-calculate the constraint to the Main drawing area. After resize, it is the current window area.
Recalculatenode: function (){

This. constraworkflow = true;
This. constrainy = true;
 

This. Minx = This. elmaingraph. getleft ();
This. Maxx = This. elmaingraph. getright ()-This. nodeel. getwidth ();
This. miny = This. elmaingraph. gettop ();
This. Maxy = This. elmaingraph. getbottom ()-This. nodeel. getheight ();
 

This. dimx = This. getnodexy (). X-This. elmaingraph. getleft (); // coordinate X relative to the drawing Area
This. dimy = This. getnodexy (). Y-This. elmaingraph. gettop (); // y relative to the coordinate of the drawing Area

}
// Obtain the center coordinate value and relative coordinate.
, Getcenterxy: function (){
Return {X: This. dimx, Y: This. dimy };
}
 

// Obtain the center screen coordinates of the node and return to the icon center.
, Getnodexy: function (){
VaR x = This. nodeel. getleft () + this. nodeel. getwidth ()/2;
Var y = This. nodeel. gettop () + (this. nodeel. getheight ()-12)/2; // subtract the text height
Return {X: X, Y: y };
}
// When dragging
, Ondrag: function (e ){

// Draw from another node to the current node
VaR start = This. nodeel. ID = 'iconmanual '? Node2: node1;
VaR startxy = start. getcenterxy ();
VaR endxy = This. getcenterxy ();

This. recalculatenode ();
This. maingraph. beginpath ();
This. maingraph. strokestyle = '# 0000ff ';
This. maingraph. clearrect (0, 0, this. elmaingraph. getwidth (), this. elmaingraph. getheight ());
This. maingraph. moveTo (startxy. X, startxy. y );
This. maingraph. lineto (endxy. X, endxy. y );
This. maingraph. Stroke ();
}

});
 

 

 
 

This example is just to illustrate how to locate and draw lines, so the program is relatively casual and some problems are not addressed.
 

 

========================================================== ========================================================== ======================================
 

Note: it may not be clearly written. You can click an image to demonstrate it online.

                

                    
This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or
reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or
complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

                

            


                                                                    

        

            

                

                                        

                        

                    

                

                

    

                    
Contact Us

            
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
                products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
                content of the page makes you feel confusing, please write us an email, we will handle the problem
                within 5 days after receiving your email.

            

                If you find any instances of plagiarism from the community, please send an email to:
                info-contact@alibabacloud.com
                and provide relevant evidence. A staff member will contact you within 5 working days.
            

            



                

                

            

        

    

    


    


  

    

      

        

          

            

              
A Free Trial That Lets You Build Big!

              
 Start building with 50+ products and up to 12 months usage for Elastic Compute Service 

              

                Get Started for Free
              

            

          

          

            

              
    
                
  • 
                  
    Sales Support
    
                  
    
                    1 on 1 presale consultation
                  
    
                  
    
                    Chat
                    Contact Sales
                  
    
                
    • 
                
  • 
                  
    After-Sales Support
    
                  
    
                    24/7 Technical Support
                    6 Free Tickets per Quarter
                    Faster Response
                  
    
                  
    
                    Open a Ticket
                  
    
                
    • 
                
  • 
                  
    
                  
     Alibaba Cloud offers highly flexible support services tailored to meet your exact needs. 
    
                  
    
                    Learn More
                  
    
                
    •