ClassicStylePainter.cpp 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395
  1. /*
  2. * Copyright (c) 2018-2020, Andreas Kling <kling@serenityos.org>
  3. * Copyright (c) 2020, Sarah Taube <metalflakecobaltpaint@gmail.com>
  4. *
  5. * SPDX-License-Identifier: BSD-2-Clause
  6. */
  7. #include <AK/StringView.h>
  8. #include <LibGfx/Bitmap.h>
  9. #include <LibGfx/CharacterBitmap.h>
  10. #include <LibGfx/ClassicStylePainter.h>
  11. #include <LibGfx/Painter.h>
  12. #include <LibGfx/Palette.h>
  13. namespace Gfx {
  14. void ClassicStylePainter::paint_tab_button(Painter& painter, const IntRect& rect, const Palette& palette, bool active, bool hovered, bool enabled, bool top)
  15. {
  16. Color base_color = palette.button();
  17. Color highlight_color2 = palette.threed_highlight();
  18. Color shadow_color1 = palette.threed_shadow1();
  19. Color shadow_color2 = palette.threed_shadow2();
  20. if (hovered && enabled && !active)
  21. base_color = palette.hover_highlight();
  22. PainterStateSaver saver(painter);
  23. painter.translate(rect.location());
  24. if (top) {
  25. // Base
  26. painter.fill_rect({ 1, 1, rect.width() - 2, rect.height() - 1 }, base_color);
  27. // Top line
  28. painter.draw_line({ 2, 0 }, { rect.width() - 3, 0 }, highlight_color2);
  29. // Left side
  30. painter.draw_line({ 0, 2 }, { 0, rect.height() - 1 }, highlight_color2);
  31. painter.set_pixel({ 1, 1 }, highlight_color2);
  32. // Right side
  33. IntPoint top_right_outer { rect.width() - 1, 2 };
  34. IntPoint bottom_right_outer { rect.width() - 1, rect.height() - 1 };
  35. painter.draw_line(top_right_outer, bottom_right_outer, shadow_color2);
  36. IntPoint top_right_inner { rect.width() - 2, 2 };
  37. IntPoint bottom_right_inner { rect.width() - 2, rect.height() - 1 };
  38. painter.draw_line(top_right_inner, bottom_right_inner, shadow_color1);
  39. painter.set_pixel(rect.width() - 2, 1, shadow_color2);
  40. } else {
  41. // Base
  42. painter.fill_rect({ 0, 0, rect.width() - 1, rect.height() }, base_color);
  43. // Bottom line
  44. painter.draw_line({ 2, rect.height() - 1 }, { rect.width() - 3, rect.height() - 1 }, shadow_color2);
  45. // Left side
  46. painter.draw_line({ 0, 0 }, { 0, rect.height() - 3 }, highlight_color2);
  47. painter.set_pixel({ 1, rect.height() - 2 }, highlight_color2);
  48. // Right side
  49. IntPoint top_right_outer { rect.width() - 1, 0 };
  50. IntPoint bottom_right_outer { rect.width() - 1, rect.height() - 3 };
  51. painter.draw_line(top_right_outer, bottom_right_outer, shadow_color2);
  52. IntPoint top_right_inner { rect.width() - 2, 0 };
  53. IntPoint bottom_right_inner { rect.width() - 2, rect.height() - 3 };
  54. painter.draw_line(top_right_inner, bottom_right_inner, shadow_color1);
  55. painter.set_pixel(rect.width() - 2, rect.height() - 2, shadow_color2);
  56. }
  57. }
  58. static void paint_button_new(Painter& painter, const IntRect& a_rect, const Palette& palette, bool pressed, bool checked, bool hovered, bool enabled, bool focused)
  59. {
  60. Color button_color = palette.button();
  61. Color highlight_color = palette.threed_highlight();
  62. Color shadow_color1 = palette.threed_shadow1();
  63. Color shadow_color2 = palette.threed_shadow2();
  64. if (checked && enabled) {
  65. if (hovered)
  66. button_color = palette.hover_highlight();
  67. else
  68. button_color = palette.button();
  69. } else if (hovered && enabled)
  70. button_color = palette.hover_highlight();
  71. PainterStateSaver saver(painter);
  72. auto rect = a_rect;
  73. if (focused) {
  74. painter.draw_rect(a_rect, palette.threed_shadow2());
  75. rect.shrink(2, 2);
  76. }
  77. painter.translate(rect.location());
  78. if (pressed || checked) {
  79. // Base
  80. Gfx::IntRect base_rect { 1, 1, rect.width() - 2, rect.height() - 2 };
  81. if (checked && !pressed)
  82. painter.fill_rect_with_dither_pattern(base_rect, palette.button().lightened(1.3f), palette.button());
  83. else
  84. painter.fill_rect(base_rect, button_color);
  85. // Top shadow
  86. painter.draw_line({ 0, 0 }, { rect.width() - 2, 0 }, shadow_color2);
  87. painter.draw_line({ 0, 0 }, { 0, rect.height() - 2 }, shadow_color2);
  88. // Sunken shadow
  89. painter.draw_line({ 1, 1 }, { rect.width() - 3, 1 }, shadow_color1);
  90. painter.draw_line({ 1, 2 }, { 1, rect.height() - 3 }, shadow_color1);
  91. // Outer highlight
  92. painter.draw_line({ 0, rect.height() - 1 }, { rect.width() - 1, rect.height() - 1 }, highlight_color);
  93. painter.draw_line({ rect.width() - 1, 0 }, { rect.width() - 1, rect.height() - 2 }, highlight_color);
  94. // Inner highlight
  95. painter.draw_line({ 1, rect.height() - 2 }, { rect.width() - 2, rect.height() - 2 }, palette.button());
  96. painter.draw_line({ rect.width() - 2, 1 }, { rect.width() - 2, rect.height() - 3 }, palette.button());
  97. } else {
  98. // Base
  99. painter.fill_rect({ 0, 0, rect.width(), rect.height() }, button_color);
  100. // Top highlight
  101. painter.draw_line({ 0, 0 }, { rect.width() - 2, 0 }, highlight_color);
  102. painter.draw_line({ 0, 0 }, { 0, rect.height() - 2 }, highlight_color);
  103. // Outer shadow
  104. painter.draw_line({ 0, rect.height() - 1 }, { rect.width() - 1, rect.height() - 1 }, shadow_color2);
  105. painter.draw_line({ rect.width() - 1, 0 }, { rect.width() - 1, rect.height() - 2 }, shadow_color2);
  106. // Inner shadow
  107. painter.draw_line({ 1, rect.height() - 2 }, { rect.width() - 2, rect.height() - 2 }, shadow_color1);
  108. painter.draw_line({ rect.width() - 2, 1 }, { rect.width() - 2, rect.height() - 3 }, shadow_color1);
  109. }
  110. }
  111. void ClassicStylePainter::paint_button(Painter& painter, const IntRect& rect, const Palette& palette, ButtonStyle button_style, bool pressed, bool hovered, bool checked, bool enabled, bool focused)
  112. {
  113. if (button_style == ButtonStyle::Normal)
  114. return paint_button_new(painter, rect, palette, pressed, checked, hovered, enabled, focused);
  115. if (button_style == ButtonStyle::Coolbar && !enabled)
  116. return;
  117. Color button_color = palette.button();
  118. Color highlight_color = palette.threed_highlight();
  119. Color shadow_color = button_style == ButtonStyle::Coolbar ? palette.threed_shadow1() : palette.threed_shadow2();
  120. PainterStateSaver saver(painter);
  121. painter.translate(rect.location());
  122. if (pressed || checked) {
  123. // Base
  124. IntRect base_rect { 1, 1, rect.width() - 2, rect.height() - 2 };
  125. if (button_style == ButtonStyle::Coolbar) {
  126. if (checked && !pressed) {
  127. painter.fill_rect_with_dither_pattern(base_rect, palette.button().lightened(1.3f), Color());
  128. } else {
  129. painter.fill_rect(base_rect, button_color);
  130. }
  131. }
  132. // Sunken shadow
  133. painter.draw_line({ 1, 1 }, { rect.width() - 2, 1 }, shadow_color);
  134. painter.draw_line({ 1, 2 }, { 1, rect.height() - 2 }, shadow_color);
  135. // Bottom highlight
  136. painter.draw_line({ rect.width() - 2, 1 }, { rect.width() - 2, rect.height() - 3 }, highlight_color);
  137. painter.draw_line({ 1, rect.height() - 2 }, { rect.width() - 2, rect.height() - 2 }, highlight_color);
  138. } else if (hovered) {
  139. if (button_style == ButtonStyle::Coolbar) {
  140. // Base
  141. painter.fill_rect({ 1, 1, rect.width() - 2, rect.height() - 2 }, button_color);
  142. }
  143. // Top highlight
  144. painter.draw_line({ 1, 1 }, { rect.width() - 2, 1 }, highlight_color);
  145. painter.draw_line({ 1, 2 }, { 1, rect.height() - 2 }, highlight_color);
  146. // Bottom shadow
  147. painter.draw_line({ rect.width() - 2, 1 }, { rect.width() - 2, rect.height() - 3 }, shadow_color);
  148. painter.draw_line({ 1, rect.height() - 2 }, { rect.width() - 2, rect.height() - 2 }, shadow_color);
  149. }
  150. }
  151. void ClassicStylePainter::paint_surface(Painter& painter, const IntRect& rect, const Palette& palette, bool paint_vertical_lines, bool paint_top_line)
  152. {
  153. painter.fill_rect({ rect.x(), rect.y() + 1, rect.width(), rect.height() - 2 }, palette.button());
  154. painter.draw_line(rect.top_left(), rect.top_right(), paint_top_line ? palette.threed_highlight() : palette.button());
  155. painter.draw_line(rect.bottom_left(), rect.bottom_right(), palette.threed_shadow1());
  156. if (paint_vertical_lines) {
  157. painter.draw_line(rect.top_left().translated(0, 1), rect.bottom_left().translated(0, -1), palette.threed_highlight());
  158. painter.draw_line(rect.top_right(), rect.bottom_right().translated(0, -1), palette.threed_shadow1());
  159. }
  160. }
  161. void ClassicStylePainter::paint_frame(Painter& painter, const IntRect& rect, const Palette& palette, FrameShape shape, FrameShadow shadow, int thickness, bool skip_vertical_lines)
  162. {
  163. Color top_left_color;
  164. Color bottom_right_color;
  165. Color dark_shade = palette.threed_shadow1();
  166. Color light_shade = palette.threed_highlight();
  167. if (shape == FrameShape::Container && thickness >= 2) {
  168. if (shadow == FrameShadow::Raised) {
  169. dark_shade = palette.threed_shadow2();
  170. }
  171. }
  172. if (shadow == FrameShadow::Raised) {
  173. top_left_color = light_shade;
  174. bottom_right_color = dark_shade;
  175. } else if (shadow == FrameShadow::Sunken) {
  176. top_left_color = dark_shade;
  177. bottom_right_color = light_shade;
  178. } else if (shadow == FrameShadow::Plain) {
  179. top_left_color = dark_shade;
  180. bottom_right_color = dark_shade;
  181. }
  182. if (thickness >= 1) {
  183. painter.draw_line(rect.top_left(), rect.top_right(), top_left_color);
  184. painter.draw_line(rect.bottom_left(), rect.bottom_right(), bottom_right_color);
  185. if (shape != FrameShape::Panel || !skip_vertical_lines) {
  186. painter.draw_line(rect.top_left().translated(0, 1), rect.bottom_left().translated(0, -1), top_left_color);
  187. painter.draw_line(rect.top_right(), rect.bottom_right().translated(0, -1), bottom_right_color);
  188. }
  189. }
  190. if (shape == FrameShape::Container && thickness >= 2) {
  191. Color top_left_color;
  192. Color bottom_right_color;
  193. Color dark_shade = palette.threed_shadow2();
  194. Color light_shade = palette.button();
  195. if (shadow == FrameShadow::Raised) {
  196. dark_shade = palette.threed_shadow1();
  197. top_left_color = light_shade;
  198. bottom_right_color = dark_shade;
  199. } else if (shadow == FrameShadow::Sunken) {
  200. top_left_color = dark_shade;
  201. bottom_right_color = light_shade;
  202. } else if (shadow == FrameShadow::Plain) {
  203. top_left_color = dark_shade;
  204. bottom_right_color = dark_shade;
  205. }
  206. IntRect inner_container_frame_rect = rect.shrunken(2, 2);
  207. painter.draw_line(inner_container_frame_rect.top_left(), inner_container_frame_rect.top_right(), top_left_color);
  208. painter.draw_line(inner_container_frame_rect.bottom_left(), inner_container_frame_rect.bottom_right(), bottom_right_color);
  209. painter.draw_line(inner_container_frame_rect.top_left().translated(0, 1), inner_container_frame_rect.bottom_left().translated(0, -1), top_left_color);
  210. painter.draw_line(inner_container_frame_rect.top_right(), inner_container_frame_rect.bottom_right().translated(0, -1), bottom_right_color);
  211. }
  212. if (shape == FrameShape::Box && thickness >= 2) {
  213. swap(top_left_color, bottom_right_color);
  214. IntRect inner_rect = rect.shrunken(2, 2);
  215. painter.draw_line(inner_rect.top_left(), inner_rect.top_right(), top_left_color);
  216. painter.draw_line(inner_rect.bottom_left(), inner_rect.bottom_right(), bottom_right_color);
  217. painter.draw_line(inner_rect.top_left().translated(0, 1), inner_rect.bottom_left().translated(0, -1), top_left_color);
  218. painter.draw_line(inner_rect.top_right(), inner_rect.bottom_right().translated(0, -1), bottom_right_color);
  219. }
  220. }
  221. void ClassicStylePainter::paint_window_frame(Painter& painter, const IntRect& rect, const Palette& palette)
  222. {
  223. Color base_color = palette.button();
  224. Color dark_shade = palette.threed_shadow2();
  225. Color mid_shade = palette.threed_shadow1();
  226. Color light_shade = palette.threed_highlight();
  227. painter.draw_line(rect.top_left(), rect.top_right(), base_color);
  228. painter.draw_line(rect.top_left().translated(0, 1), rect.bottom_left(), base_color);
  229. painter.draw_line(rect.top_left().translated(1, 1), rect.top_right().translated(-1, 1), light_shade);
  230. painter.draw_line(rect.top_left().translated(1, 1), rect.bottom_left().translated(1, -1), light_shade);
  231. painter.draw_line(rect.top_left().translated(2, 2), rect.top_right().translated(-2, 2), base_color);
  232. painter.draw_line(rect.top_left().translated(2, 2), rect.bottom_left().translated(2, -2), base_color);
  233. painter.draw_line(rect.top_left().translated(3, 3), rect.top_right().translated(-3, 3), base_color);
  234. painter.draw_line(rect.top_left().translated(3, 3), rect.bottom_left().translated(3, -3), base_color);
  235. painter.draw_line(rect.top_right(), rect.bottom_right(), dark_shade);
  236. painter.draw_line(rect.top_right().translated(-1, 1), rect.bottom_right().translated(-1, -1), mid_shade);
  237. painter.draw_line(rect.top_right().translated(-2, 2), rect.bottom_right().translated(-2, -2), base_color);
  238. painter.draw_line(rect.top_right().translated(-3, 3), rect.bottom_right().translated(-3, -3), base_color);
  239. painter.draw_line(rect.bottom_left(), rect.bottom_right(), dark_shade);
  240. painter.draw_line(rect.bottom_left().translated(1, -1), rect.bottom_right().translated(-1, -1), mid_shade);
  241. painter.draw_line(rect.bottom_left().translated(2, -2), rect.bottom_right().translated(-2, -2), base_color);
  242. painter.draw_line(rect.bottom_left().translated(3, -3), rect.bottom_right().translated(-3, -3), base_color);
  243. }
  244. void ClassicStylePainter::paint_progressbar(Painter& painter, const IntRect& rect, const Palette& palette, int min, int max, int value, const StringView& text, Orientation orientation)
  245. {
  246. // First we fill the entire widget with the gradient. This incurs a bit of
  247. // overdraw but ensures a consistent look throughout the progression.
  248. Color start_color = palette.active_window_border1();
  249. Color end_color = palette.active_window_border2();
  250. painter.fill_rect_with_gradient(orientation, rect, start_color, end_color);
  251. if (!text.is_null()) {
  252. painter.draw_text(rect.translated(1, 1), text, TextAlignment::Center, palette.base_text());
  253. painter.draw_text(rect, text, TextAlignment::Center, palette.base_text().inverted());
  254. }
  255. float range_size = max - min;
  256. float progress = (value - min) / range_size;
  257. // Then we carve out a hole in the remaining part of the widget.
  258. // We draw the text a third time, clipped and inverse, for sharp contrast.
  259. IntRect hole_rect;
  260. if (orientation == Orientation::Horizontal) {
  261. float progress_width = progress * rect.width();
  262. hole_rect = { (int)progress_width, 0, (int)(rect.width() - progress_width), rect.height() };
  263. } else {
  264. float progress_height = progress * rect.height();
  265. hole_rect = { 0, 0, rect.width(), (int)(rect.height() - progress_height) };
  266. }
  267. hole_rect.translate_by(rect.location());
  268. hole_rect.set_right_without_resize(rect.right());
  269. PainterStateSaver saver(painter);
  270. painter.fill_rect(hole_rect, palette.base());
  271. painter.add_clip_rect(hole_rect);
  272. if (!text.is_null())
  273. painter.draw_text(rect.translated(0, 0), text, TextAlignment::Center, palette.base_text());
  274. }
  275. static RefPtr<Gfx::Bitmap> s_unfilled_circle_bitmap;
  276. static RefPtr<Gfx::Bitmap> s_filled_circle_bitmap;
  277. static RefPtr<Gfx::Bitmap> s_changing_filled_circle_bitmap;
  278. static RefPtr<Gfx::Bitmap> s_changing_unfilled_circle_bitmap;
  279. static const Gfx::Bitmap& circle_bitmap(bool checked, bool changing)
  280. {
  281. if (changing)
  282. return checked ? *s_changing_filled_circle_bitmap : *s_changing_unfilled_circle_bitmap;
  283. return checked ? *s_filled_circle_bitmap : *s_unfilled_circle_bitmap;
  284. }
  285. void ClassicStylePainter::paint_radio_button(Painter& painter, const IntRect& rect, const Palette&, bool is_checked, bool is_being_pressed)
  286. {
  287. if (!s_unfilled_circle_bitmap) {
  288. s_unfilled_circle_bitmap = Bitmap::load_from_file("/res/icons/serenity/unfilled-radio-circle.png");
  289. s_filled_circle_bitmap = Bitmap::load_from_file("/res/icons/serenity/filled-radio-circle.png");
  290. s_changing_filled_circle_bitmap = Bitmap::load_from_file("/res/icons/serenity/changing-filled-radio-circle.png");
  291. s_changing_unfilled_circle_bitmap = Bitmap::load_from_file("/res/icons/serenity/changing-unfilled-radio-circle.png");
  292. }
  293. auto& bitmap = circle_bitmap(is_checked, is_being_pressed);
  294. painter.blit(rect.location(), bitmap, bitmap.rect());
  295. }
  296. static const char* s_checked_bitmap_data = {
  297. " "
  298. " # "
  299. " ## "
  300. " ### "
  301. " ## ### "
  302. " ##### "
  303. " ### "
  304. " # "
  305. " "
  306. };
  307. static Gfx::CharacterBitmap* s_checked_bitmap;
  308. static const int s_checked_bitmap_width = 9;
  309. static const int s_checked_bitmap_height = 9;
  310. void ClassicStylePainter::paint_check_box(Painter& painter, const IntRect& rect, const Palette& palette, bool is_enabled, bool is_checked, bool is_being_pressed)
  311. {
  312. painter.fill_rect(rect, is_enabled ? palette.base() : palette.window());
  313. paint_frame(painter, rect, palette, Gfx::FrameShape::Container, Gfx::FrameShadow::Sunken, 2);
  314. if (is_being_pressed) {
  315. // FIXME: This color should not be hard-coded.
  316. painter.draw_rect(rect.shrunken(4, 4), Color::MidGray);
  317. }
  318. if (is_checked) {
  319. if (!s_checked_bitmap)
  320. s_checked_bitmap = &Gfx::CharacterBitmap::create_from_ascii(s_checked_bitmap_data, s_checked_bitmap_width, s_checked_bitmap_height).leak_ref();
  321. painter.draw_bitmap(rect.shrunken(4, 4).location(), *s_checked_bitmap, is_enabled ? palette.base_text() : palette.threed_shadow1());
  322. }
  323. }
  324. void ClassicStylePainter::paint_transparency_grid(Painter& painter, const IntRect& rect, const Palette& palette)
  325. {
  326. painter.fill_rect_with_checkerboard(rect, { 8, 8 }, palette.base().darkened(0.9), palette.base());
  327. }
  328. }