TabWidget.cpp 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590
  1. /*
  2. * Copyright (c) 2018-2021, Andreas Kling <kling@serenityos.org>
  3. *
  4. * SPDX-License-Identifier: BSD-2-Clause
  5. */
  6. #include <AK/JsonObject.h>
  7. #include <AK/JsonValue.h>
  8. #include <LibGUI/BoxLayout.h>
  9. #include <LibGUI/Painter.h>
  10. #include <LibGUI/TabWidget.h>
  11. #include <LibGUI/Window.h>
  12. #include <LibGfx/Bitmap.h>
  13. #include <LibGfx/Font.h>
  14. #include <LibGfx/Palette.h>
  15. #include <LibGfx/StylePainter.h>
  16. REGISTER_WIDGET(GUI, TabWidget)
  17. namespace GUI {
  18. TabWidget::TabWidget()
  19. {
  20. set_focus_policy(FocusPolicy::NoFocus);
  21. REGISTER_MARGINS_PROPERTY("container_margins", container_margins, set_container_margins);
  22. REGISTER_BOOL_PROPERTY("uniform_tabs", uniform_tabs, set_uniform_tabs);
  23. register_property(
  24. "text_alignment",
  25. [this] { return Gfx::to_string(text_alignment()); },
  26. [this](auto& value) {
  27. auto alignment = Gfx::text_alignment_from_string(value.to_string());
  28. if (alignment.has_value()) {
  29. set_text_alignment(alignment.value());
  30. return true;
  31. }
  32. return false;
  33. });
  34. }
  35. TabWidget::~TabWidget()
  36. {
  37. }
  38. void TabWidget::add_widget(const StringView& title, Widget& widget)
  39. {
  40. m_tabs.append({ title, nullptr, &widget });
  41. add_child(widget);
  42. update_focus_policy();
  43. if (on_tab_count_change)
  44. on_tab_count_change(m_tabs.size());
  45. }
  46. void TabWidget::remove_widget(Widget& widget)
  47. {
  48. VERIFY(widget.parent() == this);
  49. if (active_widget() == &widget)
  50. activate_next_tab();
  51. m_tabs.remove_first_matching([&widget](auto& entry) { return &widget == entry.widget; });
  52. remove_child(widget);
  53. update_focus_policy();
  54. if (on_tab_count_change)
  55. on_tab_count_change(m_tabs.size());
  56. }
  57. void TabWidget::remove_all_tabs_except(Widget& widget)
  58. {
  59. VERIFY(widget.parent() == this);
  60. set_active_widget(&widget);
  61. m_tabs.remove_all_matching([this, &widget](auto& entry) {
  62. bool is_other = &widget != entry.widget;
  63. if (is_other)
  64. remove_child(*entry.widget);
  65. return is_other;
  66. });
  67. VERIFY(m_tabs.size() == 1);
  68. update_focus_policy();
  69. if (on_tab_count_change)
  70. on_tab_count_change(1);
  71. }
  72. void TabWidget::update_focus_policy()
  73. {
  74. FocusPolicy policy;
  75. if (is_bar_visible() && !m_tabs.is_empty())
  76. policy = FocusPolicy::TabFocus;
  77. else
  78. policy = FocusPolicy::NoFocus;
  79. set_focus_policy(policy);
  80. }
  81. void TabWidget::set_active_widget(Widget* widget)
  82. {
  83. if (widget == m_active_widget)
  84. return;
  85. bool active_widget_had_focus = m_active_widget && m_active_widget->has_focus_within();
  86. if (m_active_widget)
  87. m_active_widget->set_visible(false);
  88. m_active_widget = widget;
  89. if (m_active_widget) {
  90. m_active_widget->set_relative_rect(child_rect_for_size(size()));
  91. if (active_widget_had_focus)
  92. m_active_widget->set_focus(true);
  93. m_active_widget->set_visible(true);
  94. deferred_invoke([this] {
  95. if (on_change)
  96. on_change(*m_active_widget);
  97. });
  98. }
  99. update_bar();
  100. }
  101. void TabWidget::set_tab_index(int index)
  102. {
  103. if (m_tabs.at(index).widget == m_active_widget)
  104. return;
  105. set_active_widget(m_tabs.at(index).widget);
  106. update_bar();
  107. }
  108. void TabWidget::resize_event(ResizeEvent& event)
  109. {
  110. if (!m_active_widget)
  111. return;
  112. m_active_widget->set_relative_rect(child_rect_for_size(event.size()));
  113. }
  114. Gfx::IntRect TabWidget::child_rect_for_size(const Gfx::IntSize& size) const
  115. {
  116. Gfx::IntRect rect;
  117. switch (m_tab_position) {
  118. case TabPosition::Top:
  119. rect = { { m_container_margins.left(), bar_height() + m_container_margins.top() }, { size.width() - m_container_margins.left() - m_container_margins.right(), size.height() - bar_height() - m_container_margins.top() - m_container_margins.bottom() } };
  120. break;
  121. case TabPosition::Bottom:
  122. rect = { { m_container_margins.left(), m_container_margins.top() }, { size.width() - m_container_margins.left() - m_container_margins.right(), size.height() - bar_height() - m_container_margins.top() - m_container_margins.bottom() } };
  123. break;
  124. }
  125. if (rect.is_empty())
  126. return {};
  127. return rect;
  128. }
  129. void TabWidget::child_event(Core::ChildEvent& event)
  130. {
  131. if (!event.child() || !is<Widget>(*event.child()))
  132. return Widget::child_event(event);
  133. auto& child = verify_cast<Widget>(*event.child());
  134. if (event.type() == Event::ChildAdded) {
  135. if (!m_active_widget)
  136. set_active_widget(&child);
  137. else if (m_active_widget != &child)
  138. child.set_visible(false);
  139. } else if (event.type() == Event::ChildRemoved) {
  140. if (m_active_widget == &child) {
  141. Widget* new_active_widget = nullptr;
  142. for_each_child_widget([&](auto& new_child) {
  143. new_active_widget = &new_child;
  144. return IterationDecision::Break;
  145. });
  146. set_active_widget(new_active_widget);
  147. }
  148. }
  149. Widget::child_event(event);
  150. }
  151. Gfx::IntRect TabWidget::bar_rect() const
  152. {
  153. switch (m_tab_position) {
  154. case TabPosition::Top:
  155. return { 0, 0, width(), bar_height() };
  156. case TabPosition::Bottom:
  157. return { 0, height() - bar_height(), width(), bar_height() };
  158. }
  159. VERIFY_NOT_REACHED();
  160. }
  161. Gfx::IntRect TabWidget::container_rect() const
  162. {
  163. switch (m_tab_position) {
  164. case TabPosition::Top:
  165. return { 0, bar_height(), width(), height() - bar_height() };
  166. case TabPosition::Bottom:
  167. return { 0, 0, width(), height() - bar_height() };
  168. }
  169. VERIFY_NOT_REACHED();
  170. }
  171. void TabWidget::paint_event(PaintEvent& event)
  172. {
  173. if (!m_bar_visible)
  174. return;
  175. Painter painter(*this);
  176. painter.add_clip_rect(event.rect());
  177. painter.fill_rect(event.rect(), palette().button());
  178. if (!m_container_margins.is_null()) {
  179. Gfx::StylePainter::paint_frame(painter, container_rect(), palette(), Gfx::FrameShape::Container, Gfx::FrameShadow::Raised, 2);
  180. }
  181. auto paint_tab_icon_if_needed = [&](auto& icon, auto& button_rect, auto& text_rect) {
  182. if (!icon)
  183. return;
  184. Gfx::IntRect icon_rect { button_rect.x(), button_rect.y(), 16, 16 };
  185. icon_rect.translate_by(4, 3);
  186. painter.draw_scaled_bitmap(icon_rect, *icon, icon->rect());
  187. text_rect.set_x(icon_rect.right() + 1 + 4);
  188. text_rect.intersect(button_rect);
  189. // We want to be in perfect alignment with the icon rect at all times.
  190. auto icon_rect_difference = icon_rect.top() - text_rect.top();
  191. text_rect.set_top(text_rect.top() + icon_rect_difference);
  192. text_rect.set_height(text_rect.height() - icon_rect_difference);
  193. // ...unless our leftover height after text drawing is uneven, in which
  194. // case we want to bias towards the bottom when the tab position is at
  195. // the top.
  196. if ((text_rect.height() - font().glyph_height()) % 2 != 0 && m_tab_position == TabPosition::Top) {
  197. text_rect.set_top(text_rect.top() + 1);
  198. }
  199. };
  200. for (size_t i = 0; i < m_tabs.size(); ++i) {
  201. if (m_tabs[i].widget == m_active_widget)
  202. continue;
  203. bool hovered = i == m_hovered_tab_index;
  204. auto button_rect = this->button_rect(i);
  205. Gfx::StylePainter::paint_tab_button(painter, button_rect, palette(), false, hovered, m_tabs[i].widget->is_enabled(), m_tab_position == TabPosition::Top, window()->is_active());
  206. // First we get rid of the 1px sheen on the left, then the 2px shadow
  207. // on the right. Finally we shrink 3px from each side.
  208. auto tab_button_content_rect = button_rect.shrunken(2, 0);
  209. tab_button_content_rect.set_width(tab_button_content_rect.width() - 1);
  210. tab_button_content_rect.shrink(6, 0);
  211. if (m_tab_position == TabPosition::Top) {
  212. tab_button_content_rect.set_top(tab_button_content_rect.top() + 1);
  213. tab_button_content_rect.set_height(tab_button_content_rect.height() - 1);
  214. }
  215. paint_tab_icon_if_needed(m_tabs[i].icon, button_rect, tab_button_content_rect);
  216. tab_button_content_rect.set_width(tab_button_content_rect.width() - (m_close_button_enabled ? 16 : 0));
  217. painter.draw_text(tab_button_content_rect, m_tabs[i].title, m_text_alignment, palette().button_text(), Gfx::TextElision::Right);
  218. }
  219. for (size_t i = 0; i < m_tabs.size(); ++i) {
  220. if (m_tabs[i].widget != m_active_widget)
  221. continue;
  222. bool hovered = i == m_hovered_tab_index;
  223. auto button_rect = this->button_rect(i);
  224. Gfx::StylePainter::paint_tab_button(painter, button_rect, palette(), true, hovered, m_tabs[i].widget->is_enabled(), m_tab_position == TabPosition::Top, window()->is_active());
  225. // First we get rid of the 1px sheen on the left, then the 2px shadow
  226. // on the right. Finally we shrink 3px from each side.
  227. auto tab_button_content_rect = button_rect.shrunken(2, 0);
  228. tab_button_content_rect.set_width(tab_button_content_rect.width() - 1);
  229. tab_button_content_rect.shrink(6, 0);
  230. if (m_tab_position == TabPosition::Top) {
  231. tab_button_content_rect.set_top(tab_button_content_rect.top() + 1);
  232. tab_button_content_rect.set_height(tab_button_content_rect.height() - 1);
  233. }
  234. paint_tab_icon_if_needed(m_tabs[i].icon, button_rect, tab_button_content_rect);
  235. tab_button_content_rect.set_width(tab_button_content_rect.width() - (m_close_button_enabled ? 16 : 0));
  236. painter.draw_text(tab_button_content_rect, m_tabs[i].title, m_text_alignment, palette().button_text(), Gfx::TextElision::Right);
  237. if (is_focused()) {
  238. Gfx::IntRect focus_rect { 0, 0, min(tab_button_content_rect.width(), font().width(m_tabs[i].title)), font().glyph_height() };
  239. focus_rect.align_within(tab_button_content_rect, m_text_alignment);
  240. focus_rect.inflate(6, 4);
  241. painter.draw_focus_rect(focus_rect, palette().focus_outline());
  242. }
  243. if (m_tab_position == TabPosition::Top) {
  244. painter.draw_line(button_rect.bottom_left().translated(1, 1), button_rect.bottom_right().translated(-1, 1), palette().button());
  245. } else if (m_tab_position == TabPosition::Bottom) {
  246. painter.set_pixel(button_rect.top_left().translated(0, -1), palette().threed_highlight());
  247. painter.set_pixel(button_rect.top_right().translated(-1, -1), palette().threed_shadow1());
  248. painter.draw_line(button_rect.top_left().translated(1, -1), button_rect.top_right().translated(-2, -1), palette().button());
  249. painter.draw_line(button_rect.top_left().translated(1, -2), button_rect.top_right().translated(-2, -2), palette().button());
  250. }
  251. break;
  252. }
  253. if (!m_close_button_enabled)
  254. return;
  255. for (size_t i = 0; i < m_tabs.size(); ++i) {
  256. bool hovered_close_button = i == m_hovered_close_button_index;
  257. bool pressed_close_button = i == m_pressed_close_button_index;
  258. auto close_button_rect = this->close_button_rect(i);
  259. if (hovered_close_button)
  260. Gfx::StylePainter::paint_frame(painter, close_button_rect, palette(), Gfx::FrameShape::Box, pressed_close_button ? Gfx::FrameShadow::Sunken : Gfx::FrameShadow::Raised, 1);
  261. Gfx::IntRect icon_rect { close_button_rect.x() + 3, close_button_rect.y() + 3, 6, 6 };
  262. painter.draw_line(icon_rect.top_left(), icon_rect.bottom_right(), palette().button_text());
  263. painter.draw_line(icon_rect.top_right(), icon_rect.bottom_left(), palette().button_text());
  264. }
  265. }
  266. int TabWidget::uniform_tab_width() const
  267. {
  268. int minimum_tab_width = 24;
  269. int maximum_tab_width = 160;
  270. int total_tab_width = m_tabs.size() * maximum_tab_width;
  271. int tab_width = maximum_tab_width;
  272. int available_width = width() - bar_margin() * 2;
  273. if (total_tab_width > available_width)
  274. tab_width = available_width / m_tabs.size();
  275. return max(tab_width, minimum_tab_width);
  276. }
  277. void TabWidget::set_bar_visible(bool bar_visible)
  278. {
  279. m_bar_visible = bar_visible;
  280. if (m_active_widget)
  281. m_active_widget->set_relative_rect(child_rect_for_size(size()));
  282. update_bar();
  283. }
  284. Gfx::IntRect TabWidget::button_rect(size_t index) const
  285. {
  286. int x_offset = bar_margin();
  287. int close_button_offset = m_close_button_enabled ? 16 : 0;
  288. for (size_t i = 0; i < index; ++i) {
  289. auto tab_width = m_uniform_tabs ? uniform_tab_width() : m_tabs[i].width(font()) + close_button_offset;
  290. x_offset += tab_width;
  291. }
  292. Gfx::IntRect rect { x_offset, 0, m_uniform_tabs ? uniform_tab_width() : m_tabs[index].width(font()) + close_button_offset, bar_height() };
  293. if (m_tabs[index].widget != m_active_widget) {
  294. rect.translate_by(0, m_tab_position == TabPosition::Top ? 2 : 0);
  295. rect.set_height(rect.height() - 2);
  296. } else {
  297. rect.translate_by(-2, 0);
  298. rect.set_width(rect.width() + 4);
  299. }
  300. rect.translate_by(bar_rect().location());
  301. return rect;
  302. }
  303. Gfx::IntRect TabWidget::close_button_rect(size_t index) const
  304. {
  305. auto rect = button_rect(index);
  306. Gfx::IntRect close_button_rect { 0, 0, 12, 12 };
  307. if (m_tabs[index].widget == m_active_widget)
  308. close_button_rect.translate_by(rect.right() - 16, rect.top() + (m_tab_position == TabPosition::Top ? 5 : 4));
  309. else
  310. close_button_rect.translate_by(rect.right() - 15, rect.top() + (m_tab_position == TabPosition::Top ? 4 : 3));
  311. return close_button_rect;
  312. }
  313. int TabWidget::TabData::width(const Gfx::Font& font) const
  314. {
  315. auto width = 16 + font.width(title) + (icon ? (16 + 4) : 0);
  316. // NOTE: This needs to always be an odd number, because the button rect
  317. // includes 3px of light and shadow on the left and right edges. If
  318. // the button rect width is not an odd number, the area left for the
  319. // text and the focus rect has an odd number of pixels, and this
  320. // causes the text (and subsequently the focus rect) to not be aligned
  321. // to the center perfectly.
  322. if (width % 2 == 0) {
  323. width++;
  324. }
  325. return width;
  326. }
  327. void TabWidget::mousedown_event(MouseEvent& event)
  328. {
  329. for (size_t i = 0; i < m_tabs.size(); ++i) {
  330. auto button_rect = this->button_rect(i);
  331. auto close_button_rect = this->close_button_rect(i);
  332. if (!button_rect.contains(event.position()))
  333. continue;
  334. if (event.button() == MouseButton::Left) {
  335. if (m_close_button_enabled && close_button_rect.contains(event.position())) {
  336. m_pressed_close_button_index = i;
  337. update_bar();
  338. return;
  339. }
  340. set_active_widget(m_tabs[i].widget);
  341. } else if (event.button() == MouseButton::Middle) {
  342. auto* widget = m_tabs[i].widget;
  343. deferred_invoke([this, widget] {
  344. if (on_middle_click && widget)
  345. on_middle_click(*widget);
  346. });
  347. }
  348. return;
  349. }
  350. }
  351. void TabWidget::mouseup_event(MouseEvent& event)
  352. {
  353. if (event.button() != MouseButton::Left)
  354. return;
  355. if (!m_close_button_enabled || !m_pressed_close_button_index.has_value())
  356. return;
  357. auto close_button_rect = this->close_button_rect(m_pressed_close_button_index.value());
  358. if (close_button_rect.contains(event.position())) {
  359. auto* widget = m_tabs[m_pressed_close_button_index.value()].widget;
  360. deferred_invoke([this, widget] {
  361. if (on_tab_close_click && widget)
  362. on_tab_close_click(*widget);
  363. });
  364. }
  365. m_pressed_close_button_index = {};
  366. }
  367. void TabWidget::mousemove_event(MouseEvent& event)
  368. {
  369. Optional<size_t> hovered_tab = {};
  370. Optional<size_t> hovered_close_button = {};
  371. for (size_t i = 0; i < m_tabs.size(); ++i) {
  372. auto button_rect = this->button_rect(i);
  373. auto close_button_rect = this->close_button_rect(i);
  374. if (close_button_rect.contains(event.position()))
  375. hovered_close_button = i;
  376. if (!button_rect.contains(event.position()))
  377. continue;
  378. hovered_tab = i;
  379. if (m_tabs[i].widget == m_active_widget)
  380. break;
  381. }
  382. if (!hovered_tab.has_value() && !hovered_close_button.has_value())
  383. return;
  384. m_hovered_tab_index = hovered_tab;
  385. m_hovered_close_button_index = hovered_close_button;
  386. update_bar();
  387. }
  388. void TabWidget::leave_event(Core::Event&)
  389. {
  390. if (m_hovered_tab_index.has_value() || m_hovered_close_button_index.has_value()) {
  391. m_hovered_tab_index = {};
  392. m_hovered_close_button_index = {};
  393. update_bar();
  394. }
  395. }
  396. void TabWidget::update_bar()
  397. {
  398. if (m_tabs.is_empty())
  399. return;
  400. auto invalidation_rect = bar_rect();
  401. invalidation_rect.set_height(invalidation_rect.height() + 1);
  402. invalidation_rect.set_right(button_rect(m_tabs.size() - 1).right());
  403. update(invalidation_rect);
  404. }
  405. void TabWidget::set_tab_position(TabPosition tab_position)
  406. {
  407. if (m_tab_position == tab_position)
  408. return;
  409. m_tab_position = tab_position;
  410. if (m_active_widget)
  411. m_active_widget->set_relative_rect(child_rect_for_size(size()));
  412. update();
  413. }
  414. Optional<size_t> TabWidget::active_tab_index() const
  415. {
  416. for (size_t i = 0; i < m_tabs.size(); i++) {
  417. if (m_tabs.at(i).widget == m_active_widget)
  418. return i;
  419. }
  420. return {};
  421. }
  422. void TabWidget::set_tab_title(Widget& tab, const StringView& title)
  423. {
  424. for (auto& t : m_tabs) {
  425. if (t.widget == &tab) {
  426. if (t.title != title) {
  427. t.title = title;
  428. update();
  429. }
  430. return;
  431. }
  432. }
  433. }
  434. void TabWidget::set_tab_icon(Widget& tab, const Gfx::Bitmap* icon)
  435. {
  436. for (auto& t : m_tabs) {
  437. if (t.widget == &tab) {
  438. t.icon = icon;
  439. update();
  440. return;
  441. }
  442. }
  443. }
  444. void TabWidget::activate_next_tab()
  445. {
  446. if (m_tabs.size() <= 1)
  447. return;
  448. auto index = active_tab_index();
  449. if (!index.has_value())
  450. return;
  451. auto next_index = index.value() + 1;
  452. if (next_index >= m_tabs.size())
  453. next_index = 0;
  454. set_active_widget(m_tabs.at(next_index).widget);
  455. }
  456. void TabWidget::activate_previous_tab()
  457. {
  458. if (m_tabs.size() <= 1)
  459. return;
  460. auto index = active_tab_index();
  461. if (!index.has_value())
  462. return;
  463. size_t previous_index = 0;
  464. if (index.value() == 0)
  465. previous_index = m_tabs.size() - 1;
  466. else
  467. previous_index = index.value() - 1;
  468. set_active_widget(m_tabs.at(previous_index).widget);
  469. }
  470. void TabWidget::keydown_event(KeyEvent& event)
  471. {
  472. if (event.ctrl() && event.key() == Key_Tab) {
  473. if (event.shift())
  474. activate_previous_tab();
  475. else
  476. activate_next_tab();
  477. event.accept();
  478. return;
  479. }
  480. if (is_focused()) {
  481. if (!event.modifiers() && event.key() == Key_Left) {
  482. activate_previous_tab();
  483. event.accept();
  484. return;
  485. }
  486. if (!event.modifiers() && event.key() == Key_Right) {
  487. activate_next_tab();
  488. event.accept();
  489. return;
  490. }
  491. }
  492. Widget::keydown_event(event);
  493. }
  494. void TabWidget::context_menu_event(ContextMenuEvent& context_menu_event)
  495. {
  496. for (size_t i = 0; i < m_tabs.size(); ++i) {
  497. auto button_rect = this->button_rect(i);
  498. if (!button_rect.contains(context_menu_event.position()))
  499. continue;
  500. auto* widget = m_tabs[i].widget;
  501. deferred_invoke([this, widget, context_menu_event] {
  502. if (on_context_menu_request && widget)
  503. on_context_menu_request(*widget, context_menu_event);
  504. });
  505. return;
  506. }
  507. }
  508. void TabWidget::set_container_margins(GUI::Margins const& margins)
  509. {
  510. m_container_margins = margins;
  511. update();
  512. }
  513. }