Skip to content

Commit 677c3ff

Browse files
ota-meshiota-meshi
authored
Add support for style padding to checkbox and radio (#436)
1 parent f365ebb commit 677c3ff

21 files changed

+260
-93
lines changed

‎packages/cheetah-grid/src/js/GridCanvasHelper.ts

Lines changed: 60 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -870,6 +870,7 @@ function drawRadioButton<T>(
870870
}
871871
);
872872
}
873+
873874
class ThemeResolver<T> implements RequiredThemeDefine {
874875
private _grid: ListGridAPI<T>;
875876
private _checkbox: RequiredThemeDefine["checkbox"] | null = null;
@@ -1118,6 +1119,30 @@ function strokeRect(
11181119
}
11191120
}
11201121

1122+
function getPaddedRect(
1123+
rect: RectProps,
1124+
padding: number | string | (number | string)[] | undefined,
1125+
font: string | undefined,
1126+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
1127+
helper: GridCanvasHelper<any>,
1128+
context: CellContext
1129+
) {
1130+
if (!padding) {
1131+
return rect;
1132+
}
1133+
const {
1134+
0: pTop,
1135+
1: pRight,
1136+
2: pBottom,
1137+
3: pLeft,
1138+
} = helper.toBoxPixelArray(padding, context, font);
1139+
const left = rect.left + pLeft;
1140+
const top = rect.top + pTop;
1141+
const width = rect.width - pRight - pLeft;
1142+
const height = rect.height - pTop - pBottom;
1143+
return new Rect(left, top, width, height);
1144+
}
1145+
11211146
export class GridCanvasHelper<T> implements GridCanvasHelperAPI {
11221147
private _grid: ListGridAPI<T>;
11231148
private _theme: RequiredThemeDefine;
@@ -1291,8 +1316,6 @@ export class GridCanvasHelper<T> implements GridCanvasHelperAPI {
12911316
trailingIcon?: SimpleColumnIconOption;
12921317
} = {}
12931318
): void {
1294-
let rect = context.getRect();
1295-
12961319
const { col, row } = context;
12971320

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

13071330
this.drawWithClip(context, (ctx) => {
13081331
font = getFont(font, context.col, context.row, this._grid, ctx);
1309-
if (padding) {
1310-
const paddingNums = this.toBoxPixelArray(padding, context, font);
1311-
const left = rect.left + paddingNums[3];
1312-
const top = rect.top + paddingNums[0];
1313-
const width = rect.width - paddingNums[1] - paddingNums[3];
1314-
const height = rect.height - paddingNums[0] - paddingNums[2];
1315-
rect = new Rect(left, top, width, height);
1316-
}
1332+
const rect = getPaddedRect(
1333+
context.getRect(),
1334+
padding,
1335+
font,
1336+
this,
1337+
context
1338+
);
13171339
_inlineRect(this._grid, ctx, text, rect, col, row, {
13181340
offset,
13191341
color,
@@ -1357,8 +1379,6 @@ export class GridCanvasHelper<T> implements GridCanvasHelperAPI {
13571379
trailingIcon?: SimpleColumnIconOption;
13581380
} = {}
13591381
): void {
1360-
let rect = context.getRect();
1361-
13621382
const { col, row } = context;
13631383

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

13731393
this.drawWithClip(context, (ctx) => {
13741394
font = getFont(font, context.col, context.row, this._grid, ctx);
1375-
if (padding) {
1376-
const paddingNums = this.toBoxPixelArray(padding, context, font);
1377-
const left = rect.left + paddingNums[3];
1378-
const top = rect.top + paddingNums[0];
1379-
const width = rect.width - paddingNums[1] - paddingNums[3];
1380-
const height = rect.height - paddingNums[0] - paddingNums[2];
1381-
rect = new Rect(left, top, width, height);
1382-
}
1395+
const rect = getPaddedRect(
1396+
context.getRect(),
1397+
padding,
1398+
font,
1399+
this,
1400+
context
1401+
);
13831402
const calculator = this.createCalculator(context, font);
13841403
lineHeight = calculator.calcHeight(lineHeight);
13851404
_multiInlineRect(this._grid, ctx, lines, rect, col, row, {
@@ -1672,6 +1691,7 @@ export class GridCanvasHelper<T> implements GridCanvasHelperAPI {
16721691
check: boolean,
16731692
context: CellContext,
16741693
{
1694+
padding,
16751695
animElapsedTime,
16761696
offset = CHECKBOX_OFFSET,
16771697
uncheckBgColor,
@@ -1685,7 +1705,13 @@ export class GridCanvasHelper<T> implements GridCanvasHelperAPI {
16851705
const { col, row } = context;
16861706
drawCheckbox(
16871707
ctx,
1688-
context.getRect(),
1708+
getPaddedRect(
1709+
context.getRect(),
1710+
padding,
1711+
undefined /* font */,
1712+
this,
1713+
context
1714+
),
16891715
col,
16901716
row,
16911717
check,
@@ -1706,6 +1732,7 @@ export class GridCanvasHelper<T> implements GridCanvasHelperAPI {
17061732
check: boolean,
17071733
context: CellContext,
17081734
{
1735+
padding,
17091736
animElapsedTime,
17101737
offset = CHECKBOX_OFFSET,
17111738
checkColor,
@@ -1721,7 +1748,13 @@ export class GridCanvasHelper<T> implements GridCanvasHelperAPI {
17211748
const { col, row } = context;
17221749
drawRadioButton(
17231750
ctx,
1724-
context.getRect(),
1751+
getPaddedRect(
1752+
context.getRect(),
1753+
padding,
1754+
undefined /* font */,
1755+
this,
1756+
context
1757+
),
17251758
col,
17261759
row,
17271760
check,
@@ -1761,15 +1794,13 @@ export class GridCanvasHelper<T> implements GridCanvasHelperAPI {
17611794
this.drawWithClip(context, (ctx) => {
17621795
font = getFont(font, context.col, context.row, this._grid, ctx);
17631796
const { col, row } = context;
1764-
const paddingNums = this.toBoxPixelArray(
1797+
const { left, top, width, height } = getPaddedRect(
1798+
rect,
17651799
padding || rect.height / 8,
1766-
context,
1767-
font
1800+
font,
1801+
this,
1802+
context
17681803
);
1769-
const left = rect.left + paddingNums[3];
1770-
const top = rect.top + paddingNums[0];
1771-
const width = rect.width - paddingNums[1] - paddingNums[3];
1772-
const height = rect.height - paddingNums[0] - paddingNums[2];
17731804

17741805
bgColor = getStyleProperty(
17751806
bgColor,

‎packages/cheetah-grid/src/js/columns/style/StdBaseStyle.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,15 @@ let defaultStyle: StdBaseStyle;
55
export class StdBaseStyle extends BaseStyle {
66
private _textAlign: CanvasTextAlign;
77
private _textBaseline: CanvasTextBaseline;
8+
private _padding: number | string | (number | string)[] | undefined;
89
static get DEFAULT(): StdBaseStyle {
910
return defaultStyle ? defaultStyle : (defaultStyle = new StdBaseStyle());
1011
}
1112
constructor(style: StdBaseStyleOption = {}) {
1213
super(style);
1314
this._textAlign = style.textAlign || "left";
1415
this._textBaseline = style.textBaseline || "middle";
16+
this._padding = style.padding;
1517
}
1618
get textAlign(): CanvasTextAlign {
1719
return this._textAlign;
@@ -27,6 +29,13 @@ export class StdBaseStyle extends BaseStyle {
2729
this._textBaseline = textBaseline;
2830
this.doChangeStyle();
2931
}
32+
get padding(): number | string | (number | string)[] | undefined {
33+
return this._padding;
34+
}
35+
set padding(padding: number | string | (number | string)[] | undefined) {
36+
this._padding = padding;
37+
this.doChangeStyle();
38+
}
3039
clone(): StdBaseStyle {
3140
return new StdBaseStyle(this);
3241
}

‎packages/cheetah-grid/src/js/columns/style/Style.ts

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ let defaultStyle: Style;
44
export class Style extends StdBaseStyle {
55
private _color?: ColorDef;
66
private _font?: string;
7-
private _padding: number | string | (number | string)[] | undefined;
87
private _textOverflow: TextOverflow;
98
static get DEFAULT(): Style {
109
return defaultStyle ? defaultStyle : (defaultStyle = new Style());
@@ -13,7 +12,6 @@ export class Style extends StdBaseStyle {
1312
super(style);
1413
this._color = style.color;
1514
this._font = style.font;
16-
this._padding = style.padding;
1715
this._textOverflow = style.textOverflow || "clip";
1816
}
1917
get color(): ColorDef | undefined {
@@ -30,13 +28,6 @@ export class Style extends StdBaseStyle {
3028
this._font = font;
3129
this.doChangeStyle();
3230
}
33-
get padding(): number | string | (number | string)[] | undefined {
34-
return this._padding;
35-
}
36-
set padding(padding: number | string | (number | string)[] | undefined) {
37-
this._padding = padding;
38-
this.doChangeStyle();
39-
}
4031
get textOverflow(): TextOverflow {
4132
return this._textOverflow;
4233
}

‎packages/cheetah-grid/src/js/columns/type/BaseColumn.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -325,7 +325,7 @@ export abstract class BaseColumn<T> implements ColumnTypeAPI {
325325
indicatorBottomRight,
326326
indicatorBottomLeft,
327327
} = style;
328-
for (const [indicatorStyle, kind] of [
328+
for (const { 0: indicatorStyle, 1: kind } of [
329329
[indicatorTopLeft, DrawIndicatorKind.topLeft],
330330
[indicatorTopRight, DrawIndicatorKind.topRight],
331331
[indicatorBottomRight, DrawIndicatorKind.bottomRight],

‎packages/cheetah-grid/src/js/columns/type/CheckColumn.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export class CheckColumn<T> extends BaseColumn<T> {
2828
const {
2929
textAlign,
3030
textBaseline,
31+
padding,
3132
borderColor,
3233
checkBgColor,
3334
uncheckBgColor,
@@ -54,6 +55,7 @@ export class CheckColumn<T> extends BaseColumn<T> {
5455
borderColor,
5556
checkBgColor,
5657
uncheckBgColor,
58+
padding,
5759
};
5860
if (elapsed != null) {
5961
opt.animElapsedTime = elapsed;

‎packages/cheetah-grid/src/js/columns/type/ImageColumn.ts

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import type {
77
import { BaseColumn } from "./BaseColumn";
88
import type { DrawCellInfo } from "../../ts-types-internal";
99
import { ImageStyle } from "../style/ImageStyle";
10+
import { Rect } from "../../internal/Rect";
1011
import { calcStartPosition } from "../../internal/canvases";
1112
import { getCacheOrLoad } from "../../internal/imgs";
1213

@@ -63,7 +64,8 @@ export class ImageColumn<T> extends BaseColumn<T> {
6364
_grid: ListGridAPI<T>,
6465
{ drawCellBase }: DrawCellInfo<T>
6566
): void {
66-
const { textAlign, textBaseline, margin, bgColor, visibility } = style;
67+
const { textAlign, textBaseline, padding, margin, bgColor, visibility } =
68+
style;
6769
if (bgColor) {
6870
drawCellBase({
6971
bgColor,
@@ -76,7 +78,19 @@ export class ImageColumn<T> extends BaseColumn<T> {
7678
helper.drawWithClip(context, (ctx) => {
7779
ctx.textAlign = textAlign;
7880
ctx.textBaseline = textBaseline;
79-
const rect = context.getRect();
81+
let rect = context.getRect();
82+
if (padding) {
83+
const paddingNums = helper.toBoxPixelArray(
84+
padding,
85+
context,
86+
undefined /* font */
87+
);
88+
const left = rect.left + paddingNums[3];
89+
const top = rect.top + paddingNums[0];
90+
const width = rect.width - paddingNums[1] - paddingNums[3];
91+
const height = rect.height - paddingNums[0] - paddingNums[2];
92+
rect = new Rect(left, top, width, height);
93+
}
8094
if (style.imageSizing === "keep-aspect-ratio") {
8195
const { width, height } = calcKeepAspectRatioSize(
8296
value.width,

‎packages/cheetah-grid/src/js/columns/type/RadioColumn.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export class RadioColumn<T> extends BaseColumn<T> {
2828
const {
2929
textAlign,
3030
textBaseline,
31+
padding,
3132
checkColor,
3233
uncheckBorderColor,
3334
checkBorderColor,
@@ -58,6 +59,7 @@ export class RadioColumn<T> extends BaseColumn<T> {
5859
checkBorderColor,
5960
uncheckBgColor,
6061
checkBgColor,
62+
padding,
6163
};
6264
if (elapsed != null) {
6365
opt.animElapsedTime = elapsed;

‎packages/cheetah-grid/src/js/ts-types/column/style.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,11 @@ export interface BaseStyleOption {
3333
export interface StdBaseStyleOption extends BaseStyleOption {
3434
textAlign?: CanvasTextAlign;
3535
textBaseline?: CanvasTextBaseline;
36+
padding?: number | string | (number | string)[];
3637
}
3738
export interface StdTextBaseStyleOption extends StdBaseStyleOption {
3839
color?: ColorDef;
3940
font?: string;
40-
padding?: number | string | (number | string)[];
4141
textOverflow?: TextOverflow;
4242
}
4343
export interface StdMultilineTextBaseStyleOption

‎packages/cheetah-grid/src/js/ts-types/grid-engine.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -288,6 +288,7 @@ export interface GridCanvasHelperAPI {
288288
check: boolean,
289289
context: CellContext,
290290
option: {
291+
padding?: number | string | (number | string)[];
291292
animElapsedTime?: number;
292293
offset?: number;
293294
uncheckBgColor?: ColorPropertyDefine;
@@ -301,6 +302,7 @@ export interface GridCanvasHelperAPI {
301302
check: boolean,
302303
context: CellContext,
303304
option: {
305+
padding?: number | string | (number | string)[];
304306
animElapsedTime?: number;
305307
offset?: number;
306308
checkColor?: ColorPropertyDefine;

‎packages/cheetah-grid/src/test/ListGrid_sample_for_layout.js

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,6 @@ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deseru
120120
records.sort(function(r1, r2) { return compare(r1.personid, r2.personid); });
121121
grid.records = records;
122122
},
123-
// sort
124123
style: {padding: [0, 0, 0, '1.2em']},
125124
rowSpan: 3
126125
},
@@ -129,7 +128,29 @@ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deseru
129128
caption: 'read',
130129
width: 50,
131130
columnType: 'check',
132-
rowSpan: 3
131+
rowSpan: 3,
132+
},
133+
{
134+
field: 'checkReadOnly',
135+
caption: 'check on top',
136+
width: 50,
137+
columnType: 'check',
138+
rowSpan: 3,
139+
style: {
140+
padding: [11, 0, 0, 0],
141+
textBaseline: 'top'
142+
},
143+
},
144+
{
145+
field: 'checkReadOnly',
146+
caption: 'radio on top',
147+
width: 50,
148+
columnType: 'radio',
149+
rowSpan: 3,
150+
style: {
151+
padding: [11, 0, 0, 0],
152+
textBaseline: 'top'
153+
},
133154
},
134155
{
135156
caption: 'name',

0 commit comments

Comments
 (0)