From 4238c1e097b3be2a24d146f261e7f0719b56a847 Mon Sep 17 00:00:00 2001 From: bennyboer Date: Wed, 3 Aug 2022 21:59:38 +0200 Subject: [PATCH 1/3] Added option to scrollbar options whether to render scrollbars over fixed areas --- src/renderer/canvas/canvas-renderer.ts | 1 + src/renderer/options/scrollbar.ts | 14 ++++++++++++++ 2 files changed, 15 insertions(+) diff --git a/src/renderer/canvas/canvas-renderer.ts b/src/renderer/canvas/canvas-renderer.ts index 3c23f24..eac9135 100644 --- a/src/renderer/canvas/canvas-renderer.ts +++ b/src/renderer/canvas/canvas-renderer.ts @@ -3042,6 +3042,7 @@ export class CanvasRenderer implements ITableEngineRenderer { const minScrollBarLength: number = scrollBarOptions.minLength; const scrollBarOffset: number = scrollBarOptions.offset; const cornerRadius: number = scrollBarOptions.cornerRadius; + const drawOverFixedAreas: boolean = scrollBarOptions.drawOverFixedAreas; const scrollableViewportSize: ISize = { width: diff --git a/src/renderer/options/scrollbar.ts b/src/renderer/options/scrollbar.ts index 94867c1..373a998 100644 --- a/src/renderer/options/scrollbar.ts +++ b/src/renderer/options/scrollbar.ts @@ -30,6 +30,8 @@ const DEFAULT_SCROLLBAR_COLOR: IColor = { alpha: 0.6, }; +const DEFAULT_DRAW_OVER_FIXED_AREAS: boolean = true; + /** * Options regarding the scrollbar to display. */ @@ -60,6 +62,11 @@ export interface IScrollBarOptions { * Radius of the scrollbars rounded corners. */ cornerRadius?: number; + + /** + * Whether to draw the scrollbars over the fixed areas of the table. + */ + drawOverFixedAreas?: boolean; } /** @@ -91,5 +98,12 @@ export const fillOptions = (options?: IScrollBarOptions) => { options.cornerRadius = DEFAULT_SCROLLBAR_RADIUS; } + if ( + options.drawOverFixedAreas === undefined || + options.drawOverFixedAreas === null + ) { + options.drawOverFixedAreas = DEFAULT_DRAW_OVER_FIXED_AREAS; + } + return options; }; From 6e0d6fc218e46975fdf712da8fe3cd0b1a140a02 Mon Sep 17 00:00:00 2001 From: bennyboer Date: Sun, 7 Aug 2022 20:35:34 +0200 Subject: [PATCH 2/3] Added mode to draw scrollbars over fixed areas --- src/renderer/canvas/canvas-renderer.ts | 96 ++++++++++++++++++-------- 1 file changed, 66 insertions(+), 30 deletions(-) diff --git a/src/renderer/canvas/canvas-renderer.ts b/src/renderer/canvas/canvas-renderer.ts index eac9135..9061c3d 100644 --- a/src/renderer/canvas/canvas-renderer.ts +++ b/src/renderer/canvas/canvas-renderer.ts @@ -1785,6 +1785,9 @@ export class CanvasRenderer implements ITableEngineRenderer { y: number, start: IScrollBarDragContext ): void { + const options = this._options.renderer.canvas.scrollBar; + const drawOverFixedAreas = options.drawOverFixedAreas; + const viewportSize = this.getViewportSize(); const fixedAreaInfos = this.getFixedAreaInfos(); const scrollableViewportSize: ISize = { @@ -1797,7 +1800,7 @@ export class CanvasRenderer implements ITableEngineRenderer { fixedAreaInfos.top.size - fixedAreaInfos.bottom.size, }; - const tableSize: ISize = { + const scrollableTableSize: ISize = { width: this._cellModel.getWidth() - fixedAreaInfos.left.size - @@ -1807,38 +1810,64 @@ export class CanvasRenderer implements ITableEngineRenderer { fixedAreaInfos.top.size - fixedAreaInfos.bottom.size, }; + const tableSize: ISize = { + width: this._cellModel.getWidth(), + height: this._cellModel.getHeight(), + }; + const scrollBarTableSize: ISize = { + width: drawOverFixedAreas + ? tableSize.width + : scrollableTableSize.width, + height: drawOverFixedAreas + ? tableSize.height + : scrollableTableSize.height, + }; + const scrollBarViewportSize: ISize = { + width: drawOverFixedAreas + ? viewportSize.width + : scrollableViewportSize.width, + height: drawOverFixedAreas + ? viewportSize.height + : scrollableViewportSize.height, + }; const currentScrollOffset = this._viewportScroller.getScrollOffset(); const updatedScrollOffset: IPoint = { ...currentScrollOffset, }; if (start.scrollVertically) { - // Normalize x and y coordinates for fixed rows/columns - y -= fixedAreaInfos.top.size; - const startY = start.startY - fixedAreaInfos.top.size; + let startY = start.startY; + if (!drawOverFixedAreas) { + // Normalize x and y coordinates for fixed rows/columns + y -= fixedAreaInfos.top.size; + startY -= fixedAreaInfos.top.size; + } const curY = startY + (y - startY) + start.offsetFromScrollBarStart; const maxY = - scrollableViewportSize.height - + scrollBarViewportSize.height - this._lastRenderingContext.scrollBar.vertical.length; updatedScrollOffset.y = (curY / maxY) * - (tableSize.height - scrollableViewportSize.height); + (scrollBarTableSize.height - scrollBarViewportSize.height); } if (start.scrollHorizontally) { - // Normalize x and y coordinates for fixed rows/columns - x -= fixedAreaInfos.left.size; - const startX = start.startX - fixedAreaInfos.left.size; + let startX = start.startX; + if (!drawOverFixedAreas) { + // Normalize x and y coordinates for fixed rows/columns + x -= fixedAreaInfos.left.size; + startX -= fixedAreaInfos.left.size; + } const curX = startX + (x - startX) + start.offsetFromScrollBarStart; const maxX = - scrollableViewportSize.width - + scrollBarViewportSize.width - this._lastRenderingContext.scrollBar.horizontal.length; updatedScrollOffset.x = (curX / maxX) * - (tableSize.width - scrollableViewportSize.width); + (scrollBarTableSize.width - scrollBarViewportSize.width); } if ( @@ -3054,7 +3083,7 @@ export class CanvasRenderer implements ITableEngineRenderer { fixedAreaInfos.top.size - fixedAreaInfos.bottom.size, }; - const tableSize: ISize = { + const scrollableTableSize: ISize = { width: this._cellModel.getWidth() - fixedAreaInfos.left.size - @@ -3064,20 +3093,31 @@ export class CanvasRenderer implements ITableEngineRenderer { fixedAreaInfos.top.size - fixedAreaInfos.bottom.size, }; + const scrollBarViewportSize: ISize = { + width: drawOverFixedAreas + ? viewPort.width + : scrollableViewportSize.width, + height: drawOverFixedAreas + ? viewPort.height + : scrollableViewportSize.height, + }; const maxVerticalOffset: number = - tableSize.height - scrollableViewportSize.height; + scrollableTableSize.height - scrollableViewportSize.height; const maxHorizontalOffset: number = - tableSize.width - scrollableViewportSize.width; + scrollableTableSize.width - scrollableViewportSize.width; const currentScrollOffset = this._viewportScroller.getScrollOffset(); + const xOffset = drawOverFixedAreas ? 0 : fixedAreaInfos.left.size; + const yOffset = drawOverFixedAreas ? 0 : fixedAreaInfos.top.size; + // Calculate vertical scrollbar layout let vertical: IScrollBarAxisRenderContext = null; - if (tableSize.height > scrollableViewportSize.height) { + if (scrollableTableSize.height > scrollableViewportSize.height) { const length = Math.max( - (scrollableViewportSize.height / tableSize.height) * - scrollableViewportSize.height, + (scrollableViewportSize.height / scrollableTableSize.height) * + scrollBarViewportSize.height, minScrollBarLength ); const progress = currentScrollOffset.y / maxVerticalOffset; @@ -3086,22 +3126,20 @@ export class CanvasRenderer implements ITableEngineRenderer { size: scrollBarSize, length, x: - Math.min(scrollableViewportSize.width, tableSize.width) - + scrollBarViewportSize.width - scrollBarSize - scrollBarOffset + - fixedAreaInfos.left.size, - y: - (scrollableViewportSize.height - length) * progress + - fixedAreaInfos.top.size, + xOffset, + y: (scrollBarViewportSize.height - length) * progress + yOffset, }; } // Calculate horizontal scrollbar layout let horizontal: IScrollBarAxisRenderContext = null; - if (tableSize.width > scrollableViewportSize.width) { + if (scrollableTableSize.width > scrollableViewportSize.width) { const length = Math.max( - (scrollableViewportSize.width / tableSize.width) * - scrollableViewportSize.width, + (scrollableViewportSize.width / scrollableTableSize.width) * + scrollBarViewportSize.width, minScrollBarLength ); const progress = currentScrollOffset.x / maxHorizontalOffset; @@ -3109,14 +3147,12 @@ export class CanvasRenderer implements ITableEngineRenderer { horizontal = { size: scrollBarSize, length, - x: - (scrollableViewportSize.width - length) * progress + - fixedAreaInfos.left.size, + x: (scrollBarViewportSize.width - length) * progress + xOffset, y: - Math.min(scrollableViewportSize.height, tableSize.height) - + scrollBarViewportSize.height - scrollBarSize - scrollBarOffset + - fixedAreaInfos.top.size, + yOffset, }; } From 9eaea6dcca0a18f93cc155625c494e4390e6d7cf Mon Sep 17 00:00:00 2001 From: bennyboer Date: Sun, 7 Aug 2022 20:36:07 +0200 Subject: [PATCH 3/3] Pushing version to 0.2.2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 36ca4dd..63b3d6d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "table-engine", - "version": "0.2.1", + "version": "0.2.2", "description": "Library to visualize huge tables in web environments", "files": [ "lib/**/*"