Skip to content

Commit

Permalink
Merge pull request #29 from lineupjs/sgratzl/frozenshift
Browse files Browse the repository at this point in the history
fix shifting of frozen columns
  • Loading branch information
sgratzl authored Mar 23, 2021
2 parents 4587403 + 35fbabd commit 7dcbe25
Show file tree
Hide file tree
Showing 8 changed files with 712 additions and 622 deletions.
31 changes: 31 additions & 0 deletions demo/frozen.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title>Engine test</title>
<link href="./frozen.css" rel="stylesheet" />
<style>
.lineup-engine {
height: 90vh;
max-width: 100vw;
}
.le-tr {
margin-top: 2px;
}
.le-frozen {
background: red !important;
}
</style>
</head>
<body>
<script src="./frozen.js"></script>
<div></div>
<script>
(function () {
const test = new lineupengine.default(document.querySelector('div'), 'asdf');

test.run();
})();
</script>
</body>
</html>
60 changes: 60 additions & 0 deletions demo/frozen.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
/* eslint-disable class-methods-use-this */
import { ACellRenderer, ICellRenderContext, PrefetchMixin, uniformContext, nonUniformContext } from '../src';
import Column from './column';

/** @internal */
export default class TestRenderer extends ACellRenderer<Column<number>> {
protected readonly privateContext: ICellRenderContext<Column<number>>;

constructor(root: HTMLElement, id: string, numberOfRows = 1000, numberOfColumns = 15) {
super(root, `#${id}`, { mixins: [], striped: true });
// eslint-disable-next-line no-param-reassign
root.id = id;

const defaultRowHeight = 20;

const columns: Column<number>[] = [];
for (let i = 0; i < numberOfColumns; i += 1) {
columns.push(new Column(i, i.toString(36), i < 2, i > 3 ? 500 : 100));
}
this.privateContext = {
columns,
column: nonUniformContext(
columns.map((d) => d.width),
100
),
...uniformContext(numberOfRows, defaultRowHeight),
};
}

protected createHeader(doc: Document, column: Column<number>): HTMLElement {
return column.header(doc);
}

protected updateHeader(): void {
// nothing do to
}

protected createCell(doc: Document, index: number, column: Column<number>): HTMLElement {
return column.cell(index, doc);
}

protected updateCell(node: HTMLElement, index: number, column: Column<number>): HTMLElement {
return column.update(node, index);
}

run(): void {
// wait till layouted
setTimeout(super.init.bind(this), 100);
}

protected get context(): ICellRenderContext<Column<number>> {
return this.privateContext;
}

// protected updateRow(node: HTMLElement, index: number) {
// // return abortAble(resolveIn(2000)).then(() => {
// super.updateRow(node, index);
// // });
// }
}
35 changes: 17 additions & 18 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@
"unpkg": "build/lineupengine.js",
"jsdelivr": "build/lineupengine.js",
"types": "build/src/index.d.ts",
"exports": "./build/src/index.js",
"sideEffects": [
"*.scss",
"*.css"
Expand Down Expand Up @@ -64,41 +63,41 @@
"release:pre": "release-it --disable-metrics --npm.skipChecks --preRelease=alpha --npm.tag=next"
},
"devDependencies": {
"@types/jest": "^26.0.20",
"@typescript-eslint/eslint-plugin": "^4.15.2",
"@typescript-eslint/parser": "^4.15.2",
"@types/jest": "^26.0.21",
"@typescript-eslint/eslint-plugin": "^4.19.0",
"@typescript-eslint/parser": "^4.19.0",
"@yarnpkg/pnpify": "^2.4.0",
"css-loader": "^5.0.2",
"eslint": "^7.20.0",
"css-loader": "^5.1.3",
"eslint": "^7.22.0",
"eslint-config-airbnb-typescript": "^12.3.1",
"eslint-config-prettier": "^8.1.0",
"eslint-config-react-app": "^6.0.0",
"eslint-plugin-flowtype": "^5.3.1",
"eslint-plugin-flowtype": "^5.4.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0",
"fork-ts-checker-webpack-plugin": "^6.1.0",
"fork-ts-checker-webpack-plugin": "^6.2.0",
"jest": "^26.6.3",
"mini-css-extract-plugin": "^1.3.8",
"mini-css-extract-plugin": "^1.3.9",
"mkdirp": "^1.0.4",
"prettier": "^2.2.1",
"release-it": "^14.4.1",
"release-it": "^14.5.0",
"rimraf": "^3.0.2",
"sass": "^1.32.8",
"sass-loader": "^11.0.1",
"style-loader": "^2.0.0",
"stylelint": "^13.11.0",
"stylelint-config-standard": "^20.0.0",
"stylelint-prettier": "^1.1.2",
"stylelint": "^13.12.0",
"stylelint-config-standard": "^21.0.0",
"stylelint-prettier": "^1.2.0",
"stylelint-scss": "^3.19.0",
"thread-loader": "^3.0.1",
"ts-jest": "^26.5.2",
"ts-loader": "^8.0.17",
"typedoc": "^0.20.28",
"typescript": "~4.1.5",
"webpack": "^5.24.2",
"ts-jest": "^26.5.4",
"ts-loader": "^8.0.18",
"typedoc": "^0.20.33",
"typescript": "^4.2.3",
"webpack": "^5.27.2",
"webpack-cli": "^4.5.0",
"webpack-dev-server": "^3.11.2"
},
Expand Down
8 changes: 4 additions & 4 deletions src/ACellRenderer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
/* eslint-disable max-classes-per-file */
import { IAbortAblePromise, IAsyncUpdate } from './abortAble';
import { IAnimationContext } from './animation';
import { ARowRenderer, IRowRendererOptions } from './ARowRenderer';
import { ARowRenderer, IRowRendererOptions, setTransform } from './ARowRenderer';
import { addScroll } from './internal';
import { EScrollResult, IMixinClass } from './mixin';
import { GridStyleManager, IColumn, setTemplate } from './style';
Expand Down Expand Up @@ -212,7 +212,7 @@ export abstract class ACellRenderer<T extends IColumn> extends ARowRenderer {
context.defaultRowHeight - context.padding(-1),
context.columns,
context.column.padding,
-this.cell.leftShift(),
0,
this.idPrefix
);
}
Expand All @@ -229,8 +229,8 @@ export abstract class ACellRenderer<T extends IColumn> extends ARowRenderer {
).toFixed(0)}px)`;
}

protected updateShifts(top: number, left: number): void {
this.body.style.transform = `translate(${left.toFixed(0)}px, ${top.toFixed(0)}px)`;
protected updateShifts(top: number, _left: number): void {
setTransform(this.body, 0 /* left.toFixed(0) */, top.toFixed(0));
}

/**
Expand Down
2 changes: 1 addition & 1 deletion src/table/ACellTableSection.ts
Original file line number Diff line number Diff line change
Expand Up @@ -239,7 +239,7 @@ export abstract class ACellTableSection<T extends IColumn> extends ARowRenderer
context.defaultRowHeight - context.padding(-1),
context.columns,
context.column.padding,
-this.cell.leftShift(),
0,
this.tableId
);
}
Expand Down
17 changes: 12 additions & 5 deletions src/table/internal/ACellAdapter.ts
Original file line number Diff line number Diff line change
Expand Up @@ -426,7 +426,7 @@ export abstract class ACellAdapter<T extends IColumn> {
context.defaultRowHeight - context.padding(-1),
context.columns,
context.column.padding,
-this.leftShift(),
0,
this.tableId
);

Expand Down Expand Up @@ -502,7 +502,7 @@ export abstract class ACellAdapter<T extends IColumn> {
context.defaultRowHeight - context.padding(-1),
context.columns,
context.column.padding,
-this.leftShift(),
0,
this.tableId
);
}
Expand Down Expand Up @@ -698,20 +698,27 @@ export abstract class ACellAdapter<T extends IColumn> {

if (first > visible.last || last < visible.first) {
// no overlap, clean and draw everything
// console.log(`ff added: ${last - first + 1} removed: ${visibleLast - visibleFirst + 1} ${first}:${last} ${offset}`);
// console.log(
// `ff added: ${last - first + 1} removed: ${visible.last - visible.first + 1} ${first}:${last} ${frozenShift}`
// );
// removeRows(visibleFirst, visibleLast);
this.removeAllColumns(false);
// this.updateShiftedStates();
this.addColumnAtEnd(first, last);
r = EScrollResult.ALL;
} else if (first < visible.first) {
// some first rows missing and some last rows to much
// console.log(`up added: ${visibleFirst - first + 1} removed: ${visibleLast - last + 1} ${first}:${last} ${offset}`);
// console.log(
// `up added: ${visible.first - first + 1} removed: ${visible.last - last + 1} ${first}:${last} ${frozenShift}`
// );
this.removeColumnFromEnd(last + 1, visible.last);
this.updateShiftedStates();
this.addColumnAtStart(first, visible.first - 1, frozenShift);
r = EScrollResult.SOME_TOP;
} else {
// console.log(`do added: ${last - visibleLast + 1} removed: ${first - visibleFirst + 1} ${first}:${last} ${offset}`);
// console.log(
// `do added: ${last - visible.last + 1} removed: ${first - visible.first + 1} ${first}:${last} ${frozenShift}`
// );
// some last rows missing and some first rows to much
this.removeColumnFromStart(visible.first, first - 1, frozenShift);
this.updateShiftedStates();
Expand Down
1 change: 1 addition & 0 deletions webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ module.exports = (_env, options) => {
: {
lineupengine: './src/index.ts',
demo: './demo/index.ts',
frozen: './demo/frozen.ts',
table: './demo/table.ts',
cell: './demo/cell.ts',
},
Expand Down
Loading

0 comments on commit 7dcbe25

Please sign in to comment.