1. © 2005 by International Business Machines; made available under the EPL v1.0 | February 28, 2005 | Graphical Editing Framework Randy Hudson Pratik Shah IBM Rational Software

2. Graphical Editing Framework | © 2005 by International Business Machines; made available under the EPL v1.0 Agenda  Introduction  Shortest Path Connection Routing  New EMF Diagram example  WYSIWYG Text Editing  Get Involved  Q&A

3. Graphical Editing Framework | © 2005 by International Business Machines; made available under the EPL v1.0 What problems does GEF solve?  Display a Model graphically  Allow the User to interact with that model  Process user input from Mouse & Keyboard  Interpret that input  Provide hooks for updating the model  Make it undo/redo-able  Provide useful Workbench function  Actions and Menus  Toolbars, Contributions  Keybindings  Where Can I use GEF?  EditorParts, Views  Anywhere in the Workbench

4. Graphical Editing Framework | © 2005 by International Business Machines; made available under the EPL v1.0 Introduction  Demo of GEF-based applications

5. Graphical Editing Framework | © 2005 by International Business Machines; made available under the EPL v1.0 The Shortest Path Problem  Maintaining manual bendpoints is a burden on the User  Requirements:  Connections should automatically avoid nodes  Must perform well, especially interactively  Some nodes cannot be avoided  Must support manual bendpoints  Approach:  Build on existing research for single-path cases  Reduced visibility graph  Naïve implementation: O(n 3 )  Dijkstra’s algorithm

6. Graphical Editing Framework | © 2005 by International Business Machines; made available under the EPL v1.0 Shortest Path Routing S E

7. Graphical Editing Framework | © 2005 by International Business Machines; made available under the EPL v1.0 Reduced Visibility Graph S E

8. Graphical Editing Framework | © 2005 by International Business Machines; made available under the EPL v1.0 2 4 3 5 1 Incremental Generation S E Queued: 1 Processed: 1)Try to add a segment 2)Hit an unknown obstacle, stop and queue that obstacle 3)Hit known obstacle, throw out segment

9. Graphical Editing Framework | © 2005 by International Business Machines; made available under the EPL v1.0 2 4 3 5 1 Incremental Generation S E Queued: 2, 3 Processed: 1 4)Generate segments for next queued obstacle 5)Repeat with each segment

10. Graphical Editing Framework | © 2005 by International Business Machines; made available under the EPL v1.0 2 4 3 5 1 Incremental Generation S E Queued: 3, 4 Processed: 1, 2

11. Graphical Editing Framework | © 2005 by International Business Machines; made available under the EPL v1.0 2 4 3 5 1 6 Be Optimistic S E Queued: 3, 4 Processed: 1, 2

12. Graphical Editing Framework | © 2005 by International Business Machines; made available under the EPL v1.0 Optimistic/Incremental Gains S E

13. Graphical Editing Framework | © 2005 by International Business Machines; made available under the EPL v1.0 2 4 3 5 1 Optimistic Visibility Graph S E

14. Graphical Editing Framework | © 2005 by International Business Machines; made available under the EPL v1.0 Find Path Using Dijkstra’s S E  If end is not reachable, relax or remove Oval

15. Graphical Editing Framework | © 2005 by International Business Machines; made available under the EPL v1.0 Routing multiple paths A 2 B 1 C 3  Paths appear to converge or cross  Offset each path a different amount  Isn’t order important?  Are offset segments still “visible”?

16. Graphical Editing Framework | © 2005 by International Business Machines; made available under the EPL v1.0 Intersections Introduced by Offsetting A 2 B 1 C 3  Test fuzzy segments against other deformed obstacles

17. Graphical Editing Framework | © 2005 by International Business Machines; made available under the EPL v1.0 Routing Multiple Paths A 2 B 1 C 3  Divide segments by inserting the intersecting vertices  Update the obstacles and segments

18. Graphical Editing Framework | © 2005 by International Business Machines; made available under the EPL v1.0 Augmented Shortest Path A 2 B 1 C 3  Repeat a few times  Or until no more changes

19. Graphical Editing Framework | © 2005 by International Business Machines; made available under the EPL v1.0 Determining Path Order for Offsets A 2 1 C 3  Walk each path start to end  Label vertices IN or OUT  Do any paths you touched next  Resolve labeling conflicts IN OUT B IN

