1. #1
    Sencha User
    Join Date
    Aug 2012
    Posts
    3
    Vote Rating
    3
    lforner is on a distinguished road

      3  

    Default ExtJS 4.1 DAG (trees) Drawer

    ExtJS 4.1 DAG (trees) Drawer


    Hello,

    I developed a component to draw a specific type of trees called Directed Acyclic Graphs (DAG), using the new Draw package.

    It extends drawComponent and contains Sprites, so it's really easy to handle.

    Please see my SenchaMarket page or my GitHub page if you want to download or even to see examples.
    Last edited by lforner; 19 Aug 2012 at 11:04 PM. Reason: Add Market Link

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,927
    Vote Rating
    443
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Very nice .. Thank you for the contribution.

    Scott.

  3. #3
    Sencha User
    Join Date
    Aug 2012
    Posts
    3
    Vote Rating
    3
    lforner is on a distinguished road

      0  

    Default


    You're welcome.
    Even if I'm not sure that a lot of people need this tool, but I needed !

  4. #4
    Sencha User
    Join Date
    May 2012
    Posts
    1
    Vote Rating
    0
    yjmade is on a distinguished road

      0  

    Default


    Very excellent work.It help me solved a huge problem and been looked for it a long time.But I really need this extension has the ability to create or edit the graph with Drag&Drop capability,would you please try to implement it.Also,I need the nodes could be multi-status(distinguished by frame color or bg color,at least three status,not just normal or highlighted).Thanks

  5. #5
    Sencha User
    Join Date
    Jun 2008
    Posts
    37
    Vote Rating
    0
    Psychokrameur is on a distinguished road

      0  

    Default At least one more user !

    At least one more user !


    Hi lforner,

    Thanks for developping this !

    I'm just begining to try working with this but really, I'm very happy that someone did it!
    Sure that it while be time saving for me.

    Best Regards

  6. #6
    Sencha User
    Join Date
    Aug 2012
    Posts
    3
    Vote Rating
    3
    lforner is on a distinguished road

      0  

    Default


    Hi,

    I'm happy to see that helps some people, but I made this during an internship and I'm sorry to say that I've not enough time to keep on developing this by now... I hope some charitable guys will help you yjmade

  7. #7
    Sencha User GraemeBryce's Avatar
    Join Date
    Sep 2007
    Location
    Scotland
    Posts
    89
    Vote Rating
    0
    GraemeBryce is on a distinguished road

      0  

    Default Its gone!

    Its gone!


    Hi

    This component and the GIThub page appear to have disappeared.

    Will they be restored? Looks like is is/was a very interesting component

  8. #8
    Sencha User
    Join Date
    Oct 2011
    Posts
    1
    Vote Rating
    0
    tompehrs is on a distinguished road

      0  

    Default


    Thank you for your work.

    Bryce: it's moved: https://github.com/kforner/extjs-dag-drawer

  9. #9
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    4
    Vote Rating
    0
    fei2012 is on a distinguished road

      0  

    Default Circular transitions

    Circular transitions


    Kforner,

    Thanks for developing this excellent DAG library! We spent quite a bit of effort researching on the Internet to find a suitable flowchart layout generator engine including yours, GraphVis, JSplumb, dracula, js-graphi-it and js-file. So far yours is the cleanest, easiest to use and most visually appealing.

    However, upon closer testing, we found that DAG drawer crashes if there are any state transitions that are circular. For example, A->B->C is fine, but if A->B->C->A, then the drawer will just hang and crash.

    Here's the sample data that works:

    var nodes = {
    '1':{'link':'javascript:alert(\"Start\")','label': 'Start'},
    '2':{'link':'javascript:alert(\"Phone1\")','label': 'Phone 1',"highlighted":1},
    '3':{'link':'javascript:alert(\"Phone2\")','label': 'Phone 2'},
    '7':{'link':'javascript:alert(\"InPerson\")','label': 'In Person'},
    '4':{'link':'javascript:alert(\"Reject\")','label': 'Reject'},
    '6':{'link':'javascript:alert(\"Accept\")','label': 'Accept'},
    '5':{'link':'javascript:alert(\"Stop\")','label': 'Stop'}
    };
    var edges = [ [1,2],[2,3],[2,4],[4,5],[3,7],[3,4],[6,5],[7,6],[7,4] ];

    var dag = {'nodes':nodes, 'edges':edges};


    Here's the sample data that stops working:

    var nodes = {
    '1':{'link':'javascript:alert(\"Start\")','label': 'Start'},
    '2':{'link':'javascript:alert(\"Phone1\")','label': 'Phone 1',"highlighted":1},
    '3':{'link':'javascript:alert(\"Phone2\")','label': 'Phone 2'},
    '7':{'link':'javascript:alert(\"InPerson\")','label': 'In Person'},
    '4':{'link':'javascript:alert(\"Reject\")','label': 'Reject'},
    '6':{'link':'javascript:alert(\"Accept\")','label': 'Accept'},
    '5':{'link':'javascript:alert(\"Stop\")','label': 'Stop'}
    };
    var edges = [ [1,2],[2,3],[2,4],[4,5],[3,7],[3,4],[6,5],[7,6],[7,2] ];


    We want to use your DAG Drawer to represent workflow diagrams. It is very important to be able to support circular transitions because workflows in real life involve branching and looping.

    Could you please try my sample data and see if you can fix this issue? Also, could you please tell us what layout algorithm did you implement?

    Thank you ver much!

    Regards, Fei

  10. #10
    Sencha User
    Join Date
    Jun 2008
    Posts
    37
    Vote Rating
    0
    Psychokrameur is on a distinguished road

      0  

    Default


    Hi Fei,

    According the documentation, the is "normal" as DAG is actually Directed Acyclic Graphs (i.e. oriented graphs without cycles).

    And for info, I used to exchange some message with lformer few months ago and he tell he did this extension during an internship, and he do not really intend to maintain/improv this... unfortunatly.

    If you make some improvement or find a suitable lib. to draw your workflow, please, share it! I'm looking for it also.

    I found D3.js intersting and powerfull but much more complicated to implement...

    Best Regards
    PsychoKrameur

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi