xdesign-vue-next/es/color-picker/panel/saturation.mjs.map

XDesign Component for vue-next

{"version":3,"file":"saturation.mjs","sources":["../../../src/color-picker/panel/saturation.tsx"],"sourcesContent":["import { computed, defineComponent, nextTick, onBeforeUnmount, onMounted, reactive, ref } from 'vue';\nimport { SATURATION_PANEL_DEFAULT_HEIGHT, SATURATION_PANEL_DEFAULT_WIDTH } from '../const';\nimport { Draggable, Coordinate } from '../utils';\nimport { useBaseClassName } from '../hooks';\nimport baseProps from './base-props';\n\nexport default defineComponent({\n  name: 'SaturationPanel',\n\n  props: {\n    ...baseProps,\n  },\n  setup(props) {\n    const baseClassName = useBaseClassName();\n    const refPanel = ref<HTMLElement>(null);\n    const refThumb = ref<HTMLElement>(null);\n    const dragInstance = ref<Draggable>(null);\n    const panelRect = reactive({\n      width: SATURATION_PANEL_DEFAULT_WIDTH,\n      height: SATURATION_PANEL_DEFAULT_HEIGHT,\n    });\n\n    const styles = computed(() => {\n      const { saturation, value } = props.color;\n      const { width, height } = panelRect;\n      const top = Math.round((1 - value) * height);\n      const left = Math.round(saturation * width);\n      return {\n        color: props.color.rgb,\n        left: `${left}px`,\n        top: `${top}px`,\n      };\n    });\n\n    const getSaturationAndValueByCoordinate = (coordinate: Coordinate) => {\n      const { width, height } = panelRect;\n      const { x, y } = coordinate;\n      const saturation = Math.round((x / width) * 100);\n      const value = Math.round((1 - y / height) * 100);\n      return {\n        saturation,\n        value,\n      };\n    };\n\n    const handleDrag = (coordinate: Coordinate, isEnded?: boolean) => {\n      if (props.disabled) {\n        return;\n      }\n      const { saturation, value } = getSaturationAndValueByCoordinate(coordinate);\n      props.onChange({\n        saturation: saturation / 100,\n        value: value / 100,\n        addUsedColor: isEnded,\n      });\n    };\n\n    const handleDragEnd = (coordinate: Coordinate) => {\n      if (props.disabled) {\n        return;\n      }\n      nextTick(() => {\n        handleDrag(coordinate, true);\n      });\n    };\n\n    const panelBackground = computed(() => {\n      return `hsl(${props.color.hue}, 100%, 50%)`;\n    });\n\n    onMounted(() => {\n      panelRect.width = refPanel.value.offsetWidth || SATURATION_PANEL_DEFAULT_WIDTH;\n      panelRect.height = refPanel.value.offsetHeight || SATURATION_PANEL_DEFAULT_HEIGHT;\n      dragInstance.value = new Draggable(refPanel.value, {\n        start() {\n          panelRect.width = refPanel.value.offsetWidth;\n          panelRect.height = refPanel.value.offsetHeight;\n        },\n        drag: (coordinate: Coordinate) => {\n          handleDrag(coordinate);\n        },\n        end: handleDragEnd,\n      });\n    });\n\n    onBeforeUnmount(() => {\n      dragInstance.value.destroy();\n    });\n\n    return {\n      baseClassName,\n      refThumb,\n      refPanel,\n      styles,\n      panelBackground,\n    };\n  },\n  render() {\n    const { baseClassName, styles, panelBackground } = this;\n    return (\n      <div\n        class={[`${baseClassName}__saturation`]}\n        ref=\"refPanel\"\n        style={{\n          background: panelBackground,\n        }}\n      >\n        <span class={[`${baseClassName}__thumb`]} role=\"slider\" tabindex={0} ref=\"refThumb\" style={styles}></span>\n      </div>\n    );\n  },\n});\n"],"names":["name","props","width","height","color","left","saturation","value","addUsedColor","nextTick","handleDrag","onMounted","panelRect","drag","end","onBeforeUnmount","dragInstance","baseClassName","refThumb","refPanel","styles","panelBackground","_createVNode","background"],"mappings":"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"}