Alignment Panel

* Note: test all layer types in scenarios below; pixel, vector, type, empty, adjustment, mask, group, artboard, background.

Canvas Interactions

• Distribute Horizontal Center and Distribute Vertical Center (Same as standard PS) :

  • Icon (both horizontal and vertical center) should be disabled if 2 or less layers are selected
  • If 3 or more layers are selected + horizontal center icon is clicked, the layers should distribute horizontally evenly within the bounding box of all the selected items.
  • If 3 or more layers are selected + vertical center icon is clicked, the layers should distribute vertically evenly within the bounding box of all the selected items.

• Align Left Edges, Align Right Edges, Align Horizontal Center, Align Vertical Center, Align Top Edges, Align Bottom Edges (should behave the same as standard PS):

  • Icon for these given behaviors should be disabled if 1 or no layers are selected.
  • If 2 or more layers are selected + the given icon is clicked, the layers should align to the named boundary.
    • Align Left: The left sides of all selected layers should be lined up against the left side of the bounding box.
    • Align Right: The right sides of all selected layers should be lined up against the right side of the bounding box.
    • Align Horizontal Center: The horizontal centers of all layers should be along the same vertical line, which is drawn through the vertical midpoint of the bounding box.
    • Align Vertical Center: The vertical centers of all layers should be along the same horizontal line, which is drawn through the horizontal midpoint of the bounding box.
    • Align Top: The top sides of all selected layers should be lined up against the top side of the bounding box.
    • Align Bottom: The bottom sides of all selected layers should be lined up against the bottom side of the bounding box.

• Width and Height:

  • If one layer is selected, the W input should correspond to the width of the bounding box and the H input should correspond to the height of the bounding box.
  • If multiple items are selected and do not have the same value for all of these properties, the inputs will show a mixed state.

• Proportional Lock Icon:

  • Icon always display state (locked/unlocked) with selected layer(s). Icon will not be visible when nothing is selected.
  • When locked, the ratio of width to height is always maintained, no matter the size changes to the layer.
  • When unlocked, the height and width do not maintain a constant ratio when size changes

• X and Y:

  • If one layer is selected, the X and Y inputs by default should correspond to the top-left corner of the layer. If the selected reference point is not the top-left corner, then the X and Y inputs are the coordinates of the currently selected reference point with relation to the canvas.
  • If multiple layers are selected and do not have the same value for all of these properties, the inputs will show a mixed state.

• Unite Shape, Subtract Shape, Intersect Shape, Difference Shape execute the given operation on selected vector items on the canvas (should behave the same as standard PS). The result of any of these operations is a single vector object. (selections including masks combine incorrectly, issue #3163)

• Flip Horizontal and Flip Vertical (should behave the same as standard PS):

  • If no layers are selected, both icons are disabled.
  • If one or more layers are selected, both icons are enabled.
  • Flip horizontal should mirror the image to the vertical axis -- interchanges the left and right parts of the image. Flip vertical should mirror the image to the horizontal axis -- interchanges the top and bottom parts of the image.

• Swap:

  • If more or less than 2 layers are selected, the icon is disabled.
  • When 2 layers are selected, the icon is enabled. When icon is clicked, the selected layers trade positions and each takes the y coordinate of the other layer.

• Transform:

  • Only active when 1 or more layers are selected. When active, the the numerical input given is the degree change clockwise that the bounding box will rotate.

• Reference Point Tool:

  • Always active. Default is top-left.
  • When the reference point is changed, this serves as the anchor point around which a layer's height and width will be changed with relation to. If the reference point is:
    • Top-Left: Width change -- only the right side of the layer will move. Height change -- only the bottom side of the layer bounding box will move
    • Top-Center: Width change -- both the right and left sides of the layer will move equally. Height change -- only the bottom side of the layer bounding box will move.
    • Top-Right: Width change -- only the left side of the layer will move. Height change -- only the bottom side of the layer bounding box will move
    • Middle-Left: Width change -- only the right side of the layer will move. Height change -- both the top and bottom sides of the layer bounding box will move
    • Middle-Center: Width change -- both the right and left sides of the layer will move equally. Height change -- both the top and bottom sides of the layer bounding box will move
    • Middle-Right: Width change -- only the left side of the layer will move. Height change -- both the top and bottom sides of the layer bounding box will move
    • Bottom-Left: Width change -- only the right side of the layer will move. Height change -- only the top side of the layer bounding box will move.
    • Bottom-Center: Width change -- both the right and left sides of the layer will move equally. Height change -- only the top side of the layer bounding box will move.

Modifiers

• Shift + arrow up/down: will increment/decrement the value by 10 for Width, Height, X and Y
• Shift + arrow up/down: will increment/decrement the value in the Rotation field by 15
• Tab will set focus to the next field
• Shift + Tab will set focus to the previous field
• (on-canvas) Shift + dragging an anchor point: Sets proportional lock during the transformation as long as Shift is held
• (on-canvas) Alt + dragging an anchor point resizes from the center

Panel Interactions

• The Transform panel is part of the Properties column. When the Properties column is expanded, the Transform column is always visible.
• When no layer or artboard is selected, the Transform panel remains visible. The text inputs and buttons in the Transform panel should be disabled, except for the reference tool
• The Reference tool is always enabled
• The enabled components in the Transform panel depend on the selected items.

---

Selected item(s):

Artboard

• Distribute disabled
• Align disabled
• Rotate disabled
• Vector Combine buttons disabled
• Align buttons disabled
• Flip enabled
• Swap disabled

Single Vector Item

• Distribute disabled
• Align disabled
• Size and Dimension available
• Rotate enabled
• Vector Combine buttons enabled
• Flip enabled
• Swap disabled

Single Text Item or Smart Object

• Distribute disabled
• Align disabled
• Size and Dimension available
• Rotate enabled
• Vector Combine buttons disabled
• Flip enabled
• Swap disabled

Two Vector Items

• Distribute disabled
• Align enabled
• Size and Dimension mixed state
• Rotate enabled
• Vector Combine buttons enabled
• Flip enabled
• Swap enabled

Two Non-Vector Items (or 1 vector and 1 non-vector)

• Distribute disabled
• Align enabled
• Size and Dimension mixed state
• Rotate enabled
• Vector Combine buttons disabled
• Flip enabled
• Swap enabled

Three or more Vector Items

• Distribute enabled
• Align enabled
• Size and Dimension mixed state
• Rotate enabled
• Vector Combine buttons enabled
• Flip enabled
• Swap disabled

Single Group

• Size and Dimension available
• Rotate enabled
• Align disabled
• Vector Combin buttons disabled
• Flip enabled
• Swap disabled

Two Groups

• Distribute disabled
• Align enabled
• Size and Dimension show mixed state
• Rotate enabled
• Flip enabled
• Swap enabled

Three or more Groups

• Distribute enabled
• Align enabled
• Size and Dimension show mixed state
• Rotate enabled
• Vector Combine buttons disabled
• Flip enabled
• Swap disabled

---

• Swapping two layers that reside in different artboards will affect the layers panel stacking order (layers will swap positions in the layers panel as well as on canvas across artboards)