From 38ca41a2523340064990d4577a843bb5616715eb Mon Sep 17 00:00:00 2001 From: "zude.hzd" Date: Wed, 22 Apr 2020 15:26:02 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B5=84=E6=BA=90=E9=9D=A2=E6=9D=BF=E5=BC=B9?= =?UTF-8?q?=E7=AA=97=E4=BA=A4=E4=BA=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/demo/src/editor/config/components.js | 4 +- packages/demo/src/editor/config/skeleton.js | 7 ++ .../plugin-event-bind-dialog/src/index.tsx | 7 ++ packages/plugin-source-editor/src/index.tsx | 114 +++++++++++++----- packages/setters/src/events-setter/index.tsx | 11 +- 5 files changed, 109 insertions(+), 34 deletions(-) diff --git a/packages/demo/src/editor/config/components.js b/packages/demo/src/editor/config/components.js index 348e048b7..e844c44ed 100644 --- a/packages/demo/src/editor/config/components.js +++ b/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 }; diff --git a/packages/demo/src/editor/config/skeleton.js b/packages/demo/src/editor/config/skeleton.js index 65d182436..c9565d572 100644 --- a/packages/demo/src/editor/config/skeleton.js +++ b/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": [], diff --git a/packages/plugin-event-bind-dialog/src/index.tsx b/packages/plugin-event-bind-dialog/src/index.tsx index 28ffea012..32cf6e474 100644 --- a/packages/plugin-event-bind-dialog/src/index.tsx +++ b/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(); }; diff --git a/packages/plugin-source-editor/src/index.tsx b/packages/plugin-source-editor/src/index.tsx index f1dba0d4e..0a2deb5f6 100644 --- a/packages/plugin-source-editor/src/index.tsx +++ b/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 (
- {tabs.map((item) => ( + {tabs.map((item) => ( {isShow && (
- + this.onRelatedEventNameClick(record.relatedEventName)}> {record.relatedEventName || ''}
@@ -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({