@connectorvol/tree 2.1.2 → 4.1.0

package/dist/(components)/MoveContextMenu.svelte

@@ -0,0 +1,73 @@
+<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 * as ContextMenu from "../components/ui/context-menu/index.js";
+
+    import type { ChessTree } from "../(classes)/chessTree.svelte.js";
+
+    type TMoveContextMenuProps = {
+        /** Возвращает узел хода, к которому применяется меню. */
+        chessNode: ChessTreeNode;
+        /** Возвращает дерево партии. */
+        chessTree: ChessTree;
+        /** Возвращает true, если ход отображается в ячейке верхней сетки. */
+        isHighestLevel: boolean;
+        /** Возвращает true, если показывать пункт «Поднять приоритет варианта». */
+        showUpPriorityItem: boolean;
+        /** Возвращает колбэк после удаления варианта. */
+        onDeleteVariant: () => void;
+    };
+
+    const {
+        chessNode,
+        chessTree,
+        isHighestLevel,
+        showUpPriorityItem,
+        onDeleteVariant,
+    }: TMoveContextMenuProps = $props();
+</script>
+
+<ContextMenu.Content class="outline-none">
+    {#if !isHighestLevel}
+        <ContextMenu.Item
+            class="gap-4"
+            onclick={() => chessTree.makeMainVariant(chessNode)}
+            >Сделать вариант главной линией <ContextMenu.Shortcut
+                ><CheckCheckIcon /></ContextMenu.Shortcut
+            ></ContextMenu.Item
+        >
+        {#if showUpPriorityItem}
+            <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>

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

@@ -0,0 +1,17 @@
+import type { ChessTreeNode } from "../(models)/chessTreeNode.js";
+import type { ChessTree } from "../(classes)/chessTree.svelte.js";
+type TMoveContextMenuProps = {
+    /** Возвращает узел хода, к которому применяется меню. */
+    chessNode: ChessTreeNode;
+    /** Возвращает дерево партии. */
+    chessTree: ChessTree;
+    /** Возвращает true, если ход отображается в ячейке верхней сетки. */
+    isHighestLevel: boolean;
+    /** Возвращает true, если показывать пункт «Поднять приоритет варианта». */
+    showUpPriorityItem: boolean;
+    /** Возвращает колбэк после удаления варианта. */
+    onDeleteVariant: () => void;
+};
+declare const MoveContextMenu: import("svelte").Component<TMoveContextMenuProps, {}, "">;
+type MoveContextMenu = ReturnType<typeof MoveContextMenu>;
+export default MoveContextMenu;

package/dist/(components)/MoveSanWithMenu.svelte

@@ -0,0 +1,158 @@
+<script lang="ts">
+  import type { ChessTreeNode } from "../(models)/chessTreeNode.js";
+
+  import * as ContextMenu from "../components/ui/context-menu/index.js";
+  import NagBadges from "./NagBadges.svelte";
+  import MoveWithIcon from "./MoveWithIcon.svelte";
+  import MoveContextMenu from "./MoveContextMenu.svelte";
+  import type { PieceSet } from "@connectorvol/shared";
+  import { ACTIVE_MOVE_CLASS } from "../(utils)/scrollToActiveMove.js";
+  import type { ChessTree } from "../(classes)/chessTree.svelte.js";
+
+  type TPreviewHoverHandlers = {
+    /** Возвращает обработчик `mouseenter` для превью FEN. */
+    onmouseenter: (e: MouseEvent) => void;
+    /** Возвращает обработчик `mouseleave` для превью FEN. */
+    onmouseleave: (e: MouseEvent) => void;
+  };
+
+  type TMoveSanWithMenuProps = {
+    /** Возвращает узел хода. */
+    chessNode: ChessTreeNode;
+    /** Возвращает родительский узел (для подписей полухода) или null. */
+    parentNode: ChessTreeNode | null;
+    /** Возвращает набор фигур для иконок SAN. */
+    pieceSet: PieceSet;
+    /** Возвращает true, если клик по ходу активен. */
+    selectable: boolean;
+    /** Возвращает true, если ход отображается в верхней строке сетки. */
+    isHighestLevel: boolean;
+    /** Возвращает true, если этот ход совпадает с текущим выбранным узлом. */
+    isCurrentMove: boolean;
+    /** Возвращает обработчики превью при наведении. */
+    previewHover: TPreviewHoverHandlers;
+    /** Представляет обработчик выбора узла по событию `mousedown`. */
+    onMoveMouseDown: () => void;
+    /** Возвращает класс отступов для inline-триггера не на верхнем уровне. */
+    spaceInlineBlockClass: string;
+    /** Возвращает список NAG после SAN. */
+    nags: number[] | undefined;
+    /** Возвращает дерево партии. */
+    chessTree: ChessTree;
+    /** Возвращает true, если показывать пункт поднятия приоритета в меню. */
+    showUpPriorityItem: boolean;
+    /** Возвращает колбэк после удаления варианта. */
+    onDeleteVariant: () => void;
+    /** Возвращает true, если у ячейки SAN в верхней сетке нужна нижняя граница при неполном ряду (нет чёрной ноды). */
+    mainRowBottomEdge?: boolean | undefined;
+  };
+
+  const {
+    chessNode,
+    parentNode,
+    pieceSet,
+    selectable,
+    isHighestLevel,
+    isCurrentMove,
+    previewHover,
+    onMoveMouseDown,
+    spaceInlineBlockClass,
+    nags,
+    chessTree,
+    showUpPriorityItem,
+    onDeleteVariant,
+    mainRowBottomEdge = false,
+  }: TMoveSanWithMenuProps = $props();
+
+  const node = $derived(chessNode);
+  const selectedOnHighestLevel = $derived(isCurrentMove && isHighestLevel);
+
+  /** Представляет true, если событие пришло из области NAG (ПКМ там не переключает узел). */
+  function isFromNagBadges(target: EventTarget | null): boolean {
+    return (
+      target instanceof Element && target.closest("[data-nag-badges]") !== null
+    );
+  }
+
+  /**
+   * Представляет выбор узла по ЛКМ везде, по ПКМ — только по SAN (не по NAG); прочие кнопки игнорируются.
+   */
+  function handleRowMouseDown(e: MouseEvent) {
+    if (e.button === 0) {
+      onMoveMouseDown();
+      return;
+    }
+    if (e.button === 2 && !isFromNagBadges(e.target)) {
+      onMoveMouseDown();
+    }
+  }
+</script>
+
+<ContextMenu.Root>
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <span
+    class={{
+      "items-center gap-0": true,
+      "flex w-full min-w-0 justify-center": isHighestLevel,
+      "inline-flex": !isHighestLevel,
+      [`${spaceInlineBlockClass} text-center`]: isHighestLevel,
+      [`z-10 ${ACTIVE_MOVE_CLASS}`]: selectedOnHighestLevel,
+      [ACTIVE_MOVE_CLASS]: isCurrentMove && !isHighestLevel,
+      "border-b border-gray-300": isHighestLevel && mainRowBottomEdge,
+      "tree-viewer-overflow-tail-border": isHighestLevel && mainRowBottomEdge,
+    }}
+    onmousedown={handleRowMouseDown}
+  >
+    <ContextMenu.Trigger
+      class={{
+        "outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0": true,
+        "cursor-pointer ": selectable,
+        "cursor-default": !selectable,
+        inline: !isHighestLevel,
+      }}
+    >
+      <span
+        role="group"
+        aria-label="Нотация хода, превью доски при наведении"
+        class="inline-flex items-baseline"
+        onmouseenter={previewHover.onmouseenter}
+        onmouseleave={previewHover.onmouseleave}
+      >
+        {#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 || (parentNode?.children?.length ?? 0) > 1)}
+          {node.data.fullMoves - 1}...
+        {/if}
+        <span
+          class={{
+            "inline-grid items-baseline": true,
+          }}
+        >
+          <span
+            class="invisible col-start-1 row-start-1 font-bold"
+            aria-hidden="true"
+          >
+            <MoveWithIcon san={node.data.san} ply={node.data.ply} {pieceSet} />
+          </span>
+          <span
+            class={{
+              "col-start-1 row-start-1": true,
+              "font-bold": isCurrentMove,
+            }}
+          >
+            <MoveWithIcon san={node.data.san} ply={node.data.ply} {pieceSet} />
+          </span>
+        </span>
+      </span>
+    </ContextMenu.Trigger>
+    <NagBadges {nags} class="!ml-0.5 shrink-0" />
+  </span>
+  <MoveContextMenu
+    {chessNode}
+    {chessTree}
+    {isHighestLevel}
+    {showUpPriorityItem}
+    {onDeleteVariant}
+  />
+</ContextMenu.Root>

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

@@ -0,0 +1,42 @@
+import type { ChessTreeNode } from "../(models)/chessTreeNode.js";
+import type { PieceSet } from "@connectorvol/shared";
+import type { ChessTree } from "../(classes)/chessTree.svelte.js";
+type TPreviewHoverHandlers = {
+    /** Возвращает обработчик `mouseenter` для превью FEN. */
+    onmouseenter: (e: MouseEvent) => void;
+    /** Возвращает обработчик `mouseleave` для превью FEN. */
+    onmouseleave: (e: MouseEvent) => void;
+};
+type TMoveSanWithMenuProps = {
+    /** Возвращает узел хода. */
+    chessNode: ChessTreeNode;
+    /** Возвращает родительский узел (для подписей полухода) или null. */
+    parentNode: ChessTreeNode | null;
+    /** Возвращает набор фигур для иконок SAN. */
+    pieceSet: PieceSet;
+    /** Возвращает true, если клик по ходу активен. */
+    selectable: boolean;
+    /** Возвращает true, если ход отображается в верхней строке сетки. */
+    isHighestLevel: boolean;
+    /** Возвращает true, если этот ход совпадает с текущим выбранным узлом. */
+    isCurrentMove: boolean;
+    /** Возвращает обработчики превью при наведении. */
+    previewHover: TPreviewHoverHandlers;
+    /** Представляет обработчик выбора узла по событию `mousedown`. */
+    onMoveMouseDown: () => void;
+    /** Возвращает класс отступов для inline-триггера не на верхнем уровне. */
+    spaceInlineBlockClass: string;
+    /** Возвращает список NAG после SAN. */
+    nags: number[] | undefined;
+    /** Возвращает дерево партии. */
+    chessTree: ChessTree;
+    /** Возвращает true, если показывать пункт поднятия приоритета в меню. */
+    showUpPriorityItem: boolean;
+    /** Возвращает колбэк после удаления варианта. */
+    onDeleteVariant: () => void;
+    /** Возвращает true, если у ячейки SAN в верхней сетке нужна нижняя граница при неполном ряду (нет чёрной ноды). */
+    mainRowBottomEdge?: boolean | undefined;
+};
+declare const MoveSanWithMenu: import("svelte").Component<TMoveSanWithMenuProps, {}, "">;
+type MoveSanWithMenu = ReturnType<typeof MoveSanWithMenu>;
+export default MoveSanWithMenu;

package/dist/(components)/NagBadges.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { nagBadgeBackground, transformNag } from "@connectorvol/shared";
+  import { cn } from "../utils.js";
+  import { nagDescription } from "../(models)/nagCatalog.js";
+
+  type TNagBadgesProps = {
+    /** Возвращает список NAG для отображения. */
+    nags: number[] | undefined;
+    /** Возвращает дополнительные классы корневого контейнера. */
+    class?: string;
+  };
+
+  const { nags, class: className = "" }: TNagBadgesProps = $props();
+</script>
+
+{#if nags?.length}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <span
+    data-nag-badges
+    class={cn(
+      "ml-0.5 inline-flex max-w-full flex-nowrap items-center gap-0.5 align-middle whitespace-nowrap overflow-hidden",
+      className,
+    )}
+    oncontextmenu={(e) => e.preventDefault()}
+  >
+    {#each nags ?? [] as nag, i (i)}
+      {@const label = transformNag(nag)}
+      {#if label}
+        <span
+          class="inline-flex h-[1.125rem] w-[1.125rem] shrink-0 cursor-help items-center justify-center rounded-full border border-white/25 text-center font-serif text-[0.625rem] font-semibold leading-none text-white shadow-[0_1px_2px_rgba(0,0,0,0.25)]"
+          style:background={nagBadgeBackground(nag)}
+          title={nagDescription(nag)}>{label}</span
+        >
+      {/if}
+    {/each}
+  </span>
+{/if}

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

@@ -0,0 +1,9 @@
+type TNagBadgesProps = {
+    /** Возвращает список NAG для отображения. */
+    nags: number[] | undefined;
+    /** Возвращает дополнительные классы корневого контейнера. */
+    class?: string;
+};
+declare const NagBadges: import("svelte").Component<TNagBadgesProps, {}, "">;
+type NagBadges = ReturnType<typeof NagBadges>;
+export default NagBadges;