quill-table-up 2.0.1 → 2.0.3

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

@@ -0,0 +1,293 @@
+import type { Parchment as TypeParchment } from 'quill';
+import type TableUp from '../..';
+import type { TableColFormat, TableMainFormat, TableRowFormat } from '../..';
+import Quill from 'quill';
+import { TableBodyFormat } from '../../formats';
+import { addScrollEvent, clearScrollEvent, createBEM } from '../../utils';
+import { TableResizeCommon } from './table-resize-common';
+import { isTableAlignRight } from './utils';
+
+interface Point {
+  x: number;
+  y: number;
+};
+export class TableResizeBox extends TableResizeCommon {
+  root!: HTMLElement;
+  tableMain: TableMainFormat;
+  tableWrapper!: TypeParchment.Parent;
+  resizeObserver!: ResizeObserver;
+  tableCols: TableColFormat[] = [];
+  tableRows: TableRowFormat[] = [];
+  rowHeadWrapper: HTMLElement | null = null;
+  colHeadWrapper: HTMLElement | null = null;
+  corner: HTMLElement | null = null;
+  scrollHandler: [HTMLElement, (e: Event) => void][] = [];
+  lastHeaderSelect: [Point, Point] | null = null;
+  size: number = 12;
+  bem = createBEM('resize-box');
+
+  constructor(public tableModule: TableUp, public table: HTMLElement, quill: Quill) {
+    super(tableModule, quill);
+    this.tableMain = Quill.find(this.table) as TableMainFormat;
+
+    if (!this.tableMain) return;
+    this.tableWrapper = this.tableMain.parent;
+    if (!this.tableWrapper) return;
+
+    this.root = this.tableModule.addContainer(this.bem.b());
+    this.resizeObserver = new ResizeObserver(() => {
+      this.show();
+    });
+    this.resizeObserver.observe(this.table);
+  }
+
+  handleResizerHeader(isX: boolean, e: MouseEvent) {
+    const { clientX, clientY } = e;
+    const tableRect = this.table.getBoundingClientRect();
+    if (this.tableModule.tableSelection) {
+      const tableSelection = this.tableModule.tableSelection;
+      if (!e.shiftKey) {
+        this.lastHeaderSelect = null;
+      }
+      const currentBoundary: [Point, Point] = [
+        { x: isX ? tableRect.left : clientX, y: isX ? clientY : tableRect.top },
+        { x: isX ? tableRect.right : clientX, y: isX ? clientY : tableRect.bottom },
+      ];
+      if (this.lastHeaderSelect) {
+        currentBoundary[0] = {
+          x: Math.min(currentBoundary[0].x, this.lastHeaderSelect[0].x),
+          y: Math.min(currentBoundary[0].y, this.lastHeaderSelect[0].y),
+        };
+        currentBoundary[1] = {
+          x: Math.max(currentBoundary[1].x, this.lastHeaderSelect[1].x),
+          y: Math.max(currentBoundary[1].y, this.lastHeaderSelect[1].y),
+        };
+      }
+      else {
+        this.lastHeaderSelect = currentBoundary;
+      }
+
+      tableSelection.selectedTds = tableSelection.computeSelectedTds(...currentBoundary);
+      tableSelection.show();
+    }
+  };
+
+  findCurrentColIndex(e: MouseEvent): number {
+    return Array.from(this.root.getElementsByClassName(this.bem.be('col-separator'))).indexOf(e.target as HTMLElement);
+  }
+
+  colWidthChange(i: number, w: number, _isFull: boolean) {
+    const tableColHeads = Array.from(this.root.getElementsByClassName(this.bem.be('col-header'))) as HTMLElement[];
+    tableColHeads[i].style.width = `${w}px`;
+  }
+
+  handleColMouseDownFunc = function (this: TableResizeBox, e: MouseEvent) {
+    const value = this.handleColMouseDown(e);
+    if (value && this.dragColBreak) {
+      Object.assign(this.dragColBreak.style, {
+        top: `${value.top - this.size}px`,
+        left: `${value.left}px`,
+        height: `${value.height + this.size}px`,
+      });
+    }
+    return value;
+  }.bind(this);
+
+  bindColEvents() {
+    const tableColHeads = Array.from(this.root.getElementsByClassName(this.bem.be('col-header'))) as HTMLElement[];
+    const tableColHeadSeparators = Array.from(this.root.getElementsByClassName(this.bem.be('col-separator'))) as HTMLElement[];
+
+    addScrollEvent.call(this, this.tableWrapper.domNode, () => {
+      this.colHeadWrapper!.scrollLeft = this.tableWrapper.domNode.scrollLeft;
+    });
+
+    for (const el of tableColHeads) {
+      el.addEventListener('click', this.handleResizerHeader.bind(this, false));
+    }
+    for (const el of tableColHeadSeparators) {
+      el.addEventListener('mousedown', this.handleColMouseDownFunc);
+      // prevent drag
+      el.addEventListener('dragstart', e => e.preventDefault());
+    }
+  }
+
+  findCurrentRowIndex(e: MouseEvent): number {
+    return Array.from(this.root.getElementsByClassName(this.bem.be('row-separator'))).indexOf(e.target as HTMLElement);
+  }
+
+  rowHeightChange(i: number, h: number) {
+    const tableRowHeads = Array.from(this.root.getElementsByClassName(this.bem.be('row-header'))) as HTMLElement[];
+    tableRowHeads[i].style.height = `${h}px`;
+  }
+
+  handleRowMouseDownFunc = function (this: TableResizeBox, e: MouseEvent) {
+    const value = this.handleRowMouseDown(e);
+    if (value && this.dragRowBreak) {
+      Object.assign(this.dragRowBreak.style, {
+        top: `${value.top}px`,
+        left: `${value.left - this.size}px`,
+        width: `${value.width + this.size}px`,
+      });
+    }
+    return value;
+  }.bind(this);
+
+  bindRowEvents() {
+    const tableRowHeads = Array.from(this.root.getElementsByClassName(this.bem.be('row-header'))) as HTMLElement[];
+    const tableRowHeadSeparators = Array.from(this.root.getElementsByClassName(this.bem.be('row-separator'))) as HTMLElement[];
+
+    addScrollEvent.call(this, this.tableWrapper.domNode, () => {
+      this.rowHeadWrapper!.scrollTop = this.tableWrapper.domNode.scrollTop;
+    });
+
+    for (const el of tableRowHeads) {
+      el.addEventListener('click', this.handleResizerHeader.bind(this, true));
+    }
+    for (const el of tableRowHeadSeparators) {
+      el.addEventListener('mousedown', this.handleRowMouseDownFunc);
+      // prevent drag
+      el.addEventListener('dragstart', e => e.preventDefault());
+    }
+  }
+
+  update() {
+    const [tableBodyBlot] = this.tableMain.descendant(TableBodyFormat, this.tableMain.length() - 1);
+    if (!tableBodyBlot) return;
+    const tableBodyRect = tableBodyBlot.domNode.getBoundingClientRect();
+    const rootRect = this.quill.root.getBoundingClientRect();
+    Object.assign(this.root.style, {
+      top: `${tableBodyRect.y - rootRect.y}px`,
+      left: `${tableBodyRect.x - rootRect.x}px`,
+    });
+
+    const tableMainRect = this.tableMain.domNode.getBoundingClientRect();
+    const tableWrapperRect = this.tableWrapper.domNode.getBoundingClientRect();
+
+    let cornerTranslateX = -1 * this.size;
+    let rowHeadWrapperTranslateX = -1 * this.size;
+    if (isTableAlignRight(this.tableMain)) {
+      this.root.classList.add(this.bem.is('align-right'));
+      cornerTranslateX = Math.min(tableWrapperRect.width, tableMainRect.width);
+      rowHeadWrapperTranslateX = Math.min(tableWrapperRect.width, tableMainRect.width);
+    }
+    else {
+      this.root.classList.remove(this.bem.is('align-right'));
+    }
+
+    if (this.corner) {
+      Object.assign(this.corner.style, {
+        transform: `translateY(${-1 * this.size}px) translateX(${cornerTranslateX}px)`,
+      });
+    }
+    if (this.rowHeadWrapper) {
+      Object.assign(this.rowHeadWrapper.style, {
+        transform: `translateX(${rowHeadWrapperTranslateX}px)`,
+      });
+    }
+  }
+
+  show() {
+    this.tableCols = this.tableMain.getCols();
+    this.tableRows = this.tableMain.getRows();
+    this.root.innerHTML = '';
+    const tableWrapperRect = this.tableWrapper.domNode.getBoundingClientRect();
+    const tableMainRect = this.tableMain.domNode.getBoundingClientRect();
+
+    if (this.tableCols.length > 0 && this.tableRows.length > 0) {
+      this.corner = document.createElement('div');
+      this.corner.classList.add(this.bem.be('corner'));
+      Object.assign(this.corner.style, {
+        width: `${this.size}px`,
+        height: `${this.size}px`,
+      });
+      this.corner.addEventListener('click', () => {
+        const tableRect = this.table.getBoundingClientRect();
+        if (this.tableModule.tableSelection) {
+          const tableSelection = this.tableModule.tableSelection;
+          tableSelection.selectedTds = tableSelection.computeSelectedTds(
+            { x: tableRect.x, y: tableRect.y },
+            { x: tableRect.right, y: tableRect.bottom },
+          );
+          tableSelection.show();
+        }
+      });
+      this.root.appendChild(this.corner);
+    }
+
+    if (this.tableCols.length > 0) {
+      let colHeadStr = '';
+      for (const [, col] of this.tableCols.entries()) {
+        const width = col.domNode.getBoundingClientRect().width;
+        colHeadStr += `<div class="${this.bem.be('col-header')}" style="width: ${width}px">
+          <div class="${this.bem.be('col-separator')}" style="height: ${tableMainRect.height + this.size - 3}px"></div>
+        </div>`;
+      }
+      const colHeadWrapper = document.createElement('div');
+      colHeadWrapper.classList.add(this.bem.be('col'));
+      const colHead = document.createElement('div');
+      colHead.classList.add(this.bem.be('col-wrapper'));
+      Object.assign(colHeadWrapper.style, {
+        transform: `translateY(-${this.size}px)`,
+        maxWidth: `${tableWrapperRect.width}px`,
+        height: `${this.size}px`,
+      });
+      Object.assign(colHead.style, {
+        width: `${tableMainRect.width}px`,
+      });
+      colHead.innerHTML = colHeadStr;
+      colHeadWrapper.appendChild(colHead);
+      this.root.appendChild(colHeadWrapper);
+      colHeadWrapper.scrollLeft = this.tableWrapper.domNode.scrollLeft;
+      this.colHeadWrapper = colHeadWrapper;
+      this.bindColEvents();
+    }
+
+    if (this.tableRows.length > 0) {
+      let rowHeadStr = '';
+      for (const [, row] of this.tableRows.entries()) {
+        const height = `${row.domNode.getBoundingClientRect().height}px`;
+        rowHeadStr += `<div class="${this.bem.be('row-header')}" style="height: ${Number.parseFloat(height)}px">
+          <div class="${this.bem.be('row-separator')}" style="width: ${tableMainRect.width + this.size - 3}px"></div>
+        </div>`;
+      }
+      const rowHeadWrapper = document.createElement('div');
+      rowHeadWrapper.classList.add(this.bem.be('row'));
+      const rowHead = document.createElement('div');
+      rowHead.classList.add(this.bem.be('row-wrapper'));
+
+      Object.assign(rowHeadWrapper.style, {
+        transform: `translateX(-${this.size}px)`,
+        width: `${this.size}px`,
+        maxHeight: `${tableWrapperRect.height}px`,
+      });
+      Object.assign(rowHead.style, {
+        height: `${tableMainRect.height}px`,
+      });
+      rowHead.innerHTML = rowHeadStr;
+      rowHeadWrapper.appendChild(rowHead);
+      this.root.appendChild(rowHeadWrapper);
+      rowHeadWrapper.scrollTop = this.tableWrapper.domNode.scrollTop;
+      this.rowHeadWrapper = rowHeadWrapper;
+      this.bindRowEvents();
+    }
+
+    this.update();
+    addScrollEvent.call(this, this.quill.root, () => {
+      this.update();
+    });
+  }
+
+  hide() {
+    this.root.classList.add(this.bem.is('hidden'));
+  }
+
+  destroy() {
+    this.hide();
+    clearScrollEvent.call(this);
+    this.resizeObserver.disconnect();
+    for (const [dom, handle] of this.scrollHandler) {
+      dom.removeEventListener('scroll', handle);
+    }
+    this.root.remove();
+  }
+}

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

