vue-vben-admin/packages/effects/common-ui/src/components/resize/resize.vue

<script lang="ts" setup>
/**
 * This components is refactored from vue-drag-resize: https://github.com/kirillmurashov/vue-drag-resize
 */

import {
  computed,
  getCurrentInstance,
  nextTick,
  onBeforeUnmount,
  onMounted,
  ref,
  toRefs,
  watch,
} from 'vue';

const props = defineProps({
  stickSize: {
    type: Number,
    default: 8,
  },
  parentScaleX: {
    type: Number,
    default: 1,
  },
  parentScaleY: {
    type: Number,
    default: 1,
  },
  isActive: {
    type: Boolean,
    default: false,
  },
  preventActiveBehavior: {
    type: Boolean,
    default: false,
  },
  isDraggable: {
    type: Boolean,
    default: true,
  },
  isResizable: {
    type: Boolean,
    default: true,
  },
  aspectRatio: {
    type: Boolean,
    default: false,
  },
  parentLimitation: {
    type: Boolean,
    default: false,
  },
  snapToGrid: {
    type: Boolean,
    default: false,
  },
  gridX: {
    type: Number,
    default: 50,
    validator(val: number) {
      return val >= 0;
    },
  },
  gridY: {
    type: Number,
    default: 50,
    validator(val: number) {
      return val >= 0;
    },
  },
  parentW: {
    type: Number,
    default: 0,
    validator(val: number) {
      return val >= 0;
    },
  },
  parentH: {
    type: Number,
    default: 0,
    validator(val: number) {
      return val >= 0;
    },
  },
  w: {
    type: [String, Number],
    default: 200,
    validator(val: number) {
      return typeof val === 'string' ? val === 'auto' : val >= 0;
    },
  },
  h: {
    type: [String, Number],
    default: 200,
    validator(val: number) {
      return typeof val === 'string' ? val === 'auto' : val >= 0;
    },
  },
  minw: {
    type: Number,
    default: 50,
    validator(val: number) {
      return val >= 0;
    },
  },
  minh: {
    type: Number,
    default: 50,
    validator(val: number) {
      return val >= 0;
    },
  },
  x: {
    type: Number,
    default: 0,
    validator(val: number) {
      return typeof val === 'number';
    },
  },
  y: {
    type: Number,
    default: 0,
    validator(val: number) {
      return typeof val === 'number';
    },
  },
  z: {
    type: [String, Number],
    default: 'auto',
    validator(val: number) {
      return typeof val === 'string' ? val === 'auto' : val >= 0;
    },
  },
  dragHandle: {
    type: String,
    default: null,
  },
  dragCancel: {
    type: String,
    default: null,
  },
  sticks: {
    type: Array<'bl' | 'bm' | 'br' | 'ml' | 'mr' | 'tl' | 'tm' | 'tr'>,
    default() {
      return ['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml'];
    },
  },
  axis: {
    type: String,
    default: 'both',
    validator(val: string) {
      return ['both', 'none', 'x', 'y'].includes(val);
    },
  },
  contentClass: {
    type: String,
    required: false,
    default: '',
  },
});

const emit = defineEmits([
  'clicked',
  'dragging',
  'dragstop',
  'resizing',
  'resizestop',
  'activated',
  'deactivated',
]);

const styleMapping = {
  y: {
    t: 'top',
    m: 'marginTop',
    b: 'bottom',
  },
  x: {
    l: 'left',
    m: 'marginLeft',
    r: 'right',
  },
};

function addEvents(events: Map<string, (...args: any[]) => void>) {
  events.forEach((cb, eventName) => {
    document.documentElement.addEventListener(eventName, cb);
  });
}

function removeEvents(events: Map<string, (...args: any[]) => void>) {
  events.forEach((cb, eventName) => {
    document.documentElement.removeEventListener(eventName, cb);
  });
}

