@visactor/vtable 0.17.7 → 0.17.8

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.
Files changed (49) hide show
  1. package/cjs/core/BaseTable.js +1 -1
  2. package/cjs/core/BaseTable.js.map +1 -1
  3. package/cjs/event/event.js +5 -1
  4. package/cjs/event/event.js.map +1 -1
  5. package/cjs/event/scroll.js +0 -1
  6. package/cjs/event/util.js +1 -0
  7. package/cjs/index.d.ts +1 -1
  8. package/cjs/index.js +1 -1
  9. package/cjs/index.js.map +1 -1
  10. package/cjs/scenegraph/component/custom.js +19 -2
  11. package/cjs/scenegraph/component/custom.js.map +1 -1
  12. package/cjs/scenegraph/group-creater/progress/create-group-for-first-screen.js +3 -3
  13. package/cjs/scenegraph/group-creater/progress/create-group-for-first-screen.js.map +1 -1
  14. package/cjs/scenegraph/layout/update-row.js +6 -4
  15. package/cjs/scenegraph/layout/update-row.js.map +1 -1
  16. package/cjs/scenegraph/select/update-select-border.js +34 -17
  17. package/cjs/scenegraph/select/update-select-border.js.map +1 -1
  18. package/cjs/state/cell-move/index.js +2 -1
  19. package/cjs/state/cell-move/index.js.map +1 -1
  20. package/cjs/themes/BRIGHT.js +2 -1
  21. package/cjs/themes/DARK.js +1 -2
  22. package/cjs/ts-types/customLayout.d.ts +1 -1
  23. package/cjs/ts-types/customLayout.js.map +1 -1
  24. package/dist/vtable.js +107 -29
  25. package/dist/vtable.min.js +2 -2
  26. package/es/core/BaseTable.js +1 -1
  27. package/es/core/BaseTable.js.map +1 -1
  28. package/es/event/event.js +5 -1
  29. package/es/event/event.js.map +1 -1
  30. package/es/event/scroll.js +1 -2
  31. package/es/event/util.js +2 -1
  32. package/es/index.d.ts +1 -1
  33. package/es/index.js +1 -1
  34. package/es/index.js.map +1 -1
  35. package/es/scenegraph/component/custom.js +20 -3
  36. package/es/scenegraph/component/custom.js.map +1 -1
  37. package/es/scenegraph/group-creater/progress/create-group-for-first-screen.js +2 -2
  38. package/es/scenegraph/group-creater/progress/create-group-for-first-screen.js.map +1 -1
  39. package/es/scenegraph/layout/update-row.js +6 -4
  40. package/es/scenegraph/layout/update-row.js.map +1 -1
  41. package/es/scenegraph/select/update-select-border.js +34 -17
  42. package/es/scenegraph/select/update-select-border.js.map +1 -1
  43. package/es/state/cell-move/index.js +2 -1
  44. package/es/state/cell-move/index.js.map +1 -1
  45. package/es/themes/BRIGHT.js +2 -1
  46. package/es/themes/DARK.js +1 -2
  47. package/es/ts-types/customLayout.d.ts +1 -1
  48. package/es/ts-types/customLayout.js.map +1 -1
  49. package/package.json +6 -6
package/dist/vtable.js CHANGED
@@ -4158,6 +4158,7 @@
4158
4158
  textureSize: 10,
4159
4159
  texturePadding: 2,
4160
4160
  backgroundMode: "no-repeat",
4161
+ backgroundFit: !0,
4161
4162
  blur: 0,
4162
4163
  cursor: null,
4163
4164
  html: null
@@ -12488,7 +12489,8 @@
12488
12489
  drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb, options) {
12489
12490
  const {
12490
12491
  background: background,
12491
- backgroundMode = graphicAttribute.backgroundMode
12492
+ backgroundMode = graphicAttribute.backgroundMode,
12493
+ backgroundFit = graphicAttribute.backgroundFit
12492
12494
  } = graphic.attribute;
12493
12495
  if (background) if (graphic.backgroundImg && graphic.resources) {
12494
12496
  const res = graphic.resources.get(background);
@@ -12503,13 +12505,33 @@
12503
12505
  }
12504
12506
  context.clip();
12505
12507
  const b = graphic.AABBBounds;
12506
- context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), this.doDrawImage(context, res.data, b, backgroundMode), context.restore(), graphic.transMatrix.onlyTranslate() || context.setTransformForCurrent();
12508
+ context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), this.doDrawImage(context, res.data, b, backgroundMode, backgroundFit), context.restore(), graphic.transMatrix.onlyTranslate() || context.setTransformForCurrent();
12507
12509
  } else context.highPerformanceSave(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.fillStyle = background, context.fill(), context.highPerformanceRestore();
12508
12510
  }
