fix(color-picker): 修复组件若干问题 (opentiny#394)

* 🐞 fix(color-picker): 修复国际化问题 * ✨ feat(color-picker): 点击选择 * ✨ feat(color-picker): 点选 * 🐞 fix(color-picker): 修复了颜色闪烁bug 当thumb拖动，但取消选择后，再次点击trigger颜色会出现错误的bug * 🐞 fix(color-picker): 修复颜色抖动问题当用户拖动thumb，但点击cancel时，再次点击trigger拖动thumb或cursor，颜色会有抖动（也就是不统一） * ✨ feat(color-picker): alpha点选
cpmlhj · Aug 17, 2023 · 0bdf96d · 0bdf96d
1 parent 0029477
commit 0bdf96d
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 31 deletions.
diff --git a/packages/renderless/src/color-picker/alpha-select/vue.ts b/packages/renderless/src/color-picker/alpha-select/vue.ts
@@ -46,7 +46,10 @@ export const renderless = (props, context, { emit }) => {
     draggable(slider.value, {
       drag(event) {
         onDrag(event as MouseEvent, slider, alphaThumb, alpha)
-      }
+      },
+      start(event) {
+        onDrag(event as MouseEvent, slider, alphaThumb, alpha)
+      },
     })
   })
   return api

diff --git a/packages/renderless/src/color-picker/color-select/index.ts b/packages/renderless/src/color-picker/color-select/index.ts
@@ -41,3 +41,40 @@ export const resetCursor = (
   thumb.value.style.top = `${thummbTop}px`
   h.value = color.get('h')
 }
+
+export const updateCursor = (wrapper: IColorPickerRef<HTMLElement>, cursor: IColorPickerRef<HTMLElement>, emit) => {
+  return (color: Color, event: MouseEvent)=>{
+    const rect = wrapper.value.getBoundingClientRect();
+    const {x,y} = updatePosition(event, rect, cursor)
+    color.set({
+      s: calcSaturation(x, rect.width) * 100,
+      v: calcBrightness(y, rect.height)
+    })
+    emit('sv-update', {
+      s: color.get('s'),
+      v: color.get('v')
+    })
+  }
+}
+
+export const updateThumb = (
+  bar: IColorPickerRef<HTMLElement>,
+  thumb: IColorPickerRef<HTMLElement>,
+  h: IColorPickerRef<Number>,
+  emit
+) => {
+  return (event: MouseEvent)=>{
+    const e = event as MouseEvent
+        const rect = bar.value.getBoundingClientRect()
+        let top = e.clientY - rect.top
+        top = Math.min(top, rect.height - thumb.value.offsetHeight / 2)
+        top = Math.max(thumb.value.offsetHeight / 2, top)
+        thumb.value.style.top = `${top}px`
+        h.value = Math.round(
+          ((top - thumb.value.offsetHeight / 2) /
+          (rect.height - thumb.value.offsetHeight)) *
+          360
+        )
+        emit('hue-update', h.value)
+  }
+}
diff --git a/packages/renderless/src/color-picker/color-select/vue.ts b/packages/renderless/src/color-picker/color-select/vue.ts
@@ -2,11 +2,10 @@ import {IColorPickerRef as Ref} from '@/types';
 import { draggable } from '../utils/use-drag'
 import Color from '../utils/color'
 import {
-  calcBrightness,
-  calcSaturation,
-  updatePosition,
   getThumbTop,
   resetCursor,
+  updateThumb,
+  updateCursor,
 } from './index'
 
 export const api = ['state', 'cursor', 'wrapper', 'bar', 'thumb']
