Create Component Editor

[Guitarheroua]

Component Editor is the main working area of application. It should consist of:

1. Canvas with component(where the main component for editing is displayed). Canvas will also have additional tools such as roller, guidelines, grid (as in photoshop). All these additional tools should be possible to turn on/of from the main menu.
2. Component configuration area, where all main component properties could be edited.
   Component configuration area should have logical sections for the next properties:

• Component size (predefined size selector, custom size edit fields)
• Background( Selector for image, gradient(predefined), color background.)
• Border (width, color, inner radius)
• Decorations list( where all current components decorations described and located base
  on z-order. Here possible to change decoration name, change decoration visibility, delete
  decoration, move decoration forward or backward(change z-order))

3. Decoration selection area (where possible to chose the decoration, that will be added on
   component. Decorations are icons(predefined), text, image, shapes). For icons and shapes should be some windows or dialogs where will be possible to choose the needed decoration. For image will be system file picking dialog. The text will be added immediately to the component. After decoration selection, it appears on the component.
4. Selected decoration configuration. When selecting decoration, it should be possible to
   configure decoration properties. Decoration will have the same properties as:

• position & size
• border (color/ custom image/ gradient, width)
  Decoration will have different properties depends on the type of decoration:
• Icon (color, icon source)
• Image (path to file)
• Text (font properties (font family, size, weight, etc.))
• Shape( shape type, color)

5. Template selection area. Where it is possible to select predefined and saved templates.