Drawing tools

Table of Contents About this page Primary target use case Terminology Requirements UI ideas Implementation How the resulting HTML markup would look

About this page

This page contains ideas for adding some basic drawing tool features to Maqetta.

Primary target use case

The primary target use case is to provide users with the option to quickly sketch out a user interface using a drawing tool approach, particularly in early wireframing scenarios, where the UI designer is just trying to do a quick sketch of the UI, and not yet ready to do detailed CSS style tweaking.

To achieve a "drawing tool" approach, widgets would be positioned absolutely on the page, generally treated as graphic images (versus intelligent widgets) and rendered in a back-to-front manner (as you typically see in drawing tools). This "drawing tool" approach (absolutely positioning) contrasts the "HTML layout approach" (flow positioning) that is the primary way that people create mockups in Maqetta today.

Terminology

In the remainder of this page, the term "sketch mode" will be used for usage scenario where the user assembles a user interface using the drawing tool (absolute positioning) approach, and "HTML layout mode" will be used for the usage scenario where a user assembles a user interface using regular HTML/CSS flow layout, where widgets are inside of other widgets, and objects flow left-to-right and top-to-bottom.

Requirements

• Existing widgets (Dojo/Dijit, dojox.mobile, HTML, jQuery, etc) should work well both in HTML layout mode and in sketch mode
• We need an alternate "sketch widget set" which is basically just scalable graphic versions of commonly generic UI controls that have generic styling (mostly black, white and gray, and look hand-drawn). We need to coordinate design work on the sketch widget set and the existing sketch theme to have a common look-and-feel for all things used in sketch mode.
• Only need a few new commands/features
  • Group/ungroup (results in wrapping the elements within a DIV)
  • Forward/Backward/ToTop/ToBottom
  • Align multiply selected objects (horizontal: l/c/r, vertical: t/m/b)
  • Alignment guides while dragging to show snap points with other widgets on page (horizontal: l/c/r, vertical: t/m/b)
  • Lock / unlock all (lock causes an object to become unselectable)
  • Zoom in/out for the page editor canvas (zoom in, zoom out, zoom to percentage, actual size, zoom to fit)

UI ideas

• Group/ungroup would be available via new dropdown button on editor toolbar with two commands
• Lock/unlock would be available via new dropdown button on editor toolbar with two commands
• Alignment commands would be available via new dropdown button on editor toolbar with six commands (l/c/r, t/m/b)
• Arrangement commands would be available via new dropdown button on editor toolbar with four commands (Forward/Backward/ToTop/ToBottom)
• Existing view commands would be consolidated into a single dropdown button on editor toolbar with four commands (Design, Source, Split-H, Split-V)

Implementation

How the resulting HTML markup would look

Initial experiments show that the following approach seems to do the trick for sketch mode authoring:

• Every element gets style="position:absolute; top:NNx; left:NNx;"
• Every new element would be appended as a new last child of the BODY
• We don't put z-index on elements. Instead, we leverage document order to determine which objects are on top of other objects.
  • Therefore, the "bring to top" operation would move the currently selected widget in the DOM to be the last child of its current parent.
  • Exception: A couple of Dojo container widgets, such as BorderContainer, do funky things with z-index on nodes embedded within the container. It looks like we can deal with these funky scenarios by forcing a z-index:0 onto each BorderContainer (probably via the widgets.json file).