12509
- doDrawImage(context, data, b, backgroundMode) {
12511
+ doDrawImage(context, data, b, backgroundMode, backgroundFit) {
12510
12512
  if ("no-repeat" === backgroundMode) context.drawImage(data, b.x1, b.y1, b.width(), b.height());else {
12513
+ const targetW = b.width(),
12514
+ targetH = b.height();
12515
+ let w = targetW,
12516
+ h = targetH;
12517
+ if (backgroundFit && "repeat" !== backgroundMode && (data.width || data.height)) {
12518
+ const resW = data.width,
12519
+ resH = data.height;
12520
+ if ("repeat-x" === backgroundMode) {
12521
+ w = resW * (targetH / resH);
12522
+ } else if ("repeat-y" === backgroundMode) {
12523
+ h = resH * (targetW / resW);
12524
+ }
12525
+ const canvas = canvasAllocate.allocate({
12526
+ width: w,
12527
+ height: h,
12528
+ dpr: context.dpr
12529
+ }),
12530
+ ctx = canvas.getContext("2d");
12531
+ ctx && (ctx.inuse = !0, ctx.clearMatrix(), ctx.setTransformForCurrent(!0), ctx.clearRect(0, 0, w, h), ctx.drawImage(data, 0, 0, w, h), data = canvas.nativeCanvas), document.body.appendChild(data), canvasAllocate.free(canvas);
12532
+ }
12511
12533
  const pattern = context.createPattern(data, backgroundMode);
12512
- context.fillStyle = pattern, context.translate(b.x1, b.y1), context.fillRect(0, 0, b.width(), b.height()), context.translate(-b.x1, -b.y1);
12534
+ context.fillStyle = pattern, context.translate(b.x1, b.y1), context.fillRect(0, 0, targetW, targetH), context.translate(-b.x1, -b.y1);
12513
12535
  }
12514
12536
  }
12515
12537
  }
@@ -12769,14 +12791,15 @@
12769
12791
  drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb) {
12770
12792
  const {
12771
12793
  background: background,
12772
- backgroundMode = graphicAttribute.backgroundMode
12794
+ backgroundMode = graphicAttribute.backgroundMode,
12795
+ backgroundFit = graphicAttribute.backgroundFit
12773
12796
  } = graphic.attribute;
12774
12797
  if (background) if (graphic.backgroundImg && graphic.resources) {
12775
12798
  const res = graphic.resources.get(background);
12776
12799
  if ("success" !== res.state || !res.data) return;
12777
12800
  context.highPerformanceSave(), context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0);
12778
12801
  const b = graphic.AABBBounds;
12779
- this.doDrawImage(context, res.data, b, backgroundMode), context.highPerformanceRestore(), context.setTransformForCurrent();
12802
+ this.doDrawImage(context, res.data, b, backgroundMode, backgroundFit), context.highPerformanceRestore(), context.setTransformForCurrent();
12780
12803
  } else context.highPerformanceSave(), context.fillStyle = background, context.fill(), context.highPerformanceRestore();
12781
12804
  }
12782
12805
  }
@@ -12845,7 +12868,8 @@
12845
12868
  drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb) {
12846
12869
  const {
12847
12870
  background: background,
12848
- backgroundMode = graphicAttribute.backgroundMode
12871
+ backgroundMode = graphicAttribute.backgroundMode,
12872
+ backgroundFit = graphicAttribute.backgroundFit
12849
12873
  } = graphic.attribute;
12850
12874
  if (background) if (graphic.backgroundImg) {
12851
12875
  const res = graphic.resources.get(background);
@@ -12859,7 +12883,7 @@
12859
12883
  context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0), context.translate(scrollX, scrollY);
12860
12884
  }
12861
12885
  const b = graphic.AABBBounds;
