资源面板弹窗交互

packages/demo/src/editor/config/components.js

@@ -8,7 +8,8 @@ import zhEn from '@ali/lowcode-plugin-zh-en';
 import settingsPane from '@ali/lowcode-plugin-settings-pane';
 import designer from '@ali/lowcode-plugin-designer';
 import eventBindDialog from '@ali/lowcode-plugin-event-bind-dialog';
-import sourceEditor from '@ali/lowcode-plugin-source-editor'
+import variableBindDialog from '@ali/lowcode-plugin-variable-bind-dialog';
+import sourceEditor from '@ali/lowcode-plugin-source-editor';
 export default {
   LowcodeSkeleton,
   logo,
@@ -20,5 +21,6 @@ export default {
   settingsPane,
   designer,
   eventBindDialog,
+  variableBindDialog,
   sourceEditor
 };

packages/demo/src/editor/config/skeleton.js

@@ -148,6 +148,13 @@ export default {
         "version": "^0.8.0"
       }
     },
+    {
+      "pluginKey": "variableBindDialog",
+      "config": {
+        "package": "@ali/lowcode-plugin-variable-bind-dialog",
+        "version": "^0.8.0"
+      }
+    }
     ]
   },
   "hooks": [],

packages/plugin-event-bind-dialog/src/index.tsx

@@ -91,6 +91,13 @@ export default class EventBindDialog extends Component<{
   onOk = () => {
     const {editor} = this.props;
     editor.emit('event-setter.bindEvent',this.state.eventName);
+    // 选中的是新建事件
+    if (this.state.selectedEventName == ''){
+      editor.emit('sourceEditor.addFunction',{
+        functionName:this.state.eventName
+      })
+    }
+
     this.closeDialog();
   };
 

packages/plugin-source-editor/src/index.tsx

@@ -37,19 +37,23 @@ const defaultEditorOption = {
       vertical: 'auto',
       horizontal: 'auto',
     },
-  }
+  },
 };
 
+interface FunctionEventParam {
+  functionName: String;
+}
+
 export default class SourceEditor extends Component<{
   editor: Editor;
 }> {
-  private monocoEditer:Object;
-  private editorCmd:Object;
+  private monocoEditer: Object;
+  private editorCmd: Object;
 
   state = {
     isShow: false,
-    tabKey: TAB_KEY.JS_TAB
-  }
+    tabKey: TAB_KEY.JS_TAB,
+  };
 
   componentWillMount() {
     const { editor } = this.props;
@@ -62,10 +66,19 @@ export default class SourceEditor extends Component<{
     });
 
     // 添加函数
