Skip to content

Commit

Permalink
Add support for style padding to checkbox and radio (#436)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ota-meshi
ota-meshi authored Jan 8, 2025
1 parent f365ebb commit 677c3ff
Show file tree
Hide file tree
Showing 21 changed files with 260 additions and 93 deletions.
89 changes: 60 additions & 29 deletions packages/cheetah-grid/src/js/GridCanvasHelper.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -870,6 +870,7 @@ function drawRadioButton<T>(
}
);
}

class ThemeResolver<T> implements RequiredThemeDefine {
private _grid: ListGridAPI<T>;
private _checkbox: RequiredThemeDefine["checkbox"] | null = null;
Expand Down Expand Up @@ -1118,6 +1119,30 @@ function strokeRect(
}
}

function getPaddedRect(
rect: RectProps,
padding: number | string | (number | string)[] | undefined,
font: string | undefined,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
helper: GridCanvasHelper<any>,
context: CellContext
) {
if (!padding) {
return rect;
}
const {
0: pTop,
1: pRight,
2: pBottom,
3: pLeft,
} = helper.toBoxPixelArray(padding, context, font);
const left = rect.left + pLeft;
const top = rect.top + pTop;
const width = rect.width - pRight - pLeft;
const height = rect.height - pTop - pBottom;
return new Rect(left, top, width, height);
}

