Skip to content

Commit

Permalink
Get checkbox alignment working (#631)
Browse files Browse the repository at this point in the history 
* Get checkbox alignment working

* Fix checkbox hover

* Add util

* -Get checkbox click working -Refactor utils

* Move funcs into utils and update naming
  • Loading branch information
@frankagathos
frankagathos committed Feb 5, 2023
1 parent b470dee commit cc463a9
Show file tree
Hide file tree
Showing 5 changed files with 92 additions and 30 deletions.
30 changes: 30 additions & 0 deletions packages/core/src/common/utils.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,36 @@ export function degreesToRadians(degrees: number) {
return (degrees * PI) / 180;
}

export const getSquareBB = (posX: number, posY: number, squareSideLength: number) => ({
x1: posX - squareSideLength / 2,
y1: posY - squareSideLength / 2,
x2: posX + squareSideLength / 2,
y2: posY + squareSideLength / 2,
});

export const getSquareXPosFromAlign = (
alignment: "left" | "center" | "right",
containerX: number,
containerWidth: number,
horizontalPadding: number,
squareWidth: number
) => {
switch (alignment) {
case "left":
return Math.floor(containerX) + horizontalPadding + squareWidth / 2;
case "center":
return Math.floor(containerX + containerWidth / 2);
case "right":
return Math.floor(containerX + containerWidth) - horizontalPadding - squareWidth / 2;
}
};
export const getSquareWidth = (maxSize: number, containerHeight: number, verticalPadding: number) =>
Math.min(maxSize, containerHeight - verticalPadding * 2);

type BoundingBox = { x1: number; y1: number; x2: number; y2: number };
export const pointIsWithinBB = (x: number, y: number, bb: BoundingBox) =>
bb.x1 <= x && x <= bb.x2 && bb.y1 <= y && y <= bb.y2;

/**
* The input provided to a sprite function.
*
Expand Down
24 changes: 18 additions & 6 deletions packages/core/src/data-grid/cells/boolean-cell.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { getSquareWidth, getSquareXPosFromAlign, getSquareBB, pointIsWithinBB } from "../../common/utils";
import { drawBoolean } from "../data-grid-lib";
import {
GridCellKind,
Expand All @@ -22,6 +23,8 @@ export function toggleBoolean(data: boolean | null | undefined): boolean | null

const defaultCellMaxSize = 20;



export const booleanCellRenderer: InternalCellRenderer<BooleanCell> = {
getAccessibilityString: c => c.data?.toString() ?? "false",
kind: GridCellKind.Boolean,
Expand All @@ -35,13 +38,22 @@ export const booleanCellRenderer: InternalCellRenderer<BooleanCell> = {
data: false,
}),
onClick: e => {
const { cell, posX: x, posY: y, bounds } = e;
const { cell, posX: pointerX, posY: pointerY, bounds, theme } = e;
const { width, height, x: cellX, y: cellY } = bounds;
const maxWidth = cell.maxSize ?? defaultCellMaxSize;
if (
booleanCellIsEditable(cell) &&
Math.abs(x - bounds.width / 2) <= Math.min(maxWidth / 2, bounds.height / 3.4) &&
Math.abs(y - bounds.height / 2) <= Math.min(maxWidth / 2, bounds.height / 3.4)
) {
const cellCenterY = Math.floor(bounds.y + height / 2);
const checkBoxWidth = getSquareWidth(maxWidth, height, theme.cellVerticalPadding);
const posX = getSquareXPosFromAlign(
cell.contentAlign ?? "center",
cellX,
width,
theme.cellHorizontalPadding,
checkBoxWidth
);
const bb = getSquareBB(posX, cellCenterY, checkBoxWidth);
const checkBoxClicked = pointIsWithinBB(cellX + pointerX, cellY + pointerY, bb);

if (booleanCellIsEditable(cell) && checkBoxClicked) {
return {
...cell,
data: toggleBoolean(cell.data),
Expand Down
1 change: 1 addition & 0 deletions packages/core/src/data-grid/cells/cell-types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ export interface BaseDrawArgs {
imageLoader: ImageWindowLoader;
spriteManager: SpriteManager;
hyperWrapping: boolean;
cell: InnerGridCell;
requestAnimationFrame: () => void;
}

Expand Down
61 changes: 37 additions & 24 deletions packages/core/src/data-grid/data-grid-lib.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,14 @@ import {
BooleanEmpty,
BooleanIndeterminate,
} from "./data-grid-types";
import { degreesToRadians, direction } from "../common/utils";
import {
degreesToRadians,
direction,
getSquareWidth,
getSquareXPosFromAlign,
getSquareBB,
pointIsWithinBB,
} from "../common/utils";
import React from "react";
import type { BaseDrawArgs, PrepResult } from "./cells/cell-types";
import { assertNever } from "../common/support";
Expand Down Expand Up @@ -548,25 +555,23 @@ export function drawCheckbox(
highlighted: boolean,
hoverX: number = -20,
hoverY: number = -20,
maxSize: number = 32
maxSize: number = 32,
alignment: BaseGridCell["contentAlign"] = "center"
) {
const centerX = Math.floor(x + width / 2);
const centerY = Math.floor(y + height / 2);

const checkBoxWidth = Math.min(maxSize, height - theme.cellVerticalPadding * 2);

const hoverHelper = checkBoxWidth / 2;
const hovered = Math.abs(hoverX - width / 2) < hoverHelper && Math.abs(hoverY - height / 2) < hoverHelper;

const rectBordRadius = 4;
const posHelperChecked = checkBoxWidth / 2;
const checkBoxWidth = getSquareWidth(maxSize, height, theme.cellVerticalPadding);
const checkBoxHalfWidth = checkBoxWidth / 2;
const posX = getSquareXPosFromAlign(alignment, x, width, theme.cellHorizontalPadding, checkBoxWidth);
const bb = getSquareBB(posX, centerY, checkBoxWidth);
const hovered = pointIsWithinBB(x + hoverX, y + hoverY, bb);

switch (checked) {
case true: {
ctx.beginPath();
roundedRect(
ctx,
centerX - checkBoxWidth / 2,
posX - checkBoxWidth / 2,
centerY - checkBoxWidth / 2,
checkBoxWidth,
checkBoxWidth,
Expand All @@ -578,16 +583,16 @@ export function drawCheckbox(

ctx.beginPath();
ctx.moveTo(
centerX - posHelperChecked + checkBoxWidth / 4.23,
centerY - posHelperChecked + checkBoxWidth / 1.97
posX - checkBoxHalfWidth + checkBoxWidth / 4.23,
centerY - checkBoxHalfWidth + checkBoxWidth / 1.97
);
ctx.lineTo(
centerX - posHelperChecked + checkBoxWidth / 2.42,
centerY - posHelperChecked + checkBoxWidth / 1.44
posX - checkBoxHalfWidth + checkBoxWidth / 2.42,
centerY - checkBoxHalfWidth + checkBoxWidth / 1.44
);
ctx.lineTo(
centerX - posHelperChecked + checkBoxWidth / 1.29,
centerY - posHelperChecked + checkBoxWidth / 3.25
posX - checkBoxHalfWidth + checkBoxWidth / 1.29,
centerY - checkBoxHalfWidth + checkBoxWidth / 3.25
);

ctx.strokeStyle = theme.bgCell;
Expand All @@ -603,7 +608,7 @@ export function drawCheckbox(
ctx.beginPath();
roundedRect(
ctx,
centerX - checkBoxWidth / 2 + 0.5,
posX - checkBoxWidth / 2 + 0.5,
centerY - checkBoxWidth / 2 + 0.5,
checkBoxWidth - 1,
checkBoxWidth - 1,
Expand All @@ -620,7 +625,7 @@ export function drawCheckbox(
ctx.beginPath();
roundedRect(
ctx,
centerX - checkBoxWidth / 2,
posX - checkBoxWidth / 2,
centerY - checkBoxWidth / 2,
checkBoxWidth,
checkBoxWidth,
Expand All @@ -631,8 +636,8 @@ export function drawCheckbox(
ctx.fill();

ctx.beginPath();
ctx.moveTo(centerX - checkBoxWidth / 3, centerY);
ctx.lineTo(centerX + checkBoxWidth / 3, centerY);
ctx.moveTo(posX - checkBoxWidth / 3, centerY);
ctx.lineTo(posX + checkBoxWidth / 3, centerY);
ctx.strokeStyle = theme.bgCell;
ctx.lineCap = "round";
ctx.lineWidth = 1.9;
Expand Down Expand Up @@ -791,8 +796,16 @@ export function drawBoolean(
if (!canEdit && data === BooleanEmpty) {
return;
}

const { ctx, hoverAmount, theme, rect, highlighted, hoverX, hoverY } = args;
const {
ctx,
hoverAmount,
theme,
rect,
highlighted,
hoverX,
hoverY,
cell: { contentAlign },
} = args;
const { x, y, width: w, height: h } = rect;

const hoverEffect = 0.35;
Expand All @@ -806,7 +819,7 @@ export function drawBoolean(
}
ctx.globalAlpha = alpha;

drawCheckbox(ctx, theme, data, x, y, w, h, highlighted, hoverX, hoverY, maxSize);
drawCheckbox(ctx, theme, data, x, y, w, h, highlighted, hoverX, hoverY, maxSize, contentAlign);

ctx.globalAlpha = 1;
}
Expand Down
6 changes: 6 additions & 0 deletions packages/core/src/docs/examples/content-alignment.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,12 @@ export const ContentAlignment: React.VFC = () => {
contentAlign: "right",
};
}
if (col === 5) {
return {
...getCellContent(cell),
contentAlign: "left",
};
}
return getCellContent(cell);
},
[getCellContent]
Expand Down

0 comments on commit cc463a9

Please sign in to comment.