quill-table-up 3.1.2 → 3.2.0

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

@@ -1,173 +1,174 @@
-import type { TableColFormat, TableMainFormat, TableRowFormat, TableWrapperFormat } from '../../formats';
-import type { TableUp } from '../../table-up';
-import type { TableResizeScaleOptions } from '../../utils';
-import Quill from 'quill';
-import { getTableMainRect } from '../../formats';
-import { addScrollEvent, clearScrollEvent, createBEM, tableUpSize } from '../../utils';
-import { TableDomSelector } from '../table-dom-selector';
-import { isTableAlignRight } from './utils';
-
-export class TableResizeScale extends TableDomSelector {
-  scrollHandler: [HTMLElement, (e: Event) => void][] = [];
-  tableMainBlot?: TableMainFormat;
-  tableWrapperBlot?: TableWrapperFormat;
-  bem = createBEM('scale');
-  startX: number = 0;
-  startY: number = 0;
-  offset: number = 6;
-  options: TableResizeScaleOptions;
-  root?: HTMLElement;
-  block?: HTMLElement;
-  resizeobserver: ResizeObserver = new ResizeObserver(() => this.update());
-  constructor(public tableModule: TableUp, public quill: Quill, options: Partial<TableResizeScaleOptions>) {
-    super(tableModule, quill);
-    this.options = this.resolveOptions(options);
-
-    this.quill.on(Quill.events.EDITOR_CHANGE, this.updateWhenTextChange);
-  }
-
-  updateWhenTextChange = (eventName: string) => {
-    if (eventName === Quill.events.TEXT_CHANGE) {
-      if (this.table && !this.quill.root.contains(this.table)) {
-        this.setSelectionTable(undefined);
-      }
-      else {
-        this.update();
-      }
-    }
-  };
-
-  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.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());
-  }
-
-  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;
-    if (this.tableMainBlot.full) {
-      this.hide();
-      return;
-    }
-    const { rect: tableRect } = getTableMainRect(this.tableMainBlot);
-    if (!tableRect) return;
-    const tableWrapperRect = this.tableWrapperBlot.domNode.getBoundingClientRect();
-    const editorRect = this.quill.root.getBoundingClientRect();
-    const { scrollTop, scrollLeft } = this.tableWrapperBlot.domNode;
-    const blockSize = this.options.blockSize * 2 + this.offset;
-    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.table) return;
-    this.tableMainBlot = Quill.find(this.table) as TableMainFormat;
-    if (this.tableMainBlot && !this.tableMainBlot.full) {
-      this.tableWrapperBlot = this.tableMainBlot.parent as TableWrapperFormat;
-
-      this.resizeobserver.observe(this.tableMainBlot.domNode);
-      addScrollEvent.call(this, this.quill.root, () => this.update());
-      addScrollEvent.call(this, this.tableWrapperBlot.domNode, () => this.update());
-    }
-    this.buildResizer();
-  }
-
-  hide() {
-    this.tableMainBlot = undefined;
-    this.tableWrapperBlot = undefined;
-    if (this.root) {
-      this.root.remove();
-      this.root = undefined;
-      this.block = undefined;
-    }
-  }
-
-  destroy() {
-    this.hide();
-    this.quill.off(Quill.events.TEXT_CHANGE, this.updateWhenTextChange);
-    this.resizeobserver.disconnect();
-    clearScrollEvent.call(this);
-  }
-}
+import type { TableColFormat, TableMainFormat, TableRowFormat, TableWrapperFormat } from '../../formats';
+import type { TableUp } from '../../table-up';
+import type { TableResizeScaleOptions } from '../../utils';
+import Quill from 'quill';
+import { getTableMainRect } from '../../formats';
+import { addScrollEvent, clearScrollEvent, createBEM, tableUpSize } from '../../utils';
+import { TableDomSelector } from '../table-dom-selector';
+import { isTableAlignRight } from './utils';
+
+export class TableResizeScale extends TableDomSelector {
+  static moduleName = 'table-resize-scale';
+
+  scrollHandler: [HTMLElement, (e: Event) => void][] = [];
+  tableMainBlot?: TableMainFormat;
+  tableWrapperBlot?: TableWrapperFormat;
+  bem = createBEM('scale');
+  startX: number = 0;
+  startY: number = 0;
+  offset: number = 6;
+  options: TableResizeScaleOptions;
+  root?: HTMLElement;
+  block?: HTMLElement;
+  resizeobserver: ResizeObserver = new ResizeObserver(() => this.update());
+  constructor(public tableModule: TableUp, public quill: Quill, options: Partial<TableResizeScaleOptions>) {
+    super(tableModule, quill);
+    this.options = this.resolveOptions(options);
+
+    this.quill.on(Quill.events.EDITOR_CHANGE, this.updateWhenTextChange);
+  }
+
+  updateWhenTextChange = (eventName: string) => {
+    if (eventName === Quill.events.TEXT_CHANGE) {
+      if (this.table && !this.quill.root.contains(this.table)) {
+        this.setSelectionTable(undefined);
+      }
+      else {
+        this.update();
+      }
+    }
+  };
+
+  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.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());
+  }
+
+  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;
+    if (this.tableMainBlot.full) {
+      this.hide();
+      return;
+    }
+    const { rect: tableRect } = getTableMainRect(this.tableMainBlot);
+    if (!tableRect) return;
+    const tableWrapperRect = this.tableWrapperBlot.domNode.getBoundingClientRect();
+    const editorRect = this.quill.root.getBoundingClientRect();
+    const { scrollTop, scrollLeft } = this.tableWrapperBlot.domNode;
+    const blockSize = this.options.blockSize * 2 + this.offset;
+    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.table) return;
+    this.tableMainBlot = Quill.find(this.table) as TableMainFormat;
+    if (this.tableMainBlot && !this.tableMainBlot.full) {
+      this.tableWrapperBlot = this.tableMainBlot.parent as TableWrapperFormat;
+
+      this.resizeobserver.observe(this.tableMainBlot.domNode);
+      addScrollEvent.call(this, this.quill.root, () => this.update());
+    }
+    this.buildResizer();
+  }
+
+  hide() {
+    this.tableMainBlot = undefined;
+    this.tableWrapperBlot = undefined;
+    if (this.root) {
+      this.root.remove();
+      this.root = undefined;
+      this.block = undefined;
+    }
+  }
+
+  destroy() {
+    this.hide();
+    this.quill.off(Quill.events.TEXT_CHANGE, this.updateWhenTextChange);
+    this.resizeobserver.disconnect();
+    clearScrollEvent.call(this);
+  }
+}

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

