fix(facet): frozen clip and resizer issue (#275)

* fix(data-cell): cyccle dependence bugs (#269) * feat: add pointer cursor for link field text (#270) * fix: frozen col' resize render * chore(ci): ci enhance (#268) * chore(release): 🔖 publish new version v0.1.5 (#267) * chore: 🔥 remoce useless annotations * chore: change the build script * chore(release): 🔖 publish new version - @antv/s2@0.1.5 * chore(ci): pr test * chore(ci): assign * chore(ci): add issue ci * chore(ci): rename * chore(ci): badge * chore(ci): auto add reviwer * chore(ci): update lib link * chore(ci): fix lint error * chore: 🔧 update the site preview configuration * chore: 🔧 add preview workflows * chore: 🔧 update the site scripts * chore: 📝 update the tips info for the issue close and issue labeled * chore(ci): fix bundle size * chore(ci): update compressed size action * chore(ci): fix eslint ignore config * chore(ci): update action * chore(ci): auto add weekly label * chore(ci): update node version Co-authored-by: 嘤嘤嘤 <yingying.xwy@antgroup.com> * fix: replace circular deps (#271) * docs: update badge (#272) * docs: update badge * docs: fix access lint * test(dataset): finish dataset test (#265) * test(dataset): finish dataset test * fix(test): adjust unit jest-extended * fix: multi selection * fix: rm packages/s2-core/package-lock.json * test: add test timeout (#274) * test: add test timeout * test: fix lint * test: fix ci order * test: adjust pr label * test: add max worker * test: use macos runtime * fix: review comments * fix: bundle file declaration generation (#276) * fix: bundle file declaration generation * fix: lint error * fix: revert set label action * fix: default export issue * fix: remove annotion * fix: faild test * fix: coverage * fix: trigger event * fix: output locv file * fix: base path * fix: use size limit * fix: adjust limit size * fix: use node 12 * fix: adjust size limit * fix: remove size limit action * fix: empty values * fix: add safaty in setDataCfg * fix: review comments * fix: revert change Co-authored-by: qubaomingg <baoming.qbm@antfin.com> Co-authored-by: Wenjun Xu <906626481@qq.com> Co-authored-by: xinhui.zxh <xinhui.zxh@antgroup.com> Co-authored-by: Jinke Li <a1231236677287@163.com> Co-authored-by: 嘤嘤嘤 <yingying.xwy@antgroup.com>
antvis · Sep 17, 2021 · 6b53061 · 6b53061
1 parent b69cf24
commit 6b53061
Show file tree

Hide file tree

Showing 14 changed files with 267 additions and 80 deletions.
diff --git a/packages/s2-core/src/cell/col-cell.ts b/packages/s2-core/src/cell/col-cell.ts
@@ -189,26 +189,38 @@ export class ColCell extends HeaderCell {
     return this.meta.key;
   }
 
+  protected getColResizeAreaOffset() {
+    const { offset, position } = this.headerConfig;
+    const { x, y } = this.meta;
+
+    return {
+      x: position.x - offset + x,
+      y: position.y + y,
+    };
+  }
+
+  protected getColResizeArea() {
+    const prevResizeArea = this.spreadsheet.foregroundGroup.findById(
+      KEY_GROUP_COL_RESIZE_AREA,
+    );
+    return (prevResizeArea ||
+      this.spreadsheet.foregroundGroup.addGroup({
+        id: KEY_GROUP_COL_RESIZE_AREA,
+      })) as Group;
+  }
+
   // 绘制热区
   private drawResizeArea() {
-    const { offset, position, viewportWidth } = this.headerConfig;
+    const { position, viewportWidth } = this.headerConfig;
     const {
       label,
-      x,
       y,
       width: cellWidth,
       height: cellHeight,
       parent,
     } = this.meta;
     const resizeStyle = this.getStyle('resizeArea');
-    // 热区公用一个group
-    const prevResizeArea = this.spreadsheet.foregroundGroup.findById(
-      KEY_GROUP_COL_RESIZE_AREA,
-    );
-    const resizeArea = (prevResizeArea ||
-      this.spreadsheet.foregroundGroup.addGroup({
-        id: KEY_GROUP_COL_RESIZE_AREA,
-      })) as Group;
+    const resizeArea = this.getColResizeArea();
     const prevHorizontalResizeArea = resizeArea.find((element) => {
       return (
         element.attrs.name ===
@@ -243,12 +255,13 @@ export class ColCell extends HeaderCell {
       });
     }
     if (this.meta.isLeaf) {
+      const resizerOffset = this.getColResizeAreaOffset();
       // 列宽调整热区
       // 基准线是根据container坐标来的，因此把热区画在container
       resizeArea.addShape('rect', {
         attrs: {
-          x: position.x - offset + x + cellWidth - resizeStyle.size / 2,
-          y: position.y + y,
+          x: resizerOffset.x + cellWidth - resizeStyle.size / 2,
+          y: resizerOffset.y,
           width: resizeStyle.size,
           height: cellHeight,
           fill: resizeStyle.background,
@@ -260,8 +273,8 @@ export class ColCell extends HeaderCell {
             type: 'col',
             affect: 'cell',
             caption: parent.isTotals ? '' : label,
-            offsetX: position.x - offset + x,
-            offsetY: position.y + y,
+            offsetX: resizerOffset.x,
+            offsetY: resizerOffset.y,
             width: cellWidth,
             height: cellHeight,
           } as ResizeInfo,

diff --git a/packages/s2-core/src/cell/table-col-cell.ts b/packages/s2-core/src/cell/table-col-cell.ts
@@ -1,13 +1,54 @@
 import { get } from 'lodash';
-import { EXTRA_FIELD } from '../common/constant';
+import { Group } from '@antv/g-canvas';
 import { renderDetailTypeSortIcon } from '../utils/layout/add-detail-type-sort-icon';
 import { getEllipsisText, getTextPosition } from '../utils/text';
 import { renderText } from '@/utils/g-renders';
 import { ColCell } from '@/cell/col-cell';
+import { KEY_GROUP_FROZEN_COL_RESIZE_AREA } from '@/common/constant';
 
 export class TableColCell extends ColCell {
-  protected getStyle() {
-    return get(this, 'theme.colCell');
+  protected isFrozenCol() {
+    const { frozenColCount, frozenTrailingColCount } = this.spreadsheet.options;
+    const { colIndex } = this.meta;
+    const colLeafNodes = this.spreadsheet.facet.layoutResult.colLeafNodes;
+
+    const isFrozenCol = frozenColCount > 0 && colIndex < frozenColCount;
+    const isFrozenTrailingCol =
+      frozenTrailingColCount > 0 &&
+      colIndex >= colLeafNodes.length - frozenTrailingColCount;
+
+    return isFrozenCol || isFrozenTrailingCol;
+  }
+
+  protected getColResizeArea() {
+    const isFrozenCol = this.isFrozenCol();
+
+    if (!isFrozenCol) {
+      return super.getColResizeArea();
+    }
+    const prevResizeArea = this.spreadsheet.foregroundGroup.findById(
+      KEY_GROUP_FROZEN_COL_RESIZE_AREA,
+    );
+    return (prevResizeArea ||
+      this.spreadsheet.foregroundGroup.addGroup({
+        id: KEY_GROUP_FROZEN_COL_RESIZE_AREA,
+      })) as Group;
+  }
+
+  protected getColResizeAreaOffset() {
+    const { offset, position } = this.headerConfig;
+    const { x, y } = this.meta;
+
+    let finalOffset = offset;
+    // 如果当前列被冻结，不对 resizer 做 offset 处理
+    if (this.isFrozenCol()) {
+      finalOffset = 0;
+    }
+
+    return {
+      x: position.x - finalOffset + x,
+      y: position.y + y,
+    };
   }
 
   protected drawTextShape() {
@@ -26,6 +67,7 @@ export class TableColCell extends ColCell {
     const textStyle = get(style, 'bolderText');
     const padding = get(style, 'cell.padding');
     const iconSize = get(style, 'icon.size');
+    const iconMargin = get(style, 'icon.margin.right');
     const rightPadding = padding?.right + iconSize;
     const leftPadding = padding?.left;
 
@@ -71,13 +113,9 @@ export class TableColCell extends ColCell {
     renderDetailTypeSortIcon(
       this,
       spreadsheet,
-      x + cellWidth - iconSize,
+      x + cellWidth - iconSize - iconMargin,
       textY,
       key,
     );
   }
-
-  protected getColResizeAreaKey(): string {
-    return EXTRA_FIELD;
-  }
 }
diff --git a/packages/s2-core/src/cell/table-corner-cell.ts b/packages/s2-core/src/cell/table-corner-cell.ts
@@ -2,7 +2,7 @@ import { get } from 'lodash';
 import { TableColCell } from './table-col-cell';
 
 export class TableCornerCell extends TableColCell {
-  protected getStyle() {
-    return get(this, 'theme.cornerCell');
+  protected getStyle(name?: string) {
+    return name ? this.theme[name] : get(this, 'theme.cornerCell');
   }
 }
diff --git a/packages/s2-core/src/cell/table-series-cell.ts b/packages/s2-core/src/cell/table-series-cell.ts
@@ -4,7 +4,7 @@ import { TextTheme } from '@/common/interface';
 
 export class TableRowCell extends DataCell {
   public get cellType() {
-    return CellTypes.DATA_CELL;
+    return CellTypes.ROW_CELL;
   }
 
   protected getTextStyle(): TextTheme {

diff --git a/packages/s2-core/src/common/constant/basic.ts b/packages/s2-core/src/common/constant/basic.ts
@@ -34,6 +34,7 @@ export const KEY_GROUP_ROW_RESIZE_AREA = 'rowResizeAreaGroup';
 export const KEY_GROUP_ROW_INDEX_RESIZE_AREA = 'rowIndexResizeAreaGroup';
 export const KEY_GROUP_CORNER_RESIZE_AREA = 'cornerResizeAreaGroup';
 export const KEY_GROUP_COL_RESIZE_AREA = 'colResizeAreaGroup';
+export const KEY_GROUP_FROZEN_COL_RESIZE_AREA = 'colFrozenResizeAreaGroup';
 export const KEY_GROUP_MASK_GROUP = 'maskGroup';
 export const KEY_GROUP_COL_SCROLL = 'colScrollGroup';
 export const KEY_GROUP_COL_FROZEN = 'colFrozenGroup';

diff --git a/packages/s2-core/src/common/constant/interaction.ts b/packages/s2-core/src/common/constant/interaction.ts
@@ -66,6 +66,7 @@ export enum InteractionKeyboardKey {
   SHIFT = 'Shift',
   COPY = 'c',
   ESC = 'Escape',
+  META = 'Meta',
 }
 
 export enum SortMethodType {
@@ -77,9 +78,11 @@ export enum InterceptType {
   HOVER = 'hover',
   CLICK = 'click',
   BRUSH_SELECTION = 'brushSelection',
+  MULTI_SELECTION = 'multiSelection',
 }
 
 export type Intercept =
   | InterceptType.HOVER
   | InterceptType.CLICK
-  | InterceptType.BRUSH_SELECTION;
+  | InterceptType.BRUSH_SELECTION
+  | InterceptType.MULTI_SELECTION;
diff --git a/packages/s2-core/src/facet/base-facet.ts b/packages/s2-core/src/facet/base-facet.ts
@@ -843,6 +843,20 @@ export abstract class BaseFacet {
     });
   };
 
+  protected clip(scrollX: number, scrollY: number) {
+    this.spreadsheet.panelScrollGroup.setClip({
+      type: 'rect',
+      attrs: {
+        x: this.cfg.spreadsheet.freezeRowHeader() ? scrollX : 0,
+        y: scrollY,
+        width:
+          this.panelBBox.width +
+          (this.cfg.spreadsheet.freezeRowHeader() ? 0 : scrollX),
+        height: this.panelBBox.height,
+      },
+    });
+  }
+
   /**
    * Translate panelGroup, rowHeader, cornerHeader, columnHeader ect
    * according to new scroll offset
@@ -888,18 +902,6 @@ export abstract class BaseFacet {
         : undefined,
       KEY_GROUP_COL_RESIZE_AREA,
     );
-
-    this.spreadsheet.panelScrollGroup.setClip({
-      type: 'rect',
-      attrs: {
-        x: this.cfg.spreadsheet.freezeRowHeader() ? scrollX : 0,
-        y: scrollY,
-        width:
-          this.panelBBox.width +
-          (this.cfg.spreadsheet.freezeRowHeader() ? 0 : scrollX),
-        height: this.panelBBox.height,
-      },
-    });
   }
 
   addCell = (cell: S2CellType<ViewMeta>) => {
@@ -1156,6 +1158,7 @@ export abstract class BaseFacet {
     }
 
     this.translateRelatedGroups(scrollX, scrollY, hRowScrollX);
+    this.clip(scrollX, scrollY);
 
     this.spreadsheet.emit(S2Event.LAYOUT_CELL_SCROLL, { scrollX, scrollY });
   }

diff --git a/packages/s2-core/src/facet/header/col.ts b/packages/s2-core/src/facet/header/col.ts
@@ -3,6 +3,7 @@ import { IGroup, IShape } from '@antv/g-base';
 import { translateGroup } from '../utils';
 import { BaseHeader, BaseHeaderConfig } from './base';
 import {
+  KEY_GROUP_COL_RESIZE_AREA,
   SERIES_NUMBER_FIELD,
   KEY_GROUP_COL_FROZEN,
   KEY_GROUP_COL_SCROLL,
@@ -76,14 +77,20 @@ export class ColHeader extends BaseHeader<ColHeaderConfig> {
   protected clip(): void {
     const { width, height, scrollX, spreadsheet } = this.headerConfig;
 
-    const { frozenColCount } = spreadsheet.options;
+    const { frozenColCount, frozenTrailingColCount } = spreadsheet.options;
     const colLeafNodes = spreadsheet.facet.layoutResult.colLeafNodes;
 
     let frozenColWidth = 0;
+    let frozenTrailingColWidth = 0;
     if (spreadsheet.isTableMode()) {
       for (let i = 0; i < frozenColCount; i++) {
         frozenColWidth += colLeafNodes[i].width;
       }
+
+      for (let i = 0; i < frozenTrailingColCount; i++) {
+        frozenTrailingColWidth +=
+          colLeafNodes[colLeafNodes.length - 1 - i].width;
+      }
     }
 
     this.scrollGroup.setClip({
@@ -94,10 +101,33 @@ export class ColHeader extends BaseHeader<ColHeaderConfig> {
         width:
           width +
           (spreadsheet.freezeRowHeader() ? 0 : scrollX) -
-          frozenColWidth,
+          frozenColWidth -
+          frozenTrailingColWidth,
         height,
       },
     });
+
+    const prevResizeArea = spreadsheet.foregroundGroup.findById(
+      KEY_GROUP_COL_RESIZE_AREA,
+    );
+    const resizeAreaSize = spreadsheet.theme.resizeArea?.size ?? 0;
+
+    if (prevResizeArea) {
+      prevResizeArea.setClip({
+        type: 'rect',
+        attrs: {
+          x: 0 + frozenColWidth,
+          y: 0,
+          width:
+            width +
+            (spreadsheet.freezeRowHeader() ? 0 : scrollX) -
+            frozenColWidth -
+            frozenTrailingColWidth +
+            resizeAreaSize,
+          height,
+        },
+      });
+    }
   }
 
   public clear() {

diff --git a/packages/s2-core/src/facet/header/corner.ts b/packages/s2-core/src/facet/header/corner.ts
@@ -99,11 +99,7 @@ export class CornerHeader extends BaseHeader<CornerHeaderConfig> {
     // check if show series number node
     if (seriesNumberWidth) {
       // 1、spreadsheet must have at least one node in last level
-      // 2、listSheet don't have other conditions
-      if (
-        (isPivotMode && colsHierarchy?.sampleNodeForLastLevel) ||
-        !isPivotMode
-      ) {
+      if (isPivotMode && colsHierarchy?.sampleNodeForLastLevel) {
         const sNode: Node = new Node({
           key: KEY_SERIES_NUMBER_NODE, // mark series node
           id: '',
@@ -171,24 +167,6 @@ export class CornerHeader extends BaseHeader<CornerHeaderConfig> {
           cNode.spreadsheet = ss;
           cornerNodes.push(cNode);
         });
-      } else {
-        // detail type
-        rowsHierarchy.sampleNodesForAllLevels.forEach((rowNode) => {
-          const field = rows[rowNode.level];
-          const cNode: Node = new Node({
-            key: field,
-            id: '',
-            value: dataSet.getFieldName(field),
-          });
-          cNode.x = rowNode.x + seriesNumberWidth;
-          cNode.y = position.y;
-          cNode.width = rowNode.width;
-          cNode.height = height;
-          cNode.field = field;
-          cNode.isPivotMode = isPivotMode;
-          cNode.spreadsheet = ss;
-          cornerNodes.push(cNode);
-        });
       }
     }