Merge 2d50269730 into e56ff89cf3

Improve example style. (#1101 )
Based uppon @yurenchen000 suggestion. Fixed:https://github.com/ArthurSonzogni/FTXUI/issues/1090
2025-12-16 01:48:56 +08:00 · 2025-08-20 02:00:26 -07:00 · 2025-08-20 06:53:42 +02:00 · 2025-06-28 09:15:37 -07:00 · 2025-06-28 08:51:41 -07:00
7 changed files with 210 additions and 29 deletions
--- a/examples/index.css
+++ b/examples/index.css
@@ -1,15 +1,19 @@
@import url(https://fonts.googleapis.com/css?family=Khula:700);
 html {
  --toc-width: 250px;
 }
 body {
-  background-color:#EEE;
+  background-color: #EEE;
-  padding:0px;
+  padding: 0px;
-  margin:0px;
+  margin: 0px;
  font-family: Khula, Helvetica, sans-serif;
  font-size: 130%;
 }
 .page {
-  max-width:1300px;
+  max-width: 1300px;
  margin: auto;
  padding: 10px;
 }
@@ -20,7 +24,7 @@ a {
  margin: 0 -.25rem;
  padding: 0 .25rem;
  transition: color .3s ease-in-out,
-              box-shadow .3s ease-in-out;
+    box-shadow .3s ease-in-out;
 }
 a:hover {
@@ -30,45 +34,48 @@ a:hover {
 h1 {
  text-decoration: underline;
-  width:100%;
+  width: 100%;
-  background-color: rgba(100,100,255,0.5);
+  background-color: rgba(100, 100, 255, 0.5);
  padding: 10px;
  margin: 0;
 }
 #selectExample {
-  flex:1;
+  flex: 1;
 }
-#selectExample, #selectExample option {
+#selectExample,
 #selectExample option {
  font-size: 16px;
  font-family: sans-serif;
  font-weight: 700;
  line-height: 1.3;
-  border:0px;
+  border: 0px;
  background-color: #bbb;
-  color:black;
+  color: black;
 }
 #selectExample:focus {
-  outline:none;
+  outline: none;
 }
 #terminal {
-  width:100%;
+  width: 100%;
  height 500px;
  height: calc(clamp(200px, 100vh - 300px, 900px));
  overflow: hidden;
-  border:none;
+  border: none;
-  background-color:black;
+  padding: 10px;
  margin: 10px;
 }
 #terminalContainer {
  overflow: hidden;
  border-radius: 10px;
