Skip to content

Commit

Permalink
Merge pull request #532 from VisActor/fix_drag_select
Browse files Browse the repository at this point in the history 
Fix drag select
  • Loading branch information
@fangsmile
fangsmile authored Nov 7, 2023
2 parents 2ac4eb1 + 7b18fb7 commit 89824b7
Show file tree
Hide file tree
Showing 18 changed files with 532 additions and 170 deletions.
11 changes: 11 additions & 0 deletions common/changes/@visactor/vtable/fix_drag_select_2023-11-04-05-19.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"changes": [
{
"comment": "fix: drag select out tablecell getSelectCellInfos null\n\n",
"type": "patch",
"packageName": "@visactor/vtable"
}
],
"packageName": "@visactor/vtable",
"email": "[email protected]"
}
11 changes: 11 additions & 0 deletions common/changes/@visactor/vtable/fix_drag_select_2023-11-06-03-50.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"changes": [
{
"comment": "refactor: change styleElement add targetDom\n\n",
"type": "patch",
"packageName": "@visactor/vtable"
}
],
"packageName": "@visactor/vtable",
"email": "[email protected]"
}
11 changes: 11 additions & 0 deletions common/changes/@visactor/vtable/fix_drag_select_2023-11-06-11-00.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"changes": [
{
"comment": "fix: select border render error when frozen bottom row #508\n\n",
"type": "patch",
"packageName": "@visactor/vtable"
}
],
"packageName": "@visactor/vtable",
"email": "[email protected]"
}
4 changes: 3 additions & 1 deletion packages/vtable/examples/list/list.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -312,7 +312,9 @@ export function createTable() {
tooltip: {
isShowOverflowTextTooltip: true
},
frozenColCount: 1
frozenColCount: 1,
bottomFrozenRowCount: 2,
rightFrozenColCount: 2
// autoWrapText: true,
// heightMode: 'autoHeight',
// widthMode: 'adaptive'
Expand Down
139 changes: 71 additions & 68 deletions packages/vtable/src/PivotChart.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1010,82 +1010,85 @@ export class PivotChart extends BaseTable implements PivotChartAPI {

getChartInstance(cellHeaderPaths: IPivotTableCellHeaderPaths) {
const cellAddr = this.getCellAddressByHeaderPaths(cellHeaderPaths);
const cellPosition = this.getCellRelativeRect(cellAddr.col, cellAddr.row);
const cellGroup = this.scenegraph.getCell(cellAddr.col, cellAddr.row);
// let position;
let chartInstance: any;
const chartNode: Chart = cellGroup?.getChildren()?.[0] as Chart;
if (chartNode.attribute.chartInstance) {
chartInstance = chartNode.attribute.chartInstance;
const { dataId, data, axes, spec } = chartNode.attribute;
const viewBox = chartNode.getViewBox();
axes.forEach((axis: any, index: number) => {
if (axis.type === 'linear') {
const chartAxis = chartInstance._chart._components[index];
chartAxis._domain = {
min: axis.range?.min ?? 0,
max: axis.range?.max ?? 0
};
} else if (axis.type === 'band') {
const chartAxis = chartInstance._chart._components[index];
chartAxis._spec.domain = axis.domain.slice(0);
chartAxis.updateScaleDomain();
}
});
if (cellAddr) {
const cellPosition = this.getCellRelativeRect(cellAddr.col, cellAddr.row);
const cellGroup = this.scenegraph.getCell(cellAddr.col, cellAddr.row);
// let position;
let chartInstance: any;
const chartNode: Chart = cellGroup?.getChildren()?.[0] as Chart;
if (chartNode.attribute.chartInstance) {
chartInstance = chartNode.attribute.chartInstance;
const { dataId, data, axes, spec } = chartNode.attribute;
const viewBox = chartNode.getViewBox();
axes.forEach((axis: any, index: number) => {
if (axis.type === 'linear') {
const chartAxis = chartInstance._chart._components[index];
chartAxis._domain = {
min: axis.range?.min ?? 0,
max: axis.range?.max ?? 0
};
} else if (axis.type === 'band') {
const chartAxis = chartInstance._chart._components[index];
chartAxis._spec.domain = axis.domain.slice(0);
chartAxis.updateScaleDomain();
}
});

chartInstance.updateViewBox(
{
x1: viewBox.x1 - (chartNode.getRootNode() as any).table.scrollLeft,
x2: viewBox.x2 - (chartNode.getRootNode() as any).table.scrollLeft,
y1: viewBox.y1 - (chartNode.getRootNode() as any).table.scrollTop,
y2: viewBox.y2 - (chartNode.getRootNode() as any).table.scrollTop
},
false,
false
);
// chartInstance.updateDataSync(dataId, data);
if (typeof dataId === 'string') {
chartInstance.updateDataSync(dataId, data ?? []);
} else {
const dataBatch = [];
for (const dataIdStr in dataId) {
const dataIdAndField = dataId[dataIdStr];
const series = spec.series.find((item: any) => item?.data?.id === dataIdStr);
dataBatch.push({
id: dataIdStr,
values: dataIdAndField
? data?.filter((item: any) => {
return item.hasOwnProperty(dataIdAndField);
}) ?? []
: data ?? [],
fields: series?.data?.fields
});
// 判断是否有updateFullDataSync 木有的话 还是循环调用updateDataSync
if (!chartInstance.updateFullDataSync) {
chartInstance.updateDataSync(
dataIdStr,
dataIdAndField
chartInstance.updateViewBox(
{
x1: viewBox.x1 - (chartNode.getRootNode() as any).table.scrollLeft,
x2: viewBox.x2 - (chartNode.getRootNode() as any).table.scrollLeft,
y1: viewBox.y1 - (chartNode.getRootNode() as any).table.scrollTop,
y2: viewBox.y2 - (chartNode.getRootNode() as any).table.scrollTop
},
false,
false
);
// chartInstance.updateDataSync(dataId, data);
if (typeof dataId === 'string') {
chartInstance.updateDataSync(dataId, data ?? []);
} else {
const dataBatch = [];
for (const dataIdStr in dataId) {
const dataIdAndField = dataId[dataIdStr];
const series = spec.series.find((item: any) => item?.data?.id === dataIdStr);
dataBatch.push({
id: dataIdStr,
values: dataIdAndField
? data?.filter((item: any) => {
return item.hasOwnProperty(dataIdAndField);
}) ?? []
: data ?? []
);
: data ?? [],
fields: series?.data?.fields
});
// 判断是否有updateFullDataSync 木有的话 还是循环调用updateDataSync
if (!chartInstance.updateFullDataSync) {
chartInstance.updateDataSync(
dataIdStr,
dataIdAndField
? data?.filter((item: any) => {
return item.hasOwnProperty(dataIdAndField);
}) ?? []
: data ?? []
);
}
}
chartInstance.updateFullDataSync?.(dataBatch);
}
chartInstance.updateFullDataSync?.(dataBatch);
// position = chartInstance.convertDatumToPosition(datum);
this.render();
}
// position = chartInstance.convertDatumToPosition(datum);
this.render();
// cellPosition.offsetLeft(this.tableX);
// cellPosition.offsetTop(this.tableY);
return {
chartInstance,
bounds: cellPosition.bounds
};
// return position
// ? { x: Math.round(position.x + cellPosition.bounds.x1), y: Math.round(position.y + cellPosition.bounds.y1) }
// : null;
}
// cellPosition.offsetLeft(this.tableX);
// cellPosition.offsetTop(this.tableY);
return {
chartInstance,
bounds: cellPosition.bounds
};
// return position
// ? { x: Math.round(position.x + cellPosition.bounds.x1), y: Math.round(position.y + cellPosition.bounds.y1) }
// : null;
return {};
}

_getDimensionSortArray(): string[] | undefined {
Expand Down
2 changes: 1 addition & 1 deletion packages/vtable/src/components/menu/dom/logic/MenuElementStyle.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,5 +95,5 @@ export function importStyle() {
}
`;

document.body.appendChild(styleElement);
document.head.appendChild(styleElement);
}
2 changes: 1 addition & 1 deletion packages/vtable/src/components/tooltip/logic/BubbleTooltipElementStyle.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,5 +72,5 @@ export function importStyle() {
}
`;

document.body.appendChild(styleElement);
document.head.appendChild(styleElement);
}
56 changes: 56 additions & 0 deletions packages/vtable/src/core/BaseTable.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1607,6 +1607,62 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI {
}
return count;
}
/** 获取表格body部分的显示单元格范围 */
getBodyVisibleCellRange() {
const { scrollTop, scrollLeft } = this;
const frozenRowsHeight = this.getFrozenRowsHeight();
const frozenColsWidth = this.getFrozenColsWidth();
const bottomFrozenRowsHeight = this.getBottomFrozenRowsHeight();
const rightFrozenColsWidth = this.getRightFrozenColsWidth();
// 计算非冻结
const { row: rowStart } = this.getRowAt(scrollTop + frozenRowsHeight + 1);
const { col: colStart } = this.getColAt(scrollLeft + frozenColsWidth + 1);
const rowEnd =
this.getAllRowsHeight() > this.tableNoFrameHeight
? this.getRowAt(scrollTop + this.tableNoFrameHeight - 1 - bottomFrozenRowsHeight).row
: this.rowCount - 1;
const colEnd =
this.getAllColsWidth() > this.tableNoFrameWidth
? this.getColAt(scrollLeft + this.tableNoFrameWidth - 1 - rightFrozenColsWidth).col
: this.colCount - 1;
if (colEnd < 0 || rowEnd < 0) {
return null;
}
return { rowStart, colStart, rowEnd, colEnd };
}
/** 获取表格body部分的显示行号范围 */
getBodyVisibleRowRange() {
const { scrollTop } = this;
const frozenRowsHeight = this.getFrozenRowsHeight();
const bottomFrozenRowsHeight = this.getBottomFrozenRowsHeight();
// 计算非冻结
const { row: rowStart } = this.getRowAt(scrollTop + frozenRowsHeight + 1);
const rowEnd =
this.getAllRowsHeight() > this.tableNoFrameHeight
? this.getRowAt(scrollTop + this.tableNoFrameHeight - 1 - bottomFrozenRowsHeight).row
: this.rowCount - 1;
if (rowEnd < 0) {
return null;
}
return { rowStart, rowEnd };
}
/** 获取表格body部分的显示列号范围 */
getBodyVisibleColRange() {
const { scrollLeft } = this;
const frozenColsWidth = this.getFrozenColsWidth();
const rightFrozenColsWidth = this.getRightFrozenColsWidth();
// 计算非冻结
const { col: colStart } = this.getColAt(scrollLeft + frozenColsWidth + 1);

const colEnd =
this.getAllColsWidth() > this.tableNoFrameWidth
? this.getColAt(scrollLeft + this.tableNoFrameWidth - 1 - rightFrozenColsWidth).col
: this.colCount - 1;
if (colEnd < 0) {
return null;
}
return { colStart, colEnd };
}
/**
* 获取表格中完全可见的可滚动列数。不包括表头及冻结的列
* @returns {number}
Expand Down
2 changes: 1 addition & 1 deletion packages/vtable/src/core/style.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,5 +70,5 @@ export function importStyle() {
}
`;

document.body.appendChild(styleElement);
document.head.appendChild(styleElement);
}
14 changes: 12 additions & 2 deletions packages/vtable/src/event/event.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,7 @@ export class EventManeger {
// menu自身状态实现
}

dealTableSelect(eventArgsSet?: SceneEvent): boolean {
dealTableSelect(eventArgsSet?: SceneEvent, isSelectMoving?: boolean): boolean {
if (!eventArgsSet) {
this.table.stateManeger.updateSelectPos(-1, -1);
return false;
Expand All @@ -181,9 +181,19 @@ export class EventManeger {
// this.table.stateManeger.updateHoverPos(-1, -1);
// }
const define = this.table.getBodyColumnDefine(eventArgs.col, eventArgs.row);
if (this.table.isHeader(eventArgs.col, eventArgs.row) && define?.disableHeaderSelect) {
if (
this.table.isHeader(eventArgs.col, eventArgs.row) &&
(define?.disableHeaderSelect || this.table.stateManeger.select?.disableHeader)
) {
if (!isSelectMoving) {
// 如果是点击点表头 取消单元格选中状态
this.table.stateManeger.updateSelectPos(-1, -1);
}
return false;
} else if (!this.table.isHeader(eventArgs.col, eventArgs.row) && define?.disableSelect) {
if (!isSelectMoving) {
this.table.stateManeger.updateSelectPos(-1, -1);
}
return false;
}

Expand Down
19 changes: 12 additions & 7 deletions packages/vtable/src/event/listener/table-group.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,6 @@ export function bindTableGroupListener(eventManeger: EventManeger) {
}
});
table.scenegraph.tableGroup.addEventListener('pointermove', (e: FederatedPointerEvent) => {
// console.log('scenegraph pointermove', e.pageX, e.pageY);
const lastX = LastPointerXY?.x ?? e.x;
const lastY = LastPointerXY?.y ?? e.y;
LastPointerXY = { x: e.x, y: e.y };
Expand All @@ -66,7 +65,7 @@ export function bindTableGroupListener(eventManeger: EventManeger) {
} else if (stateManeger.isMoveCol()) {
eventManeger.dealColumnMover(eventArgsSet);
} else {
eventManeger.dealTableSelect(eventArgsSet);
eventManeger.dealTableSelect(eventArgsSet, true);
}
return;
}
Expand Down Expand Up @@ -237,7 +236,7 @@ export function bindTableGroupListener(eventManeger: EventManeger) {
// });
table.scenegraph.tableGroup.addEventListener('pointerleave', (e: FederatedPointerEvent) => {
//resize 列宽 当鼠标离开table也需要继续响应
if (!stateManeger.isResizeCol()) {
if (!stateManeger.isResizeCol() && !stateManeger.isMoveCol() && !stateManeger.isSelecting()) {
stateManeger.updateInteractionState(InteractionState.default);
stateManeger.updateCursor();
}
Expand Down Expand Up @@ -278,12 +277,17 @@ export function bindTableGroupListener(eventManeger: EventManeger) {
}
}
} else if (stateManeger.isSelecting()) {
table.stateManeger.endSelectCells();
// 下面触发DRAG_SELECT_END 区别于pointerup
// 下面触发DRAG_SELECT_END 区别于pointerup 不能调用endSelectCells
// table.stateManeger.endSelectCells();
if (table.stateManeger.select?.ranges?.length) {
const lastCol = table.stateManeger.select.ranges[table.stateManeger.select.ranges.length - 1].end.col;
const lastRow = table.stateManeger.select.ranges[table.stateManeger.select.ranges.length - 1].end.row;

table.stateManeger.select.selecting = false;
table.fireListeners(TABLE_EVENT_TYPE.SELECTED_CELL, {
ranges: table.stateManeger.select.ranges,
col: lastCol,
row: lastRow
});
if ((table as any).hasListeners(TABLE_EVENT_TYPE.DRAG_SELECT_END)) {
const cellsEvent: MousePointerMultiCellEvent = {
event: e.nativeEvent,
Expand Down Expand Up @@ -568,7 +572,8 @@ export function bindTableGroupListener(eventManeger: EventManeger) {
if (
target &&
!target.isDescendantsOf(table.scenegraph.tableGroup) &&
(target as any) !== table.scenegraph.tableGroup
(target as any) !== table.scenegraph.tableGroup &&
(target as any) !== table.scenegraph.stage
) {
stateManeger.updateInteractionState(InteractionState.default);
eventManeger.dealTableHover();
Expand Down
7 changes: 5 additions & 2 deletions packages/vtable/src/scenegraph/group-creater/init-scenegraph.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,10 +65,13 @@ export function initSceneGraph(scene: Scenegraph) {
}

scene.tableGroup.addChild(bodyGroup);
scene.tableGroup.addChild(rightFrozenGroup);
scene.tableGroup.addChild(bottomFrozenGroup);
//注意这块添加的顺序 会影响select框选效果 有可能引起框选框覆盖其他部分group的问题 具体问题出在update-select-border文件中的updateComponent方法
scene.tableGroup.addChild(rowHeaderGroup);
scene.tableGroup.addChild(bottomFrozenGroup);

scene.tableGroup.addChild(colHeaderGroup);
scene.tableGroup.addChild(rightFrozenGroup);

scene.tableGroup.addChild(rightBottomCornerGroup);
scene.tableGroup.addChild(rightTopCornerGroup);
scene.tableGroup.addChild(leftBottomCornerGroup);
Expand Down
Loading

0 comments on commit 89824b7

Please sign in to comment.