Skip to content

Commit bb9931e

Browse files
fangsmilefangsmile
authored
Merge pull request #3624 from VisActor/3585-feat-marked-style
3585 feat marked style
2 parents 9db4c14 + e75731a commit bb9931e

9 files changed

Lines changed: 235 additions & 18 deletions

File tree

‎common/changes/@visactor/vtable/3583-feature-mark-style_2025-03-25-06-30.json‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"changes": [
3+
{
4+
"comment": "feat: cell support marked function #3583\n\n",
5+
"type": "none",
6+
"packageName": "@visactor/vtable"
7+
}
8+
],
9+
"packageName": "@visactor/vtable",
10+
"email": "892739385@qq.com"
11+
}

‎docs/assets/option/en/common/style-item-define.md‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,20 @@ type CursorPropertyDefine = string | ((args: StylePropertyFunctionArg) => string
134134
{{ target: common-marked }}
135135

136136
```
137-
type MarkedPropertyDefine = boolean | ((args: StylePropertyFunctionArg) => boolean);
137+
type MarkedPropertyDefine = boolean | MarkCellStyle | ((args: StylePropertyFunctionArg) => boolean | MarkCellStyle);
138+
139+
type MarkCellStyle = {
140+
/** 标记背景色 默认蓝色*/
141+
bgColor?: CanvasRenderingContext2D['fillStyle'];
142+
/** 标记形状 默认'sector' */
143+
shape?: 'rect' | 'triangle' | 'sector';
144+
/** 标记位置 默认'right-top' */
145+
position?: 'left-top' | 'left-bottom' | 'right-top' | 'right-bottom';
146+
/** 标记大小 默认10 */
147+
size?: number;
148+
/** 标记偏移量 默认0 */
149+
offset?: number;
150+
};
138151
139152
```
140153

‎docs/assets/option/en/common/style.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,10 +123,12 @@ Set whether the text in the cell has a sticking effect 【Text can dynamically a
123123
When the cell text has an adsorption effect [the text can dynamically adjust its position when scrolling], the basis for adsorption is the horizontal alignment of the cell. For example, when `textStickBaseOnAlign` is `true` and `textAlign` is `'center'`, the text will be adsorbed to the horizontal center of the cell; otherwise, it will be adsorbed to the left or right edge of the cell (depending on the scroll position)
124124

125125
#${prefix} marked(MarkedPropertyDefine)
126+
126127
Set whether the cell has a marked style
127128
{{ use: common-marked(
128129
prefix = ${prefix}
129130
) }}
131+
130132
#${prefix} autoWrapText(boolean)
131133
Set whether the cell's text should automatically wrap
132134

‎docs/assets/option/zh/common/style-item-define.md‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -134,8 +134,20 @@ type CursorPropertyDefine = string | ((args: StylePropertyFunctionArg) => string
134134
{{ target: common-marked }}
135135

136136
```
137-
type MarkedPropertyDefine = boolean | ((args: StylePropertyFunctionArg) => boolean);
138-
137+
type MarkedPropertyDefine = boolean | MarkCellStyle | ((args: StylePropertyFunctionArg) => boolean | MarkCellStyle);
138+
139+
type MarkCellStyle = {
140+
/** 标记背景色 默认蓝色*/
141+
bgColor?: CanvasRenderingContext2D['fillStyle'];
142+
/** 标记形状 默认'sector' */
143+
shape?: 'rect' | 'triangle' | 'sector';
144+
/** 标记位置 默认'right-top' */
145+
position?: 'left-top' | 'left-bottom' | 'right-top' | 'right-bottom';
146+
/** 标记大小 默认10 */
147+
size?: number;
148+
/** 标记偏移量 默认0 */
149+
offset?: number;
150+
};
139151
```
140152

141153
{{ target: common-colorsDef }}

‎docs/assets/option/zh/common/style.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,10 +124,12 @@
124124
当单元格的文本有吸附效果【当滚动时文本可动态调整位置】时，吸附的基准是单元格的水平对齐方式。例如当`textStickBaseOnAlign`为`true`时，`textAlign`为`'center'`时，文本会吸附在单元格的水平中心位置；否则就会吸附在单元格左边缘或右边缘（依据滚动位置决定）。
125125

126126
#${prefix} marked(MarkedPropertyDefine)
127+
127128
设置单元格是否有标记样式
128129
{{ use: common-marked(
129130
prefix = ${prefix}
130131
) }}
132+
131133
#${prefix} autoWrapText(boolean)
132134
设置单元格是否自动换行
133135

‎packages/vtable/examples/list/list.ts‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,35 @@ export function createTable() {
6262
title: 'email',
6363
width: 200,
6464
sort: true,
65+
headerStyle: {
66+
marked: {
67+
bgColor: 'red',
68+
shape: 'rect',
69+
position: 'right-top',
70+
size: 10,
71+
offset: 6
72+
}
73+
},
6574
style: {
75+
marked: args => {
76+
const value = args.value;
77+
if (value === '4@xxx.com') {
78+
return {
79+
bgColor: 'red',
80+
shape: 'rect',
81+
position: 'right-top',
82+
size: 10,
83+
offset: 6
84+
};
85+
}
86+
return {
87+
bgColor: 'red',
88+
shape: 'triangle',
89+
position: 'right-top',
90+
size: 10,
91+
offset: 6
92+
};
93+
},
6694
underline: true,
6795
underlineDash: [2, 0],
6896
underlineOffset: 3
@@ -191,6 +219,10 @@ export function createTable() {
191219
container: document.getElementById(CONTAINER_ID),
192220
emptyTip: true,
193221
records,
222+
rowSeriesNumber: {
223+
dragOrder: true
224+
},
225+
194226
columns: [
195227
...columns
196228
// ...columns,

‎packages/vtable/src/scenegraph/graphic/mark.ts‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
import { createRect, createArc, createPolygon } from '@src/vrender';
2+
3+
import type { Group, IFillType } from '@src/vrender';
4+
5+
import type { MarkCellStyle, MarkedPropertyDefine } from '../../ts-types';
6+
import type { BaseTableAPI } from '../../ts-types/base-table';
7+
8+
export function createMark(marked: MarkedPropertyDefine, cellGroup: Group, table: BaseTableAPI) {
9+
if (typeof marked === 'boolean') {
10+
// 默认是右上角显示个扇形
11+
const mark = createArc({
12+
x: cellGroup.attribute.width,
13+
y: 0,
14+
startAngle: Math.PI / 2,
15+
endAngle: Math.PI,
16+
outerRadius: 6,
17+
fill: '#3073F2',
18+
pickable: false
19+
});
20+
mark.name = 'mark';
21+
22+
cellGroup.appendChild(mark);
23+
} else {
24+
const {
25+
bgColor = '#3073F2',
26+
shape = 'sector',
27+
position = 'right-top',
28+
size = 10,
29+
offset = 0
30+
} = marked as MarkCellStyle;
31+
let x;
32+
let y;
33+
let startAngle;
34+
let endAngle;
35+
let fill;
36+
let mark;
37+
38+
if (shape === 'sector') {
39+
if (position === 'right-top') {
40+
x = cellGroup.attribute.width - offset;
41+
y = offset;
42+
startAngle = Math.PI / 2;
43+
endAngle = Math.PI;
44+
} else if (position === 'left-top') {
45+
x = offset;
46+
y = offset;
47+
startAngle = 0;
48+
endAngle = Math.PI / 2;
49+
} else if (position === 'right-bottom') {
50+
x = cellGroup.attribute.width - offset;
51+
y = cellGroup.attribute.height - offset;
52+
startAngle = Math.PI;
53+
endAngle = (Math.PI / 2) * 3;
54+
} else if (position === 'left-bottom') {
55+
x = offset;
56+
y = cellGroup.attribute.height - offset;
57+
startAngle = (Math.PI / 2) * 3;
58+
endAngle = Math.PI * 2;
59+
}
60+
61+
fill = bgColor;
62+
mark = createArc({
63+
x,
64+
y,
65+
startAngle,
66+
endAngle,
67+
outerRadius: size,
68+
fill: fill as IFillType,
69+
pickable: false
70+
});
71+
} else if (shape === 'triangle') {
72+
let x2;
73+
let y2;
74+
let x3;
75+
let y3;
76+
if (position === 'right-top') {
77+
x = cellGroup.attribute.width - offset;
78+
y = offset;
79+
x2 = x - size;
80+
y2 = y;
81+
x3 = x;
82+
y3 = y + size;
83+
} else if (position === 'left-top') {
84+
x = offset;
85+
y = offset;
86+
x2 = x + size;
87+
y2 = y;
88+
x3 = x;
89+
y3 = y + size;
90+
} else if (position === 'right-bottom') {
91+
x = cellGroup.attribute.width - offset;
92+
y = cellGroup.attribute.height - offset;
93+
x2 = x - size;
94+
y2 = y;
95+
x3 = x;
96+
y3 = y - size;
97+
} else if (position === 'left-bottom') {
98+
x = offset;
99+
y = cellGroup.attribute.height - offset;
100+
x2 = x + size;
101+
y2 = y;
102+
x3 = x;
103+
y3 = y - size;
104+
}
105+
fill = bgColor;
106+
mark = createPolygon({
107+
points: [
108+
{ x: x, y: y },
109+
{ x: x2, y: y2 },
110+
{ x: x3, y: y3 }
111+
],
112+
fill: fill as IFillType,
113+
pickable: false
114+
});
115+
} else if (shape === 'rect') {
116+
if (position === 'right-top') {
117+
x = cellGroup.attribute.width - size - offset;
118+
y = offset;
119+
} else if (position === 'left-top') {
120+
x = offset;
121+
y = offset;
122+
} else if (position === 'right-bottom') {
123+
x = cellGroup.attribute.width - size - offset;
124+
y = cellGroup.attribute.height - size - offset;
125+
} else if (position === 'left-bottom') {
126+
x = offset;
127+
y = cellGroup.attribute.height - size - offset;
128+
}
129+
fill = bgColor;
130+
mark = createRect({
131+
x,
132+
y,
133+
width: size,
134+
height: size,
135+
fill: fill as IFillType,
136+
pickable: false
137+
});
138+
}
139+
mark.name = 'mark';
140+
cellGroup.appendChild(mark);
141+
}
142+
}

‎packages/vtable/src/scenegraph/group-creater/cell-type/text-cell.ts‎

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
/* eslint-disable no-undef */
22
import type { IThemeSpec, Group as VGroup } from '@src/vrender';
3-
import { createArc } from '@src/vrender';
43
import { isValid } from '@visactor/vutils';
54
import { Group } from '../../graphic/group';
65
// import { parseFont } from '../../utils/font';
76
import { getFunctionalProp } from '../../utils/get-prop';
87
import { createCellContent } from '../../utils/text-icon-layout';
98
import type { BaseTableAPI } from '../../../ts-types/base-table';
10-
import { getStyleTheme } from '../../../core/tableHelper';
119
import type { CellRange } from '../../../ts-types';
1210
import { getCellBorderStrokeWidth } from '../../utils/cell-border-stroke-width';
11+
import { createMark } from '../../graphic/mark';
1312

1413
/**
1514
* @description: 创建单元格场景节点
@@ -155,18 +154,7 @@ export function createCellGroup(
155154
);
156155

157156
if ((cellTheme as any)?._vtable?.marked) {
158-
const mark = createArc({
159-
x: cellGroup.attribute.width,
160-
y: 0,
161-
startAngle: Math.PI / 2,
162-
endAngle: Math.PI,
163-
outerRadius: 6,
164-
fill: '#3073F2',
165-
pickable: false
166-
});
167-
mark.name = 'mark';
168-
169-
cellGroup.appendChild(mark);
157+
createMark((cellTheme as any)?._vtable?.marked, cellGroup, table);
170158
}
171159
}
172160
if (customElementsGroup) {

‎packages/vtable/src/ts-types/style-define.ts‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,22 @@ export type PaddingsPropertyDefine =
7474
| (number | null)[]
7575
| ((args: StylePropertyFunctionArg) => (number | null)[]);
7676

77-
export type MarkedPropertyDefine = boolean | ((args: StylePropertyFunctionArg) => boolean);
77+
export type MarkCellStyle = {
78+
/** 标记背景色 默认蓝色*/
79+
bgColor?: CanvasRenderingContext2D['fillStyle'];
80+
/** 标记形状 默认'sector' */
81+
shape?: 'rect' | 'triangle' | 'sector';
82+
/** 标记位置 默认'right-top' */
83+
position?: 'left-top' | 'left-bottom' | 'right-top' | 'right-bottom';
84+
/** 标记大小 默认10 */
85+
size?: number;
86+
/** 标记偏移量 默认0 */
87+
offset?: number;
88+
};
89+
export type MarkedPropertyDefine =
90+
| boolean
91+
| MarkCellStyle
92+
| ((args: StylePropertyFunctionArg) => boolean | MarkCellStyle);
7893

7994
export type CellStyle = {
8095
textAlign: CanvasTextAlign;

0 commit comments

Comments
 (0)