const {
  stickSize,
  parentScaleX,
  parentScaleY,
  isActive,
  preventActiveBehavior,
  isDraggable,
  isResizable,
  aspectRatio,
  parentLimitation,
  snapToGrid,
  gridX,
  gridY,
  parentW,
  parentH,
  w,
  h,
  minw,
  minh,
  x,
  y,
  z,
  dragHandle,
  dragCancel,
  sticks,
  axis,
  contentClass,
} = toRefs(props);

// states
const active = ref(false);
const zIndex = ref<null | number>(null);
const parentWidth = ref<null | number>(null);
const parentHeight = ref<null | number>(null);
const left = ref<null | number>(null);
const top = ref<null | number>(null);
const right = ref<null | number>(null);
const bottom = ref<null | number>(null);

const aspectFactor = ref<null | number>(null);

// state end

const stickDrag = ref(false);
const bodyDrag = ref(false);
const dimensionsBeforeMove = ref({
  pointerX: 0,
  pointerY: 0,
  x: 0,
  y: 0,
  w: 0,
  h: 0,
  top: 0,
  right: 0,
  bottom: 0,
  left: 0,
  width: 0,
  height: 0,
});
const limits = ref({
  left: { min: null as null | number, max: null as null | number },
  right: { min: null as null | number, max: null as null | number },
  top: { min: null as null | number, max: null as null | number },
  bottom: { min: null as null | number, max: null as null | number },
});
const currentStick = ref<null | string>(null);

const parentElement = ref<HTMLElement | null>(null);

const width = computed(() => parentWidth.value! - left.value! - right.value!);

const height = computed(() => parentHeight.value! - top.value! - bottom.value!);

const rect = computed(() => ({
  left: Math.round(left.value!),
  top: Math.round(top.value!),
  width: Math.round(width.value),
  height: Math.round(height.value),
}));

const saveDimensionsBeforeMove = ({
  pointerX,
  pointerY,
}: {
  pointerX: number;
  pointerY: number;
}) => {
  dimensionsBeforeMove.value.pointerX = pointerX;
  dimensionsBeforeMove.value.pointerY = pointerY;

  dimensionsBeforeMove.value.left = left.value as number;
  dimensionsBeforeMove.value.right = right.value as number;
  dimensionsBeforeMove.value.top = top.value as number;
  dimensionsBeforeMove.value.bottom = bottom.value as number;

  dimensionsBeforeMove.value.width = width.value as number;
  dimensionsBeforeMove.value.height = height.value as number;

  aspectFactor.value = width.value / height.value;
};

const sideCorrectionByLimit = (
  limit: { max: number; min: number },
  current: number,
) => {
  let value = current;

  if (limit.min !== null && current < limit.min) {
    value = limit.min;
  } else if (limit.max !== null && limit.max < current) {
    value = limit.max;
  }

  return value;
};

const rectCorrectionByLimit = (rect: {
  newBottom: number;
  newLeft: number;
  newRight: number;
  newTop: number;
}) => {
  // const { limits } = this;
  let { newRight, newLeft, newBottom, newTop } = rect;

  type RectRange = {
    max: number;
    min: number;
  };

  newLeft = sideCorrectionByLimit(limits.value.left as RectRange, newLeft);
  newRight = sideCorrectionByLimit(limits.value.right as RectRange, newRight);
  newTop = sideCorrectionByLimit(limits.value.top as RectRange, newTop);
  newBottom = sideCorrectionByLimit(
    limits.value.bottom as RectRange,
    newBottom,
  );

  return {
    newLeft,
    newRight,
    newTop,
    newBottom,
  };
};

