gaea editor 技术栈总结

• 作者：Bougie
• 创建于：2019-06-13
• 更新于：2023-03-09

• 前端
• 成长

语言

100% TypeScript

状态管理

dob js，作者自己造的轮子，类似 mobx

import { Action, inject } from 'dob'
import * as _ from 'lodash'
import * as React from 'react'
import ViewportStore from '../viewport/store'
import ApplicationStore from './store'

export default class ApplicationAction {
  @inject(ApplicationStore)
  private store: ApplicationStore

  @inject(ViewportStore)
  private viewportStore: ViewportStore

  @Action
  public clearPlugin() {
    this.store.plugins = []
  }

  /**
   * 添加插件
   */
  @Action
  public addPlugin(plugin: IPlugin) {
    this.store.plugins.push(plugin)
  }
}

JSON Schema

{
  "gaea_instance_55512cb6": {
    "gaeaKey": "gaea-container",
    "data": { "props": { "style": { "display": "block", "height": "100%" } } },
    "childs": ["gaea_instance_787db8db"],
    "parentInstanceKey": null
  },
  "gaea_instance_787db8db": {
    "gaeaKey": "gaea-container",
    "data": { "props": { "style": {} } },
    "childs": [
      "gaea_instance_83f36a19",
      "gaea_instance_5d385346",
      "gaea_instance_a1c00130",
      "gaea_instance_987c2f64"
    ],
    "parentInstanceKey": "gaea_instance_55512cb6"
  },
  "gaea_instance_83f36a19": {
    "gaeaKey": "gaea-button",
    "data": { "props": { "style": {} } },
    "childs": [],
    "parentInstanceKey": "gaea_instance_787db8db"
  },
  "gaea_instance_5d385346": {
    "gaeaKey": "gaea-select",
    "data": {
      "props": {
        "style": {},
        "options": [{ "value": null, "text": "Banana", "disabled": false }]
      }
    },
    "childs": [],
    "parentInstanceKey": "gaea_instance_787db8db"
  },
  "gaea_instance_987c2f64": {
    "gaeaKey": "gaea-icon",
    "data": { "props": { "style": {} } },
    "childs": [],
    "parentInstanceKey": "gaea_instance_787db8db"
  },
  "gaea_instance_a1c00130": {
    "gaeaKey": "gaea-switch",
    "data": { "props": {} },
    "childs": [],
    "parentInstanceKey": "gaea_instance_787db8db"
  }
}

组件封装

class MyInput extends React.Component {
  render() {
    return <input />
  }
}

export function renderGaeaEditor() {
  return <Editor componentClasses={[MyInput]} />
}

细节

拖拽

<ul id="items">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>
<script>
  var el = document.getElementById('items')
  var sortable = Sortable.create(el)
</script>

keymaster 快捷键

key('⌘+r, ctrl+r', function (event, handler) {
  console.log(handler.shortcut, handler.scope)
})

< 总结各种 prototype.call | apply | bind 组件库文档建设指北 >