Skip to content

Revamp gradient editors

Deif Lou requested to merge deiflou/krita:deiflou/revamp_gradient_editors into master

This MR tries to improve the specific gradient editors (stop/segment) both graphically and functionally.

NOTE: This MR is halfway implemented (only the stop gradient editor parts). I just created it to already get feedback.

The list of changes are:

  • Rename gradient related classes and move them to a common new folder. Specially the segment gradient widgets had some weird names.

  • Stop Gradient:

    • Slider Widget:
      • Appearance:
        • create common drawing primitives and move them to new file
        • paint checkerboard
        • draw selected stop on top
        • remove use of hand cursor
        • replace painting fg/bg hint
        • highlight stop when hovered
      • Functionality:
        • remove stop when mouse is far away both vertically and horizontally
        • change selected stop with keyboard (ctrl+left/right keys)
        • change selected stop position with keyboard (left/right keys, if shift key is pressed the increment is smaller)
        • change selected stop with mouse wheel (ctrl+mouse_wheel)
        • change selected stop position with mouse wheel (mouse_wheel, if shift key is pressed the increment is smaller)
        • double click on stop or press enter to open color dialog to change the stop color
        • set strong focus policy. Now the slider can be focused so that it can be edited with keyboard/mouse
        • use delete key to delete the selected stop
    • Gradient Editor:
      • A new "gradient color editor" widget was created to abstract the common widgets used to edit a stop/segment color. It allows to change color type (fg, bg or custom), the color, the opacity, the transparent flag (in fg/bg mode), and the position of the stop.
      • Remove the context menu and add some tool buttons with the same functionality (reverse/sort) and:
        • buttons to navigate the stops
        • button to delete the selected stop
        • button to sort by hue
        • button to distribute the stops evenly
      • All the actions in buttons can be accessed in compact mode through navigation buttons or a menu button
      • A label is shown with the current stop index

    stop_gradient_editor_01
    stop_gradient_editor_02

  • Segment Gradient:

    • Slider Widget:
      • Appearance:
        • paint checkerboard
        • draw selected handle on top
        • replace painting fg/bg hint
        • highlight stop when hovered
      • Functionality:
        • three types of handles can be selected: segment, stop, mid-point
        • click and drag moves a handle
        • remove segment or stop when mouse is far away both vertically and horizontally
        • ctrl + lmb creates a stop in the mouse position (splits a segment)
        • shift + lmb duplicates the segment under the cursor
        • change selected handle with keyboard (ctrl+left/right keys)
        • change selected handle position with keyboard (left/right keys, if shift key is pressed the increment is smaller)
        • change selected handle with mouse wheel (ctrl+mouse_wheel)
        • change selected handle position with mouse wheel (mouse_wheel, if shift key is pressed the increment is smaller)
        • double click on stop or press enter to open color dialog to change the stop color
        • set strong focus policy. Now the slider can be focused so that it can be edited with keyboard/mouse
        • use delete key to delete the selected segment/stop
    • Gradient Editor:
      • now segment/stop/mid-point have specific edit widgets that show when the handle is selected
      • use new "gradient color editor" widget to edit segment/stop end points.
      • remove the context menu from the slider widget and add some tool buttons to:
        • segment handle: delete, flip, split, duplicate
        • stop handle: delete, center
        • mid-point handle: center
        • gradient flip, distribute segments evenly
      • All the actions in buttons can be accessed in compact mode through navigation buttons or a menu button
      • A label is shown with the current handle index

    segment_gradient_editor_01
    segment_gradient_editor_02
    segment_gradient_editor_03

Test Plan

The normal mode of the stop gradient editor can be tested in the gradient fill layer or gradient map properties. The compact mode of the stop gradient editor can be tested in the multigrid fill layer properties.

Formalities Checklist

  • I confirmed this builds.
  • I confirmed Krita ran and the relevant functions work.
  • I tested the relevant unit tests and can confirm they are not broken. (If not possible, don't hesitate to ask for help!)
  • I made sure my commits build individually and have good descriptions as per KDE guidelines.
  • I made sure my code conforms to the standards set in the HACKING file.
  • I can confirm the code is licensed and attributed appropriately, and that unattributed code is mine, as per KDE Licensing Policy.
Edited by Deif Lou

Merge request reports

Loading