1

packages/editor/index.js

@@ -6,42 +6,47 @@
  * @LastEditTime: 2022-08-31 17:12:53
  */
 import mount from './mount'
-import { createPath, Typex,utils } from '@typex/core'
+import { createPath, Typex, utils } from '@typex/core'
 import platform from '@typex/platform'
 import formats from './formats'
 import { mockData } from './data'
+import toolBarOptions from './toolBar/toolBarOptions'
 
 class Editor extends Typex {
   conamndHandles = {}
-  toolBarOption = []
+  toolBarOptions = toolBarOptions
   constructor(options) {
     super({
       formats,
       plugins: [platform],
       ...options,
     })
     this.on('command', this.command)
+    this.setToolBar(toolBarOptions)
   }
-  mount(id) {
+  mount (id) {
     mount.call(this, id)
     return this
   }
-  setToolBar(toolBarOption) {
-    this.toolBarOption = toolBarOption
-    toolBarOption.forEach((toolItem) => {
+  setToolBar (options) {
+    if (!toolBarOptions || utils.toRawType(toolBarOptions) !== "array") {
+      throw new Error('setToolBar 必须提供一个数组类型的参数')
+    }
+    this.conamndHandles = {}
+    this.toolBarOptions = toolBarOptions.filter(e => options.includes(e.name))
+    this.toolBarOptions.forEach((toolItem) => {
       toolItem.editor = this
-      this.conamndHandles[toolItem.commandName] = toolItem.commandHandle
+      this.conamndHandles[toolItem.name] = toolItem.commandHandle
     })
     return this
   }
-  command(name,val) {
+  command (name, val) {
     const commandHandle = this.conamndHandles[name]
-    console.log(commandHandle);
     if (typeof commandHandle !== 'function') return
-    commandHandle(this,val)
+    commandHandle(this, val)
   }
 }
-export default function createEditor(options = {}) {
+export default function createEditor (options = {}) {
   const marks = mockData
   const path = createPath(marks)
   return new Editor({ path })

packages/editor/mount.js

@@ -15,7 +15,7 @@ import ToolBar from './toolBar'
 function renderRoot (editor) {
   return (
     <div class='editor-wrappe'>
-      <ToolBar tools={[...editor.toolBarOption]} editor={editor}></ToolBar>
+      <ToolBar tools={[...editor.toolBarOptions]} editor={editor}></ToolBar>
       {editor.renderContent(h)}
     </div>
   )

packages/editor/toolBar/compinents/Dialog.js

@@ -1,32 +1,32 @@
 import { Component, createRef } from '@typex/core'
 export class Dialog extends Component {
-    constructor(props) {
-      super(props)
-      this.state = { visiable: false }
-      this.dialogRef = createRef()
+  constructor(props) {
+    super(props)
+    this.state = { visiable: false }
+    this.dialogRef = createRef()
+  }
+  render () {
+    return (
+      <div ref={this.dialogRef}>
+        {this.state.visiable ? (
+          <div style='background:#ddd;position:absolute;top:35px;z-index:1'>
+            {this.props.children.length ? this.props.children : 'dialog'}
+          </div>
+        ) : (
+          ''
+        )}
+      </div>
+    )
+  }
+  outClickHandle = (e) => {
+    if (this.props.barItemRef.current.contains(e.target)) return
+    this.setState({ visiable: false })
+    document.removeEventListener('click', this.outClickHandle)
+  }
+  toggle () {
+    if (!this.state.visiable) {
+      document.addEventListener('click', this.outClickHandle)
     }
-    render() {
-      return (
-        <div ref={this.dialogRef}>
-          {this.state.visiable ? (
-            <div style='background:#ddd;position:absolute;top:35px;z-index:1'>
-              {this.props.children.length ? this.props.children : 'dialog'}
-            </div>
-          ) : (
-            ''
-          )}
-        </div>
-      )
-    }
-    outClickHandle = (e) => {
-      if(this.props.barItemRef.current.contains(e.target)) return
-      this.setState({ visiable: false })
-      document.removeEventListener('click', this.outClickHandle)
-    }
-    toggle(e) {
-      if (!this.state.visiable) {
-        document.addEventListener('click', this.outClickHandle)
-      }
-      this.setState({ visiable: !this.state.visiable })
-    }
-  }
+    this.setState({ visiable: !this.state.visiable })
+  }
+}

packages/editor/toolBar/compinents/DialogContent.js

@@ -1,10 +1,10 @@
-import { Component, createRef } from '@typex/core'
+import { Component } from '@typex/core'
 import ColorPicker from './colorPicker'
 
 const comMap = {
   fontColor: (h, self) => (
     <div id="colorPicker">
-      <ColorPicker color='#666666'></ColorPicker>
+      <ColorPicker onOk={self.props.onOk} color='#666666'></ColorPicker>
     </div>
   )
 }
@@ -13,7 +13,7 @@ export class DialogContent extends Component {
     super(props)
   }
   render (h) {
-    return comMap[this.props.options.componentName]?.(h, this) || <span>404</span>
+    return comMap[this.props.name]?.(h, this) || <span>404</span>
   }
 }
 

packages/editor/toolBar/compinents/colorPicker/controlPanel.js

@@ -94,6 +94,7 @@ export default class ControlPanel extends Component {
    */
   updateColorBlockStyle = (R, G, B, A) => {
     this.colorBlockStyle = `background:rgba(${R},${G},${B},${A});`
+    this.props.onChange(R, G, B, A)
   }
   /**
   * @description 色相滑块块滑动事件

packages/editor/toolBar/compinents/colorPicker/index.js

@@ -31,7 +31,11 @@ const colors = [
 ];
 export default class ColorPicker extends Component {
   state = {
-    hexColor: ''
+    hexColor: '',
+    R: 0,
+    G: 0,
+    B: 0,
+    A: 0
   }
   constructor(props) {
     super(props)
@@ -59,6 +63,7 @@ export default class ColorPicker extends Component {
           <Palette ref={this.paletteRef} controlPanel={this.controlPanelRef} ></Palette>
           <ControlPanel onChange={this.onChange} ref={this.controlPanelRef} color={this.props.color} paletteRef={this.paletteRef}></ControlPanel>
         </div>
+        <div onClick={this.submit} class="btn submit">确定</div>
       </div>
     )
   }
@@ -79,13 +84,16 @@ export default class ColorPicker extends Component {
     return this.state.hexColor === hc
   }
 
-  onChange = ({ R, G, B, A }) => {
+  onChange = (R, G, B, A) => {
     this.setState({
-      hexColor: rgbaToHex([R, G, B])
+      hexColor: rgbaToHex([R, G, B]),
+      R, G, B, A
     })
-    console.log(rgbaToHex([R, G, B]));
   }
-
+  submit = () => {
+    const { R, G, B, A } = this.state
+    this.props.onOk({ R, G, B, A })
+  }
   onMounted () {
     console.log('ColorPicker')
   }

packages/editor/toolBar/compinents/toolBar.styl

@@ -63,6 +63,15 @@
 .color-picker-container
     background:#eee
     padding:10px
+    .btn.submit
+        height: 24px
+        text-align: center
+        color: #fff
+        background: #325cff
+        margin-top: 10px;
+        border-radius: 2px
+        font-size: 14px;
+        line-height: 24px;
     .control-panel
         display flex
         justify-content space-between

packages/editor/toolBar/index.js

@@ -1,9 +1,11 @@
 import { Component, createRef } from '@typex/core'
 import './iconfont'
 import { Dialog, Tooltip, DialogContent } from './compinents'
+
 // 工具栏
 export default class ToolBar extends Component {
-  toolBarItems = []
+  toolBarItemInses = []
+
   constructor(props) {
     super(props)
     this.props.editor.on('selectionchange', (ops) => {
@@ -19,43 +21,48 @@ export default class ToolBar extends Component {
       this.notice(commonKeyValue)
     })
   }
+
   notice (commonKeyValue) {
-    this.toolBarItems.forEach((item) => item.onNotice(commonKeyValue))
+    this.toolBarItemInses.forEach((item) => item.onNotice(commonKeyValue))
   }
+
   render () {
     const { tools } = this.props
     return (
       <div class='editor-tool-bar'>
         {tools.map((ele) => (
           <Tooltip width='64' content={ele.tooltip}>
             <ToolBarItem
-              {...{ ...ele, onCommand: this.onCommand, toolBarItems: this.toolBarItems }}
+              {...{ ...ele, onCommand: this.onCommand, toolBarItemInses: this.toolBarItemInses }}
             ></ToolBarItem>
           </Tooltip>
         ))}
       </div>
     )
   }
-  onCommand = (commandName, ...args) => {
-    this.props.onCommand(commandName, ...args)
+
+  onCommand = (name, ...args) => {
+    this.props.onCommand(name, ...args)
   }
 }
 // // 工具栏-元素
 class ToolBarItem extends Component {
   constructor(props) {
     super(props)
     this.state = { active: false }
-    this.props.toolBarItems.push(this)
+    this.props.toolBarItemInses.push(this)
     this.dialogRef = createRef()
     this.barItemRef = createRef()
   }
+
   onNotice (commonKeyValue) {
-    if (commonKeyValue[this.props.commandName] !== this.state.active) {
+    if (commonKeyValue[this.props.name] !== this.state.active) {
       this.setState({
-        active: commonKeyValue[this.props.commandName],
+        active: commonKeyValue[this.props.name],
       })
     }
   }
+
   render () {
     return (
       <span
@@ -67,22 +74,29 @@ class ToolBarItem extends Component {
           <use xlink:href={this.props.icon}></use>
         </svg>
         {
-          this.props.options
+          this.props.showDialog
             ?
             <Dialog ref={this.dialogRef} barItemRef={this.barItemRef}>
-              <DialogContent name={this.props.commandName} options={this.props.options}></DialogContent>
+              <DialogContent onOk={this.onOk} name={this.props.name}></DialogContent>
             </Dialog>
             : ''
         }
       </span>
     )
   }
-  emitComand = () => {
-    this.props.editor.command(this.props.commandName)
+
+  onOk = (val) => {
+    this.dialogRef.current.toggle()
+    this.emitComand(val)
   }
-  clickHandle = (e) => {
+
+  emitComand = (val) => {
+    this.props.editor.command(this.props.name, val)
+  }
+
+  clickHandle = () => {
     if (this.dialogRef.current) {
-      this.dialogRef.current.toggle(e)
+      this.dialogRef.current.toggle()
     } else {
       this.emitComand()
     }