We (Denis Vuyka 1, Denis Vuyka 2 and myself) have completed a fully functional mindmapping application on top of G2 and have used it in the past months internally for various things. This application is, however, not a ‘product’ or anything you can buy, it’s only a proof of concept.It’s a test application, a benchmark, a toy model, a fun thing to play with and see how G2 handles various things. Much like the class designer and the database table designer I talked about earlier, it’s a way to show off the potential of G2 to you, even though I think this mindmapping application could be a stepping stone to something bigger.

This said, the development was a lot of work; the devil is in the details as everyone knows. G2 is a framework on top of which you can create an application, attach meaning to nodes and links, handle events and trigger some mechanism in the G2 core and so on, all this is conceptually quite easy. Making things smooth on the UI level, making custom controls to manipulate the data coming or going to G2 is on the other hand a tedious process of UI-design, usability testing/trying, debugging, handling special cases (large images, bad alignment of text, broken serialization due to unicode characters…) and more. This journey has been rewarding, once you have the idiosyncrasies of WPF in your fingers and can navigate blindly through G2, the whole process feels very productive.  For example, creating a thought-node which binds to some RSS and injects blog-titles into the map is fun and easy, the same for custom nodes binding to stocks & shares data (see the screenshots). Creating thought-nodes with clickable icons or showing some custom data is a no-brain activity. In fact, because the stuff shown on a node is presented through WPF’s databinding you can add pretty much anything you like to the node’s visual.

I’ll review a bit the features of the application which obviously reflect the features and capacity of G2 as a basis for diagramming in general.

Standard features

• Saving to the internal binary format (*.g2d) and to XML (*.xml). You can alter the generated XML and open it up again. At some point I’ll publish the XML data format but you can experiment and find out yourself as well.
• Opening diagram from binary and XML formats. Both formats support multiple pages inside a single document.
• Creating a new document (CTRL+N) will request by default if you wish to save the current document first.
• CTRL+S and CTRL+O are bound and subsequent savings will first try the current file path. If you wish to save it elsewhere you can use SaveAs (no input binding here), but all this is pretty standard.

Note that a document (a mindmapping document in this demo) consists of some metadata and one or more pages. A page is much like a sheet in Microsoft Office Excel or Visio. Internally a page is furthermore subdivided into layers but in this demo you will not be able to have mutliple layers. In fact, it’s rather difficult to conceptually give meaning to layers in a mindmapping diagram.

Page can be added through the toolbar item entitled ‘Add page’ and removed or renamed through the tabpage context menu. A document has at least one page, which means you cannot delete the page if it’s the only one in the document. See also the know issue related to the tabs below.

Cut, copy, paste and delete (CCPD) need little explanations, I guess. Mind though that when navigating the diagram with the keyboard the focus is on the text inside the shapes. This means that at that moment CCPD has its effect on the text and not on the shapes. In order to CCPD shapes the focus needs to be on the diagram level. Just use the traditional rubber-band (marching ants, selector) to select shapes (use CTRL or SHIFT to add to an existing selection) and CCPD then. In this context I need to note that if you select multiple shapes which have a parent relationship (like in the screeenshot below) the upper parent will be used and hence all children underneath will be used in the CCPD process. This system ensures that no shape becomes an orphan in the CCPD process.

The O2 docking environment is an in-house development based on MEF, AvalonDock and Denis’ wonderful propertygrid (though in this demo it’s been hidden). The View menu allows you to bring up the various panels of the demo. Most notably, the Output window will display internal messages or (worse) exceptions and the internal browser is just a WPF Frame (hence, wrapped IE ). The docking layout can be saved via the Tools menu and re-opened later on.

Nothing spectacular but anyway, you can select a custom background for a diagram which in some cases can really make a diagram more attractive. With WPF there are so many possibilities…

Editing the diagram metadata (author, date and title), zooming and assigning an icon can all be done through the Diagram elements panel. There is also a thumbnail view which in a later phase will allow you to navigate the diagram, but I haven’t put much focus on this lately. Zooming can also be achieve via the mousewheel and pressing the CTRL key (quite standard nowadays). To reset the zoom factor just press/click the mousewheel (yes, you can press the wheel). An addition which I have overlooked as I’m writing this is the SHIFT with the mousewheel which in most applications allows you to scroll horizontally.

Mindmapping specific features

Besides the features which are available to every G2 diagram type (or part of the O2 environment), there are also a few things specific to mindmapping which we’ll highlight below.

One of the very productive features of WPF is the possibility to style or template a control. When you select a thought-shape you can alter its appearance through the dropdown in the toolbar (see screenshot). For this demo I created some custom styles which suit different data bucket but, as I described above, the possibilities are limitless and easily implemented. Take this together with the databinding and you have a mindmapping framework for every possible (business) context.

