Merge pull request #2361 from VisActor/fix/richtext-icon-state

fix: fix richtext icon update

common/changes/@visactor/vtable/fix-richtext-icon-state_2024-09-30-09-13.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vtable",
+      "comment": "fix: fix richtext icon update #2281",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vtable"
+}

packages/vtable/examples/list/list.ts

@@ -15,6 +15,24 @@ const generatePersons = count => {
   }));
 };
 
+VTable.register.icon('sort_normal', {
+  type: 'svg',
+  svg: `<svg t="1669210412838" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5700" width="200" height="200"><path d="M420.559974 72.98601l-54.855 0 0 774.336c-52.455014-69.163008-121.619046-123.762995-201.120051-157.052006l0 61.968c85.838029 41.401958 156.537958 111.337984 201.120051 198.221005l0 0.208 54.855 0 0-13.047c0.005018-0.00297 0.010035-0.005018 0.01495-0.007987-0.005018-0.010035-0.010035-0.019968-0.01495-0.030003L420.559974 72.986zM658.264986 73.385984l0-0.4L603.41 72.985984l0 877.68 54.855 0L658.265 176.524c52.457984 69.178982 121.632051 123.790029 201.149952 157.078016l0-61.961C773.560013 230.238003 702.853018 160.287027 658.264986 73.385984z" p-id="5701"></path></svg>`,
+  width: 20, //其实指定的是svg图片绘制多大，实际占位是box，margin也是相对阴影范围指定的
+  height: 20,
+  funcType: VTable.TYPES.IconFuncTypeEnum.sort,
+  name: 'sort_normal',
+  positionType: VTable.TYPES.IconPosition.inlineFront,
+  marginLeft: 0,
+  marginRight: 0,
+  hover: {
+    width: 24,
+    height: 24,
+    bgColor: 'rgba(22,44,66,0.5)'
+  },
+  cursor: 'pointer'
+});
+
 export function createTable() {
   const records = generatePersons(2000);
   const columns: VTable.ColumnsDefine = [
@@ -170,16 +188,16 @@ export function createTable() {
     emptyTip: true,
     records,
     columns: [
-      ...columns,
-      ...columns,
-      ...columns,
-      ...columns,
-      ...columns,
-      ...columns,
-      ...columns,
-      ...columns,
-      ...columns,
       ...columns
+      // ...columns,
+      // ...columns,
+      // ...columns,
+      // ...columns,
+      // ...columns,
+      // ...columns,
+      // ...columns,
+      // ...columns,
+      // ...columns
     ],
     tooltip: {
       isShowOverflowTextTooltip: true

packages/vtable/package.json

@@ -52,9 +52,9 @@
   },
   "dependencies": {
     "@visactor/vtable-editors": "workspace:*",
-    "@visactor/vrender-core": "0.20.2-alpha.1",
-    "@visactor/vrender-kits": "0.20.2-alpha.1",
-    "@visactor/vrender-components": "0.20.2-alpha.1",
+    "@visactor/vrender-core": "0.20.8-alpha.3",
+    "@visactor/vrender-kits": "0.20.8-alpha.3",
+    "@visactor/vrender-components": "0.20.8-alpha.3",
     "@visactor/vutils": "~0.18.14",
     "@visactor/vscale": "~0.18.1",
     "@visactor/vdataset": "~0.18.1",
@@ -126,4 +126,4 @@
     "url": "https://github.com/VisActor/VTable.git",
     "directory": "packages/vtable"
   }
-}
+}

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

@@ -15,6 +15,7 @@ import { isNil, isNumber, isValid, isValidNumber } from '@visactor/vutils';
 import { isMergeCellGroup } from './is-merge-cell-group';
 import { breakString } from './break-string';
 import { CUSTOM_CONTAINER_NAME } from '../component/custom';
+import { getTargetCell } from '../../event/util';
 
 /**
  * @description: 创建单元格内容
@@ -284,6 +285,10 @@ export function createCellContent(
       text.name = 'text';
       textMark = text;
       text.bindIconEvent();
+
+      if (range && (range.start.col !== range.end.col || range.start.row !== range.end.row)) {
+        text.onBeforeAttributeUpdate = onBeforeAttributeUpdate as any;
+      }
     }
 
     if (contentLeftIcons.length !== 0 || contentRightIcons.length !== 0) {
@@ -887,3 +892,54 @@ export function dealWithIconLayout(
     absoluteRightIconWidth
   };
 }
+
+function onBeforeAttributeUpdate(val: Record<string, any>, attribute: any) {
+  if (val.hasOwnProperty('hoverIconId')) {
+    // @ts-ignore
+    const graphic = this as any;
+    if (graphic.skipMergeUpdate) {
+      return;
+    }
+
+    const cellGroup = getTargetCell(graphic) as Group;
+    if (!cellGroup || !cellGroup.stage) {
+      return;
+    }
+    const table = ((cellGroup as any).stage as any).table as BaseTableAPI;
+    graphic.skipAttributeUpdate = true;
+    const { mergeStartCol, mergeEndCol, mergeStartRow, mergeEndRow } = cellGroup;
+    if (
+      isValid(mergeStartCol) &&
+      isValid(mergeEndCol) &&
+      isValid(mergeStartRow) &&
+      isValid(mergeEndRow) &&
+      (mergeStartCol !== mergeEndCol || mergeStartRow !== mergeEndRow)
+    ) {
+      for (let col = mergeStartCol; col <= mergeEndCol; col++) {
+        for (let row = mergeStartRow; row <= mergeEndRow; row++) {
+          if (col === cellGroup.col && row === cellGroup.row) {
+            // update icon state
+            if (val.hoverIconId !== graphic.attribute.hoverIconId) {
+              const icon = graphic._frameCache.icons.get(val.hoverIconId);
+              graphic.updateHoverIconState(icon);
+            }
+            continue;
+          }
+          // const cell = table.scenegraph.getCell(col, row);
+          const cell = table.scenegraph.highPerformanceGetCell(col, row);
+          if (cell.role === 'cell') {
+            const target = cell.getChildByName(graphic.name, true);
+            if (!target || target.skipAttributeUpdate) {
+              continue;
+            }
+            if (val.hoverIconId !== target.attribute.hoverIconId) {
+              target.setAttribute('hoverIconId', val.hoverIconId);
+              cell.addUpdateBoundTag();
+            }
+          }
+        }
+      }
+      graphic.skipAttributeUpdate = undefined;
+    }
+  }
+}