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

embedded/2024/9/24 1:23:07/

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

http://www.ppmy.cn/embedded/46991.html

相关文章

【设计模式】JAVA Design Patterns——State（状态模式）

【设计模式】JAVA Design Patterns——State（状态模式）

&#x1f50d;目的 允许对象在内部状态改变时改变它的行为。对象看起来好像修改了它的类。 &#x1f50d;解释 真实世界例子 当在长毛象的自然栖息地观察长毛象时&#xff0c;似乎它会根据情况来改变自己的行为。它开始可能很平静但是随着时间推移当它检测到威胁时它会对周围的…
阅读更多...
Leetcode315题：计算右侧小于当前元素的个数

Leetcode315题：计算右侧小于当前元素的个数

315. 计算右侧小于当前元素的个数 难度&#xff1a;困难 问题描述&#xff1a; 给你一个整数数组 nums &#xff0c;按要求返回一个新数组 counts 。数组 counts 有该性质&#xff1a; counts[i] 的值是 nums[i] 右侧小于 nums[i] 的元素的数量。 示例 1&#xff1a; 输入…
阅读更多...
Proxy 与 Reflect 的关系、作用与应用场景

Proxy 与 Reflect 的关系、作用与应用场景

1. Proxy 与 Reflect 简介 代理&#xff08;Proxy&#xff09;是一种设计模式&#xff0c;允许为其他对象创建一个代表或占位符对象&#xff0c;以控制对它的访问。在JavaScript中&#xff0c;Proxy 对象是一个内置对象&#xff0c;用于创建一个对象的代理&#xff0c;从而可以…
阅读更多...
建构信任基石：揭秘Web3的去中心化信任体系

建构信任基石：揭秘Web3的去中心化信任体系

在传统的互联网时代&#xff0c;信任往往建立在中心化的机构和第三方平台之上&#xff0c;而这种中心化的信任体系往往面临着数据泄露、信息滥用等问题。然而&#xff0c;随着区块链技术的发展&#xff0c;Web3时代正在向我们展示一种全新的信任体系&#xff0c;即去中心化的信…
阅读更多...
VFP发送邮件有哪些配置要求？如何使用VFP？

VFP发送邮件有哪些配置要求？如何使用VFP？

VFP发送邮件支持的邮件服务器&#xff1f;邮件发送功能怎么优化&#xff1f; 在如今的互联网时代&#xff0c;应用程序发送邮件功能几乎是不可或缺的&#xff0c;VFP也不例外。然而&#xff0c;要实现VFP发送邮件&#xff0c;需要了解并配置相关的要求和步骤。AokSend将详细介…
阅读更多...
R语言中dplyr包的多表连接

R语言中dplyr包的多表连接

在数据分析中&#xff0c;处理多个数据表是常见的需求。R语言中&#xff0c;dplyr包提供了丰富的连接&#xff08;join&#xff09;函数来实现多表连接操作。本文将解释R语言中的各种连接类型&#xff0c;包括内连接、外连接、左连接、右连接、半连接和反连接&#xff0c;并给出…
阅读更多...
RK3568技术笔记之一 RK3568总体介绍

RK3568技术笔记之一 RK3568总体介绍

RK3568是瑞芯微开发出一款很好用的芯片。我先把ROCKCHIP的原厂信息搬过来看看。 首先声明一下&#xff0c;这篇文章里的资讯版权归瑞芯微电子股份有限公司。毕竟是我转过来的嘛。 我自己的心得&#xff0c;版权就归我啦。 主要特性 Quad-core Cortex-A55 up to 2.0GHzMali-G…
阅读更多...
InfiniGate自研网关实现思路七

InfiniGate自研网关实现思路七

25.网关Nginx负载模型配置 通过模拟多个HTTP服务配置到 Nginx 做负载均衡&#xff0c;以学习API网关负载的配置和使用 API 网关是用于支撑分布式 RPC 接口协议转换提供 HTTP 调用的一套服务&#xff0c;那么 API 网关系统就需要可横向扩展来满足系统的吞吐量诉求。所以这里需…
阅读更多...
最新文章

Copyright @ 2022~2023