优化工程结构

babel.config.json

@@ -10,7 +10,7 @@
       ]
     ],
     "plugins": [
-        "./babel-plugin-transform-typex-jsx.js"
+        "babel-plugin-transform-typex-jsx"
     ],
     "ignore": ["node_modules"],
     "exclude": ["/node_modules/"]

package.json

@@ -27,6 +27,7 @@
   },
   "private": true,
   "devDependencies": {
+    "babel-plugin-transform-typex-jsx": "workspace:^",
     "@babel/preset-env": "^7.16.11",
     "editor": "workspace:^",
     "babel-loader": "^8.2.3",

packages/@typex-platform/web/dom.js

@@ -19,7 +19,6 @@ export function appendChild(parentNode, newNode) {
   return parentNode.appendChild(newNode)
 }
 export function removeChild(parentNode, referenceNode) {
-  console.log(referenceNode)
   return parentNode.removeChild(referenceNode)
 }
 

packages/editor/toolBar/compinents/Dialog.js

@@ -7,7 +7,7 @@ export class Dialog extends Component {
     }
     render() {
       return (
-        <div ref={this.dialogRef} onClick={(e) => e.stopPropagation()}>
+        <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'}
@@ -19,12 +19,12 @@ export class Dialog extends Component {
       )
     }
     outClickHandle = (e) => {
+      if(this.props.barItemRef.current.contains(e.target)) return
       this.setState({ visiable: false })
       document.removeEventListener('click', this.outClickHandle)
     }
-    toggle() {
+    toggle(e) {
       if (!this.state.visiable) {
-        console.log('==toggle===')
         document.addEventListener('click', this.outClickHandle)
       }
       this.setState({ visiable: !this.state.visiable })

packages/editor/toolBar/index.js

@@ -48,6 +48,7 @@ class ToolBarItem extends Component {
     this.state = { active: false }
     this.props.toolBarItems.push(this)
     this.dialogRef = createRef()
+    this.barItemRef = createRef()
   }
   onNotice(commonKeyValue) {
     if (commonKeyValue[this.props.commandName] !== this.state.active) {
@@ -59,17 +60,17 @@ class ToolBarItem extends Component {
   render() {
     return (
       <span
-        onClick={this.clickHandle}
         class='editor-tool-bar-item'
+        ref = {this.barItemRef}
         style={`color: ${!this.state.active ? 'rgb(227 227 227);' : 'rgb(42 201 249)'};`}
       >
-        <svg class='icon' aria-hidden ns='http://www.w3.org/2000/svg'>
+        <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}>
+            <Dialog ref={this.dialogRef} barItemRef = {this.barItemRef}>
               <DialogContent name={this.props.commandName} options={this.props.options}></DialogContent>
             </Dialog>
           :''
@@ -81,12 +82,8 @@ class ToolBarItem extends Component {
     this.props.editor.command(this.props.commandName)
   }
   clickHandle = (e) => {
-    e.stopPropagation()
-    this.setState({
-      active: !this.state.active,
-    })
     if(this.dialogRef.current){
-      this.dialogRef.current.toggle()
+      this.dialogRef.current.toggle(e)
     }else{
       this.emitComand()
     }