import { computed, shallowRef, toValue } from "vue";
import useDragging from "./useDragging.js";
export default function useInfinitePlane(options) {
  const planeRef = shallowRef();
  const { isDragging, coordinate, cursor, stop } = useDragging(planeRef, { enabled: options.enabled });
  const bgStyle = computed(() => {
    const g = toValue(options.gap);
    return {
      backgroundImage: "radial-gradient(circle, rgba(161,161,170,0.45) 1px, transparent 1px)",
      backgroundSize: `${g}px ${g}px`,
      // radial-gradient centers the dot in each tile; -g/2 shifts dots onto
      // grid intersections where placed blocks' corners actually sit.
      backgroundPosition: `${coordinate.value.x - g / 2}px ${coordinate.value.y - g / 2}px`
    };
  });
  return {
    planeRef,
    coordinate,
    cursor,
    isDragging,
    bgStyle,
    stopPan: stop
  };
}
