Highlight moves when hovering over the copy/delete buttons

ui/analyse/css/_context-menu.scss

@@ -37,4 +37,9 @@
       background: $m-accent_bg--mix-10;
     }
   }
+
+  &.transparent {
+    opacity: 0.7;
+    transition: opacity 0.2s ease;
+  }
 }

ui/analyse/src/ctrl.ts

@@ -15,7 +15,7 @@ import { compute as computeAutoShapes } from './autoShape';
 import type { Config as ChessgroundConfig } from 'chessground/config';
 import { CevalCtrl, isEvalBetter, sanIrreversible, type EvalMeta } from 'lib/ceval/ceval';
 import { TreeView } from './treeView/treeView';
-import { defined, prop, type Prop, toggle, type Toggle, requestIdleCallback } from 'lib';
+import { defined, prop, type Prop, toggle, type Toggle, requestIdleCallback, propWithEffect } from 'lib';
 import { pubsub } from 'lib/pubsub';
 import type { DrawShape } from 'chessground/draw';
 import { lichessRules } from 'chessops/compat';
@@ -116,6 +116,8 @@ export default class AnalyseCtrl {
   initialPath: Tree.Path;
   contextMenuPath?: Tree.Path;
   gamePath?: Tree.Path;
+  pendingCopyPath: Prop<Tree.Path | null>;
+  pendingDeletionPath: Prop<Tree.Path | null>;
 
   // misc
   requestInitialPly?: number; // start ply from the URL location hash
@@ -157,6 +159,9 @@ export default class AnalyseCtrl {
 
     this.initCeval();
 
+    this.pendingCopyPath = propWithEffect(null, this.redraw);
+    this.pendingDeletionPath = propWithEffect(null, this.redraw);
+
     this.initialPath = this.makeInitialPath();
     this.setPath(this.initialPath);
 
@@ -618,6 +623,7 @@ export default class AnalyseCtrl {
   }
 
   async deleteNode(path: Tree.Path): Promise<void> {
+    this.pendingDeletionPath(null);
     const node = this.tree.nodeAtPath(path);
     if (!node) return;
     const count = treeOps.countChildrenAndComments(node);
@@ -1041,10 +1047,9 @@ export default class AnalyseCtrl {
   };
 
   pluginUpdate = (fen: string) => {
-    // if controller and chessground board state differ, ignore this update. once the chessground
+    // If controller and chessground board states differ, ignore this update. Once the chessground
     // state is updated to match, pluginUpdate will be called again.
     if (!fen.startsWith(this.chessground?.getFen())) return;
-
     this.keyboardMove?.update({ fen, canMove: true });
   };
 }

ui/analyse/src/pgnExport.ts

@@ -63,11 +63,7 @@ export function renderNodesHtml(nodes: PgnNode[]): MaybeVNodes {
   return tags;
 }
 
-export function renderVariationPgn(game: Game, nodeList: Tree.Node[], isMainline: boolean): string {
-  nodeList = [...nodeList];
-  let newNode;
-  while ((newNode = nodeList.slice(-1)[0]?.children[0]) && !(isMainline && newNode.forceVariation))
-    nodeList.push(newNode);
+export function renderVariationPgn(game: Game, nodeList: Tree.Node[]): string {
   const filteredNodeList = nodeList.filter(node => node.san);
   if (filteredNodeList.length === 0) return '';
 

ui/analyse/src/treeView/common.ts

@@ -86,6 +86,8 @@ export function nodeClasses(ctx: Ctx, node: Tree.Node, path: Tree.Path): NodeCla
     good: glyphIds.includes(1),
     brilliant: glyphIds.includes(3),
     interesting: glyphIds.includes(5),
+    'pending-deletion': path.startsWith(ctx.ctrl.pendingDeletionPath() || ' '),
+    'pending-copy': !!ctx.ctrl.pendingCopyPath()?.startsWith(path),
   };
 }
 

ui/analyse/src/treeView/contextMenu.ts

@@ -1,9 +1,10 @@
 import * as licon from 'lib/licon';
-import { type VNode, bind, onInsert, looseH as h } from 'lib/snabbdom';
+import { type VNode, onInsert, looseH as h } from 'lib/snabbdom';
 import type AnalyseCtrl from '../ctrl';
 import * as studyView from '../study/studyView';
 import { patch, nodeFullName } from '../view/util';
 import { renderVariationPgn } from '../pgnExport';
+import { isTouchDevice } from 'lib/device';
 
 export interface Opts {
   path: Tree.Path;
@@ -51,14 +52,45 @@ function positionMenu(menu: HTMLElement, coords: Coords): void {
       : (menu.style.top = coords.y + 'px');
 }
 
-function action(icon: string, text: string, handler: () => void): VNode {
-  return h('a', { attrs: { 'data-icon': icon }, hook: bind('click', handler) }, text);
+function action(
+  icon: string,
+  text: string,
+  onClick: () => void,
+  onHover?: () => void,
+  onLeave?: () => void,
+): VNode {
+  return h(
+    'a',
+    {
+      attrs: { 'data-icon': icon },
+      hook: {
+        insert: vnode => {
+          const elm = vnode.elm as HTMLElement;
+          elm.addEventListener('click', onClick);
+          if (onHover && !isTouchDevice())
+            elm.addEventListener('mouseover', () => {
+              onHover();
+              // If there is a special action for hover, make the menu transparent so that effects
+              // on the move list can be fully seen:
+              $('#' + elementId).addClass('transparent');
+            });
+          if (onLeave)
+            elm.addEventListener('mouseout', () => {
+              onLeave();
+              $('#' + elementId).removeClass('transparent');
+            });
+        },
+      },
+    },
+    text,
+  );
 }
 
 function view(opts: Opts, coords: Coords): VNode {
   const ctrl = opts.root,
     node = ctrl.tree.nodeAtPath(opts.path),
-    onMainline = ctrl.tree.pathIsMainline(opts.path) && !ctrl.tree.pathIsForcedVariation(opts.path);
+    onMainline = ctrl.tree.pathIsMainline(opts.path) && !ctrl.tree.pathIsForcedVariation(opts.path),
+    extendedPath = opts.root.tree.extendPath(opts.path, onMainline);
   return h(
     'div#' + elementId + '.visible',
     {
@@ -78,7 +110,13 @@ function view(opts: Opts, coords: Coords): VNode {
 
       !onMainline && action(licon.Checkmark, i18n.site.makeMainLine, () => ctrl.promote(opts.path, true)),
 
-      action(licon.Trash, i18n.site.deleteFromHere, () => ctrl.deleteNode(opts.path)),
+      action(
+        licon.Trash,
+        i18n.site.deleteFromHere,
+        () => ctrl.deleteNode(opts.path),
+        () => ctrl.pendingDeletionPath(opts.path),
+        () => ctrl.pendingDeletionPath(null),
+      ),
 
       action(licon.PlusButton, i18n.site.expandVariations, () => ctrl.setAllCollapsed(opts.path, false)),
 
@@ -89,10 +127,15 @@ function view(opts: Opts, coords: Coords): VNode {
       onMainline &&
         action(licon.InternalArrow, i18n.site.forceVariation, () => ctrl.forceVariation(opts.path, true)),
 
-      action(licon.Clipboard, onMainline ? i18n.site.copyMainLinePgn : i18n.site.copyVariationPgn, () =>
-        navigator.clipboard.writeText(
-          renderVariationPgn(opts.root.data.game, opts.root.tree.getNodeList(opts.path), onMainline),
-        ),
+      action(
+        licon.Clipboard,
+        onMainline ? i18n.site.copyMainLinePgn : i18n.site.copyVariationPgn,
+        () =>
+          navigator.clipboard.writeText(
+            renderVariationPgn(opts.root.data.game, opts.root.tree.getNodeList(extendedPath)),
+          ),
+        () => ctrl.pendingCopyPath(extendedPath),
+        () => ctrl.pendingCopyPath(null),
       ),
     ],
   );

ui/lib/css/tree/_tree.scss

@@ -105,6 +105,12 @@
         }
       }
     }
+    &.pending-deletion {
+      background-color: $m-bad_bg--mix-50 !important;
+    }
+    &.pending-copy {
+      background-color: $m-good_bg--mix-50 !important;
+    }
   }
 
   &-column move {

ui/lib/src/tree/tree.ts

@@ -24,6 +24,7 @@ export interface TreeWrapper {
   pathIsMainline(path: Tree.Path): boolean;
   pathIsForcedVariation(path: Tree.Path): boolean;
   lastMainlineNode(path: Tree.Path): Tree.Node;
+  extendPath(path: Tree.Path, isMainline: boolean): Tree.Path;
   pathExists(path: Tree.Path): boolean;
   deleteNodeAt(path: Tree.Path): void;
   setCollapsedAt(path: Tree.Path, collapsed: boolean): MaybeNode;
@@ -102,6 +103,13 @@ export function build(root: Tree.Node): TreeWrapper {
       return ops.childById(node, id);
     });
 
+  const extendPath = (path: Tree.Path, isMainline: boolean): Tree.Path => {
+    let currNode = nodeAtPath(path);
+    while ((currNode = currNode?.children[0]) && !(isMainline && currNode.forceVariation))
+      path += currNode.id;
+    return path;
+  };
+
   function updateAt(path: Tree.Path, update: (node: Tree.Node) => void): Tree.Node | undefined {
     const node = nodeAtPathOrNull(path);
     if (node) {
@@ -234,6 +242,7 @@ export function build(root: Tree.Node): TreeWrapper {
     pathIsMainline,
     pathIsForcedVariation,
     lastMainlineNode: (path: Tree.Path): Tree.Node => lastMainlineNodeFrom(root, path),
+    extendPath,
     pathExists,
     deleteNodeAt,
     promoteAt,