fix: gradient point color change

README.md

@@ -14,7 +14,6 @@ Color and gradient picker for vue3.js. [If you use vue2， plese use color-gradi
 [![npm](https://badgen.net/npm/v/color-gradient-picker-vue3)](https://www.npmjs.com/package/color-gradient-picker-vue3)
 [![downloads](https://badgen.net/npm/dt/color-gradient-picker-vue3)](https://www.npmjs.com/package/color-gradient-picker-vue3)
 
-
 <img style="margin: 0 auto;" src="./imgs/introduct.png" width="50%" />
 
 [查看文档](./lib/README.md)

lib/auto-imports.d.ts

@@ -61,17 +61,5 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type {
-    Component,
-    ComponentPublicInstance,
-    ComputedRef,
-    ExtractDefaultPropTypes,
-    ExtractPropTypes,
-    ExtractPublicPropTypes,
-    InjectionKey,
-    PropType,
-    Ref,
-    VNode,
-    WritableComputedRef,
-  } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
 }

lib/components/Area/Alpha/index.vue

@@ -3,7 +3,7 @@
  * @Description: Area Alapha
  * @Date: 2023-09-27 19:22:18
  * @LastEditors: June
- * @LastEditTime: 2023-10-03 23:45:34
+ * @LastEditTime: 2023-10-05 23:44:10
 -->
 <template>
   <div
@@ -30,12 +30,38 @@ const alphaMaskRef = ref<HTMLElement | null>(null)
 const alphaMaskBoxInfo = ref<DOMRect | null>(null)
 
 const offsetLeft = computed(() => {
+  const {
+    isGradient,
+    alpha,
+    activePointIndex = 0,
+    points = [],
+  } = colorPickerState
   const width = alphaMaskBoxInfo.value?.width || 0
-  return (colorPickerState.alpha * (width - 14)) | 0
+  if (isGradient) {
+    const activePoint = points[activePointIndex]
+    return (activePoint.alpha * (width - 14)) | 0
+  } else {
+    return (alpha * (width - 14)) | 0
+  }
 })
 const style = computed(() => {
-  return {
-    background: `linear-gradient(to right, rgba(0, 0, 0, 0), rgb(${colorPickerState.red}, ${colorPickerState.green}, ${colorPickerState.blue}))`,
+  const {
+    isGradient,
+    red,
+    green,
+    blue,
+    activePointIndex = 0,
+    points = [],
+  } = colorPickerState
+  if (isGradient) {
+    const activePoint = points[activePointIndex]
+    return {
+      background: `linear-gradient(to right, rgba(0, 0, 0, 0), rgb(${activePoint.red}, ${activePoint.green}, ${activePoint.blue}))`,
+    }
+  } else {
+    return {
+      background: `linear-gradient(to right, rgba(0, 0, 0, 0), rgb(${red}, ${green}, ${blue}))`,
+    }
   }
 })
 const pointerStyle = computed(() => {
@@ -85,9 +111,7 @@ const mouseUpHandler = (event, { startX, positionX }) => {
     startX,
     positionX,
   })
-
   updateColor({ alpha }, 'alpha')
-
   return positions
 }
 

lib/components/Area/GradientPoints/GradientPoint/index.vue

@@ -3,7 +3,7 @@
  * @Description: 
  * @Date: 2023-09-28 10:50:02
  * @LastEditors: June
- * @LastEditTime: 2023-10-03 22:28:08
+ * @LastEditTime: 2023-10-06 00:30:39
 -->
 <template>
   <div
@@ -108,9 +108,10 @@ const removePoint = () => {
   let points = cloneDeep(colorPickerState.points)
   if (points!.length <= 2) return // 至少2个点
   const index = props.index
-
+  const newIdx = index === 0 ? 1 : index - 1
   points = points?.filter((i: IPoitItem) => i.id !== props.point.id)
-  colorPickerState.activePointIndex = index === 0 ? 1 : index - 1
+  colorPickerState.activePointIndex = newIdx
+
   updateColor({ points }, 'points')
 }
 </script>

lib/components/Area/GradientPoints/index.vue

@@ -3,7 +3,7 @@
  * @Description: Area GradientPoints
  * @Date: 2023-09-27 19:26:27
  * @LastEditors: June
- * @LastEditTime: 2023-10-04 00:15:38
+ * @LastEditTime: 2023-10-06 00:58:57
 -->
 <template>
   <div
@@ -31,6 +31,7 @@ import {
   updateGradientActivePercent,
 } from '@l/helpers/index'
 import { v4 as uuidv4 } from 'uuid'
+import { hsvToRgb } from '@l/helpers'
 import type { IColorState, IPoitItem } from '@l/types'
 import { cloneDeep } from 'lodash-es'
 
@@ -46,16 +47,16 @@ const pointsStyle = computed(() => {
 const handleAddPoit = (event) => {
   const { x = 0, width = 0 } = pointsContainerBoxInfo.value || {}
   const left = updateGradientActivePercent(event.pageX - x, width)
-  const { red, green, blue, alpha } = colorPickerState
+  // saturation, value 基本是固定的
+  const { hue, saturation, value } = colorPickerState
   const points = cloneDeep(colorPickerState.points)
+  // @ts-ignore
+  const rgba = hsvToRgb(hue, saturation, value, 1)
   const newPoint = {
     id: uuidv4(),
-    red,
-    green,
-    blue,
-    alpha,
+    ...rgba,
     left,
-  }
+  } as IPoitItem
   points?.push(newPoint)
   colorPickerState.activePointIndex = points!.findIndex(
     (i: IPoitItem) => i.id === newPoint.id,

lib/components/Area/Hue/index.vue

@@ -3,7 +3,7 @@
  * @Description: 
  * @Date: 2023-09-27 19:27:26
  * @LastEditors: June
- * @LastEditTime: 2023-10-03 10:56:14
+ * @LastEditTime: 2023-10-06 00:45:48
 -->
 <template>
   <div

lib/components/Area/Picker/index.vue

@@ -3,7 +3,7 @@
  * @Description: Area Picker
  * @Date: 2023-09-27 19:28:05
  * @LastEditors: June
- * @LastEditTime: 2023-10-04 00:15:53
+ * @LastEditTime: 2023-10-06 02:13:19
 -->
 <template>
   <div
@@ -32,25 +32,45 @@ const updateColor = inject('updateColor') as any
 
 const pointerStyle = computed(() => {
   const { width = 0, height = 0 } = pickerBoxInfo.value || {}
-  const saturation = colorPickerState.saturation || 0
-  const value = colorPickerState.value || 0
+  const {
+    saturation = 100,
+    value = 100,
+    isGradient,
+    activePointIndex,
+  } = colorPickerState
+
   const offsetLeft = (((saturation * width) / 100) | 0) - 6
   const offsetTop = ((height - (value * height) / 100) | 0) - 6
+  const points = colorPickerState.points!
+  const activePoint = points[activePointIndex || 0]
+  const red = isGradient ? activePoint?.red : colorPickerState.red
+  const green = isGradient ? activePoint?.green : colorPickerState.green
+  const blue = isGradient ? activePoint?.blue : colorPickerState.blue
   return {
-    backgroundColor: `rgb(${colorPickerState.red}, ${colorPickerState.green}, ${colorPickerState.blue})`,
+    backgroundColor: `rgb(${red}, ${green}, ${blue})`,
     left: `${offsetLeft}px`,
     top: `${offsetTop}px`,
   }
 })
 
 const pickerStyle = computed(() => {
   const {
-    red = 255,
-    green = 0,
-    blue = 0,
-  } = getRgbByHue(colorPickerState.hue) || {}
-  return {
-    backgroundColor: `rgb(${red}, ${green}, ${blue})`,
+    isGradient,
+    red,
+    green,
+    blue,
+    activePointIndex = 0,
+    points = [],
+  } = colorPickerState
+  if (isGradient) {
+    const activePoint = points[activePointIndex]
+    return {
+      backgroundColor: `rgb(${activePoint.red}, ${activePoint.green}, ${activePoint.blue})`,
+    }
+  } else {
+    return {
+      backgroundColor: `rgb(${red}, ${green}, ${blue})`,
+    }
   }
 })
 

lib/components/CInput/index.vue

@@ -4,7 +4,7 @@
  * @Author: June
  * @Date: 2023-03-23 22:20:33
  * @LastEditors: June
- * @LastEditTime: 2023-10-02 14:39:46
+ * @LastEditTime: 2023-10-06 02:08:10
 -->
 <template>
   <div class="flex flex-shrink-0 items-center flex-col" :class="props.classes">