DDei在线设计器-DDeiCore-面板插件

已于 2024-06-11 15:56:36 修改
阅读量868 收藏 19
点赞数 27
分类专栏： DDei 文章标签： 前端 javascript vue 流程图 uml 开源软件
于 2024-06-11 15:52:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hoslay1/article/details/139601247
版权

DDei-Core-面板

  面板是一个可见的功能界面，既可以装载到布局（Layout）上，也能够被嵌套进其它面板，这一篇对DDei-Core的提供的主要面板进行介绍，最后以表格的形式列举其它面板。

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

顶部菜单栏

  顶部菜单栏一般放在整个界面的最上方，用于显示重要的操作功能。

效果截图
在这里插入图片描述

  顶部菜单栏是一个插件容器，每一个部分都是一个单独的插件。
在这里插入图片描述

使用方式

安装

  本插件缺省包含在DDei包中，可以直接使用。

引入

import { DDeiCoreTopMenuPanel } from "ddei-editor";

使用

extensions: [
  ......
  //使用插件，配置每个子插件  // [!code ++:6]
  DDeiCoreTopMenuPanel.configuration({
    'panels': ["ddei-core-panel-fileinfo", 
       "ddei-core-panel-operate", "ddei-core-panel-fontandtext", "ddei-core-panel-tool"
      , "ddei-core-panel-sort"]
  })
],

基本信息

插件名ddei-core-panel-topmenu
类名DDeiCoreTopMenuPanel
类别Panel

配置信息

属性名说明数据类型范围缺省值备注
panels功能面板Array<string/json/DDeiPluginBase>[“ddei-core-panel-fileinfo”, “ddei-core-panel-operate”, “ddei-core-panel-fontandtext”, “ddei-core-panel-tool” , “ddei-core-panel-sort”]

控件工具项

  控件工具箱提供了控件的分组展示，用户可以通过拖拽的方式，创建控件。

效果截图
在这里插入图片描述

在这里插入图片描述

使用方式

安装

  本插件缺省包含在DDei包中，可以直接使用。

引入

import { DDeiCoreToolboxPanel } from "ddei-editor";

使用

extensions: [
  ......
  //使用插件，配置选项  // [!code ++:7]
  DDeiCoreToolboxPanel.configuration({
    search:false, //关闭搜索功能
    expand:false, //关闭收折功能
    custom: true, //开启自定义分组
    customGroups: [302, 301, 102, 101] //配置自定义分组
  })
],

基本信息

插件名ddei-core-panel-toolbox
类名DDeiCoreToolboxPanel
类别Panel

配置信息

属性名说明数据类型范围缺省值备注
search开启搜索功能booleantrue/falsetrue
expand开启收折功能booleantrue/falsetrue
custom开启自定义分组booleantrue/falsefalse
customGroups自定义分组Array<string/number>custom为true时生效

主画布

  主画布负责展示图形，是整个DDei的核心。主画布支持无限画布、拖拽、旋转、缩放、拉伸、连线等操作，可以参考功能示例进行设置。不论选用哪种布局，都必须存在一个主画布插件。

效果截图
在这里插入图片描述

使用方式

主画布没有配置项，建议通过插件名直接使用

安装

  本插件缺省包含在DDei包中，可以直接使用。

引入

import { DDeiCoreCanvasViewPanel } from "ddei-editor";

使用

extensions: [
  ......
  //使用插件  // [!code ++:2]
  DDeiCoreCanvasViewPanel
],

基本信息

插件名ddei-core-panel-canvasview
类名DDeiCoreCanvasViewPanel
类别Panel

配置信息

  主画布无需配置。

属性面板

  属性面板提供了图形属性的展示和编辑功能，该面板和主画布联动，当选中图形后，会根据图形的属性配置，会刷新面板的内容，呈现属性编辑器。

效果截图
在这里插入图片描述

使用方式

安装

  本插件缺省包含在DDei包中，可以直接使用。

引入

import { DDeiCorePropertyViewPanel } from "ddei-editor";

使用

extensions: [
  ......
  //使用插件  // [!code ++:4]
  DDeiCorePropertyViewPanel.configuration({
    expand:false, //关闭收折功能
  })
],

基本信息

插件名ddei-core-panel-propertyview
类名DDeiCorePropertyViewPanel
类别Panel

配置信息

