feat:物料面板添加

packages/editor/package.json

@@ -4,6 +4,7 @@
   "description": "低代码编辑器",
   "dependencies": {
     "@ali/iceluna-addon-2": "^1.0.3",
+    "@ali/iceluna-addon-component-list": "^1.0.10",
     "@ali/iceluna-sdk": "^1.0.5-beta.26",
     "@alifd/next": "^1.x",
     "@alife/dpl-iceluna": "^2.3.2",

packages/editor/src/config/assets.js

@@ -0,0 +1,126 @@
+export default {
+  version: '1.0.0',
+  packages: {
+    '@alifd/next': {
+      title: 'fusion组件库',
+      package: '@alifd/next',
+      version: '1.19.18',
+      urls: ['https://unpkg.antfin-inc.com/@alife/next@1.19.18/dist/next.js', 'https://unpkg.antfin-inc.com/@alife/next@1.19.18/dist/next.css'],
+      library: 'Next'
+    }
+  },
+  components: {
+    Button: {
+      componentName: 'Button',
+      title: '按钮',
+      devMode:'proCode',
+      npm: {
+        package: '@alifd/next',
+        version: '1.19.18',
+        destructuring: true,
+        exportName: 'Button'
+      },
+      props: [{
+        name: 'type',
+        propType: 'string'
+      }, {
+        name: 'children',
+        propType: 'string'
+      }],
+      configure: {
+        props: [{
+          name: 'type',
+          setter: {
+            componentName: 'Input'
+          }
+        }, {
+          name: 'children',
+          setter: {
+            componentName: 'Input'
+          }
+        }]
+      }
+    },
+    Input: {
+      componentName: 'Input',
+      title: '输入框',
+      devMode:'proCode',
+      npm: {
+        package: '@alifd/next',
+        version: '1.19.18',
+        destructuring: true,
+        exportName: 'Input'
+      },
+      props: [{
+        name: 'placeholder',
+        propType: 'string'
+      }],
+      configure: {
+        props: [{
+          name: 'placeholder',
+          setter: {
+            componentName: 'Input'
+          }
+        }]
+      }
+    }
+  },
+  componentList: [{
+    title: '基础',
+    icon: '',
+    children: [{
+      componentName: 'Button',
+      title: '按钮',
+      icon: '',
+      package: '@alife/next',
+      snippets: [{
+        title: 'private',
+        screenshort: '',
+        schema: {
+          componentName: 'Button',
+          props: {
+            type: 'primary'
+          },
+          children: 'Primary'
+        }
+      }, {
+        title: 'secondary',
+        screenshort: '',
+        schema: {
+          componentName: 'Button',
+          props: {
+            type: 'secondary'
+          },
+          children: 'secondary'
+        }
+      }, {
+        title: 'normal',
+        screenshort: '',
+        schema: {
+          componentName: 'Button',
+          props: {
+            type: 'normal'
+          },
+          children: 'normal'
+        }
+      }]
+    }]
+  }, {
+    title: '表单',
+    icon: '',
+    children: [{
+      componentName: 'Input',
+      title: '输入框',
+      icon: '',
+      package: '@alife/next',
+      snippets: [{
+        title: '普通',
+        screenshort: '',
+        schema: {
+          componentName: 'Input',
+          props: {}
+        }
+      }]
+    }]
+  }]
+};

packages/editor/src/config/components.js

@@ -1,7 +1,3 @@
-import logo from '../plugins/logo';
-import Designer from '../plugins/designer';
-import undoRedo from '../plugins/undoRedo';
-import Settings from '../../../plugin-settings';
 import topBalloonIcon from '@ali/iceluna-addon-2';
 import topDialogIcon from '@ali/iceluna-addon-2';
 import leftPanelIcon from '@ali/iceluna-addon-2';
@@ -12,6 +8,11 @@ import rightPanel1 from '@ali/iceluna-addon-2';
 import rightPanel2 from '@ali/iceluna-addon-2';
 import rightPanel3 from '@ali/iceluna-addon-2';
 import rightPanel4 from '@ali/iceluna-addon-2';
+import componentList from '@ali/iceluna-addon-component-list';
+import Settings from '../../../plugin-settings';
+import undoRedo from '../plugins/undoRedo';
+import Designer from '../plugins/designer';
+import logo from '../plugins/logo';
 
 import PluginFactory from '../framework/pluginFactory';
 
@@ -29,5 +30,6 @@ export default {
   rightPanel1: PluginFactory(rightPanel1),
   rightPanel2: PluginFactory(rightPanel2),
   rightPanel3: PluginFactory(rightPanel3),
-  rightPanel4: PluginFactory(rightPanel4)
+  rightPanel4: PluginFactory(rightPanel4),
+  componentList: PluginFactory(componentList)
 };

packages/editor/src/config/skeleton.js

@@ -1,3 +1,5 @@
+import assets from './assets';
+
 export default {
   version: '^1.0.2',
   theme: {
@@ -117,6 +119,22 @@ export default {
       }
     ],
     leftArea: [
+      {
+        pluginKey: 'componentList',
+        type: 'PanelIcon',
+        props: {
+          align: 'top',
+          icon: 'zujianku',
+          title: '组件库'
+        },
+        config: {
+          package: "@ali/iceluna-addon-component-list",
+          version: "^1.0.4"
+        },
+        pluginProps: {
+          disableAppComponent: true
+        }
+      },
       {
         pluginKey: 'leftPanelIcon',
         type: 'PanelIcon',
@@ -274,5 +292,43 @@ export default {
     ]
   },
   hooks: [],
-  shortCuts: []
+  shortCuts: [],
+  lifeCycles: {
+    init: function init(editor) {
+      const transformMaterial = (componentList) => {
+        return componentList.map(category => {
+          return {
+            name: category.title,
+            items: category.children.map(comp => {
+              return {
+                ...comp,
+                name: comp.componentName,
+                libraryId: 1,
+                snippets: comp.snippets.map(snippet => {
+                  return {
+                    name: snippet.title,
+                    screenshort: snippet.screenshort,
+                    code: JSON.stringify(snippet.schema)
+                  };
+                })
+              };
+            })
+          };
+        });
+      };
+
+      const list = transformMaterial(assets.componentList);
+      console.log('+++++', list);
+      editor.set({
+        componentsMap: assets.components,
+        componentMaterial: {
+          library: [{
+            name: 'Fusion组件库',
+            id: 1
+          }],
+          list
+        }
+      });
+    }
+  }
 };

packages/editor/src/framework/editor.ts

@@ -3,7 +3,11 @@ import EventEmitter from 'events';
 import store from 'store';
 import { EditorConfig, HooksConfig, LocaleType, PluginStatusSet, Utils, PluginClassSet, PluginSet } from './definitions';
 
-import { registShortCuts, transformToPromise, unRegistShortCuts } from './utils';
+import * as editorUtils from './utils';
+
+const {
+  registShortCuts, transformToPromise, unRegistShortCuts
+} = editorUtils;
 
 // 根据url参数设置debug选项
 const debugRegRes = /_?debug=(.*?)(&|$)/.exec(location.search);
@@ -85,7 +89,7 @@ export default class Editor extends EventEmitter {
     super();
     this.config = config;
     this.components = components;
-    this.utils = utils || {};
+    this.utils = {...editorUtils, ...utils};
     instance = this;
     this.init();
   }

packages/editor/src/plugins/designer/index.tsx

@@ -169,10 +169,17 @@ export default class DesignerPlugin extends PureComponent<PluginProps> {
     super(props);
   }
 
+  handleDesignerMount = (designer): void => {
+    const {editor} = this.props;
+    editor.set('designer', designer);
+    editor.emit('designer.ready', designer);
+  }
+
   render() {
     const { editor } = this.props;
     return (
       <Designer
+        onMount={this.handleDesignerMount}
         className="lowcode-plugin-designer"
         defaultSchema={SCHEMA as any}
         eventPipe={editor as any}

packages/editor/src/plugins/undoRedo/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { PureComponent } from 'react';
 import './index.scss';
 import Editor from '../../framework/index';
 import { PluginConfig } from '../../framework/definitions';
@@ -10,13 +10,62 @@ export interface PluginProps {
   logo?: string;
 }
 
-export default function(props: PluginProps) {
+export interface PluginState{
-  const [backEnable, setBackEnable] = useState(true);
+  backEnable: boolean;
-  const [forwardEnable, setForwardEnable] = useState(true);
+  forwardEnable: boolean;
-  return (
+};
-    <div className="lowcode-plugin-undo-redo">
+
-      <TopIcon icon="houtui" title="后退" disabled={!backEnable} />
+
-      <TopIcon icon="qianjin" title="前进" disabled={!forwardEnable} />
+export default class UndoRedo extends PureComponent<PluginProps, PluginState> {
-    </div>
+  static display = 'LowcodeUndoRedo';
-  );
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      backEnable: false,
+      forwardEnable: false
+    };
+    if (props.editor.designer) {
+      this.init();
+    } else {
+      props.editor.on('designer.ready', () => {
+        this.init();
+      });
+    }
+
+  }
+
+  init = (): void => {
+    const {editor} = this.props;
+    this.designer = editor.designer;
+    this.history = this.designer.currentHistory;
+    editor.on('designer.history-change', (history) => {
+      this.history = history;
+    });
+  };
+
+  handleBackClick = (): void => {
+    if (this.history) {
+      this.history.back();
+    }
+  };
+
+  handleForwardClick = (): void => {
+    if (this.history) {
+      this.history.forward();
+    }
+  };
+
+  render() {
+    const {
+      backEnable,
+      forwardEnable
+    } = this.state;
+    return (
+      <div className="lowcode-plugin-undo-redo">
+        <TopIcon icon="houtui" title="后退"  onClick={this.handleBackClick}/>
+        <TopIcon icon="qianjin" title="前进" onClick={this.handleForwardClick}/>
+      </div>
+    );
+  }
 }

packages/editor/src/skeleton/index.tsx

@@ -89,11 +89,12 @@ export default class Skeleton extends PureComponent<SkeletonProps, SkeletonState
       this.setState(
         {
           initReady: true,
-          //刷新IDE时生成新的skeletonKey保证插件生命周期重新执行
+          // 刷新IDE时生成新的skeletonKey保证插件生命周期重新执行
           skeletonKey: isReset ? `skeleton${++renderIdx}` : this.state.skeletonKey
         },
         () => {
           editor.emit('editor.ready');
+          editor.emit('ide.ready');
           isReset && editor.emit('ide.afterReset');
         }
       );