Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Linear and Radial Gradients feature on CanvasItems #621

Closed
wants to merge 40 commits into from
Closed

Linear and Radial Gradients feature on CanvasItems #621

wants to merge 40 commits into from

Conversation

AshishS-1123
Copy link
Contributor

Summary / How this PR fixes the problem?

UI Changes

  1. The ColorPicker shows 3 buttons on top for Solid Color, Linear Gradient and Radial Gradient. The buttons show icons based on their coloring mode.
  2. Below these buttons, a Gtk.EventBox is used to place stop colors on the gradients. It only becomes active in Linear Gradient or Radial Gradient mode.
  3. The stop colors can be moved around by clicking on them. Moving the stop colors changes the background color of EventBox and the selected CanvasItem instantaneously.
  4. StopColors can be deleted by selecting them and pressing the delete button beside the Gtk.EventBox.
  5. In order to change the direction of the gradient, 2 nobs are present inside the selected canvas item.
  6. Dragging these nobs changes the gradient direction and automatically updates the shading.

Code Changes

  1. Added icons for ColorMode buttons.
  2. Created ColorMode class as a container for Color Mode buttons and the EventBox.
  3. Created GradientEditor class for adding new StopColors and modifying their colors.(The class for StopColor is implemented inside GradientEditor).
  4. Created DirectionLine class for changing the direction of gradients. Uses circular nobs with button events to drag them around.

Steps to Test

  1. Create a CanvasItem which has a Fill object(like Rectangle or Ellipse)
  2. Press the ColorButton in the Fill object. This opens a popover.
  3. Click on either of the gradient buttons(2nd for Linear and 3rd for Radial).
  4. In the rectangular box that appears below the buttons, add new stop colors by clicking on the horizontal line.
  5. With a stop color selected(selected stop color is blue in color), change the color using the color picker below.
  6. Click and drag the stop color to change their position.
  7. Select some stop color and press the delete button to remove it. (Note that the first and last stop colors cannot be deleted).
  8. After you are done playing with the stop colors, click somewhere on the screen to remove the popover.
  9. By default, the nobs for gradient direction are present on the diagonal of the canvas item. Drag them to change the direction of the gradient.

Screenshots

stop_color_shot
direction_line shot

Known Issues / Things To Do

  1. Gradients haven't been implemented for Borders.
  2. Minor bug-
    Select an item, then apply gradient to it and change the direction,
    Then select the item again and select gradient. The direction resets to its initial position.
    Fix: Use the gradient pattern from ColorModel to figure out the initial positions of gradient.
  3. Gradients cannot be blended with gradients or colors.
  4. Major bug- The app crashes when you do the following
    Select an item and apply gradient to it.
    Delete the fill item and create a new fill item.
    Selecting gradient mode in this fill item crashes the app.

This PR fixes/implements the following bugs/features:

AshishS-1123 and others added 27 commits June 23, 2021 10:39
@AshishS-1123
Added icons for ColorMode buttons
8d03b07
@AshishS-1123
Added icons are resources
ab71732
@AshishS-1123
Refactor ColorRow
3b9eb7f 
The ColorRow widget should be used only for handling widgets in the row.
When colors change, the ColorMode class should change colors based on the mode.
Also added ColorMode widget
@AshishS-1123
Added ColorMode widget.
86689d6 
This widget consists of 3 buttons that select the Solid, Linear Gradient or Radial Gradient color mode.
When the Linear or Radial Gradient mode button is clicked, an EventBox appears.
This eventbox an be used to set the stop colors for gradient.
@AshishS-1123
Added GradientEditor widget
d8a1d33 
This is a Gtk.EventBox. It only becomes active in Linear or Radial gradient mode.
Clicking on the event box adds a new stop color.
@AshishS-1123
Updated meson.build to build ColorMode and GradientEditor
ef4dd67
@AshishS-1123
Added functionality to delete a stop color
0f1eece
@AshishS-1123
Functionality to move StopColors using cursor
508b617
@AshishS-1123
Bug fixes in moving StopColors
e326245
@AshishS-1123
Accessibility fixes when interacting with StopColors
b05d96e
@AshishS-1123
Displaying gradients in CanvasItem
ee86fca
@AshishS-1123
Minor bugfixes related to delete button
06e30b2
@AshishS-1123
Alpha values to StopColors
5acc76b
@AshishS-1123
Use EventBus signals to change color and gradient
5051082
@AshishS-1123
Create DirectionLine class and draw when color mode changes
dd179c7
@AshishS-1123
Set initial position direction line
114595d
@AshishS-1123
Dynamic show/hide direction line based on selection
e14305c
@AshishS-1123
Drag nobs to change gradient direction
2b28f56
@AshishS-1123
Minor bug fix in Nobs
6ef1d36
@AshishS-1123
Disable gradients for borders
838b6d9
@AshishS-1123
Fix Radial gradient positions
5ac7421
@AshishS-1123
Disable gradients for Border
bbace66
@AshishS-1123
Select Deselect crash fix
3e3c1eb
@AshishS-1123
Set initial position of direction line
6fc6f70
@AshishS-1123
Linting related fixes
7508cd8
@AshishS-1123
Merge branch 'master' of github.com:AshishS-1123/Akira into gradient_…
068c29d 
…widget
@AshishS-1123
Delete wrongly added hidden file
d9b9b39
@ghost
Copy link

