[[BackLinksMenu]]

[[TicketQuery(summary=PAGE_ELEMENT_ALIGNING_R0, format=table, col=summary|owner|status|type|component|priority|effort|importance, rows=description|analysis_owners|analysis_reviewers|analysis_score|design_owners|design_reviewers|design_score|implementation_owners|implementation_reviewers|implementation_score|test_owners|test_reviewers|test_score|)]]



= Analysis =

== Overview ==

Users need to be able to align frames.  Alignment is done via a HUD to the current selection.  Alignment is only viable when the selection contains more than one item.  See the related section of this task for the multi-select task, which should be done before this task.

Alignment should be undoable, and may rely on the PRO_CHANGE tasks (see related).  Alignment via the sides and centers of objects is a good start.  Later we can add distribution if deemed necessary.

== Task requirements ==

 * Add a halo for alignment to frames if there is more than one frame selected
 * The halo's hud will have buttons for choosing the alignment (see implementation idea)
 * Alignment operations should be undoable (might be blocked by PRO_CHANGE work)

== Task result ==

The result of this task is code

== Implementation idea ==

 * Use the [wiki:PAGE_ELEMENT_MULTI_SELECT_R0] changes to determine if there is more than one item selected
 * Due to the fact that we don't have grouping yet, put the alignment halo on the last frame added to the selection (this may be part of [wiki:PAGE_ELEMENT_MULTI_SELECT_R0] that I missed)
 * Support the following alignments:
  * Align left sides
  * Align top sides
  * Align bottom sides
  * Align right sides
  * Align vertical centers
  * Align horizontal centers

 * The first frame in the selection is the master frame in terms of which frame to align to

== Related ==

[wiki:PAGE_ELEMENT_GROUPING_R0][[BR]]
[wiki:PAGE_ELEMENT_MULTI_MANIPULATION_R0][[BR]]
[wiki:PAGE_ELEMENT_MULTI_SELECT_R0][[BR]]
[wiki:GROUP_PAGE_ELEMENTS_GROUP_ALIGN_R0][[BR]]

== How to demo ==

Demo the alignment hud, selecting several frames and aligning them

= Design =

 * Create an AlignElementsHud which will be responsible for aligning page elements.
  * It should have a tool-tip: "Align the selected page elements."
  * the size of the hud cannot be defined since we do not know how much space will the controls take.
  * The hud should be put in the [source:/trunk/sophie2-platform/modules/org.sophie2.main.view.halos/src/main/java/org/sophie2/main/view/halos/huds/ huds package].
 * Create an AlignElementsHaloButton which would show the AlignElementsHud.
  * the button should be visible if and only if there are selected page elements.
  * create an icon for the button.
  * It will be put in the MainHaloMenu.
  * Its child is the AlignElementsHud.
  * Tool-tip: "Align the selected page elements."
  * The icon should be named alignElements.png so that it is consistent with other icons.
  * The button should be put in the [source:/trunk/sophie2-platform/modules/org.sophie2.main.view.halos/src/main/java/org/sophie2/main/view/halos/buttons/huds halo buttons that display huds package]
 * The aligning of the page elements should be done by providing a List<ScenePageElement> which contains the selected page elements.
  * the actual aligning would be done by the AlignElementsHud controls.
  * depending on the aligning option chosen, all the elements' position will be changed.
  * some helper methods might be needed to compute the position of every element.
  * Aligning controls will be JButtons. Create a class AlignElementsButton that is a BaseSwingVisualElement.
   * Define the size of the button and provide the actual JButton in the swingComponent's resource property.
  * The actual computations and changes will be performed in extending classes which will override a click() method. These classes should also add their skin parameters - title and tooltip. They should be six and bellow are listed their corresponding titles and tool tips.
   * Align left, "Click to align selected elements' left sides."
   * Align top, "Click to align selected elements' top sides."
   * Align bottom, "Click to align selected elements' bottom sides."
   * Align right, "Click to align selected elements' right sides."
   * Align vertically, "Click to align selected elements' vertically."
   * Align horizontally, "Click to align selected elements' horizontally."
= Implementation =
^(Implementation results should be described and linked here (from the wiki or the repository))^

= Testing =

= Comments =
^(Write comments for this or later revisions here.)