@@ -1,3 +1,84 @@
-import type { TableMainFormat } from '../../formats';
-
-export const isTableAlignRight = (tableMainBlot: TableMainFormat) => !tableMainBlot.full && tableMainBlot.align === 'right';
+import type { TableCellInnerFormat, TableColFormat, TableMainFormat } from '../../formats';
+
+export const isTableAlignRight = (tableMainBlot: TableMainFormat) => !tableMainBlot.full && tableMainBlot.align === 'right';
+export function getColRect(cols: TableColFormat[], columnIndex: number) {
+  // fix browser compatibility, get column rect left/x inaccurate
+  if (columnIndex < 0 || columnIndex >= cols.length) return null;
+
+  // calculate column position
+  let left = cols[0].domNode.getBoundingClientRect().left;
+  for (let i = 0; i < columnIndex; i++) {
+    const colRect = cols[i].domNode.getBoundingClientRect();
+    left += colRect.width;
+  }
+
+  const currentCol = cols[columnIndex];
+  const colWidth = currentCol.domNode.getBoundingClientRect().width;
+
+  return {
+    left,
+    right: left + colWidth,
+    width: colWidth,
+  };
+}
+
+export function isCellsSpan(isX: boolean, tableBlot: TableMainFormat, cells: TableCellInnerFormat[]) {
+  if (isX) {
+    // if cells have span all rows
+    const cols = tableBlot.getCols();
+    const colIds = cols.map(col => col.colId);
+    const countColIds = new Set<string>();
+    const countRowspan = new Map<string, number>(colIds.map(id => [id, 0]));
+    const cellIndex = new Set<number>();
+    for (const cell of cells) {
+      countColIds.add(cell.colId);
+      const colIndex = colIds.indexOf(cell.colId);
+      if (colIndex === -1) continue;
+      for (let i = colIndex; i < colIndex + cell.colspan && i < colIds.length; i++) {
+        cellIndex.add(i);
+        const id = colIds[i];
+        countRowspan.set(id, (countRowspan.get(id) || 0) + cell.rowspan);
+      }
+      cellIndex.add(Math.min(colIndex + cell.colspan, colIds.length));
+    }
+    const rowCount = tableBlot.getRows()?.length || 0;
+    for (const [id, count] of countRowspan.entries()) {
+      if (count >= rowCount) {
+        countColIds.delete(id);
+      }
+    }
+    return {
+      cellIndex,
+      isSpan: countColIds.size <= 0,
+    };
+  }
+  else {
+    // if cells have span all columns
+    const rows = tableBlot.getRows();
+    const rowIds = rows.map(row => row.rowId);
+    const countRowIds = new Set<string>();
+    const countRowspan = new Map<string, number>(rowIds.map(id => [id, 0]));
+    const cellIndex = new Set<number>();
+    for (const cell of cells) {
+      countRowIds.add(cell.rowId);
+      const rowIndex = rowIds.indexOf(cell.rowId);
+      if (rowIndex === -1) continue;
+      for (let i = rowIndex; i < rowIndex + cell.rowspan && i < rowIds.length; i++) {
+        cellIndex.add(i);
+        const id = rowIds[i];
+        countRowspan.set(id, (countRowspan.get(id) || 0) + cell.colspan);
+      }
+      cellIndex.add(Math.min(rowIndex + cell.rowspan, rowIds.length));
+    }
+    const colCount = tableBlot.getCols()?.length || 0;
+    for (const [id, count] of countRowspan.entries()) {
+      if (count >= colCount) {
+        countRowIds.delete(id);
+      }
+    }
+    return {
+      cellIndex,
+      isSpan: countRowIds.size <= 0,
+    };
+  }
+}