'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
require('../config/index.js');
var draggable = require('../config/draggable.js');
require('../../../../utils/index.js');
var createNamespace = require('../../../../utils/create-namespace.js');
var hueSlider = require('../config/hue-slider.js');

"use strict";
var _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...{ name: "HueSlider" },
  __name: "hue-slider",
  props: hueSlider.hueSliderProps,
  setup(__props, { expose: __expose }) {
    const props = __props;
    const bem = createNamespace.createNamespace("hue-slider");
    const instance = vue.getCurrentInstance();
    const thumb = vue.ref(null);
    const bar = vue.ref(null);
    const thumbLeft = vue.ref(0);
    const thumbTop = vue.ref(0);
    const hueValue = vue.computed(() => props.color?.get("hue") ?? false);
    const handleClick = (event) => {
      const target = event.target;
      if (target !== thumb.value) {
        handleDrag(event);
      }
    };
    const handleDrag = (event) => {
      const ele = instance?.vnode.el;
      const rect = ele.getBoundingClientRect();
      let hue;
      if (!props.vertical) {
        let left = event.clientX - rect.left;
        left = Math.min(
          left,
          rect.width - thumb.value.offsetWidth / 2
        );
        left = Math.max(thumb.value.offsetWidth / 2, left);
        hue = Math.round(
          (left - thumb.value.offsetWidth / 2) / (rect.width - thumb.value.offsetWidth) * 360
        );
      } else {
        let top = event.clientY - rect.top;
        top = Math.min(
          top,
          rect.height - thumb.value.offsetHeight / 2
        );
        top = Math.max(thumb.value.offsetHeight / 2, top);
        hue = Math.round(
          (top - thumb.value.offsetHeight / 2) / (rect.height - thumb.value.offsetHeight) * 360
        );
      }
      props.color.set("hue", hue);
    };
    const getThumbLeft = () => {
      const ele = instance?.vnode.el;
      if (props.vertical) return 0;
      const hue = props.color.get("hue");
      if (!ele) return 0;
      return Math.round(
        hue * (ele.offsetWidth - thumb.value.offsetWidth / 2) / 360
      );
    };
    const getThumbTop = () => {
      const ele = instance?.vnode.el;
      if (!props.vertical) return 0;
      const hue = props.color.get("hue");
      if (!ele) return 0;
      return Math.round(
        hue * (ele.offsetHeight - thumb.value.offsetHeight / 2) / 360
      );
    };
    const update = () => {
      thumbLeft.value = getThumbLeft();
      thumbTop.value = getThumbTop();
    };
    vue.watch(
      () => hueValue.value,
      () => {
        update();
      }
    );
    vue.onMounted(() => {
      const dragConfig = {
        drag: (event) => {
          handleDrag(event);
        },
        end: (event) => {
          handleDrag(event);
        }
      };
      draggable.default(bar.value, dragConfig);
      draggable.default(thumb.value, dragConfig);
      update();
    });
    __expose({
      update
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock(
        "div",
        {
          class: vue.normalizeClass({ [vue.unref(bem).is("vertical")]: _ctx.vertical, [vue.unref(bem).b()]: true })
        },
        [
          vue.createElementVNode(
            "div",
            {
              ref_key: "bar",
              ref: bar,
              class: vue.normalizeClass(vue.unref(bem).m("bar")),
              onClick: handleClick
            },
            null,
            2
            /* CLASS */
          ),
          vue.createElementVNode(
            "div",
            {
              ref_key: "thumb",
              ref: thumb,
              class: vue.normalizeClass(vue.unref(bem).m("thumb")),
              style: vue.normalizeStyle({ left: thumbLeft.value + "px", top: thumbTop.value + "px" })
            },
            null,
            6
            /* CLASS, STYLE */
          )
        ],
        2
        /* CLASS */
      );
    };
  }
});

exports.default = _sfc_main;
//# sourceMappingURL=hue-slider.vue2.js.map
