@connectorvol/tree 2.1.2 → 4.0.0

package/dist/(components)/Move.svelte

@@ -1,257 +1,323 @@
 <script lang="ts">
   import type { ChessTreeNode } from "../(models)/chessTreeNode.js";
 
-  import ArrowUpIcon from "@lucide/svelte/icons/arrow-up";
-  import CheckCheckIcon from "@lucide/svelte/icons/check-check";
-  import FlagIcon from "@lucide/svelte/icons/flag";
-  import Trash2Icon from "@lucide/svelte/icons/trash-2";
   import { parseComment } from "@connectorvol/chessops/pgn";
-  import * as ContextMenu from "../components/ui/context-menu/index.js";
 
+  import { createPreviewHover } from "../(utils)/createPreviewHover.js";
   import { getGameContext } from "../(utils)/context.js";
-  import { transformNag } from "../(utils)/transformNag.js";
   import Move from "./Move.svelte";
-  import MoveWithIcon from "./MoveWithIcon.svelte";
+  import MoveComment from "./MoveComment.svelte";
+  import MoveSanWithMenu from "./MoveSanWithMenu.svelte";
+  import VariationGroup from "./VariationGroup.svelte";
   import type { PieceSet } from "@connectorvol/shared";
-  import { ACTIVE_MOVE_CLASS } from "../(utils)/scrollToActiveMove.js";
 
   const HIGHEST_LEVEL = 1;
 
-  interface Props {
+  type TMoveProps = {
+    /** Возвращает узел хода в дереве партии. */
     chessNode: ChessTreeNode;
+    /** Возвращает глубину вложенности относительно корня отображения. */
     depth: number;
+    /** Возвращает родительский узел или null для корня. */
     parentNode: ChessTreeNode | null;
-    needSpace: boolean;
-    needRenderParentChildrens?: boolean;
+    /** Возвращает true, если нужна пустая ячейка хода (сетка верхнего уровня). */
+    shouldReserveEmptyMoveCell: boolean;
+    /** Возвращает true, если нужно отрисовать соседние варианты у развилки. */
+    shouldRenderSiblingVariations?: boolean;
+    /** Возвращает набор фигур для иконок SAN. */
     pieceSet: PieceSet;
-  }
+  };
 
   const {
     chessNode,
     depth,
     parentNode,
-    needSpace,
-    needRenderParentChildrens = true,
+    shouldReserveEmptyMoveCell,
+    shouldRenderSiblingVariations = true,
     pieceSet,
-  }: Props = $props();
+  }: TMoveProps = $props();
 
-  const { chessTree, onSelectNode, onDeleteVariant, selectable } = getGameContext();
+  const {
+    chessTree,
+    onSelectNode,
+    onDeleteVariant,
+    onChessNodeSelected,
+    selectable,
+    setPreviewFen,
+    previewHoverDelayMs,
+  } = getGameContext();
 
