@connectorvol/tree 6.4.0 → 6.5.0

package/dist/(components)/TreeViewer.svelte

@@ -28,6 +28,7 @@
     import {
         isPositionEvaluationNag,
         nagDescription,
+        NAG_CATALOG_SECTIONS,
         SELECTABLE_NAG_IDS_ORDERED,
     } from "../(models)/nagCatalog.js";
     import { setContext } from "svelte";
@@ -93,6 +94,8 @@
         previewHoverDelayMs?: number | "off";
         /** Возвращает true, если под деревом показываются комментарий и выбор NAG для текущей ноды. */
         editMode?: boolean;
+        /** Возвращает true, если в режиме правки показывать группу NAG «Задача (развилка)». По умолчанию true. */
+        showPuzzleBranchNags?: boolean;
         /** Возвращает функцию для установки признака несохранённости дерева. */
         onChangeDirty?: (setIsDirty: (value: boolean) => void) => void;
     };
@@ -111,6 +114,7 @@
         setPreviewFen,
         previewHoverDelayMs = 700,
         editMode = false,
+        showPuzzleBranchNags = false,
         onChangeDirty,
     }: TTreeViewerProps = $props();
 
@@ -179,9 +183,21 @@
         };
     });
 
+    $effect(() => {
+        void chessTree.currentNode.id;
+        scrollToActiveMoveIfNeeded();
+    });
+
     /** Представляет true, если доступно редактирование комментария и NAG (есть интерактивный выбор ноды). */
     const canEditAnnotations = $derived(editMode && selectable);
 
+    /** Представляет видимые секции NAG с учётом настройки показа группы «Задача (развилка)». */
+    const visibleNagSections = $derived(
+        NAG_CATALOG_SECTIONS.filter((section) =>
+            showPuzzleBranchNags ? true : section.key !== "puzzle-branch",
+        ),
+    );
+
     let cachedPgn: string | null = $state(null);
     let cachedPgnVersion = $state(-1);
 
@@ -614,6 +630,7 @@
 
         node.data.nags = next.length > 0 ? next : undefined;
         chessTree.mutationVersion++;
+        onSelectNode();
     }
 
     /** Представляет обновление признака вертикального переполнения дерева ходов. */
@@ -860,41 +877,54 @@
             </label>
             <div
                 class="relative flex flex-wrap gap-1.5 pb-0.5 pr-0.5"
-                role="group"
-                aria-label="Символы NAG"
             >
