@kdcloudjs/table 1.0.0

package/lib/table/pipeline/features/__test__/treeMode.test.js

@@ -0,0 +1,206 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
+
+var _treeMode = require("../treeMode");
+
+var _pipeline = require("../../pipeline");
+
+var _enzyme = require("enzyme");
+
+var _reactHooks = require("@testing-library/react-hooks");
+
+function makeChildren(prefix) {
+  return [{
+    id: "".concat(prefix, "-1"),
+    title: '二级标题',
+    dept: '应用部',
+    dest: '云南大理',
+    guide: 'Douglas Lee',
+    children: [{
+      id: "".concat(prefix, "-1-1"),
+      title: '三级标题',
+      dept: '平台大前端-UED',
+      dest: '云南大理',
+      guide: 'Douglas Lee'
+    }, {
+      id: "".concat(prefix, "-1-2"),
+      title: '三级标题',
+      dept: '平台大前端-前端',
+      dest: '云南大理',
+      guide: 'Douglas Lee'
+    }]
+  }, {
+    id: "".concat(prefix, "-2"),
+    title: '二级标题',
+    dept: '应用部',
+    dest: '云南大理',
+    guide: 'Douglas Lee',
+    children: [{
+      id: "".concat(prefix, "-2-1"),
+      title: '三级标题',
+      dept: '平台大前端-UED',
+      dest: '云南大理',
+      guide: 'Douglas Lee'
+    }, {
+      id: "".concat(prefix, "-2-2"),
+      title: '三级标题',
+      dept: '平台大前端-前端',
+      dest: '云南大理',
+      guide: 'Douglas Lee'
+    }]
+  }, {
+    id: "".concat(prefix, "-3"),
+    title: '二级标题',
+    dept: '应用部',
+    dest: '云南大理',
+    guide: 'Douglas Lee'
+  }];
+}
+
+var dataSource = [{
+  id: '1',
+  title: '一级标题',
+  dept: '云苍穹-前端',
+  dest: 'South Maddison',
+  guide: 'Don Moreno',
+  children: makeChildren('1')
+}, {
+  id: '2',
+  title: '一级标题',
+  dept: '云苍穹-模型',
+  dest: 'Emilhaven',
+  guide: 'Douglas Richards',
+  children: makeChildren('2')
+}, {
+  id: '3',
+  title: '一级标题',
+  dept: '云苍穹-基础',
+  dest: '云南大理',
+  guide: 'Douglas Lee',
+  children: makeChildren('3')
+}, {
+  id: '4',
+  title: '一级标题',
+  dept: '云苍穹-体验',
+  dest: '杭州千岛湖',
+  guide: 'Eric Castillo',
+  children: makeChildren('4')
+}, {
+  id: '5',
+  title: '一级标题',
+  dept: '云苍穹-运营',
+  dest: 'East Karl',
+  guide: 'Herbert Patton'
+}];
+var columns = [{
+  code: 'title',
+  name: '标题',
+  width: 200,
+  getCellProps: function getCellProps() {
+    return {
+      style: {
+        background: 'red'
+      }
+    };
+  }
+}, {
+  code: 'dept',
+  name: '部门名称',
+  width: 180
+}, {
+  code: 'dest',
+  name: '团建目的地',
+  width: 160
+}, {
+  code: 'guide',
+  name: '当地导游',
+  width: 160
+}];
+describe('treeMode 单元测试', function () {
+  var opts = {
+    openKeys: ['4', '4-2'],
+    clickArea: 'content',
+    onChangeOpenKeys: jest.fn()
+  };
+  var newPipeline = null;
+  beforeEach(function () {
+    var _renderHook = (0, _reactHooks.renderHook)(function () {
+      return (0, _pipeline.useTablePipeline)({
+        primaryKey: 'id'
+      }).input({
+        dataSource: dataSource,
+        columns: columns
+      });
+    }),
+        result = _renderHook.result;
+
+    var tablePipeline = result.current;
+    newPipeline = (0, _treeMode.treeMode)(opts)(tablePipeline);
+  });
+  afterEach(function () {
+    newPipeline = null;
+    opts.onChangeOpenKeys.mockClear();
+  });
+  it('初始化展示', function () {
+    // 5 + 3 + 2
+    expect(newPipeline.getDataSource().length).toBe(10);
+  });
+  it('展开图标单元格渲染', function () {
+    var col = newPipeline.getColumns();
+    var wrapper = (0, _enzyme.mount)(col[0].render('一级标题', newPipeline.getDataSource()[0], 0));
+    expect((0, _find.default)(wrapper).call(wrapper, 'CaretRightIcon').length).toBe(1);
+    var div = (0, _find.default)(wrapper).call(wrapper, 'div').at(0);
+    div.simulate('click');
+    expect(opts.onChangeOpenKeys).toHaveBeenCalled();
+    expect(opts.onChangeOpenKeys).toBeCalledWith(['4', '4-2', '1'], '1', 'expand');
+    opts.onChangeOpenKeys.mockClear(); // 展开列点击
+
+    var expandColWrapper = (0, _enzyme.mount)(col[0].render('一级标题', newPipeline.getDataSource()[3], 3));
+    var div1 = (0, _find.default)(expandColWrapper).call(expandColWrapper, 'div').at(0);
+    div1.simulate('click');
+    expect(opts.onChangeOpenKeys).toBeCalledWith(['4-2'], '4', 'collapse'); // 叶子节点渲染
+
+    var leafWrapper = (0, _enzyme.mount)(col[0].render('一级标题', newPipeline.getDataSource()[9], 9));
+    expect((0, _find.default)(leafWrapper).call(leafWrapper, '.expansion-cell.leaf').length).toBe(2);
+  });
+  it('getCellProps', function () {
+    var col = newPipeline.getColumns(); // clickArea: 'content' 取默认的cellProps
+
+    expect(col[0].getCellProps()).toEqual({
+      style: {
+        background: 'red'
+      }
+    });
+  });
+  it('clickArea 为cell', function () {
+    var _renderHook2 = (0, _reactHooks.renderHook)(function () {
+      return (0, _pipeline.useTablePipeline)({
+        primaryKey: 'id'
+      }).input({
+        dataSource: dataSource,
+        columns: columns
+      });
+    }),
+        result = _renderHook2.result;
+
+    var tablePipeline = result.current;
+    opts.clickArea = 'cell';
+    var newPipeline = (0, _treeMode.treeMode)(opts)(tablePipeline);
+    var col = newPipeline.getColumns();
+    var cellProps = col[0].getCellProps('一级标题', newPipeline.getDataSource()[0], 0);
+    expect(cellProps.style).toEqual({
+      background: 'red',
+      cursor: 'pointer'
+    });
+    cellProps.onClick();
+    expect(opts.onChangeOpenKeys).toHaveBeenCalled(); // 叶子节点cellProps
+
+    var leafCellProps = col[0].getCellProps('一级标题', newPipeline.getDataSource()[9], 9);
+    expect(leafCellProps.style).toEqual({
+      background: 'red'
+    });
+  });
+});