const rectCorrectionByAspectRatio = (rect: {
  newBottom: number;
  newLeft: number;
  newRight: number;
  newTop: number;
}) => {
  let { newLeft, newRight, newTop, newBottom } = rect;
  // const { parentWidth, parentHeight, currentStick, aspectFactor, dimensionsBeforeMove } = this;

  let newWidth = parentWidth.value! - newLeft - newRight;
  let newHeight = parentHeight.value! - newTop - newBottom;

  if (currentStick.value![1] === 'm') {
    const deltaHeight = newHeight - dimensionsBeforeMove.value.height;

    newLeft -= (deltaHeight * aspectFactor.value!) / 2;
    newRight -= (deltaHeight * aspectFactor.value!) / 2;
  } else if (currentStick.value![0] === 'm') {
    const deltaWidth = newWidth - dimensionsBeforeMove.value.width;

    newTop -= deltaWidth / aspectFactor.value! / 2;
    newBottom -= deltaWidth / aspectFactor.value! / 2;
  } else if (newWidth / newHeight > aspectFactor.value!) {
    newWidth = aspectFactor.value! * newHeight;

    if (currentStick.value![1] === 'l') {
      newLeft = parentWidth.value! - newRight - newWidth;
    } else {
      newRight = parentWidth.value! - newLeft - newWidth;
    }
  } else {
    newHeight = newWidth / aspectFactor.value!;

    if (currentStick.value![0] === 't') {
      newTop = parentHeight.value! - newBottom - newHeight;
    } else {
      newBottom = parentHeight.value! - newTop - newHeight;
    }
  }

  return { newLeft, newRight, newTop, newBottom };
};

const stickMove = (delta: { x: number; y: number }) => {
  let newTop = dimensionsBeforeMove.value.top;
  let newBottom = dimensionsBeforeMove.value.bottom;
  let newLeft = dimensionsBeforeMove.value.left;
  let newRight = dimensionsBeforeMove.value.right;
  switch (currentStick.value![0]) {
    case 'b': {
      newBottom = dimensionsBeforeMove.value.bottom + delta.y;

      if (snapToGrid.value) {
        newBottom =
          (parentHeight.value as number) -
          Math.round(
            ((parentHeight.value as number) - newBottom) / gridY.value,
          ) *
            gridY.value;
      }

      break;
    }

    case 't': {
      newTop = dimensionsBeforeMove.value.top - delta.y;

      if (snapToGrid.value) {
        newTop = Math.round(newTop / gridY.value) * gridY.value;
      }

      break;
    }
    default: {
      break;
    }
  }

  switch (currentStick.value![1]) {
    case 'l': {
      newLeft = dimensionsBeforeMove.value.left - delta.x;

      if (snapToGrid.value) {
        newLeft = Math.round(newLeft / gridX.value) * gridX.value;
      }

      break;
    }

    case 'r': {
      newRight = dimensionsBeforeMove.value.right + delta.x;

      if (snapToGrid.value) {
        newRight =
          (parentWidth.value as number) -
          Math.round(((parentWidth.value as number) - newRight) / gridX.value) *
            gridX.value;
      }

      break;
    }
    default: {
      break;
    }
  }

  ({ newLeft, newRight, newTop, newBottom } = rectCorrectionByLimit({
    newLeft,
    newRight,
    newTop,
    newBottom,
  }));

  if (aspectRatio.value) {
    ({ newLeft, newRight, newTop, newBottom } = rectCorrectionByAspectRatio({
      newLeft,
      newRight,
      newTop,
      newBottom,
    }));
  }

  left.value = newLeft;
  right.value = newRight;
  top.value = newTop;
  bottom.value = newBottom;

  emit('resizing', rect.value);
};

const stickUp = () => {
  stickDrag.value = false;
  // dimensionsBeforeMove.value = {
  //   pointerX: 0,
  //   pointerY: 0,
  //   x: 0,
  //   y: 0,
  //   w: 0,
  //   h: 0,
  // };

  Object.assign(dimensionsBeforeMove.value, {
    pointerX: 0,
    pointerY: 0,
    x: 0,
    y: 0,
    w: 0,
    h: 0,
  });

  limits.value = {
    left: { min: null, max: null },
    right: { min: null, max: null },
    top: { min: null, max: null },
    bottom: { min: null, max: null },
  };

  emit('resizing', rect.value);
  emit('resizestop', rect.value);
};