12862
- this.doDrawImage(context, res.data, b, backgroundMode), context.restore(), graphic.transMatrix.onlyTranslate() || context.setTransformForCurrent();
12886
+ this.doDrawImage(context, res.data, b, backgroundMode, backgroundFit), context.restore(), graphic.transMatrix.onlyTranslate() || context.setTransformForCurrent();
12863
12887
  } else if (isObject$4(background)) {
12864
12888
  const {
12865
12889
  stroke: stroke,
@@ -14160,14 +14184,15 @@
14160
14184
  drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb) {
14161
14185
  const {
14162
14186
  background: background,
14163
- backgroundMode = graphicAttribute.backgroundMode
14187
+ backgroundMode = graphicAttribute.backgroundMode,
14188
+ backgroundFit = graphicAttribute.backgroundFit
14164
14189
  } = graphic.attribute;
14165
14190
  if (!background) return;
14166
14191
  const b = graphic.AABBBounds;
14167
14192
  if (graphic.backgroundImg && graphic.resources) {
14168
14193
  const res = graphic.resources.get(background);
14169
14194
  if ("success" !== res.state || !res.data) return;
14170
- context.highPerformanceSave(), context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0), this.doDrawImage(context, res.data, b, backgroundMode), context.highPerformanceRestore(), context.setTransformForCurrent();
14195
+ context.highPerformanceSave(), context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0), this.doDrawImage(context, res.data, b, backgroundMode, backgroundFit), context.highPerformanceRestore(), context.setTransformForCurrent();
14171
14196
  } else context.highPerformanceSave(), context.fillStyle = background, context.fillRect(b.x1, b.y1, b.width(), b.height()), context.highPerformanceRestore();
14172
14197
  }
14173
14198
  }
@@ -16066,10 +16091,10 @@
16066
16091
  let left = 0,
16067
16092
  top = 0;
16068
16093
  if ("position" === anchorType) {
16069
- const matrix = graphic.transMatrix;
16094
+ const matrix = graphic.globalTransMatrix;
16070
16095
  left = matrix.e, top = matrix.f;
16071
16096
  } else {
16072
- const b = graphic.AABBBounds;
16097
+ const b = graphic.globalAABBBounds;
16073
16098
  left = b.x1, top = b.y1;
16074
16099
  }
16075
16100
  const containerTL = application.global.getElementTopLeft(nativeContainer, !1),
@@ -17958,9 +17983,9 @@
17958
17983
  }
17959
17984
  children.length && flatten(1 === children.length ? children[0] : children, childrenList);
17960
17985
  const g = "Group" === c.name ? new c(attribute) : c(config);
17961
- return parseToGraphic(g, childrenList, props), stateProxy && (g.stateProxy = stateProxy), g;
17986
+ return parseToGraphic$1(g, childrenList, props), stateProxy && (g.stateProxy = stateProxy), g;
17962
17987
  }
