SOURCE

const elEventsWeakMap = new WeakMap()
const MIN_WIDTH = 50
const MIN_HEIGHT = 50
const TRIGGER_SIZE = 8
const TOP = 'top'
const BOTTOM = 'bottom'
const LEFT = 'left'
const RIGHT = 'right'
const COL_RESIZE = 'col-resize'
const ROW_RESIZE = 'row-resize'

function getElStyleAttr(element, attr) {
  const styles = window.getComputedStyle(element)
  return styles[attr]
}

function getSiblingByPosition(el, position) {
  const siblingMap = {
    left: el.previousElementSibling,
    right: el.nextElementSibling,
    bottom: el.nextElementSibling,
    top: el.previousElementSibling
  }
  return siblingMap[position]
}

function getSiblingsSize(el, attr) {
  const siblings = el.parentNode.childNodes
  return [...siblings].reduce((prev, next) => (next.getBoundingClientRect()[attr] + prev), 0)
}

function updateSize({
  el,
  sibling,
  formatter = 'px',
  elSize,
  siblingSize,
  attr = 'width'
}) {
  let totalSize = elSize + siblingSize
  if (formatter === 'px') {
    el.style[attr] = elSize + formatter
    sibling.style[attr] = siblingSize + formatter
  } else if (formatter === 'flex') {
    totalSize = getSiblingsSize(el, attr)
    el.style.flex = elSize / totalSize * 10 // 修复 flex-grow <1
    sibling.style.flex = siblingSize / totalSize * 10
  }
}

const initResize = ({
  el,
  positions,
  minWidth = MIN_WIDTH,
  minHeight = MIN_HEIGHT,
  triggerSize = TRIGGER_SIZE,
  formatter = 'px'
}) => {
  if (!el) return
  const resizeState = {}
  const defaultCursor = getElStyleAttr(el, 'cursor')
  const elStyle = el.style

  const canLeftResize = positions.includes(LEFT)
  const canRightResize = positions.includes(RIGHT)
  const canTopResize = positions.includes(TOP)
  const canBottomResize = positions.includes(BOTTOM)

  if (!canLeftResize && !canRightResize && !canTopResize && !canBottomResize) { return } // 未指定方向

  const pointermove = (e) => {
    if (resizeState.resizing) return
    e.preventDefault()
    const { left, right, top, bottom } = el.getBoundingClientRect()
    const { clientX, clientY } = e
    // 左右拉伸
    if (canLeftResize || canRightResize) {
      if (clientX - left < triggerSize) resizeState.position = LEFT
      else if (right - clientX < triggerSize) resizeState.position = RIGHT
      else resizeState.position = ''

      if (resizeState.position === '') {
        elStyle.cursor = defaultCursor
      } else {
        if (getSiblingByPosition(el, resizeState.position)) { elStyle.cursor = COL_RESIZE }
        e.stopPropagation()
      }
    } else if (canTopResize || canBottomResize) {
      // 上下拉伸
      if (clientY - top < triggerSize) resizeState.position = TOP
      else if (bottom - clientY < triggerSize) resizeState.position = BOTTOM
      else resizeState.position = ''

      if (resizeState.position === '') {
        elStyle.cursor = defaultCursor
      } else {
        if (getSiblingByPosition(el, resizeState.position)) { elStyle.cursor = ROW_RESIZE }
        e.stopPropagation()
      }
    }
  }

  const pointerleave = (e) => {
    e.stopPropagation()
    resizeState.position = ''
    elStyle.cursor = defaultCursor
    el.releasePointerCapture(e.pointerId)
  }
  const pointerdown = (e) => {
    const { resizing, position } = resizeState
    if (resizing || !position) return

    if (position) e.stopPropagation() // 如果当前节点存在拉伸方向 需要阻止冒泡(用于嵌套拉伸)
    el.setPointerCapture(e.pointerId)

    const isFlex = getElStyleAttr(el.parentNode, 'display') === 'flex'
    if (isFlex) formatter = 'flex'

    resizeState.resizing = true
    resizeState.startPointerX = e.clientX
    resizeState.startPointerY = e.clientY

    const { width, height } = el.getBoundingClientRect()

    const sibling = getSiblingByPosition(el, position)
    if (!sibling) {
      console.error('未找到兄弟节点', position)
      return
    }

    const rectSibling = sibling.getBoundingClientRect()

    const { startPointerX, startPointerY } = resizeState
    const onDocumentMouseMove = (e) => {
      if (!resizeState.resizing) return
      elStyle.cursor =
        canLeftResize || canRightResize ? COL_RESIZE : ROW_RESIZE
      const { clientX, clientY } = e

      if (position === LEFT || position === RIGHT) {
        const offsetX = clientX - startPointerX
        const elSize = position === RIGHT ? width + offsetX : width - offsetX

        const siblingSize =
          position === RIGHT
            ? rectSibling.width - offsetX
            : rectSibling.width + offsetX
        if (elSize <= minWidth || siblingSize <= minWidth) return

        updateSize({ el, sibling, elSize, siblingSize, formatter })
      } else if (position === TOP || position === BOTTOM) {
        const offsetY = clientY - startPointerY
        const elSize =
          position === BOTTOM ? height + offsetY : height - offsetY

        const siblingSize =
          position === BOTTOM
            ? rectSibling.height - offsetY
            : rectSibling.height + offsetY
        if (elSize <= minHeight || siblingSize <= minHeight) return

        updateSize({ el, sibling, elSize, siblingSize, formatter })
      }
    }

    const onDocumentMouseUp = (e) => {
      document.removeEventListener('mousemove', onDocumentMouseMove)
      document.removeEventListener('mouseup', onDocumentMouseUp)
      resizeState.resizing = false
      elStyle.cursor = defaultCursor
    }

    document.addEventListener('mousemove', onDocumentMouseMove)
    document.addEventListener('mouseup', onDocumentMouseUp)
  }

  const bindElEvents = () => {
    el.addEventListener('pointermove', pointermove)
    el.addEventListener('pointerleave', pointerleave)
    el.addEventListener('pointerup', pointerleave)
    el.addEventListener('pointerdown', pointerdown)
  }

  const unBindElEvents = () => {
    el.removeEventListener('pointermove', pointermove)
    el.removeEventListener('pointerleave', pointerleave)
    el.removeEventListener('pointerup', pointerleave)
    el.removeEventListener('pointerdown', pointerdown)
  }

  bindElEvents()

  // 设置解绑事件
  elEventsWeakMap.set(el, unBindElEvents)
}
export const resize = {
  inserted: function(el, binding) {
    const { modifiers, value } = binding
    const positions = Object.keys(modifiers)
    initResize({ el, positions, ...value })
  },
  unbind: function(el) {
    const unBindElEvents = elEventsWeakMap.get(el)
    unBindElEvents()
  }
}