Add hover effect intensity property to boolean cell (#912)

* Parameter to tweak hover effect intensity in boolean cell * Fix lock again
glideapps · Mar 6, 2024 · 71bb990 · 71bb990
1 parent cf6c69a
commit 71bb990
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 11 deletions.
diff --git a/packages/core/src/cells/boolean-cell.tsx b/packages/core/src/cells/boolean-cell.tsx
@@ -19,7 +19,14 @@ export const booleanCellRenderer: InternalCellRenderer<BooleanCell> = {
     useLabel: false,
     needsHoverPosition: true,
     measure: () => 50,
-    draw: a => drawBoolean(a, a.cell.data, booleanCellIsEditable(a.cell), a.cell.maxSize ?? defaultCellMaxSize),
+    draw: a =>
+        drawBoolean(
+            a,
+            a.cell.data,
+            booleanCellIsEditable(a.cell),
+            a.cell.maxSize ?? defaultCellMaxSize,
+            a.cell.hoverEffectIntensity ?? 0.35
+        ),
     onDelete: c => ({
         ...c,
         data: false,
@@ -70,7 +77,8 @@ function drawBoolean(
     args: BaseDrawArgs,
     data: boolean | BooleanEmpty | BooleanIndeterminate,
     canEdit: boolean,
-    maxSize?: number
+    maxSize: number,
+    hoverEffectIntensity: number
 ) {
     if (!canEdit && data === BooleanEmpty) {
         return;
@@ -87,18 +95,26 @@ function drawBoolean(
     } = args;
     const { x, y, width: w, height: h } = rect;
 
-    const hoverEffect = 0.35;
+    // Don't set the global alpha unnecessarily
+    let shouldRestoreAlpha = false;
+    if (hoverEffectIntensity > 0) {
+        let alpha = canEdit ? 1 - hoverEffectIntensity + hoverEffectIntensity * hoverAmount : 0.4;
+        if (data === BooleanEmpty) {
+            alpha *= hoverAmount;
+        }
+        if (alpha === 0) {
+            return;
+        }
 
-    let alpha = canEdit ? 1 - hoverEffect + hoverEffect * hoverAmount : 0.4;
-    if (data === BooleanEmpty) {
-        alpha *= hoverAmount;
-    }
-    if (alpha === 0) {
-        return;
+        if (alpha < 1) {
+            shouldRestoreAlpha = true;
+            ctx.globalAlpha = alpha;
+        }
     }
-    ctx.globalAlpha = alpha;
 
     drawCheckbox(ctx, theme, data, x, y, w, h, highlighted, hoverX, hoverY, maxSize, contentAlign);
 
-    ctx.globalAlpha = 1;
+    if (shouldRestoreAlpha) {
+        ctx.globalAlpha = 1;
+    }
 }
diff --git a/packages/core/src/internal/data-grid/data-grid-types.ts b/packages/core/src/internal/data-grid/data-grid-types.ts
@@ -443,6 +443,7 @@ export interface BooleanCell extends BaseGridCell {
     readonly readonly?: boolean;
     readonly allowOverlay: false;
     readonly maxSize?: number;
+    readonly hoverEffectIntensity?: number;
 }
 
 // Can be written more concisely, not easier to read if more concise.