-                {#each SELECTABLE_NAG_IDS_ORDERED as nagId (nagId)}
-                    {@const label = transformNagId(nagId)}
-                    {@const nagOnNode =
-                        chessTree.currentNode.data.nags?.includes(nagId) ??
-                        false}
-                    {@const shadedActive = canEditAnnotations && nagOnNode}
-                    {#if label}
-                        <button
-                            type="button"
-                            disabled={!canEditAnnotations}
-                            title={nagDescription(nagId)}
-                            class={{
-                                "inline-flex min-h-[1.5rem] min-w-[1.5rem] shrink-0 items-center justify-center rounded-full border px-2 py-0.5 text-center font-serif text-[0.625rem] font-semibold leading-none text-white shadow-[0_1px_2px_rgba(0,0,0,0.25)]": true,
-                                "cursor-pointer": canEditAnnotations,
-                                "cursor-not-allowed border-gray-300 bg-gray-300 text-gray-600 shadow-none":
-                                    !canEditAnnotations,
-                                "border-white/25": canEditAnnotations,
-                            }}
-                            style:background={canEditAnnotations
-                                ? shadedActive
-                                    ? nagBadgeBackground(nagId)
-                                    : "rgb(243 244 246)"
-                                : undefined}
-                            style:color={canEditAnnotations && !shadedActive
-                                ? "#374151"
-                                : undefined}
-                            aria-pressed={nagOnNode}
-                            onclick={() => toggleNagAtCurrentNode(nagId)}
-                        >
-                            {label}
-                        </button>
+                {#each visibleNagSections as section, index (section.key)}
+                    {#if index > 0}
+                        <div
+                            class="mx-1.5 w-px self-stretch bg-gray-300"
+                            aria-hidden="true"
+                        ></div>
                     {/if}
+                    <div
+                        class="flex flex-wrap gap-1.5"
+                        role="group"
+                        aria-label={section.title}
+                    >
+                        {#each section.items as entry (entry.id)}
+                            {@const nagId = entry.id}
+                            {@const label = transformNagId(nagId)}
+                            {@const nagOnNode =
+                                chessTree.currentNode.data.nags?.includes(nagId) ??
+                                false}
+                            {@const shadedActive = canEditAnnotations && nagOnNode}
+                            {#if label}
+                                <button
+                                    type="button"
+                                    disabled={!canEditAnnotations}
+                                    title={nagDescription(nagId)}
+                                    class={{
+                                        "inline-flex min-h-[1.5rem] min-w-[1.5rem] shrink-0 items-center justify-center rounded-full border px-2 py-0.5 text-center font-serif text-[0.625rem] font-semibold leading-none text-white shadow-[0_1px_2px_rgba(0,0,0,0.25)]": true,
+                                        "cursor-pointer": canEditAnnotations,
+                                        "cursor-not-allowed border-gray-300 bg-gray-300 text-gray-600 shadow-none":
+                                            !canEditAnnotations,
+                                        "border-white/25": canEditAnnotations,
+                                    }}
+                                    style:background={canEditAnnotations
+                                        ? shadedActive
+                                            ? nagBadgeBackground(nagId)
+                                            : "rgb(243 244 246)"
+                                        : undefined}
+                                    style:color={canEditAnnotations && !shadedActive
+                                        ? "#374151"
+                                        : undefined}
+                                    aria-pressed={nagOnNode}
+                                    onclick={() => toggleNagAtCurrentNode(nagId)}
+                                >
+                                    {label}
+                                </button>
+                            {/if}
+                        {/each}
+                    </div>
                 {/each}
                 {#if canEditAnnotations}
                     <span

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

@@ -35,6 +35,8 @@ type TTreeViewerProps = {
     previewHoverDelayMs?: number | "off";
     /** Возвращает true, если под деревом показываются комментарий и выбор NAG для текущей ноды. */
     editMode?: boolean;
+    /** Возвращает true, если в режиме правки показывать группу NAG «Задача (развилка)». По умолчанию true. */
+    showPuzzleBranchNags?: boolean;
     /** Возвращает функцию для установки признака несохранённости дерева. */
     onChangeDirty?: (setIsDirty: (value: boolean) => void) => void;
 };

package/dist/(components)/VariantDropdownNavigator.svelte

@@ -141,7 +141,7 @@
 {#if isOpen}
   <div
     data-variant-dropdown="1"
-    class="z-50 min-w-[14rem] rounded-md border bg-white p-1 shadow-md outline-none"
+    class="z-50 min-w-[14rem] rounded-md border bg-white p-1 shadow-none outline-none"
     role="menu"
     aria-label="Варианты следующего хода"
     style={position

package/dist/(components)/VariationGroup.svelte

@@ -39,8 +39,8 @@
     {#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    ":
+                "relative min-w-0 w-full max-w-full bg-gray-50/95 ": true,
+                " rounded-md 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,
             }}

package/dist/(models)/nagCatalog.d.ts

@@ -17,6 +17,8 @@ export type TNagCatalogEntry = {
  * Представляет группу глифов Lichess (как в меню исследований).
  */
 export type TNagCatalogSection = {
+    /** Возвращает ключ секции. */
+    key: string;
     /** Возвращает заголовок секции. */
     title: string;
     /** Возвращает список глифов в секции. */

package/dist/(models)/nagCatalog.js

@@ -38,6 +38,15 @@ const MOVE_EVALUATION_NAMES = {
  */
 export const NAG_CATALOG_SECTIONS = [
     {
+        key: "puzzle-branch",
+        title: "Задача (развилка)",
+        items: [
+            { id: 147, name: "Ветка: верное решение" },
+            { id: 148, name: "Ветка: неверное решение" },
+        ],
+    },
+    {
+        key: "move-evaluation",
         title: "Оценка хода",
         items: MOVE_EVALUATION_NAG_IDS.map((id) => ({
             id,
@@ -45,6 +54,7 @@ export const NAG_CATALOG_SECTIONS = [
         })),
     },
     {
+        key: "position-evaluation",
         title: "Позиция",
         items: POSITION_EVALUATION_NAG_IDS.map((id) => ({
             id,
@@ -52,13 +62,7 @@ export const NAG_CATALOG_SECTIONS = [
         })),
     },
     {
-        title: "Задача (развилка)",
-        items: [
-            { id: 147, name: "Ветка: верное решение" },
-            { id: 148, name: "Ветка: неверное решение" },
-        ],
-    },
-    {
+        key: "observation",
         title: "Наблюдение",
         items: [
             { id: 22, name: "Цугцванг" },

package/dist/(utils)/transformPgnToChessNode.js

@@ -17,7 +17,7 @@ export function transformPgnToChessNode(pgn) {
         const san = makeSanAndPlay(pos, move); // Mutating pos!
         const fen = makeFen(pos.toSetup());
         const { halfMoves, fullMoves } = calculatePly(fen);
-        const firstComment = node.comments?.[0];
+        const allComments = node.comments?.join(" ");
         let lastMove;
         if (isNormal(move)) {
             lastMove = {
@@ -34,7 +34,7 @@ export function transformPgnToChessNode(pgn) {
             fen,
             ply: halfMoves,
             fullMoves,
-            parsedFirstComment: firstComment ? parseComment(firstComment) : null,
+            parsedFirstComment: allComments ? parseComment(allComments) : null,
             ...(lastMove !== undefined ? { lastMove } : {}),
         };
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@connectorvol/tree",
-  "version": "6.4.0",
+  "version": "6.5.0",
   "files": [
     "dist",
     "!dist/**/*.test.*",