@bigplay/tree-view-core 0.3.1 → 0.5.0

package/dist/types.d.ts

@@ -4,8 +4,15 @@
  */
 /** Куда растёт дерево: корень сверху / снизу / слева / справа. */
 export type Direction = 'top-to-bottom' | 'bottom-to-top' | 'left-to-right' | 'right-to-left';
-/** Форма соединительной линии между родителем и ребёнком. */
-export type LinkStyle = 'straight' | 'elbow' | 'curve';
+/**
+ * Форма соединительной линии между родителем и ребёнком.
+ *
+ * `'bracket'` — как в турнирной сетке: дети одного родителя сходятся в одну
+ * вертикаль, и уже от её середины линия идёт к родителю. Отличается от
+ * `'elbow'` только там, где родитель стоит не по центру своих детей —
+ * например при `levelLayout: 'stack'`.
+ */
+export type LinkStyle = 'straight' | 'elbow' | 'curve' | 'bracket';
 /**
  * Размер карточки: одно число на все узлы или функция от узла.
  *
@@ -13,6 +20,28 @@ export type LinkStyle = 'straight' | 'elbow' | 'curve';
  * у финала одна строка, а у остальных матчей две.
  */
 export type NodeSize<T> = number | ((node: TreeNode<T>) => number);
+/**
+ * Расстояние между соседями: одно число или функция от узла и того,
+ * сколько всего узлов на его уровне.
+ *
+ * Счётчик нужен, когда отступ зависит от плотности: в раунде на восемь матчей
+ * их стоит развести подальше, а в полуфинале — свести поближе.
+ */
+export type GapSize<T> = number | ((node: TreeNode<T>, levelCount: number) => number);
+/**
+ * Как расставлять узлы поперёк уровня:
+ *  - `'tree'` (по умолчанию) — родитель по центру своих детей, как в турнирной сетке;
+ *  - `'stack'` — каждый уровень укладывается сам по себе, узел за узлом от начала.
+ *    Нужен, когда уровни показываются по одному и их высота важнее, чем то,
+ *    насколько ровно родитель сидит между детьми.
+ */
+export type LevelLayout = 'tree' | 'stack';
+/**
+ * Куда прижимать уровень в раскладке `'stack'`:
+ *  - `'start'` (по умолчанию) — к началу полосы, все уровни начинаются с одной черты;
+ *  - `'center'` — по центру самого населённого уровня.
+ */
+export type LevelAlign = 'start' | 'center';
 /** Настройки раскладки. Все размеры — в пикселях. */
 export interface TreeViewOptions<T = any> {
     /** Ширина карточки узла. */
@@ -22,11 +51,34 @@ export interface TreeViewOptions<T = any> {
     /** Пустое место между уровнями (между родителем и детьми). */
     levelGap: number;
     /** Пустое место между соседними узлами одного уровня. */
-    siblingGap: number;
+    siblingGap: GapSize<T>;
     /** Направление роста дерева. */
     direction: Direction;
     /** Форма линий. */
     linkStyle: LinkStyle;
+    /** Как расставлять узлы поперёк уровня. По умолчанию — `'tree'`. */
+    levelLayout?: LevelLayout;
+    /** Куда прижимать уровень при `levelLayout: 'stack'`. По умолчанию — `'start'`. */
+    levelAlign?: LevelAlign;
+    /**
+     * Пустое место между соседями с РАЗНЫМИ родителями — только в `'stack'`.
+     * Не задан — берётся `siblingGap`, и уровень идёт ровным шагом.
+     *
+     * Нужен, чтобы читалась структура: в турнирной сетке два матча сходятся
+     * в один следующий, и такую пару видно, только если внутри неё теснее,
+     * чем между парами.
+     */
+    groupGap?: GapSize<T>;
+    /**
+     * На каком расстоянии от карточки ребёнка проходит вертикальная часть
+     * «ступеньки» (`linkStyle: 'elbow'`). Не задан — ровно посередине между
+     * уровнями.
+     *
+     * Нужен, когда промежуток между уровнями большой: колено уезжает далеко
+     * вправо, и вместо скобки, объединяющей пару, у каждой карточки получается
+     * свой длинный хвост.
+     */
+    elbowOffset?: number;
 }
 /**
  * Узел дерева после нормализации входных данных.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigplay/tree-view-core",
-  "version": "0.3.1",
+  "version": "0.5.0",
   "description": "Раскладка дерева: чистые функции без привязки к фреймворку",
   "license": "MIT",
   "type": "module",

package/styles.css

@@ -19,12 +19,13 @@
   width: 100%;
   height: 100%;
   overflow: hidden;
-  /* Без этого мобильный браузер сам скроллит страницу вместо перетаскивания. */
-  touch-action: none;
 }
 
 .tree-view--pannable {
   cursor: grab;
+  /* Без этого мобильный браузер сам скроллит страницу вместо перетаскивания.
+     Когда таскать нельзя — не мешаем: страницу и полосу раундов листают пальцем. */
+  touch-action: none;
 }
 
 /* size="content": размер задаётся инлайном, ничего не обрезаем. */
