akiraux / akiraux/Akira

Create Linear and Radial Gradients

Open
#605 9 comments 7 reactions 0 assignees View on GitHub
help wanted
Dominant language
Vala
Stars
5.3k
Forks
199
PR merge metrics
No merged PRs in 30d

Description

## Expected Behavior

One of the features in the Beta Wishlist is Gradients. I would like to work on adding it. I have already gotten a simple gradient working and will discuss my approach here.
If there are any changes to be made, please comment. If not, could any of the maintainers create a branch- like ```WIP-gradients``` for this feature?

The following are some functionality this feature must have.

#### User Stories

1. The user should be able to change the type of coloring used (simple, linear gradient, radial gradient).
2. The user should be able to change the color shades of gradients using stop colors.
3. The user should be able to change the direction in which the gradient flows using the direction line.
4. If the user changes from either of the gradients to a simple color, their previous color should be used.

## Possible Solution

### UI Changes

In the **ColorPicker** popover, add a dropdown menu. This menu will be created using **Gtk.ComboBoxText**.
The dropdown menu will contain 3 items
1. Simple Color: this will represent a simple, plain color.
2. Linear Gradient: this will represent a linear gradient.
3. Radial Gradient: this will represent a radial gradient.

The user can select what kind of fill they want.

Other that the dropdown menu, a *direction line* will also be created. This line will determine the direction of gradients. This line will only be present if "Linear Gradient" or "Radial Gradient" Mode is chosen.

The user can then drag this line around to change the direction of gradient. This is similar to how most graphics software products use gradients.

This is what the popover looks like after adding the dropdown menu

![dropdown menu](https://user-images.githubusercontent.com/64722310/121661995-72989300-cac2-11eb-8382-2f9dbee01717.png)

This is what the gradient looks like by default.

![gradient_window](https://user-images.githubusercontent.com/64722310/121662076-893eea00-cac2-11eb-8eb0-2282562581a4.png)

### Code Changes

- The dropdown menu will be created in **Akira.Layouts.Partials.FillItem**, inside the **Gtk.Popover**.
- The widget used for this is **Gtk.ComboBoxText**.
- To handle drawing gradients and the direction line, **Akira.Lib.Components.Gradient** will be used.
- When a new item is selected from this menu, it triggers a signal **changed**.
- The handler for this signal will change the **color** property in **Akira.Models.FillsItemModel**.
- This in turn changes the color property in **Akira.Lib.Components.Fill**.
- In **Akira.Lib.Components.Fill**, a **Akira.Lib.Components.Gradient** object is used to draw a linear or radial gradient *Pattern* using the **Cairo** library.

This approach looks a little too complicated to me, but when the user changes the color of a **CanvasItem**, these are the steps that happen, which is why I did the same.

I have implemented this, and can be found on [my fork in the branch WIP-Gradient](https://github.com/AshishS-1123/Akira/tree/WIP-Gradients).

As of now, when the user selects the *Linear Gradient* or *Radial Gradient* mode, a static gradient of colors black and white and running diagonally appears. Its color or direction cannot be changed. The direction line also isn't created. But selecting another mode removes the gradient.

### Future Work

Implement the remaining User Stories. There are also some bugs that cause the CanvasItem to draw Simple colors even when gradient mode is selected.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.