@ai-table/grid 0.1.38 → 0.1.39

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- {"version":3,"file":"drag.component.d.ts","sourceRoot":"","sources":["../../../../packages/grid/src/components/drag/drag.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAIH,UAAU,EAIV,SAAS,EACT,MAAM,EAIT,MAAM,eAAe,CAAC;AACvB,OAAO,EAAiB,WAAW,EAAY,MAAM,iBAAiB,CAAC;;AAgBvE,qBAQa,oBAAqB,YAAW,MAAM,EAAE,SAAS;IAC1D,aAAa,2EAAgD;IAE7D,WAAW,2EAAgD;IAE3D,OAAO,wDAAyB;IAEhC,OAAO,CAAC,uBAAuB,CAAmC;IAElE,OAAO,CAAC,OAAO,CAAqB;IAEpC,OAAO,CAAC,uBAAuB,CAA0C;IAEzE,UAAU,EAAE,UAAU,CAAC,WAAW,CAAC,CAAmC;IAEtE,OAAO,CAAC,IAAI,CAAe;IAE3B,OAAO,CAAC,aAAa,CAAe;IAEpC,OAAO,CAAC,WAAW,CAA4B;IAE/C,OAAO,CAAC,sBAAsB,CAA4C;IAE1E,OAAO,CAAC,kBAAkB,CAAyC;IAEnE,OAAO,CAAC,WAAW,CAAiC;IAEpD,OAAO,CAAC,KAAK,CAAiB;IAE9B,OAAO,CAAC,gBAAgB,CAAa;IAErC,OAAO,CAAC,iBAAiB,CAAkB;IAE3C,OAAO,CAAC,cAAc,CAAa;IAEnC,OAAO,CAAC,eAAe,CAAa;IAEpC,OAAO,CAAC,oBAAoB,CAAC,CAAc;IAE3C,OAAO,CAAC,sBAAsB,CAAa;IAE3C,OAAO,CAAC,kBAAkB,CAAC,CAAc;IAEzC,OAAO,CAAC,oBAAoB,CAAa;IAEzC,OAAO,CAAC,iBAAiB,CAAC,CAAa;IACvC,OAAO,CAAC,iBAAiB,CAAC,CAAa;IACvC,OAAO,CAAC,eAAe,CAAC,CAAa;;IAMrC,QAAQ;IAKR,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,mBAAmB;IA8C3B,OAAO,CAAC,qBAAqB;IAe7B,OAAO,CAAC,UAAU;IA4BlB,OAAO,CAAC,YAAY;IAkJpB,OAAO,CAAC,iBAAiB;IAgCzB,OAAO,CAAC,YAAY;IA2FpB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,cAAc;IAiBtB,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,sBAAsB;IAM9B,OAAO,CAAC,kBAAkB;IAI1B,WAAW;yCA/dF,oBAAoB;2CAApB,oBAAoB;CA0ehC"}
1
+ {"version":3,"file":"drag.component.d.ts","sourceRoot":"","sources":["../../../../packages/grid/src/components/drag/drag.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAIH,UAAU,EAIV,SAAS,EACT,MAAM,EAIT,MAAM,eAAe,CAAC;AACvB,OAAO,EAAiB,WAAW,EAAY,MAAM,iBAAiB,CAAC;;AAgBvE,qBAQa,oBAAqB,YAAW,MAAM,EAAE,SAAS;IAC1D,aAAa,2EAAgD;IAE7D,WAAW,2EAAgD;IAE3D,OAAO,wDAAyB;IAEhC,OAAO,CAAC,uBAAuB,CAAmC;IAElE,OAAO,CAAC,OAAO,CAAqB;IAEpC,OAAO,CAAC,uBAAuB,CAA0C;IAEzE,UAAU,EAAE,UAAU,CAAC,WAAW,CAAC,CAAmC;IAEtE,OAAO,CAAC,IAAI,CAAe;IAE3B,OAAO,CAAC,aAAa,CAAe;IAEpC,OAAO,CAAC,WAAW,CAA4B;IAE/C,OAAO,CAAC,sBAAsB,CAA4C;IAE1E,OAAO,CAAC,kBAAkB,CAAyC;IAEnE,OAAO,CAAC,WAAW,CAAiC;IAEpD,OAAO,CAAC,KAAK,CAAiB;IAE9B,OAAO,CAAC,gBAAgB,CAAa;IAErC,OAAO,CAAC,iBAAiB,CAAkB;IAE3C,OAAO,CAAC,cAAc,CAAa;IAEnC,OAAO,CAAC,eAAe,CAAa;IAEpC,OAAO,CAAC,oBAAoB,CAAC,CAAc;IAE3C,OAAO,CAAC,sBAAsB,CAAa;IAE3C,OAAO,CAAC,kBAAkB,CAAC,CAAc;IAEzC,OAAO,CAAC,oBAAoB,CAAa;IAEzC,OAAO,CAAC,iBAAiB,CAAC,CAAa;IACvC,OAAO,CAAC,iBAAiB,CAAC,CAAa;IACvC,OAAO,CAAC,eAAe,CAAC,CAAa;;IAMrC,QAAQ;IAKR,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,mBAAmB;IA8C3B,OAAO,CAAC,qBAAqB;IAe7B,OAAO,CAAC,UAAU;IA8BlB,OAAO,CAAC,YAAY;IAsJpB,OAAO,CAAC,iBAAiB;IAgCzB,OAAO,CAAC,YAAY;IA2FpB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,cAAc;IAiBtB,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,sBAAsB;IAM9B,OAAO,CAAC,kBAAkB;IAI1B,WAAW;yCAreF,oBAAoB;2CAApB,oBAAoB;CAgfhC"}
@@ -3270,7 +3270,7 @@ function copyOption(originOption, targetFieldOptions, targetOptionStyle) {
3270
3270
  }
3271
3271
  function getValidCellValue(cellValue, options) {
3272
3272
  const optionsMap = helpers.keyBy(options, '_id');
3273
- const validCellValue = cellValue.filter((optionId) => !!optionsMap[optionId]);
3273
+ const validCellValue = cellValue?.filter((optionId) => !!optionsMap[optionId]);
3274
3274
  return validCellValue;
3275
3275
  }
3276
3276
 
@@ -3319,9 +3319,9 @@ class CheckboxField extends CheckboxFieldBase {
3319
3319
  const cellTextValue = cellValue;
3320
3320
  switch (condition.operation) {
3321
3321
  case AITableFilterOperation.empty:
3322
- return isEmpty(cellTextValue);
3322
+ return !cellTextValue;
3323
3323
  case AITableFilterOperation.exists:
3324
- return !isEmpty(cellTextValue);
3324
+ return !!cellTextValue;
3325
3325
  default:
3326
3326
  return isMeetFilter(condition, cellTextValue);
3327
3327
  }
@@ -3332,6 +3332,12 @@ class CheckboxField extends CheckboxFieldBase {
3332
3332
  return compareNumber(value1, value2);
3333
3333
  }
3334
3334
  toFieldValue(plainText, targetField, originData) {
3335
+ if (originData) {
3336
+ const { field, cellValue } = originData;
3337
+ if (field.type === AITableFieldType.checkbox) {
3338
+ return cellValue;
3339
+ }
3340
+ }
3335
3341
  return null;
3336
3342
  }
3337
3343
  }
@@ -4139,7 +4145,6 @@ class Drawer {
4139
4145
  const { x, y, width, height, fill, strokes } = options;
4140
4146
  if (fill)
4141
4147
  this.setStyle({ fillStyle: fill });
4142
- this.ctx.fillRect(x, y, width, height);
4143
4148
  if (strokes) {
4144
4149
  const { top, right, bottom, left } = strokes;
4145
4150
  // 上边框
@@ -4167,6 +4172,9 @@ class Drawer {
4167
4172
  this.ctx.lineTo(x, y + height);
4168
4173
  this.ctx.stroke();
4169
4174
  }
4175
+ else {
4176
+ this.ctx.fillRect(x, y, width, height);
4177
+ }
4170
4178
  }
4171
4179
  // 换行文本绘制
4172
4180
  wrapText(options) {
@@ -8260,9 +8268,6 @@ class AITableScrollableGroup {
8260
8268
  // 滚动位置信号
8261
8269
  this.scrollX = signal(0);
8262
8270
  this.scrollY = signal(0);
8263
- // 滚动条拖拽状态
8264
- this.isDraggingVertical = signal(false);
8265
- this.isDraggingHorizontal = signal(false);
8266
8271
  // 容器配置
8267
8272
  this.containerConfig = computed(() => {
8268
8273
  const { x = 0, y = 0, width, height } = this.config();
@@ -8393,9 +8398,6 @@ class AITableScrollableGroup {
8393
8398
  });
8394
8399
  // 竖向滚动条滑块配置
8395
8400
  this.verticalConfig = computed(() => {
8396
- if (this.isDraggingVertical()) {
8397
- return null;
8398
- }
8399
8401
  const { scrollbarSize = 12, scrollbarColor = Colors.black, scrollbarOpacity = 0.8 } = this.config();
8400
8402
  const { height, contentHeight } = this.config();
8401
8403
  const thumbHeight = this.verticalThumbHeight();
@@ -8410,7 +8412,6 @@ class AITableScrollableGroup {
8410
8412
  cornerRadius: 6,
8411
8413
  draggable: true,
8412
8414
  dragBoundFunc: (pos) => {
8413
- this.isDraggingVertical.set(true);
8414
8415
  this.displayScrollbarTime.set(new Date());
8415
8416
  // 限定垂直滚动条的拖拽范围,并更新newScrollY
8416
8417
  const maxThumbY = this.verticalThumbMaxY();
@@ -8420,9 +8421,6 @@ class AITableScrollableGroup {
8420
8421
  const newScrollY = (deltaY / (this.verticalScrollbarHeight() - this.verticalThumbHeight())) * (contentHeight - height);
8421
8422
  this.scrollY.set(newScrollY);
8422
8423
  const x = this.verticalTrack.getNode().getAbsolutePosition().x + 1;
8423
- setTimeout(() => {
8424
- this.isDraggingVertical.set(false);
8425
- }, 100);
8426
8424
  return {
8427
8425
  x: x,
8428
8426
  y: newThumbY
@@ -8432,9 +8430,6 @@ class AITableScrollableGroup {
8432
8430
  });
8433
8431
  // 横向滚动条滑块配置
8434
8432
  this.horizontalThumbConfig = computed(() => {
8435
- if (this.isDraggingHorizontal()) {
8436
- return null;
8437
- }
8438
8433
  const { scrollbarSize = 12, scrollbarColor = Colors.black, scrollbarOpacity = 0.8 } = this.config();
8439
8434
  const { width, contentWidth } = this.config();
8440
8435
  const thumbWidth = this.horizontalThumbWidth();
@@ -8449,7 +8444,6 @@ class AITableScrollableGroup {
8449
8444
  cornerRadius: 6,
8450
8445
  draggable: true,
8451
8446
  dragBoundFunc: (pos) => {
8452
- this.isDraggingHorizontal.set(true);
8453
8447
  this.displayScrollbarTime.set(new Date());
8454
8448
  // 限定横向滚动条的拖拽范围,并更新scrollX
8455
8449
  const maxThumbX = this.horizontalThumbMaxX();
@@ -8459,9 +8453,6 @@ class AITableScrollableGroup {
8459
8453
  const newScrollX = (deltaX / (this.horizontalScrollbarHeight() - this.horizontalThumbWidth())) * (contentWidth - width);
8460
8454
  this.scrollX.set(newScrollX);
8461
8455
  const y = this.horizontalTrack.getNode().getAbsolutePosition().y + 1;
8462
- setTimeout(() => {
8463
- this.isDraggingHorizontal.set(false);
8464
- }, 100);
8465
8456
  return {
8466
8457
  x: newThumbX,
8467
8458
  y: y
@@ -8502,6 +8493,9 @@ class AITableScrollableGroup {
8502
8493
  this.rootGroup.getNode().moveTo(this.parentContainer().getNode());
8503
8494
  }
8504
8495
  }
8496
+ stopBubble(e) {
8497
+ e.event.cancelBubble = true;
8498
+ }
8505
8499
  verticalScrollbarClick(e) {
8506
8500
  e.event.cancelBubble = true;
8507
8501
  const { contentHeight, height } = this.config();
@@ -8600,7 +8594,7 @@ class AITableScrollableGroup {
8600
8594
  <ng-content></ng-content>
8601
8595
  </ko-group>
8602
8596
 
8603
- <ko-group>
8597
+ <ko-group (koMousedown)="stopBubble($event)">
8604
8598
  @if (showVerticalScrollbar()) {
8605
8599
  <ko-group
8606
8600
  [config]="verticalScrollbarConfig()"
@@ -8652,7 +8646,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
8652
8646
  <ng-content></ng-content>
8653
8647
  </ko-group>
8654
8648
 
8655
- <ko-group>
8649
+ <ko-group (koMousedown)="stopBubble($event)">
8656
8650
  @if (showVerticalScrollbar()) {
8657
8651
  <ko-group
8658
8652
  [config]="verticalScrollbarConfig()"
@@ -10087,7 +10081,7 @@ class AITableCellCheckbox extends CoverCellBase {
10087
10081
  fill: this.isChecked() ? Colors.primary : Colors.gray300,
10088
10082
  width: AI_TABLE_ICON_COMMON_SIZE,
10089
10083
  height: AI_TABLE_ICON_COMMON_SIZE,
10090
- listening: true
10084
+ listening: readonly ? false : true
10091
10085
  };
10092
10086
  }
10093
10087
  return null;
@@ -10150,7 +10144,7 @@ class AITableCellText extends CoverCellBase {
10150
10144
  width: columnWidth,
10151
10145
  height: this.height(),
10152
10146
  contentWidth: columnWidth, // 内容宽度大于容器宽度,会显示横向滚动条
10153
- contentHeight: height + this.startY() * 2 - AI_TABLE_CELL_LINE_BORDER, // 内容高度大于容器高度,会显示竖向滚动条
10147
+ contentHeight: height, // 内容高度大于容器高度,会显示竖向滚动条
10154
10148
  scrollbarSize: 9,
10155
10149
  scrollbarColor: Colors.gray700,
10156
10150
  x: 0,
@@ -10177,7 +10171,10 @@ class AITableCellText extends CoverCellBase {
10177
10171
  transformsEnabled: DEFAULT_TEXT_TRANSFORMS_ENABLED,
10178
10172
  listening: false
10179
10173
  });
10180
- return tmpText.getClientRect();
10174
+ return {
10175
+ ...tmpText.getClientRect(),
10176
+ height: tmpText.getClientRect().height + this.startY() * 2 - AI_TABLE_CELL_LINE_BORDER
10177
+ };
10181
10178
  });
10182
10179
  this.textMaxWidth = computed(() => {
10183
10180
  const { columnWidth } = this.config()?.render;
@@ -11705,7 +11702,7 @@ class AITableScrollControllerService {
11705
11702
  this.lastAutoScrollOptions = null;
11706
11703
  this.ngZone.runOutsideAngular(() => {
11707
11704
  this.mouseUpSubscription = fromEvent(document, 'mouseup').subscribe(() => {
11708
- this.handleMouseUp();
11705
+ this.clearAutoScroll();
11709
11706
  });
11710
11707
  });
11711
11708
  }
@@ -11720,7 +11717,10 @@ class AITableScrollControllerService {
11720
11717
  this.startAutoScroll(options);
11721
11718
  }
11722
11719
  }
11723
- handleMouseUp() {
11720
+ stopAutoScroll() {
11721
+ this.clearAutoScroll();
11722
+ }
11723
+ clearAutoScroll() {
11724
11724
  this.isAutoScrolling = false;
11725
11725
  if (this.autoScrollSub) {
11726
11726
  this.autoScrollSub.unsubscribe();
@@ -11986,7 +11986,9 @@ class AITableDragComponent {
11986
11986
  else if (e.movementX < 0) {
11987
11987
  direction = DragDirection.left;
11988
11988
  }
11989
- this.movingColumn(drag, moveX, direction);
11989
+ if (direction !== DragDirection.none) {
11990
+ this.movingColumn(drag, moveX, direction);
11991
+ }
11990
11992
  break;
11991
11993
  case DragType.record:
11992
11994
  this.movingRecord(drag, moveY);
@@ -12008,7 +12010,7 @@ class AITableDragComponent {
12008
12010
  const sourceColumnStartX = coordinate.getColumnOffset(sourceColumnIndex);
12009
12011
  const sourceColumnWidth = coordinate.getColumnWidth(sourceColumnIndex);
12010
12012
  const frozenColumnCount = aiTable.context.frozenColumnCount();
12011
- const isSourceColumnFrozen = sourceColumnIndex === frozenColumnCount - 1;
12013
+ const isSourceColumnFrozen = sourceColumnIndex <= frozenColumnCount - 1;
12012
12014
  const frozenColumnWidth = Array.from({ length: frozenColumnCount }).reduce((acc, _, index) => acc + coordinate.getColumnWidth(index), 0);
12013
12015
  const pointerX = moveX + sourceColumnStartX;
12014
12016
  // 拖拽中心点
@@ -12022,8 +12024,20 @@ class AITableDragComponent {
12022
12024
  top: '0',
12023
12025
  left: `${currentRectLeft}px`
12024
12026
  });
12027
+ // 是否在冻结列区域内拖拽
12028
+ const isFrozenColumnAreaDrag = isSourceColumnFrozen &&
12029
+ currentRectLeft <
12030
+ frozenColumnWidth +
12031
+ rowHeadWidth +
12032
+ (direction === DragDirection.left || direction === DragDirection.none
12033
+ ? -AI_TABLE_AUTO_SCROLL_LEFT_THRESHOLD
12034
+ : AI_TABLE_AUTO_SCROLL_LEFT_THRESHOLD);
12025
12035
  // 计算目标列和辅助线
12026
12036
  const updateTargetAndLine = (rectLeft, scrollPosition) => {
12037
+ if (isFrozenColumnAreaDrag) {
12038
+ // 冻结列区域内滚动,清空滚动位置
12039
+ scrollPosition.x = 0;
12040
+ }
12027
12041
  let targetColumnIndex = coordinate.getColumnStartIndex(rectLeft + scrollPosition.x + dragCenter);
12028
12042
  const lastColumnOffset = coordinate.getColumnOffset(coordinate.columnCount - 1);
12029
12043
  const lastColumnWidth = coordinate.getColumnWidth(coordinate.columnCount - 1);
@@ -12042,7 +12056,7 @@ class AITableDragComponent {
12042
12056
  const lineForFrozenX = lineLeft - frozenColumnWidth - rowHeadWidth;
12043
12057
  const rectDistanceFrozenX = rectLeft - frozenColumnWidth - rowHeadWidth;
12044
12058
  if (lineForFrozenX < 0) {
12045
- if (Math.abs(rectDistanceFrozenX) < dragCenter) {
12059
+ if (Math.abs(rectDistanceFrozenX) < dragCenter || (isSourceColumnFrozen && !isFrozenColumnAreaDrag)) {
12046
12060
  // 滚动中保持上一个位置
12047
12061
  const nextColumnStartX = coordinate.getColumnOffset(targetColumnIndex + 1);
12048
12062
  this.setAuxiliaryLineStyles({
@@ -12056,12 +12070,6 @@ class AITableDragComponent {
12056
12070
  };
12057
12071
  return;
12058
12072
  }
12059
- if (isSourceColumnFrozen) {
12060
- // 拖拽的列是冻结列,且目标列在冻结列左侧,不显示辅助线
12061
- this.resetAuxiliaryLine();
12062
- this.draggedData = null;
12063
- return;
12064
- }
12065
12073
  }
12066
12074
  this.setAuxiliaryLineStyles({
12067
12075
  width: '2px',
@@ -12086,10 +12094,9 @@ class AITableDragComponent {
12086
12094
  }
12087
12095
  };
12088
12096
  updateTargetAndLine(currentRectLeft, newScrollPosition);
12089
- if (isSourceColumnFrozen &&
12090
- (direction === DragDirection.right || direction === DragDirection.none) &&
12091
- currentRectLeft < frozenColumnWidth + rowHeadWidth + AI_TABLE_AUTO_SCROLL_LEFT_THRESHOLD) {
12092
- // 拖拽的列是冻结列,方向是向右,且当前列在冻结列左侧,不滚动
12097
+ if (isFrozenColumnAreaDrag) {
12098
+ // 冻结列区域内拖拽取消滚动
12099
+ this.scrollControllerService.stopAutoScroll();
12093
12100
  return;
12094
12101
  }
12095
12102
  this.scrollControllerService.scroll({