lingji-work-fe/src/views/components/drag/DraggableResizable.vue

<template>
  <div :id="id" ref="container" class="draggable-resizable" :style="containerStyle">
    <div class="header" @mousedown.prevent="onMouseDown" :style="{ cursor: mouseCursor }">
      {{ id }}
    </div>

    <div
      v-for="dir in directions"
      :key="dir"
      :class="['resize-handle', dir]"
      @mousedown.stop.prevent="onResizeHandleMouseDown(dir, $event)"
    ></div>
  </div>
</template>

<script setup lang="ts" name="DraggableResizable">
import type { PropType } from 'vue';
import { ref, reactive, defineProps, defineEmits } from 'vue';

const props = defineProps({
  id: {
    type: String,
    required: true,
  },
  x: {
    type: Number,
    required: true,
  },
  y: {
    type: Number,
    required: true,
  },
  width: {
    type: Number,
    required: true,
  },
  height: {
    type: Number,
    required: true,
  },
  zIndex: {
    type: String,
    default: '1',
    required: true,
  },
  snapDistance: {
    type: Number,
    default: 20,
  },
  onDrag: {
    type: Function,
    required: true,
  },
  onResize: {
    type: Function,
    required: true,
  },
  detectCollision: {
    type: Function,
    required: true,
  },
  detectSnap: {
    type: Function,
    required: true,
  },
  checkClosestComponent: {
    type: Function,
    required: true,
  },
  setCurrentComponent: {
    type: Function,
    required: true,
  },
  handleCollision: {
    type: Function,
    required: true,
  },
  directions: {
    type: Array as PropType<string[]>,
    required: false,
    default: ['top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right'],
  },
});

const emit = defineEmits(['drag', 'resize']);
const mouseCursor = ref('grab');

const isCollied = ref(false);
const isSnap = ref(false);
const startX = ref(0);
const startY = ref(0);
const startLeft = ref(0);
const startTop = ref(0);

const container = ref<HTMLElement | null>(null);
const ghost = ref<HTMLElement | null>(null);

const containerStyle = reactive({
  id: `${props.id}`,
  width: `${props.width}px`,
  height: `${props.height}px`,
  top: `${props.y}px`,
  left: `${props.x}px`,
  zIndex: props.zIndex,
  transition: 'none',
});

const updatePosition = (left: number, top: number, snap = false) => {
  isSnap.value = snap;
  if (isSnap.value) {
    containerStyle.transition = 'left 0.08s ease-out, top 0.08s ease-out';
  } else {
    containerStyle.transition = 'none';
  }
  containerStyle.left = `${left}px`;
  containerStyle.top = `${top}px`;
};

const updateGhostPosition = (left: number, top: number) => {
  if (ghost.value) {
    ghost.value.style.left = `${left}px`;
    ghost.value.style.top = `${top}px`;
  }
};

const updateSize = (width: number, height: number) => {
  containerStyle.width = `${width}px`;
  containerStyle.height = `${height}px`;
};

const onMouseDown = (event: MouseEvent) => {
  mouseCursor.value = 'grabbing';
  startX.value = event.clientX;
  startY.value = event.clientY;
  startLeft.value = parseInt(containerStyle.left);
  startTop.value = parseInt(containerStyle.top);
  props.setCurrentComponent(containerStyle);
  containerStyle.zIndex = '3';

  ghost.value = document.createElement('div');
  ghost.value.style.width = containerStyle.width;
  ghost.value.style.height = containerStyle.height;
  ghost.value.style.backgroundColor = '#E33B54';
  ghost.value.style.zIndex = '1';
  ghost.value.style.position = 'absolute';
  ghost.value.style.left = containerStyle.left;
  ghost.value.style.top = containerStyle.top;
  const fatherEle = document.getElementById(props.id);
  fatherEle?.appendChild(ghost.value);

  const onMouseMove = (moveEvent: MouseEvent) => {
    //* 使用 requestAnimationFrame 来优化性能
    requestAnimationFrame(() => {
      const newLeft = startLeft.value + (moveEvent.clientX - startX.value);
      const newTop = startTop.value + (moveEvent.clientY - startY.value);
      updateGhostPosition(newLeft, newTop);
      // const closestComponent = props.checkClosestComponent(
      //   props.id,
      //   newLeft,
      //   newTop,
      //   parseInt(containerStyle.width),
      //   parseInt(containerStyle.height),
      // );
      //* console.log('closestComponent', closestComponent);
      updatePosition(newLeft, newTop, false);
    });
  };

  const onMouseUp = (moveEvent: MouseEvent) => {
    moveAndResize(moveEvent);
    mouseCursor.value = 'grab';
    document.removeEventListener('mousemove', onMouseMove);
    document.removeEventListener('mouseup', onMouseUp);
    if (isCollied.value) {
      containerStyle.zIndex = '3';
    } else {
      containerStyle.zIndex = '1';
      isCollied.value = false;
    }
    containerStyle.transition = 'none';
    console.log('containerStyle', containerStyle);
  };

  document.addEventListener('mousemove', onMouseMove);
  document.addEventListener('mouseup', onMouseUp);
  ghost.value.parentNode?.removeChild(ghost.value);
};

