3.1.1 (#104)

* Fix bug where grid selection would be off by when row markers are enabled

* Fix crash when columns are too narrow to render menu selector correctly

* 3.1.1-alpha1

* Add support for group theme

* 3.1.1-alpha2

* Better fix for the grid selection issue

* 3.1.1-alpha3

* Respect theme in group headers correctly

* 3.1.1-alpha4

* Don't overdraw grid lines on 0 width columns

* 3.1.1-alpha5

* Unify undefined and empty string group

* Add minimap

* Minor story touchuP

* animation queue (#103)

* Add animation queue hook

* Better animation queue system

* Make animation queue function with custom cells

* Prevent animation jitter caused by timing differences

* Improve tags rendering perf

* Cleanup tag editor

* Fix demo

* Ensure frozen columns are draggable

* 3.1.1-alpha6

* Fix some editing issues and dont block propagation

* Fix crash

* 3.1.1-alpha7

* Make sure font overrides apply

* 3.1.1-alpha8

* Start working on experimental subgrid support

* 3.1.1-alpha9

* Fix issue where menus could cause drag interactions to not end

* Fix story

* Default text baseline to center

* Update deps

* Fix delete when selecting colukn

* 3.1.1-beta1

* Memory cleanup

* Allow minimap preview rect to be half size

* allow changing size of column group headers, vertical line color, and disabling padding of custom editors

* Fix build

* 3.1.1-beta2

* Improve image window loader performance

* Cleanup render

* Faster render

* Minor speedup

* Reuse images

* Allow for a prep phase for cells to minimize state changes

* const up the enums

* 3.1.1-beta3

* Prep for stable

Author: jassmith

README.md

@@ -4,7 +4,7 @@
 </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.1.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-41.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>
+<p align="center"><a href="https://github.com/glideapps/glide-data-grid/releases" target="_blank"><img src="https://img.shields.io/badge/version-v3.1.1-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-43.1kb-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](https://raw.githubusercontent.com/glideapps/glide-data-grid/master/data-grid.jpg)
 

cells/README.md

@@ -4,7 +4,7 @@
 </h1>
 <p align="center">Additional cells and features for Glide Data Grid</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.1.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;<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>
+<p align="center"><a href="https://github.com/glideapps/glide-data-grid/releases" target="_blank"><img src="https://img.shields.io/badge/version-v3.1.1-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;<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](https://raw.githubusercontent.com/glideapps/glide-data-grid/master/data-grid.jpg)
 

cells/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glideapps/glide-data-grid-cells",
-  "version": "3.1.0",
+  "version": "3.1.1-beta3",
   "description": "Extra cells for glide-data-grid",
   "main": "dist/js/index.js",
   "types": "dist/ts/index.d.ts",
@@ -30,7 +30,7 @@
     "canvas"
   ],
   "dependencies": {
-    "@glideapps/glide-data-grid": "3.1.0"
+    "@glideapps/glide-data-grid": "3.1.1-beta3"
   },
   "devDependencies": {
     "@babel/cli": "^7.16.0",

cells/src/cell.stories.tsx

@@ -213,6 +213,7 @@ export const CustomCells: React.VFC = () => {
                             data: {
                                 kind: "tags-cell",
                                 possibleTags: possibleTags,
+                                readonly: row % 2 === 0,
                                 tags: uniq([
                                     possibleTags[Math.round(rand() * 1000) % possibleTags.length].tag,
                                     possibleTags[Math.round(rand() * 1000) % possibleTags.length].tag,

cells/src/cells/sparkline-cell.tsx

@@ -115,7 +115,8 @@ const renderer: CustomCellRenderer<SparklineCell> = {
                 ctx.save();
                 ctx.font = `8px ${theme.fontFamily}`;
                 ctx.fillStyle = theme.textMedium;
-                ctx.fillText(displayValues[closest], drawX, rect.y + 12);
+                ctx.textBaseline = "top";
+                ctx.fillText(displayValues[closest], drawX, rect.y + theme.cellVerticalPadding);
                 ctx.restore();
             }
         }

cells/src/cells/tags-cell.tsx

@@ -6,6 +6,7 @@ import { CustomCellRenderer } from "../types";
 interface TagsCellProps {
     readonly kind: "tags-cell";
     readonly tags: readonly string[];
+    readonly readonly?: boolean;
     readonly possibleTags: readonly {
         tag: string;
         color: string;
@@ -39,6 +40,12 @@ const EditorWrap = styled.div`
     padding-top: 6px;
     color: ${p => p.theme.textDark};
 
+    box-sizing: border-box;
+
+    * {
+        box-sizing: border-box;
+    }
+
     &&&& label {
         display: flex;
         cursor: pointer;
@@ -53,11 +60,10 @@ const EditorWrap = styled.div`
             margin-right: 6px;
             margin-bottom: 6px;
 
-            border-radius: 100px;
-            height: ${tagHeight}px;
-            padding: 0 ${innerPad}px;
+            border-radius: ${tagHeight / 2}px;
+            min-height: ${tagHeight}px;
+            padding: 2px ${innerPad}px;
             display: flex;
-            justify-content: center;
             align-items: center;
 
             font: 12px ${p => p.theme.fontFamily};
@@ -74,6 +80,14 @@ const EditorWrap = styled.div`
     label:hover .pill {
         box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
     }
+
+    &&&&.readonly label {
+        cursor: default;
+
+        .pill {
+            box-shadow: none !important;
+        }
+    }
 `;
 
 const renderer: CustomCellRenderer<TagsCell> = {
@@ -99,14 +113,12 @@ const renderer: CustomCellRenderer<TagsCell> = {
             ctx.font = `12px ${theme.fontFamily}`;
             const metrics = measureTextCached(tag, ctx);
             const width = metrics.width + innerPad * 2;
-            const textY = tagHeight / 2 + metrics.actualBoundingBoxAscent / 2;
-
-            if (x !== drawArea.x && x + width > drawArea.x + drawArea.width) {
-                if (row < rows) {
-                    row++;
-                    y += tagHeight + innerPad;
-                    x = drawArea.x;
-                }
+            const textY = tagHeight / 2;
+
+            if (x !== drawArea.x && x + width > drawArea.x + drawArea.width && row < rows) {
+                row++;
+                y += tagHeight + innerPad;
+                x = drawArea.x;
             }
 
             ctx.fillStyle = color;
@@ -118,7 +130,7 @@ const renderer: CustomCellRenderer<TagsCell> = {
             ctx.fillText(tag, x + innerPad, y + textY);
 
             x += width + 8;
-            if (x > drawArea.x + drawArea.width && row > rows) break;
+            if (x > drawArea.x + drawArea.width && row >= rows) break;
         }
 
         return true;
@@ -127,29 +139,31 @@ const renderer: CustomCellRenderer<TagsCell> = {
         // eslint-disable-next-line react/display-name
         return p => {
             const { onChange, value } = p;
-            const { possibleTags, tags } = value.data;
+            const { possibleTags, tags, readonly = false } = value.data;
             return (
-                <EditorWrap>
+                <EditorWrap className={readonly ? "readonly" : ""}>
                     {possibleTags.map(t => {
                         const selected = tags.indexOf(t.tag) !== -1;
                         return (
                             <label key={t.tag}>
-                                <input
-                                    type="checkbox"
-                                    checked={selected}
-                                    onChange={() => {
-                                        const newTags = selected ? tags.filter(x => x !== t.tag) : [...tags, t.tag];
-                                        onChange({
-                                            ...p.value,
-                                            data: {
-                                                ...value.data,
-                                                tags: newTags,
-                                            },
-                                        });
-                                    }}
-                                />
+                                {!readonly && (
+                                    <input
+                                        type="checkbox"
+                                        checked={selected}
+                                        onChange={() => {
+                                            const newTags = selected ? tags.filter(x => x !== t.tag) : [...tags, t.tag];
+                                            onChange({
+                                                ...p.value,
+                                                data: {
+                                                    ...value.data,
+                                                    tags: newTags,
+                                                },
+                                            });
+                                        }}
+                                    />
+                                )}
                                 <div
-                                    className={"pill " + (selected ? "selectd" : "unselected")}
+                                    className={"pill " + (selected ? "selected" : "unselected")}
                                     style={{ backgroundColor: selected ? t.color : undefined }}>
                                     {t.tag}
                                 </div>

core/API.md

@@ -457,7 +457,7 @@ interface CustomCell<T extends {} = {}> extends BaseGridCell {
     readonly copyData: string;
 }
 
-export enum GridCellKind {
+export const enum GridCellKind {
     Uri = "uri",
     Text = "text",
     Image = "image",

core/README.md

@@ -4,7 +4,7 @@
 </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.1.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-41.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>
+<p align="center"><a href="https://github.com/glideapps/glide-data-grid/releases" target="_blank"><img src="https://img.shields.io/badge/version-v3.1.1-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-43.1kb-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](https://raw.githubusercontent.com/glideapps/glide-data-grid/master/data-grid.jpg)
 

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glideapps/glide-data-grid",
-  "version": "3.1.0",
+  "version": "3.1.1-beta3",
   "description": "Super fast, pure canvas Data Grid Editor",
   "main": "dist/js/index.js",
   "types": "dist/ts/index.d.ts",

core/src/common/image-window-loader.ts

@@ -3,13 +3,15 @@ import throttle from "lodash/throttle";
 
 interface LoadResult {
     img: HTMLImageElement | undefined;
-    cancel?: () => void;
+    cancel: () => void;
     url: string;
-    cells: Set<number>;
+    cells: number[];
 }
 
 const rowShift = 1 << 16;
 
+const imgPool: HTMLImageElement[] = [];
+
 function packColRowToNumber(col: number, row: number) {
     return row * rowShift + col;
 }
@@ -20,6 +22,14 @@ function unpackNumberToColRow(packed: number): [number, number] {
     return [col, row];
 }
 
+function unpackCol(packed: number): number {
+    return packed % rowShift;
+}
+
+function unpackRow(packed: number, col: number): number {
+    return (packed - col) / rowShift;
+}
+
 class ImageWindowLoader {
     private imageLoaded: (locations: readonly (readonly [number, number])[]) => void = () => undefined;
     private loadedLocations: [number, number][] = [];
@@ -31,10 +41,12 @@ class ImageWindowLoader {
         height: 0,
     };
 
-    private isInWindow(col: number, row: number) {
+    private isInWindow = (packed: number) => {
+        const col = unpackCol(packed);
+        const row = unpackRow(packed, col);
         const w = this.window;
         return col >= w.x && col <= w.x + w.width && row >= w.y && row <= w.y + w.height;
-    }
+    };
 
     private cache: Record<string, LoadResult> = {};
 
@@ -47,34 +59,27 @@ class ImageWindowLoader {
         this.loadedLocations = [];
     }, 20);
 
-    private clearOutOfWindowImpl = () => {
-        const old = this.cache;
-        this.cache = {};
-        const whittled = Object.values(old).map(v => ({
-            ...v,
-            cells: new Set(Array.from(v.cells).filter(n => this.isInWindow(...unpackNumberToColRow(n)))),
-        }));
-
-        whittled
-            .filter(v => v.cells.size > 0)
-            .forEach(v => {
-                this.cache[`${v.url}`] = v;
-            });
-
-        for (const v of whittled) {
-            if (v.cells.size === 0) {
-                v.cancel?.();
+    private clearOutOfWindow = () => {
+        for (const key of Object.keys(this.cache)) {
+            const obj = this.cache[key];
+
+            let keep = false;
+            for (const packed of obj.cells) {
+                if (this.isInWindow(packed)) {
+                    keep = true;
+                    break;
+                }
+            }
+
+            if (keep) {
+                obj.cells = obj.cells.filter(this.isInWindow);
             } else {
-                this.cache[v.url] = v;
+                obj.cancel();
+                delete this.cache[key];
             }
         }
     };
 
-    private clearOutOfWindow = throttle(this.clearOutOfWindowImpl, 600, {
-        leading: false,
-        trailing: true,
-    });
-
     public setWindow(window: Rectangle): void {
         if (
             this.window.x === window.x &&
@@ -92,21 +97,24 @@ class ImageWindowLoader {
 
         const current = this.cache[key];
         if (current !== undefined) {
-            current.cells.add(packColRowToNumber(col, row));
+            const packed = packColRowToNumber(col, row);
+            if (current.img === undefined && !current.cells.includes(packed)) {
+                current.cells.push(packed);
+            }
             return current.img;
         } else {
-            const img = new Image();
+            const img = imgPool.pop() ?? new Image();
 
             img.src = url;
 
             let cancelled = false;
             const result: LoadResult = {
                 img: undefined,
-                cells: new Set([packColRowToNumber(col, row)]),
+                cells: [packColRowToNumber(col, row)],
                 url,
                 cancel: () => {
                     cancelled = true;
-                    img.src = "";
+                    imgPool.unshift(img);
                 },
             };
 
@@ -120,7 +128,7 @@ class ImageWindowLoader {
                 const toWrite = this.cache[key];
                 if (toWrite !== undefined && !errored && !cancelled) {
                     toWrite.img = img;
-                    for (const packed of Array.from(toWrite.cells)) {
+                    for (const packed of toWrite.cells) {
                         this.loadedLocations.push(unpackNumberToColRow(packed));
                     }
                     this.sendLoaded();