export class GridCanvasHelper<T> implements GridCanvasHelperAPI {
private _grid: ListGridAPI<T>;
private _theme: RequiredThemeDefine;
Expand Down Expand Up @@ -1291,8 +1316,6 @@ export class GridCanvasHelper<T> implements GridCanvasHelperAPI {
trailingIcon?: SimpleColumnIconOption;
} = {}
): void {
let rect = context.getRect();

const { col, row } = context;

if (!color) {
Expand All @@ -1306,14 +1329,13 @@ export class GridCanvasHelper<T> implements GridCanvasHelperAPI {

this.drawWithClip(context, (ctx) => {
font = getFont(font, context.col, context.row, this._grid, ctx);
if (padding) {
const paddingNums = this.toBoxPixelArray(padding, context, font);
const left = rect.left + paddingNums[3];
const top = rect.top + paddingNums[0];
const width = rect.width - paddingNums[1] - paddingNums[3];
const height = rect.height - paddingNums[0] - paddingNums[2];
rect = new Rect(left, top, width, height);
}
const rect = getPaddedRect(
context.getRect(),
padding,
font,
this,
context
);
_inlineRect(this._grid, ctx, text, rect, col, row, {
offset,
color,
Expand Down Expand Up @@ -1357,8 +1379,6 @@ export class GridCanvasHelper<T> implements GridCanvasHelperAPI {
trailingIcon?: SimpleColumnIconOption;
} = {}
): void {
let rect = context.getRect();

const { col, row } = context;

if (!color) {
Expand All @@ -1372,14 +1392,13 @@ export class GridCanvasHelper<T> implements GridCanvasHelperAPI {

this.drawWithClip(context, (ctx) => {
font = getFont(font, context.col, context.row, this._grid, ctx);
if (padding) {
const paddingNums = this.toBoxPixelArray(padding, context, font);
const left = rect.left + paddingNums[3];
const top = rect.top + paddingNums[0];
const width = rect.width - paddingNums[1] - paddingNums[3];
const height = rect.height - paddingNums[0] - paddingNums[2];
rect = new Rect(left, top, width, height);
}
const rect = getPaddedRect(
context.getRect(),
padding,
font,
this,
context
);
const calculator = this.createCalculator(context, font);
lineHeight = calculator.calcHeight(lineHeight);
_multiInlineRect(this._grid, ctx, lines, rect, col, row, {
Expand Down Expand Up @@ -1672,6 +1691,7 @@ export class GridCanvasHelper<T> implements GridCanvasHelperAPI {
check: boolean,
context: CellContext,
{
padding,
animElapsedTime,
offset = CHECKBOX_OFFSET,
uncheckBgColor,
Expand All @@ -1685,7 +1705,13 @@ export class GridCanvasHelper<T> implements GridCanvasHelperAPI {
const { col, row } = context;
drawCheckbox(
ctx,
context.getRect(),
getPaddedRect(
context.getRect(),
padding,
undefined /* font */,
this,
context
),
col,
row,
check,
Expand All @@ -1706,6 +1732,7 @@ export class GridCanvasHelper<T> implements GridCanvasHelperAPI {
check: boolean,
context: CellContext,
{
padding,
animElapsedTime,
offset = CHECKBOX_OFFSET,
checkColor,
Expand All @@ -1721,7 +1748,13 @@ export class GridCanvasHelper<T> implements GridCanvasHelperAPI {
const { col, row } = context;
drawRadioButton(
ctx,
context.getRect(),
getPaddedRect(
context.getRect(),
padding,
undefined /* font */,
this,
context
),
col,
row,
check,
Expand Down Expand Up @@ -1761,15 +1794,13 @@ export class GridCanvasHelper<T> implements GridCanvasHelperAPI {
this.drawWithClip(context, (ctx) => {
font = getFont(font, context.col, context.row, this._grid, ctx);
const { col, row } = context;
const paddingNums = this.toBoxPixelArray(
const { left, top, width, height } = getPaddedRect(
rect,
padding || rect.height / 8,
context,
font
font,
this,
context
);
const left = rect.left + paddingNums[3];
const top = rect.top + paddingNums[0];
const width = rect.width - paddingNums[1] - paddingNums[3];
const height = rect.height - paddingNums[0] - paddingNums[2];

bgColor = getStyleProperty(
bgColor,
Expand Down
9 changes: 9 additions & 0 deletions packages/cheetah-grid/src/js/columns/style/StdBaseStyle.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,15 @@ let defaultStyle: StdBaseStyle;
export class StdBaseStyle extends BaseStyle {
private _textAlign: CanvasTextAlign;
private _textBaseline: CanvasTextBaseline;
private _padding: number | string | (number | string)[] | undefined;
static get DEFAULT(): StdBaseStyle {
return defaultStyle ? defaultStyle : (defaultStyle = new StdBaseStyle());
}
constructor(style: StdBaseStyleOption = {}) {
super(style);
this._textAlign = style.textAlign || "left";
this._textBaseline = style.textBaseline || "middle";
this._padding = style.padding;
}
get textAlign(): CanvasTextAlign {
return this._textAlign;
Expand All @@ -27,6 +29,13 @@ export class StdBaseStyle extends BaseStyle {
this._textBaseline = textBaseline;
this.doChangeStyle();
}
get padding(): number | string | (number | string)[] | undefined {
return this._padding;
}
set padding(padding: number | string | (number | string)[] | undefined) {
this._padding = padding;
this.doChangeStyle();
}
clone(): StdBaseStyle {
return new StdBaseStyle(this);
}
Expand Down
9 changes: 0 additions & 9 deletions packages/cheetah-grid/src/js/columns/style/Style.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ let defaultStyle: Style;
export class Style extends StdBaseStyle {
private _color?: ColorDef;
private _font?: string;
private _padding: number | string | (number | string)[] | undefined;
private _textOverflow: TextOverflow;
static get DEFAULT(): Style {
return defaultStyle ? defaultStyle : (defaultStyle = new Style());
Expand All @@ -13,7 +12,6 @@ export class Style extends StdBaseStyle {
super(style);
this._color = style.color;
this._font = style.font;
this._padding = style.padding;
this._textOverflow = style.textOverflow || "clip";
}
get color(): ColorDef | undefined {
Expand All @@ -30,13 +28,6 @@ export class Style extends StdBaseStyle {
this._font = font;
this.doChangeStyle();
}
get padding(): number | string | (number | string)[] | undefined {
return this._padding;
}
set padding(padding: number | string | (number | string)[] | undefined) {
this._padding = padding;
this.doChangeStyle();
}
get textOverflow(): TextOverflow {
return this._textOverflow;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/cheetah-grid/src/js/columns/type/BaseColumn.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -325,7 +325,7 @@ export abstract class BaseColumn<T> implements ColumnTypeAPI {
indicatorBottomRight,
indicatorBottomLeft,
} = style;
for (const [indicatorStyle, kind] of [
for (const { 0: indicatorStyle, 1: kind } of [
[indicatorTopLeft, DrawIndicatorKind.topLeft],
[indicatorTopRight, DrawIndicatorKind.topRight],
[indicatorBottomRight, DrawIndicatorKind.bottomRight],
Expand Down
2 changes: 2 additions & 0 deletions packages/cheetah-grid/src/js/columns/type/CheckColumn.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ export class CheckColumn<T> extends BaseColumn<T> {
const {
textAlign,
textBaseline,
padding,
borderColor,
checkBgColor,
uncheckBgColor,
Expand All @@ -54,6 +55,7 @@ export class CheckColumn<T> extends BaseColumn<T> {
borderColor,
checkBgColor,
uncheckBgColor,
padding,
};
if (elapsed != null) {
opt.animElapsedTime = elapsed;
Expand Down
18 changes: 16 additions & 2 deletions packages/cheetah-grid/src/js/columns/type/ImageColumn.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import type {
import { BaseColumn } from "./BaseColumn";
import type { DrawCellInfo } from "../../ts-types-internal";
import { ImageStyle } from "../style/ImageStyle";
import { Rect } from "../../internal/Rect";
import { calcStartPosition } from "../../internal/canvases";
import { getCacheOrLoad } from "../../internal/imgs";

Expand Down Expand Up @@ -63,7 +64,8 @@ export class ImageColumn<T> extends BaseColumn<T> {
_grid: ListGridAPI<T>,
{ drawCellBase }: DrawCellInfo<T>
): void {
const { textAlign, textBaseline, margin, bgColor, visibility } = style;
const { textAlign, textBaseline, padding, margin, bgColor, visibility } =
style;
if (bgColor) {
drawCellBase({
bgColor,
Expand All @@ -76,7 +78,19 @@ export class ImageColumn<T> extends BaseColumn<T> {
helper.drawWithClip(context, (ctx) => {
ctx.textAlign = textAlign;
ctx.textBaseline = textBaseline;
const rect = context.getRect();
let rect = context.getRect();
if (padding) {
const paddingNums = helper.toBoxPixelArray(
padding,
context,
undefined /* font */
);
const left = rect.left + paddingNums[3];
const top = rect.top + paddingNums[0];
const width = rect.width - paddingNums[1] - paddingNums[3];
const height = rect.height - paddingNums[0] - paddingNums[2];
rect = new Rect(left, top, width, height);
}
if (style.imageSizing === "keep-aspect-ratio") {
const { width, height } = calcKeepAspectRatioSize(
value.width,
Expand Down
2 changes: 2 additions & 0 deletions packages/cheetah-grid/src/js/columns/type/RadioColumn.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ export class RadioColumn<T> extends BaseColumn<T> {
const {
textAlign,
textBaseline,
padding,
checkColor,
uncheckBorderColor,
checkBorderColor,
Expand Down Expand Up @@ -58,6 +59,7 @@ export class RadioColumn<T> extends BaseColumn<T> {
checkBorderColor,
uncheckBgColor,
checkBgColor,
padding,
};
if (elapsed != null) {
opt.animElapsedTime = elapsed;
Expand Down
2 changes: 1 addition & 1 deletion packages/cheetah-grid/src/js/ts-types/column/style.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,11 @@ export interface BaseStyleOption {
export interface StdBaseStyleOption extends BaseStyleOption {
textAlign?: CanvasTextAlign;
textBaseline?: CanvasTextBaseline;
padding?: number | string | (number | string)[];
}
export interface StdTextBaseStyleOption extends StdBaseStyleOption {
color?: ColorDef;
font?: string;
padding?: number | string | (number | string)[];
textOverflow?: TextOverflow;
}
export interface StdMultilineTextBaseStyleOption
Expand Down
2 changes: 2 additions & 0 deletions packages/cheetah-grid/src/js/ts-types/grid-engine.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -288,6 +288,7 @@ export interface GridCanvasHelperAPI {
check: boolean,
context: CellContext,
option: {
padding?: number | string | (number | string)[];
animElapsedTime?: number;
offset?: number;
uncheckBgColor?: ColorPropertyDefine;
Expand All @@ -301,6 +302,7 @@ export interface GridCanvasHelperAPI {
check: boolean,
context: CellContext,
option: {
padding?: number | string | (number | string)[];
animElapsedTime?: number;
offset?: number;
checkColor?: ColorPropertyDefine;
Expand Down
25 changes: 23 additions & 2 deletions packages/cheetah-grid/src/test/ListGrid_sample_for_layout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,6 @@ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deseru
records.sort(function(r1, r2) { return compare(r1.personid, r2.personid); });
grid.records = records;
},
// sort
style: {padding: [0, 0, 0, '1.2em']},
rowSpan: 3
},
Expand All @@ -129,7 +128,29 @@ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deseru
caption: 'read',
width: 50,
columnType: 'check',
rowSpan: 3
rowSpan: 3,
},
{
field: 'checkReadOnly',
caption: 'check on top',
width: 50,
columnType: 'check',
rowSpan: 3,
style: {
padding: [11, 0, 0, 0],
textBaseline: 'top'
},
},
{
field: 'checkReadOnly',
caption: 'radio on top',
width: 50,
columnType: 'radio',
rowSpan: 3,
style: {
padding: [11, 0, 0, 0],
textBaseline: 'top'
},
},
{
caption: 'name',
Expand Down
Loading

0 comments on commit 677c3ff

Please sign in to comment.