Skip to content

[Bug] 更新表格后, 无法恢复之前的高亮效果 #3788

@skie1997

Description

@skie1997

Version

1.17.1-alpha.8

Link to Minimal Reproduction

vscreen

Steps to Reproduce

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);
}

Current Behavior

Image

Expected Behavior

update后,保持高亮亮效果

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

Metadata

Metadata

Assignees

Labels

bpbpbugSomething isn't working

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions