feat(PropsAPI): Add PropsAPI class for exposing the API as the props …

…for the child components in con

package.json

@@ -28,8 +28,8 @@
     "prop-types": "^15.0.0"
   },
   "dependencies": {
-    "@antv/g6-editor": "1.0.8",
     "@antv/g6": "2.0.5-beta.6",
+    "@antv/g6-editor": "1.0.8",
     "lodash": "^4.17.10"
   },
   "devDependencies": {

src/components/Adapter/propsAPI.js

@@ -0,0 +1,17 @@
+class PropsAPI {
+  constructor(editor) {
+    this.editor = editor;
+  }
+
+  get activePage() {
+    return this.editor.getCurrentPage();
+  }
+
+  getSelected = () => this.activePage.getSelected();
+  addItem = (type, model) => this.activePage.add(type, model);
+  removeItem = item => this.activePage.remove(item);
+  updateItem = (item, model) => this.activePage.update(item, model);
+  findItem = id => this.activePage.find(id);
+}
+
+export default PropsAPI;

src/components/Base/index.js

@@ -5,12 +5,7 @@ class BaseComponent extends React.Component {
   static contextTypes = {
     editor: PropTypes.object,
     editorId: PropTypes.number,
-    getCurrentPage: PropTypes.func,
-    getSelected: PropTypes.func,
-    addItem: PropTypes.func,
-    removeItem: PropTypes.func,
-    updateItem: PropTypes.func,
-    findItem: PropTypes.func,
+    propsAPI: PropTypes.object,
   }
 
   render() {

src/components/DetailPannel/index.js

@@ -13,26 +13,21 @@ class DetailPannel extends BaseComponent {
     const { editor } = this.context;
 
     editor.on(EVENT_AFTER_ADD_PAGE, () => {
-      this.setState({
-        status: STATUS_CANVAS_SELECTED,
-      });
-
+      this.setState({ status: STATUS_CANVAS_SELECTED });
       this.bindEvent();
     });
   }
 
-  bindEvent() {
-    const page = this.context.getCurrentPage();
+  get page() {
+    return this.context.editor.getCurrentPage();
+  }
 
-    page.on('statuschange', ({ status }) => {
-      this.setState({
-        status,
-      });
-    });
+  bindEvent() {
+    this.page.on('statuschange', ({ status }) => { this.setState({ status }); });
   }
 
   render() {
-    const { getSelected } = this.context;
+    const { getSelected } = this.context.propsAPI;
     const { children } = this.props;
     const { status } = this.state;
 

src/components/DetailPannel/pannel.js

@@ -25,7 +25,7 @@ class Pannel extends BaseComponent {
         {
           React.Children.toArray(children).map(child => React.cloneElement(child, {
             items,
-            ...this.context,
+            ...this.context.propsAPI,
           }))
         }
       </div>

src/components/GGEditor/index.js

@@ -3,17 +3,13 @@ import PropTypes from 'prop-types';
 import Editor from '@antv/g6-editor';
 import { EDITOR_EVENTS } from '@common/constants';
 import { pick, upperFirst, createId } from '@utils';
+import PropsAPI from '@components/Adapter/propsAPI';
 
 class GGEditor extends React.Component {
   static childContextTypes = {
     editor: PropTypes.object,
     editorId: PropTypes.number,
-    getCurrentPage: PropTypes.func,
-    getSelected: PropTypes.func,
-    addItem: PropTypes.func,
-    removeItem: PropTypes.func,
-    updateItem: PropTypes.func,
-    findItem: PropTypes.func,
+    propsAPI: PropTypes.object,
   }
 
   editor = null;
@@ -31,42 +27,22 @@ class GGEditor extends React.Component {
     return {
       editor: this.editor,
       editorId: this.editorId,
-      getCurrentPage: this.getCurrentPage,
-      getSelected: this.getSelected,
-      addItem: this.addItem,
-      removeItem: this.removeItem,
-      updateItem: this.updateItem,
-      findItem: this.findItem,
+      propsAPI: this.propsAPI,
     };
   }
 
-  get page() {
-    return this.editor.getCurrentPage();
-  }
-
-  getCurrentPage = () => this.page;
-
-  getSelected = () => this.page.getSelected();
-
-  addItem = (type, model) => this.page.add(type, model);
-
-  removeItem = item => this.page.remove(item);
-
-  updateItem = (item, model) => this.page.update(item, model);
-
-  findItem = id => this.page.find(id);
-
   init() {
     this.editor = new Editor();
+    this.propsAPI = new PropsAPI(this.editor);
+  }
+
+  addListener = (target, eventName, handler) => {
+    if (typeof handler === 'function') target.on(eventName, handler);
   }
 
   bindEvent() {
     EDITOR_EVENTS.forEach((event) => {
-      const handleEvent = this.props[(`on${upperFirst(event)}`)];
-
-      if (handleEvent) {
-        this.editor.on([event], handleEvent);
-      }
+      this.addListener(this.editor, [event], this.props[`on${upperFirst(event)}`]);
     });
   }
 

src/components/Mind/index.js

@@ -30,23 +30,16 @@ class Mind extends Page {
 
   bindEvent() {
     super.bindEvent();
-
     this.bindKeyupEditLabel();
   }
 
   bindKeyupEditLabel() {
     const editLabel = this.page.get('labelTextArea');
+    const { focusItem: item, textContent: text } = editLabel;
 
     editLabel.on('keyup', (e) => {
       e.stopPropagation();
-
-      const item = editLabel.focusItem;
-      const text = editLabel.textContent;
-
-      this.page.emit('keyupeditlabel', {
-        item,
-        text,
-      });
+      this.page.emit('keyupeditlabel', { item, text });
     });
   }
 }

src/components/Page/index.js

@@ -63,6 +63,7 @@ class Page extends BaseComponent {
       },
     });
   }
+
   get graph() {
     return this.page.getGraph();
   }
@@ -72,17 +73,19 @@ class Page extends BaseComponent {
   }
 
   bindEvent() {
+    const { addListener } = this;
+
     GRAPH_MOUSE_EVENTS.forEach((event) => {
-      this.addListener(this.graph, `node:${event}`, this.props[`onNode${upperFirst(event)}`]);
-      this.addListener(this.graph, `edge:${event}`, this.props[`onEdge${upperFirst(event)}`]);
+      addListener(this.graph, `node:${event}`, this.props[`onNode${upperFirst(event)}`]);
+      addListener(this.graph, `edge:${event}`, this.props[`onEdge${upperFirst(event)}`]);
     });
 
     GRAPH_OTHER_EVENTS.forEach((event) => {
-      this.addListener(this.graph, [event], this.props[`on${upperFirst(event)}`]);
+      addListener(this.graph, [event], this.props[`on${upperFirst(event)}`]);
     });
 
     PAGE_EVENTS.forEach((event) => {
-      this.addListener(this.page, [event], this.props[`on${upperFirst(event)}`]);
+      addListener(this.page, [event], this.props[`on${upperFirst(event)}`]);
     });
   }
 

src/components/Register/index.js

@@ -23,21 +23,9 @@ class Register extends BaseComponent {
     const { type } = this;
 
     editor.on(EVENT_BEFORE_ADD_PAGE, ({ className }) => {
-      let args = [];
-
-      switch (type) {
-        case 'behaviour': {
-          const { name, behaviour, dependences } = this.props;
-          args = [name, behaviour, dependences];
-          break;
-        }
-
-        default: {
-          const { name, config, extend } = this.props;
-          args = [name, config, extend];
-          break;
-        }
-      }
+      let keys = ['name', 'config', 'extend'];
+      if (type === 'behaviour') keys = ['name', 'behaviour', 'dependences'];
+      const args = keys.map(key => this.props[key]);
 
       Editor[className][`register${upperFirst(type)}`](...args);
     });