@opentiny/vue-renderless/color-select-panel/hue-select/index.js

An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.

import "../../chunk-G2ADBYYC.js";
import { Color } from "../utils/color";
import { getClientXY } from "../utils/getClientXY";
import { useContext } from "../utils/context";
import { ColorPoint } from "../utils/color-points";
const useOnClickBar = ({ addPoint, setActivePoint, getActviePoint }, { bar }, getLeft) => {
  return (event) => {
    const activePoint = getActviePoint().value;
    const color = new Color({
      enableAlpha: activePoint.color.enableAlpha,
      format: activePoint.color.format,
      value: activePoint.color.value
    });
    const left = getLeft(bar.value, event);
    const colorPoint = new ColorPoint(color, left);
    addPoint(colorPoint);
    setActivePoint(colorPoint);
  };
};
const initState = (props, hooks) => {
  const { reactive, ref, computed } = hooks;
  const ctx = useContext(hooks);
  const hueValue = computed(() => props.color.get("hue"));
  const thumbLeft = ref(0);
  const state = reactive({ hueValue, thumbLeft, ctx });
  return state;
};
const initDom = ({ ref }) => {
  return {
    thumb: ref(),
    bar: ref(),
    wrapper: ref()
  };
};
const useEvent = ({ thumb, bar }, state, props, { emit }, ctx) => {
  const onSvReady = (update2) => {
    emit("svReady", update2);
  };
  const getThumbTop = () => {
    if (!thumb.value) {
      return 0;
    }
    const hue = ctx.activeColor.value.color.get("hue");
    if (!bar.value) {
      return 0;
    }
    return hue * (bar.value.offsetWidth - thumb.value.offsetWidth / 2) / 360;
  };
  const update = () => {
    state.thumbLeft = getThumbTop();
    if (ctx.colorMode.value !== "linear-gradient") {
      ctx.activeColor.value.cursorLeft = state.thumbLeft;
    }
  };
  const getLeft = (barEl, event) => {
    if (!thumb.value) {
      return 0;
    }
    const rect = barEl == null ? void 0 : barEl.getBoundingClientRect();
    const { clientX } = getClientXY(event);
    let left = clientX - rect.left;
    left = Math.min(left, rect.width - thumb.value.offsetWidth / 2);
    left = Math.max(thumb.value.offsetWidth / 2, left);
    return left;
  };
  const onDrag = (event) => {
    if (!bar.value || !thumb.value) {
      return;
    }
    const el = bar.value;
    if (!el) {
      return;
    }
    const left = getLeft(el, event);
    const rect = el == null ? void 0 : el.getBoundingClientRect();
    const hue = Math.round((left - thumb.value.offsetWidth / 2) / (rect.width - thumb.value.offsetWidth) * 360);
    state.thumbLeft = left;
    emit("hueUpdate", hue);
    ctx.activeColor.value.color.set("hue", hue);
  };
  return { update, onDrag, onSvReady, getLeft, getThumbTop };
};
export {
  initDom,
  initState,
  useEvent,
  useOnClickBar
};