1

caiwuu · Jul 8, 2024 · 4569278 · 4569278
1 parent 3aa38e2
commit 4569278
Show file tree

Hide file tree

Showing 9 changed files with 40 additions and 63 deletions.
diff --git a/packages/@typex-core/selection/index.js b/packages/@typex-core/selection/index.js
@@ -438,16 +438,6 @@ export default class Selection {
     }
   }
 
-  /**
-   * @description 获取同级path
-   * @memberof Selection
-   */
-  getPeerPaths () {
-    if (this.collapse) {
-      return [this.ranges[0].container.currentComponent.$path]
-    }
-  }
-
   recoverRangesFromSnapshot (rangesSnapshot) {
     this.removeAllRanges()
     this.ranges = rangesSnapshot.map((jsonRange) =>

diff --git a/packages/editor/toolBar/compinents/Dialog.js b/packages/editor/toolBar/compinents/Dialog.js
diff --git a/packages/editor/toolBar/compinents/DialogContent.js b/packages/editor/toolBar/compinents/DialogContent.js
@@ -15,15 +15,14 @@ function headerClickHandle (e, vm) {
   }
 }
 const comMap = {
-  fontColor: (h, self) => (
+  color: (h, self) => (
     <div id="colorPicker">
       <ColorPicker onOk={self.props.onOk} color='#666666'></ColorPicker>
     </div>
   ),
   header: (h, self) => {
     return <div onClick={(e) => headerClickHandle(e, self)} style="color:#666">
       {
-        // headerOps.map(ele => <div data-headervalue={ele[0]}>{ele[1]}</div>)
         headerOps.map(ele => h(ele[1], { "data-headervalue": ele[0], style: { margin: '2px 0' }, class: 'header-selector-item' }, [ele[1]]))
       }
     </div>

diff --git a/packages/editor/toolBar/compinents/index.js b/packages/editor/toolBar/compinents/index.js
@@ -1,5 +1,4 @@
 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/compinents/toolBar.styl b/packages/editor/toolBar/compinents/toolBar.styl
@@ -16,10 +16,15 @@
         overflow hidden
     .editor-tool-bar-item
         padding 4px 10px
-        display inline-block
+        display flex
+        flex-direction column
         border-radius 4px
         cursor pointer
         user-select none
+        .color-line
+            width 70%
+            height 3px
+            margin -3px auto 0 auto
 
     .editor-tooltip
         position relative

diff --git a/packages/editor/toolBar/iconfont.js b/packages/editor/toolBar/iconfont.js
diff --git a/packages/editor/toolBar/index.js b/packages/editor/toolBar/index.js
@@ -1,6 +1,6 @@
 import { Component, createRef } from '@typex/core'
 import './iconfont'
-import { Dialog, Tooltip, DialogContent } from './compinents'
+import { Tooltip, DialogContent } from './compinents'
 
 // 工具栏
 export default class ToolBar extends Component {
@@ -25,7 +25,6 @@ export default class ToolBar extends Component {
   }
 
   notice (commonKeyValue) {
-    console.log(commonKeyValue);
     this.toolBarItemInses.forEach((item) => item.onNotice(commonKeyValue))
   }
 
@@ -52,7 +51,7 @@ export default class ToolBar extends Component {
 class ToolBarItem extends Component {
   constructor(props) {
     super(props)
-    this.state = { active: false }
+    this.state = { active: false, dialogVisiable: false }
     this.props.toolBarItemInses.push(this)
     this.dialogRef = createRef()
     this.barItemRef = createRef()
@@ -65,41 +64,58 @@ class ToolBarItem extends Component {
       })
     }
   }
-
+  getStyleColor () {
+    if (!this.state.active) return 'rgb(227 227 227);'
+    if (this.props.name === 'color') return 'rgb(227 227 227);'
+    return 'rgb(42 201 249)'
+  }
   render () {
     return (
-      <span
+      <div
         class='editor-tool-bar-item'
         ref={this.barItemRef}
-        style={`color: ${!this.state.active ? 'rgb(227 227 227);' : 'rgb(42 201 249)'};`}
+        style={`color: ${this.getStyleColor()}`}
       >
         <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.showDialog
+          this.props.name === 'color' ? <span class="color-line" style={`background:${this.state.active ? this.state.active : '#000'}`}></span> : ''
+        }
+        {
+          this.props.showDialog && this.state.dialogVisiable
             ?
-            <Dialog ref={this.dialogRef} barItemRef={this.barItemRef}>
+            <div style='background:#efefef;position:absolute;top:35px;z-index:1'>
               <DialogContent onOk={this.onOk} name={this.props.name}></DialogContent>
-            </Dialog>
+            </div>
             : ''
         }
-      </span>
+      </div>
     )
   }
 
   onOk = (val) => {
-    this.dialogRef.current.toggle()
+    this.toggle()
     this.emitComand(val)
   }
-
+  outClickHandle = (e) => {
+    if (this.barItemRef.current.contains(e.target)) return
+    this.setState({ dialogVisiable: false })
+    document.removeEventListener('click', this.outClickHandle)
+  }
+  toggle () {
+    if (!this.state.dialogVisiable) {
+      document.addEventListener('click', this.outClickHandle)
+    }
+    this.setState({ dialogVisiable: !this.state.dialogVisiable })
+  }
   emitComand = (val) => {
     this.props.editor.command(this.props.name, val)
   }
 
   clickHandle = () => {
-    if (this.dialogRef.current) {
-      this.dialogRef.current.toggle()
+    if (this.props.showDialog) {
+      this.toggle()
     } else {
       this.emitComand()
     }

diff --git a/packages/editor/toolBar/toolBarOptions.js b/packages/editor/toolBar/toolBarOptions.js
@@ -33,7 +33,7 @@ const toolBarOptions = [
     },
     {
         tooltip: '字体颜色',
-        name: 'fontColor',
+        name: 'color',
         icon: '#icon-color',
         showDialog: true,
         commandHandle: (editor, { R, G, B, A }) => setFormat(editor, path => (path.node.formats.color = `rgba(${R},${G},${B},${A})`)),

diff --git a/src/index.js b/src/index.js
@@ -13,7 +13,7 @@ const toolBar = [
   'redo',
   'header',
   'fontSize',
-  'fontColor',
+  'color',
   'bold',
   'underline',
   'deleteline',