feat(color-select-panel): add color-update event

examples/sites/demos/pc/app/color-select-panel/webdoc/color-select-panel.js

@@ -117,6 +117,15 @@ export default {
             'en-US': 'When click cancel or click out-side will trigger cancel event'
           },
           demoId: 'event'
+        },
+        {
+          name: 'color-update',
+          type: '(color:Color) => void',
+          defaultValue: '',
+          desc:{
+            'zh-cn': '当颜色更新的时候会触发该事件，包括：点击预定义颜色、点击历史记录',
+            'en-US': 'when click predefine color or history, will trigger color-update event'
+          }
         }
       ],
       'slots': []

packages/renderless/src/color-picker/index.ts

@@ -1,68 +1,61 @@
-import { IColorPickerRef, IColorSelectPanelRef } from '@/types'
+import { IColorPickerRef as Ref } from '@/types'
 import type Color from './utils/color'
 
-export const onConfirm = (
-  hex: IColorSelectPanelRef<string>,
-  triggerBg: IColorSelectPanelRef<string>,
-  res: IColorSelectPanelRef<string>,
-  emit,
-  isShow: IColorSelectPanelRef<boolean>,
-  prev: IColorPickerRef<string>
+export const onCancel = (
+  tmpColor: Color,
+  triggerBg: Ref<string>,
+  isShow: Ref<boolean>,
+  pre: Ref<string>,
+  emit
 ) => {
-  return (color: string) => {
-    prev.value = res.value;
-    res.value =  color
-    hex.value = res.value
-    triggerBg.value = res.value
-    emit('confirm', res.value)
+  return (color: Ref<Color>)=>{
+    tmpColor.reset(color.value.getHex())
+    triggerBg.value = pre.value
     isShow.value = false
+    emit('cancel')
   }
 }
 
-export const onCancel = (
-  res: IColorSelectPanelRef<string>,
-  triggerBg: IColorSelectPanelRef<string>,
-  emit,
-  isShow: IColorSelectPanelRef<boolean>,
-  hex: IColorSelectPanelRef<string>,
-  color: Color, prev: IColorPickerRef<string>
+export const onConfirm = (
+  triggerBg: Ref<string>,
+  pre: Ref<string>,
+  hex: Ref<string>,
+  isShow: Ref<boolean>,
+  emit
 ) => {
-  return () => {
-    if (isShow.value) {
-      res.value = prev.value;
-      hex.value = prev.value;
-      triggerBg.value = prev.value;
-      color.reset(hex.value)
-      emit('cancel')
-    }
+  return (color: string)=>{
+    pre.value = triggerBg.value
+    triggerBg.value = color
+    hex.value = color
     isShow.value = false
+    emit('confirm', color)
   }
 }
-export const onColorUpdate = (color: Color, res: IColorSelectPanelRef<string>, triggerBg: IColorPickerRef<string>) => {
-  res.value = color.getHex()
-  triggerBg.value = color.getHex();
+
+export const onHueUpdate = (
+  tmpColor: Color,
+  triggerBg: Ref<string>
+) => {
+  return (h: number) => {
+    triggerBg.value = tmpColor.getHex();
+    tmpColor.set({h})
+  }
 }
 
-export const onHSVUpdate = (color: Color, res: IColorSelectPanelRef<string>, hex: IColorSelectPanelRef<string>, triggerBg: IColorSelectPanelRef<string>) => {
-  return {
-    onHueUpdate: (hue: number) => {
-      color.set({ h: hue })
-      onColorUpdate(color, res, triggerBg)
-      hex.value = color.getHex()
-    },
-    onSVUpdate: ({ s, v }: { s: number; v: number }) => {
-      color.set({ h: color.get('h'), s, v })
-      onColorUpdate(color, res, triggerBg)
-      hex.value = color.getHex();
-    }
+export const onSVUpdate = (
+  tmpColor: Color,
+  triggerBg: Ref<string>
+) => {
+  return ({s,v})=>{
+    triggerBg.value = tmpColor.getHex();
+    tmpColor.set({s,v})
   }
 }
 
-export const onAlphaUpdate = (color: Color, res: IColorSelectPanelRef<string>, triggerBg: IColorSelectPanelRef<string>) => {
-  return {
-    update: (alpha: number) => {
-      color.set({ a: alpha })
-      onColorUpdate(color, res, triggerBg)
-    }
+export const onColorUpdate = (
+  triggerBg: Ref<string>
+) => {
+  return (color: Ref<Color>) => {
+    triggerBg.value = color.value.getHex();
   }
 }

packages/renderless/src/color-picker/utils/color.ts

@@ -7,7 +7,7 @@ function hexToRgb(hex: string) {
   let a = parseInt(hex.slice(7), 16) / 255
   return { r, g, b, a: a * 100 }
 }
-const normalizeHexColor = (color: string) => {
+export const normalizeHexColor = (color: string) => {
   let normalizedColor: string = color.replace('#', '')
   if (normalizedColor.length === 3) {
     normalizedColor = normalizedColor
@@ -40,6 +40,7 @@ export default class Color {
   private s = 0
   private v = 0
   private a = 100
+  private preH = 0;
   private enableAlpha = false
   constructor(value: string, alpha = false) {
     this.reset(value)
@@ -61,14 +62,17 @@ export default class Color {
     this.s = s
     this.v = v
     this.a = a
+    this.preH = h;
   }
-
   set({ h, s, v, a }: { h?: number; s?: number; v?: number; a?: number }) {
     this.h = h ?? this.h
     this.s = s ?? this.s
     this.v = v ?? this.v
     this.a = a ?? this.a
   }
+  setPrevH(val: number){
+    this.preH = val;
+  }
 
   /**
    *
@@ -104,7 +108,7 @@ export default class Color {
     }
   }
 
-  get(key: 'h' | 's' | 'v' | 'a') {
+  get(key: 'h' | 's' | 'v' | 'a' |'preH') {
     return this[key]
   }
 }