17963
- function parseToGraphic(g, childrenList, props) {
17988
+ function parseToGraphic$1(g, childrenList, props) {
17964
17989
  let out,
17965
17990
  isGraphic = !1;
17966
17991
  switch (g.type) {
@@ -32076,8 +32101,12 @@
32076
32101
  return dom;
32077
32102
  }
32078
32103
  const type = dom.type;
32079
- const { attribute, children } = dom.props;
32104
+ const { attribute, children, stateProxy } = dom.props;
32080
32105
  const g = type({ attribute });
32106
+ parseToGraphic(g, dom.props);
32107
+ if (stateProxy) {
32108
+ g.stateProxy = stateProxy;
32109
+ }
32081
32110
  g.id = attribute.id;
32082
32111
  g.name = attribute.name;
32083
32112
  if (isArray$1(children)) {
@@ -32091,6 +32120,25 @@
32091
32120
  }
32092
32121
  return g;
32093
32122
  }
32123
+ function parseToGraphic(g, props) {
32124
+ let isGraphic = false;
32125
+ switch (g.type) {
32126
+ case 'richtext':
32127
+ break;
32128
+ case 'rich/image':
32129
+ break;
32130
+ default:
32131
+ isGraphic = true;
32132
+ }
32133
+ if (isGraphic) {
32134
+ Object.keys(props).forEach(k => {
32135
+ const en = REACT_TO_CANOPUS_EVENTS[k];
32136
+ if (en) {
32137
+ g.on(en, props[k]);
32138
+ }
32139
+ });
32140
+ }
32141
+ }
32094
32142
 
32095
32143
  const icons = {};
32096
32144
  class IconCache {
@@ -39441,11 +39489,11 @@
39441
39489
  computeColsWidth(table, 0, distCol);
39442
39490
  }
39443
39491
  computeRowsHeight(table, 0, distRow);
39444
- if (distCol < table.colCount - 1 - table.rightFrozenColCount) {
39445
- computeColsWidth(table, table.colCount - 1 - table.rightFrozenColCount + 1, table.colCount - 1);
39492
+ if (distCol < table.colCount - table.rightFrozenColCount) {
39493
+ computeColsWidth(table, table.colCount - table.rightFrozenColCount, table.colCount - 1);
39446
39494
  }
39447
- if (distRow < table.rowCount - 1 - table.bottomFrozenRowCount) {
39448
- computeRowsHeight(table, table.rowCount - 1 - table.bottomFrozenRowCount + 1, table.rowCount - 1);
39495
+ if (distRow < table.rowCount - table.bottomFrozenRowCount) {
39496
+ computeRowsHeight(table, table.rowCount - table.bottomFrozenRowCount, table.rowCount - 1);
39449
39497
  }
39450
39498
  table.scenegraph.colHeaderGroup.setAttribute('x', table.getFrozenColsWidth());
39451
39499
  table.scenegraph.rowHeaderGroup.setAttribute('y', table.getFrozenRowsHeight());
@@ -40750,35 +40798,39 @@
40750
40798
  if (selectComp.rect.attribute.x < scene.table.getFrozenColsWidth() &&
40751
40799
  scene.table.scrollLeft > 0 &&
40752
40800
  (selectComp.role === 'body' || selectComp.role === 'columnHeader' || selectComp.role === 'bottomFrozen')) {
40801
+ const width = selectComp.rect.attribute.width - (scene.table.getFrozenColsWidth() - selectComp.rect.attribute.x);
40753
40802
  selectComp.rect.setAttributes({
40754
40803
  x: selectComp.rect.attribute.x + (scene.table.getFrozenColsWidth() - selectComp.rect.attribute.x),
40755
- width: selectComp.rect.attribute.width - (scene.table.getFrozenColsWidth() - selectComp.rect.attribute.x)
40804
+ width: width > 0 ? width : 0
40756
40805
  });
40757
40806
  }
40758
40807
  if (scene.table.getRightFrozenColsWidth() > 0 &&
40759
40808
  scene.rightFrozenGroup.attribute.height > 0 &&
40760
40809
  selectComp.rect.attribute.x + selectComp.rect.attribute.width > scene.rightFrozenGroup.attribute.x &&
40761
40810
  (selectComp.role === 'body' || selectComp.role === 'columnHeader' || selectComp.role === 'bottomFrozen')) {
40811
+ const width = scene.rightFrozenGroup.attribute.x - selectComp.rect.attribute.x;
40762
40812
  selectComp.rect.setAttributes({
40763
40813
  x: selectComp.rect.attribute.x,
40764
- width: scene.rightFrozenGroup.attribute.x - selectComp.rect.attribute.x
40814
+ width: width > 0 ? width : 0
40765
40815
  });
40766
40816
  }
40767
40817
  if (selectComp.rect.attribute.y < scene.colHeaderGroup.attribute.height &&
40768
40818
  scene.table.scrollTop > 0 &&
40769
40819
  (selectComp.role === 'body' || selectComp.role === 'rowHeader' || selectComp.role === 'rightFrozen')) {
40820
+ const height = selectComp.rect.attribute.height - (scene.colHeaderGroup.attribute.height - selectComp.rect.attribute.y);
40770
40821
  selectComp.rect.setAttributes({
40771
40822
  y: selectComp.rect.attribute.y + (scene.colHeaderGroup.attribute.height - selectComp.rect.attribute.y),
40772
- height: selectComp.rect.attribute.height - (scene.colHeaderGroup.attribute.height - selectComp.rect.attribute.y)
40823
+ height: height > 0 ? height : 0
40773
40824
  });
40774
40825
  }
40775
40826
  if (scene.bottomFrozenGroup.attribute.width > 0 &&
40776
40827
  scene.bottomFrozenGroup.attribute.height > 0 &&
40777
40828
  selectComp.rect.attribute.y + selectComp.rect.attribute.height > scene.bottomFrozenGroup.attribute.y &&
40778
40829
  (selectComp.role === 'body' || selectComp.role === 'rowHeader' || selectComp.role === 'rightFrozen')) {
40830
+ const height = scene.bottomFrozenGroup.attribute.y - selectComp.rect.attribute.y;
40779
40831
  selectComp.rect.setAttributes({
40780
40832
  y: selectComp.rect.attribute.y,
40781
- height: scene.bottomFrozenGroup.attribute.y - selectComp.rect.attribute.y
40833
+ height: height > 0 ? height : 0
40782
40834
  });
40783
40835
  }
40784
40836
  }
@@ -41267,9 +41319,15 @@
41267
41319
  const merge = getCellMergeInfo(scene.table, cellGroup.col, cellGroup.row);
41268
41320
  if (merge) {
41269
41321
  cellGroup.mergeStartCol = merge.start.col;
41270
- cellGroup.mergeStartCol = merge.start.col;
41271
- cellGroup.mergeEndCol = merge.end.col;
41272
41322
  cellGroup.mergeEndCol = merge.end.col;
41323
+ cellGroup.mergeStartRow = merge.start.row;
41324
+ cellGroup.mergeEndRow = merge.end.row;
41325
+ }
41326
+ else {
41327
+ cellGroup.mergeStartCol = undefined;
41328
+ cellGroup.mergeEndCol = undefined;
41329
+ cellGroup.mergeStartRow = undefined;
41330
+ cellGroup.mergeEndRow = undefined;
41273
41331
  }
41274
41332
  }
41275
41333
  }
