quill-table-up 2.0.2 → 2.0.3

package/src/modules/table-resize/table-resize-line.ts

@@ -0,0 +1,163 @@
+import type TableUp from '../..';
+import Quill from 'quill';
+import { type TableCellFormat, TableRowFormat } from '../../formats';
+import { blotName, createBEM, findParentBlot, findParentBlots } from '../../utils';
+import { TableResizeCommon } from './table-resize-common';
+import { isTableAlignRight } from './utils';
+
+export class TableResizeLine extends TableResizeCommon {
+  colResizer: HTMLElement;
+  rowResizer: HTMLElement;
+  currentTableCell?: HTMLElement;
+  dragging = false;
+
+  curColIndex: number = -1;
+  curRowIndex: number = -1;
+  tableCellBlot?: TableCellFormat;
+
+  bem = createBEM('resize-line');
+  constructor(public tableModule: TableUp, public table: HTMLElement, quill: Quill) {
+    super(tableModule, quill);
+    this.colResizer = this.tableModule.addContainer(this.bem.be('col'));
+    this.rowResizer = this.tableModule.addContainer(this.bem.be('row'));
+
+    this.table.addEventListener('mousemove', this.mousemoveHandler);
+    this.quill.on(Quill.events.TEXT_CHANGE, this.hideWhenTextChange);
+  }
+
+  mousemoveHandler = (e: MouseEvent) => {
+    if (this.dragging) return;
+    const tableCell = this.findTableCell(e);
+    if (!tableCell) {
+      return this.hide();
+    }
+    const tableCellBlot = Quill.find(tableCell) as TableCellFormat;
+    if (!tableCellBlot) return;
+    if (this.currentTableCell !== tableCell) {
+      this.show();
+      this.currentTableCell = tableCell;
+      this.tableCellBlot = tableCellBlot;
+      this.tableMain = findParentBlot(tableCellBlot, blotName.tableMain);
+      if (this.tableMain.getCols().length > 0) {
+        this.updateColResizer();
+      }
+      this.updateRowResizer();
+    }
+  };
+
+  hideWhenTextChange = () => {
+    this.hide();
+  };
+
+  findTableCell(e: MouseEvent) {
+    for (const el of e.composedPath()) {
+      if (el instanceof HTMLElement && el.tagName === 'TD') {
+        return el;
+      }
+      if (el === document.body) {
+        return null;
+      }
+    }
+    return null;
+  }
+
+  findCurrentColIndex() {
+    return this.curColIndex;
+  }
+
+  handleColMouseUpFunc = async function (this: TableResizeLine) {
+    await this.handleColMouseUp();
+    this.updateColResizer();
+  }.bind(this);
+
+  updateColResizer() {
+    if (!this.tableMain || !this.tableCellBlot) return;
+    const tableCellBlot = this.tableCellBlot;
+    this.tableModule.toolBox.removeChild(this.colResizer);
+    this.colResizer = this.tableModule.addContainer(this.bem.be('col'));
+
+    const [tableBodyBlot] = findParentBlots(tableCellBlot, [blotName.tableBody] as const);
+    const tableBodyect = tableBodyBlot.domNode.getBoundingClientRect();
+    const tableCellRect = tableCellBlot.domNode.getBoundingClientRect();
+    const rootRect = this.quill.root.getBoundingClientRect();
+    let left = tableCellRect.right - rootRect.x;
+    if (isTableAlignRight(this.tableMain)) {
+      left = tableCellRect.left - rootRect.x;
+    }
+    Object.assign(this.colResizer.style, {
+      top: `${tableBodyect.y - rootRect.y}px`,
+      left: `${left}px`,
+      height: `${tableBodyect.height}px`,
+    });
+
+    const cols = this.tableMain.getCols();
+    this.curColIndex = cols.findIndex(col => col.colId === tableCellBlot.colId);
+
+    this.colResizer.addEventListener('mousedown', this.handleColMouseDownFunc);
+    this.colResizer.addEventListener('dragstart', (e) => {
+      e.preventDefault();
+    });
+  }
+
+  findCurrentRowIndex() {
+    return this.curRowIndex;
+  }
+
+  handleRowMouseUpFunc = function (this: TableResizeLine) {
+    this.handleRowMouseUp();
+    this.updateRowResizer();
+  }.bind(this);
+
+  updateRowResizer() {
+    if (!this.tableMain || !this.tableCellBlot) return;
+    const tableCellBlot = this.tableCellBlot;
+    this.tableModule.toolBox.removeChild(this.rowResizer);
+    this.rowResizer = this.tableModule.addContainer(this.bem.be('row'));
+    const currentRow = tableCellBlot.parent;
+    if (!(currentRow instanceof TableRowFormat)) {
+      return;
+    }
+
+    const [tableBodyBlot] = findParentBlots(tableCellBlot, [blotName.tableBody] as const);
+    const tableBodynRect = tableBodyBlot.domNode.getBoundingClientRect();
+    const tableCellRect = tableCellBlot.domNode.getBoundingClientRect();
+    const rootRect = this.quill.root.getBoundingClientRect();
+    Object.assign(this.rowResizer.style, {
+      top: `${tableCellRect.bottom - rootRect.y}px`,
+      left: `${tableBodynRect.x - rootRect.x}px`,
+      width: `${tableBodynRect.width}px`,
+    });
+
+    const rows = this.tableMain.getRows();
+    this.curRowIndex = rows.indexOf(currentRow);
+
+    this.rowResizer.addEventListener('mousedown', this.handleRowMouseDownFunc);
+    this.rowResizer.addEventListener('dragstart', (e) => {
+      e.preventDefault();
+    });
+  }
+
+  show() {
+    Object.assign(this.colResizer.style, { display: null });
+    Object.assign(this.rowResizer.style, { display: null });
+  }
+
+  hide() {
+    this.currentTableCell = undefined;
+    this.rowResizer.style.display = 'none';
+    this.colResizer.style.display = 'none';
+  }
+
+  update() {
+    this.updateColResizer();
+    this.updateRowResizer();
+  }
+
+  destroy(): void {
+    this.colResizer.remove();
+    this.rowResizer.remove();
+
+    this.table.removeEventListener('mousemove', this.mousemoveHandler);
+    this.quill.off(Quill.events.TEXT_CHANGE, this.hideWhenTextChange);
+  }
+}

