3.0.1 (#80)

* Tweak animations

* Fix focus ring draw next to sticky row

* Icon

* Update readme

* Update license

* Shhhhhhhhh

* Boo github taking away all the fun

Author: jassmith

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 typeguard, Inc.
+Copyright (c) 2021 typeguard, Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,9 +1,10 @@
 <h1 align="center">
-  <b>Glide <span style="color: #30CC5C">Data</span> Grid</b>
+  <img src="./icon.png" width="224px"/><br/>
+  <b>Glide Data Grid</b>
 </h1>
 <p align="center">A relatively small HTML5 Canvas based data editor supporting <b>millions</b> of rows, <b>rapid</b> updating, and fully <b>native scrolling</b>. We built <a href="https://grid.glideapps.com" target="_blank">Data Grid</a> as the basis for the <a href="https://docs.glideapps.com/all/reference/data-editor/introduction-to-the-data-editor" target="_blank">Glide Data Editor</a>.</p>
 
-<p align="center"><a href="https://github.com/glideapps/glide-data-grid/releases" target="_blank"><img src="https://img.shields.io/badge/version-v3.0.0-blue?style=for-the-badge&logo=none" alt="grid version" /></a>&nbsp;<a href="https://reactjs.org/" target="_blank"><img src="https://img.shields.io/badge/React-16+-00ADD8?style=for-the-badge&logo=react" alt="react version" /></a>&nbsp;<a href="https://www.typescriptlang.org/" target="_blank"><img src="https://img.shields.io/badge/Typescript-grey?style=for-the-badge&logo=typescript" alt="react version" /></a>&nbsp;<a href="https://bundlephobia.com/package/@glideapps/glide-data-grid" target="_blank"><img src="https://img.shields.io/badge/Bundle_Size-48.7kb-success?style=for-the-badge&logo=none" alt="go cover" /></a>&nbsp;<img src="https://img.shields.io/badge/license-mit-red?style=for-the-badge&logo=none" alt="license" /></p>
+<p align="center"><a href="https://github.com/glideapps/glide-data-grid/releases" target="_blank"><img src="https://img.shields.io/badge/version-v3.0.0-blue?style=for-the-badge&logo=none" alt="grid version" /></a>&nbsp;<a href="https://reactjs.org/" target="_blank"><img src="https://img.shields.io/badge/React-16+-00ADD8?style=for-the-badge&logo=react" alt="react version" /></a>&nbsp;<a href="https://www.typescriptlang.org/" target="_blank"><img src="https://img.shields.io/badge/Typescript-grey?style=for-the-badge&logo=typescript" alt="react version" /></a>&nbsp;<a href="https://bundlephobia.com/package/@glideapps/glide-data-grid" target="_blank"><img src="https://img.shields.io/badge/Bundle_Size-48.7kb-success?style=for-the-badge&logo=none" alt="go cover" /></a>&nbsp;<img src="https://img.shields.io/badge/license-mit-red?style=for-the-badge&logo=none" alt="license" />&nbsp;<a href="https://www.glideapps.com/jobs" target="_blank"><img src="https://img.shields.io/badge/❤_Made_by-Glide-11CCE5?style=for-the-badge&logo=none" alt="glide" /></a></p>
 
 ![Data Grid](./data-grid.jpg)
 

icon.png

@@ -5,7 +5,7 @@ type StateItem = { item: Item; hoverAmount: number };
 export type HoverValues = readonly Readonly<StateItem>[];
 export type StepCallback = (values: HoverValues) => void;
 
-const hoverTime = 120;
+const hoverTime = 80;
 const epsilon = 1e-6;
 
 // Ported from webkit

src/data-grid/animation-manager.ts

@@ -197,19 +197,20 @@ export function drawNewRowCell(
     const lineSize = isFirst ? finalLineSize : hoverAmount * finalLineSize;
     const xTranslate = isFirst ? 0 : (1 - hoverAmount) * finalLineSize * 0.5;
 
+    const padPlus = cellXPad + 4;
     if (lineSize > 0) {
-        ctx.moveTo(x + cellXPad + xTranslate, y + height / 2);
-        ctx.lineTo(x + cellXPad + xTranslate + lineSize, y + height / 2);
-        ctx.moveTo(x + cellXPad + xTranslate + lineSize * 0.5, y + height / 2 - lineSize * 0.5 - 0.5);
-        ctx.lineTo(x + cellXPad + xTranslate + lineSize * 0.5, y + height / 2 + lineSize * 0.5 + 0.5);
+        ctx.moveTo(x + padPlus + xTranslate, y + height / 2);
+        ctx.lineTo(x + padPlus + xTranslate + lineSize, y + height / 2);
+        ctx.moveTo(x + padPlus + xTranslate + lineSize * 0.5, y + height / 2 - lineSize * 0.5);
+        ctx.lineTo(x + padPlus + xTranslate + lineSize * 0.5, y + height / 2 + lineSize * 0.5);
         ctx.lineWidth = 2;
         ctx.strokeStyle = theme.bgIconHeader;
         ctx.lineCap = "round";
         ctx.stroke();
     }
 
     ctx.fillStyle = theme.textMedium;
-    ctx.fillText(data, 16 + x + cellXPad + 0.5, y + height / 2 + 4.5);
+    ctx.fillText(data, 24 + x + cellXPad + 0.5, y + height / 2 + 4.5);
     ctx.beginPath();
 }
 

src/data-grid/data-grid-lib.ts

@@ -823,7 +823,7 @@ function drawFocusRing(
     const [targetCol, targetRow] = selectedCell.cell;
 
     const isStickyRow = lastRowSticky && targetRow === rows - 1;
-    const stickRowHeight = lastRowSticky && !isStickyRow ? getRowHeight(rows - 1) : 0;
+    const stickRowHeight = lastRowSticky && !isStickyRow ? getRowHeight(rows - 1) - 1 : 0;
 
     ctx.beginPath();
     ctx.rect(0, headerHeight, width, height - headerHeight - stickRowHeight);