属性名说明数据类型范围缺省值备注
expand开启收折功能booleantrue/falsetrue

底部菜单栏

  底部菜单栏一般用于非重要属性的编辑和信息的展示，用户可以切换页签、调整缩放比例、管理图层等。

效果截图
在这里插入图片描述

使用方式

安装

  本插件缺省包含在DDei包中，可以直接使用。

引入

import { DDeiCoreBottomMenuPanel } from "ddei-editor";

使用

extensions: [
  ......
  //使用插件，配置子插件  // [!code ++:8]
  DDeiCoreBottomMenuPanel.configuration({
      'panels': [
                "ddei-core-panel-bottom-sheets",
                "ddei-core-panel-bottom-shapecount",
                "ddei-core-panel-bottom-managelayers"
                ]
  })
],

基本信息

插件名ddei-core-panel-bottommenu
类名DDeiCoreBottomMenuPanel
类别Panel

配置信息

属性名说明数据类型范围缺省值备注
panels功能面板Array<string/json/DDeiPluginBase>[“ddei-core-panel-bottom-sheets”, “ddei-core-panel-bottom-shapecount”, “ddei-core-panel-bottom-play”,“ddei-core-panel-bottom-managelayers”, “ddei-core-panel-bottom-changeratio”, “ddei-core-panel-bottom-suitratio”]

多文件编辑

  多文件编辑提供了文件卡片切换、文件创建、关闭等功能，多文件一般放置在主画布上方，位于标准布局的中间。

效果截图
在这里插入图片描述

使用方式

安装

  本插件缺省包含在DDei包中，可以直接使用。

引入

import { DDeiCoreOpenFilesViewPanel } from "ddei-editor";;

使用

extensions: [
  ......
  //布局的配置
  DDeiCoreStandLayout.configuration({
    //配置插件
    'top': [],
    'middle': ['ddei-core-panel-openfilesview','ddei-core-panel-canvasview'], //通过插件名引用多文件插件 // [!code ++] 
    'bottom': [],
    'left': [],
    'right': []
  }),
  //配置多文件插件 // [!code ++:4]
  DDeiCoreOpenFilesViewPanel.configuration({
    max:3
  })
],

基本信息

插件名ddei-core-panel-openfilesview
类名DDeiCoreOpenFilesViewPanel
类别Panel

配置信息

属性名说明数据类型范围缺省值备注
expand开启收折booleantrue/falsetrue
new允许新建booleantrue/falsetrue
close允许关闭booleantrue/falsetrue
rename允许重命名booleantrue/falsetrue
drag允许拖拽booleantrue/falsetrue
beforeCloseFile关闭文件前回调函数Function可用于弹出询问框

快速颜色

  快速颜色提供了一组常用颜色，用于快速设置图形的边框、文本和填充色。

效果截图
在这里插入图片描述

使用方式

安装

  本插件缺省包含在DDei包中，可以直接使用。

引入

import { DDeiCoreOpenFilesViewPanel } from "ddei-editor";;

使用

extensions: [
  ......
  //布局的配置
  DDeiCoreStandLayout.configuration({
    //配置插件
    'top': [],
    'middle': ['ddei-core-panel-canvasview','ddei-core-panel-quickcolorview'], //通过插件名引用快速颜色插件 // [!code ++] 
    'bottom': [],
    'left': [],
    'right': []
  }),
  //配置插件，非必需 // [!code ++:2]
  DDeiCoreQuickColorViewPanel
],

基本信息

插件名ddei-core-panel-quickcolorview
类名DDeiCoreQuickColorViewPanel
类别Panel

配置信息

快速颜色没有配置项，建议通过插件名直接使用

其它

  上述7个面板组成了常见设计器的要素。面板被设计为可以相互组合嵌套的功能界面，不论是一个按钮还是一组功能都可以封装为一个面板插件。封装后的面板插件也能够通过插件名、类名、configuration在任意地方使用，因此上述7个面板也是由一个个子面板组合而来。子面板种类繁多，这里将以表格的方式对这些子面板信息以及配置进行介绍。

顶部菜单-子面板

这些面板用于构成顶部菜单栏

文件信息面板

插件名ddei-core-panel-fileinfo
类名DDeiCoreFileInfoPanel
说明用于显示文件信息、提供保存、导入等按钮以及功能
类别Panel