package/src/modules/table-resize/table-resize-scale.ts

@@ -0,0 +1,154 @@
+import type TableUp from '../..';
+import type { TableColFormat, TableMainFormat, TableRowFormat, TableWrapperFormat } from '../../formats';
+import type { TableResizeScaleOptions } from '../../utils';
+import Quill from 'quill';
+import { addScrollEvent, clearScrollEvent, createBEM, tableUpSize } from '../../utils';
+import { isTableAlignRight } from './utils';
+
+export class TableResizeScale {
+  scrollHandler: [HTMLElement, (e: Event) => void][] = [];
+  tableMainBlot: TableMainFormat | null = null;
+  tableWrapperBlot: TableWrapperFormat | null = null;
+  bem = createBEM('scale');
+  startX: number = 0;
+  startY: number = 0;
+  options: TableResizeScaleOptions;
+  root?: HTMLElement;
+  block?: HTMLElement;
+  resizeobserver: ResizeObserver = new ResizeObserver(() => this.update());
+  constructor(public tableModule: TableUp, public table: HTMLElement, public quill: Quill, options: Partial<TableResizeScaleOptions>) {
+    this.options = this.resolveOptions(options);
+    this.tableMainBlot = Quill.find(table) as TableMainFormat;
+
+    if (this.tableMainBlot && !this.tableMainBlot.full) {
+      this.tableWrapperBlot = this.tableMainBlot.parent as TableWrapperFormat;
+      this.buildResizer();
+      this.show();
+    }
+  }
+
+  resolveOptions(options: Partial<TableResizeScaleOptions>) {
+    return Object.assign({
+      blockSize: 12,
+    }, options);
+  }
+
+  buildResizer() {
+    if (!this.tableMainBlot || !this.tableWrapperBlot) return;
+    this.root = this.tableModule.addContainer(this.bem.b());
+    this.root.classList.add(this.bem.is('hidden'));
+    this.block = document.createElement('div');
+    this.block.classList.add(this.bem.be('block'));
+    Object.assign(this.block.style, {
+      width: `${this.options.blockSize}px`,
+      height: `${this.options.blockSize}px`,
+    });
+    this.root.appendChild(this.block);
+
+    let originColWidth: { blot: TableColFormat; width: number }[] = [];
+    let originRowHeight: { blot: TableRowFormat; height: number }[] = [];
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!this.tableMainBlot) return;
+      // divide equally by col count/row count
+      const isRight = isTableAlignRight(this.tableMainBlot) ? -1 : 1;
+      const diffX = (e.clientX - this.startX) * isRight;
+      const diffY = e.clientY - this.startY;
+      const itemWidth = Math.floor(diffX / originColWidth.length);
+      const itemHeight = Math.floor(diffY / originRowHeight.length);
+
+      for (const { blot, width } of originColWidth) {
+        blot.width = Math.max(width + itemWidth, tableUpSize.colMinWidthPx);
+      }
+      for (const { blot, height } of originRowHeight) {
+        blot.setHeight(`${Math.max(height + itemHeight, tableUpSize.rowMinHeightPx)}px`);
+      }
+    };
+    const handleMouseUp = () => {
+      originColWidth = [];
+      originRowHeight = [];
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+    this.block.addEventListener('mousedown', (e) => {
+      if (!this.tableMainBlot || this.isTableOutofEditor()) return;
+      this.startX = e.clientX;
+      this.startY = e.clientY;
+      // save the origin width and height to calculate result width and height
+      originColWidth = this.tableMainBlot.getCols().map(col => ({ blot: col, width: Math.floor(col.width) }));
+      originRowHeight = this.tableMainBlot.getRows().map(row => ({ blot: row, height: Math.floor(row.domNode.getBoundingClientRect().height) }));
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+    });
+    this.block.addEventListener('dragstart', e => e.preventDefault());
+
+    this.resizeobserver.observe(this.tableMainBlot.domNode);
+    addScrollEvent.call(this, this.quill.root, () => this.update());
+    addScrollEvent.call(this, this.tableWrapperBlot.domNode, () => this.update());
+  }
+
+  isTableOutofEditor(): boolean {
+    if (!this.tableMainBlot || !this.tableWrapperBlot || this.tableMainBlot.full) return false;
+    // if tableMain width larger than tableWrapper. reset tableMain width equal editor width
+    const tableRect = this.tableMainBlot.domNode.getBoundingClientRect();
+    const tableWrapperRect = this.tableWrapperBlot.domNode.getBoundingClientRect();
+    // equal scale
+    if (tableRect.width > tableWrapperRect.width) {
+      for (const col of this.tableMainBlot.getCols()) {
+        col.width = Math.floor((col.width / tableRect.width) * tableWrapperRect.width);
+      }
+      this.tableMainBlot.colWidthFillTable();
+      return true;
+    }
+    return false;
+  }
+
+  update() {
+    if (!this.block || !this.root || !this.tableMainBlot || !this.tableWrapperBlot) return false;
+    const tableRect = this.tableMainBlot.domNode.getBoundingClientRect();
+    const tableWrapperRect = this.tableWrapperBlot.domNode.getBoundingClientRect();
+    const editorRect = this.quill.root.getBoundingClientRect();
+    const { scrollTop, scrollLeft } = this.tableWrapperBlot.domNode;
+    const blockSize = this.options.blockSize * 2;
+    const rootWidth = Math.min(tableRect.width, tableWrapperRect.width) + blockSize;
+    const rootHeight = Math.min(tableRect.height, tableWrapperRect.height) + blockSize;
+    Object.assign(this.root.style, {
+      width: `${rootWidth}px`,
+      height: `${rootHeight}px`,
+      left: `${Math.max(tableRect.x, tableWrapperRect.x) - editorRect.x - this.options.blockSize}px`,
+      top: `${Math.max(tableRect.y, tableWrapperRect.y) - editorRect.y - this.options.blockSize}px`,
+    });
+    const blockStyle = {
+      left: `${tableRect.width + blockSize - scrollLeft}px`,
+      top: `${rootHeight - scrollTop}px`,
+    };
+    if (isTableAlignRight(this.tableMainBlot)) {
+      this.root.classList.add(this.bem.is('align-right'));
+      blockStyle.left = `${this.options.blockSize + -1 * scrollLeft}px`;
+    }
+    else {
+      this.root.classList.remove(this.bem.is('align-right'));
+    }
+    Object.assign(this.block.style, blockStyle);
+  }
+
+  show() {
+    if (this.root) {
+      this.root.classList.remove(this.bem.is('hidden'));
+      this.update();
+    }
+  }
+
+  hide() {
+    if (this.root) {
+      this.root.classList.add(this.bem.is('hidden'));
+    }
+  }
+
+  destroy() {
+    this.hide();
+    if (this.root) {
+      this.root.remove();
+    }
+    clearScrollEvent.call(this);
+  }
+}

