fix(vtable): reset reused icon opacity by visible time

packages/vtable/examples/debug/issue-4798-sort-icon-visible-time.ts

@@ -0,0 +1,110 @@
+import * as VTable from '../../src';
+
+const CONTAINER_ID = 'vTable';
+
+const sortIconBase = {
+  type: 'text' as const,
+  width: 16,
+  height: 16,
+  funcType: VTable.TYPES.IconFuncTypeEnum.sort,
+  positionType: VTable.TYPES.IconPosition.absoluteRight,
+  marginRight: 8,
+  cursor: 'pointer'
+};
+
+function registerSortIcons() {
+  VTable.register.icon('sort_normal', {
+    ...sortIconBase,
+    name: 'sort_normal',
+    content: '-',
+    visibleTime: 'mouseenter_cell',
+    style: {
+      fill: '#999',
+      fontWeight: 'bold'
+    }
+  });
+  VTable.register.icon('sort_upward', {
+    ...sortIconBase,
+    name: 'sort_upward',
+    content: '^',
+    visibleTime: 'always',
+    style: {
+      fill: '#1677ff',
+      fontWeight: 'bold'
+    }
+  });
+  VTable.register.icon('sort_downward', {
+    ...sortIconBase,
+    name: 'sort_downward',
+    content: 'v',
+    visibleTime: 'always',
+    style: {
+      fill: '#f5222d',
+      fontWeight: 'bold'
+    }
+  });
+}
+
+function getSortIconState(tableInstance: VTable.ListTable, col: number) {
+  let state: any = null;
+  tableInstance.scenegraph.getCell(col, 0).forEachChildren((mark: any) => {
+    if (mark.attribute?.funcType === VTable.TYPES.IconFuncTypeEnum.sort) {
+      state = {
+        name: mark.name,
+        text: mark.attribute.text,
+        fill: mark.attribute.fill,
+        visibleTime: mark.attribute.visibleTime,
+        opacity: mark.attribute.opacity
+      };
+    }
+  });
+  return state;
+}
+
+export function createTable() {
+  registerSortIcons();
+
+  const container = document.getElementById(CONTAINER_ID)!;
+  container.style.width = '600px';
+  container.style.height = '360px';
+
+  const tableInstance = new VTable.ListTable({
+    container,
+    records: [
+      { id: 1, name: 'Alice', score: 91 },
+      { id: 2, name: 'Bob', score: 85 },
+      { id: 3, name: 'Carol', score: 96 }
+    ],
+    columns: [
+      { field: 'id', title: 'ID', width: 120, sort: true },
+      { field: 'name', title: 'Name', width: 200, sort: true },
+      { field: 'score', title: 'Score', width: 120 }
+    ]
+  });
+
+  window.tableInstance = tableInstance;
+  (window as any).issue4798GetSortIconState = (col = 0) => getSortIconState(tableInstance, col);
+  (window as any).issue4798Run = () => {
+    tableInstance.updateSortState({ field: 'id', order: 'asc' });
+    const firstAsc = getSortIconState(tableInstance, 0);
+    tableInstance.updateSortState({ field: 'name', order: 'asc' });
+    const firstNormalAfterSecondSort = getSortIconState(tableInstance, 0);
+    const secondAsc = getSortIconState(tableInstance, 1);
+    return {
+      firstAsc,
+      firstNormalAfterSecondSort,
+      secondAsc,
+      fixed:
+        firstNormalAfterSecondSort?.name === 'sort_normal' &&
+        firstNormalAfterSecondSort?.text === '-' &&
+        firstNormalAfterSecondSort?.fill === '#999' &&
+        firstNormalAfterSecondSort?.visibleTime === 'mouseenter_cell' &&
+        firstNormalAfterSecondSort?.opacity === 0 &&
+        secondAsc?.name === 'sort_upward' &&
+        secondAsc?.text === '^' &&
+        secondAsc?.fill === '#1677ff' &&
+        secondAsc?.visibleTime === 'always' &&
+        secondAsc?.opacity === 1
+    };
+  };
+}

packages/vtable/examples/menu.ts

@@ -74,6 +74,10 @@ export const menus = [
         path: 'debug',
         name: 'issue-4816-functional-icons-theme'
       },
+      {
+        path: 'debug',
+        name: 'issue-4798-sort-icon-visible-time'
+      },
       {
         path: 'debug',
         name: 'header-frame-border-null-color'

packages/vtable/src/scenegraph/utils/text-icon-layout.ts

@@ -583,9 +583,21 @@ export function dealWithIcon(
     iconAttribute.shape = icon.shape;
   }
 
+  if (icon.type === 'text') {
+    iconAttribute.text = icon.content;
+    merge(iconAttribute, icon.style);
+  }
+
+  if (isNil(iconAttribute.opacity)) {
+    iconAttribute.opacity =
+      iconAttribute.visibleTime === 'mouseenter_cell' || iconAttribute.visibleTime === 'click_cell' ? 0 : 1;
+  }
+
   if (mark) {
     mark.setAttributes(iconAttribute);
-    mark.loadImage(iconAttribute.image);
+    if (iconAttribute.image) {
+      mark.loadImage(iconAttribute.image);
+    }
     mark.tooltip = icon.tooltip;
     mark.name = icon.name;
     return mark;
@@ -594,8 +606,6 @@ export function dealWithIcon(
 
   let iconMark: Icon | TextIcon;
   if (icon.type === 'text') {
-    iconAttribute.text = icon.content;
-    merge(iconAttribute, icon.style);
     iconMark = new TextIcon(iconAttribute);
     iconMark.tooltip = icon.tooltip;
     iconMark.name = icon.name;