-  function onmousedown() {
-    if (!selectable || !node) return;
+  /** Представляет обработчик выбора текущего узла по `mousedown`. */
+  function handleMoveMouseDown() {
+    if (!selectable || !moveNode) return;
     chessTree.currentNode = chessNode;
 
     onSelectNode();
+    onChessNodeSelected?.(chessTree.currentNode);
   }
 
-  const node = $derived(chessNode);
-  const isTheSameNode = $derived(chessNode.id === chessTree.currentNode.id);
+  const moveNode = $derived(chessNode);
+  const previewHover = createPreviewHover({
+    setPreviewFen,
+    getFen: () => moveNode.data.fen,
+    getLastMove: () => moveNode.data.lastMove ?? null,
+    getDelayMs: () => previewHoverDelayMs,
+  });
+  const isCurrentMove = $derived(chessNode.id === chessTree.currentNode.id);
+  /** Представляет текст первого PGN-комментария узла после разбора `comments[0]`, синхронно с правкой строки под деревом. */
   const firstCommentParsed = $derived(
-    node.data.parsedFirstComment ?? (node.data.comments?.[0] ? parseComment(node.data.comments[0]) : null)
+    moveNode.data.comments?.[0] !== undefined
+      ? parseComment(moveNode.data.comments[0])
+      : null,
   );
   const firstCommentText = $derived(firstCommentParsed?.text);
   const childMoves = $derived(chessNode.children);
-  const isForcedNodeId = $derived(chessNode.id === chessTree.forcedNodeId);
+  const isForcedLineStart = $derived(chessNode.id === chessTree.forcedNodeId);
 
-  const spaceBlockClass = "p-8";
+  /** Представляет признак активного drill-down «варианты отдельно». */
+  const variationDrillDownActive = $derived(
+    chessTree.isVariationDrillDownActive(),
+  );
+
+  /**
+   * Представляет признак: развилка на этом уровне совпадает с узлом, для которого
+   * `ChessTree` рассчитывает акцент направляющих при текущем выборе.
+   */
+  const isActiveForkForSelection = $derived(
+    shouldRenderSiblingVariations &&
+      parentNode !== null &&
+      (parentNode.children?.length ?? 0) > 1 &&
+      chessTree.currentGuideHighlightForkParent?.id === parentNode.id,
+  );
+
+  const spaceBlockClass = "px-3 py-2 !bg-gray-50/95";
   const spaceInlineBlockClass = "p-2";
 
-  const isHighestLevel = depth === HIGHEST_LEVEL;
-</script>
+  const isHighestLevel = $derived(depth === HIGHEST_LEVEL);
 
-{#snippet sanMove()}
-  {@const selectedOnHighestLevel = isTheSameNode && isHighestLevel}
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <ContextMenu.Root>
-    <ContextMenu.Trigger
-      class={{
-        "cursor-pointer ": selectable,
-        "cursor-default": !selectable,
-        [`${spaceInlineBlockClass} text-center`]: isHighestLevel,
-        inline: !isHighestLevel,
-        [` outline-primary z-10 -outline-offset-2 outline-3 ${ACTIVE_MOVE_CLASS}`]:
-          selectedOnHighestLevel,
-        "outline-none": !selectedOnHighestLevel,
-      }}
-      {onmousedown}
-    >
-      {#if !isHighestLevel && node.data.fullMoves && node.data.ply % 2 === 1}
-        {node.data.fullMoves}.
-      {/if}
-      {#if !isHighestLevel && node.data.fullMoves && node.data.ply % 2 === 0 && parentNode?.children?.[0]?.id !== chessNode.id}
-        {node.data.fullMoves - 1}...
-      {/if}<span
-        class={{
-          " outline-primary outline-2": isTheSameNode && !isHighestLevel,
-        }}
-      >
-        <MoveWithIcon
-          san={node.data.san}
-          ply={node.data.ply}
-          {pieceSet}
-        />{node.data.nags?.map(transformNag).join(" ")}
-      </span>
-    </ContextMenu.Trigger>
-    <ContextMenu.Content class="outline-none">
-      {#if !isHighestLevel}
-        <ContextMenu.Item
-          class="gap-4"
-          onclick={() => chessTree.makeMainVariant(chessNode)}
-          >Сделать вариант главной линией <ContextMenu.Shortcut
-            ><CheckCheckIcon /></ContextMenu.Shortcut
-          ></ContextMenu.Item
-        >
-        {#if depth > HIGHEST_LEVEL + 1}
-          <ContextMenu.Item
-            class="gap-4"
-            onclick={() => chessTree.upPriority(chessNode)}
-            >Поднять приоритет варианта <ContextMenu.Shortcut
-              ><ArrowUpIcon /></ContextMenu.Shortcut
-            ></ContextMenu.Item
-          >
-        {/if}
-      {:else}
-        <ContextMenu.Item
-          class="gap-4"
-          onclick={() => (chessTree.forcedNodeId = chessNode.parentId ?? null)}
-          >Завершить главную линию <ContextMenu.Shortcut
-            ><FlagIcon /></ContextMenu.Shortcut
-          ></ContextMenu.Item
-        >
-      {/if}
-      <ContextMenu.Separator />
-      <ContextMenu.Item
-        class="gap-4 "
-        onclick={() => {
-          chessTree.deleteVariant(chessNode);
-          // Обновляем состояние игры после удаления
-          onDeleteVariant();
-        }}
-        >Удалить вариант <ContextMenu.Shortcut
-          ><Trash2Icon /></ContextMenu.Shortcut
-        ></ContextMenu.Item
-      >
-    </ContextMenu.Content>
-  </ContextMenu.Root>
-{/snippet}
+  /**
+   * Представляет признак: в верхней сетке после белого полухода показывается пустая ячейка чёрных
+   * без ноды (партия оборвалась на ходе белых) — нижнюю границу рисуем только под двумя первыми колонками.
+   */
+  const addsEmptyMainLineBlackCell = $derived(
+    isHighestLevel &&
+      moveNode.data.ply % 2 === 1 &&
+      !isForcedLineStart &&
+      (parentNode === null || parentNode.children.length <= 1) &&
+      !firstCommentText &&
+      (childMoves?.length ?? 0) === 0,
+  );
+
+  /**
+   * Представляет признак: верхняя строка — первый полуход чёрных от корня партии (нотация «1... SAN»).
+   */
+  const isLeadingBlackHalfMoveFromRoot = $derived(
+    isHighestLevel &&
+      parentNode !== null &&
+      parentNode.data.ply === 0 &&
+      moveNode.data.ply % 2 === 0,
+  );
+
+  /** Представляет true, если в контекстном меню показывать «Поднять приоритет». */
+  const showUpPriorityItem = $derived(depth > HIGHEST_LEVEL + 1);
+
+  /**
+   * Представляет признак: SAN главного варианта (children[0]) переносится в блок списка веток,
+   * чтобы не дублировать его перед группой (например «8. g3» только среди g3 / f3 / a3).
+   */
+  const shouldRenderSanInsideVariationGroup = $derived(
+    !isHighestLevel &&
+      shouldRenderSiblingVariations &&
+      parentNode !== null &&
+      parentNode.children.length > 1 &&
+      parentNode.children[0]?.id === chessNode.id,
+  );
+
+  /**
+   * Представляет обработчик клика по зоне линий ветвления, открывающий режим «варианты отдельно».
+   */
+  function onVariationLinesHit(e: MouseEvent) {
+    e.stopPropagation();
+    if (parentNode === null) return;
+    const selectFork = !chessTree.isCurrentNodeWithinForkSubtree(parentNode);
+    chessTree.openVariationDrillDown(parentNode, { selectFork });
+    onSelectNode();
+    onChessNodeSelected?.(chessTree.currentNode);
+  }
+</script>
 
 {#snippet emptyMove()}
   <div class="flex items-center justify-center text-center">...</div>
 {/snippet}
 
+{#snippet emptyMainLineBlackCell()}
+  <div
+    class="tree-viewer-tail-no-node-cell flex min-w-0 items-center justify-center border-b-0 p-2 text-center"
+  ></div>
+{/snippet}
+
 {#snippet fullMovesCounter(minus: number = 0)}
   <span
     class={{
       "flex items-center justify-center text-center": isHighestLevel,
       inline: !isHighestLevel,
+      "border-b border-gray-300": addsEmptyMainLineBlackCell && isHighestLevel,
+      "tree-viewer-overflow-tail-border":
+        addsEmptyMainLineBlackCell && isHighestLevel,
     }}
   >
-    {node.data.fullMoves - minus}{!isHighestLevel && node.data.ply % 2 === 1
+    {moveNode.data.fullMoves - minus}{!isHighestLevel &&
+    moveNode.data.ply % 2 === 1
       ? "..."
-      : !isHighestLevel && node.data.ply % 2 === 0
+      : !isHighestLevel && moveNode.data.ply % 2 === 0
         ? "..."
         : ""}
   </span>
 {/snippet}
 
-{#snippet comment(text: string)}
-  <div
-    class={{
-      "select-text": true,
-      "col-span-3 flex flex-col": isHighestLevel,
-      inline: !isHighestLevel,
-      [spaceBlockClass]: isHighestLevel,
-    }}
-  >
-    {#each text.split("\n") as line, index}
-      {#if index > 0}<br />{/if}{line}
-    {/each}
-  </div>
+{#snippet variationMoveRow(child: ChessTreeNode)}
+  <Move
+    {pieceSet}
+    chessNode={child}
+    shouldReserveEmptyMoveCell={parentNode !== null &&
+      parentNode.children.length > 1}
+    depth={depth + 1}
+    shouldRenderSiblingVariations={false}
+    {parentNode}
+  />
 {/snippet}
 
 {#if isHighestLevel}
-  {#if node.data.ply % 2 === 1}
+  {#if moveNode.data.ply % 2 === 1}
     {@render fullMovesCounter()}
   {/if}
 
-  {#if node.parentId}
-    {@render sanMove()}
+  {#if variationDrillDownActive && moveNode.data.ply % 2 === 0 && chessTree.drillForkParent !== null && chessTree.drillForkParent.children[0]?.id === chessNode.id && moveNode.parentId}
+    <span
+      class={{
+        "flex items-center justify-center text-center": isHighestLevel,
+      }}
+    >
+      {moveNode.data.fullMoves}
+    </span>
+    {@render emptyMove()}
   {/if}
-  {#if (isForcedNodeId && node.data.ply % 2 === 1) || (parentNode?.children.length && parentNode?.children.length > 1 && node.data.ply % 2 === 1) || (firstCommentText && node.data.ply % 2 === 1)}
+
+  {#if isLeadingBlackHalfMoveFromRoot}
+    <span
+      class={{
+        "flex items-center justify-center text-center": isHighestLevel,
+      }}
+    >
+      {Math.max(1, moveNode.data.fullMoves - 1)}
+    </span>
     {@render emptyMove()}
   {/if}
 
+  {#if moveNode.parentId}
+    <MoveSanWithMenu
+      {chessNode}
+      {parentNode}
+      {pieceSet}
+      {selectable}
+      {isHighestLevel}
+      {isCurrentMove}
+      previewHover={{
+        onmouseenter: previewHover.onmouseenter,
+        onmouseleave: previewHover.onmouseleave,
+      }}
+      onMoveMouseDown={handleMoveMouseDown}
+      {spaceInlineBlockClass}
+      nags={moveNode.data.nags}
+      {chessTree}
+      {showUpPriorityItem}
+      {onDeleteVariant}
+      mainRowBottomEdge={addsEmptyMainLineBlackCell}
+    />
+  {/if}
+  {#if isHighestLevel && moveNode.data.ply % 2 === 1}
+    {#if isForcedLineStart || (parentNode != null && parentNode.children.length > 1) || !!firstCommentText}
+      {@render emptyMove()}
+    {:else if (childMoves?.length ?? 0) === 0}
+      {@render emptyMainLineBlackCell()}
+    {/if}
+  {/if}
+
   {#if firstCommentText}
-    {#if node.data.ply % 2 === 1}
-      {@render comment(firstCommentText)}
-      {#if !needSpace && childMoves?.[0] && !isForcedNodeId}
+    {#if moveNode.data.ply % 2 === 1}
+      <MoveComment text={firstCommentText} {isHighestLevel} {spaceBlockClass} />
+      {#if !shouldReserveEmptyMoveCell && childMoves?.[0] && !isForcedLineStart}
         {@render fullMovesCounter()}
         {@render emptyMove()}
       {/if}
     {/if}
 
-    {#if node.data.ply % 2 === 0}
-      {@render comment(firstCommentText)}
+    {#if moveNode.data.ply % 2 === 0}
+      <MoveComment text={firstCommentText} {isHighestLevel} {spaceBlockClass} />
     {/if}
   {/if}
 {:else}
-  {#if node.data.ply % 2 === 0 && chessTree.forcedNodeId === node.parentId && parentNode?.children[0].id === node.id}
+  {#if moveNode.data.ply % 2 === 0 && chessTree.forcedNodeId === moveNode.parentId && parentNode?.children[0].id === moveNode.id}
     {@render fullMovesCounter(1)}
   {/if}
 
-  {@render sanMove()}
+  {#if !shouldRenderSanInsideVariationGroup}
+    <MoveSanWithMenu
+      {chessNode}
+      {parentNode}
+      {pieceSet}
+      {selectable}
+      {isHighestLevel}
+      {isCurrentMove}
+      previewHover={{
+        onmouseenter: previewHover.onmouseenter,
+        onmouseleave: previewHover.onmouseleave,
+      }}
+      onMoveMouseDown={handleMoveMouseDown}
+      {spaceInlineBlockClass}
+      nags={moveNode.data.nags}
+      {chessTree}
+      {showUpPriorityItem}
+      {onDeleteVariant}
+    />
+  {/if}
   {#if firstCommentText}
-    {#if node.data.ply % 2 === 1}
-      {@render comment(firstCommentText)}
-      {#if !needSpace && childMoves?.[0]}
+    {#if moveNode.data.ply % 2 === 1}
+      <MoveComment text={firstCommentText} {isHighestLevel} {spaceBlockClass} />
+      {#if !shouldReserveEmptyMoveCell && childMoves?.[0] && !shouldRenderSanInsideVariationGroup}
         {@render fullMovesCounter()}
       {/if}
     {/if}
 
-    {#if node.data.ply % 2 === 0}
-      {@render comment(firstCommentText)}
+    {#if moveNode.data.ply % 2 === 0}
+      <MoveComment text={firstCommentText} {isHighestLevel} {spaceBlockClass} />
     {/if}
   {/if}
 {/if}
 
-{#if parentNode && parentNode?.children.length > 1 && needRenderParentChildrens}
-  <div class={{ "col-span-3": isHighestLevel, inline: !isHighestLevel }}>
-    {#if !isHighestLevel}
-      <span>(</span>
-    {/if}
-    {#if parentNode?.children.length > 1}
-      {#each parentNode?.children as child, index (index)}
-        {#if index >= 1}
-          <div
-            class={{
-              inline: !isHighestLevel,
-              [spaceBlockClass]: isHighestLevel,
-              "tracking-tight": true,
-            }}
-          >
-            <Move
-              {pieceSet}
-              chessNode={child}
-              needSpace={parentNode?.children.length > 1}
-              depth={depth + 1}
-              needRenderParentChildrens={false}
-              {parentNode}
-            ></Move>
-          </div>
-        {/if}
-      {/each}
-    {/if}
-    {#if !isHighestLevel}
-      <span>)</span>
-    {/if}
-  </div>
+{#if parentNode && parentNode?.children.length > 1 && shouldRenderSiblingVariations}
+  {@const showVariationDrillExpand = !chessTree.isNodeOnMainLine(chessNode)}
+  <VariationGroup
+    {parentNode}
+    {isHighestLevel}
+    {isActiveForkForSelection}
+    {showVariationDrillExpand}
+    {onVariationLinesHit}
+    {variationMoveRow}
+    isBranchOnCurrentPath={(n) => chessTree.isCurrentOnPathFromNode(n)}
+  />
 {/if}
 
-{#if isForcedNodeId}
-  <div class={{ "col-span-3": isHighestLevel, inline: !isHighestLevel }}>
+{#if isForcedLineStart}
+  <div
+    class={{
+      "col-span-3 col-start-1 w-full min-w-0": isHighestLevel,
+      "block w-full min-w-0 basis-full shrink-0": !isHighestLevel,
+    }}
+  >
     <div
       class={{
-        inline: !isHighestLevel,
+        "block w-full min-w-0": !isHighestLevel,
         [spaceBlockClass]: isHighestLevel,
         "tracking-tight": true,
       }}
@@ -259,25 +325,35 @@
       <Move
         {pieceSet}
         chessNode={chessNode.children[0]}
-        needSpace={chessNode.children.length > 1}
+        shouldReserveEmptyMoveCell={chessNode.children.length > 1}
         depth={depth + 1}
-        needRenderParentChildrens={true}
+        shouldRenderSiblingVariations={true}
         parentNode={chessNode}
       ></Move>
     </div>
   </div>
 {/if}
 
-{#if needSpace && node.data.ply % 2 === 1 && isHighestLevel && !isForcedNodeId}
+{#if shouldReserveEmptyMoveCell && moveNode.data.ply % 2 === 1 && isHighestLevel && !isForcedLineStart && childMoves?.[0]}
   {@render fullMovesCounter()}
   {@render emptyMove()}
 {/if}
-{#if childMoves?.[0]}
-  {#if !isForcedNodeId}
+{#if variationDrillDownActive && isHighestLevel && moveNode.data.ply % 2 === 1 && !shouldReserveEmptyMoveCell && childMoves?.[0] && !isForcedLineStart && chessTree.drillForkParent !== null && chessTree.drillForkParent.children[0]?.id === chessNode.id}
+  <span
+    class={{
+      "flex items-center justify-center text-center": isHighestLevel,
+    }}
+  >
+    {moveNode.data.fullMoves}
+  </span>
+  {@render emptyMove()}
+{/if}
+{#if childMoves?.[0] && !shouldRenderSanInsideVariationGroup}
+  {#if !isForcedLineStart}
     <Move
       {pieceSet}
       chessNode={chessNode.children[0]}
-      needSpace={childMoves?.length > 1}
+      shouldReserveEmptyMoveCell={childMoves?.length > 1}
       {depth}
       parentNode={chessNode}
     ></Move>

package/dist/(components)/Move.svelte.d.ts

@@ -1,14 +1,20 @@
 import type { ChessTreeNode } from "../(models)/chessTreeNode.js";
 import Move from "./Move.svelte";
 import type { PieceSet } from "@connectorvol/shared";
-interface Props {
+type TMoveProps = {
+    /** Возвращает узел хода в дереве партии. */
     chessNode: ChessTreeNode;
+    /** Возвращает глубину вложенности относительно корня отображения. */
     depth: number;
+    /** Возвращает родительский узел или null для корня. */
     parentNode: ChessTreeNode | null;
-    needSpace: boolean;
-    needRenderParentChildrens?: boolean;
+    /** Возвращает true, если нужна пустая ячейка хода (сетка верхнего уровня). */
+    shouldReserveEmptyMoveCell: boolean;
+    /** Возвращает true, если нужно отрисовать соседние варианты у развилки. */
+    shouldRenderSiblingVariations?: boolean;
+    /** Возвращает набор фигур для иконок SAN. */
     pieceSet: PieceSet;
-}
-declare const Move: import("svelte").Component<Props, {}, "">;
+};
+declare const Move: import("svelte").Component<TMoveProps, {}, "">;
 type Move = ReturnType<typeof Move>;
 export default Move;

package/dist/(components)/MoveComment.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+    type TMoveCommentProps = {
+        /** Возвращает текст комментария (возможны переводы строк). */
+        text: string;
+        /** Возвращает true, если строка в верхнем уровне сетки дерева. */
+        isHighestLevel: boolean;
+        /** Возвращает класс фона/отступов для уровня «верхняя строка». */
+        spaceBlockClass: string;
+    };
+
+    const {
+        text,
+        isHighestLevel,
+        spaceBlockClass,
+    }: TMoveCommentProps = $props();
+
+    /** Представляет строки комментария после разбиения по `\n`. */
+    const commentLines = $derived(text.split("\n"));
+</script>
+
+<div
+    class={{
+        "select-text": true,
+        "col-span-3 flex flex-col": isHighestLevel,
+        inline: !isHighestLevel,
+        [spaceBlockClass]: isHighestLevel,
+    }}
+>
+    {#each commentLines as line, index (index)}
+        {#if index > 0}<br />{/if}{line}
+    {/each}
+</div>

package/dist/(components)/MoveComment.svelte.d.ts

@@ -0,0 +1,11 @@
+type TMoveCommentProps = {
+    /** Возвращает текст комментария (возможны переводы строк). */
+    text: string;
+    /** Возвращает true, если строка в верхнем уровне сетки дерева. */
+    isHighestLevel: boolean;
+    /** Возвращает класс фона/отступов для уровня «верхняя строка». */
+    spaceBlockClass: string;
+};
+declare const MoveComment: import("svelte").Component<TMoveCommentProps, {}, "">;
+type MoveComment = ReturnType<typeof MoveComment>;
+export default MoveComment;