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

dsmmcken · web-flow · commit 078190010943 · 2024-02-07T14:31:11.000-05:00
- 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.
diff --git a/packages/code-studio/src/assets/svg/cursor-copy.svg b/packages/code-studio/src/assets/svg/cursor-copy.svg
diff --git a/packages/code-studio/src/main/AppMainContainer.scss b/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%;
diff --git a/packages/components/assets/logos/community-wordmark-dark.svg b/packages/components/assets/logos/community-wordmark-dark.svg
diff --git a/packages/components/assets/logos/community-wordmark-light.svg b/packages/components/assets/logos/community-wordmark-light.svg
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -58,7 +58,7 @@
     "dist",
     "scss",
     "css",
-    "logos"
+    "assets"
   ],
   "sideEffects": [
     "*.css"
diff --git a/packages/components/src/theme/Logo.css b/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 {
diff --git a/packages/dashboard-core-plugins/assets/svg/cursor-unlinker.svg b/packages/dashboard-core-plugins/assets/svg/cursor-unlinker.svg
diff --git a/packages/dashboard-core-plugins/package.json b/packages/dashboard-core-plugins/package.json
@@ -68,7 +68,8 @@
     "@deephaven/mocks": "file:../mocks"
   },
   "files": [
-    "dist"
+    "dist",
+    "assets"
   ],
   "sideEffects": [
     "*.css"
diff --git a/packages/dashboard-core-plugins/src/linker/LinkerLink.scss b/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;
       }
diff --git a/packages/dashboard-core-plugins/src/panels/IrisGridPanel.scss b/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;
-}
diff --git a/packages/grid/src/Grid.tsx b/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 {
diff --git a/packages/grid/src/KeyHandler.ts b/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
diff --git a/packages/iris-grid/assets/svg/cursor-copy.svg b/packages/iris-grid/assets/svg/cursor-copy.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M10,6V0H6v6H0v4h6v6h4v-6h6V6H10z"/>
+<path class="st0" d="M30.8,18.6l-7.7-7.5l-0.3-0.3h-8.2l-0.3,0.3l-1.1,1.1l-0.3,0.3v15l0.3,0.3l1.1,1.1l0.3,0.3h1.1v0.1l0.3,0.3
+	l1.4,1.3l0.3,0.3h11.8l0.3-0.3l1.1-1.1l0.3-0.3V18.9L30.8,18.6z M27,27h-7v-9h3.2l3.8,3.6V27z"/>
+<polygon points="15,7 15,9 9,9 9,15 7,15 7,9 1,9 1,7 7,7 7,1 9,1 9,7 "/>
+<path d="M25.2,15h-6.8L17,16.3v12.4l1.3,1.3h10.3l1.3-1.3v-9.1L25.2,15z M28,28h-9V17h5.3l3.6,3.5V28z"/>
+<polygon points="24.2,14 16,14 16,28 15.3,28 14,26.7 14,13.3 15.3,12 22.2,12 "/>
+</svg>
diff --git a/packages/iris-grid/assets/svg/cursor-linker-not-allowed.svg b/packages/iris-grid/assets/svg/cursor-linker-not-allowed.svg
diff --git a/packages/iris-grid/assets/svg/cursor-linker.svg b/packages/iris-grid/assets/svg/cursor-linker.svg
diff --git a/packages/iris-grid/package.json b/packages/iris-grid/package.json
@@ -69,7 +69,8 @@
     "@deephaven/mocks": "file:../mocks"
   },
   "files": [
-    "dist"
+    "dist",
+    "assets"
   ],
   "sideEffects": [
     "*.css"
diff --git a/packages/iris-grid/src/IrisGrid.scss b/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;
diff --git a/packages/iris-grid/src/IrisGrid.tsx b/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),
     ];
diff --git a/packages/iris-grid/src/key-handlers/CopyCellKeyHandler.ts b/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;
diff --git a/packages/iris-grid/src/key-handlers/index.ts b/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';

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`:root {`
`2`		`- --dh-logo-dark-img: url('../../logos/community-wordmark-dark.svg');`
`3`		`- --dh-logo-light-img: url('../../logos/community-wordmark-light.svg');`
	`2`	`+ --dh-logo-dark-img: url('../../assets/logos/community-wordmark-dark.svg');`
	`3`	`+ --dh-logo-light-img: url('../../assets/logos/community-wordmark-light.svg');`
`4`	`4`	`}`
`5`	`5`
`6`	`6`	`.dh-logo {`
Original file line number	Diff line number	Diff line change
`@@ -128,6 +128,12 @@ $dash-size: 10;`
`128`	`128`	`}`
`129`	`129`
`130`	`130`	`&.danger-delete {`
	`131`	`+ path.link-select {`
	`132`	`+ cursor:`
	`133`	`+ url('../assets/svg/cursor-unlinker.svg') 8 8,`
	`134`	`+ pointer;`
	`135`	`+ }`
	`136`	`+`
`131`	`137`	`path.link-select:hover ~ path.link-background {`
`132`	`138`	`stroke: $dash-delete-color-2;`
`133`	`139`	`}`
Original file line number	Diff line number	Diff line change
`@@ -27,11 +27,3 @@ $panel-message-overlay-top: 30px;`
`27`	`27`	`color: $danger;`
`28`	`28`	`}`
`29`	`29`	`}`
`30`		`-`
`31`		`-.grid-cursor-linker {`
`32`		`- cursor: crosshair;`
`33`		`-}`
`34`		`-`
`35`		`-.grid-cursor-copy {`
`36`		`- cursor: copy;`
`37`		`-}`