DDei在线设计器-插件介绍

最新推荐文章于 2024-08-09 10:42:44 发布

hoslay757

最新推荐文章于 2024-08-09 10:42:44 发布

阅读量618

点赞数 14

分类专栏： DDei 文章标签：前端 vue 流程图 uml typescript 开源软件

本文链接：https://blog.csdn.net/hoslay1/article/details/139503443

版权

DDei 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

插件

如需了解详细的API教程以及参数说明，请参考DDei文档

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

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

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

在这里插入图片描述

使用指南

导入

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

具名导入DDeiCoreStandLayout插件

import { DDeiCoreStandLayout } from "ddei-editor";

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

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

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

通过插件名配置

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

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

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

通过configuration配置

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

DDeiCoreSheetsPanel.configuration({
  max:3
}),

两种配置的区别

通过插件名定义的插件在全局是公共的，且只能在extensions第一级定义，也只能通过插件名使用。

const options = {
  //配置扩展插件  
  extensions: [
    //布局的配置
    DDeiCoreStandLayout.configuration({
      //配置插件
      'top': [],
      //通过插件名:ddei-core-panel-canvasview使用插件 // [!code ++:2]
      'middle': ['ddei-core-panel-canvasview'], 
      'left': [],
      'right': []
    }),
    //通过插件名配置插件：ddei-core-panel-canvasview // [!code ++:4]
    'ddei-core-panel-canvasview':{
      max:3
    }
  ],
}

通过configuration定义的配置，如果在第一级定义，则是全局公共的，可以通过插件名引用。如果在父插件的configuration中调用子插件的configuration，则该配置在父插件内部生效，不能通过插件名引用。

const options = {
  //配置扩展插件  
  extensions: [
    //布局的配置
    DDeiCoreStandLayout.configuration({
      //配置插件
      'top': [],
      //通过插件名:ddei-core-panel-canvasview使用插件 // [!code ++:2]
      'middle': ['ddei-core-panel-canvasview'], 
      'left': [],
      'right': []
    }),
    //通过configuration方法配置插件 // [!code ++:5]
    //由于在第一级，因此和通过插件名配置等价
    DDeiCoreSheetsPanel.configuration({
      max:3
    }),
  ],
}

不调用configuration方法，会采用默认配置。

const options = {
  //配置扩展插件  
  extensions: [
    //布局的配置
    DDeiCoreStandLayout.configuration({
      //配置插件
      'top': [],
      //通过插件名:ddei-core-panel-canvasview使用插件 // [!code ++:2]
      'middle': ['ddei-core-panel-canvasview'], 
      'left': [],
      'right': []
    }),
    //不调用configuration方法，使用默认配置 // [!code ++:3]
    //由于在第一级，因此和通过插件名配置等价
    DDeiCoreSheetsPanel
  ],
}

在父插件的configuration中调用子插件的configuration，则该配置在父插件内部生效，不能通过插件名引用。

const options = {
  //配置扩展插件  
  extensions: [
    //布局的配置
    DDeiCoreStandLayout.configuration({
      //配置插件
      'top': [],
      'middle': [
        //通过configuration方法配置子插件 // [!code ++:5]
        //子插件的配置只在这个插件内有效，不会影响全局配置
        DDeiCoreSheetsPanel.configuration({
          max:3
        })
      ], 
      'left': [],
      'right': []
    }),
    //通过configuration方法配置插件 // [!code ++:5]
    //由于在第一级，属于全局配置
    DDeiCoreSheetsPanel.configuration({
      max:3
    }),
  ],
}