@@ -30,6 +29,10 @@ export const renderless = (props, context, { emit }) => {
     resetCursor(color.get('s'), color.get('v'), wrapper, cursor, thumb, color, h)
   })
   context.onMounted(() => {
+    const update = {
+      thumb: updateThumb(bar, thumb, h, emit),
+      cursor: updateCursor(wrapper,cursor,emit)
+    };
     const thumbTop = getThumbTop(wrapper.value, thumb.value, h.value)
     thumb.value.style.top = `${thumbTop}px`
     resetCursor(
@@ -43,32 +46,18 @@ export const renderless = (props, context, { emit }) => {
     )
     draggable(wrapper.value, {
       drag(event) {
-        const rect = wrapper.value.getBoundingClientRect()
-        const { x, y } = updatePosition(event, rect, cursor)
-        color.set({
-          s: calcSaturation(x, rect.width) * 100,
-          v: calcBrightness(y, rect.height)
-        })
-        emit('sv-update', {
-          s: color.get('s'),
-          v: color.get('v')
-        })
+        update.cursor(color, event as MouseEvent);
+      },
+      start(event) {
+        update.cursor(color, event as MouseEvent);
       },
     })
     draggable(bar.value, {
       drag(event) {
-        const e = event as MouseEvent
-        const rect = bar.value.getBoundingClientRect()
-        let top = e.clientY - rect.top
-        top = Math.min(top, rect.height - thumb.value.offsetHeight / 2)
-        top = Math.max(thumb.value.offsetHeight / 2, top)
-        thumb.value.style.top = `${top}px`
-        h.value = Math.round(
-          ((top - thumb.value.offsetHeight / 2) /
-          (rect.height - thumb.value.offsetHeight)) *
-          360
-        )
-        emit('hue-update', h.value)
+        update.thumb(event as MouseEvent)
+      },
+      start(event){
+        update.thumb(event as MouseEvent);
       }
     })
   })

diff --git a/packages/renderless/src/color-picker/index.ts b/packages/renderless/src/color-picker/index.ts
@@ -14,11 +14,14 @@ export const onConfirm = (
 }
 
 export const onCancel = (
-  res: IColorPickerRef<string>, triggerBg: IColorPickerRef<string>, emit, isShow: IColorPickerRef<boolean>
+  res: IColorPickerRef<string>, triggerBg: IColorPickerRef<string>, emit, isShow: IColorPickerRef<boolean>,
+  hex: IColorPickerRef<string>, color: Color
 ) => {
   return () => {
-    res.value = triggerBg.value
     if (isShow.value){
+      res.value = triggerBg.value
+      hex.value = triggerBg.value
+      color.reset(hex.value)
       emit('cancel')
     }
     isShow.value = false

diff --git a/packages/renderless/src/color-picker/vue.ts b/packages/renderless/src/color-picker/vue.ts
@@ -55,7 +55,7 @@ export const renderless = (
     onHueUpdate,
     onSVUpdate,
     onConfirm: onConfirm(hex, triggerBg, res, emit, isShow),
-    onCancel: onCancel(res, triggerBg, emit, isShow),
+    onCancel: onCancel(res, triggerBg, emit, isShow, hex, color),
     onAlphaUpdate: update,
     cursor,
     alpha: props.alpha

diff --git a/packages/theme/src/index.less b/packages/theme/src/index.less
@@ -42,6 +42,7 @@
 @import './col/index.less';
 @import './collapse/index.less';
 @import './collapse-item/index.less';
+@import './color-picker/index.less';
 @import './company/index.less';
 @import './config-provider/index.less';
 @import './container/index.less';

diff --git a/packages/vue/src/color-picker/src/pc.vue b/packages/vue/src/color-picker/src/pc.vue
@@ -42,7 +42,7 @@ import ButtonGroup from '@opentiny/vue-button-group'
 import Input from '@opentiny/vue-input'
 import Clickoutside from '@opentiny/vue-renderless/common/deps/clickoutside'
 import '@opentiny/vue-theme/color-picker/index.less'
-import { language } from '@opentiny/vue-locale'
+import { t } from '@opentiny/vue-locale'
 
 export default defineComponent({
   emits: ['update:modelValue', 'confirm', 'cancel'],
@@ -57,7 +57,7 @@ export default defineComponent({
   },
   directives: directive({ Clickoutside }),
   setup(props, context) {
-    return setup({ props, context, renderless, api, extendOptions: { language } })
+    return setup({ props, context, renderless, api })
   }
 })
 </script>