package/lib/table/pipeline/features/autoFill.d.ts

@@ -0,0 +1,4 @@
+import { TablePipeline } from '../pipeline';
+export declare const FILL_COLUMN_CODE = "$_fill_column_&";
+export declare const tableWidthKey = "tableWidth";
+export declare const autoFillTableWidth: () => (pipeline: TablePipeline) => TablePipeline;

package/lib/table/pipeline/features/autoFill.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.autoFillTableWidth = exports.tableWidthKey = exports.FILL_COLUMN_CODE = void 0;
+
+var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
+
+var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
+
+var _splice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/splice"));
+
+var _calculations = require("../../base/calculations");
+
+var _utils = require("../../utils");
+
+var FILL_COLUMN_CODE = '$_fill_column_&';
+exports.FILL_COLUMN_CODE = FILL_COLUMN_CODE;
+var tableWidthKey = 'tableWidth';
+exports.tableWidthKey = tableWidthKey;
+var fillColumnWidthKey = 'fillColumnWidth';
+
+var autoFillTableWidth = function autoFillTableWidth() {
+  return function (pipeline) {
+    var width = pipeline.getStateAtKey(fillColumnWidthKey, 0);
+    var columns = pipeline.getColumns();
+    var fillColumns = (0, _find.default)(columns).call(columns, function (col) {
+      return col.code === FILL_COLUMN_CODE;
+    });
+
+    if (fillColumns) {
+      fillColumns.width = width;
+    } else {
+      var rightNestedLockCount = (0, _calculations.getLeftNestedLockCount)((0, _slice.default)(columns).call(columns).reverse());
+      var spliceIndex = columns.length - rightNestedLockCount;
+      var _fillColumns = {
+        name: '',
+        code: FILL_COLUMN_CODE,
+        width: width,
+        features: {
+          resizeable: false
+        }
+      };
+      (0, _splice.default)(columns).call(columns, spliceIndex, 0, _fillColumns);
+    }
+
+    pipeline.columns(columns);
+    setAutoFillWidth(pipeline);
+    return pipeline;
+  };
+};
+
+exports.autoFillTableWidth = autoFillTableWidth;
+
+var setAutoFillWidth = function setAutoFillWidth(pipeline) {
+  var tableWidth = pipeline.getStateAtKey(tableWidthKey);
+  if (!tableWidth) return;
+  var columnWidthSum = 0;
+  pipeline.mapColumns((0, _utils.makeRecursiveMapper)(function (col) {
+    var width = col.width,
+        code = col.code;
+
+    if ((0, _utils.isLeafNode)(col) && code !== FILL_COLUMN_CODE) {
+      var resizeColumn = pipeline.getStateAtKey('columnResize');
+      columnWidthSum += resizeColumn && resizeColumn[code] || width;
+    }
+
+    return col;
+  }));
+  var fillColumnWidth = Math.floor(tableWidth - columnWidthSum);
+  fillColumnWidth = fillColumnWidth > 0 ? fillColumnWidth : 0;
+  var preWidth = pipeline.getStateAtKey(fillColumnWidthKey, 0);
+
+  if (preWidth !== fillColumnWidth) {
+    pipeline.setStateAtKey('fillColumnWidth', fillColumnWidth);
+  }
+};