@@ -115,6 +116,9 @@
   --tv-bracket-my-bg: #00146c;
   --tv-bracket-my-color: #ffffff;
   --tv-bracket-radius: 6px;
+  --tv-bracket-shadow:
+    0 0 0 1px rgb(15 23 42 / 8%),
+    0 1px 3px rgb(15 23 42 / 10%);
 
   position: relative;
   box-sizing: border-box;
@@ -128,8 +132,21 @@
   font-size: 12px;
 }
 
-.tv-bracket--my-team {
+/* Матч — один блок с собственным контуром: два соседних матча иначе
+   читаются как один список из четырёх команд. Обрезка по скруглению живёт
+   здесь, а не на карточке, — подсказку и кнопку сворачивания обрезать нельзя. */
+.tv-bracket__rows {
+  box-sizing: border-box;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
   border-radius: var(--tv-bracket-radius);
+  box-shadow: var(--tv-bracket-shadow);
+}
+
+.tv-bracket--my-team .tv-bracket__rows {
   outline: 2px solid var(--tv-bracket-my-bg);
 }
 
@@ -187,6 +204,43 @@
   background: var(--tv-bracket-loser-bg);
 }
 
+/* Кнопка «свернуть предыдущие матчи»: висит на краю карточки, с той стороны,
+   откуда приходят линии от детей. Кружок нарочно маленький — карточка узкая. */
+.tv-bracket__toggle {
+  position: absolute;
+  top: 50%;
+  left: -11px;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1;
+  color: var(--tv-bracket-winner-bg);
+  cursor: pointer;
+  background: #ffffff;
+  border: 1px solid #d1d5db;
+  border-radius: 50%;
+  box-shadow: 0 1px 3px rgb(15 23 42 / 18%);
+  transform: translateY(-50%);
+}
+
+.tv-bracket__toggle:hover {
+  border-color: var(--tv-bracket-winner-bg);
+}
+
+/* Свёрнутый матч виден сразу: кнопка залита, а не пустая. */
+.tv-bracket__toggle--collapsed {
+  color: var(--tv-bracket-winner-color);
+  background: var(--tv-bracket-winner-bg);
+  border-color: var(--tv-bracket-winner-bg);
+}
+
 .tv-bracket__name {
   max-width: 120px;
   overflow: hidden;
@@ -232,6 +286,14 @@
   --tv-rounds-color: #9ca3af;
   --tv-rounds-border: 2px solid #e5e7eb;
   --tv-rounds-gap: 20px;
+  --tv-rounds-fade: 220ms;
+  /* Как матч складывается, уходя в предыдущий раунд. */
+  --tv-rounds-collapse-scale: 0.86;
+  --tv-rounds-collapse-ease: cubic-bezier(0.4, 0, 0.2, 1);
+  /* В свайпере линия — единственная подсказка, что матч идёт дальше,
+     поэтому она заметнее, чем на широком экране. */
+  --tv-rounds-link-color: #94a3b8;
+  --tv-rounds-link-width: 3px;
 
   display: flex;
   flex-direction: column;
@@ -264,3 +326,95 @@
   border: none;
   border-right: var(--tv-rounds-border);
 }
