@opentiny/vue-renderless/color-select-panel/utils/color-points.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 { draggable } from "./use-drag";
import { getClientXY } from "./getClientXY";
class ColorPoint {
  constructor(color, cursorLeft) {
    this.color = color;
    this.cursorLeft = cursorLeft;
  }
}
const useColorPoints = (props, hooks, ctx) => {
  const { ref, watch, readonly } = hooks;
  const points = ctx.colorPoints;
  const actviePoint = ctx.activeColor;
  const deg = ref(45);
  const linearGradientValue = ref("");
  const addPoint = (point) => {
    points.value.push(point);
  };
  const removePoint = (point) => {
    points.value = points.value.filter((curPoint) => curPoint !== point);
  };
  const updateDeg = (_deg) => {
    deg.value = _deg;
  };
  const onDrag = (wrapper, event) => {
    const wrapperEl = wrapper.value;
    if (!wrapperEl) {
      return;
    }
    const rect = wrapperEl.getBoundingClientRect();
    const { clientX } = getClientXY(event);
    actviePoint.value.cursorLeft = Math.min(Math.max(clientX - rect.left, 0), rect.width);
  };
  const onClick = (element, point) => {
    const el = element;
    actviePoint.value = point;
    draggable(el, {
      drag(event) {
        onDrag(props.wrapper, event);
      },
      end(event) {
        onDrag(props.wrapper, event);
      }
    });
  };
  const getRelativePos = (wrapper, point) => {
    const wrapperEl = wrapper.value;
    const rect = wrapperEl.getBoundingClientRect();
    return (point.cursorLeft / rect.width * 100).toFixed(0);
  };
  const setActivePoint = (point) => {
    actviePoint.value = point;
  };
  const getActviePoint = () => actviePoint;
  const toString = () => {
    const colroString = points.value.map(
      (point) => [point.color.value, `${getRelativePos(props.wrapper, point)}%`].join(" ")
    );
    linearGradientValue.value = `linear-gradient(${deg.value}deg, ${colroString.join(",")})`;
  };
  watch(deg, toString, { deep: true });
  watch(
    actviePoint,
    () => {
      if (!props.wrapper.value) {
        return;
      }
      toString();
    },
    { deep: true }
  );
  return {
    onClick,
    linearGradientValue: readonly(linearGradientValue),
    updateDeg,
    removePoint,
    addPoint,
    setActivePoint,
    getActviePoint,
    onDrag
  };
};
export {
  ColorPoint,
  useColorPoints
};