package/lib/table/pipeline/features/autoRowSpan.d.ts

@@ -0,0 +1,2 @@
+import { TablePipeline } from '../pipeline';
+export declare function autoRowSpan(): (pipeline: TablePipeline) => TablePipeline;

package/lib/table/pipeline/features/autoRowSpan.js

@@ -0,0 +1,84 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.autoRowSpan = autoRowSpan;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _internals = require("../../internals");
+
+var _utils = require("../../utils");
+
+function isIdentity(x, y) {
+  return x === y;
+}
+
+function autoRowSpan() {
+  return function autoRowSpanStep(pipeline) {
+    var dataSource = pipeline.getDataSource();
+    return pipeline.mapColumns((0, _utils.makeRecursiveMapper)(function (col, _ref) {
+      var startIndex = _ref.startIndex,
+          endIndex = _ref.endIndex;
+
+      var _a;
+
+      if (!((_a = col.features) === null || _a === void 0 ? void 0 : _a.autoRowSpan)) {
+        return col;
+      }
+
+      if (!(0, _utils.isLeafNode)(col)) {
+        return col;
+      }
+
+      var isFunc = typeof col.features.autoRowSpan === 'function';
+      var shouldMergeCell = isFunc ? col.features.autoRowSpan : isIdentity;
+      var spanRects = [];
+      var lastBottom = 0;
+      var prevValue = null;
+      var prevRow = null;
+
+      for (var rowIndex = 0; rowIndex < dataSource.length; rowIndex++) {
+        var row = dataSource[rowIndex];
+
+        var value = _internals.internals.safeGetValue(col, row, rowIndex);
+
+        if (rowIndex === 0 || !shouldMergeCell(prevValue, value, prevRow, row)) {
+          var spanRect = {
+            top: lastBottom,
+            bottom: rowIndex,
+            left: startIndex,
+            right: endIndex
+          };
+
+          for (var i = lastBottom; i < rowIndex; i++) {
+            spanRects.push(spanRect);
+          }
+
+          lastBottom = rowIndex;
+        }
+
+        prevValue = value;
+        prevRow = row;
+      }
+
+      for (var _i = lastBottom; _i < dataSource.length; _i++) {
+        spanRects.push({
+          top: lastBottom,
+          bottom: dataSource.length,
+          left: startIndex,
+          right: endIndex
+        });
+      }
+
+      return (0, _extends2.default)((0, _extends2.default)({}, col), {
+        getSpanRect: function getSpanRect(value, row, rowIndex) {
+          return spanRects[rowIndex];
+        }
+      });
+    }));
+  };
+}