• CTRL+R rotates the diagram
• CTRL+ENTER adds a child node. Some dummy text is auto-generated which eases the testing process and easily creates maps in no time. As this is some kind of ‘random book-title generator’ you can have sometimes rather strange or funny titles
• CTRL+T switches between editing the text or thought title inline and editing the body text
• CTRL+M expands/collapses the children of the selected node
• CTRL+ARROW allows you to navigate the map through the keyboard. This togheter with CTRL+ENTER makes it easy to create dummy maps in no time.

Drag-drop. If a node is selected and you dragdrop an URL it will be attached to the selected node. If you dragdrop an image from the file explorer this will create a new child node to the selected node. Nothing will be created if no node is selected!

The thought editor. The data displayed in a shape is, as said earlier, just a data bucket bound to the visual in the diagram. For example, below is the definition of the ‘Shares’ shape template wherein you can see the different data bindings. So, in effect there is just a collection of data islands which you can bind both to the shape in the diagram but also to some editor. Altering the data in one will change the data everywhere else, which demonstrates brilliantly the power of WPF’s databinding. The though editor is a dockable panel which allows to change the data island and it’s rather self-descriptive. You can add some URL’s or some files to a thought through the listviews, change the body text, add an icon or change the title inline. Obviously the whole editor would be even more useful if RTF-ed or HTML-ed but I did not want to waste too much time on this. Ultimately, it’s just plugging in some open source or commercial editor since the data bucket only cares about the string result.

One word of warning for those thinking that adding shapes and styles is only a matter of adding properties and changing the XAML. The underestimated part behind CCPD and saving documents is the whole (de)serialization process; making sure databinding works after deserialization, picking up the styles from the assembly’s resources, disassembling the layout organization, figuring out how to maintain the mindmap hierarchy and so on. To the rescue, the data exchange pipeline (aka. G2D) inside G2 maximizes flexibility through some smart usage of Unity (as explained elsewhere on this blog) which allows us to really change the import/export of XML in a snap, embrace data changes with ease and be prolific without having to step through the (de)serialization on a low level (anymore).

Things left out

• Other types of diagrams are not possible in this demo (though the XML manipulation will not stop you from getting there).
• Saving data to a WCF endpoint or database backend.
• Dragging thought-shapes and altering the map via the mouse.
• The possibility to mix free shapes and thought-shapes.
• Layers (see also my remark above).
• Saving/opening sub-document elements.
• Active shapes (RSS shape, Google search shape and other ‘intelligent’ shapes).

All these things are possible with G2 but I think the current demo is sufficient (for now) as other diagram types need attention as well…

What’s the point?

To paraphrase my compatriot; ceci n’est pas un logiciel. It’s a demo (I’d almost say a fancy UI facade on top of) showing what can be done with G2. The diagrams I talked about in other blog postings will be integrated in the near future to complete the demo so that in the end a more ‘covering’ picture appears of what G2 is. There as been an enormous interest in G2 and Graphite in the past months but unfortunately we have not been able to deliver a downloadable demo on time. I hope this first release already satisfies a bit the hungry (customer) minds out there.

You can do as you wish with this demo, there are no constraints. Of course, any feedback is welcome. If you really have the burning wish to turn this demo in something you think is worth selling you can drop me a mail, custom solution requests and business opportunities are welcome as well.

The next download of the G2 demo wil contain the other diagramming types, but no schedule on the table for now. We are developing custom diagramming controls for customers, elaborate data visualizations in our lab, handle heaps of mails and questions, have a fulltime job next to all this and take care of our family. Acrobatic challenges at times. Most probably you’ll see signs on this site of our other projects before the next G2 drop.

Download the February G2 mindmapping demo.

Known issues

.Net v3.5 SP1 is required to run this demo. You can download all this from MSDN.

The virtual double. This occurs when you load a document and the page tab control shows a double of some page. When you click on either when the other virtual double will disappear. This is a bug in the databinding for which I was unable to find an answer or trace the cause.

Sub-document file types. The open/save dialogs present you alternative file extensions (*.g2s, *.g2b, *.g2p). These types are not supported in this demo, though the serialization is inside G2. These extensions allow one to save only a page, a subset of shapes or just one single shape to a file. These types are useful to load templates and re-use single shapes in other documents.

Undo/redo. The undo/redo mechanism is not everywhere properly bound to the actions. This is not a bug in G2 but rather a badly bound UI to the underlying core. Sorry.

Semantic note: the whole nine yards: means “completely, the whole, everything.