webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-07-30 04:23:11 +03:00
Code Activity

Lexical: Made table resize handles more efficent & less buggy

Browse Source 
Fine mouse movement and handles will now only be active when actually
within a table, otherwise less frequent mouseovers are used to track if
in/out a table.
Hides handles when out of a table, preventing a range of issues with
stray handles floating about.
This commit is contained in:
Dan Brown
2025-06-13 16:38:53 +01:00
parent fda242d3da
commit 717b516341
1 changed files with 36 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
resources/js/wysiwyg/ui/framework/helpers/table-resizer.ts
View File

@ -15,6 +15,7 @@ class TableResizer {
protected targetCell: HTMLElement|null = null;
protected xMarkerAtStart : boolean = false;
protected yMarkerAtStart : boolean = false;
protected activeInTable: boolean = false;
constructor(editor: LexicalEditor, editScrollContainer: HTMLElement) {
this.editor = editor;
@ -33,9 +34,10 @@ class TableResizer {
}
protected setupListeners() {
this.onTableMouseOver = this.onTableMouseOver.bind(this);
this.onCellMouseMove = this.onCellMouseMove.bind(this);
this.onScrollOrResize = this.onScrollOrResize.bind(this);
this.editScrollContainer.addEventListener('mousemove', this.onCellMouseMove);
this.editScrollContainer.addEventListener('mouseover', this.onTableMouseOver, { passive: true });
window.addEventListener('scroll', this.onScrollOrResize, {capture: true, passive: true});
window.addEventListener('resize', this.onScrollOrResize, {passive: true});
}
@ -44,8 +46,26 @@ class TableResizer {
this.updateCurrentMarkerTargetPosition();
}
protected onTableMouseOver(event: MouseEvent): void {
if (this.dragging) {
return;
}
const table = (event.target as HTMLElement).closest('table') as HTMLElement|null;
if (table && !this.activeInTable) {
this.editScrollContainer.addEventListener('mousemove', this.onCellMouseMove, { passive: true });
this.onCellMouseMove(event);
this.activeInTable = true;
} else if (!table && this.activeInTable) {
this.editScrollContainer.removeEventListener('mousemove', this.onCellMouseMove);
this.hideMarkers();
this.activeInTable = false;
}
}
protected onCellMouseMove(event: MouseEvent) {
const cell = (event.target as HTMLElement).closest('td,th') as HTMLElement;
const cell = (event.target as HTMLElement).closest('td,th') as HTMLElement|null;
if (!cell || this.dragging) {
return;
}
@ -66,10 +86,16 @@ class TableResizer {
protected updateMarkersTo(cell: HTMLElement, xPos: number, yPos: number) {
const markers: MarkerDomRecord = this.getMarkers();
const table = cell.closest('table') as HTMLElement;
const caption: HTMLTableCaptionElement|null = table.querySelector('caption');
const tableRect = table.getBoundingClientRect();
const editBounds = this.editScrollContainer.getBoundingClientRect();
const maxTop = Math.max(tableRect.top, editBounds.top);
let tableTop = tableRect.top;
if (caption) {
tableTop = caption.getBoundingClientRect().bottom;
}
const maxTop = Math.max(tableTop, editBounds.top);
const maxBottom = Math.min(tableRect.bottom, editBounds.bottom);
const maxHeight = maxBottom - maxTop;
markers.x.style.left = xPos + 'px';
@ -85,6 +111,13 @@ class TableResizer {
markers.x.hidden = tableRect.top > editBounds.bottom || tableRect.bottom < editBounds.top;
}
protected hideMarkers(): void {
if (this.markerDom) {
this.markerDom.x.hidden = true;
this.markerDom.y.hidden = true;
}
}
protected updateCurrentMarkerTargetPosition(): void {
if (!this.targetCell) {
return;