@@ -0,0 +1,343 @@
+import type Quill from 'quill';
+import type TableUp from '../..';
+import type { TableMainFormat } from '../../formats';
+import { createBEM, createButton, createDialog, tableUpEvent, tableUpSize } from '../../utils';
+import { isTableAlignRight } from './utils';
+
+export class TableResizeCommon {
+  colIndex: number = -1;
+  tableMain?: TableMainFormat;
+  dragging = false;
+  dragColBreak: HTMLElement | null = null;
+  handleColMouseUpFunc = this.handleColMouseUp.bind(this);
+  handleColMouseMoveFunc = this.handleColMouseMove.bind(this);
+  handleColMouseDownFunc = this.handleColMouseDown.bind(this);
+
+  rowIndex: number = -1;
+  dragRowBreak: HTMLElement | null = null;
+  handleRowMouseUpFunc = this.handleRowMouseUp.bind(this);
+  handleRowMouseMoveFunc = this.handleRowMouseMove.bind(this);
+  handleRowMouseDownFunc = this.handleRowMouseDown.bind(this);
+
+  dragBEM = createBEM('drag-line');
+
+  constructor(public tableModule: TableUp, public quill: Quill) {}
+
+  findCurrentColIndex(_e: MouseEvent) {
+    return -1;
+  }
+
+  colWidthChange(_i: number, _w: number, _isFull: boolean) {}
+
+  async createConfirmDialog({ message, confirm, cancel }: {
+    message: string;
+    confirm: string;
+    cancel: string;
+  }) {
+    return new Promise((resolve) => {
+      const content = document.createElement('div');
+      Object.assign(content.style, {
+        padding: '8px 12px',
+        fontSize: '14px',
+        lineHeight: '1.5',
+      });
+      const tip = document.createElement('p');
+      tip.textContent = message;
+      const btnWrapper = document.createElement('div');
+      Object.assign(btnWrapper.style, {
+        display: 'flex',
+        justifyContent: 'flex-end',
+        gap: `6px`,
+      });
+      const cancelBtn = createButton({ content: cancel });
+      const confirmBtn = createButton({ type: 'confirm', content: confirm });
+
+      btnWrapper.appendChild(cancelBtn);
+      btnWrapper.appendChild(confirmBtn);
+      content.appendChild(tip);
+      content.appendChild(btnWrapper);
+
+      const { close } = createDialog({ child: content });
+
+      cancelBtn.addEventListener('click', () => {
+        resolve(false);
+        close();
+      });
+      confirmBtn.addEventListener('click', () => {
+        resolve(true);
+        close();
+      });
+    });
+  }
+
+  async handleColMouseUp() {
+    if (!this.dragColBreak || !this.tableMain || this.colIndex === -1) return;
+    const cols = this.tableMain.getCols();
+    const w = Number.parseInt(this.dragColBreak.dataset.w || '0');
+    let isFull = this.tableMain.full;
+    let needUpdate = false;
+    const updateInfo: { index: number; width: number }[] = [];
+    if (isFull) {
+      const tableMainWidth = this.tableMain.domNode.getBoundingClientRect().width;
+      let pre = (w / tableMainWidth) * 100;
+      const oldWidthPre = cols[this.colIndex].width;
+      if (pre < oldWidthPre) {
+        // minus
+        // if not the last col. add the reduced amount to the next col
+        // if is the last col. add the reduced amount to the pre col
+        pre = Math.max(tableUpSize.colMinWidthPre, pre);
+        if (cols[this.colIndex + 1] || cols[this.colIndex - 1]) {
+          const i = cols[this.colIndex + 1] ? this.colIndex + 1 : this.colIndex - 1;
+          updateInfo.push({ index: i, width: cols[i].width + oldWidthPre - pre });
+        }
+        else {
+          pre = 100;
+        }
+        needUpdate = true;
+        updateInfo.push({ index: this.colIndex, width: pre });
+      }
+      else {
+        // magnify col
+        // the last col can't magnify. control last but one minus to magnify last col
+        if (cols[this.colIndex + 1]) {
+          const totalWidthNextPre = oldWidthPre + cols[this.colIndex + 1].width;
+          pre = Math.min(totalWidthNextPre - tableUpSize.colMinWidthPre, pre);
+          needUpdate = true;
+          updateInfo.push(
+            { index: this.colIndex, width: pre },
+            { index: this.colIndex + 1, width: totalWidthNextPre - pre },
+          );
+        }
+      }
+    }
+    else {
+      this.tableMain.domNode.style.width = `${
+        Number.parseFloat(this.tableMain.domNode.style.width)
+        - cols[this.colIndex].domNode.getBoundingClientRect().width
+        + w
+      }px`;
+      needUpdate = true;
+      updateInfo.push({ index: this.colIndex, width: w });
+    }
+
+    document.body.removeChild(this.dragColBreak);
+    this.dragColBreak = null;
+    document.removeEventListener('mouseup', this.handleColMouseUpFunc);
+    document.removeEventListener('mousemove', this.handleColMouseMoveFunc);
+    this.dragging = false;
+
+    if (needUpdate) {
+      const tableWidth = this.tableMain.domNode.getBoundingClientRect().width;
+      if (isFull) {
+        // if full table and percentage width is larger than 100%. check if convert to fixed px
+        let resultWidth = 0;
+        const skipColIndex = new Set(updateInfo.map(({ index, width }) => {
+          resultWidth += width;
+          return index;
+        }));
+        for (const [index, col] of cols.entries()) {
+          if (skipColIndex.has(index)) continue;
+          resultWidth += col.width;
+        }
+
+        if (resultWidth > 100) {
+          if (!await this.createConfirmDialog({
+            message: this.tableModule.options.texts.perWidthInsufficient,
+            confirm: this.tableModule.options.texts.confirmText,
+            cancel: this.tableModule.options.texts.cancelText,
+          })) {
+            return;
+          }
+          this.tableMain.cancelFull();
+          isFull = false;
+          for (const [i, info] of updateInfo.entries()) {
+            const { width, index } = info;
+            updateInfo[i] = {
+              index,
+              width: width / 100 * tableWidth,
+            };
+          }
+        }
+      }
+
+      for (const { index, width } of updateInfo) {
+        cols[index].width = `${Math.round(width)}${isFull ? '%' : 'px'}`;
+        this.colWidthChange(index, isFull ? width / 100 * tableWidth : width, isFull);
+      }
+    }
+
+    this.quill.emitter.emit(tableUpEvent.AFTER_TABLE_RESIZE);
+  };
+
+  handleColMouseMove(e: MouseEvent): { left: number; width: number } | undefined {
+    e.preventDefault();
+    if (!this.dragColBreak || !this.tableMain || this.colIndex === -1) return;
+    const cols = this.tableMain.getCols();
+    const changeColRect = cols[this.colIndex].domNode.getBoundingClientRect();
+    const tableRect = this.tableMain.domNode.getBoundingClientRect();
+    let resX = e.clientX;
+
+    // table full not handle align right
+    if (this.tableMain.full) {
+      // max width = current col.width + next col.width
+      // if current col is last. max width = current col.width
+      const minWidth = (tableUpSize.colMinWidthPre / 100) * tableRect.width;
+      let maxRange = tableRect.right;
+      if (resX > changeColRect.right && cols[this.colIndex + 1]) {
+        maxRange = Math.max(cols[this.colIndex + 1].domNode.getBoundingClientRect().right - minWidth, changeColRect.left + minWidth);
+      }
+      const minRange = changeColRect.x + minWidth;
+      resX = Math.min(Math.max(resX, minRange), maxRange);
+    }
+    else {
+      // when table align right, mousemove to the left, the col width will be increase
+      if (isTableAlignRight(this.tableMain)) {
+        if (changeColRect.right - resX < tableUpSize.colMinWidthPx) {
+          resX = changeColRect.right - tableUpSize.colMinWidthPx;
+        }
+      }
+      else {
+        if (resX - changeColRect.x < tableUpSize.colMinWidthPx) {
+          resX = changeColRect.x + tableUpSize.colMinWidthPx;
+        }
+      }
+    }
+
+    let width = resX - changeColRect.x;
+    if (isTableAlignRight(this.tableMain)) {
+      width = changeColRect.right - resX;
+    }
+    this.dragColBreak.style.left = `${resX}px`;
+    this.dragColBreak.dataset.w = String(width);
+    return {
+      left: resX,
+      width,
+    };
+  };
+
+  handleColMouseDown(e: MouseEvent): { top: number; left: number; height: number } | undefined {
+    if (e.button !== 0) return;
+    e.preventDefault();
+    if (!this.tableMain) return;
+    // set drag init width
+    const cols = this.tableMain.getCols();
+    const tableMainRect = this.tableMain.domNode.getBoundingClientRect();
+    const fullWidth = tableMainRect.width;
+    this.colIndex = this.findCurrentColIndex(e);
+    if (this.colIndex === -1) return;
+    const colWidthAttr = cols[this.colIndex].width;
+    const width = this.tableMain.full ? colWidthAttr / 100 * fullWidth : colWidthAttr;
+
+    document.addEventListener('mouseup', this.handleColMouseUpFunc);
+    document.addEventListener('mousemove', this.handleColMouseMoveFunc);
+
+    this.dragging = true;
+
+    const divDom = document.createElement('div');
+    divDom.classList.add(this.dragBEM.b());
+    divDom.classList.add(this.dragBEM.is('col'));
+    divDom.dataset.w = String(width);
+
+    const styleValue = {
+      top: tableMainRect.y,
+      left: e.clientX,
+      height: tableMainRect.height,
+    };
+    Object.assign(divDom.style, {
+      top: `${styleValue.top}px`,
+      left: `${styleValue.left}px`,
+      height: `${styleValue.height}px`,
+    });
+    const appendTo = document.body;
+    appendTo.appendChild(divDom);
+
+    if (this.dragColBreak) appendTo.removeChild(this.dragColBreak);
+    this.dragColBreak = divDom;
+
+    return styleValue;
+  };
+
+  findCurrentRowIndex(_e: MouseEvent) {
+    return -1;
+  }
+
+  rowHeightChange(_i: number, _h: number) {}
+
+  handleRowMouseUp() {
+    if (!this.tableMain || !this.dragRowBreak || this.rowIndex === -1) return;
+    const h = Number.parseInt(this.dragRowBreak.dataset.h || '0');
+
+    const rows = this.tableMain.getRows();
+    rows[this.rowIndex].setHeight(`${h}px`);
+    this.rowHeightChange(this.rowIndex, h);
+
+    document.body.removeChild(this.dragRowBreak);
+    this.dragRowBreak = null;
+    document.removeEventListener('mouseup', this.handleRowMouseUpFunc);
+    document.removeEventListener('mousemove', this.handleRowMouseMoveFunc);
+    this.dragging = false;
+    this.quill.emitter.emit(tableUpEvent.AFTER_TABLE_RESIZE);
+  }
+
+  handleRowMouseMove(e: MouseEvent): { top: number; height: number } | undefined {
+    if (!this.tableMain || !this.dragRowBreak || this.rowIndex === -1) return;
+    e.preventDefault();
+    const rows = this.tableMain.getRows();
+    const rect = rows[this.rowIndex].domNode.getBoundingClientRect();
+    let resY = e.clientY;
+    if (resY - rect.y < tableUpSize.rowMinHeightPx) {
+      resY = rect.y + tableUpSize.rowMinHeightPx;
+    }
+    this.dragRowBreak.style.top = `${resY}px`;
+    this.dragRowBreak.dataset.h = String(resY - rect.y);
+    return {
+      top: resY,
+      height: resY - rect.y,
+    };
+  }
+
+  handleRowMouseDown(e: MouseEvent): { top: number; left: number; width: number } | undefined {
+    if (e.button !== 0) return;
+    e.preventDefault();
+    if (!this.tableMain) return;
+
+    this.rowIndex = this.findCurrentRowIndex(e);
+    if (this.rowIndex === -1) return;
+
+    this.dragging = true;
+    document.addEventListener('mouseup', this.handleRowMouseUpFunc);
+    document.addEventListener('mousemove', this.handleRowMouseMoveFunc);
+
+    const rows = this.tableMain.getRows();
+
+    // set drag init width
+    const height = rows[this.rowIndex].domNode.getBoundingClientRect().height;
+    const tableMainRect = this.tableMain.domNode.getBoundingClientRect();
+
+    const divDom = document.createElement('div');
+    divDom.classList.add(this.dragBEM.b());
+    divDom.classList.add(this.dragBEM.is('row'));
+    divDom.dataset.h = String(height);
+
+    const styleValue = {
+      top: e.clientY,
+      left: tableMainRect.x,
+      width: tableMainRect.width,
+    };
+    Object.assign(divDom.style, {
+      top: `${styleValue.top}px`,
+      left: `${styleValue.left}px`,
+      width: `${styleValue.width}px`,
+    });
+    const appendTo = document.body;
+    appendTo.appendChild(divDom);
+
+    if (this.dragRowBreak) appendTo.removeChild(this.dragRowBreak);
+    this.dragRowBreak = divDom;
+
+    return styleValue;
+  };
+
+  update() {}
+  destroy() {}
+}