优化切割代码

src/views/book/courseware/create/components/CreateCanvas.vue

@@ -309,111 +309,178 @@ export default {
 
       // 上下移动
       if (['top', 'bottom'].includes(type)) {
-        // 高度为 auto 时
-        if (grid.height === 'auto') {
-          const gridHeight = document.querySelector(`.${id}`).offsetHeight;
-          const height = gridHeight + offsetY;
-          if (height < min_height) {
-            return;
-          }
-          grid.height = `${gridHeight + offsetY}px`;
-          col.grid_template_rows = `0 ${col.grid_list.map(({ height }) => height).join(' 16px ')} 0`;
-          return;
-        }
-        // 高度为数字时
-        const height = Number(grid.height.replace('px', ''));
-        const _h = height + offsetY;
-        if (_h < min_height) {
-          return;
-        }
-        if (_h >= 50) {
-          grid.height = `${_h}px`;
-          col.grid_template_rows = `0 ${col.grid_list.map(({ height }) => height).join(' 16px ')} 0`;
-        }
+        this.handleVerticalMove(col, grid, offsetY, id, min_height);
+        return;
       }
 
-      let gridList = col.grid_list.filter((item) => item.row === grid.row);
       // 一行中有多个格子
+      let gridList = col.grid_list.filter((item) => item.row === grid.row);
       if (gridList.length > 1) {
-        let find = gridList.findIndex((item) => item.id === id);
+        let find = gridList.findIndex((item) => item.id === id); // 当前 id 所在格子索引
         // 移动类型为 left 且不是第一个格子
         if (type === 'left' && find > 0) {
-          const prevGrid = gridList[find - 1];
-          const prevWidth = Number(prevGrid.width.replace('fr', ''));
-          const width = Number(grid.width.replace('fr', ''));
-          const max = prevWidth + width - 10;
-          if (prevWidth + offsetX < 10 || prevWidth + offsetX > max || width - offsetX > max || width - offsetX < 10) {
-            return;
-          }
-          // 计算拖动的距离与总宽度的比例
-          const ratio = (offsetX / document.querySelector('.row').offsetWidth) * 100;
-
-          const _w = width - ratio;
-          if ((_w / 100) * row_width < min_width) {
-            return;
-          }
-          col.grid_list[k - 1].width = `${prevWidth + ratio}fr`;
-          grid.width = `${_w}fr`;
+          this.handleMultGridLeftMoveNotFirstGrid({ gridList, grid, col, find, k, offsetX, min_width, row_width });
         }
 
         // 移动类型为 right 且不是最后一个格子
         if (type === 'right' && find < gridList.length - 1) {
-          let nextGrid = gridList[find + 1];
-          const nextWidth = Number(nextGrid.width.replace('fr', ''));
-          const width = Number(grid.width.replace('fr', ''));
-          const max = nextWidth + width - 10;
-          if (nextWidth - offsetX < 10 || nextWidth - offsetX > max || width + offsetX > max || width + offsetX < 10) {
-            return;
-          }
-          const ratio = (offsetX / document.querySelector('.row').offsetWidth) * 100;
-          const _w = width + ratio;
-          if ((_w / 100) * row_width < min_width) {
-            return;
-          }
-          col.grid_list[k + 1].width = `${nextWidth - ratio}fr`;
-          grid.width = `${width + ratio}fr`;
+          this.handleMultGridRightMoveNotFirstGrid({ gridList, grid, col, find, k, offsetX, min_width, row_width });
         }
         return;
       }
+
       // 移动类型为 left 且不是第一个格子
       if (type === 'left' && j > 0) {
-        const prevGrid = row.width_list[j - 1];
-        const prevWidth = Number(prevGrid.replace('fr', ''));
-        const width = Number(row.width_list[j].replace('fr', ''));
-        const max = prevWidth + width - 10;
-        if (prevWidth + offsetX < 10 || prevWidth + offsetX > max || width - offsetX > max || width - offsetX < 10) {
-          return;
-        }
-        // 计算拖动的距离与总宽度的比例
-        const ratio = (offsetX / document.querySelector('.row').offsetWidth) * 100;
-
-        const _w = width - ratio;
-        if ((_w / 100) * row_width < min_width) {
-          return;
-        }
-        row.width_list[j - 1] = `${prevWidth + ratio}fr`;
-        row.width_list[j] = `${width - ratio}fr`;
+        this.handleLeftMoveNotFirstGrid(row, j, offsetX, min_width, row_width);
       }
 
       // 移动类型为 right 且不是最后一个格子
       if (type === 'right' && j < row.col_list.length - 1) {
-        let nextGrid = row.width_list[j + 1];
-        const nextWidth = Number(nextGrid.replace('fr', ''));
-        const width = Number(row.width_list[j].replace('fr', ''));
-        const max = nextWidth + width - 10;
-        if (nextWidth - offsetX < 10 || nextWidth - offsetX > max || width + offsetX > max || width + offsetX < 10) {
-          return;
-        }
-        const ratio = (offsetX / document.querySelector('.row').offsetWidth) * 100;
-        const _w = width + ratio;
-        if ((_w / 100) * row_width < min_width) {
+        this.handleRightMoveNotLastGrid(row, j, offsetX, min_width, row_width);
+      }
+      this.$forceUpdate();
+    },
+
+    /**
+     * 处理垂直移动
+     * @param {number} col 列数据
+     * @param {object} grid 格子数据
+     * @param {number} offsetY y 轴偏移量
+     * @param {string} id 组件 id
+     * @param {number} min_height 最小高度
+     */
+    handleVerticalMove(col, grid, offsetY, id, min_height) {
+      // 高度为 auto 时
+      if (grid.height === 'auto') {
+        const gridHeight = document.querySelector(`.${id}`).offsetHeight;
+        const height = gridHeight + offsetY;
+        if (height < min_height) {
           return;
         }
-        row.width_list[j + 1] = `${nextWidth - ratio}fr`;
-        row.width_list[j] = `${width + ratio}fr`;
+        grid.height = `${gridHeight + offsetY}px`;
+        col.grid_template_rows = `0 ${col.grid_list.map(({ height }) => height).join(' 16px ')} 0`;
+        return;
       }
-      this.$forceUpdate();
+      // 高度为数字时
+      const height = Number(grid.height.replace('px', ''));
+      const _h = height + offsetY;
+      if (_h < min_height) {
+        return;
+      }
+      if (_h >= 50) {
+        grid.height = `${_h}px`;
+        col.grid_template_rows = `0 ${col.grid_list.map(({ height }) => height).join(' 16px ')} 0`;
+      }
+    },
+
+    /**
+     * 处理左移且不是第一个格子
+     * @param {object} row 行数据
+     * @param {number} j 第几列
+     * @param {number} offsetX x 轴偏移量
+     * @param {number} min_width 最小宽度
+     * @param {number} row_width 行宽度
+     */
+    handleLeftMoveNotFirstGrid(row, j, offsetX, min_width, row_width) {
+      const prevGrid = row.width_list[j - 1];
+      const prevWidth = Number(prevGrid.replace('fr', ''));
+      const width = Number(row.width_list[j].replace('fr', ''));
+      const max = prevWidth + width - 10;
+      if (prevWidth + offsetX < 10 || prevWidth + offsetX > max || width - offsetX > max || width - offsetX < 10) {
+        return;
+      }
+      // 计算拖动的距离与总宽度的比例
+      const ratio = (offsetX / document.querySelector('.row').offsetWidth) * 100;
+
+      const _w = width - ratio;
+      if ((_w / 100) * row_width < min_width) {
+        return;
+      }
+      row.width_list[j - 1] = `${prevWidth + ratio}fr`;
+      row.width_list[j] = `${width - ratio}fr`;
     },
+
+    /**
+     * 处理一行中有多个格子的左移且不是第一个格子
+     * @param {object} gridList 格子列表
+     * @param {object} grid 格子数据
+     * @param {object} col 列数据
+     * @param {number} find 当前 id 所在格子索引
+     * @param {number} k 格子的索引
+     * @param {number} offsetX x 轴偏移量
+     * @param {number} min_width 最小宽度
+     */
+    handleMultGridLeftMoveNotFirstGrid({ gridList, grid, col, find, k, offsetX, min_width, row_width }) {
+      const prevGrid = gridList[find - 1];
+      const prevWidth = Number(prevGrid.width.replace('fr', ''));
+      const width = Number(grid.width.replace('fr', ''));
+      const max = prevWidth + width - 10;
+      if (prevWidth + offsetX < 10 || prevWidth + offsetX > max || width - offsetX > max || width - offsetX < 10) {
+        return;
+      }
+      // 计算拖动的距离与总宽度的比例
+      const ratio = (offsetX / document.querySelector('.row').offsetWidth) * 100;
+
+      const _w = width - ratio;
+      if ((_w / 100) * row_width < min_width) {
+        return;
+      }
+      col.grid_list[k - 1].width = `${prevWidth + ratio}fr`;
+      grid.width = `${_w}fr`;
+    },
+
+    /**
+     * 处理右移且不是最后一个格子
+     * @param {object} row 行数据
+     * @param {number} j 第几列
+     * @param {number} offsetX x 轴偏移量
+     * @param {number} min_width 最小宽度
+     * @param {number} row_width 行宽度
+     */
+    handleRightMoveNotLastGrid(row, j, offsetX, min_width, row_width) {
+      let nextGrid = row.width_list[j + 1];
+      const nextWidth = Number(nextGrid.replace('fr', ''));
+      const width = Number(row.width_list[j].replace('fr', ''));
+      const max = nextWidth + width - 10;
+      if (nextWidth - offsetX < 10 || nextWidth - offsetX > max || width + offsetX > max || width + offsetX < 10) {
+        return;
+      }
+      const ratio = (offsetX / document.querySelector('.row').offsetWidth) * 100;
+      const _w = width + ratio;
+      if ((_w / 100) * row_width < min_width) {
+        return;
+      }
+      row.width_list[j + 1] = `${nextWidth - ratio}fr`;
+      row.width_list[j] = `${width + ratio}fr`;
+    },
+
+    /**
+     * 处理一行中有多个格子的右移且不是最后一个格子
+     * @param {object} gridList 格子列表
+     * @param {object} grid 格子数据
+     * @param {object} col 列数据
+     * @param {number} find 当前 id 所在格子索引
+     * @param {number} k 格子的索引
+     * @param {number} offsetX x 轴偏移量
+     * @param {number} min_width 最小宽度
+     */
+    handleMultGridRightMoveNotFirstGrid({ gridList, grid, col, find, k, offsetX, min_width, row_width }) {
+      let nextGrid = gridList[find + 1];
+      const nextWidth = Number(nextGrid.width.replace('fr', ''));
+      const width = Number(grid.width.replace('fr', ''));
+      const max = nextWidth + width - 10;
+      if (nextWidth - offsetX < 10 || nextWidth - offsetX > max || width + offsetX > max || width + offsetX < 10) {
+        return;
+      }
+      const ratio = (offsetX / document.querySelector('.row').offsetWidth) * 100;
+      const _w = width + ratio;
+      if ((_w / 100) * row_width < min_width) {
+        return;
+      }
+      col.grid_list[k + 1].width = `${nextWidth - ratio}fr`;
+      grid.width = `${width + ratio}fr`;
+    },
+
     /**
      * 重新计算格子宽度
      * @param {number} i 行