1

caiwuu · Jul 9, 2024 · 50c9b82 · 50c9b82
1 parent 4569278
commit 50c9b82
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 11 deletions.
diff --git a/packages/editor/toolBar/compinents/DialogContent.js b/packages/editor/toolBar/compinents/DialogContent.js
@@ -8,22 +8,35 @@ const headerOps = [
   [5, "H5"],
   [6, "H6"],
 ]
+const fontSizeOps = [10, 11, 12, 14, 16, 18, 20, 24, 36, 48, 60]
 function headerClickHandle (e, vm) {
   const val = e.target.dataset.headervalue
   if (val) {
-    vm.props.onOk(val)
+    vm.props.onOk(+val)
   }
 }
 const comMap = {
   color: (h, self) => (
     <div id="colorPicker">
-      <ColorPicker onOk={self.props.onOk} color='#666666'></ColorPicker>
+      <ColorPicker onOk={self.props.onOk} color={self.props.value}></ColorPicker>
+    </div>
+  ),
+  background: (h, self) => (
+    <div id="colorPicker">
+      <ColorPicker onOk={self.props.onOk} color={self.props.value}></ColorPicker>
     </div>
   ),
   header: (h, self) => {
     return <div onClick={(e) => headerClickHandle(e, self)} style="color:#666">
       {
-        headerOps.map(ele => h(ele[1], { "data-headervalue": ele[0], style: { margin: '2px 0' }, class: 'header-selector-item' }, [ele[1]]))
+        headerOps.map(ele => h(ele[1], { "data-headervalue": ele[0], style: { margin: '2px 8px' }, class: `header-selector-item ${self.props.value === ele[0] ? 'active' : ''}` }, [ele[1]]))
+      }
+    </div>
+  },
+  fontSize: (h, self) => {
+    return <div onClick={(e) => headerClickHandle(e, self)} style="color:#666">
+      {
+        fontSizeOps.map(ele => h('div', { "data-headervalue": ele, style: { margin: '2px 8px' }, class: `header-selector-item ${self.props.value === ele + 'px' ? 'active' : ''}` }, [ele]))
       }
     </div>
   }

diff --git a/packages/editor/toolBar/compinents/toolBar.styl b/packages/editor/toolBar/compinents/toolBar.styl
@@ -4,7 +4,7 @@
     background rgb(40 40 40)
     padding 6px
 
-    .header-selector-item:hover{
+    .header-selector-item:hover,.header-selector-item.active{
         background: #ddd;
         color: #2ac9f9
     }

diff --git a/packages/editor/toolBar/index.js b/packages/editor/toolBar/index.js
@@ -51,21 +51,21 @@ export default class ToolBar extends Component {
 class ToolBarItem extends Component {
   constructor(props) {
     super(props)
-    this.state = { active: false, dialogVisiable: false }
+    this.state = { currValue: false, dialogVisiable: false }
     this.props.toolBarItemInses.push(this)
     this.dialogRef = createRef()
     this.barItemRef = createRef()
   }
 
   onNotice (commonKeyValue) {
-    if (commonKeyValue[this.props.name] !== this.state.active) {
+    if (commonKeyValue[this.props.name] !== this.state.currValue) {
       this.setState({
-        active: commonKeyValue[this.props.name],
+        currValue: commonKeyValue[this.props.name],
       })
     }
   }
   getStyleColor () {
-    if (!this.state.active) return 'rgb(227 227 227);'
+    if (!this.state.currValue) return 'rgb(227 227 227);'
     if (this.props.name === 'color') return 'rgb(227 227 227);'
     return 'rgb(42 201 249)'
   }
@@ -80,13 +80,13 @@ class ToolBarItem extends Component {
           <use xlink:href={this.props.icon}></use>
         </svg>
         {
-          this.props.name === 'color' ? <span class="color-line" style={`background:${this.state.active ? this.state.active : '#000'}`}></span> : ''
+          this.props.name === 'color' ? <span class="color-line" style={`background:${this.state.currValue ? this.state.currValue : '#000'}`}></span> : ''
         }
         {
           this.props.showDialog && this.state.dialogVisiable
             ?
             <div style='background:#efefef;position:absolute;top:35px;z-index:1'>
-              <DialogContent onOk={this.onOk} name={this.props.name}></DialogContent>
+              <DialogContent value={this.state.currValue || '#000'} onOk={this.onOk} name={this.props.name}></DialogContent>
             </div>
             : ''
         }

diff --git a/packages/editor/toolBar/toolBarOptions.js b/packages/editor/toolBar/toolBarOptions.js
@@ -22,14 +22,15 @@ const toolBarOptions = [
         icon: '#icon-header',
         showDialog: true,
         commandHandle: (editor, level) => setComponent(editor, path => {
-            console.log(path);
             path.node.formats = { header: level }
         })
     },
     {
         tooltip: '字体大小',
         name: 'fontSize',
         icon: '#icon-font-size',
+        showDialog: true,
+        commandHandle: (editor, fontSize) => setFormat(editor, path => (path.node.formats.fontSize = `${fontSize}px`))
     },
     {
         tooltip: '字体颜色',
@@ -60,6 +61,8 @@ const toolBarOptions = [
         tooltip: '背景填充',
         name: 'background',
         icon: '#icon-fill',
+        showDialog: true,
+        commandHandle: (editor, { R, G, B, A }) => setFormat(editor, path => (path.node.formats.background = `rgba(${R},${G},${B},${A})`)),
     },
     {
         tooltip: '左对齐',