-  box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.75),
+  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.75),
-  0px 2px 80px 0px rgba(0,0,0,0.50);
+    0px 2px 80px 0px rgba(0, 0, 0, 0.50);
  background-color: black;
 }
 .fakeButtons {
@@ -76,7 +83,7 @@ h1 {
  width: 10px;
  border-radius: 50%;
  border: 1px solid #000;
-  margin:6px;
+  margin: 6px;
  background-color: #ff3b47;
  border-color: #9d252b;
  display: inline-block;
@@ -95,13 +102,79 @@ h1 {
 }
 .fakeMenu {
-  display:flex;
+  display: flex;
  flex-direction: row;
-  width:100%;
+  width: 100%;
  box-sizing: border-box;
  height: 25px;
  background-color: #bbb;
-  color:black;
+  color: black;
  margin: 0 auto;
  overflow: hidden;
 }
 .toc-container {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--toc-width);
  background: white;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
 }
 .toc-title {
  font-weight: bold;
  margin-bottom: 5px;
  font-size: 0.9em;
  color: #555;
  position: sticky;
  transition: position 1.0s ease-in-out;
  top: 0;
  z-index: 1;
  padding: 20px;
  margin: 0;
  border-bottom: 1px solid #ddd;
  /* Gradient background for the title */
  background-color: #f0f0f0;
 }
 .toc-item {
  padding: 3px 8px;
  margin: 0;
  cursor: pointer;
  font-size: 0.85em;
  border-radius: 3px;
  transition: background 0.2s;
 }
 .toc-item:hover {
  background: #f0f0f0;
 }
 .toc-item.selected {
  background: #e0e0e0;
  font-weight: bold;
 }
@media (max-width: 1024px) {
  .toc-container {
    display: none;
  }
  .page {
    margin-left: 0;
  }
 }
@media (min-width: 1025px) {
  .page {
    margin-left: calc(var(--toc-width) + 20px);
  }
 }
--- a/examples/index.html
+++ b/examples/index.html
@@ -9,13 +9,18 @@
    <script type="module" src="index.mjs"></script>
  </head>
  <body>
    <div class="toc-container">
      <div class="toc-list"></div>
    </div>
    <script id="example_script"></script>
    <div class="page">
      <p>
        <a href="https://github.com/ArthurSonzogni/FTXUI">FTXUI</a> is a simple
        functional C++ library for terminal user interface. <br/>
-        This showcases the: <a href="https://github.com/ArthurSonzogni/FTXUI/tree/master/examples">./example/</a> folder. <br/>
+        This showcases the: <a
          href="https://github.com/ArthurSonzogni/FTXUI/tree/master/examples">./example/</a>
        folder. See <a id="source">source</a>.
      </p>
      <div id="terminalContainer">
--- a/examples/index.mjs
+++ b/examples/index.mjs
@@ -92,6 +92,69 @@ window.Module = {
  },
 };
 const source = document.querySelector("#source");
 source.href = "https://github.com/ArthurSonzogni/FTXUI/blob/main/examples/" + example + ".cpp";
 const words = example.split('/')
 words[1] = "ftxui_example_" + words[1] + ".js"
 document.querySelector("#example_script").src = words.join('/');
 // Table of Contents (TOC) for quick navigation.
 // Get select element
 const selectEl = document.querySelector('select#selectExample');
 if (!selectEl) {
  console.error('select#selectExample not found');
 } else {
  // Get TOC container
  const tocContainer = document.querySelector('.toc-container');
  const tocList = tocContainer.querySelector('.toc-list');
  // Group options by directory
  const groupedOptions = Array.from(selectEl.options).reduce((acc, option) => {
    const [dir, file] = option.text.split('/');
    if (!acc[dir]) {
      acc[dir] = [];
    }
    acc[dir].push({ option, file });
    return acc;
  }, {});
  // Generate TOC items
  for (const dir in groupedOptions) {
    const dirContainer = document.createElement('div');
    const dirHeader = document.createElement('div');
    dirHeader.textContent = dir;
    dirHeader.className = 'toc-title';
    dirContainer.appendChild(dirHeader);
    groupedOptions[dir].forEach(({ option, file }) => {
      const tocItem = document.createElement('div');
      tocItem.textContent = file;
      tocItem.className = 'toc-item';
      if (selectEl.options[selectEl.selectedIndex].value === option.value) {
        tocItem.classList.add('selected');
      }
      // Click handler
      tocItem.addEventListener('click', () => {
        for(let i=0; i<selectEl.options.length; ++i) {
          if (selectEl.options[i].value == option.value) {
            selectEl.selectedIndex = i;
            break;
          }
        }
        history.pushState({}, "", "?file=" + option.value);
        location.reload();
      });
      dirContainer.appendChild(tocItem);
    });
    tocList.appendChild(dirContainer);
  }
 }''
--- a/src/ftxui/dom/box_helper.cpp
+++ b/src/ftxui/dom/box_helper.cpp
@@ -58,11 +58,39 @@ void ComputeShrinkHard(std::vector<Element>* elements,
    element.size = element.min_size + added_space;
  }
 }
 // Called when the size allowed is lower than the requested size, and the
 // shrinkable element can not absorbe the (negative) extra_space. This assign
 // zero to shrinkable elements and distribute the remaining (negative)
 // extra_space toward the other non shrinkable elements.
 void ComputeShrinkHardHack(std::vector<Element>* elements,
                       int extra_space,
                       int size)
 {
  for (Element& element : *elements)
  {
    if (element.flex_shrink != 0)
    {
      element.size = 0;
    }
  }
  for (auto it = elements->rbegin(); it != elements->rend(); ++it)
  {
    Element& element = *it;
    auto remove = std::min(element.min_size, -extra_space);
    element.size = element.min_size - remove;
    extra_space += remove;
  }
 }
 }  // namespace