ghost commented Jul 3, 2021

@AshishS-1123 Could you center the color options

@Alecaddd
Copy link
Member

Alecaddd commented Jul 4, 2021

@AshishS-1123 Could you center the color options

No, don't center them.

Thank you so much for this initial PR. I'll take some time to review it and give you some detailed feedback for both code and UI.

@Alecaddd
Copy link
Member

I finally had some time to look at this PR and it looks very promising.
Here's some general improvements I think are necessary.

  • Each color fill type (flat, liner, radial) should have its own color picker, as well as a list of document saved gradients. I'm not asking to implement those now, but I think the we should right away implement those fill type as tabs switchers inside the popover, so we can later add custom options for each of those types.
  • The color button should change to reflect the fill type selection.
  • If the flat fill type is selected, we shouldn't show the space for the gradient nor the trash can.
  • The trash can should be disabled if not stop point of the gradient is selected.
  • The stop points shouldn't be cut at the edges of the gradient bar.
  • The far left and right stop points should be draggable to fully control the gradient.
  • When a stop point is selected, the color widget should update to show the color of the selected stop point.

There are other various things that could be improved, but I think this is enough for now :D
Thanks again for working on this.

@Alecaddd Alecaddd marked this pull request as draft July 14, 2021 04:35
@Alecaddd
Copy link
Member

Marking this as Draft since it needs more work.

@AshishS-1123
Copy link
Contributor Author

The color button should change to reflect the fill type selection.
If the flat fill type is selected, we shouldn't show the space for the gradient nor the trash can.
The trash can should be disabled if no stop point of the gradient is selected.
When a stop point is selected, the color widget should update to show the color of the selected stop point.

All of these have been implemented.

The stop points shouldn't be cut at the edges of the gradient bar.

@Alecaddd I don't understand what you mean by this. I have used Adobe XD, and they seem to be placing the first and last stop colors at the corners. Since these stop points are centered at the edges of the GradientEditor, half side of them would have to be hidden.
I could make then visible, but would have to sacrifice some of the width of the editor.

The far left and right stop points should be draggable to fully control the gradient.

Dragging the first and last stop colors will reduce the space available for the user to add more stop colors in between them. Instead the user should move the nobs of direction line

Some of the additional features implemented are-

  1. Allow user to move direction line with the color picker open. But if the user clicks anywhere other than the start and end nobs, the popup closes.
  2. When the user deselects an item and again selects it, the previously set gradient value is loaded. (i.e. the gradient doesn't go to the default colors and direction)

If everything else is okay, should I mark this as Ready for review.

@AshishS-1123 AshishS-1123 marked this pull request as ready for review July 19, 2021 07:52
@Alecaddd
Copy link
Member

This is getting better and better, thanks.
I'll have a full review tomorrow with a couple of changes before we can set it ready for a full review.
Great work!

@mbfraga
Copy link
Collaborator

mbfraga commented Jul 29, 2021

Awesome stuff! Will review as soon as I have time :)

@Alecaddd
Copy link
Member

Alecaddd commented Jul 2, 2022

Closing this since we're targeting the main branch with a completely different code base.

@Alecaddd Alecaddd closed this Jul 2, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Create Linear and Radial Gradients
3 participants
@AshishS-1123 @Alecaddd @mbfraga