Drawing tools
This page contains ideas for adding some basic drawing tool features to Maqetta.
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.
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.
- 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)
- Browsers are probably not sufficiently complete with CSS Transforms to allow zooming in edit mode
- Group/ungroup would be available via new dropdown button on editor toolbar with two commands
- For M3, reuse "Surround with DIV" command on context menu
- Have to do some trickiness here for case where all children have position:absolute:
- new DIV gets position:absolute
- new DIV's left/top set to leftmost/topmost value of any children
- new DIV's width/height set to be just big enough to fit all children
- Update left/top on all children to subtract out parent's left/top values
- Note: need to add logic to all resize and move operations to check for condition where parent has position:absolute and if so update bounds of parent and children
- Lock/unlock would be available via new dropdown button on editor toolbar with two commands
- Probably not going to happen for M3
- Alignment commands would be available via new dropdown button on editor toolbar with six commands (l/c/r, t/m/b)
- For M3, new commands on context menu, preferably only available when multiple widgets are selected
- Arrangement commands would be available via new dropdown button on editor toolbar with four commands (Forward/Backward/ToTop/ToBottom)
- For M3, new commands on context menu
- Existing view commands would be consolidated into a single dropdown button on editor toolbar with four commands (Design, Source, Split-H, Split-V)
- Probably not going to happen for M3
- How to present sketch mode to users? New sketch? An option on the New File dialog? Just train users to click on the flow/absolute icon on the editor toolbar?
- Current thinking is that New menu for M3 should look like this (ui_plugin.js):
- HTML File...
- HTML File... (sketch mode)
- CSS File...
- etc.
- Current thinking is that New menu for M3 should look like this (ui_plugin.js):
- How to best organize the Widget palette
Maqetta already supports absolute positioning for the most part. The proposed new features mostly represent incremental changes on top of a ton of existing functionality.
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
- User could manually group things after the fact if they so wanted
- Down the road, we might offer UI at creation time that allows user to pick a parent
- 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). (NOTE: After some research, for existing widgets, it looks like all we need to do is add z-index:0 to element.style for BorderContainer. Everything else that is supported at this point appears to be well-behaved. Should write a tool that traverses DOM and looks at computed style to report on any use of z-index at either author time or runtime. Putting z-index:0 on element.style is obviously not ideal, but we are doing the same abomination for other things at this point.)
- Automatic alignment lines (top/middle/bottom, left/center/right) during drag time:
- At creation time, requires changes to onMouseMove() inside of CreateTool.js
- At widget reposition time, requires changes to move() inside of Focus.js
- When in absolute positioning mode, would be good to drag widget along with focus box