@antv/s2-react
Version:
use S2 with react
130 lines • 6.25 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DragCopyPoint = void 0;
const tslib_1 = require("tslib");
const s2_1 = require("@antv/s2");
const lodash_1 = require("lodash");
const react_1 = tslib_1.__importDefault(require("react"));
const SpreadSheetContext_1 = require("../../../../context/SpreadSheetContext");
const hooks_1 = require("../../../../hooks");
const drag_copy_mask_1 = require("./drag-copy-mask");
require("./drag-copy-point.less");
exports.DragCopyPoint = react_1.default.memo(() => {
const spreadsheet = (0, SpreadSheetContext_1.useSpreadSheetInstance)();
const [scroll, setScroll] = react_1.default.useState({
scrollX: -999,
scrollY: -999,
width: 8,
overflow: true,
});
const [position, setPosition] = react_1.default.useState({ left: -999, top: -999 });
const [cell, setCell] = react_1.default.useState();
const handleScroll = () => {
if (spreadsheet) {
const newScroll = spreadsheet.facet.getScrollOffset();
const frozenGroupAreas = spreadsheet.facet
.frozenGroupAreas;
const rect = spreadsheet.getCanvasElement().getBoundingClientRect();
const cellMeta = cell === null || cell === void 0 ? void 0 : cell.getMeta();
if (!(0, lodash_1.isEqual)(newScroll, scroll)) {
// 超出可视区域隐藏point
if (cellMeta) {
const { verticalBorderWidth: vWidth = 0, horizontalBorderWidth: hWidth = 0, } = cell.getStyle().cell;
// 确定点位
const pointX = cellMeta.width + cellMeta.x;
const pointY = cellMeta.height + cellMeta.y;
// 计算点位的偏移量
const pointWidth = pointX - newScroll.scrollX - rect.width + (vWidth + hWidth) * 2;
let overflow = true;
if (frozenGroupAreas[s2_1.FrozenGroupArea.Col].width >=
pointX - newScroll.scrollX - hWidth * 2 ||
frozenGroupAreas[s2_1.FrozenGroupArea.Row].height >=
pointY - newScroll.scrollY - vWidth * 2 ||
rect.width <= pointX - newScroll.scrollX - hWidth * 2 ||
rect.height <=
pointY -
newScroll.scrollY +
frozenGroupAreas[s2_1.FrozenGroupArea.Row].height) {
overflow = true;
}
else {
overflow = false;
}
setScroll(Object.assign(Object.assign({}, newScroll), { overflow, width: 8 - (pointWidth > 0 ? pointWidth : 0) }));
}
else {
setScroll({ scrollX: -999, scrollY: -999, overflow: true });
}
}
}
};
const fixPosition = (event) => {
const eventCell = spreadsheet.getCell(event.target);
const isEventCellSelected = spreadsheet.interaction.isSelectedCell(eventCell);
// 如果点击单元格时，单元格取消选中，隐藏拖拽点
if (isEventCellSelected) {
setCell(eventCell);
}
else {
setCell(undefined);
}
};
react_1.default.useEffect(() => {
handleScroll();
if (spreadsheet) {
spreadsheet.off(s2_1.S2Event.GLOBAL_SCROLL, handleScroll);
spreadsheet.on(s2_1.S2Event.GLOBAL_SCROLL, handleScroll);
}
return () => {
spreadsheet === null || spreadsheet === void 0 ? void 0 : spreadsheet.off(s2_1.S2Event.GLOBAL_SCROLL, handleScroll);
};
}, [cell]);
/** 单元格实例更改，选中态去除 */
react_1.default.useEffect(() => {
if (cell) {
setCell(undefined);
}
}, [spreadsheet === null || spreadsheet === void 0 ? void 0 : spreadsheet.dataSet.sortParams, spreadsheet === null || spreadsheet === void 0 ? void 0 : spreadsheet.dataSet.filterParams]);
react_1.default.useEffect(() => {
if (!(spreadsheet === null || spreadsheet === void 0 ? void 0 : spreadsheet.getCanvasElement())) {
return;
}
if (spreadsheet && cell) {
const sampleColNode = spreadsheet.facet.getColNodes()[0];
const sampleColNodeHeight = (sampleColNode === null || sampleColNode === void 0 ? void 0 : sampleColNode.height) || 0;
const cellMeta = (0, lodash_1.pick)(cell.getMeta(), [
'x',
'y',
'width',
'height',
'fieldValue',
]);
cellMeta.x -= scroll === null || scroll === void 0 ? void 0 : scroll.scrollX;
cellMeta.y -= (scroll === null || scroll === void 0 ? void 0 : scroll.scrollY) - sampleColNodeHeight;
setPosition({
left: cellMeta.x + cellMeta.width - 4,
top: cellMeta.y + cellMeta.height - 4,
});
}
}, [scroll, cell]);
/**
* 多选时隐藏拖拽点
*/
const batchSelected = react_1.default.useCallback(() => {
setCell(undefined);
}, []);
(0, hooks_1.useS2Event)(s2_1.S2Event.COL_CELL_CLICK, batchSelected, spreadsheet);
(0, hooks_1.useS2Event)(s2_1.S2Event.ROW_CELL_CLICK, batchSelected, spreadsheet);
(0, hooks_1.useS2Event)(s2_1.S2Event.CORNER_CELL_CLICK, batchSelected, spreadsheet);
(0, hooks_1.useS2Event)(s2_1.S2Event.DATA_CELL_BRUSH_SELECTION, batchSelected, spreadsheet);
(0, hooks_1.useS2Event)(s2_1.S2Event.DATA_CELL_CLICK, fixPosition, spreadsheet);
return (react_1.default.createElement("div", { id: "spreadsheet-drag-copy-point", className: `${s2_1.S2_PREFIX_CLS}-drag-copy-point`, style: {
display: scroll.overflow ? 'none' : 'block',
left: position.left,
top: position.top,
width: scroll.width,
} },
react_1.default.createElement(drag_copy_mask_1.DragCopyMask, { onCopyFinished: batchSelected })));
});
exports.DragCopyPoint.displayName = 'DragCopyPoint';
//# sourceMappingURL=index.js.map