feat:colorpicker

caiwuu · Mar 15, 2024 · 32e56f5 · 32e56f5
1 parent e57adc7
commit 32e56f5
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 41 deletions.
diff --git a/packages/editor/toolBar/compinents/colorPicker/index.js b/packages/editor/toolBar/compinents/colorPicker/index.js
@@ -1,24 +1,32 @@
 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"
-]
+const colors = [
+  ["#FFFFFF", // 白色
+    "#CCCCCC", // 非常浅的灰色
+    "#999999", // 浅灰色
+    "#666666", // 中灰色
+    "#333333", // 深灰色
+    "#000000", // 黑色
+    "#FF0000", // 红色
+    "#FF4500", // 橙红色
+    "#FFA500", // 橙色
+    "#FFFF00", // 黄色
+  ],
+  [
+    "#00FF00", // 青绿色
+    "#00FFFF", // 青色
+    "#0000FF", // 蓝色
+    "#FF00FF", // 品红
+    "#800080", // 紫色
+    "#8A2BE2", // 紫罗兰色
+    "#FF1493", // 深粉色
+    "#FF69B4", // 粉红
+    "#FFC0CB", // 粉红
+    "#FFD700", // 金色
+  ]
+];
+const isSelected = true
 export default class ColorPicker extends Component {
   constructor(props) {
     super(props)
@@ -27,11 +35,19 @@ export default class ColorPicker extends Component {
   }
   render () {
     return (
-      <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 style="background:#eee;padding:10px">
+        <div >
+          {colors.map(row => <div style="display:flex;width:228px;flex-wrap: wrap;justify-content:space-between;box-sizing:border-box;margin:4px 0">
+            {row.map(ele =>
+              <div style={`position: relative;${isSelected ? 'width: 16px; height: 16px' : 'width: 18px; height: 18px'}; margin: 1px;`}>
+                <div style={`background:${ele}; width: 100%; height: 100%; border-radius: 20%;`}></div>
+                {isSelected && <div style={`position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; border: 1px solid orange; border-radius: 20%; pointer-events: none;`}></div>}
+              </div>
+            )}
+          </div>)}
         </div>
-        <div style='font-size:0;width:228px;'>
+        <div class="divider divider-height-1 divider-dashed divider-color-gray"></div>
+        <div style='font-size:0;'>
           <Palette ref={this.paletteRef} hue={this.hueRef}></Palette>
           <Hue ref={this.hueRef} color={this.props.color} paletteRef={this.paletteRef}></Hue>
         </div>

diff --git a/packages/editor/toolBar/compinents/index.js b/packages/editor/toolBar/compinents/index.js
@@ -1,4 +1,5 @@
-export {Dialog} from "./Dialog";
-export {Tooltip} from "./Tooltip";
-export {DialogContent} from './DialogContent'
-export {default as ColorPicker} from './colorPicker'
+import './toolBar.styl'
+export { Dialog } from "./Dialog";
+export { Tooltip } from "./Tooltip";
+export { DialogContent } from './DialogContent'
+export { default as ColorPicker } from './colorPicker'
diff --git a/packages/editor/toolBar/toolBar.styl → ...es/editor/toolBar/compinents/toolBar.styl b/packages/editor/toolBar/toolBar.styl → ...es/editor/toolBar/compinents/toolBar.styl
@@ -116,4 +116,38 @@
         height 12px
         border-radius 50%
         box-shadow rgb(255 255 255) 0px 0px 0px 1px inset
-        transform translate(-6px, -6px)
+        transform translate(-6px, -6px)
+/* 分割线的基础样式 */
+.divider {
+  margin: 10px 0; /* 分割线上下各留出10像素的间距 */
+}
+
+/* 定义不同高度的分割线 */
+.divider-height-1 {
+  border-top-width: 1px;
+}
+
+.divider-height-2 {
+  border-top-width: 2px;
+}
+
+/* 定义不同颜色的分割线 */
+.divider-color-black {
+  border-top-color: #000;
+}
+
+.divider-color-red {
+  border-top-color: #FF0000;
+}
+.divider-color-gray {
+  border-top-color: #aaaaaa;
+}
+
+/* 定义实线和虚线分割线 */
+.divider-solid {
+  border-top-style: solid;
+}
+
+.divider-dashed {
+  border-top-style: dashed;
+}
diff --git a/packages/editor/toolBar/index.js b/packages/editor/toolBar/index.js
@@ -1,7 +1,6 @@
 import { Component, createRef } from '@typex/core'
 import './iconfont'
-import './toolBar.styl'
-import { Dialog,Tooltip,DialogContent } from './compinents'
+import { Dialog, Tooltip, DialogContent } from './compinents'
 // 工具栏
 export default class ToolBar extends Component {
   toolBarItems = []
@@ -20,10 +19,10 @@ export default class ToolBar extends Component {
       this.notice(commonKeyValue)
     })
   }
-  notice(commonKeyValue) {
+  notice (commonKeyValue) {
     this.toolBarItems.forEach((item) => item.onNotice(commonKeyValue))
   }
-  render() {
+  render () {
     const { tools } = this.props
     return (
       <div class='editor-tool-bar'>
@@ -50,48 +49,48 @@ class ToolBarItem extends Component {
     this.dialogRef = createRef()
     this.barItemRef = createRef()
   }
-  onNotice(commonKeyValue) {
+  onNotice (commonKeyValue) {
     if (commonKeyValue[this.props.commandName] !== this.state.active) {
       this.setState({
         active: commonKeyValue[this.props.commandName],
       })
     }
   }
-  render() {
+  render () {
     return (
       <span
         class='editor-tool-bar-item'
-        ref = {this.barItemRef}
+        ref={this.barItemRef}
         style={`color: ${!this.state.active ? 'rgb(227 227 227);' : 'rgb(42 201 249)'};`}
       >
         <svg onClick={this.clickHandle} class='icon' aria-hidden ns='http://www.w3.org/2000/svg'>
           <use xlink:href={this.props.icon}></use>
         </svg>
         {
           this.props.options
-          ?
-            <Dialog ref={this.dialogRef} barItemRef = {this.barItemRef}>
+            ?
+            <Dialog ref={this.dialogRef} barItemRef={this.barItemRef}>
               <DialogContent name={this.props.commandName} options={this.props.options}></DialogContent>
             </Dialog>
-          :''
+            : ''
         }
       </span>
     )
   }
-  emitComand = ()=>{
+  emitComand = () => {
     this.props.editor.command(this.props.commandName)
   }
   clickHandle = (e) => {
-    if(this.dialogRef.current){
+    if (this.dialogRef.current) {
       this.dialogRef.current.toggle(e)
-    }else{
+    } else {
       this.emitComand()
     }
   }
 }
 
 
-function findCommonKeyValuePairs(lists) {
+function findCommonKeyValuePairs (lists) {
   if (lists.length === 0) return {}
   const commonPairs = {}
   for (const key in lists[0]) {