fix: show copy cursor in grid on key down and not just mouse move (#1735

)

- Adds copy cell key handler to set cursor on key down. Grid was only
showing copy cursor on mouse move, not just key down. Unfortunately we
still require focus to get the key down, and I don't think it's worth
hacking around that.
- Moved cursor styles to linker and irisgrid css respectively, so that
it is shared to DHE. AppMainContainer.css isn't used in DHE.
- Moved cursors and logos in to asset folder (folders named "assets" are
bundled by Vite
- Tweaked copy icon svg (aliasing is improved)
- default cursor to "copy" in iris grid so that it shows in embed widget
and DHE

BREAKING CHANGE: linker and iris grid custom cursor styling and assets
are now provided by components directly. DHE css and svg files
containing linker cursors should be removed/de-duplicated.

packages/code-studio/src/main/AppMainContainer.scss

@@ -9,34 +9,6 @@ $tab-link-disabled-color: $gray-600;
 
 $nav-space: 4px; // give a gap around some buttons for focus area that are in nav bar
 
-.grid-cursor-copy {
-  cursor:
-    url('../assets/svg/cursor-copy.svg') 8 8,
-    copy;
-}
-
-.grid-cursor-linker {
-  cursor:
-    url('../assets/svg/cursor-linker.svg') 8 8,
-    crosshair;
-}
-
-.grid-cursor-linker-not-allowed {
-  cursor:
-    url('../assets/svg/cursor-linker-not-allowed.svg') 8 8,
-    not-allowed;
-}
-
-.linker-overlay path.link-select {
-  cursor: pointer;
-}
-
-.linker-overlay.danger-delete path.link-select {
-  cursor:
-    url('../assets/svg/cursor-unlinker.svg') 8 8,
-    pointer;
-}
-
 .app-main-top-nav-menus {
   display: flex;
   width: 100%;

packages/components/package.json

@@ -58,7 +58,7 @@
     "dist",
     "scss",
     "css",
-    "logos"
+    "assets"
   ],
   "sideEffects": [
     "*.css"

packages/components/src/theme/Logo.css

@@ -1,6 +1,6 @@
 :root {
-  --dh-logo-dark-img: url('../../logos/community-wordmark-dark.svg');
-  --dh-logo-light-img: url('../../logos/community-wordmark-light.svg');
+  --dh-logo-dark-img: url('../../assets/logos/community-wordmark-dark.svg');
+  --dh-logo-light-img: url('../../assets/logos/community-wordmark-light.svg');
 }
 
 .dh-logo {

packages/dashboard-core-plugins/package.json

@@ -68,7 +68,8 @@
     "@deephaven/mocks": "file:../mocks"
   },
   "files": [
-    "dist"
+    "dist",
+    "assets"
   ],
   "sideEffects": [
     "*.css"

packages/dashboard-core-plugins/src/linker/LinkerLink.scss

@@ -128,6 +128,12 @@ $dash-size: 10;
     }
 
     &.danger-delete {
+      path.link-select {
+        cursor:
+          url('../assets/svg/cursor-unlinker.svg') 8 8,
+          pointer;
+      }
+
       path.link-select:hover ~ path.link-background {
         stroke: $dash-delete-color-2;
       }

packages/dashboard-core-plugins/src/panels/IrisGridPanel.scss

@@ -27,11 +27,3 @@ $panel-message-overlay-top: 30px;
     color: $danger;
   }
 }
-
-.grid-cursor-linker {
-  cursor: crosshair;
-}
-
-.grid-cursor-copy {
-  cursor: copy;
-}

packages/grid/src/Grid.tsx

@@ -1736,18 +1736,23 @@ class Grid extends PureComponent<GridProps, GridState> {
     event: GridKeyboardEvent
   ): void {
     const keyHandlers = this.getKeyHandlers();
+    let cursor = null;
     for (let i = 0; i < keyHandlers.length; i += 1) {
       const keyHandler = keyHandlers[i];
       const result =
         keyHandler[functionName] != null &&
         keyHandler[functionName](event, this);
       if (result !== false) {
+        if (keyHandler.cursor != null) {
+          ({ cursor } = keyHandler);
+        }
         const options = result as EventHandlerResultOptions;
         if (options?.stopPropagation ?? true) event.stopPropagation();
         if (options?.preventDefault ?? true) event.preventDefault();
         break;
       }
     }
+    this.setState({ cursor });
   }
 
   handleKeyDown(event: GridKeyboardEvent): void {

packages/grid/src/KeyHandler.ts

@@ -26,6 +26,9 @@ export class KeyHandler {
     this.order = order;
   }
 
+  // Cursor to use if this returns any truthy value including { stopPropagation: false, preventDefault: false }
+  cursor: string | null = null;
+
   /**
    * Handle a keydown event on the grid.
    * @param event The keyboard event

packages/iris-grid/package.json

@@ -69,7 +69,8 @@
     "@deephaven/mocks": "file:../mocks"
   },
   "files": [
-    "dist"
+    "dist",
+    "assets"
   ],
   "sideEffects": [
     "*.css"

packages/iris-grid/src/IrisGrid.scss

@@ -40,6 +40,24 @@ $cell-invalid-box-shadow:
     position: relative;
   }
 
+  .grid-cursor-copy {
+    cursor:
+      url('../assets/svg/cursor-copy.svg') 8 8,
+      copy;
+  }
+
+  .grid-cursor-linker {
+    cursor:
+      url('../assets/svg/cursor-linker.svg') 8 8,
+      crosshair;
+  }
+
+  .grid-cursor-linker-not-allowed {
+    cursor:
+      url('../assets/svg/cursor-linker-not-allowed.svg') 8 8,
+      not-allowed;
+  }
+
   .table-sidebar {
     height: 100%;
     flex: 0 0 $table-sidebar-max-width;

packages/iris-grid/src/IrisGrid.tsx

@@ -112,6 +112,7 @@ import PendingDataBottomBar from './PendingDataBottomBar';
 import IrisGridCopyHandler, { CopyOperation } from './IrisGridCopyHandler';
 import FilterInputField from './FilterInputField';
 import {
+  CopyCellKeyHandler,
   ClearFilterKeyHandler,
   CopyKeyHandler,
   ReverseKeyHandler,
@@ -497,7 +498,7 @@ export class IrisGrid extends Component<IrisGridProps, IrisGridState> {
     columnSelectionValidator: null,
     columnAllowedCursor: null,
     columnNotAllowedCursor: null,
-    copyCursor: null,
+    copyCursor: 'copy',
     name: 'table',
     onlyFetchVisibleColumns: true,
     showSearchBar: false,
@@ -709,6 +710,7 @@ export class IrisGrid extends Component<IrisGridProps, IrisGridState> {
 
     const { dh } = model;
     const keyHandlers: KeyHandler[] = [
+      new CopyCellKeyHandler(this),
       new ReverseKeyHandler(this),
       new ClearFilterKeyHandler(this),
     ];

packages/iris-grid/src/key-handlers/CopyCellKeyHandler.ts

@@ -0,0 +1,45 @@
+import { KeyboardEvent } from 'react';
+import { KeyHandler } from '@deephaven/grid';
+import { ContextActionUtils } from '@deephaven/components';
+import type { Grid } from '@deephaven/grid';
+import { IrisGrid } from '../IrisGrid';
+
+class CopyCellKeyHandler extends KeyHandler {
+  private irisGrid: IrisGrid;
+
+  constructor(irisGrid: IrisGrid) {
+    super();
+
+    this.irisGrid = irisGrid;
+    this.cursor = null;
+  }
+
+  onDown(event: KeyboardEvent, grid: Grid): boolean {
+    if (
+      event.altKey &&
+      !ContextActionUtils.isModifierKeyDown(event) &&
+      !event.shiftKey
+    ) {
+      const { mouseX, mouseY } = grid.state;
+      if (mouseX == null || mouseY == null) {
+        return false;
+      }
+      const gridPoint = grid.getGridPointFromXY(mouseX, mouseY);
+      if (gridPoint.column != null && gridPoint.row != null) {
+        this.cursor = this.irisGrid.props.copyCursor;
+        return true;
+      }
+    }
+    return false;
+  }
+
+  onUp(event: KeyboardEvent, grid: Grid): boolean {
+    if (this.cursor === this.irisGrid.props.copyCursor) {
+      this.cursor = null;
+      return true;
+    }
+    return false;
+  }
+}
+
+export default CopyCellKeyHandler;

packages/iris-grid/src/key-handlers/index.ts

@@ -1,3 +1,4 @@
+export { default as CopyCellKeyHandler } from './CopyCellKeyHandler';
 export { default as CopyKeyHandler } from './CopyKeyHandler';
 export { default as ReverseKeyHandler } from './ReverseKeyHandler';
 export { default as ClearFilterKeyHandler } from './ClearFilterKeyHandler';