11

caiwuu · Apr 3, 2024 · 9ba8901 · 9ba8901
1 parent b4a38aa
commit 9ba8901
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 64 deletions.
diff --git a/packages/editor/toolBar/compinents/DialogContent.js b/packages/editor/toolBar/compinents/DialogContent.js
@@ -4,7 +4,7 @@ import ColorPicker from './colorPicker'
 const comMap = {
   fontColor: (h, self) => (
     <div id="colorPicker">
-      <ColorPicker color='red'></ColorPicker>
+      <ColorPicker color='#666666'></ColorPicker>
     </div>
   )
 }

diff --git a/packages/editor/toolBar/compinents/colorPicker/controlPanel.js b/packages/editor/toolBar/compinents/colorPicker/controlPanel.js
@@ -19,7 +19,7 @@ export default class ControlPanel extends Component {
   constructor(props) {
     super(props)
     this.colorBlockStyle = `background:${this.props.color};`
-    this.state = { x: 200, x2: 200, R: 255, G: 0, B: 0, A: 1 }
+    this.state = { x: 200, x2: 200, H: 0, R: 255, G: 0, B: 0, A: 1 }
     this.colorBlock = createRef()
     this.hueContainer = createRef()
     this.transparencyContainer = createRef()
@@ -58,81 +58,75 @@ export default class ControlPanel extends Component {
     console.log('onMountedonMounted');
     this.$nextTick(() => {
       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({
-        x: x <= 6 ? 6 : x,
-        x2: A * 200 <= 6 ? 6 : A * 200,
-        R,
-        G,
-        B,
-        A,
-      })
+      const [H] = RGBToHSL(R, G, B)
+      this.update(H, R, G, B, A)
+      this.props.paletteRef.current.update(H, R, G, B)
     })
   }
 
-  update = (state) => {
-    const { R, G, B, A } = state
-    this.color = `rgba(${R},${G},${B},${A || this.state.A})`
-    const [hue] = RGBToHSL(R, G, B)
-    const x = 200 - (hue * 5) / 9
-    // this.props.paletteRef.current.setPalette(hue, R, G, B)
+  /**
+   * @description 更新
+   * @param {*} H
+   * @param {*} R
+   * @param {*} G
+   * @param {*} B
+   * @param {*} A
+   * @memberof ControlPanel
+   */
+  update = (H, R, G, B, A) => {
+    A = isDef(A) ? A : this.state.A
+    this.updateColorBlockStyle(R, G, B, A)
+    const x = 194 - (H * 5) / 9
     this.setState({
-      A,
-      x2: A * 200 <= 6 ? 6 : A * 200,
-      x: x <= 6 ? 6 : x,
+      x: x,
+      x2: A * 194,
+      H,
       R,
       G,
       B,
+      A,
     })
-    this.props.onChange?.({ R, G, B, A: A || this.state.A })
   }
 
   /**
    * @description 色块颜色更新
    * @memberof ControlPanel
-   * @private
    */
   updateColorBlockStyle = (R, G, B, A) => {
     this.colorBlockStyle = `background:rgba(${R},${G},${B},${A});`
   }
   /**
   * @description 色相滑块块滑动事件
   * @memberof ControlPanel
-  * @private
   */
   handleHueChange = throttle((e) => {
     pauseEvent(e)
     const x = typeof e.pageX === 'number' ? e.pageX : e.touches[0].pageX
     let left = x - (this.hueContainer.current.getBoundingClientRect().left + window.scrollX)
-    left = left >= 200 ? 200 : left <= 6 ? 6 : left
-    const hue = (1 - (left - 6) / 194) * 360
+    left = left >= 194 ? 194 : left <= 0 ? 0 : left
+    const H = (1 - left / 194) * 360
     const [R, G, B] = coordinatesToRgb(
-      hue,
+      H,
       this.props.paletteRef.current.state.px,
       this.props.paletteRef.current.state.py
     )
-    this.updateColorBlockStyle(R, G, B, this.state.A)
-    console.log(R, G, B, this.state.A);
-    this.setState({ x: left, R, G, B })
-    // this.props.paletteRef.current.setPalette(hue)
+    const A = this.state.A
+    this.update(H, R, G, B, A)
+    this.props.paletteRef.current.update(H, R, G, B, A)
   }, 32)
 
   /**
    * @description 透明度滑块块滑动事件
    * @memberof ControlPanel
-   * @private
    */
   handleTransparencyChange = throttle((e) => {
     pauseEvent(e)
     const x = typeof e.pageX === 'number' ? e.pageX : e.touches[0].pageX
     let left = x - (this.transparencyContainer.current.getBoundingClientRect().left + window.scrollX)
     left = left >= 200 ? 200 : left <= 0 ? 0 : left
     const A = left / 200
-    const { R, G, B } = this.state
-    this.update({ x2: left <= 6 ? 6 : left, A, R, G, B })
+    const { R, G, B, H } = this.state
+    this.update(H, R, G, B, A)
   }, 32)
 
   handleHueMouseDown = (e) => {

diff --git a/packages/editor/toolBar/compinents/colorPicker/index.js b/packages/editor/toolBar/compinents/colorPicker/index.js
@@ -1,7 +1,7 @@
 import Palette from './palette'
 import ControlPanel from './controlPanel'
 import { createRef, Component } from '@typex/core'
-import { rgbaToHex, hexToRgba } from './utils'
+import { rgbaToHex, hexToRgba, RGBToHSL } from './utils'
 
 const colors = [
   [
@@ -41,7 +41,7 @@ export default class ColorPicker extends Component {
 
   render () {
     return (
-      <div class="color-picker-block">
+      <div class="color-picker-container">
         <div class="colors-block">
           {colors.map(row => <div style="display:flex;flex-wrap: wrap;justify-content:space-between;box-sizing:border-box;margin:4px 0">
             {row.map(ele => {
@@ -67,10 +67,14 @@ export default class ColorPicker extends Component {
     this.setState({
       hexColor: ele
     })
-    // const [R, G, B, A] = hexToRgba(ele)
-    // this.controlPanelRef.current.update({ R, G, B, A })
+    const [R, G, B, A] = hexToRgba(ele)
+    const [H] = RGBToHSL(R, G, B)
+    this.update(H, R, G, B, A)
+  }
+  update = (H, R, G, B, A) => {
+    this.controlPanelRef.current.update(H, R, G, B, A)
+    this.paletteRef.current.update(H, R, G, B)
   }
-
   isSelected = (hc) => {
     return this.state.hexColor === hc
   }
@@ -87,6 +91,6 @@ export default class ColorPicker extends Component {
   }
 
   onCreated () {
-    console.log('-==-');
+    console.log('-=onCreated=-');
   }
 }
diff --git a/packages/editor/toolBar/compinents/colorPicker/palette.js b/packages/editor/toolBar/compinents/colorPicker/palette.js
@@ -1,5 +1,5 @@
 import { createRef, Component, utils } from '@typex/core'
-import { rgbToCoordinates, coordinatesToRgb } from './utils'
+import { rgbToCoordinates, coordinatesToRgb, RGBToHSL } from './utils'
 const { throttle, isDef } = utils
 function pauseEvent (e) {
   if (e.stopPropagation) e.stopPropagation()
@@ -12,13 +12,13 @@ function pauseEvent (e) {
 export default class Palette extends Component {
   constructor(props) {
     super(props)
-    this.state = { hue: 0, x: 228, y: 0, px: 1, py: 1 }
+    this.state = { H: 0, x: 228, y: 0, px: 0, py: 1 }
     this.containerRef = createRef()
   }
   render () {
     return (
       <div
-        style={`background: linear-gradient(to top, rgba(0, 0, 0, 1), transparent), linear-gradient(to left, hsla(${this.state.hue}, 100%, 50%, 1), rgba(255, 255, 255, 1))`}
+        style={`background: linear-gradient(to top, rgba(0, 0, 0, 1), transparent), linear-gradient(to left, hsla(${this.state.H}, 100%, 50%, 1), rgba(255, 255, 255, 1))`}
         onMousedown={this.handleMouseDown}
         class='palette'
         ref={this.containerRef}
@@ -31,19 +31,15 @@ export default class Palette extends Component {
     pauseEvent(e)
     const x = typeof e.pageX === 'number' ? e.pageX : e.touches[0].pageX
     const y = typeof e.pageY === 'number' ? e.pageY : e.touches[0].pageY
-    const left = x - (this.containerRef.current.getBoundingClientRect().left + window.scrollX)
-    const top = y - (this.containerRef.current.getBoundingClientRect().top + window.scrollY)
+    let left = x - (this.containerRef.current.getBoundingClientRect().left + window.scrollX)
+    let top = y - (this.containerRef.current.getBoundingClientRect().top + window.scrollY)
+    left = left < 0 ? 0 : left > 228 ? 228 : left
+    top = top < 0 ? 0 : top > 150 ? 150 : top
     const px = (228 - left) / 228
     const py = (150 - top) / 150
-    console.log(left, top);
-    this.setState({
-      x: left >= 228 ? 228 : left <= 0 ? 0 : left,
-      y: top >= 150 ? 150 : top <= 0 ? 0 : top,
-      px,
-      py,
-    })
-    const [R, G, B] = coordinatesToRgb(this.state.hue, px, py)
-    this.props.controlPanel.current.update({ R, G, B })
+    const [R, G, B] = coordinatesToRgb(this.state.H, px, py)
+    this.setState({ x: left, y: top, px, py })
+    this.props.controlPanel.current.update(this.state.H, R, G, B)
   }, 32)
 
   handleMouseDown = (e) => {
@@ -62,11 +58,10 @@ export default class Palette extends Component {
     window.removeEventListener('mousemove', this.handleChange)
     window.removeEventListener('mouseup', this.handleMouseUp)
   }
-  setPalette (H, R, G, B) {
-    if (isDef(B)) {
-      const [x, y] = rgbToCoordinates(H, R, G, B)
-      this.setState({ x: (1 - x) * 228, y: (1 - y) * 150, px: x, py: y })
-    }
-    this.setState({ hue: H })
+  update (H, R, G, B) {
+    const [px, py] = rgbToCoordinates(H, R, G, B)
+    const x = (1 - px) * 228
+    const y = (1 - py) * 150
+    this.setState({ x, y, px, py, H })
   }
 }
diff --git a/packages/editor/toolBar/compinents/colorPicker/utils.js b/packages/editor/toolBar/compinents/colorPicker/utils.js
@@ -41,6 +41,8 @@ export function rgbToCoordinates (H, R, G, B) {
   return [round(x, 2), round(y, 2)]
 }
 export function coordinatesToRgb (H, px, py) {
+  px = px < 0 ? 0 : px > 1 ? 1 : px
+  py = py < 0 ? 0 : py > 1 ? 1 : py
   const [PR, PG, PB] = HSLToRGB(H, 100, 50)
   const R = ((255 - PR) * px + PR) * py
   const G = ((255 - PG) * px + PG) * py

diff --git a/packages/editor/toolBar/compinents/toolBar.styl b/packages/editor/toolBar/compinents/toolBar.styl
@@ -60,7 +60,7 @@
 
 // 组件
 // 颜色选择器
-.color-picker-block
+.color-picker-container
     background:#eee
     padding:10px
     .control-panel
@@ -73,7 +73,7 @@
                 position relative
                 width 6px
                 height 12px
-                transform translate(-6px, -1px)
+                transform translateY(-1px)
                 background-color rgb(248, 248, 248)
                 box-shadow rgba(0, 0, 0, 0.37) 0px 1px 4px 0px
             .slider-bar