const calcDragLimitation = () => {
  return {
    left: { min: 0, max: (parentWidth.value as number) - width.value },
    right: { min: 0, max: (parentWidth.value as number) - width.value },
    top: { min: 0, max: (parentHeight.value as number) - height.value },
    bottom: { min: 0, max: (parentHeight.value as number) - height.value },
  };
};

const calcResizeLimits = () => {
  // const { aspectFactor, width, height, bottom, top, left, right } = this;

  const parentLim = parentLimitation.value ? 0 : null;

  if (aspectRatio.value) {
    if (minw.value / minh.value > (aspectFactor.value as number)) {
      minh.value = minw.value / (aspectFactor.value as number);
    } else {
      minw.value = ((aspectFactor.value as number) * minh.value) as number;
    }
  }

  const limits = {
    left: {
      min: parentLim,
      max: (left.value as number) + (width.value - minw.value),
    },
    right: {
      min: parentLim,
      max: (right.value as number) + (width.value - minw.value),
    },
    top: {
      min: parentLim,
      max: (top.value as number) + (height.value - minh.value),
    },
    bottom: {
      min: parentLim,
      max: (bottom.value as number) + (height.value - minh.value),
    },
  };

  if (aspectRatio.value) {
    const aspectLimits = {
      left: {
        min:
          left.value! -
          Math.min(top.value!, bottom.value!) * aspectFactor.value! * 2,
        max:
          left.value! +
          ((height.value - minh.value!) / 2) * aspectFactor.value! * 2,
      },
      right: {
        min:
          right.value! -
          Math.min(top.value!, bottom.value!) * aspectFactor.value! * 2,
        max:
          right.value! +
          ((height.value - minh.value!) / 2) * aspectFactor.value! * 2,
      },
      top: {
        min:
          top.value! -
          (Math.min(left.value!, right.value!) / aspectFactor.value!) * 2,
        max:
          top.value! +
          ((width.value - minw.value) / 2 / aspectFactor.value!) * 2,
      },
      bottom: {
        min:
          bottom.value! -
          (Math.min(left.value!, right.value!) / aspectFactor.value!) * 2,
        max:
          bottom.value! +
          ((width.value - minw.value) / 2 / aspectFactor.value!) * 2,
      },
    };

    if (currentStick.value![0] === 'm') {
      limits.left = {
        min: Math.max(limits.left.min!, aspectLimits.left.min),
        max: Math.min(limits.left.max, aspectLimits.left.max),
      };
      limits.right = {
        min: Math.max(limits.right.min!, aspectLimits.right.min),
        max: Math.min(limits.right.max, aspectLimits.right.max),
      };
    } else if (currentStick.value![1] === 'm') {
      limits.top = {
        min: Math.max(limits.top.min!, aspectLimits.top.min),
        max: Math.min(limits.top.max, aspectLimits.top.max),
      };
      limits.bottom = {
        min: Math.max(limits.bottom.min!, aspectLimits.bottom.min),
        max: Math.min(limits.bottom.max, aspectLimits.bottom.max),
      };
    }
  }

  return limits;
};

const positionStyle = computed(() => ({
  top: `${top.value}px`,
  left: `${left.value}px`,
  zIndex: zIndex.value!,
}));

const sizeStyle = computed(() => ({
  width: w.value === 'auto' ? 'auto' : `${width.value}px`,
  height: h.value === 'auto' ? 'auto' : `${height.value}px`,
}));

const stickStyles = computed(() => (stick: string) => {
  const stickStyle = {
    width: `${stickSize.value / parentScaleX.value}px`,
    height: `${stickSize.value / parentScaleY.value}px`,
  };
  stickStyle[
    styleMapping.y[stick[0] as 'b' | 'm' | 't'] as 'height' | 'width'
  ] = `${stickSize.value / parentScaleX.value / -2}px`;
  stickStyle[
    styleMapping.x[stick[1] as 'l' | 'm' | 'r'] as 'height' | 'width'
  ] = `${stickSize.value / parentScaleX.value / -2}px`;
  return stickStyle;
});

