Style Dialog Populated with Classes & IDs

Today I added classes and ids to style dialog distinguished by characters ‘#’ and ‘.’ respectively. If the selector name is the object’s id, it is added to the dialog as #object-id. If the user wishes to add a class as a selector, it is added to the dialog as .red.

Screenshot from 2016-06-10 22:22:27

Another implementation I did today includes populating the style dialog with existing selectors in the style sheet. Whenever a style element is created, it is pushed to a map whose key is the selector’s name and value includes style properties in the selector. This map is iterated to obtain the selectors from the document that is opened. The selectors are presented in the style dialog. The user thus knows the list of selectors already available in the document.

Screenshot from 2016-06-10 22:25:49

Adding UI components to Style Dialog

The list of UI components to be added to the style dialog include:

  • A treeView to display the list of selectors.
  • A button to add a new selector to the list of selectors
  • A button to delete selector from the selectors’ list

The buttons have been added to a HBox _buttonBox which is further contained in a bigger VBox _mainbox in the dialog. The _mainBox contains both the treeview and the HBox containing the two buttons to add and delete selectors. Currently, I have disabled the delete button, keeping my focus on functionality to add selector.

Lack of documentation of gtkmm was not very helpful. I faced some issues which I was unable to solve initially. Since Inkscape is migrating to Gtk+ 3, so I developed the UI components using Gtk+ instead of gtkmm. But the long term goal of Inkscape’s development cycle involves migrating to gtkmm completely, so as guided by mentor Tavmjong Bah, I moved back to gtkmm.

Some of the issues I confronted include:

  1. Button size expanded as I changed the size of the dialog. In the correct case, it should have remained standard. Using the appropriate flag from the enum Gtk::PackOptions, I was able to fix it.
  2. On adding the treeview to the dialog, empty space appeared at the top in the widget. Using the pack_start() function with appropriate packing options, all options available, this is not fixed yet.

Screenshot from 2016-06-04 22:13:55

Registering Style Dialog

For enhancing CSS support in Inkscape, a Style Dialog is being developed for selection of different objects on the basis of their various style attributes. Initiating with the creation of the Style Dialog, the first step was to register the new dialog in the application.

Verbs (generally called commands) are added to verbs.h in the project. They allow implementing functionality via use of menu items. For the style dialog, I added SP_VERB_DIALOG_STYLE to verbs.h. After this, the action corresponding to the newly added verb has to be defined.

Different classes for different types of verbs have been created in verbs.cpp. Corresponding to the DialogVerb class, the function perform(SPAction action, void data) is referred to add a new case for the verb SP_VERB_DIALOG_STYLE.

case SP_VERB_DIALOG_STYLE:
dt->_dlg_mgr->showDialog("Style");
break;

This shows up the Style Dialog when the corresponding verb is activated in the constructor of StyleDialog class. dt which is a pointer of SPDesktop class is the current desktop of the application where dialog will show up.

Next the verb must be added to the table of statically created verbs. The following line is added to _base_verbs[].

new DialogVerb(SP_VERB_DIALOGSTYLE, "DialogStyle", N("Style Dialog..."), N_("View Style Dialog"), NULL),

Lastly, the dialog should be registered in dialog-manager.cpp. Associating the dialog to both dockable and floating behavior, it is registered in the factory as follows:
registerFactory("StyleDialog", &create<StyleDialog, FloatingBehavior>);
registerFactory("StyleDialog", &create<StyleDialog, DockBehavior>);

Screenshot from 2016-06-04 14:17:21

Also since I wanted to add the Style Dialog option to Object menu, so in menu-skeleton, I added it under the Object Option using:

<verb verb-id=\"DialogStyle\" />\n"

Screenshot from 2016-06-04 14:14:41

This registered an empty Style Dialog in the Inkscape with an option in submenu for the dialog.