wiki:PAGE_ELEMENT_ALIGNING_R0
Last modified 13 years ago Last modified on 04/01/09 15:04:48

Error: Macro BackLinksMenu(None) failed
compressed data is corrupt

Error: Macro 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|) failed
current transaction is aborted, commands ignored until end of transaction block

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 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 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

PAGE_ELEMENT_GROUPING_R0
PAGE_ELEMENT_MULTI_MANIPULATION_R0
PAGE_ELEMENT_MULTI_SELECT_R0
GROUP_PAGE_ELEMENTS_GROUP_ALIGN_R0

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 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 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.)