const bodyMove = (delta: { x: number; y: number }) => {
  let newTop = dimensionsBeforeMove.value.top - delta.y;
  let newBottom = dimensionsBeforeMove.value.bottom + delta.y;
  let newLeft = dimensionsBeforeMove.value.left - delta.x;
  let newRight = dimensionsBeforeMove.value.right + delta.x;

  if (snapToGrid.value) {
    let alignTop = true;
    let alignLeft = true;

    let diffT = newTop - Math.floor(newTop / gridY.value) * gridY.value;
    let diffB =
      (parentHeight.value as number) -
      newBottom -
      Math.floor(((parentHeight.value as number) - newBottom) / gridY.value) *
        gridY.value;
    let diffL = newLeft - Math.floor(newLeft / gridX.value) * gridX.value;
    let diffR =
      (parentWidth.value as number) -
      newRight -
      Math.floor(((parentWidth.value as number) - newRight) / gridX.value) *
        gridX.value;

    if (diffT > gridY.value / 2) {
      diffT -= gridY.value;
    }
    if (diffB > gridY.value / 2) {
      diffB -= gridY.value;
    }
    if (diffL > gridX.value / 2) {
      diffL -= gridX.value;
    }
    if (diffR > gridX.value / 2) {
      diffR -= gridX.value;
    }

    if (Math.abs(diffB) < Math.abs(diffT)) {
      alignTop = false;
    }
    if (Math.abs(diffR) < Math.abs(diffL)) {
      alignLeft = false;
    }

    newTop -= alignTop ? diffT : diffB;
    newBottom = (parentHeight.value as number) - height.value - newTop;
    newLeft -= alignLeft ? diffL : diffR;
    newRight = (parentWidth.value as number) - width.value - newLeft;
  }

  ({
    newLeft: left.value,
    newRight: right.value,
    newTop: top.value,
    newBottom: bottom.value,
  } = rectCorrectionByLimit({ newLeft, newRight, newTop, newBottom }));

  emit('dragging', rect.value);
};

const bodyUp = () => {
  bodyDrag.value = false;
  emit('dragging', rect.value);
  emit('dragstop', rect.value);

  // dimensionsBeforeMove.value = { pointerX: 0, pointerY: 0, x: 0, y: 0, w: 0, h: 0 };
  Object.assign(dimensionsBeforeMove.value, {
    pointerX: 0,
    pointerY: 0,
    x: 0,
    y: 0,
    w: 0,
    h: 0,
  });

  limits.value = {
    left: { min: null, max: null },
    right: { min: null, max: null },
    top: { min: null, max: null },
    bottom: { min: null, max: null },
  };
};

const stickDown = (
  stick: string,
  ev: { pageX: any; pageY: any; touches?: any },
  force = false,
) => {
  if ((!isResizable.value || !active.value) && !force) {
    return;
  }

  stickDrag.value = true;

  const pointerX = ev.pageX === undefined ? ev.touches[0].pageX : ev.pageX;
  const pointerY = ev.pageY === undefined ? ev.touches[0].pageY : ev.pageY;

  saveDimensionsBeforeMove({ pointerX, pointerY });

  currentStick.value = stick;

  limits.value = calcResizeLimits();
};

const move = (ev: MouseEvent & TouchEvent) => {
  if (!stickDrag.value && !bodyDrag.value) {
    return;
  }

  ev.stopPropagation();

  // touches 兼容性代码
  const pageX = ev.pageX === undefined ? ev.touches![0]!.pageX : ev.pageX;
  const pageY = ev.pageY === undefined ? ev.touches![0]!.pageY : ev.pageY;

  const delta = {
    x: (dimensionsBeforeMove.value.pointerX - pageX) / parentScaleX.value,
    y: (dimensionsBeforeMove.value.pointerY - pageY) / parentScaleY.value,
  };

  if (stickDrag.value) {
    stickMove(delta);
  }

  if (bodyDrag.value) {
    switch (axis.value) {
      case 'none': {
        return;
      }
      case 'x': {
        delta.y = 0;

        break;
      }
      case 'y': {
        delta.x = 0;

        break;
      }
      // No default
    }
    bodyMove(delta);
  }
};