package/lib/table/pipeline/features/buildTree.d.ts

@@ -0,0 +1,2 @@
+import { TablePipeline } from '../pipeline';
+export declare function buildTree(idProp: string, parentIdProp: string): (pipeline: TablePipeline) => TablePipeline;

package/lib/table/pipeline/features/buildTree.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.buildTree = buildTree;
+
+var _utils = require("../../utils");
+
+function buildTree(idProp, parentIdProp) {
+  return function (pipeline) {
+    return pipeline.mapDataSource(function (rows) {
+      return (0, _utils.buildTree)(idProp, parentIdProp, rows);
+    });
+  };
+}

package/lib/table/pipeline/features/columnDrag.d.ts

@@ -0,0 +1,6 @@
+import { TablePipeline } from '../pipeline';
+import { ArtColumn } from '../../interfaces';
+export interface ColumnDragOptions {
+    onColumnDragStopped?: (columnMoved: boolean, columns: ArtColumn[]) => void;
+}
+export declare function columnDrag(opts?: ColumnDragOptions): (pipeline: TablePipeline) => TablePipeline;

package/lib/table/pipeline/features/columnDrag.js

@@ -0,0 +1,278 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.columnDrag = columnDrag;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _utils = require("../../utils");
+
+var _autoFill = require("./autoFill");
+
+var stateKey = 'columnDrag';
+
+function sortColumns(cloumns, sort) {
+  var res = new Array(cloumns.length);
+
+  while (cloumns.length) {
+    var cloumn = cloumns.pop();
+    res[sort[cloumn.code]] = cloumn;
+  }
+
+  return res;
+}
+
+function columnDrag() {
+  var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return function (pipeline) {
+    var _pipeline$getStateAtK = pipeline.getStateAtKey(stateKey, {}),
+        cloumnsSortData = _pipeline$getStateAtK.cloumnsSortData,
+        cloumnsTranslateData = _pipeline$getStateAtK.cloumnsTranslateData;
+
+    var columns = pipeline.getColumns();
+
+    if (cloumnsSortData) {
+      columns = sortColumns(columns, cloumnsSortData);
+    }
+
+    pipeline.columns((0, _filter.default)(columns).call(columns, function (column) {
+      return column;
+    }));
+    return pipeline.mapColumns((0, _utils.makeRecursiveMapper)(function (col) {
+      var style = cloumnsTranslateData ? {
+        transition: '.3s',
+        transform: "translate3d(".concat(cloumnsTranslateData[col.code], "px, 0px, 0px)")
+      } : {};
+      var prevGetCellProps = col.getCellProps; // !col.code: 选择列 col.lock: 固定列 不允许拖拽
+
+      if (col.lock || !col.code) return col;
+      return (0, _extends2.default)((0, _extends2.default)({}, col), {
+        getCellProps: function getCellProps(value, record, rowIndex) {
+          var prevCellProps = prevGetCellProps === null || prevGetCellProps === void 0 ? void 0 : prevGetCellProps(value, record, rowIndex);
+          return (0, _utils.mergeCellProps)(prevCellProps, {
+            style: style
+          });
+        },
+        headerCellProps: (0, _utils.mergeCellProps)(col.headerCellProps, {
+          onMouseDown: function onMouseDown(e) {
+            if (e.button !== 0) {
+              return;
+            } // const cx = e.clientX
+            // const width = col.width
+            // const a = startIndex
+            // const b = endIndex
+            // const newColumnDragData = [...columnDragData]
+            // let newColumn = [...columns]
+            // let newStartIndex = startIndex
+            // let endIdx = endIndex
+
+
+            var columnMoved = false;
+            var columns = pipeline.getColumns();
+
+            var _pipeline$getStateAtK2 = pipeline.getStateAtKey(stateKey, {}),
+                cloumnsSortData = _pipeline$getStateAtK2.cloumnsSortData,
+                cloumnsTranslateData = _pipeline$getStateAtK2.cloumnsTranslateData;
+
+            if (cloumnsSortData) {
+              columns = sortColumns(columns, cloumnsSortData);
+            } else {
+              cloumnsSortData = {};
+              columns.forEach(function (item, index) {
+                cloumnsSortData[item.code] = index;
+              });
+            }
+
+            var currentTarget = e.currentTarget;
+            var rect = e.currentTarget.parentElement.getClientRects()[0];
+            var startX = rect.left;
+            var moveData = [];
+
+            function handleMouseMove(e) {
+              if (e.clientX - startX < 20) {
+                return;
+              } else {
+                e.stopPropagation();
+              }
+
+              document.body.style.userSelect = 'none';
+              currentTarget.style.cursor = 'move'; // 计算平移位置
+
+              var replaceIndex = 0;
+              var totalWitdth = columns[replaceIndex].width;
+
+              while (totalWitdth < e.clientX - startX && replaceIndex < columns.length - 1) {
+                replaceIndex++;
+                totalWitdth += columns[replaceIndex].width;
+              } // 重置位置信息
+
+
+              cloumnsTranslateData = {};
+              columns.forEach(function (item) {
+                cloumnsTranslateData[item.code] = 0;
+              }); // 循环计算每一个的位置
+              // if (startIndex !== replaceIndex) {
+              //   const optionColumn = columns[startIndex]
+              //   const move = startIndex > replaceIndex ? 1 : -1
+              //   let index = Math.min(startIndex, replaceIndex)
+              //   while (index < Math.max(startIndex, replaceIndex)) {
+              //     const code = columns[index].code
+              //     cloumnsTranslateData[code] += move * optionColumn.width
+              //     cloumnsTranslateData[optionColumn.code] -= move * optionColumn.width
+              //     index += move
+              //   }
+              // }
+              // const opColumn = columns[startIndex]
+              // let index = Math.min(startIndex, replaceIndex)
+              // while (index <= Math.max(startIndex, replaceIndex)) {
+              //   const code = columns[index].code
+              //   if (index !== startIndex && index !== replaceIndex) {
+              //     cloumnsTranslateData[code] += opColumn.width * (index > startIndex ? -1 : 1)
+              //     cloumnsTranslateData[opColumn.code] += columns[index].width * (index < startIndex ? -1 : 1)
+              //   }
+              //   index++
+              // }
+              // 需要取最新startIndex, 不能直接用makeRecursiveMapper提供的startIndex（因为map时还没添加选择列、充满列等后面use添加的列）
+
+              var startIndex;
+              var leafColumns = (0, _utils.collectNodes)((0, _utils.collectNodes)(columns, 'leaf-only'));
+              leafColumns.forEach(function (column, index) {
+                if (column.code === col.code) {
+                  startIndex = index;
+                }
+              });
+              var optionColumn = columns[startIndex];
+              var index = replaceIndex;
+
+              if (startIndex > replaceIndex) {
+                // 左移
+                while (index < startIndex) {
+                  var code = columns[index].code;
+
+                  if (code && code !== _autoFill.FILL_COLUMN_CODE && !columns[index].lock) {
+                    cloumnsTranslateData[code] += optionColumn.width;
+                    cloumnsTranslateData[optionColumn.code] -= columns[index].width;
+                    columnMoved = true;
+                  }
+
+                  index++;
+                }
+              } else if (startIndex < replaceIndex) {
+                // 右移
+                while (startIndex < index) {
+                  var _code = columns[index].code;
+
+                  if (_code && _code !== _autoFill.FILL_COLUMN_CODE && !columns[index].lock) {
+                    cloumnsTranslateData[_code] -= optionColumn.width;
+                    cloumnsTranslateData[optionColumn.code] += columns[index].width;
+                    columnMoved = true;
+                  }
+
+                  index--;
+                }
+              } else {// 不动或者移动回原位
+              }
+
+              window.requestAnimationFrame(function () {
+                pipeline.setStateAtKey(stateKey, {
+                  cloumnsSortData: cloumnsSortData,
+                  cloumnsTranslateData: cloumnsTranslateData
+                });
+                moveData = [startIndex, replaceIndex];
+              });
+            }
+
+            function handleMouseUp(e) {
+              e.stopPropagation();
+              document.body.removeEventListener('mousemove', handleMouseMove);
+              document.body.removeEventListener('mouseup', handleMouseUp);
+              window.requestAnimationFrame(function () {
+                var _moveData = moveData,
+                    _moveData2 = (0, _slicedToArray2.default)(_moveData, 2),
+                    startIndex = _moveData2[0],
+                    replaceIndex = _moveData2[1];
+
+                var optionColumn = columns[startIndex]; // const move = startIndex > replaceIndex ? 1 : -1
+                // let index = Math.min(startIndex, replaceIndex)
+                // while (index < Math.max(startIndex, replaceIndex) && index > 0) {
+                //   const code = columns[index].code
+                //   cloumnsSortData[optionColumn.code] -= move
+                //   cloumnsSortData[code] += move
+                //   index += move
+                // }
+
+                var index = replaceIndex;
+
+                if (startIndex > replaceIndex) {
+                  // 左移
+                  while (index < startIndex) {
+                    var code = columns[index].code;
+
+                    if (code && code !== _autoFill.FILL_COLUMN_CODE && !columns[index].lock) {
+                      cloumnsSortData[code] += 1;
+                      cloumnsSortData[optionColumn.code] -= 1;
+                      columnMoved = true;
+                    }
+
+                    index++;
+                  }
+                } else if (startIndex < replaceIndex) {
+                  // 右移
+                  while (index > startIndex) {
+                    var _code2 = columns[index].code;
+
+                    if (_code2 && _code2 !== _autoFill.FILL_COLUMN_CODE && !columns[index].lock) {
+                      cloumnsSortData[_code2] -= 1;
+                      cloumnsSortData[optionColumn.code] += 1;
+                      columnMoved = true;
+                    }
+
+                    index--;
+                  }
+                }
+
+                var onColumnDragStopped = opts.onColumnDragStopped; // 拖拽结束返回列顺序
+
+                if (onColumnDragStopped) {
+                  var _context;
+
+                  var newColumns = (0, _filter.default)(_context = sortColumns(columns, cloumnsSortData)).call(_context, function (_ref) {
+                    var code = _ref.code;
+                    return code !== _autoFill.FILL_COLUMN_CODE;
+                  }); // TODO drag需要在resize之后use,否则这里返回的列对应的宽度不是拖拽后的
+
+                  onColumnDragStopped(columnMoved, newColumns);
+                }
+
+                pipeline.setStateAtKey(stateKey, {
+                  cloumnsSortData: cloumnsSortData,
+                  cloumnsTranslateData: null
+                });
+              });
+              document.body.style.userSelect = '';
+              currentTarget.style.opacity = '';
+              currentTarget.style.cursor = '';
+              currentTarget = null;
+            }
+
+            document.body.addEventListener('mousemove', handleMouseMove);
+            document.body.addEventListener('mouseup', handleMouseUp);
+
+            document.body.onselectstart = function () {
+              return false;
+            };
+          },
+          style: style
+        })
+      });
+    }));
+  };
+}