20. Graphical Editing Framework | © 2005 by International Business Machines; made available under the EPL v1.0 Topologically Sort all Paths 2 1 3  Visit each vertex of each path  Compare angles of remaining paths  If angle >=, path comes later  If <, path must come before current  Offset IN inside-out, OUT outside-in A B C

21. Graphical Editing Framework | © 2005 by International Business Machines; made available under the EPL v1.0 Incremental Updating Yes, we have that

22. Graphical Editing Framework | © 2005 by International Business Machines; made available under the EPL v1.0 EDiagram Example  Goals:  Demonstrate “business” and “view” model separation  Experience EMF+GEF integration first-hand  Identify new functionality that can be added to GEF  Provide community with graphical, EPL, ecore schema editor  org.eclipse.gef.examples.ediagram  Requires EMF 2.0  Load from CVS

23. Graphical Editing Framework | © 2005 by International Business Machines; made available under the EPL v1.0 Business and View Model Separation  my.ediagram  View Model  Graphical Information  A graphical diagram  Refers to EPackages in one or more ecore files  Contains views of elements in the schema  myschema.ecore  Business Model  Semantic information  The schema  Does not refer to the diagram  Defines packages, classes, etc.

24. Graphical Editing Framework | © 2005 by International Business Machines; made available under the EPL v1.0

25. Features  Outline displays business model  Create new items using the Palette OR  DND existing from outline view  Graphically edit inheritance/references  Sticky Notes for documentation  Properties View Support

26. Graphical Editing Framework | © 2005 by International Business Machines; made available under the EPL v1.0 Results  Defined a separate model for storing view data  Using an EMF model was straightforward  6 weeks to learn EMF and build initial implementation  ~50 classes + a generated model  Possible GEF enhancements  Placement of connection anchors  Interactive Hierarchy Layout  Still needs work before it can replace existing editors

27. Graphical Editing Framework | © 2005 by International Business Machines; made available under the EPL v1.0 Work in Progress…  Diagram should import ecore files instead of EPackages  Invoke EMF utilities such as “Validate Model”  Enhance editing of attributes/operations  More actions/context menus  Finer control of visual aspects of diagram  Better routing  Direct interaction with the outline  Not exactly in progress  Keyword: helpwanted

28. Graphical Editing Framework | © 2005 by International Business Machines; made available under the EPL v1.0 WYSIWYG Text Editing  Requirements  Display “rich” text documents  Still no restriction on model  Support BiDi, DBCS, etc.  What’s different  Model is hierarchical/structured (DOM)  Supports mixed font families and sizes  Document may contain non-textual elements  “Rich” formatting includes padding, borders, bullets, images, etc.

29. Graphical Editing Framework | © 2005 by International Business Machines; made available under the EPL v1.0 org.eclipse.draw2d.text  Base package for rich text function  Shipped in 2.1 for GEF palette  Is being enhanced  2 types of special-purpose figures  Block figure  Rectangular in form  Creates and manages “lines”  Inline figure  Contains ≥1 rectangular fragments  May span ≥1 lines  Special layout requirements

30. Graphical Editing Framework | © 2005 by International Business Machines; made available under the EPL v1.0 Example: Represent Simple HTML Source: Returns the active page, or null if there is none Root TextNodeText DOM: BlockFlow TextFlowInlineFlowTextFlow Figures:

31. Graphical Editing Framework | © 2005 by International Business Machines; made available under the EPL v1.0 WYSIWYG Editing  Caret management  Navigation using keyboard: HOME, PAGE_UP, etc.  Placement using the mouse  Swipe-selection, double-click, etc.  Editing the document  Actions affect current selection  Ask editpart for command  Special concerns  What does CTRL+B do if selection is empty?  What should be selected on undo/redo?

32. Graphical Editing Framework | © 2005 by International Business Machines; made available under the EPL v1.0 Get Involved! Contributors to the GEF Project ( ~ chronologically )  Bug reporters  Alex Selkov  Gunnar Wagenknecht  Sven Müller  Elias Volanakis  Régis Lemaigre  Asim Ullah  Brian Fernandes  Bo Majewski  Phil Zoio Ways YOU can contribute:  Submit patches  New function  Documentation  Write an Article  Monitor Newsgroup  Website construction  2 Words: JUNIT  Performance Tests  Platform Testing  @see helpwanted

33. Graphical Editing Framework | © 2005 by International Business Machines; made available under the EPL v1.0 Questions