const up = () => {
  if (stickDrag.value) {
    stickUp();
  } else if (bodyDrag.value) {
    bodyUp();
  }
};

const deselect = () => {
  if (preventActiveBehavior.value) {
    return;
  }
  active.value = false;
};

const domEvents = ref(
  new Map([
    ['mousedown', deselect],
    ['mouseleave', up],
    ['mousemove', move],
    ['mouseup', up],
    ['touchcancel', up],
    ['touchend', up],
    ['touchmove', move],
    ['touchstart', up],
  ]),
);

const container = ref<HTMLDivElement>();

onMounted(() => {
  const currentInstance = getCurrentInstance();
  const $el = currentInstance?.vnode.el as HTMLElement;

  parentElement.value = $el?.parentNode as HTMLElement;
  parentWidth.value = parentW.value ?? parentElement.value?.clientWidth;
  parentHeight.value = parentH.value ?? parentElement.value?.clientHeight;

  left.value = x.value;
  top.value = y.value;
  right.value = (parentWidth.value -
    (w.value === 'auto' ? container.value!.scrollWidth : (w.value as number)) -
    left.value) as number;
  bottom.value = (parentHeight.value -
    (h.value === 'auto' ? container.value!.scrollHeight : (h.value as number)) -
    top.value) as number;

  addEvents(domEvents.value);

  if (dragHandle.value) {
    [...($el?.querySelectorAll(dragHandle.value) || [])].forEach(
      (dragHandle) => {
        (dragHandle as HTMLElement).dataset.dragHandle = String(
          currentInstance?.uid,
        );
      },
    );
  }

  if (dragCancel.value) {
    [...($el?.querySelectorAll(dragCancel.value) || [])].forEach(
      (cancelHandle) => {
        (cancelHandle as HTMLElement).dataset.dragCancel = String(
          currentInstance?.uid,
        );
      },
    );
  }
});

onBeforeUnmount(() => {
  removeEvents(domEvents.value);
});

const bodyDown = (ev: MouseEvent & TouchEvent) => {
  const { target, button } = ev;

  if (!preventActiveBehavior.value) {
    active.value = true;
  }

  if (button && button !== 0) {
    return;
  }

  emit('clicked', ev);

  if (!active.value) {
    return;
  }

  if (
    dragHandle.value &&
    (target! as HTMLElement).dataset.dragHandle !==
      getCurrentInstance()?.uid.toString()
  ) {
    return;
  }

  if (
    dragCancel.value &&
    (target! as HTMLElement).dataset.dragCancel ===
      getCurrentInstance()?.uid.toString()
  ) {
    return;
  }

  if (ev.stopPropagation !== undefined) {
    ev.stopPropagation();
  }

  if (ev.preventDefault !== undefined) {
    ev.preventDefault();
  }

  if (isDraggable.value) {
    bodyDrag.value = true;
  }

  const pointerX = ev.pageX === undefined ? ev.touches[0]!.pageX : ev.pageX;
  const pointerY = ev.pageY === undefined ? ev.touches[0]!.pageY : ev.pageY;

  saveDimensionsBeforeMove({ pointerX, pointerY });

  if (parentLimitation.value) {
    limits.value = calcDragLimitation();
  }
};

watch(
  () => active.value,
  (isActive) => {
    if (isActive) {
      emit('activated');
    } else {
      emit('deactivated');
    }
  },
);

watch(
  () => isActive.value,
  (val) => {
    active.value = val;
  },
  { immediate: true },
);

watch(
  () => z.value,
  (val) => {
    if ((val as number) >= 0 || val === 'auto') {
      zIndex.value = val as number;
    }
  },
  { immediate: true },
);

