Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: 添加显示选择框、显示行头、显示列头 三项配置项 #666

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

feat: 添加显示选择框、显示行头、显示列头 三项配置项 #666

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0384ccc
feat: 添加显示选择框、显示行头、显示列头 三项配置项
xurenda Sep 7, 2023
e921cdd
fix: d.ts
xurenda Sep 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion dist/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>x-spreadsheet</title>

<link href="xspreadsheet.css" rel="stylesheet"></head>
<body onload="load()">
<div style="position: fixed; right: 0; top: .3em;">
Expand Down Expand Up @@ -55,6 +54,10 @@
previewEl.height = 16

var xs = x_spreadsheet('#x-spreadsheet-demo', {
// mode: 'read',
// showSelect: false,
// showRowHeader: false,
// showColHeader: false,
showToolbar: true,
showGrid: true,
showBottomBar: true,
Expand Down Expand Up @@ -111,6 +114,8 @@
console.log('cell:', cell, ', ri:', ri, ', ci:', ci);
}).on('cell-edited', (text, ri, ci) => {
console.log('text:', text, ', ri: ', ri, ', ci:', ci);
}).on('pasted-clipboard', (data) => {
console.log('>>>> data is ', data);
});

setTimeout(() => {
Expand Down
2 changes: 1 addition & 1 deletion dist/xspreadsheet.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/xspreadsheet.js.map
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 4 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,10 @@
previewEl.height = 16

var xs = x_spreadsheet('#x-spreadsheet-demo', {
// mode: 'read',
// showSelect: false,
// showRowHeader: false,
// showColHeader: false,
showToolbar: true,
showGrid: true,
showBottomBar: true,
Expand Down
5 changes: 4 additions & 1 deletion src/component/selector.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -291,6 +291,7 @@ export default class Selector {

set(ri, ci, indexesUpdated = true) {
const { data } = this;
const { showSelect } = data.settings;
const cellRange = data.calSelectedRangeByStart(ri, ci);
const { sri, sci } = cellRange;
if (indexesUpdated) {
Expand All @@ -306,7 +307,9 @@ export default class Selector {
// this.eIndexes = eIndexes;
this.range = cellRange;
this.resetAreaOffset();
this.el.show();
if (showSelect) {
this.el.show();
}
}

setEnd(ri, ci, moving = true) {
Expand Down
27 changes: 16 additions & 11 deletions src/component/sheet.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,8 +67,12 @@ function scrollbarMove() {
}
}

function selectorSet(multiple, ri, ci, indexesUpdated = true, moving = false) {
function selectorSet(multiple, _ri, _ci, indexesUpdated = true, moving = false) {
const { showColHeader, showRowHeader } = this.data.settings;
const ri = (!showColHeader && _ri === -1) ? 0 : _ri;
const ci = (!showRowHeader && _ci === -1) ? 0 : _ci;
if (ri === -1 && ci === -1) return;

const {
table, selector, toolbar, data,
contextMenu,
Expand Down Expand Up @@ -136,15 +140,15 @@ function overlayerMousemove(evt) {
rowResizer, colResizer, tableEl, data,
} = this;
const { rows, cols } = data;
if (offsetX > cols.indexWidth && offsetY > rows.height) {
if (offsetX > data.getFw() && offsetY > data.getFh()) {
rowResizer.hide();
colResizer.hide();
return;
}
const tRect = tableEl.box();
const cRect = data.getCellRectByXY(evt.offsetX, evt.offsetY);
if (cRect.ri >= 0 && cRect.ci === -1) {
cRect.width = cols.indexWidth;
cRect.width = data.getFw();
rowResizer.show(cRect, {
width: tRect.width,
});
Expand All @@ -157,7 +161,7 @@ function overlayerMousemove(evt) {
rowResizer.hide();
}
if (cRect.ri === -1 && cRect.ci >= 0) {
cRect.height = rows.height;
cRect.height = data.getFh();
colResizer.show(cRect, {
height: tRect.height,
});
Expand Down Expand Up @@ -897,7 +901,7 @@ export default class Sheet {
// table
this.tableEl = h('canvas', `${cssPrefix}-table`);
// resizer
this.rowResizer = new Resizer(false, data.rows.height);
this.rowResizer = new Resizer(false, data.getFh());
this.colResizer = new Resizer(true, data.cols.minWidth);
// scrollbar
this.verticalScrollbar = new Scrollbar(true);
Expand All @@ -906,7 +910,7 @@ export default class Sheet {
this.editor = new Editor(
formulas,
() => this.getTableOffset(),
data.rows.height,
data.getFh(),
);
// data validation
this.modalValidation = new ModalValidation();
Expand Down Expand Up @@ -1001,13 +1005,14 @@ export default class Sheet {
}

getTableOffset() {
const { rows, cols } = this.data;
const fw = this.data.getFw();
const fh = this.data.getFh();
const { width, height } = this.getRect();
return {
width: width - cols.indexWidth,
height: height - rows.height,
left: cols.indexWidth,
top: rows.height,
width: width - fw,
height: height - fh,
left: fw,
top: fh,
};
}
}
14 changes: 7 additions & 7 deletions src/component/table.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,6 +186,7 @@ function renderSelectedHeaderCell(x, y, w, h) {
// ty: moving distance on y-axis
function renderFixedHeaders(type, viewRange, w, h, tx, ty) {
const { draw, data } = this;
const { showRowHeader, showColHeader } = data.settings;
const sumHeight = viewRange.h; // rows.sumHeight(viewRange.sri, viewRange.eri + 1);
const sumWidth = viewRange.w; // cols.sumWidth(viewRange.sci, viewRange.eci + 1);
const nty = ty + h;
Expand All @@ -194,8 +195,8 @@ function renderFixedHeaders(type, viewRange, w, h, tx, ty) {
draw.save();
// draw rect background
draw.attr(tableFixedHeaderCleanStyle);
if (type === 'all' || type === 'left') draw.fillRect(0, nty, w, sumHeight);
if (type === 'all' || type === 'top') draw.fillRect(ntx, 0, sumWidth, h);
if (showRowHeader && (type === 'all' || type === 'left')) draw.fillRect(0, nty, w, sumHeight);
if (showColHeader && (type === 'all' || type === 'top')) draw.fillRect(ntx, 0, sumWidth, h);

const {
sri, sci, eri, eci,
Expand All @@ -205,7 +206,7 @@ function renderFixedHeaders(type, viewRange, w, h, tx, ty) {
// text font, align...
draw.attr(tableFixedHeaderStyle());
// y-header-text
if (type === 'all' || type === 'left') {
if (showRowHeader && (type === 'all' || type === 'left')) {
data.rowEach(viewRange.sri, viewRange.eri, (i, y1, rowHeight) => {
const y = nty + y1;
const ii = i;
Expand All @@ -225,7 +226,7 @@ function renderFixedHeaders(type, viewRange, w, h, tx, ty) {
draw.line([w, nty], [w, sumHeight + nty]);
}
// x-header-text
if (type === 'all' || type === 'top') {
if (showColHeader && (type === 'all' || type === 'top')) {
data.colEach(viewRange.sci, viewRange.eci, (i, x1, colWidth) => {
const x = ntx + x1;
const ii = i;
Expand Down Expand Up @@ -314,11 +315,10 @@ class Table {
render() {
// resize canvas
const { data } = this;
const { rows, cols } = data;
// fixed width of header
const fw = cols.indexWidth;
const fw = data.getFw();
// fixed height of header
const fh = rows.height;
const fh = data.getFh();

this.draw.resize(data.viewWidth(), data.viewHeight());
this.clear();
Expand Down
33 changes: 25 additions & 8 deletions src/core/data_proxy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,9 +75,12 @@ const defaultSettings = {
width: () => document.documentElement.clientWidth,
},
showGrid: true,
showSelect: true,
showToolbar: true,
showContextmenu: true,
showBottomBar: true,
showRowHeader: true,
showColHeader: true,
row: {
len: 100,
height: 25,
Expand Down Expand Up @@ -277,8 +280,9 @@ function getCellRowByY(y, scrollOffsety) {
const { rows } = this;
const fsh = this.freezeTotalHeight();
// console.log('y:', y, ', fsh:', fsh);
let inits = rows.height;
if (fsh + rows.height < y) inits -= scrollOffsety;
const fh = this.getFh();
let inits = fh;
if (fsh + fh < y) inits -= scrollOffsety;

// handle ri in autofilter
const frset = this.exceptRowSet;
Expand Down Expand Up @@ -306,18 +310,19 @@ function getCellRowByY(y, scrollOffsety) {
function getCellColByX(x, scrollOffsetx) {
const { cols } = this;
const fsw = this.freezeTotalWidth();
let inits = cols.indexWidth;
if (fsw + cols.indexWidth < x) inits -= scrollOffsetx;
const fw = this.getFw();
let inits = fw;
if (fsw + fw < x) inits -= scrollOffsetx;
const [ci, left, width] = helper.rangeReduceIf(
0,
cols.len,
inits,
cols.indexWidth,
fw,
x,
i => cols.getWidth(i),
);
if (left <= 0) {
return { ci: -1, left: 0, width: cols.indexWidth };
return { ci: -1, left: 0, width: fw };
}
return { ci: ci - 1, left, width };
}
Expand Down Expand Up @@ -349,6 +354,18 @@ export default class DataProxy {
this.unsortedRowMap = new Map();
}

getFw() {
const { showRowHeader } = this.settings;
const val = this.cols.indexWidth;
return showRowHeader ? val : 0;
}

getFh() {
const { showColHeader } = this.settings;
const val = this.rows.height;
return showColHeader ? val : 0;
}

addValidation(mode, ref, validator) {
// console.log('mode:', mode, ', ref:', ref, ', validator:', validator);
this.changeData(() => {
Expand Down Expand Up @@ -663,8 +680,8 @@ export default class DataProxy {
const {
left, top, width, height,
} = this.getSelectedRect();
const x1 = x - this.cols.indexWidth;
const y1 = y - this.rows.height;
const x1 = x - this.getFw();
const y1 = y - this.getFh();
// console.log('x:', x, ',y:', y, 'left:', left, 'top:', top);
return x1 > left && x1 < (left + width)
&& y1 > top && y1 < (top + height);
Expand Down
3 changes: 3 additions & 0 deletions src/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,11 @@ declare module 'x-data-spreadsheet' {
mode?: 'edit' | 'read';
showToolbar?: boolean;
showGrid?: boolean;
showSelect?: boolean; // 显示选择框
showContextmenu?: boolean;
showBottomBar?: boolean;
showRowHeader: boolean, // 显示行头
showColHeader: boolean, // 显示列头
extendToolbar?: {
left?: ExtendToolbarOption[],
right?: ExtendToolbarOption[],
Expand Down