CheckBoxPaintable.cpp 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. /*
  2. * Copyright (c) 2018-2022, Andreas Kling <kling@serenityos.org>
  3. * Copyright (c) 2023, MacDue <macdue@dueutil.tech>
  4. *
  5. * SPDX-License-Identifier: BSD-2-Clause
  6. */
  7. #include <LibGfx/AntiAliasingPainter.h>
  8. #include <LibGfx/Bitmap.h>
  9. #include <LibWeb/HTML/BrowsingContext.h>
  10. #include <LibWeb/HTML/HTMLImageElement.h>
  11. #include <LibWeb/Layout/CheckBox.h>
  12. #include <LibWeb/Layout/Label.h>
  13. #include <LibWeb/Painting/CheckBoxPaintable.h>
  14. #include <LibWeb/Painting/InputColors.h>
  15. namespace Web::Painting {
  16. JS_DEFINE_ALLOCATOR(CheckBoxPaintable);
  17. static Gfx::DeprecatedPath check_mark_path(Gfx::IntRect checkbox_rect)
  18. {
  19. Gfx::DeprecatedPath path;
  20. path.move_to({ 72, 14 });
  21. path.line_to({ 37, 64 });
  22. path.line_to({ 19, 47 });
  23. path.line_to({ 8, 58 });
  24. path.line_to({ 40, 89 });
  25. path.line_to({ 85, 24 });
  26. path.close();
  27. float const checkmark_width = 100;
  28. float const checkmark_height = 100;
  29. Gfx::AffineTransform scale_checkmark_to_fit;
  30. scale_checkmark_to_fit.scale(checkbox_rect.width() / checkmark_width, checkbox_rect.height() / checkmark_height);
  31. return path.copy_transformed(scale_checkmark_to_fit);
  32. }
  33. JS::NonnullGCPtr<CheckBoxPaintable>
  34. CheckBoxPaintable::create(Layout::CheckBox const& layout_box)
  35. {
  36. return layout_box.heap().allocate_without_realm<CheckBoxPaintable>(layout_box);
  37. }
  38. CheckBoxPaintable::CheckBoxPaintable(Layout::CheckBox const& layout_box)
  39. : LabelablePaintable(layout_box)
  40. {
  41. }
  42. Layout::CheckBox const& CheckBoxPaintable::layout_box() const
  43. {
  44. return static_cast<Layout::CheckBox const&>(layout_node());
  45. }
  46. Layout::CheckBox& CheckBoxPaintable::layout_box()
  47. {
  48. return static_cast<Layout::CheckBox&>(layout_node());
  49. }
  50. void CheckBoxPaintable::paint(PaintContext& context, PaintPhase phase) const
  51. {
  52. if (!is_visible())
  53. return;
  54. PaintableBox::paint(context, phase);
  55. if (phase != PaintPhase::Foreground)
  56. return;
  57. auto const& checkbox = static_cast<HTML::HTMLInputElement const&>(layout_box().dom_node());
  58. bool enabled = layout_box().dom_node().enabled();
  59. auto checkbox_rect = context.enclosing_device_rect(absolute_rect()).to_type<int>();
  60. auto checkbox_radius = checkbox_rect.width() / 5;
  61. auto& palette = context.palette();
  62. auto shade = [&](Color color, float amount) {
  63. return InputColors::get_shade(color, amount, palette.is_dark());
  64. };
  65. auto modify_color = [&](Color color) {
  66. if (being_pressed() && enabled)
  67. return shade(color, 0.3f);
  68. return color;
  69. };
  70. auto input_colors = compute_input_colors(palette, computed_values().accent_color());
  71. auto increase_contrast = [&](Color color, Color background) {
  72. auto constexpr min_contrast = 2;
  73. if (color.contrast_ratio(background) < min_contrast) {
  74. color = color.inverted();
  75. if (color.contrast_ratio(background) > min_contrast)
  76. return color;
  77. }
  78. return color;
  79. };
  80. // Little heuristic that smaller things look better with more smoothness.
  81. if (checkbox.checked() && !checkbox.indeterminate()) {
  82. auto background_color = enabled ? input_colors.accent : input_colors.mid_gray;
  83. context.display_list_recorder().fill_rect_with_rounded_corners(checkbox_rect, modify_color(background_color), checkbox_radius);
  84. auto tick_color = increase_contrast(input_colors.base, background_color);
  85. if (!enabled)
  86. tick_color = shade(tick_color, 0.5f);
  87. context.display_list_recorder().fill_path({
  88. .path = check_mark_path(checkbox_rect),
  89. .color = tick_color,
  90. .translation = checkbox_rect.location().to_type<float>(),
  91. });
  92. } else {
  93. auto background_color = input_colors.background_color(enabled);
  94. auto border_thickness = max(1, checkbox_rect.width() / 10);
  95. context.display_list_recorder().fill_rect_with_rounded_corners(checkbox_rect, modify_color(input_colors.border_color(enabled)), checkbox_radius);
  96. context.display_list_recorder().fill_rect_with_rounded_corners(checkbox_rect.shrunken(border_thickness, border_thickness, border_thickness, border_thickness),
  97. background_color, max(0, checkbox_radius - border_thickness));
  98. if (checkbox.indeterminate()) {
  99. int radius = 0.05 * checkbox_rect.width();
  100. auto dash_color = increase_contrast(input_colors.dark_gray, background_color);
  101. auto dash_rect = checkbox_rect.inflated(-0.4 * checkbox_rect.width(), -0.8 * checkbox_rect.height());
  102. context.display_list_recorder().fill_rect_with_rounded_corners(dash_rect, dash_color, radius, radius, radius, radius);
  103. }
  104. }
  105. }
  106. }