操作面板

插件名ddei-core-panel-operate
类名DDeiCoreOperatePanel
说明提供剪切、复制、粘贴、格式刷功能
类别Panel

字体样式面板

插件名ddei-core-panel-fontandtext
类名DDeiCoreFontAndTextPanel
说明提供字体以及字体样式设置功能
类别Panel

工具面板

插件名ddei-core-panel-tool
类名DDeiCoreToolPanel
说明提供切换模式（选择、平移画布、创建文本）功能
类别Panel

排序面板

插件名ddei-core-panel-sort
类名DDeiCoreSortPanel
说明提供位置、对齐、旋转、组合等功能
类别Panel

底部菜单-子面板

这些面板用于构成底部菜单栏

多页签面板

基本信息

插件名ddei-core-panel-bottom-sheet
类名DDeiCoreSheetsPanel
说明提供多页签编辑以及切换功能
类别Panel

配置

属性名说明数据类型范围缺省值备注
new允许新建booleantrue/falsetrue
max最大打开数量number00为不限制
rename允许重命名booleantrue/falsetrue
drag允许拖拽booleantrue/falsetrue

图形总数面板

信息

插件名ddei-core-panel-bottom-shapecount
类名DDeiCoreShapeCountPanel
说明统计并显示当前文件的图形总数
类别Panel

配置

属性名说明数据类型范围缺省值备注
title文本标题string形状数

预览播放面板

插件名ddei-core-panel-bottom-play
类名DDeiCorePlayPanel
说明显示播放图标，用于预览播放所有页签的图
类别Panel

图层管理面板

插件名ddei-core-panel-bottom-managelayers
类名DDeiCoreManageLayersPanel
说明显示图层管理按钮，点击后会弹出图层管理弹框
类别Panel

全局缩放面板

信息

插件名ddei-core-panel-bottom-changeratio
类名DDeiCoreChangeRatioPanel
说明显示调整缩放按钮，对当前页签进行全局缩放
类别Panel

配置

属性名说明数据类型范围缺省值备注
delta按钮点击增量number0.05
min最小值number0.1
max最大值number4
dialog开启弹框booleantrue
range开启范围选择booleantrue
step范围选择步长number0.1

最佳比例面板

插件名ddei-core-panel-bottom-suitratio
类名DDeiCoreSuitRatioPanel
说明显示最佳缩放比例按钮，点击后自动设置为刚好能显示出完整图形的缩放比例
类别Panel

仓库信息

源码: https://gitee.com/hoslay/ddei-editor

文档: http://docs.ddei.top

在线体验: https://www.ddei.top

技术支持