watch(
  () => x.value,
  (newVal, oldVal) => {
    if (stickDrag.value || bodyDrag.value || newVal === left.value) {
      return;
    }

    const delta = oldVal - newVal;

    bodyDown({ pageX: left.value!, pageY: top.value! } as MouseEvent &
      TouchEvent);
    bodyMove({ x: delta, y: 0 });

    nextTick(() => {
      bodyUp();
    });
  },
);

watch(
  () => y.value,
  (newVal, oldVal) => {
    if (stickDrag.value || bodyDrag.value || newVal === top.value) {
      return;
    }

    const delta = oldVal - newVal;

    bodyDown({ pageX: left.value, pageY: top.value } as MouseEvent &
      TouchEvent);
    bodyMove({ x: 0, y: delta });

    nextTick(() => {
      bodyUp();
    });
  },
);

watch(
  () => w.value,
  (newVal, oldVal) => {
    if (stickDrag.value || bodyDrag.value || newVal === width.value) {
      return;
    }

    const stick = 'mr';
    const delta = (oldVal as number) - (newVal as number);

    stickDown(
      stick,
      { pageX: right.value, pageY: top.value! + height.value / 2 },
      true,
    );
    stickMove({ x: delta, y: 0 });

    nextTick(() => {
      stickUp();
    });
  },
);

watch(
  () => h.value,
  (newVal, oldVal) => {
    if (stickDrag.value || bodyDrag.value || newVal === height.value) {
      return;
    }

    const stick = 'bm';
    const delta = (oldVal as number) - (newVal as number);

    stickDown(
      stick,
      { pageX: left.value! + width.value / 2, pageY: bottom.value },
      true,
    );
    stickMove({ x: 0, y: delta });

    nextTick(() => {
      stickUp();
    });
  },
);

watch(
  () => parentW.value,
  (val) => {
    right.value = val - width.value - left.value!;
    parentWidth.value = val;
  },
);

watch(
  () => parentH.value,
  (val) => {
    bottom.value = val - height.value - top.value!;
    parentHeight.value = val;
  },
);
</script>

<template>
  <div
    :class="`${active || isActive ? 'active' : 'inactive'} ${contentClass ? contentClass : ''}`"
    :style="positionStyle"
    class="resize"
    @mousedown="bodyDown($event as TouchEvent & MouseEvent)"
    @touchend="up"
    @touchstart="bodyDown($event as TouchEvent & MouseEvent)"
  >
    <div ref="container" :style="sizeStyle" class="content-container">
      <slot></slot>
    </div>
    <div
      v-for="(stick, index) of sticks"
      :key="index"
      :class="[`resize-stick-${stick}`, isResizable ? '' : 'not-resizable']"
      :style="stickStyles(stick)"
      class="resize-stick"
      @mousedown.stop.prevent="
        stickDown(stick, $event as TouchEvent & MouseEvent)
      "
      @touchstart.stop.prevent="
        stickDown(stick, $event as TouchEvent & MouseEvent)
      "
    ></div>
  </div>
</template>

<style lang="css" scoped>
.resize {
  position: absolute;
  box-sizing: border-box;
}

.resize.active::before {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  content: '';
  outline: 1px dashed #d6d6d6;
}

.resize-stick {
  position: absolute;
  box-sizing: border-box;
  font-size: 1px;
  background: #fff;
  border: 1px solid #6c6c6c;
  box-shadow: 0 0 2px #bbb;
}

.inactive .resize-stick {
  display: none;
}

.resize-stick-tl,
.resize-stick-br {
  cursor: nwse-resize;
}

.resize-stick-tm,
.resize-stick-bm {
  left: 50%;
  cursor: ns-resize;
}

.resize-stick-tr,
.resize-stick-bl {
  cursor: nesw-resize;
}

.resize-stick-ml,
.resize-stick-mr {
  top: 50%;
  cursor: ew-resize;
}

.resize-stick.not-resizable {
  display: none;
}

.content-container {
  position: relative;
  display: block;
}
</style>