vue-grid-layout数据可视化图表面板优化过程所遇问题汇总

drag: function (e) {
    let parentRect = document.getElementById('content').getBoundingClientRect();
 }

const { offsetY: top, offsetX: left } = e;
el.dragging.data = { top, left };
const new_pos = el.calcXY(top, left);

import { onUnmounted } from 'vue';
import { BaseHooksData } from '@dashboard/grid-panel/hooks/useHooks';
import { IGridPos, PanelModel } from '@/typings';
import useDashboardModuleStore, { getNewPanel } from '@store/dashboard';
import { initPanel, VIRTUAL_ROOT } from '@/constants';
import { throttle } from 'lodash';
import { deepClone } from '@/utils';
import usePanelEditorStore from '@store/panelEditor';
import createUID from '@/utils/createUID';

export default function useDragMove(
  data: Partial<BaseHooksData>,
  getLayout: () => void,
  editChart: (panel: PanelModel) => void,
) {
  const {
    layout,
    gridLayoutRef,
    gridItemRefs,
  } = data;
  const PanelEditorModule = usePanelEditorStore();
  const DashboardModule = useDashboardModuleStore();
  // 移动的临时组件
  let panel: PanelModel = null;
  let dragPos: IGridPos;
  onUnmounted(() => {
    dragPos = null;
    panel = null;
  });

  /**
   * 图表拖到仪表盘，穿件图表
   * @param e
   */
  function dragenter(e: DragEvent) {
    e.preventDefault();
    console.log('————————鼠标进入编辑器区域');
    if (layout.value.findIndex(item => item.i === 'drop') === -1) {
      const { addPanelData = deepClone(initPanel), addPanelType: type } = PanelEditorModule;
      const { space_uid } = DashboardModule.dashboard;
      panel = getNewPanel(type, new PanelModel({
        ...addPanelData,
        uid: 'drop',
        type,
        space_uid,
      }));
      dragPos = panel.gridPos;
      layout.value.push(dragPos);
    }
  }
  const dragoverThrottle = throttle((e: DragEvent) => {
    const index = layout.value.findIndex(item => item.i === 'drop');
    if (index === -1) {
      return;
    }
    const el = gridItemRefs.value[index];
    if (!el) {
      return;
    }
    const { offsetY: top, offsetX: left } = e;
    el.dragging.data = { top, left };
    const new_pos = el.calcXY(top, left);
    const { h, w } = panel.gridPos;
    gridLayoutRef.value.dragEvent('dragstart', 'drop', new_pos.x, new_pos.y, h, w);
    dragPos.x = layout.value[index].x;
    dragPos.y = layout.value[index].y;
  }, 300);
  function dragover(e: DragEvent) {
    e.preventDefault();
    dragoverThrottle(e);
  }

  function leaveDragArea(refresh = true) {
    const { x, y, h, w } = dragPos;
    gridLayoutRef.value.dragEvent('dragend', 'drop', x, y, h, w);
    // 强制隐藏placeholder
    let t =    setTimeout(() => {
      if (gridLayoutRef.value.isDragging) {
        gridLayoutRef.value.isDragging = false;
      }
      clearTimeout(t);
      t = null;
    }, 100);
    if (refresh) {
      panel = null;
      layout.value = layout.value.filter(item => item.i !== 'drop');
    }
  }


  function dragleave(e: DragEvent) {
    console.log('dragleave');
    const { offsetX, offsetY, clientX, clientY } = e;
    if (!((clientX === 0 && clientY === 0) && (offsetX < 0 && offsetY < 0))) {
      console.log('鼠标离开编辑器区域————————');
      leaveDragArea();
    }
  }

  function drop(e: DragEvent) {
    console.log('drop');
    e.preventDefault();
    const { type } = panel;
    leaveDragArea(false);
    if (['row', 'tab', 'column'].includes(type)) {
      const uid = createUID();
      panel.uid = uid;
      panel.gridPos.i = uid;
      DashboardModule.addCharts([panel]);
    } else {
      panel.uid = VIRTUAL_ROOT;
      panel.gridPos.i = VIRTUAL_ROOT;
      DashboardModule.addCharts([panel]);
      editChart(panel);
    }
    getLayout();
  }

  return {
    dragenter,
    dragover,
    dragleave,
    drop,
  };
}