-    editor.on('sourceEditor.addFunction',(params:Object)=>{
-      this.callEditorEvent('sourceEditor.addFunction',params);
+    editor.on('sourceEditor.addFunction', (params: FunctionEventParam) => {
+      this.callEditorEvent('sourceEditor.addFunction', params);
+      this.openPluginPannel();
+    });
+
+    // 定位函数
+    editor.on('sourceEditor.focusByFunction',(params:FunctionEventParam)=>{
+      this.callEditorEvent('sourceEditor.focusByFunction', params);
+      this.openPluginPannel();
     })
 
+
+
     editor.once('designer.mount', (designer: Designer) => {
       // let schema = designer.project.getSchema();
       // mock data
@@ -90,7 +103,7 @@ export default class SourceEditor extends Component<{
             },
             methods: {
               //自定义方法对象：     选填 对象类型
-              testFunc: {
+              getData: {
                 //自定义方法：                  选填 函数类型
                 type: 'JSExpression',
                 value: "function() {\n \t\tconsole.log('testFunc');\n \t}",
@@ -102,37 +115,41 @@ export default class SourceEditor extends Component<{
 
       this.initCode(schema);
     });
-
-
-    setTimeout (()=>{
-      editor.emit('sourceEditor.addFunction',{
-        functionName:'testgaga'
-      })
-    },3000)
-
   }
 
-  callEditorEvent = (eventName,params) => {
-    if (!this.monocoEditer){
+  openPluginPannel = () => {
+    const {editor} = this.props;
+    // 判断面板是否处于激活状态
+    if (!editor.leftNav || editor.leftNav != 'sourceEditor') {
+      // 打开面板
+      editor.emit('leftNav.change', 'sourceEditor');
+    }
+  }
+
+  callEditorEvent = (eventName, params) => {
+    if (!this.monocoEditer) {
       this.editorCmd = {
         eventName,
-        params
+        params,
       };
       return;
     }
 
-    if (eventName === 'sourceEditor.addFunction'){
-        this.addFunction(params);
+    if (eventName === 'sourceEditor.addFunction') {
+      this.addFunction(params);
+    }else if (eventName === 'sourceEditor.focusByFunction'){
+      this.focusByFunctionName(params);
     }
 
-  }
+
+  };
 
   initCode = (schema) => {
-    let jsCode = js_beautify(transfrom.schema2Code(schema),{ indent_size: 2, indent_empty_lines: true });
+    let jsCode = js_beautify(transfrom.schema2Code(schema), { indent_size: 2, indent_empty_lines: true });
     let css;
 
     if (schema.componentTree[0].css) {
-      css = css_beautify(schema.componentTree[0].css,{ indent_size: 2 });
+      css = css_beautify(schema.componentTree[0].css, { indent_size: 2 });
     }
 
     this.setState({
@@ -140,24 +157,57 @@ export default class SourceEditor extends Component<{
       css,
       selectTab: TAB_KEY.JS_TAB,
     });
-
   };
 
-  addFunction (params){
+  /**
+   * 在js面板中添加一个新函数
+   * @param params
+   */
+  addFunction(params: FunctionEventParam) {
     const count = this.monocoEditer.getModel().getLineCount() || 0;
     const range = new monaco.Range(count, 1, count, 1);
     const functionCode = transfrom.getNewFunctionCode(params.functionName);
-    this.monocoEditer.executeEdits('log-source', [{ identifier: 'event_id', range:range , text: functionCode, forceMoveMarkers:true }]);
+    this.monocoEditer.executeEdits('log-source', [
+      { identifier: 'event_id', range: range, text: functionCode, forceMoveMarkers: true },
+    ]);
+    setTimeout(() => {
+      let newPosition = new monaco.Position(count + 1, 2);
+      this.monocoEditer.setPosition(newPosition);
+      this.monocoEditer.focus();
+    }, 100);
 
-    this.updateCode(this.monocoEditer.getModel().getValue())
+    this.updateCode(this.monocoEditer.getModel().getValue());
+  }
+
+  /**
+   * 根据函数名进行定位
+   * @param functionName
+   */
+  focusByFunctionName(params: FunctionEventParam) {
+    const functionName = params.functionName;
+    const matchedResult = this.monocoEditer
+      .getModel()
+      .findMatches(`${functionName}\\s*\\([\\s\\S]*\\)[\\s\\S]*\\{`, false, true)[0];
+    if (matchedResult) {
+
+      setTimeout(()=>{
+        this.monocoEditer.revealLineInCenter(matchedResult.range.startLineNumber);
+        this.monocoEditer.setPosition({
+          column: matchedResult.range.endColumn,
+          lineNumber: matchedResult.range.endLineNumber,
+        });
+
+        this.monocoEditer.focus();
+      },100)
+    }
   }
 
   editorDidMount = (editor, monaco) => {
     console.log('editorDidMount', editor);
     this.monocoEditer = editor;
 
-    if (this.editorCmd){
-      this.callEditorEvent(this.editorCmd.eventName,this.editorCmd.params);
+    if (this.editorCmd) {
+      this.callEditorEvent(this.editorCmd.eventName, this.editorCmd.params);
     }
 
     // var commandId = editor.addCommand(
@@ -214,7 +264,7 @@ export default class SourceEditor extends Component<{
     }
 
     transfrom.code2Schema(newCode);
-  }
+  };
 
   render() {
     const { isShow, selectTab, jsCode, css } = this.state;
@@ -226,7 +276,7 @@ export default class SourceEditor extends Component<{
     return (
       <div className="source-editor-container">
         <Tab size="small" shape="wrapped" onChange={this.onTabChange}>
-           {tabs.map((item) => (
+          {tabs.map((item) => (
             <Tab.Item key={item.key} title={item.tab}>
               {isShow && (
                 <MonacoEditor

packages/setters/src/events-setter/index.tsx

@@ -190,7 +190,7 @@ export default class EventsSetter extends Component<{
         </div>
         <div className="event-cell" style={{ marginTop: '8px' }}>
           <Icon type="attachment" size="small" className="related-icon" />
-          <span className="related-event-name">
+          <span className="related-event-name" onClick={()=>this.onRelatedEventNameClick(record.relatedEventName)}>
             {record.relatedEventName || ''}
           </span>
         </div>
@@ -248,6 +248,8 @@ export default class EventsSetter extends Component<{
     });
   };
 
+
+
   onEventMenuClick = (eventName: String) => {
     const { selectType, eventDataList } = this.state;
     eventDataList.push({
@@ -264,6 +266,13 @@ export default class EventsSetter extends Component<{
     this.openDialog(eventName);
   };
 
+  onRelatedEventNameClick = (eventName:String) => {
+    const {editor} =  this.props.field;
+    editor.emit('sourceEditor.focusByFunction',{
+      functionName:eventName
+    })
+  }
+
   closeEventMenu = () => {
     if (this.state.selectType !== null) {
       this.setState({