-void Compute(std::vector<Element>* elements, int target_size) {
+void Compute(std::vector<Element>* elements, int target_size, bool hack) {
  int size = 0;
  int flex_grow_sum = 0;
  int flex_shrink_sum = 0;
@@ -84,8 +112,14 @@ void Compute(std::vector<Element>* elements, int target_size) {
    ComputeShrinkEasy(elements, extra_space, flex_shrink_sum);
  } else {
-    ComputeShrinkHard(elements, extra_space + flex_shrink_size,
+    if (hack)
-                      size - flex_shrink_size);
+    {
      ComputeShrinkHardHack(elements, extra_space + flex_shrink_size, size - flex_shrink_size);
    }
    else
    {
      ComputeShrinkHard(elements, extra_space + flex_shrink_size, size - flex_shrink_size);
    }
  }
 }
--- a/src/ftxui/dom/box_helper.hpp
+++ b/src/ftxui/dom/box_helper.hpp
@@ -19,7 +19,7 @@ struct Element {
  int size = 0;
 };
-void Compute(std::vector<Element>* elements, int target_size);
+void Compute(std::vector<Element>* elements, int target_size, bool hack=false);
 }  // namespace ftxui::box_helper
 #endif /* end of include guard: FTXUI_DOM_BOX_HELPER_HPP */
--- a/src/ftxui/dom/gridbox.cpp
+++ b/src/ftxui/dom/gridbox.cpp
@@ -46,6 +46,12 @@ class GridBox : public Node {
        line.push_back(filler());
      }
    }
    for (const auto& line : lines_) {
      for (const auto &element : line) {
        children_.push_back( element );
      }
    }
  }
  void ComputeRequirement() override {
@@ -109,7 +115,7 @@ class GridBox : public Node {
    const int target_size_x = box.x_max - box.x_min + 1;
    const int target_size_y = box.y_max - box.y_min + 1;
-    box_helper::Compute(&elements_x, target_size_x);
+    box_helper::Compute(&elements_x, target_size_x, true);
    box_helper::Compute(&elements_y, target_size_y);
    Box box_y = box;
--- a/src/ftxui/dom/table.cpp
+++ b/src/ftxui/dom/table.cpp
@@ -216,13 +216,13 @@ Element Table::Render() {
      // Line
      if ((x + y) % 2 == 1) {
-        it = std::move(it) | flex;
+        it = std::move(it)| flex;  //it = std::move(it); // | flex;
        continue;
      }
      // Cells
      if ((x % 2) == 1 && (y % 2) == 1) {
-        it = std::move(it) | flex_shrink;
+        // it = std::move(it) | flex_shrink;   //it = std::move(it) | flex_shrink;
        continue;
      }
Author	SHA1	Message	Date
KenReneris	54a1ce0eaa	Merge `2d50269730` into `e56ff89cf3`	2025-08-20 02:00:26 -07:00
Arthur Sonzogni	e56ff89cf3	Improve example style. (#1101 ) Some checks failed Build / Bazel, ${{ matrix.cxx }}, ${{ matrix.os }} (cl, cl, windows-latest) (push) Has been cancelled Details Build / Bazel, ${{ matrix.cxx }}, ${{ matrix.os }} (clang, clang++, macos-latest) (push) Has been cancelled Details Build / Bazel, ${{ matrix.cxx }}, ${{ matrix.os }} (clang, clang++, ubuntu-latest) (push) Has been cancelled Details Build / Bazel, ${{ matrix.cxx }}, ${{ matrix.os }} (gcc, g++, macos-latest) (push) Has been cancelled Details Build / Bazel, ${{ matrix.cxx }}, ${{ matrix.os }} (gcc, g++, ubuntu-latest) (push) Has been cancelled Details Build / CMake, ${{ matrix.compiler }}, ${{ matrix.os }} (cl, Windows MSVC, windows-latest) (push) Has been cancelled Details Build / CMake, ${{ matrix.compiler }}, ${{ matrix.os }} (gcc, Linux GCC, ubuntu-latest) (push) Has been cancelled Details Build / CMake, ${{ matrix.compiler }}, ${{ matrix.os }} (llvm, llvm-cov gcov, Linux Clang, ubuntu-latest) (push) Has been cancelled Details Build / CMake, ${{ matrix.compiler }}, ${{ matrix.os }} (llvm, llvm-cov gcov, MacOS clang, macos-latest) (push) Has been cancelled Details Build / Test modules (llvm, ubuntu-latest) (push) Has been cancelled Details Documentation / documentation (push) Has been cancelled Details Based uppon @yurenchen000 suggestion. Fixed:https://github.com/ArthurSonzogni/FTXUI/issues/1090	2025-08-20 06:53:42 +02:00
Ken Reneris	2d50269730	private changes. don't shrink table content	2025-06-28 09:15:37 -07:00
Ken Reneris	df2ddcc588	Add gridbox children to children_ so that layout will see need_iteration when a flex node is in the grid	2025-06-28 08:51:41 -07:00