constructor(rows, cols) {

    this.t = document.createElement('table');

    this.t.setAttribute('id', Table.randName(11));

    this.t.setAttribute('contenteditable', true);

    this.t.setAttribute('class', 'chotki-table');

    //this.t.setAttribute('data-before', '-41px');

    //this.t.setAttribute('data-after', '-41px');

    this.t.style.setProperty('--before-top', '-4px');

    this.t.style.setProperty('--before-left', '4px');

    this.t.style.setProperty('--after-left', '-4px');

    this.t.style.setProperty('--after-top', '4px');

​

    // style.setProperty('--h', y + 'px')

    this.rows = [];

    this.cols = [];

    this.cells = [];

    for (let r=0; r<rows; r+=1) {

      this.t.insertRow(r);

      this.rows.push(this.t.rows[r]);

      for (let c=0; c<cols; c+=1) {

        this.t.rows[r].insertCell(c);

        this.cells.push(this.t.rows[r].cells[c]);

        this.addEvent(

          this.t.rows[r].cells[c], 

          'click', 

          this.callback,

          false, 

          { row: r, col: c }

        );

      }    

    }

  }

  addEvent(el, evType, cb, capture = false, data = {}) {

    if (el) {

      el.addEventListener(evType, cb, capture);

      el.tdata = data; 

    }

  }

  callback(e) {

    // e.target.innerHTML = `row: ${e.target.tdata.row}, col: ${e.target.tdata.col}`; 

    // console.log('-> rectbox: ', e.target.getBoundingClientRect() )

    const bbox = e.target.getBoundingClientRect();

    const data = e.target.tdata;

    const el = e.path[3];

    const elbbox = el.getBoundingClientRect();

    const leftTop = bbox.x - elbbox.left;

    const topLeft = bbox.y - elbbox.top;

    console.log('-> bbox: ' , bbox);

    console.log('-> elbbox: ' , elbbox);

    console.log('leftTop: ', leftTop);

    console.log('topLeft: ', topLeft);

    if (el.tagName === 'TABLE') {

      console.log('table: ', el.tagName);

      el.style.setProperty('--before-left', `${leftTop}px`); // horizontal

      el.style.setProperty('--after-top', `${topLeft}px` ); // vertical

    }

    console.log('-> table : ', e.path);

    // console.log('-> getComputedStyle: ', getComputedStyle(this));

  }

  getTable() {

    return this.t;

  }

  addRow(insertIndex) {}

  addCol(insertIndex) {}

  addRows() {}

  addCols() {}

  removeRow(index) {}

  removeCol(index) {}

  clearTable() {

  }

  clearRow() {

  }

  updateControls() {

    // this.t.style

  }

  clearColumn() {

  }

  clearCell() {

  }

  static randName(len, cap = false) {

    const chars = [

      'a', 'b', 'c', '_', 'd', 'e',

      'f', '-',

      'g',

      'h',

      'i',

      'j','-',

      'k',

      'l',

      'm',

      'n','-',

      'o',

      'p',

      'q',

      '@','-',

      'r',

      's',

      't',

      'u',

      'v','-',

      'w',

      'x',

      'y','-',

      'z'

    ];

    const randStr = [];

​

    for (let i = 0; i < len; i += 1) {

      const rindex = Math.round(Math.random() * chars.length);

      randStr.push(chars[rindex]);

    }

    const rs = randStr.join('');

​

    return cap ? rs[0].toUpperCase() + rs.slice(1) : rs;

  }

}

​

/* Table.prototype.getTable = function() {

​

} */

​

// window.addEventListener('DOMContentLoaded', init)

​

​

function init() {

  console.log('****** DOMContentLoaded ******');

  const mouseEl = document.querySelector('.mouse-position');

  const boxEl = document.querySelector('.box');

  const box = document.querySelector('.box');

  const btn = document.querySelector('.add-btn');

  /* ----------------------------------------------------- */

  let bbox = box.getBoundingClientRect();

  function addTable() {

    const t = new Table(4, 6);

    box.appendChild(t.getTable());

    bbox = box.getBoundingClientRect();

  }

​

  let lastPos = { x: 0, y: 0 };

​

  function mouseMove(e) {

    // console.log(e.clientX, e.clientY);

    lastPos.x = e.clientX;

    lastPos.y = e.clientY;

    if (lastPos.y>bbox.top && lastPos.y<bbox.bottom && 

      lastPos.x > bbox.left && lastPos.x<bbox.right) {

      mouseEl.innerHTML = `x: ${lastPos.x} | y: ${lastPos.y}`;

    }

  }

​

  btn.addEventListener('click', addTable);

  document.addEventListener('mousemove', mouseMove);

}

​

​

init();

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​