const moveAndResize = (moveEvent: MouseEvent) => {
  const newLeft = startLeft.value + (moveEvent.clientX - startX.value);
  const newTop = startTop.value + (moveEvent.clientY - startY.value);
  console.log(newLeft);
  console.log(newTop);

  // containerStyle.zIndex = '3';

  //* 使用 requestAnimationFrame 来优化性能
  requestAnimationFrame(() => {
    //* 检测吸附
    const snapResult = props.detectSnap(
      props.id,
      newLeft,
      newTop,
      parseInt(containerStyle.width),
      parseInt(containerStyle.height),
      props.snapDistance,
    );
    let finalLeft = snapResult.left;
    let finalTop = snapResult.top;
    isSnap.value = snapResult.isSnap;
    console.log('finalLeft', finalLeft);
    console.log('finalTop', finalTop);

    const colliedInfo = props.detectCollision(
      props.id,
      finalLeft,
      finalTop,
      parseInt(containerStyle.width),
      parseInt(containerStyle.height),
    );

    isCollied.value = colliedInfo.value;

    updatePosition(finalLeft, finalTop, isSnap.value);
    emit('drag', props.id, parseInt(containerStyle.left), parseInt(containerStyle.top));

    //* 检测边界和碰撞
    //todo
    //* if (!colliedInfo.value) {
    //*   updatePosition(finalLeft, finalTop, isSnap);
    //* } else {
    //*   const colliedComponent = colliedInfo.colliedComponent;
    //*   const collidedDirection = colliedInfo.collidedDirection;
    //*   if (colliedComponent && collidedDirection) {
    //*     //* 左右两边碰撞，则只移动垂直方向
    //*     if (
    //*       collidedDirection === 'left' ||
    //*       (collidedDirection === 'right' &&
    //*         (parseInt(containerStyle.height) + finalTop >= colliedComponent.y ||
    //*           finalTop <= colliedComponent.y + parseInt(colliedComponent.height)))
    //*     ) {
    //*       containerStyle.top = `${finalTop}px`;
    //*     }
    //*     //* 上下两边碰撞，则只移动水平方向
    //*     if (
    //*       collidedDirection === 'top' ||
    //*       (collidedDirection === 'bottom' &&
    //*         (parseInt(containerStyle.width) + finalLeft >= colliedComponent.x ||
    //*           finalLeft <= colliedComponent.x + parseInt(colliedComponent.width)))
    //*     ) {
    //*       containerStyle.left = `${finalLeft}px`;
    //*     }
    //*   }
    //* }
  });
};

/**
 * 组件resize事件
 * @param dir
 * @param event
 */
