DDei在线设计器

Appearance

插件 ​

  DDei提供了插件机制，使用者可以扩展插件对设计器功能进行装载或卸载。通过调整插件参数，影响插件的UI界面或者交互逻辑。

  自定义插件可以让我们开发新的布局、功能面板、功能按钮、右键菜单、快捷键、图形、编辑器、主题和字体，以完善设计器的功能。还能够自定义转换器和生命周期插件，干涉处理逻辑和引入回调函数，从而实现更为丰富的功能。

  以下是DDei-Core核心插件的标准布局效果，大家可以进入体验中心体验完整功能。

DDei设计器-缺省界面

使用指南 ​

导入

  通过import具名导入插件，这里以DDei-Core中的标准布局插件为例，这个插件缺省包含在ddei设计器中。

具名导入DDeiCoreStandLayout插件

ts
import { DDeiCoreStandLayout } from "ddei-editor";

  在组件的配置项中，通过extensions使用插件，这里对标准布局以及多页签插件进行了配置，去掉了部分面板，限制最大页签数为3。后面将说明插件的两种配置方式。

ts
const options = {
  //配置扩展插件
  extensions: [
    //布局的配置
    DDeiCoreStandLayout.configuration({
      //配置插件
      'top': [],
      'middle': ['ddei-core-panel-canvasview'],
      'left': [],
      'right': []
    }),
    //多页签插件的配置
    DDeiCoreSheetsPanel.configuration({
      max:3
    }),
  ],
}

  DDei提供了两种配置插件的方法：插件名和configuration。

通过插件名配置

  在extensions第一级，以插件名为key定义一个JSON：

  插件名在插件在开发时定义，具有全局唯一性

ts
"ddei-core-panel-bottom-sheets" : { max:3 }

通过configuration配置

  在extensions任意位置，调用组件的configuration方法，传入一个JSON：

ts
DDeiCoreSheetsPanel.configuration({
  max:3
}),

两种配置的区别

  1. 通过插件名定义的插件在全局是公共的，且只能在extensions第一级定义，也只能通过插件名使用。
ts
const options = {
  //配置扩展插件  
  extensions: [
    //布局的配置
    DDeiCoreStandLayout.configuration({
      //配置插件
      'top': [],
      //通过插件名:ddei-core-panel-canvasview使用插件
      'middle': ['ddei-core-panel-canvasview'], 
      'left': [],
      'right': []
    }),
    //通过插件名配置插件：ddei-core-panel-canvasview
    'ddei-core-panel-canvasview':{
      max:3
    }
  ],
}
  1. 通过configuration定义的配置，如果在第一级定义，则是全局公共的，可以通过插件名引用。如果在父插件的configuration中调用子插件的configuration，则该配置在父插件内部生效，不能通过插件名引用。
ts
const options = {
  //配置扩展插件  
  extensions: [
    //布局的配置
    DDeiCoreStandLayout.configuration({
      //配置插件
      'top': [],
      //通过插件名:ddei-core-panel-canvasview使用插件
      'middle': ['ddei-core-panel-canvasview'], 
      'left': [],
      'right': []
    }),
    //通过configuration方法配置插件
    //由于在第一级，因此和通过插件名配置等价
    DDeiCoreSheetsPanel.configuration({
      max:3
    }),
  ],
}
  1. 不调用configuration方法，会采用默认配置。
ts
const options = {
  //配置扩展插件  
  extensions: [
    //布局的配置
    DDeiCoreStandLayout.configuration({
      //配置插件
      'top': [],
      //通过插件名:ddei-core-panel-canvasview使用插件
      'middle': ['ddei-core-panel-canvasview'], 
      'left': [],
      'right': []
    }),
    //不调用configuration方法，使用默认配置
    //由于在第一级，因此和通过插件名配置等价
    DDeiCoreSheetsPanel
  ],
}
  1. 在父插件的configuration中调用子插件的configuration，则该配置在父插件内部生效，不能通过插件名引用。
ts
const options = {
  //配置扩展插件  
  extensions: [
    //布局的配置
    DDeiCoreStandLayout.configuration({
      //配置插件
      'top': [],
      'middle': [
        //通过configuration方法配置子插件
        //子插件的配置只在这个插件内有效，不会影响全局配置
        DDeiCoreSheetsPanel.configuration({
          max:3
        })
      ], 
      'left': [],
      'right': []
    }),
    //通过configuration方法配置插件
    //由于在第一级，属于全局配置
    DDeiCoreSheetsPanel.configuration({
      max:3
    }),
  ],
}

默认插件 ​

  以下三个插件缺省包含在DDei包中，可以直接使用

DDei-Core

  一个插件集，提供了运行时基础的控件及其属性配置和设计器常用的功能面板。使用时可以通过配置删减功能。本篇开头的截图就是开启所有DDei-Core插件后的完整界面。

DDei-QuickStyle

  提供了快捷样式编辑面板，用于在设计器上快速设置图形样式。

DDei-UML

  提供了一组UML图形，用于在设计器上绘制和展示UML。

技术支持 ​