@@ -41334,9 +41392,15 @@
41334
41392
  const merge = getCellMergeInfo(scene.table, cellGroup.col, cellGroup.row);
41335
41393
  if (merge) {
41336
41394
  cellGroup.mergeStartCol = merge.start.col;
41337
- cellGroup.mergeStartCol = merge.start.col;
41338
- cellGroup.mergeEndCol = merge.end.col;
41339
41395
  cellGroup.mergeEndCol = merge.end.col;
41396
+ cellGroup.mergeStartRow = merge.start.row;
41397
+ cellGroup.mergeEndRow = merge.end.row;
41398
+ }
41399
+ else {
41400
+ cellGroup.mergeStartCol = undefined;
41401
+ cellGroup.mergeEndCol = undefined;
41402
+ cellGroup.mergeStartRow = undefined;
41403
+ cellGroup.mergeEndRow = undefined;
41340
41404
  }
41341
41405
  }
41342
41406
  }
@@ -44600,6 +44664,11 @@
44600
44664
  delete state.columnMove.rowTarget;
44601
44665
  }, 0);
44602
44666
  state.table.scenegraph.component.hideMoveCol();
44667
+ if (state.columnResize.col < state.table.frozenColCount &&
44668
+ !state.table.isPivotTable() &&
44669
+ !state.table.transpose) {
44670
+ state.table.scenegraph.component.setFrozenColumnShadow(state.table.frozenColCount - 1, state.columnResize.isRightFrozen);
44671
+ }
44603
44672
  state.table.scenegraph.updateNextFrame();
44604
44673
  }
44605
44674
  function clearWidthsAndHeightsCache(colSource, rowSource, colTarget, rowTarget, table) {
@@ -47072,6 +47141,15 @@
47072
47141
  const resizeCol = this.table.scenegraph.getResizeColAt(eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y, eventArgsSet.eventArgs?.targetCell);
47073
47142
  if (this.table._canResizeColumn(resizeCol.col, resizeCol.row) && resizeCol.col >= 0) {
47074
47143
  this.table.scenegraph.updateAutoColWidth(resizeCol.col);
47144
+ if (this.table.isPivotChart()) {
47145
+ this.table.scenegraph.updateChartSize(resizeCol.col);
47146
+ }
47147
+ const state = this.table.stateManager;
47148
+ if (state.columnResize.col < state.table.frozenColCount &&
47149
+ !state.table.isPivotTable() &&
47150
+ !state.table.transpose) {
47151
+ state.table.scenegraph.component.setFrozenColumnShadow(state.table.frozenColCount - 1, state.columnResize.isRightFrozen);
47152
+ }
47075
47153
  }
47076
47154
  }
47077
47155
  });
@@ -50081,7 +50159,7 @@
50081
50159
  return TABLE_EVENT_TYPE;
50082
50160
  }
50083
50161
  options;
50084
- version = "0.17.7";
50162
+ version = "0.17.8";
50085
50163
  pagination;
50086
50164
  id = `VTable${Date.now()}`;
50087
50165
  headerStyleCache;
@@ -60824,7 +60902,7 @@
60824
60902
  return new Tag$1(params ? params.attribute : {});
60825
60903
  }
60826
60904
 
60827
- const version = "0.17.7";
60905
+ const version = "0.17.8";
60828
60906
  function getIcons() {
60829
60907
  return get$2();
60830
60908
  }