From 8b02b10e4e8a5e240da7c6c20b53d6c1cc4e64be Mon Sep 17 00:00:00 2001 From: kangwei Date: Wed, 22 Apr 2020 17:45:55 +0800 Subject: [PATCH] joint source editor --- packages/plugin-source-editor/src/index.tsx | 67 ++++++++++----------- packages/vision-polyfill/src/demo/index.ts | 15 ----- packages/vision-polyfill/src/editor.ts | 16 +++++ 3 files changed, 48 insertions(+), 50 deletions(-) diff --git a/packages/plugin-source-editor/src/index.tsx b/packages/plugin-source-editor/src/index.tsx index 645b61ae7..e90f30e51 100644 --- a/packages/plugin-source-editor/src/index.tsx +++ b/packages/plugin-source-editor/src/index.tsx @@ -57,7 +57,7 @@ export default class SourceEditor extends Component<{ tabKey: TAB_KEY.JS_TAB, }; - componentWillMount() { + async componentWillMount() { const { editor } = this.props; editor.on('leftPanel.show', (key: String) => { if (key === 'sourceEditor' && !this.monocoEditer) { @@ -79,44 +79,41 @@ export default class SourceEditor extends Component<{ this.openPluginPannel(); }) - - - editor.once('designer.mount', (designer: Designer) => { - // let schema = designer.project.getSchema(); - // mock data - let schema = { - componentTree: [ - { - state: { - // 初始state: 选填 对象类型/变量表达式 - btnText: 'submit', // 默认数据值: 选填 变量表达式 + const designer = await editor.onceGot(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}", }, - 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}", - }, + 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}", + }, + }, + }, + ], + }; - this.initCode(schema); - }); + this.initCode(schema); } openPluginPannel = () => { diff --git a/packages/vision-polyfill/src/demo/index.ts b/packages/vision-polyfill/src/demo/index.ts index 5546fa8c4..65b2b018f 100644 --- a/packages/vision-polyfill/src/demo/index.ts +++ b/packages/vision-polyfill/src/demo/index.ts @@ -3,7 +3,6 @@ import { createElement } from 'react'; import { Button } from '@alifd/next'; import Engine, { Panes } from '@ali/visualengine'; import getTrunkPane from '@ali/ve-trunk-pane'; -import SourceEditor from '@ali/lowcode-plugin-source-editor'; import EventBindDialog from '@ali/lowcode-plugin-event-bind-dialog'; import loadUrls from './loader'; import { upgradeAssetsBundle } from './upgrade-assets'; @@ -16,20 +15,6 @@ skeleton.add({ type: 'Widget', content: EventBindDialog, }); -skeleton.add({ - name: 'sourceEditor', - type: 'PanelDock', - props: { - align: 'top', - icon: 'code', - description: '组件库', - }, - panelProps: { - width: 500 - // area: 'leftFixedArea' - }, - content: SourceEditor, -}); skeleton.add({ area: 'leftArea', name: 'icon1', diff --git a/packages/vision-polyfill/src/editor.ts b/packages/vision-polyfill/src/editor.ts index d2d922804..2295d4e11 100644 --- a/packages/vision-polyfill/src/editor.ts +++ b/packages/vision-polyfill/src/editor.ts @@ -9,6 +9,7 @@ import { Skeleton } from './skeleton/skeleton'; import Preview from '@ali/lowcode-plugin-sample-preview'; +import SourceEditor from '@ali/lowcode-plugin-source-editor'; registerSetters(); @@ -53,3 +54,18 @@ skeleton.add({ }, content: Preview, }); + +skeleton.add({ + name: 'sourceEditor', + type: 'PanelDock', + props: { + align: 'top', + icon: 'code', + description: '组件库', + }, + panelProps: { + width: 500 + // area: 'leftFixedArea' + }, + content: SourceEditor, +});