package/src/modules/table-resize/utils.ts

@@ -0,0 +1,3 @@
+import type { TableMainFormat } from '../../formats';
+
+export const isTableAlignRight = (tableMainBlot: TableMainFormat) => !tableMainBlot.full && tableMainBlot.align === 'right';

package/src/modules/table-scrollbar.ts

@@ -0,0 +1,255 @@
+import type TableUp from '..';
+import type { TableMainFormat } from '../formats';
+import Quill from 'quill';
+import { addScrollEvent, clearScrollEvent, createBEM, debounce } from '../utils';
+
+export class Scrollbar {
+  minSize: number = 20;
+  gap: number = 4;
+  move: number = 0;
+  cursorDown: boolean = false;
+  cursorLeave: boolean = false;
+  ratioY: number = 1;
+  ratioX: number = 1;
+  sizeWidth: string = '';
+  sizeHeight: string = '';
+  size: string = '';
+  thumbState: {
+    X: number;
+    Y: number;
+  } = {
+      X: 0,
+      Y: 0,
+    };
+
+  ob: ResizeObserver;
+  container: HTMLElement;
+  scrollbar: HTMLElement;
+  thumb: HTMLElement = document.createElement('div');
+  scrollHandler: [HTMLElement, (e: Event) => void][] = [];
+  propertyMap: { readonly size: 'height'; readonly offset: 'offsetHeight'; readonly scrollDirection: 'scrollTop'; readonly scrollSize: 'scrollHeight'; readonly axis: 'Y'; readonly direction: 'top'; readonly client: 'clientY' } | { readonly size: 'width'; readonly offset: 'offsetWidth'; readonly scrollDirection: 'scrollLeft'; readonly scrollSize: 'scrollWidth'; readonly axis: 'X'; readonly direction: 'left'; readonly client: 'clientX' };
+  bem = createBEM('scrollbar');
+  constructor(public quill: Quill, public isVertical: boolean, public table: HTMLElement, public scrollbarContainer: HTMLElement) {
+    this.container = table.parentElement!;
+    this.propertyMap = this.isVertical
+      ? {
+          size: 'height',
+          offset: 'offsetHeight',
+          scrollDirection: 'scrollTop',
+          scrollSize: 'scrollHeight',
+          axis: 'Y',
+          direction: 'top',
+          client: 'clientY',
+        } as const
+      : {
+          size: 'width',
+          offset: 'offsetWidth',
+          scrollDirection: 'scrollLeft',
+          scrollSize: 'scrollWidth',
+          axis: 'X',
+          direction: 'left',
+          client: 'clientX',
+        } as const;
+    this.calculateSize();
+    this.ob = new ResizeObserver(() => {
+      this.update();
+    });
+    this.ob.observe(table);
+    this.scrollbar = this.createScrollbar();
+    this.setScrollbarPosition();
+    addScrollEvent.call(this, this.quill.root, () => this.setScrollbarPosition());
+    this.showScrollbar();
+  }
+
+  update() {
+    this.calculateSize();
+    this.setScrollbarPosition();
+  }
+
+  setScrollbarPosition() {
+    const { scrollLeft: editorScrollX, scrollTop: editorScrollY } = this.quill.root;
+    const { offsetLeft: containerOffsetLeft, offsetTop: containerOffsetTop } = this.container;
+    const { width: containerWidth, height: containerHeight } = this.container.getBoundingClientRect();
+    const { width: tableWidth, height: tableHeight } = this.table.getBoundingClientRect();
+
+    let x = containerOffsetLeft;
+    let y = containerOffsetTop;
+    if (this.isVertical) {
+      x += Math.min(containerWidth, tableWidth);
+    }
+    else {
+      y += Math.min(containerHeight, tableHeight);
+    }
+
+    // table align right effect
+    const tableMainBlot = Quill.find(this.table) as TableMainFormat | null;
+    if (tableMainBlot && tableMainBlot.align !== 'left') {
+      x += this.table.offsetLeft - containerOffsetLeft;
+    }
+
+    Object.assign(this.scrollbar.style, {
+      [this.propertyMap.size]: `${this.isVertical ? containerHeight : containerWidth}px`,
+      transform: `translate(${x - editorScrollX}px, ${y - editorScrollY}px)`,
+    });
+    this.containerScrollHandler(this.container);
+  }
+
+  calculateSize() {
+    const offsetHeight = this.container.offsetHeight - this.gap;
+    const offsetWidth = this.container.offsetWidth - this.gap;
+    const originalHeight = offsetHeight ** 2 / this.container.scrollHeight;
+    const originalWidth = offsetWidth ** 2 / this.container.scrollWidth;
+    const height = Math.max(originalHeight, this.minSize);
+    const width = Math.max(originalWidth, this.minSize);
+    this.ratioY = originalHeight / (offsetHeight - originalHeight) / (height / (offsetHeight - height));
+    this.ratioX = originalWidth / (offsetWidth - originalWidth) / (width / (offsetWidth - width));
+
+    this.sizeWidth = width + this.gap < offsetWidth ? `${width}px` : '';
+    this.sizeHeight = height + this.gap < offsetHeight ? `${height}px` : '';
+    this.size = this.isVertical ? this.sizeHeight : this.sizeWidth;
+  }
+
+  createScrollbar() {
+    const scrollbar = document.createElement('div');
+    scrollbar.classList.add(this.bem.b());
+    scrollbar.classList.add(this.isVertical ? this.bem.is('vertical') : this.bem.is('horizontal'), this.bem.is('transparent'));
+    Object.assign(scrollbar.style, {
+      display: 'none',
+    });
+    this.thumb.classList.add(this.bem.be('thumb'));
+
+    const mouseMoveDocumentHandler = (e: MouseEvent) => {
+      if (this.cursorDown === false) return;
+      const prevPage = this.thumbState[this.propertyMap.axis];
+      if (!prevPage) return;
+
+      const offsetRatio = this.scrollbar[this.propertyMap.offset] ** 2
+        / this.container[this.propertyMap.scrollSize] / (this.isVertical ? this.ratioY : this.ratioX)
+        / this.thumb[this.propertyMap.offset];
+      const offset = (this.scrollbar.getBoundingClientRect()[this.propertyMap.direction] - e[this.propertyMap.client]) * -1;
+      const thumbClickPosition = this.thumb[this.propertyMap.offset] - prevPage;
+      const thumbPositionPercentage = ((offset - thumbClickPosition) * 100 * offsetRatio) / this.scrollbar[this.propertyMap.offset];
+      this.container[this.propertyMap.scrollDirection] = (thumbPositionPercentage * this.container[this.propertyMap.scrollSize]) / 100;
+    };
+    const mouseUpDocumentHandler = () => {
+      this.thumbState[this.propertyMap.axis] = 0;
+      this.cursorDown = false;
+      document.removeEventListener('mousemove', mouseMoveDocumentHandler);
+      document.removeEventListener('mouseup', mouseUpDocumentHandler);
+      if (this.cursorLeave) {
+        this.hideScrollbar();
+      }
+    };
+    const startDrag = (e: MouseEvent) => {
+      e.stopImmediatePropagation();
+      this.cursorDown = true;
+      document.addEventListener('mousemove', mouseMoveDocumentHandler);
+      document.addEventListener('mouseup', mouseUpDocumentHandler);
+      // eslint-disable-next-line unicorn/prefer-add-event-listener
+      document.onselectstart = () => false;
+    };
+    this.thumb.addEventListener('mousedown', (e: MouseEvent) => {
+      e.stopPropagation();
+      if (e.ctrlKey || [1, 2].includes(e.button)) return;
+
+      window.getSelection()?.removeAllRanges();
+      startDrag(e);
+
+      const el = e.currentTarget as HTMLElement;
+      if (!el) return;
+      this.thumbState[this.propertyMap.axis] = el[this.propertyMap.offset] - (e[this.propertyMap.client] - el.getBoundingClientRect()[this.propertyMap.direction]);
+    });
+    const displayListener = [this.table, scrollbar];
+    for (const el of displayListener) {
+      el.addEventListener('mouseenter', this.showScrollbar);
+      el.addEventListener('mouseleave', this.hideScrollbar);
+    }
+
+    addScrollEvent.call(this, this.container, () => {
+      this.containerScrollHandler(this.container);
+    });
+
+    scrollbar.appendChild(this.thumb);
+    return scrollbar;
+  }
+
+  containerScrollHandler(wrap: HTMLElement) {
+    const offset = wrap[this.propertyMap.offset] - this.gap;
+    this.move = wrap[this.propertyMap.scrollDirection] * 100 / offset * (this.isVertical ? this.ratioY : this.ratioX);
+    Object.assign(this.thumb.style, {
+      [this.propertyMap.size]: this.size,
+      transform: `translate${this.propertyMap.axis}(${this.move}%)`,
+    });
+  }
+
+  showScrollbar = debounce(() => {
+    this.cursorLeave = false;
+    this.scrollbar.removeEventListener('transitionend', this.hideScrollbarTransitionend);
+    this.scrollbar.style.display = this.size ? 'block' : 'none';
+    requestAnimationFrame(() => {
+      this.scrollbar.classList.remove(this.bem.is('transparent'));
+    });
+  }, 200);
+
+  hideScrollbar = debounce(() => {
+    this.cursorLeave = true;
+    if (this.cursorDown) return;
+    this.scrollbar.removeEventListener('transitionend', this.hideScrollbarTransitionend);
+    this.scrollbar.addEventListener('transitionend', this.hideScrollbarTransitionend, { once: true });
+    this.scrollbar.classList.add(this.bem.is('transparent'));
+  }, 200);
+
+  hideScrollbarTransitionend = () => {
+    this.scrollbar.style.display = (this.cursorDown && this.size) ? 'block' : 'none';
+  };
+
+  destroy() {
+    this.ob.disconnect();
+    clearScrollEvent.call(this);
+    this.table.removeEventListener('mouseenter', this.showScrollbar);
+    this.table.removeEventListener('mouseleave', this.hideScrollbar);
+  }
+}
+export class TableVirtualScrollbar {
+  scrollbarContainer: HTMLElement;
+  scrollbar: Scrollbar[];
+  bem = createBEM('scrollbar');
+  constructor(public tableModule: TableUp, public table: HTMLElement, public quill: Quill) {
+    this.scrollbarContainer = this.tableModule.addContainer(this.bem.be('container'));
+
+    this.scrollbar = [
+      new Scrollbar(quill, true, table, this.scrollbarContainer),
+      new Scrollbar(quill, false, table, this.scrollbarContainer),
+    ];
+    for (const item of this.scrollbar) {
+      this.scrollbarContainer.appendChild(item.scrollbar);
+    }
+  }
+
+  hide() {
+    for (const scrollbar of this.scrollbar) {
+      scrollbar.hideScrollbar();
+    }
+  }
+
+  show() {
+    for (const scrollbar of this.scrollbar) {
+      scrollbar.showScrollbar();
+    }
+  }
+
+  update() {
+    for (const scrollbar of this.scrollbar) {
+      scrollbar.calculateSize();
+      scrollbar.setScrollbarPosition();
+    }
+  }
+
+  destroy() {
+    this.scrollbarContainer.remove();
+    for (const scrollbar of this.scrollbar) {
+      scrollbar.destroy();
+    }
+    return null;
+  }
+}