备课大师控件开发流程

一个控件（以 mainbo_virtualtool 为例）包含
* html代码（控件结构）
* css代码（控件外观）
* ts代码（控件编辑态功能）
* js代码（控件放映态功能）

---

• 各部分（html,css,ts,js）代码控件表示 mainbo_virtualtool 保持一致
• 控件需要用到的图标不能使用字体图标，用 svg 或 png 均可

html代码放入 editor-shell.xhtml

<div class="virtualtool" data-control="mainbo_virtualtool">
    <div class="basket">
        <div class="basket1" data-rallying="true" title="点击隐藏工具"></div>
        <div class="items"></div>
        <div class="tmpimg" style="display: none !important;"></div>
        <div title="全部清除" class="clear"></div>
    </div>
    <div title="虚拟教具集结地" class="rallying"></div>
    <div class="imggroup"></div>
</div>

css代码放入 /src/style/etb/contorls/mainbo_virtualtool/mainbo_virtualtool.css

[data-control="mainbo_virtualtool"].virtualtool {
  width: 900px;
  height: 520px;
  min-width: 400px;
  min-height: 416px;
  color: green;
  -webkit-user-select: none;
  -moz-user-select: none;
}

...

css文件需要在 /src/doc/.core-editor.xhtml, /src/doc/reader-embed.xhtml引入

<link rel="stylesheet" href="../style/etb/controls/mainbo_virtualtool/mainbo_virtualtool.css" />

ts 代码（编辑态使用）放入 /src/script/etb/contorls/mainbo_virtualtool/mainbo_virtualtool.ts

module etb_controls.mainbo_virtualtool {
  export function init(el: Element) {
    setEditing(el, false);
  }
  // code here
  export function createModel(el: Element): etb_model.ControlModel {
    return new etb_model.ControlModel(el);
  }
  export var schema: etb_model.ControlModelSchema;
  // 该控件的特有quickBar
  // export var quickBarActions = [
  //   { action: 'clockLayout', _icon: 'clock-typography', title: '排版' }
  // ]; 
  export var quickBarActions = [];
  class Model extends etb_model.ControlModel {
    constructor(element: Element) {
      super(element);
    }
  }
  function moduleInit() {
    schema = new etb_model.ControlModelSchema();
    schema.getNode().addGeomProperties()
  }
  moduleInit();
}
module etb_controls {
  //TODO import not work?
  export var virtualtool = mainbo_virtualtool;
}

ts文件需要在 /src/script/etb/etb.ts 引入

///<reference path="controls/mainbo_virtualtool/mainbo_virtualtool.ts" />

js 代码（放映态使用）放入 /src/script/etb/contorls/mainbo_virtualtool/mainbo_virtualtool.js

(function (mainbo_virtualtool) {
  mainbo_virtualtool.init = init;
  function init(el) {
    setEditing(el);
  }
  function setEditing(el) {
    // el为该控件元素
  }
  // code here
})(mainbo_virtualtool = etb_controls.mainbo_virtualtool || (etb_controls.mainbo_virtualtool = {}))

js文件需要在 /src/doc/reader-embed.xhtml 引入

<script src="../script/etb/controls/mainbo_virtualtool/mainbo_virtualtool.js"></script>

调用控件的代码放入 /src/script/mbe/shell/AirMasterToolBar.ts

makeVIconButton({
  _icon: 'mbe-icon-mono-toolkit', 
  '.mbe-medium': true, 
  disabled: !app.allowEdit,
  onclick: () => app.insertMaterial('interaction/mainbo_virtualtool')
}),

控件所涉及到的文件放入导出列表 /src/script/etb/resources.ts

export var mainbo_virtualtool = [
    'script/etb/controls/mainbo_virtualtool/mainbo_virtualtool.js',
    'style/etb/controls/mainbo_virtualtool/mainbo_virtualtool.css',
    'style/etb/controls/mainbo_virtualtool/basket0.png',
    'style/etb/controls/mainbo_virtualtool/basket1.png',
    'style/etb/controls/mainbo_virtualtool/rallying.png',
    'style/etb/controls/mainbo_virtualtool/trash.png',
  ]

至此，一个简单的控件就算完成了，在工具栏就可以看到你开发的控件了