+
+/* ── Свайпер: узкий экран ───────────────────────────────────────
+ * Раунд занимает всю ширину блока, а сама полоса становится
+ * прокручиваемой: шапка и сетка едут вместе, листаются пальцем и
+ * прилипают к границе раунда. Сетка при этом одна — линии между
+ * матчами никуда не деваются.
+ */
+
+/* В свайпере матчи пары стоят вплотную, и подсказка над карточкой налезала бы
+   на соседнюю. Свою команду там и так видно по рамке. */
+.tv-rounds--swipe .tv-bracket__hint {
+  display: none;
+}
+
+/* Линии в свайпере: единственное, что показывает, куда матч идёт дальше. */
+.tv-rounds--swipe .tree-view {
+  --tv-link-color: var(--tv-rounds-link-color);
+  --tv-link-width: var(--tv-rounds-link-width);
+}
+
+.tv-rounds--swipe {
+  width: 100%;
+  min-width: 0;
+  overflow-x: auto;
+  /* Свайп внутри полосы не должен утягивать за собой страницу. */
+  overscroll-behavior-x: contain;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+}
+
+.tv-rounds--swipe::-webkit-scrollbar {
+  display: none;
+}
+
+.tv-rounds--swipe .tv-rounds__item {
+  scroll-snap-align: start;
+  /* Резкий свайп не должен перепрыгивать через раунд: останавливаемся на каждом. */
+  scroll-snap-stop: always;
+}
+
+/* Пройденный раунд: убран с глаз, но не из раскладки — иначе прокрутка
+   и точки прилипания поехали бы прямо под пальцем.
+
+   Уходит не просто гаснув, а складываясь в сторону следующего раунда: матч
+   ужимается к своему правому краю — туда, откуда уходит линия к продолжению, —
+   и растворяется. При возврате назад разворачивается обратно.
+
+   Видимость снимается только после того, как карточка ужалась, — поэтому
+   у неё отдельная задержка. Селектор нарочно такой же длины, как у правила
+   ниже: иначе переход из него перебил бы этот и матч исчезал бы рывком. */
+.tv-rounds--swipe [data-depth] {
+  transition:
+    opacity var(--tv-rounds-fade, 220ms) ease,
+    transform var(--tv-rounds-fade, 220ms) var(--tv-rounds-collapse-ease);
+}
+
+.tv-rounds--swipe [data-depth].tv-hidden {
+  visibility: hidden;
+  opacity: 0;
+  transition:
+    opacity var(--tv-rounds-fade, 220ms) ease,
+    transform var(--tv-rounds-fade, 220ms) var(--tv-rounds-collapse-ease),
+    visibility 0s linear var(--tv-rounds-fade, 220ms);
+}
+
+/* Складывается сам матч — ужимается к правому краю, туда, где продолжение.
+   Линии просто гаснут: путь в SVG не масштабируешь так, чтобы он остался ровным.
+
+   Только сжатие, без сдвига: сдвинутая карточка вылезает за край и увеличивает
+   область прокрутки, а `scroll-snap: mandatory` тут же пересчитывает прилипание —
+   получается бесконечный круг «сдвинули → переснапили → сдвинули». */
+.tv-rounds--swipe .tree-view__node.tv-hidden {
+  transform: scale(var(--tv-rounds-collapse-scale));
+  transform-origin: right center;
+}
+
+/* Вне свайпера прятать нечего анимировать — убираем сразу. */
+.tv-hidden {
+  visibility: hidden;
+}
+
+/* Кому анимации мешают — тому сразу и без переходов. */
+@media (prefers-reduced-motion: reduce) {
+  .tv-rounds--swipe [data-depth],
+  .tv-rounds--swipe [data-depth].tv-hidden {
+    transition: none;
+  }
+
+  .tv-rounds--swipe .tree-view__node.tv-hidden {
+    transform: none;
+  }
+}