const onResizeHandleMouseDown = (dir: string, event: MouseEvent) => {
  const startX = event.clientX;
  const startY = event.clientY;
  const startWidth = parseInt(containerStyle.width);
  const startHeight = parseInt(containerStyle.height);
  const startLeft = parseInt(containerStyle.left);
  const startTop = parseInt(containerStyle.top);

  const onMouseMove = (moveEvent: MouseEvent) => {
    let newWidth = startWidth;
    let newHeight = startHeight;
    let newLeft = startLeft;
    let newTop = startTop;

    if (dir.includes('right')) {
      newWidth = startWidth + (moveEvent.clientX - startX);
    } else if (dir.includes('left')) {
      newWidth = startWidth - (moveEvent.clientX - startX);
      newLeft = startLeft + (moveEvent.clientX - startX);
    }

    if (dir.includes('bottom')) {
      newHeight = startHeight + (moveEvent.clientY - startY);
    } else if (dir.includes('top')) {
      newHeight = startHeight - (moveEvent.clientY - startY);
      newTop = startTop + (moveEvent.clientY - startY);
    }

    //* 使用 requestAnimationFrame 来优化性能
    requestAnimationFrame(() => {
      //* 检测吸附
      const snapResult = props.detectSnap(props.id, newLeft, newTop, newWidth, newHeight, props.snapDistance);
      let finalWidth = snapResult.width;
      let finalHeight = snapResult.height;
      let finalLeft = snapResult.left;
      let finalTop = snapResult.top;
      isSnap.value = snapResult.isSnap;

      updateSize(finalWidth, finalHeight);
      updatePosition(finalLeft, finalTop, isSnap.value);

      return;

      const colliedInfo = props.detectCollision(props.id, finalLeft, finalTop, finalWidth, finalHeight);
      //* 检测碰撞
      if (!colliedInfo.value) {
        updateSize(finalWidth, finalHeight);
        updatePosition(finalLeft, finalTop, isSnap.value);
      } else {
        //todo 当元素的某一边已经吸附，且resize的方向并非和吸附的方向一致，则仍可以进行updateSize
        const colliedComponent = colliedInfo.colliedComponent;
        const collidedDirection = colliedInfo.collidedDirection;
        if (colliedComponent && collidedDirection) {
          //* 左右两边碰撞，则只移动垂直方向
          if (
            collidedDirection === 'left' ||
            (collidedDirection === 'right' &&
              (parseInt(containerStyle.height) + finalTop >= colliedComponent.y ||
                finalTop <= colliedComponent.y + parseInt(colliedComponent.height)))
          ) {
            containerStyle.top = `${finalTop}px`;
          }
          //* 上下两边碰撞，则只移动水平方向
          if (
            collidedDirection === 'top' ||
            (collidedDirection === 'bottom' &&
              (parseInt(containerStyle.width) + finalLeft >= colliedComponent.x ||
                finalLeft <= colliedComponent.x + parseInt(colliedComponent.width)))
          ) {
            containerStyle.left = `${finalLeft}px`;
          }
        }
      }
    });
  };

  const onMouseUp = () => {
    document.removeEventListener('mousemove', onMouseMove);
    document.removeEventListener('mouseup', onMouseUp);
    emit('resize', props.id, parseInt(containerStyle.width), parseInt(containerStyle.height));
  };

  document.addEventListener('mousemove', onMouseMove);
  document.addEventListener('mouseup', onMouseUp);
};

//* 使用 ResizeObserver 来监听容器大小变化
const resizeObserver = new ResizeObserver((entries) => {
  console.log(`entries, ${entries}`);
  const entry = entries[0];
  const { width, height } = entry.contentRect;
  updateSize(width, height);
});

//* 在容器元素存在时，才监听其大小变化
if (container.value) {
  resizeObserver.observe(container.value);
}
</script>

<style lang="scss" scoped>
.draggable-resizable {
  position: absolute;
  background-color: lightblue;
  border: 1px solid #333;
  box-sizing: border-box;
  .header {
    width: 100%;
    background-color: #333;
    height: 40px;
    border-bottom: 1px solid #333;
    color: #fff;
  }
}
.resize-handle {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #333;
  z-index: 1;
}
.resize-handle.top {
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  cursor: n-resize;
}
.resize-handle.bottom {
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  cursor: s-resize;
}
.resize-handle.left {
  left: -5px;
  top: 50%;
  transform: translateY(-50%);
  cursor: w-resize;
}
.resize-handle.right {
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  cursor: e-resize;
}
.resize-handle.top-left {
  top: -5px;
  left: -5px;
  cursor: nw-resize;
}
.resize-handle.top-right {
  top: -5px;
  right: -5px;
  cursor: ne-resize;
}
.resize-handle.bottom-left {
  bottom: -5px;
  left: -5px;
  cursor: sw-resize;
}
.resize-handle.bottom-right {
  bottom: -5px;
  right: -5px;
  cursor: se-resize;
}
</style>