import { ref, computed, watch, createVNode, mergeProps, toHandlers } from "vue";
import { usePointer } from "../pointer/index.mjs";
import { propsFactory, getCurrentInstanceName, SUPPORTS_TOUCH } from "../../utils/dist/index.mjs";
const SUPPORTED_DIRECTIONS = ["top", "top-left", "left", "bottom", "bottom-left", "top-right", "right", "bottom-right"];
const makeDraggableResizableProps = propsFactory({
  resizable: {
    type: Boolean,
    default: true
  },
  resizableAnchors: {
    type: Array,
    default: SUPPORTED_DIRECTIONS
  },
  showResizableAnchor: Boolean
}, "draggable-resizable");
function useDraggableResizable(props, name = getCurrentInstanceName()) {
  const active = ref();
  const isResizing = ref(false);
  const previous = ref({
    left: 0,
    top: 0,
    width: 0,
    height: 0
  });
  const current = ref({
    left: 0,
    top: 0,
    width: 0,
    height: 0
  });
  const resizement = computed(() => ({
    left: current.value.left - previous.value.left,
    top: current.value.top - previous.value.top,
    width: current.value.width - previous.value.width,
    height: current.value.height - previous.value.height
  }));
  const {
    isPointerDown,
    pointerDownEl,
    pointerEvents,
    pointerMovement
  } = usePointer({
    pointerDownPreventDefault: SUPPORTS_TOUCH,
    pointerDownStopPropagation: true,
    pointerMovePreventDefault: true
  });
  const getElAnchor = (el) => {
    return el.dataset.resizableAnchor;
  };
  watch(isPointerDown, (val) => {
    if (val) {
      active.value = getElAnchor(pointerDownEl.value);
    } else {
      active.value = void 0;
      isResizing.value = false;
      previous.value = {
        ...current.value
      };
    }
  });
  watch(pointerMovement, (val) => {
    if (!active.value || !val)
      return;
    if (!isResizing.value)
      isResizing.value = true;
    const value = {
      ...current.value
    };
    if (active.value.includes("left")) {
      value.left = previous.value.left + val.left;
      value.width = previous.value.width - val.left;
    } else if (active.value.includes("right")) {
      value.width = previous.value.width + val.left;
    }
    if (active.value.includes("top")) {
      value.top = previous.value.top + val.top;
      value.height = previous.value.height - val.top;
    } else if (active.value.includes("bottom")) {
      value.height = previous.value.height + val.top;
    }
    current.value = value;
  });
  return {
    isResizing,
    resizement,
    genResizableAnchors: (anchorProps, hide) => {
      return props.resizableAnchors.map((anchor) => {
        return createVNode("div", mergeProps(toHandlers(pointerEvents.value), anchorProps, {
          "key": anchor,
          "data-resizable-anchor": anchor,
          "class": [`${name}__resizable-anchor`, `${name}__resizable-anchor--${anchor}`, {
            [`${name}__resizable-anchor--control`]: props.showResizableAnchor,
            [`${name}__resizable-anchor--hide`]: (isResizing.value || (hide == null ? void 0 : hide.value)) && anchor !== active.value
          }]
        }), null);
      });
    }
  };
}
export {
  SUPPORTED_DIRECTIONS,
  makeDraggableResizableProps,
  useDraggableResizable
};
//# sourceMappingURL=index.mjs.map
