element-plus/es/components/color-picker-panel/src/composables/use-sv-panel.mjs.map

A Component Library for Vue 3

{"version":3,"file":"use-sv-panel.mjs","names":[],"sources":["../../../../../../../packages/components/color-picker-panel/src/composables/use-sv-panel.ts"],"sourcesContent":["import { computed, getCurrentInstance, onMounted, ref, watch } from 'vue'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { useNamespace } from '@element-plus/hooks'\nimport { addUnit, getClientXY, getEventCode } from '@element-plus/utils'\nimport { draggable } from '../utils/draggable'\n\nimport type { SvPanelProps } from '../props/sv-panel'\n\nexport const useSvPanel = (props: SvPanelProps) => {\n  const instance = getCurrentInstance()!\n\n  const cursorRef = ref<HTMLElement>()\n  const cursorTop = ref(0)\n  const cursorLeft = ref(0)\n  const background = ref('hsl(0, 100%, 50%)')\n\n  const saturation = computed(() => props.color.get('saturation'))\n  const brightness = computed(() => props.color.get('value'))\n  const hue = computed(() => props.color.get('hue'))\n\n  function handleClick(event: MouseEvent | TouchEvent) {\n    if (props.disabled) return\n    const target = event.target\n\n    if (target !== cursorRef.value) {\n      handleDrag(event)\n    }\n    cursorRef.value?.focus({ preventScroll: true })\n  }\n\n  function handleDrag(event: MouseEvent | TouchEvent) {\n    if (props.disabled) return\n\n    const el = instance.vnode.el!\n    const rect = el.getBoundingClientRect()\n    const { clientX, clientY } = getClientXY(event)\n\n    let left = clientX - rect.left\n    let top = clientY - rect.top\n    left = Math.max(0, left)\n    left = Math.min(left, rect.width)\n\n    top = Math.max(0, top)\n    top = Math.min(top, rect.height)\n\n    cursorLeft.value = left\n    cursorTop.value = top\n    props.color.set({\n      saturation: (left / rect.width) * 100,\n      value: 100 - (top / rect.height) * 100,\n    })\n  }\n\n  function handleKeydown(event: KeyboardEvent) {\n    if (props.disabled) return\n    const { shiftKey } = event\n    const code = getEventCode(event)\n    const step = shiftKey ? 10 : 1\n    let isPreventDefault = true\n\n    switch (code) {\n      case EVENT_CODE.left:\n        incrementSaturation(-step)\n        break\n      case EVENT_CODE.right:\n        incrementSaturation(step)\n        break\n      case EVENT_CODE.up:\n        incrementBrightness(step)\n        break\n      case EVENT_CODE.down:\n        incrementBrightness(-step)\n        break\n      default:\n        isPreventDefault = false\n        break\n    }\n\n    isPreventDefault && event.preventDefault()\n  }\n\n  function incrementSaturation(step: number) {\n    let next = saturation.value + step\n    next = next < 0 ? 0 : next > 100 ? 100 : next\n    props.color.set('saturation', next)\n  }\n\n  function incrementBrightness(step: number) {\n    let next = brightness.value + step\n    next = next < 0 ? 0 : next > 100 ? 100 : next\n    props.color.set('value', next)\n  }\n\n  return {\n    cursorRef,\n    cursorTop,\n    cursorLeft,\n    background,\n    saturation,\n    brightness,\n    hue,\n    handleClick,\n    handleDrag,\n    handleKeydown,\n  }\n}\n\nexport const useSvPanelDOM = (\n  props: SvPanelProps,\n  {\n    cursorTop,\n    cursorLeft,\n    background,\n    handleDrag,\n  }: Pick<\n    ReturnType<typeof useSvPanel>,\n    'cursorTop' | 'cursorLeft' | 'background' | 'handleDrag'\n  >\n) => {\n  const instance = getCurrentInstance()!\n  const ns = useNamespace('color-svpanel')\n\n  function update() {\n    const saturation = props.color.get('saturation')\n    const brightness = props.color.get('value')\n\n    const el = instance.vnode.el!\n    const { clientWidth: width, clientHeight: height } = el\n\n    cursorLeft.value = (saturation * width) / 100\n    cursorTop.value = ((100 - brightness) * height) / 100\n\n    background.value = `hsl(${props.color.get('hue')}, 100%, 50%)`\n  }\n\n  onMounted(() => {\n    draggable(instance.vnode.el as HTMLElement, {\n      drag: (event) => {\n        handleDrag(event)\n      },\n      end: (event) => {\n        handleDrag(event)\n      },\n    })\n\n    update()\n  })\n\n  watch(\n    [\n      () => props.color.get('hue'),\n      () => props.color.get('value'),\n      () => props.color.value,\n    ],\n    () => update()\n  )\n\n  const rootKls = computed(() => ns.b())\n  const cursorKls = computed(() => ns.e('cursor'))\n  const rootStyle = computed(() => ({\n    backgroundColor: background.value,\n  }))\n  const cursorStyle = computed(() => ({\n    top: addUnit(cursorTop.value),\n    left: addUnit(cursorLeft.value),\n  }))\n\n  return {\n    rootKls,\n    cursorKls,\n    rootStyle,\n    cursorStyle,\n    update,\n  }\n}\n"],"mappings":"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"}