import { defineComponent, getCurrentInstance, ref, computed, watch, onMounted, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, createElementVNode } from 'vue';
import draggable from '../config/draggable.mjs';
import '../config/index.mjs';
import '../../../../utils/index.mjs';
import { createNamespace } from '../../../../utils/create-namespace.mjs';
import { svPanelProps } from '../config/sv-panel.mjs';

"use strict";
var _sfc_main = /* @__PURE__ */ defineComponent({
  ...{ name: "SvPanel" },
  __name: "sv-panel",
  props: svPanelProps,
  setup(__props, { expose: __expose }) {
    const props = __props;
    const bem = createNamespace("sv-panel");
    const instance = getCurrentInstance();
    const cursorTop = ref(0);
    const cursorLeft = ref(0);
    const background = ref("hsl(0, 100%, 50%)");
    const colorValue = computed(() => {
      const hue = props.color?.get("hue");
      const value = props.color?.get("value");
      return { hue, value };
    });
    const update = () => {
      const saturation = props.color?.get("saturation");
      const value = props.color?.get("value");
      const ele = instance?.vnode.el;
      cursorLeft.value = saturation * ele.clientWidth / 100;
      cursorTop.value = (100 - value) * ele.clientHeight / 100;
      background.value = `hsl(${props.color?.get("hue")}, 100%, 50%)`;
    };
    const handleDrag = (event) => {
      const ele = instance?.vnode.el;
      const rect = ele.getBoundingClientRect();
      let left = event.clientX - rect.left;
      let top = event.clientY - rect.top;
      left = Math.max(0, left);
      left = Math.min(left, rect.width);
      top = Math.max(0, top);
      top = Math.min(top, rect.height);
      cursorLeft.value = left;
      cursorTop.value = top;
      props.color?.set({
        saturation: left / rect.width * 100,
        value: 100 - top / rect.height * 100
      });
    };
    watch(
      () => colorValue.value,
      () => {
        update();
      }
    );
    onMounted(() => {
      const ele = instance?.vnode.el;
      draggable(ele, {
        drag: (event) => {
          handleDrag(event);
        },
        end: (event) => {
          handleDrag(event);
        }
      });
    });
    __expose({ update });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock(
        "div",
        {
          class: normalizeClass(unref(bem).b()),
          style: normalizeStyle({ backgroundColor: background.value })
        },
        [
          createElementVNode(
            "div",
            {
              class: normalizeClass(unref(bem).m("white"))
            },
            null,
            2
            /* CLASS */
          ),
          createElementVNode(
            "div",
            {
              class: normalizeClass(unref(bem).m("black"))
            },
            null,
            2
            /* CLASS */
          ),
          createElementVNode(
            "div",
            {
              class: normalizeClass(unref(bem).m("cursor")),
              style: normalizeStyle({
                top: cursorTop.value + "px",
                left: cursorLeft.value + "px"
              })
            },
            [..._cache[0] || (_cache[0] = [
              createElementVNode(
                "div",
                null,
                null,
                -1
                /* CACHED */
              )
            ])],
            6
            /* CLASS, STYLE */
          )
        ],
        6
        /* CLASS, STYLE */
      );
    };
  }
});

export { _sfc_main as default };
//# sourceMappingURL=sv-panel.vue2.mjs.map
