完善颜色选择器

caiwuu · Mar 1, 2024 · e57adc7 · e57adc7
1 parent 29d983c
commit e57adc7
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 30 deletions.
diff --git a/packages/editor/toolBar/compinents/DialogContent.js b/packages/editor/toolBar/compinents/DialogContent.js
@@ -2,19 +2,19 @@ import { Component, createRef } from '@typex/core'
 import ColorPicker from './colorPicker'
 
 const comMap = {
-    fontColor:(h,self)=>(
-        <div id="colorPicker">
-            <ColorPicker color='#666600'></ColorPicker>
-      </div>
-    )
+  fontColor: (h, self) => (
+    <div id="colorPicker">
+      <ColorPicker color='red'></ColorPicker>
+    </div>
+  )
 }
 export class DialogContent extends Component {
-    constructor(props) {
-      super(props)
-    }
-    render(h) {
-      return comMap[this.props.options.componentName]?.(h,this)|| <span>404</span>
-    }
+  constructor(props) {
+    super(props)
   }
+  render (h) {
+    return comMap[this.props.options.componentName]?.(h, this) || <span>404</span>
+  }
+}
 
 
diff --git a/packages/editor/toolBar/compinents/colorPicker/hue.js b/packages/editor/toolBar/compinents/colorPicker/hue.js
@@ -8,7 +8,7 @@
 import { createRef, Component, utils } from '@typex/core'
 import { toRGBArray, HSLToRGB, RGBToHSL, coordinatesToRgb } from './utils'
 const { throttle, isDef } = utils
-function pauseEvent(e) {
+function pauseEvent (e) {
   if (e.stopPropagation) e.stopPropagation()
   if (e.preventDefault) e.preventDefault()
   e.cancelBubble = true
@@ -24,7 +24,7 @@ export default class Hue extends Component {
     this.hueContainer = createRef()
     this.transparencyContainer = createRef()
   }
-  render() {
+  render () {
     return (
       <div class='picker'>
         <div class='left'>
@@ -52,20 +52,24 @@ export default class Hue extends Component {
       </div>
     )
   }
-  onMounted() {
-    let [R, G, B, A] = toRGBArray(getComputedStyle(this.colorBlock.current).backgroundColor)
-    const [hue] = RGBToHSL(R, G, B)
-    A = isDef(A) ? A : 1
-    this.props.paletteRef.current.setPalette(hue, R, G, B)
-    const x = 200 - (hue * 5) / 9
-    this.setState({
-      A,
-      x2: A * 200 <= 6 ? 6 : A * 200,
-      x: x <= 6 ? 6 : x,
-      R,
-      G,
-      B,
+  onMounted () {
+    this.$nextTick(() => {
+      console.log(getComputedStyle(this.colorBlock.current).backgroundColor);
+      let [R, G, B, A] = toRGBArray(getComputedStyle(this.colorBlock.current).backgroundColor)
+      const [hue] = RGBToHSL(R, G, B)
+      A = isDef(A) ? A : 1
+      this.props.paletteRef.current.setPalette(hue, R, G, B)
+      const x = 200 - (hue * 5) / 9
+      this.setState({
+        A,
+        x2: A * 200 <= 6 ? 6 : A * 200,
+        x: x <= 6 ? 6 : x,
+        R,
+        G,
+        B,
+      })
     })
+
   }
   // hue
   handleHueChange = throttle((e) => {
@@ -115,7 +119,7 @@ export default class Hue extends Component {
     this.unbindEventListeners()
   }
 
-  unbindEventListeners() {
+  unbindEventListeners () {
     window.removeEventListener('mousemove', this.handleHueChange)
     window.removeEventListener('mousemove', this.handleTransparencyChange)
     window.removeEventListener('mouseup', this.handleMouseUp)

diff --git a/packages/editor/toolBar/compinents/colorPicker/index.js b/packages/editor/toolBar/compinents/colorPicker/index.js
@@ -1,6 +1,24 @@
 import Palette from './palette'
 import Hue from './hue'
 import { createRef, Component } from '@typex/core'
+const colorList = [
+  "#FF0000",
+  "#00FF00",
+  "#0000FF",
+  "#FFFF00",
+  "#FFC0CB",
+  "#FFA500",
+  "#00FFFF",
+  "#800080",
+  "#FF6347",
+  "#8A2BE2",
+  "#7FFF00",
+  "#8B008B",
+  "#A52A2A",
+  "#4169E1",
+  "#228B22",
+  "#FF4500"
+]
 export default class ColorPicker extends Component {
   constructor(props) {
     super(props)
@@ -9,9 +27,14 @@ export default class ColorPicker extends Component {
   }
   render () {
     return (
-      <div style='font-size:0;width:228px;'>
-        <Palette ref={this.paletteRef} hue={this.hueRef}></Palette>
-        <Hue ref={this.hueRef} color={this.props.color} paletteRef={this.paletteRef}></Hue>
+      <div style="background:#fff">
+        <div style="display:flex;width:228px;flex-wrap: wrap;justify-content:space-between;padding:10px;box-sizing:border-box">
+          {colorList.map(ele => <div style={`background:${ele};height:16px;width:50px;margin:4px 0;border-radius:4px`}></div>)}
+        </div>
+        <div style='font-size:0;width:228px;'>
+          <Palette ref={this.paletteRef} hue={this.hueRef}></Palette>
+          <Hue ref={this.hueRef} color={this.props.color} paletteRef={this.paletteRef}></Hue>
+        </div>
       </div>
     )
   }