@connectorvol/tree 2.1.2 → 4.1.0

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

@@ -1,17 +1,43 @@
 import type { ClassValue } from "svelte/elements";
 import { ChessTree } from "../(classes)/chessTree.svelte.js";
-import type { PieceSet } from "@connectorvol/shared";
-type Props = {
+import type { ChessTreeNode } from "../(models)/chessTreeNode.js";
+import type { Move as TSharedMove, PieceSet } from "@connectorvol/shared";
+type TPreviewOnHoverChessNodeSettings = {
+    /** Возвращает функцию для установки FEN превью при наведении (null скрывает); второй аргумент — подсветка последнего хода. */
+    setPreviewFen?: (fen: string | null, lastMove?: TSharedMove | null) => void;
+    /** Возвращает задержку (мс) до показа превью-позиции при наведении на ноду, либо `off` для отключения. */
+    delayMs?: number | "off";
+};
+type TTreeViewerProps = {
+    /** Возвращает дерево партии. */
     chessTree: ChessTree;
+    /** Возвращает дополнительные классы корневого контейнера. */
     className?: ClassValue;
+    /** Возвращает колбэк после выбора узла в дереве. */
     onSelectNode: () => void;
+    /** Возвращает колбэк после удаления варианта. */
     onDeleteVariant: () => void;
+    /** Возвращает колбэк после выбора узла (после `onSelectNode`), передаётся актуальный `currentNode`. */
+    onChessNodeSelected?: (node: ChessTreeNode) => void;
+    /** Возвращает функцию установки FEN основной партии. */
     setChessFen: (fen: string) => void;
+    /** Возвращает функцию обновления доски. */
     setChessboardFen: (animationTime?: number) => void;
+    /** Возвращает набор фигур для иконок SAN. */
     pieceSet: PieceSet;
     /** Возвращает true, если клик по ходу переключает текущий узел и доску. По умолчанию true. */
     selectable?: boolean;
+    /** Возвращает настройки превью-доски при наведении на ноду. */
+    previewOnHoverChessNodeSettings?: TPreviewOnHoverChessNodeSettings;
+    /** Возвращает функцию для установки FEN превью при наведении (null скрывает); второй аргумент — подсветка последнего хода. */
+    setPreviewFen?: (fen: string | null, lastMove?: TSharedMove | null) => void;
+    /** Возвращает задержку (мс) до показа превью-позиции при наведении на ноду, либо `off` для отключения. */
+    previewHoverDelayMs?: number | "off";
+    /** Возвращает true, если под деревом показываются комментарий и выбор NAG для текущей ноды. */
+    editMode?: boolean;
+    /** Возвращает функцию для установки признака несохранённости дерева. */
+    onChangeDirty?: (setIsDirty: (value: boolean) => void) => void;
 };
-declare const TreeViewer: import("svelte").Component<Props, {}, "">;
+declare const TreeViewer: import("svelte").Component<TTreeViewerProps, {}, "">;
 type TreeViewer = ReturnType<typeof TreeViewer>;
 export default TreeViewer;

package/dist/(components)/TreeViewerPanelManager.svelte

@@ -8,11 +8,10 @@
   import * as Button from "../components/ui/button/index.js";
   import * as ButtonGroup from "../components/ui/button-group/index.js";
 
-  import { scrollToActiveMoveIfNeeded } from "../(utils)/scrollToActiveMove.js";
-  import { scrollToStart } from "../(utils)/scrollToStart.js";
   import type { Snippet } from "svelte";
   import type { ChessTree } from "../(classes)/chessTree.svelte.js";
   import type { ClassValue } from "clsx";
+  import { getOrCreateTreeViewerPanelNavigation } from "../(utils)/treeViewerPanelNavigation.svelte.js";
 
   type Props = {
     chessTree: ChessTree;
@@ -30,146 +29,12 @@
     className,
   }: Props = $props();
 
-  // Состояние подсветки кнопок
-  let highlightedButtons = $state({
-    previous: false,
-    next: false,
-    start: false,
-    end: false,
-  });
-
-  // Состояние автопроигрывания
-  let isPlaying = $state(false);
-  let playInterval: ReturnType<typeof setInterval> | null = $state(null);
-
-  const selectPreviousNode = () => {
-    const parentNode = chessTree.getCurrentNodeParent();
-    if (parentNode) {
-      chessTree.currentNode = parentNode;
-      setChessFen(parentNode.data.fen);
-    }
-    setChessboardFen();
-    setTimeout(() => scrollToActiveMoveIfNeeded(), 50);
-  };
-
-  const selectNextNode = (animationTime: number = 0) => {
-    const childId = chessTree.currentNode?.children?.[0]?.id;
-    if (childId) {
-      const childNode = chessTree.currentNode.children[0];
-      chessTree.currentNode = childNode;
-      setChessFen(childNode.data.fen);
-    }
-    setChessboardFen(animationTime);
-    setTimeout(() => scrollToActiveMoveIfNeeded(), 50);
-  };
-
-  /**
-   * Представляет функцию для перехода к началу главной линии (корневому узлу)
-   */
-  const stepToStart = () => {
-    chessTree.currentNode = chessTree.rootNode.moves;
-    setChessFen(chessTree.rootNode.moves.data.fen);
-    setChessboardFen();
-    highlightButton("start");
-    setTimeout(() => scrollToStart(), 50);
-  };
-
-  /**
-   * Представляет функцию для перехода к концу главной линии
-   * Идет по первым дочерним узлам до тех пор, пока не достигнет листа
-   */
-  const stepToEnd = () => {
-    let currentNode = chessTree.currentNode;
-
-    // Идем по первым дочерним узлам (главная линия) до конца
-    while (currentNode.children && currentNode.children.length > 0) {
-      currentNode = currentNode.children[0];
-    }
-
-    chessTree.currentNode = currentNode;
-    setChessFen(currentNode.data.fen);
-    setChessboardFen();
-    highlightButton("end");
-    setTimeout(() => scrollToActiveMoveIfNeeded(), 50);
-  };
+  const panelNav = $derived.by(() =>
+    getOrCreateTreeViewerPanelNavigation(chessTree),
+  );
 
-  // Функция для подсветки кнопки на 1 секунду
-  const highlightButton = (button: "previous" | "next" | "start" | "end") => {
-    highlightedButtons[button] = true;
-    setTimeout(() => {
-      highlightedButtons[button] = false;
-    }, 100);
-  };
-
-  /**
-   * Представляет функцию для запуска автопроигрывания ходов
-   */
-  const startAutoPlay = () => {
-    if (isPlaying || !chessTree.currentNode?.children?.length) return;
-
-    isPlaying = true;
-    playInterval = setInterval(() => {
-      // Проверяем, есть ли следующий ход
-      const hasNextNode = chessTree.currentNode?.children?.length > 0;
-      if (hasNextNode) {
-        selectNextNode(1000);
-      } else {
-        // Если достигли конца партии, останавливаем автопроигрывание
-        stopAutoPlay();
-      }
-    }, 1000);
-  };
-
-  /**
-   * Представляет функцию для остановки автопроигрывания ходов
-   */
-  const stopAutoPlay = () => {
-    isPlaying = false;
-    if (playInterval !== null) {
-      clearInterval(playInterval);
-      playInterval = null;
-    }
-  };
-
-  /**
-   * Представляет функцию-переключатель для автопроигрывания
-   */
-  const toggleAutoPlay = () => {
-    if (isPlaying) {
-      stopAutoPlay();
-    } else {
-      startAutoPlay();
-    }
-  };
-
-  const onKeyDown = (e: KeyboardEvent) => {
-    if (e.key === "ArrowUp") {
-      stepToStart();
-      e.preventDefault();
-    } else if (e.key === "ArrowDown") {
-      stepToEnd();
-      e.preventDefault();
-    } else if (e.key === "ArrowLeft") {
-      selectPreviousNode();
-      highlightButton("previous");
-      e.preventDefault();
-    } else if (e.key === "ArrowRight") {
-      selectNextNode();
-      highlightButton("next");
-      e.preventDefault();
-    } else if (e.key === " ") {
-      toggleAutoPlay();
-      e.preventDefault();
-    }
-  };
-
-  // Очистка интервала при размонтировании компонента
   $effect(() => {
-    return () => {
-      if (playInterval !== null) {
-        clearInterval(playInterval);
-      }
-    };
+    panelNav.bindCallbacks(setChessFen, setChessboardFen);
   });
 </script>
 
@@ -181,9 +46,9 @@
         variant="outline"
         size="icon"
         aria-label="Previous Move"
-        onclick={selectPreviousNode}
+        onclick={() => panelNav.selectPreviousNode()}
         class={{
-          "bg-primary text-white": highlightedButtons.previous,
+          "bg-primary text-white": panelNav.highlightedButtons.previous,
           "cursor-pointer": true,
         }}
       >
@@ -193,23 +58,23 @@
         variant="outline"
         size="icon"
         aria-label="Go to Start"
-        onclick={stepToStart}
+        onclick={() => panelNav.stepToStart()}
         class={{
-          "bg-primary text-white": highlightedButtons.start,
+          "bg-primary text-white": panelNav.highlightedButtons.start,
         }}
       >
         <ListStart />
       </Button.Root>
       <Button.Root
-        variant={isPlaying ? "default" : "outline"}
+        variant={panelNav.isPlaying ? "default" : "outline"}
         size="icon"
-        aria-label={isPlaying ? "Stop Auto Play" : "Start Auto Play"}
-        onclick={toggleAutoPlay}
+        aria-label={panelNav.isPlaying ? "Stop Auto Play" : "Start Auto Play"}
+        onclick={() => panelNav.toggleAutoPlay()}
         class={{
-          "bg-primary text-white": isPlaying,
+          "bg-primary text-white": panelNav.isPlaying,
         }}
       >
-        {#if isPlaying}
+        {#if panelNav.isPlaying}
           <StopButtonIcon />
         {:else}
           <PlayButtonIcon />
@@ -219,9 +84,9 @@
         variant="outline"
         size="icon"
         aria-label="Go to End"
-        onclick={stepToEnd}
+        onclick={() => panelNav.stepToEnd()}
         class={{
-          "bg-primary text-white": highlightedButtons.end,
+          "bg-primary text-white": panelNav.highlightedButtons.end,
         }}
       >
         <ListEnd />
@@ -230,9 +95,9 @@
         variant="outline"
         size="icon"
         aria-label="Next Move"
-        onclick={() => selectNextNode()}
+        onclick={() => panelNav.selectNextNode()}
         class={{
-          "bg-primary text-white": highlightedButtons.next,
+          "bg-primary text-white": panelNav.highlightedButtons.next,
         }}
       >
         <ArrowRight />
@@ -242,5 +107,3 @@
   </ButtonGroup.Root>
   {@render extraActions?.()}
 </div>
-
-<svelte:window onkeydown={onKeyDown} />

package/dist/(components)/VariantDropdownNavigator.svelte

@@ -0,0 +1,173 @@
+<script lang="ts">
+  import type { ChessTreeNode } from "../(models)/chessTreeNode.js";
+  import NagBadges from "./NagBadges.svelte";
+  type Props = {
+    variants: ChessTreeNode[];
+    onActivateVariant: (node: ChessTreeNode) => void;
+    /**
+     * Представляет CSS-селектор элемента, относительно которого нужно позиционировать dropdown.
+     */
+    anchorSelector?: string;
+  };
+
+  const { variants, onActivateVariant, anchorSelector = "" }: Props = $props();
+
+  let requestedOpen = $state(false);
+  let activeIndex = $state(0);
+  let anchorRect = $state<DOMRect | null>(null);
+
+  const isOpen = $derived(requestedOpen && variants.length > 1);
+
+  const safeActiveIndex = $derived(
+    variants.length === 0
+      ? 0
+      : Math.min(Math.max(activeIndex, 0), variants.length - 1),
+  );
+
+  function readAnchorRect(): void {
+    if (!anchorSelector) {
+      anchorRect = null;
+      return;
+    }
+    const el = document.querySelector(anchorSelector);
+    anchorRect = el instanceof HTMLElement ? el.getBoundingClientRect() : null;
+  }
+
+  function close(): void {
+    requestedOpen = false;
+  }
+
+  export function forceClose(): void {
+    close();
+  }
+
+  export function open(): void {
+    if (variants.length <= 1) return;
+    requestedOpen = true;
+    activeIndex = 0;
+    readAnchorRect();
+  }
+
+  export function handleKeyDown(e: KeyboardEvent): boolean {
+    if (!isOpen) return false;
+
+    if (e.key === "Escape") {
+      close();
+      return true;
+    }
+
+    if (e.key === "ArrowDown") {
+      if (variants.length <= 1) return true;
+      activeIndex = Math.min(safeActiveIndex + 1, variants.length - 1);
+      return true;
+    }
+
+    if (e.key === "ArrowUp") {
+      if (variants.length <= 1) return true;
+      activeIndex = Math.max(safeActiveIndex - 1, 0);
+      return true;
+    }
+
+    if (e.key === "ArrowRight") {
+      const node = variants[safeActiveIndex];
+      if (!node) return true;
+      onActivateVariant(node);
+      close();
+      return true;
+    }
+
+    return false;
+  }
+
+  function onWindowMouseDown(e: MouseEvent): void {
+    if (!isOpen) return;
+    const path = e.composedPath?.() ?? [];
+    const clickedInside = path.some(
+      (t) => t instanceof HTMLElement && t.dataset?.["variantDropdown"] === "1",
+    );
+    if (!clickedInside) close();
+  }
+
+  $effect(() => {
+    if (!isOpen) return;
+
+    readAnchorRect();
+
+    const onScrollOrResize = () => readAnchorRect();
+    window.addEventListener("scroll", onScrollOrResize, true);
+    window.addEventListener("resize", onScrollOrResize, { passive: true });
+    return () => {
+      window.removeEventListener("scroll", onScrollOrResize, true);
+      window.removeEventListener("resize", onScrollOrResize);
+    };
+  });
+
+  const position = $derived(
+    !isOpen || !anchorRect
+      ? null
+      : (() => {
+          const gap = 8;
+          const minW = 224; // ~14rem
+          const viewportW = window.innerWidth;
+          const viewportH = window.innerHeight;
+
+          // Prefer to the right of anchor; fallback to left if overflowing.
+          let left = anchorRect.right + gap;
+          if (left + minW > viewportW - gap) {
+            left = Math.max(gap, anchorRect.left - gap - minW);
+          }
+
+          // Align tops, but keep in viewport.
+          let top = anchorRect.top;
+          top = Math.min(Math.max(gap, top), viewportH - gap);
+
+          return { left, top };
+        })(),
+  );
+
+  function getMovePrefix(node: ChessTreeNode): string {
+    const fm = node.data.fullMoves;
+    if (!fm) return "";
+    return node.data.ply % 2 === 1 ? `${fm}.` : `${fm - 1}...`;
+  }
+</script>
+
+<svelte:window onmousedown={onWindowMouseDown} />
+
+{#if isOpen}
+  <div
+    data-variant-dropdown="1"
+    class="z-50 min-w-[14rem] rounded-md border bg-white p-1 shadow-md outline-none"
+    role="menu"
+    aria-label="Варианты следующего хода"
+    style={position
+      ? `position: fixed; left: ${position.left}px; top: ${position.top}px;`
+      : "position: fixed;"}
+  >
+    {#each variants as variant, index (variant.id)}
+      <button
+        type="button"
+        data-variant-dropdown="1"
+        class={{
+          "flex w-full cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-left text-sm outline-none": true,
+          "bg-accent text-accent-foreground": index === safeActiveIndex,
+          "hover:bg-accent hover:text-accent-foreground": true,
+        }}
+        onclick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          onActivateVariant(variant);
+          close();
+        }}
+      >
+        <span class="flex min-w-0 flex-wrap items-center gap-x-1 gap-y-0.5">
+          {#if getMovePrefix(variant)}
+            <span>{getMovePrefix(variant)}</span>
+          {/if}
+          <span>{variant.data.san}</span>
+          <NagBadges nags={variant.data.nags} class="!ml-0" />
+        </span>
+      </button>
+    {/each}
+  </div>
+{/if}

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

@@ -0,0 +1,16 @@
+import type { ChessTreeNode } from "../(models)/chessTreeNode.js";
+type Props = {
+    variants: ChessTreeNode[];
+    onActivateVariant: (node: ChessTreeNode) => void;
+    /**
+     * Представляет CSS-селектор элемента, относительно которого нужно позиционировать dropdown.
+     */
+    anchorSelector?: string;
+};
+declare const VariantDropdownNavigator: import("svelte").Component<Props, {
+    forceClose: () => void;
+    open: () => void;
+    handleKeyDown: (e: KeyboardEvent) => boolean;
+}, "">;
+type VariantDropdownNavigator = ReturnType<typeof VariantDropdownNavigator>;
+export default VariantDropdownNavigator;

package/dist/(components)/VariationGroup.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import type { ChessTreeNode } from "../(models)/chessTreeNode.js";
+
+    type TVariationGroupProps = {
+        /** Возвращает родительский узел-развилку. */
+        parentNode: ChessTreeNode;
+        /** Возвращает true, если блок в верхней строке сетки дерева. */
+        isHighestLevel: boolean;
+        /** Возвращает true, если вертикальная направляющая должна быть акцентной. */
+        isActiveForkForSelection: boolean;
+        /** Возвращает true, если доступен drill-down «варианты отдельно». */
+        showVariationDrillExpand: boolean;
+        /** Представляет обработчик клика по зоне открытия drill-down. */
+        onVariationLinesHit: (e: MouseEvent) => void;
+        /** Возвращает фрагмент разметки одного дочернего варианта. */
+        variationMoveRow: Snippet<[ChessTreeNode]>;
+        /** Возвращает true, если ветка текущего выбора проходит через узел (для «птички»). */
+        isBranchOnCurrentPath: (node: ChessTreeNode) => boolean;
+    };
+
+    const {
+        parentNode,
+        isHighestLevel,
+        isActiveForkForSelection,
+        showVariationDrillExpand,
+        onVariationLinesHit,
+        variationMoveRow,
+        isBranchOnCurrentPath,
+    }: TVariationGroupProps = $props();
+</script>
+
+<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,
+    }}
+>
+    {#if parentNode.children.length > 1}
+        <div
+            class={{
+                "relative min-w-0 w-full max-w-full bg-gray-50/95": true,
+                " rounded-md  shadow-none transition-[border-color,box-shadow] duration-150 [&:has(>[data-line-hit]:hover)>.flex>div[data-line-stroke]]:border-gray-600 [&:has(>[data-line-hit]:hover)>.flex>ul>li>span[data-line-stroke]]:border-gray-600 [&:has(>[data-line-hit]:focus-visible)>.flex>div[data-line-stroke]]:border-gray-600 [&:has(>[data-line-hit]:focus-visible)>.flex>ul>li>span[data-line-stroke]]:border-gray-600    ":
+                    showVariationDrillExpand,
+                "pr-2": !showVariationDrillExpand,
+            }}
+        >
+            <div class="flex min-w-0 w-full max-w-full gap-0 align-top">
+                <div
+                    class={{
+                        "w-2 shrink-0 self-stretch border-r-2 transition-[border-color] duration-150": true,
+                        "border-gray-600": isActiveForkForSelection,
+                        "border-gray-300": !isActiveForkForSelection,
+                        "pointer-events-none": showVariationDrillExpand,
+                    }}
+                    data-line-stroke
+                    aria-hidden="true"
+                ></div>
+                <ul
+                    class="m-0 flex min-w-0 flex-1 list-none flex-col gap-1.5 py-2 pl-0"
+                >
+                    {#each parentNode.children as child, index (child.id)}
+                        {#if !isHighestLevel || index >= 1}
+                            {@const branchOnPath = isBranchOnCurrentPath(child)}
+                            <li class="relative min-w-0 pl-3">
+                                <span
+                                    class={{
+                                        "absolute left-0 top-[0.65em] w-3 border-t-2 transition-[border-color] duration-150": true,
+                                        "border-gray-600":
+                                            isActiveForkForSelection &&
+                                            branchOnPath,
+                                        "border-gray-300":
+                                            !isActiveForkForSelection ||
+                                            !branchOnPath,
+                                        "pointer-events-none":
+                                            showVariationDrillExpand,
+                                    }}
+                                    data-line-stroke
+                                    aria-hidden="true"
+                                ></span>
+                                <div class="tracking-tight">
+                                    {@render variationMoveRow(child)}
+                                </div>
+                            </li>
+                        {/if}
+                    {/each}
+                </ul>
+            </div>
+            {#if showVariationDrillExpand}
+                <button
+                    type="button"
+                    class="absolute left-0 top-0 z-20 h-full w-5 max-w-full cursor-pointer border-0 bg-transparent p-0 focus:outline-none focus-visible:ring-0"
+                    data-line-hit
+                    aria-label="Открыть варианты отдельно"
+                    onclick={onVariationLinesHit}
+                ></button>
+            {/if}
+        </div>
+    {/if}
+</div>

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

@@ -0,0 +1,21 @@
+import type { Snippet } from "svelte";
+import type { ChessTreeNode } from "../(models)/chessTreeNode.js";
+type TVariationGroupProps = {
+    /** Возвращает родительский узел-развилку. */
+    parentNode: ChessTreeNode;
+    /** Возвращает true, если блок в верхней строке сетки дерева. */
+    isHighestLevel: boolean;
+    /** Возвращает true, если вертикальная направляющая должна быть акцентной. */
+    isActiveForkForSelection: boolean;
+    /** Возвращает true, если доступен drill-down «варианты отдельно». */
+    showVariationDrillExpand: boolean;
+    /** Представляет обработчик клика по зоне открытия drill-down. */
+    onVariationLinesHit: (e: MouseEvent) => void;
+    /** Возвращает фрагмент разметки одного дочернего варианта. */
+    variationMoveRow: Snippet<[ChessTreeNode]>;
+    /** Возвращает true, если ветка текущего выбора проходит через узел (для «птички»). */
+    isBranchOnCurrentPath: (node: ChessTreeNode) => boolean;
+};
+declare const VariationGroup: import("svelte").Component<TVariationGroupProps, {}, "">;
+type VariationGroup = ReturnType<typeof VariationGroup>;
+export default VariationGroup;