Object Selection

Table of Contents About this page How Maqetta interactive object selection works Container widgets such as Accordion Proposed changes for Maqetta Implementation approach Sub-object selection Different graphics for showing current selection, more flexible resizing Enable on-screen text editing? Overlay object to catch mouse events

About this page

NOTE: THE INFO ON THIS PAGE MIGHT BE OUT OF DATE. MOST OF CONTENT WAS AUTHORED 01/2010, ALTHOUGH THERE WERE UPDATED 05/2011'

This wiki page summarizes how the Maqetta code implements object selection on the drawing canvas and includes proposals for changes for Maqetta.

How Maqetta interactive object selection works

The key files for handling interactive object selection in Maqetta are:

• Mouse tracking - Move movements on the canvas are tracked by the onMouseMove handler in davinci/ve/tools/SelectTool.js, which is called from the onMouseMove handler in Maqetta/edit/Context.js. Function _setTarget(event.target) is called each time the mouse moves in order to update the overlay objects that sit between the mouse and the drawing canvas. Note that when the mouse moves from one object to another, first you get an onMouseOut (which will call _setTarget(event.relatedTarget), so that overlay will cover the subsequent event target), then an onMouseMove, then (I assume) as onMouseOver. Not clear whether this is bulletproof. What if user's widget has its own onMouseMove handler? Does that get invoked, too?
• Overlay object to intercept mouse events - davinci/ve/tools/SelectTool.js adds and removes temporary objects onto the user's document. Places an overlay DIV (on z-index:99 with class="editFeedback") that covers the object underneath the mouse so that mouse events are received by the DIV and not by the actual object. As the mouse moves over the canvas (i.e., before mousedown), this DIV continually is created, modified and removed as the mouse moves over different objects. The DIV has its left/right/width/height properties set to the exact bounds of the object that is currently under the mouse.
• Selection borders - davinci/ve/tools/SelectTool.js adds and removes gray-patterned selection rectangles DIVs as the current selection changes. Each of the DIVs has class="editFocusFrame"
• Selection nobs - davinci/ve/Focus.js adds and removes 8 "nobs" onto the current selection which (apparently) allows for interactive resizing. Not sure if this works today. Focus.js sets the 'display' property to weird values such as 'horizontal', 'vertical' and 'corner', which Firefox doesn't recognize and does not override the existing value (which is 'none' in all cases I have seen).

Container widgets such as Accordion

With Accordion, no overlay DIV is inserted. This is because of the following logic in SelectTool.js:_setTarget():

// overlay feedback for "control" container (DropDownButton, etc.)
if(!Maqetta.htmledit.metadata.getMetadata(widget).isControl){
  widget = undefined;
}

If the above code is commented out, then Accordion will also get an overlay DIV.

Proposed changes for Maqetta

Implementation approach

Sub-object selection

Right now, Maqetta appears to only select well-known HTML objects at the object level. For example, a button might consist of a rect and a text string, but you can only select the entire button and not the two sub-objects. In order to allow complete flexibility in object styling, we need to allow the user to select sub-objects.

Different graphics for showing current selection, more flexible resizing

Maqetta shows a gray-patterned rectangle around the bounds of the object that is currently selected. To move the object, you have to put the mouse over the border of this rectangle and drag from there. You cannot drag from the center of the selected object and you cannot resize the object interactively.

Instead, Maqetta should show selection handles like FLEXBuilder (i.e., a thin outline with 8 small resizing rectangles [the]). If you select the object and then subsequently drag from the center of the object (or do so in one combined gesture), you move the object. If you select the object and then drag on the resizing handles, you resize the object).

Note that Maqetta does include logic to put "nobs" on the current selection, but I don't think it works. It seems to try to activate the nobs by setting the display property to 'horizontal', 'vertical', and 'corner', but Firefox doesn't recognize these values and ignores them, with the result that the nobs have display:none.

Enable on-screen text editing?

(Not really relevant to selection, but here goes nonetheless) Would be great to be able to edit certain text strings, such as button labels, directly on canvas. Perhaps can leverage HTML's 'contentEditable' features (at least for certain browsers).

Overlay object to catch mouse events

Some of the current approach used by Maqetta seem problematic and probably need to be fixed at some point. The technique of creating an overlay DIV on z-index:99 within the user's document seems wrong. First, from a CS perspective, you really don't want to continually mess with the user's document - it's just asking for trouble. But also, what if the user's document includes its own temporary popups that happen to be on z-index:101? Have to investigate whether it is possible to attach the overlay DIV to the main Maqetta document rather than the user's document.