Enhancing the mapper

Internship diaries #4

At the start of the 4th four-week period, a review meeting was held where several new tasks were specified. I started working on them starting from the minor tasks.

The connector make over

One such task was converting the connectors from straight lines to lines with margin-like ends.
Earlier, the connector was simply an svg:line where I update the x1, y1, x2 and y2 properties directly using d3.selector.attr. In the new requirement, an svg:polyline was introduced as the solution where the points had to be updated instead of the previous x and y coordinates. Each polyline was of 3 segments and needed 4 pairs of coordinates. The earlier connectors already had 2 pairs of coordinates and I used the following to calculate the remaining 2 pairs.

In order to improve clicking on the connector, I added another polyline with the same points but higher width and invisible in the editor except for mouse hover. The events regarding the connectors were set to be captured by this underlying polyline and the increased area improved the usability of the connectors.

Clicked right

Another task was to add the load-file and clear containers functions to a right click menu on the container. For this I used predefined menus in <ul> tags in the main file, which were toggled on contextmenu event. There was a problem causing the menus to be displayed off the desired positions. After researching on this I found out the cause and the solution.

Lists (both unordered and ordered) have padding and margin set by default which was causing the undesired shifts. The default padding was meant for the bullet icons or numbering of list items. The simple solution was to set padding and margin to zero in the <ul> of the menu.

Hidden foreigner

Another problem faced during right click menu implementation was that the menus were not working for upper nodes of the container. After testing on multiple scenarios I found out that this occurs in Firefox but not Chrome and that the inspect-element pointed to a blank square rather than the nodes. The research on this showed that the <foreignObject> I used to hide the file-input was literally covering the upper nodes. Although I have set display:none to the input, I had not hid the <foreignObject> itself which was 100px wide and tall. To solve it, I set display:none to the parent element and as an extra precaution, set the height and width to 1px.

Build on the go

Among the major tasks I completed were dynamic addition of the nodes to the tree, which was also a use case of allowing the user to build a schema manually. I started on it by adding the root element. I used BootstrapDialog to create dynamic modal dialog boxes that gets the information such as the title and the type of the node. When the root element is added, a schema is initiated and stored in the Tree object.

The rules assumed as optimum are as follows:

1. The options for the type of the root element are limited to Object and Array
2. Only nodes of type Object or Array are allowed to add child nodes
3. New nodes to the root element are added only as children nodes
4. Sibling added to a node will be placed right after the triggered node
5. Child added to a node will be placed as the last child of the triggered node

When I was working on updating the schema during node addition, I noticed that JS does not allow adding new nodes to a specific location (to be added as the immediate sibling) since “JavaScript objects are unordered lists of properties”. Therefore a custom method was to be used to set out the right order.

I created a new temporary object, looped through the keys of the parent and kept adding them to the new object. When the triggered node is detected, I added the new sibling node and kept adding the rest of the nodes and finally replace the parent object with the new object.

Once the schema update was completed, I worked on displaying the new nodes. I wrote two (for sibling and child use cases) recursive functions to detect the node right-above the desired location. The functions were based on the HTML DOM hierarchy of the browser. Then I pushed down the nodes below the desired location and added the new node.

One of the problems I faced was that, the new nodes were added at the end of the HTML DOM hierarchy regardless of the position of the node in the tree, which gave incorrect results. Therefore a mechanism was used to re-order the elements in par with the schema, which was implemented using jQuery’s append and detach.