From 6fb4059d1e28324a58adf090b78a811c418471ba Mon Sep 17 00:00:00 2001 From: "zude.hzd" Date: Thu, 16 Jul 2020 11:40:54 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B5=84=E6=BA=90=E9=9D=A2=E6=9D=BFbug?= =?UTF-8?q?=E4=BF=AE=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/demo/public/schema.json | 18 +++++ .../plugin-event-bind-dialog/src/index.tsx | 13 +++- packages/plugin-source-editor/src/index.tsx | 66 +++++++------------ .../plugin-source-editor/src/transform.ts | 22 ++++++- 4 files changed, 72 insertions(+), 47 deletions(-) diff --git a/packages/demo/public/schema.json b/packages/demo/public/schema.json index d38814ece..8e4dfdbe6 100644 --- a/packages/demo/public/schema.json +++ b/packages/demo/public/schema.json @@ -7,6 +7,24 @@ "state": { "text": "outter" }, + + "css": "body {font-size: 12px;} .botton{width:100px;color:#ff00ff}", + "lifeCycles": { + "componentDidMount": { + "type": "JSExpression", + "value": "function() {\n \t\tconsole.log('did mount');\n\t}" + }, + "componentWillUnmount": { + "type": "JSExpression", + "value": "function() {\n \t\tconsole.log('will umount');\n\t}" + } + }, + "methods": { + "testFunc": { + "type": "JSFunction", + "value": "function() { console.log('test func');}" + } + }, "props": { "ref": "outterView", "autoLoading": true, diff --git a/packages/plugin-event-bind-dialog/src/index.tsx b/packages/plugin-event-bind-dialog/src/index.tsx index 819f2dd4b..c90d16bb3 100644 --- a/packages/plugin-event-bind-dialog/src/index.tsx +++ b/packages/plugin-event-bind-dialog/src/index.tsx @@ -91,9 +91,16 @@ export default class EventBindDialog extends Component { editor.emit('event-setter.bindEvent', this.state.eventName); // 选中的是新建事件 if (this.state.selectedEventName == '') { - editor.emit('sourceEditor.addFunction', { - functionName: this.state.eventName, - }); + // 判断面板是否处于激活状态 + // debugger; + editor.get('skeleton').getPanel('sourceEditor').show(); + + setTimeout(()=>{ + editor.emit('sourceEditor.addFunction', { + functionName: this.state.eventName, + }); + },300) + } this.closeDialog(); diff --git a/packages/plugin-source-editor/src/index.tsx b/packages/plugin-source-editor/src/index.tsx index 6a09e1138..bf80b6081 100644 --- a/packages/plugin-source-editor/src/index.tsx +++ b/packages/plugin-source-editor/src/index.tsx @@ -60,6 +60,7 @@ export default class SourceEditor extends Component<{ componentWillMount() { const { editor } = this.props; + editor.on('leftPanel.show', (key: String) => { // debugger; if (key === 'sourceEditor' && !this.monocoEditor) { @@ -75,53 +76,25 @@ export default class SourceEditor extends Component<{ // }, 0); } }); - // 添加函数 editor.on('sourceEditor.addFunction', (params: FunctionEventParam) => { this.callEditorEvent('sourceEditor.addFunction', params); - this.openPluginPannel(); + // this.openPluginPannel(); }); // 定位函数 editor.on('sourceEditor.focusByFunction', (params: FunctionEventParam) => { this.callEditorEvent('sourceEditor.focusByFunction', params); - this.openPluginPannel(); + // this.openPluginPannel(); }); //editor.once('designer.mount', (designer: Designer) => { // let schema = designer.project.getSchema(); // mock data - let schema = { - componentTree: [ - { - state: { - // 初始state： 选填 对象类型/变量表达式 - btnText: 'submit', // 默认数据值： 选填 变量表达式 - }, - css: 'body {font-size: 12px;} .botton{widht:100px;color:#ff00ff}', //css样式描述： 选填 - lifeCycles: { - //生命周期: 选填 对象类型 - didMount: { - type: 'JSExpression', - value: "function() {\n \t\tconsole.log('did mount');\n\t}", - }, - willUnmount: { - type: 'JSExpression', - value: "function() {\n \t\tconsole.log('will umount');\n\t}", - }, - }, - methods: { - //自定义方法对象： 选填 对象类型 - getData: { - //自定义方法： 选填 函数类型 - type: 'JSExpression', - value: "function() {\n \t\tconsole.log('testFunc');\n \t}", - }, - }, - }, - ], - }; + //debugger; + + let schema = editor.get('designer').project.getSchema(); this.initCode(schema); //}); } @@ -149,6 +122,7 @@ export default class SourceEditor extends Component<{ return; } + debugger; if (this.state.selectTab == TAB_KEY.CSS_TAB) { this.setState({ selectTab: TAB_KEY.JS_TAB, @@ -170,8 +144,8 @@ export default class SourceEditor extends Component<{ 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 }); + if (schema.componentsTree[0].css) { + css = css_beautify(schema.componentsTree[0].css, { indent_size: 2 }); } this.setState({ @@ -192,12 +166,15 @@ export default class SourceEditor extends Component<{ this.monocoEditor.executeEdits('log-source', [ { identifier: 'event_id', range: range, text: functionCode, forceMoveMarkers: true }, ]); + setTimeout(() => { let newPosition = new monaco.Position(count + 1, 2); this.monocoEditor.setPosition(newPosition); this.monocoEditor.focus(); }, 100); + debugger; + this.updateCode(this.monocoEditor.getModel().getValue()); } @@ -223,16 +200,18 @@ export default class SourceEditor extends Component<{ } } - editorDidMount = (editor, monaco) => { - if (this.state.selectTab == TAB_KEY.JS_TAB) { - this.monocoEditor = editor; - } + editorDidMount = (editor, monaco,tab) => { + this.monocoEditor = editor; if (this.editorCmd) { this.callEditorEvent(this.editorCmd.eventName, this.editorCmd.params); } }; + fullScreen = () => { + + } + onTabChange = (key) => { this.setState({ selectTab: key, @@ -249,6 +228,7 @@ export default class SourceEditor extends Component<{ updateCode = (newCode) => { const { selectTab } = this.state; + const {editor} = this.props; if (selectTab === TAB_KEY.JS_TAB) { this.setState({ jsCode: newCode, @@ -259,7 +239,9 @@ export default class SourceEditor extends Component<{ }); } - transfrom.code2Schema(newCode); + let functionMap = transfrom.code2Schema(newCode); + let schema = editor.get('designer').project.getSchema(); + let newSchema = transfrom.setFunction2Schema(functionMap,schema); }; render() { @@ -285,7 +267,7 @@ export default class SourceEditor extends Component<{ {...defaultEditorOption} {...{ language: 'typescript' }} onChange={(newCode) => this.updateCode(newCode)} - editorDidMount={(editor, monaco) => this.editorDidMount.call(this, editor, monaco)} + editorDidMount={(editor, monaco) => this.editorDidMount.call(this, editor, monaco,TAB_KEY.JS_TAB)} />
@@ -294,7 +276,7 @@ export default class SourceEditor extends Component<{ {...defaultEditorOption} {...{ language: 'css' }} onChange={(newCode) => this.updateCode(newCode)} - editorDidMount={(editor, monaco) => this.editorDidMount.call(this, editor, monaco)} + //editorDidMount={(editor, monaco) => this.editorDidMount.call(this, editor, monaco,TAB_KEY.CSS_TAB)} />
diff --git a/packages/plugin-source-editor/src/transform.ts b/packages/plugin-source-editor/src/transform.ts index 35a87934a..24a71ed0c 100644 --- a/packages/plugin-source-editor/src/transform.ts +++ b/packages/plugin-source-editor/src/transform.ts @@ -1,8 +1,11 @@ -import walkSourcePlugin from './sorceEditorPlugin'; +const LIFECYCLES_FUNCTION_MAP = { + react:['constructor','render','componentDidMount','componentDidUpdate','componentWillUnmount','componentDidCatch'] +} + const transfrom = { schema2Code(schema: Object) { - let componentSchema = schema.componentTree[0]; + let componentSchema = schema.componentsTree[0]; let code = `export default class { ${initStateCode(componentSchema)} @@ -41,10 +44,23 @@ const transfrom = { console.log(functionMap); + if (a.state){ + functionMap.state = a.state + } + + + return functionMap; + }, getNewFunctionCode(functionName:String){ return `\n\t${functionName}(){\n\t}\n` + }, + + setFunction2Schema(functionMap,schema){ + let pageNode = schema.componentsTree[0]; + pageNode.state = functionMap.state; + } }; @@ -95,4 +111,6 @@ function createFunctionCode(functionName: String, functionNode: Object) { } } + + export default transfrom;