QQ:3697355039     邮箱：3697355039@qq.com
hoslay757
关注
专栏目录
DDei在线设计器-快速指南
hoslay1的专栏
05-28 909
本篇演示了从创建工程到使用设计器组件，并通过配置以及插件对功能进行调整的全过程。按照本篇的步骤，您可以把DDei设计器快速集成到应用中。更多的特性请参考示例和文档，尝试不同的插件与属性搭配，以实现您的个性化需求。
DDei在线设计器-插件介绍
hoslay1的专栏
06-06 625
DDei在线设计器的插件概述
DDei在线设计器-DDeiCore-图形插件
hoslay1的专栏
06-11 1164
介绍了DDei在线设计-Core插件包含的各种图形控件
DDei在线设计器-DDeiCore-布局插件
hoslay1的专栏
06-07 403
如需了解详细的API教程以及参数说明，请参考。
DDei在线设计器-UML插件
hoslay1的专栏
06-14 487
提供了一组UML图形，用于在设计器上绘制和展示UML。DDei-UML默认包含在ddei中，无需单独安装。如需了解详细的API教程以及参数说明，请参考。
DDei在线设计器-API-DDeiEditor
hoslay1的专栏
06-18 782
DDeiEditor是DDei设计器的核心类，每当使用都会生成一个组件实例，其中的editor属性类型为DDeiEditor。DDeiEditor实例包含了组件的所有数据，在获取后可以通过它访问其他内容。DDeiEditor中维护了一个实例池，可以根据名称得到任意实例。一个DDeiEditor实例至少包含一个DDeiFile实例和一个DDei实例。本篇最后提供的示例可以在直接预览。
DDei在线设计器-QuickStyle插件
hoslay1的专栏
06-13 149
DDei-QuickStyle提供了快捷样式编辑面板，当设计器上选中图形或编辑文本时，通过浮动菜单的方式快速编辑图形样式。DDei-QuickStyle默认包含在ddei中，无需单独安装。如需了解详细的API教程以及参数说明，请参考。
康佳LC-TM3218电源板原理图，或STA200TV电源板原理图
02-27
- **二极管（D）:** D1(DDEI806)、D2(1N4148)等用于整流和保护电路。 - **电感器（L）:** L1、L5等用于滤波和平滑电流。 - **集成电路（IC）:** U3A、U3B、U4A(PC817)等负责信号处理和控制。 - **稳压二极管（ZD...
聚合酶链式反应-限制性片段长度多态性和芯片生物分析技术用于渤海地区鱼种鉴定.pdf
07-26
在此过程中，酶切反应体系与三种限制性内切酶DdeI、Hae III和Nla III进行混匀，并在适宜温度下进行酶切反应，以确保酶切的专一性和效率。酶切后，利用DNA凝胶和DNA浓缩染料进行凝胶电泳，分离出不同大小的DNA片段。 ...
深度威胁邮件网关介绍.pdf
10-13
在2018年第二季度，APT（Advanced Persistent Threat，高级持续性威胁）攻击经常始于利用社交工程的电子邮件，例如2011年的RSA SecurID攻击，攻击者通过精心设计的邮件诱骗员工打开包含Adobe Flash零日漏洞的Excel...
深度威胁邮件网关介绍.pptx
10-13
深度威胁邮件网关，如Deep Discovery Email Inspector (DDEI)，是网络安全解决方案中至关重要的一环，主要用于防御垃圾邮件、勒索邮件、恶意邮件以及病毒邮件。DDEI 3.0版本增强了对垃圾邮件的防护，自2018年第二...
第981期机器学习日报(2017-05-26)
ai100_ml的博客
05-27 532
机器学习日报 2017-05-26 百度发布Deep Voice 文本到语音转化系统新版，转化速度上比 WaveNet 快400倍 @新智元神经网络金融时序数据处理 @爱可可-爱生活基于Scikit-Learn的多标签分类模块 @爱可可-爱生活单图像去模糊算法比较研究 @爱可可-爱生活OpenAI Baselines：DQN @网路冷眼 @好东西传送门 出品,由@AI100运营，
前端用html写excel文件直接打开
全易
09-10 549
html文件直接用excel打开
[项目][WebServer][日志设计]详细讲解
SnowK博客
09-11 4404
[项目][WebServer][日志设计]详细讲解
前端HTML+CSS+JS的入门学习
m0_59247951的博客
09-10 1473
和</p>，其中<p>是开始标签，表示一个段落的开始，而
​美​团​一​面​
最新发布
qq_43858368的博客
09-14 911
同步代码：按照代码的书写顺序立即执行。异步代码：通过关键字，异步操作会被放入微任务队列中等待执行。事件循环：在同步代码执行完毕后，事件循环会检查并执行微任务队列中的任务。async2script endasync1 end这个顺序反映了JavaScript中同步与异步代码的执行机制以及事件循环的工作原理。定义：HEAD请求是一种HTTP方法，它请求服务器返回与GET请求相同的响应头部，但不返回响应的主体部分。用途：主要用于获取资源的元信息，如文件大小、最后修改时间等，而无需下载整个资源。定义。
经验笔记：Web 浏览器存储手段
qq_45831414的博客
09-10 849
以上就是使用 IndexedDB 的基本步骤。IndexedDB 提供了强大的数据存储能力，并且可以通过索引来优化数据检索性能。在实际应用中，可能还需要处理更复杂的场景，比如数据迁移、错误处理等。务必确保你的代码能够妥善处理各种异常情况。
水平居中的几种方法（总结）
致未来的你。的博客
09-11 682
水平居中的几种方法（总结）
中国山羊POU1F1基因DdeⅠ位点遗传多样性研究
他们利用聚合酶链反应(PCR)技术扩增了包含Exon6和3'UTR区域的450bp的POU1F1基因片段，然后通过限制性内切酶DdeI进行酶切分析，以研究基因的多态性。 实验结果显示，PCR扩增得到的基因片段经过DdeI酶切后，可以检测...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值