import * as VTable from '../../src';
import { bindDebugTool } from '../../src/scenegraph/debug-tool';
import { createSymbol } from '@src/vrender';
import { CarouselAnimationPlugin, InvertHighlightPlugin } from '@visactor/vtable-plugins';
const CONTAINER_ID = 'vTable';
export function createTable() {
const lineNumberIconSize = 45;
const lineNumberIconColor = 'red';
const LINE_NUMBER_COL_NAME = '0#LINE_NUMBER_DIM_ID_STR';
const LINE_NUMBER_WIDTH_PERCENT = 10;
const lineNumberFontSize = 76;
const lineNumberColor = 'yellow';
const lineNumberIcon = 'flag';
const iconOffset = {
flag: -0.1,
star: 0,
circle: -0.08,
square: -0.12
};
const option: VTable.ListTableConstructorOptions = {
// container: document.getElementById(CONTAINER_ID),
columns: [
{
field: '0#LINE_NUMBER_DIM_ID_STR',
title: '序号',
width: '12%',
style: {
fontFamily: 'D-DIN',
fontWeight: 'normal',
fontSize: 12,
color: '#000'
}
},
{
field: 'PZwFghHcsvwt',
title: 'From Province',
showSort: false,
style: {
textAlign: 'center',
borderColor: ['rgba(63,63,86,0)', null, null, null],
borderLineWidth: [1, 0, 0, 0],
borderLineDash: [null, null, null, null],
padding: [0, 0, 0, 0],
hover: {
cellBgColor: 'rgba(186, 215, 255, 0.7)',
inlineRowBgColor: 'rgba(186, 215, 255, 0.3)',
inlineColumnBgColor: 'rgba(186, 215, 255, 0.3)'
},
fontFamily: 'D-DIN',
fontSize: 12,
fontStyle: 'normal',
fontWeight: 'normal',
fontVariant: 'normal',
color: 'rgba(255,255,255,1)',
lineHeight: 18,
underline: false
},
headerStyle: {
textAlign: 'center',
borderColor: [null, null, null, null],
borderLineWidth: [null, 0, 0, 0],
borderLineDash: [null, null, null, null],
padding: [0, 0, 0, 0],
hover: {
cellBgColor: 'rgba(0, 100, 250, 0.16)',
inlineRowBgColor: 'rgba(255, 255, 255, 0)',
inlineColumnBgColor: 'rgba(255, 255, 255, 0)'
},
frameStyle: {
borderColor: [null, null, null, null],
borderLineWidth: 2
},
fontFamily: 'SourceHanSansCN-Normal',
fontSize: 12,
fontVariant: 'normal',
fontStyle: 'normal',
fontWeight: 'bold',
color: '#FFFFFF',
bgColor: '#0e305c',
lineHeight: 18,
underline: false
},
width: '29.333333333333332%'
},
{
field: 'CKQPX3dQXKYk',
title: 'To Province',
showSort: false,
style: {
textAlign: 'center',
borderColor: ['rgba(63,63,86,0)', null, null, null],
borderLineWidth: [1, 0, 0, 0],
borderLineDash: [null, null, null, null],
padding: [0, 0, 0, 0],
hover: {
cellBgColor: 'rgba(186, 215, 255, 0.7)',
inlineRowBgColor: 'rgba(186, 215, 255, 0.3)',
inlineColumnBgColor: 'rgba(186, 215, 255, 0.3)'
},
fontFamily: 'D-DIN',
fontSize: 12,
fontStyle: 'normal',
fontWeight: 'normal',
fontVariant: 'normal',
color: 'rgba(255,255,255,1)',
lineHeight: 18,
underline: false
},
headerStyle: {
textAlign: 'center',
borderColor: [null, null, null, null],
borderLineWidth: [null, 0, 0, 0],
borderLineDash: [null, null, null, null],
padding: [0, 0, 0, 0],
hover: {
cellBgColor: 'rgba(0, 100, 250, 0.16)',
inlineRowBgColor: 'rgba(255, 255, 255, 0)',
inlineColumnBgColor: 'rgba(255, 255, 255, 0)'
},
frameStyle: {
borderColor: [null, null, null, null],
borderLineWidth: 2
},
fontFamily: 'SourceHanSansCN-Normal',
fontSize: 12,
fontVariant: 'normal',
fontStyle: 'normal',
fontWeight: 'bold',
color: '#FFFFFF',
bgColor: '#0e305c',
lineHeight: 18,
underline: false
},
width: '29.333333333333332%'
},
{
firstRow: 30,
field: 'RMLcpglcOTHo',
title: 'Profit',
showSort: false,
style: {
textAlign: 'center',
borderColor: ['rgba(63,63,86,0)', null, null, null],
borderLineWidth: [1, 0, 0, 0],
borderLineDash: [null, null, null, null],
padding: [0, 0, 0, 0],
hover: {
cellBgColor: 'rgba(186, 215, 255, 0.7)',
inlineRowBgColor: 'rgba(186, 215, 255, 0.3)',
inlineColumnBgColor: 'rgba(186, 215, 255, 0.3)'
},
fontFamily: 'D-DIN',
fontSize: 12,
fontStyle: 'normal',
fontWeight: 'normal',
fontVariant: 'normal',
color: 'rgba(255,255,255,1)',
lineHeight: 18,
underline: false
},
headerStyle: {
textAlign: 'center',
borderColor: [null, null, null, null],
borderLineWidth: [null, 0, 0, 0],
borderLineDash: [null, null, null, null],
padding: [0, 0, 0, 0],
hover: {
cellBgColor: 'rgba(0, 100, 250, 0.16)',
inlineRowBgColor: 'rgba(255, 255, 255, 0)',
inlineColumnBgColor: 'rgba(255, 255, 255, 0)'
},
frameStyle: {
borderColor: [null, null, null, null],
borderLineWidth: 2
},
fontFamily: 'SourceHanSansCN-Normal',
fontSize: 12,
fontVariant: 'normal',
fontStyle: 'normal',
fontWeight: 'bold',
color: '#FFFFFF',
bgColor: '#0e305c',
lineHeight: 18,
underline: false
},
width: '29.333333333333332%'
}
],
records: [
{
PZwFghHcsvwt: '2023',
CKQPX3dQXKYk: '河北这个一条测试数据啦啦啦阿拉123333',
RMLcpglcOTHo: 30,
'0#LINE_NUMBER_DIM_ID_STR': 1,
'0#LINE_NUMBER_ICON':
'<svg width="1em" height="1em" viewBox="0 0 1024 1024" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M512 954.181818a442.181818 442.181818 0 1 0 0-884.363636 442.181818 442.181818 0 0 0 0 884.363636z"/></svg>'
},
{
PZwFghHcsvwt: '2023',
CKQPX3dQXKYk: '河北1',
RMLcpglcOTHo: 20,
'0#LINE_NUMBER_DIM_ID_STR': 2,
'0#LINE_NUMBER_ICON':
'<svg width="1em" height="1em" viewBox="0 0 1024 1024" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M512 954.181818a442.181818 442.181818 0 1 0 0-884.363636 442.181818 442.181818 0 0 0 0 884.363636z"/></svg>'
},
{
PZwFghHcsvwt: '2023',
CKQPX3dQXKYk: '河北2',
RMLcpglcOTHo: 40,
'0#LINE_NUMBER_DIM_ID_STR': 3,
'0#LINE_NUMBER_ICON':
'<svg width="1em" height="1em" viewBox="0 0 1024 1024" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M512 954.181818a442.181818 442.181818 0 1 0 0-884.363636 442.181818 442.181818 0 0 0 0 884.363636z"/></svg>'
},
{
PZwFghHcsvwt: '2023',
CKQPX3dQXKYk: '辽宁',
RMLcpglcOTHo: 10,
'0#LINE_NUMBER_DIM_ID_STR': 4,
'0#LINE_NUMBER_ICON':
'<svg width="1em" height="1em" viewBox="0 0 1024 1024" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M512 954.181818a442.181818 442.181818 0 1 0 0-884.363636 442.181818 442.181818 0 0 0 0 884.363636z"/></svg>'
},
{
PZwFghHcsvwt: '2023',
CKQPX3dQXKYk: '吉林',
RMLcpglcOTHo: 50,
'0#LINE_NUMBER_DIM_ID_STR': 5,
'0#LINE_NUMBER_ICON':
'<svg width="1em" height="1em" viewBox="0 0 1024 1024" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M512 954.181818a442.181818 442.181818 0 1 0 0-884.363636 442.181818 442.181818 0 0 0 0 884.363636z"/></svg>'
},
{
PZwFghHcsvwt: '2022',
CKQPX3dQXKYk: '江西',
RMLcpglcOTHo: 24,
'0#LINE_NUMBER_DIM_ID_STR': 6,
'0#LINE_NUMBER_ICON':
'<svg width="1em" height="1em" viewBox="0 0 1024 1024" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M512 954.181818a442.181818 442.181818 0 1 0 0-884.363636 442.181818 442.181818 0 0 0 0 884.363636z"/></svg>'
},
{
PZwFghHcsvwt: '2022',
CKQPX3dQXKYk: '山东',
RMLcpglcOTHo: 10,
'0#LINE_NUMBER_DIM_ID_STR': 7,
'0#LINE_NUMBER_ICON':
'<svg width="1em" height="1em" viewBox="0 0 1024 1024" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M512 954.181818a442.181818 442.181818 0 1 0 0-884.363636 442.181818 442.181818 0 0 0 0 884.363636z"/></svg>'
},
{
PZwFghHcsvwt: '2022',
CKQPX3dQXKYk: '河南',
RMLcpglcOTHo: 20,
'0#LINE_NUMBER_DIM_ID_STR': 8,
'0#LINE_NUMBER_ICON':
'<svg width="1em" height="1em" viewBox="0 0 1024 1024" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M512 954.181818a442.181818 442.181818 0 1 0 0-884.363636 442.181818 442.181818 0 0 0 0 884.363636z"/></svg>'
},
{
PZwFghHcsvwt: '2022',
CKQPX3dQXKYk: '湖北',
RMLcpglcOTHo: 10,
'0#LINE_NUMBER_DIM_ID_STR': 9,
'0#LINE_NUMBER_ICON':
'<svg width="1em" height="1em" viewBox="0 0 1024 1024" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M512 954.181818a442.181818 442.181818 0 1 0 0-884.363636 442.181818 442.181818 0 0 0 0 884.363636z"/></svg>'
},
{
PZwFghHcsvwt: '2022',
CKQPX3dQXKYk: '湖南',
RMLcpglcOTHo: 30,
'0#LINE_NUMBER_DIM_ID_STR': 10,
'0#LINE_NUMBER_ICON':
'<svg width="1em" height="1em" viewBox="0 0 1024 1024" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M512 954.181818a442.181818 442.181818 0 1 0 0-884.363636 442.181818 442.181818 0 0 0 0 884.363636z"/></svg>'
}
],
theme: {
underlayBackgroundColor: 'rgba(255,255,255,0)',
scrollStyle: {
visible: false
},
selectionStyle: {
cellBorderColor: '#3073F2',
cellBorderLineWidth: 0,
cellBgColor: 'rgba(0, 0, 0, 0.1)',
inlineRowBgColor: 'rgba(0,0,0,0.1)',
inlineColumnBgColor: 'rgba(0,0,0,0.1)'
},
frameStyle: {
borderLineWidth: 0
},
headerStyle: {
borderColor: [null, null, null, null],
borderLineWidth: [null, 0, 0, 0],
borderLineDash: [null, null, null, null],
padding: [0, 0, 0, 0],
hover: {
cellBgColor: 'rgba(0, 100, 250, 0.16)',
inlineRowBgColor: 'rgba(255, 255, 255, 0)',
inlineColumnBgColor: 'rgba(255, 255, 255, 0)'
},
frameStyle: {
borderColor: [null, null, null, null],
borderLineWidth: 0
},
fontFamily: 'SourceHanSansCN-Normal',
fontSize: 12,
fontVariant: 'normal',
fontStyle: 'normal',
fontWeight: 'bold',
textAlign: 'center',
color: '#FFFFFF',
bgColor: '#0e305c',
lineHeight: 18,
underline: false,
select: {
inlineRowBgColor: 'rgba(0,0,0,0)',
inlineColumnBgColor: 'rgba(0,0,0,0)'
}
},
rowHeaderStyle: {
borderColor: [null, null, null, null],
borderLineWidth: [null, 0, 0, 0],
borderLineDash: [null, null, null, null],
padding: [0, 0, 0, 0],
hover: {
cellBgColor: 'rgba(0, 100, 250, 0.16)',
inlineRowBgColor: 'rgba(255, 255, 255, 0)',
inlineColumnBgColor: 'rgba(255, 255, 255, 0)'
},
frameStyle: {
borderColor: [null, null, null, null],
borderLineWidth: 2
},
fontFamily: 'SourceHanSansCN-Normal',
fontSize: 12,
fontVariant: 'normal',
fontStyle: 'normal',
fontWeight: 'bold',
textAlign: 'center',
color: '#FFFFFF',
bgColor: '#0e305c',
lineHeight: 18,
underline: false
},
bodyStyle: {
borderColor: ['rgba(63,63,86,0)', null, null, null],
borderLineWidth: [1, 0, 0, 0],
borderLineDash: [null, null, null, null],
padding: [0, 0, 0, 0],
hover: {
cellBgColor: 'rgba(186, 215, 255, 0.7)',
inlineRowBgColor: 'rgba(186, 215, 255, 0.3)',
inlineColumnBgColor: 'rgba(186, 215, 255, 0.3)'
},
fontFamily: 'D-DIN',
fontSize: 12,
fontStyle: 'normal',
fontWeight: 'normal',
textAlign: 'center',
fontVariant: 'normal',
color: 'rgba(255,255,255,1)',
lineHeight: 18,
underline: false
},
frozenColumnLine: {
shadow: {
width: 0,
startColor: 'rgba(255,255,255,0)',
endColor: 'rgba(255,255,255,0)'
}
}
},
transpose: false,
widthMode: 'adaptive',
columnResizeMode: 'all',
heightMode: 'standrad',
heightAdaptiveMode: 'all',
autoFillHeight: true,
autoWrapText: true,
maxCharactersNumber: 256,
defaultHeaderColWidth: 'auto',
keyboardOptions: {
selectAllOnCtrlA: true,
copySelected: false
},
menu: {
renderMode: 'html'
},
customConfig: {
imageMargin: 4,
multilinesForXTable: true,
shrinkSparklineFirst: true,
limitContentHeight: false,
_disableColumnAndRowSizeRound: false
},
frozenColCount: 0,
showHeader: true,
hover: {
disableHover: true
},
select: {
highlightMode: 'row',
headerSelectMode: 'cell',
blankAreaClickDeselect: true,
disableSelect: true
},
autoHeightInAdaptiveMode: false,
defaultRowHeight: 200,
animationAppear: {
duration: 60,
delay: 0,
type: 'one-by-one',
direction: 'row'
},
hash: 'f336fe751ee58d6eb243e381a2f676e2',
width: 400,
height: 225
};
option.columns.forEach(col => {
if (!col.style?.borderColor) {
} else {
col.style.borderColor[1] = 'blue';
col.style.borderLineWidth[1] = 2;
col.style.bgColor = 'black';
}
});
console.log('option', option);
// animation
// const pageSize = 2;
// const containerSize = { width: 400, height: 225 };
// const wholeData = option.records;
// option.heightMode = 'standrad';
// option.defaultRowHeight = containerSize.height / (pageSize + 1); // header占一行位置
// option.pagination = undefined;
// option.records = wholeData;
// const totalDuration = 300;
// option.animationAppear = {
// duration: totalDuration / pageSize,
// delay: 0,
// type: 'one-by-one',
// direction: 'row'
// };
const tableInstance = new VTable.ListTable({
container: document.getElementById(CONTAINER_ID)
});
window.tableInstance = tableInstance;
tableInstance.updateOption(option);
const highlightPlugin = new InvertHighlightPlugin(tableInstance, {
opacity: 0.3
});
const { CLICK_CELL, RESIZE_COLUMN_END } = VTable.ListTable.EVENT_TYPE;
let curRow = 0;
tableInstance.on(CLICK_CELL, ev => {
const { row } = ev;
console.log('row', row);
highlightPlugin.setInvertHighlightRange({
start: {
col: 0,
row
},
end: {
col: tableInstance.colCount - 1,
row
}
});
curRow = row;
});
bindDebugTool(tableInstance.scenegraph.stage, {
customGrapicKeys: ['col', 'row']
});
const animationPlugin = new CarouselAnimationPlugin(tableInstance, {
rowCount: 1,
replaceScrollAction: false,
animationDelay: 1000
});
animationPlugin.reset();
animationPlugin.play();
setTimeout(() => {
animationPlugin.pause();
tableInstance.updateOption(option);
console.log('update');
if (curRow) {
highlightPlugin.setInvertHighlightRange({
start: {
col: 0,
row: curRow
},
end: {
col: tableInstance.colCount - 1,
row: curRow
}
});
}
// animationPugin.row = tableInstance.frozenRowCount;
animationPlugin.play();
}, 3000);
}
Version
1.17.1-alpha.8
Link to Minimal Reproduction
vscreen
Steps to Reproduce
Current Behavior
Expected Behavior
update后,保持高亮亮效果
Environment
Any additional comments?
No response