gaea-editor 插件编写UI篇

布局总览

gaea-editor 将页面分成

1. navbarLeft
2. navbarRight
3. leftbarTop
4. leftBarBottom
5. toolContainerLeft
6. tooContainerRight
7. viewport
8. bottomBar
9. mainTool

总共9个
在编写插件的时候 最主要的是告诉gaea-editor你的插件是要放在什么位置，因此在导出的时候，有position,与class两个主要信息

export default {
  position: 'leftBarTop',
  class: DragMenuButton1,
};

其中5：toolContainerLeft，6：tooContainerRight，是公用位置，定义插件名需要添加上你插件的名字，
如：export default {
position: ‘toolContainerLeftSettingPages’,
class: SettingPages
};

需要显示都提供了专门的接口
1、toolContainerLeft， this.props.actions.ApplicationAction.setLeftTool(‘SettingPages’);
2、toolContainerRight, this.props.actions.ApplicationAction.setRightTool(‘SettingPageItem’)

自定义数据

在编辑插件的时候，难免需要自行保存一些数据，这时候 gaea-editor 给了我们一个将数据放入顶层props的方法
在导出插件的时候，添加两个属性actions，与stores，gaea-editor 会将这两注册成全局仓库与动作，

// index.jsx
import { Connect } from 'dob-react';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Icon } from 'antd'
import * as Styled from './index.style';
import { Props, State } from './index.type';
import { PagesStore } from './store'
import { PagesAction } from './action'
@Connect // 需要装饰调用，才能拿到全局的props
class SettingPages extends React.Component {
  addPage = () => {
    this.props.actions.PagesAction.addPage()
  }
  render() {
    return <div>
      <div>
        <div onClick={this.addPage}>
            <Icon type="file-add" />
        </div>
      </div>
      <div>
        {this.props.stores.PagesStore.list.map((item, idx) => {
          return <div onClick={this.switchRightTool} key={idx}>
            {item.name}oo
          </div>
        })}
      </div>
    </div>
  }
}
export default {
  position: 'toolContainerLeftSettingPages',
  class: SettingPages,
  actions: {
    PagesAction
  },
  stores: {
    PagesStore
  },
};

源码操作 源码地址

官方建议我们使用 dob，来进行数据注册，需要更新渲染的时候 需要使用dob-react，进行连接组件，才能时页面根据action 的操作进行跟新渲染，
action的用法

// action.js
import { Action, inject } from 'dob';
import { PagesStore } from './store'
export class PagesAction {
  @inject(PagesStore) pagesStore
  @Action
  addPage() {
    this.pagesStore.list.push({name: '新添加的页面'})
  }
}

注意store的注册,必须引入 observable，并进行装饰调用，数据跟新后才能触发渲染

// store.js
import { observable } from "dob";
@observable
export class PagesStore {
  list = [
    {
      name: '首页',
      path: '/',
      default: true,
      isUse: true,
      pageData: null
    }
  ]
}

;