DDei在线设计器-自定义控件

最新推荐文章于 2024-09-14 22:18:26 发布
最新推荐文章于 2024-09-14 22:18:26 发布
阅读量362 收藏 6
点赞数 3
分类专栏： DDei 文章标签： 前端 javascript uml 流程图 typescript vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hoslay1/article/details/140974838
版权

自定义控件

  本示例演示了自定义分组、自定义控件、覆写属性以及配置控件属性的方法。

  本示例基于教程快速指南开发，如果您不清楚怎样引入DDei设计器，请查看教程快速指南。

  本篇最后提供的示例可以在DDei文档直接预览。

一、自定义分组

demo.vue

<script setup lang="ts">
import DDeiEditorView from "ddei-editor";
import { DDeiCoreStandLayout } from "ddei-editor";

const options = {
  config: { 
    "grid": 0, //网格线 // [!code --]
    "background": { color: "blue", opacity: 0.1 }, //背景色 // [!code --]
    //配置分组以及分组中的控件 // [!code ++:21]
    groupDefines:[
      {
        id: '999',
        name: '自定义扩展',
        code: 'custom-group',
        desc: '自定义扩展分组',
        subject: 'custom',
        orderNo: 0,
        controls: [
          {
            'id': '100001',
            'name': '扩展1',
          },
          {
            'id': '100002',
            'name': '扩展2',
          }
        ]
      }
    ],
    initData: {
      controls: [
        {
          model: "102010",
          text: "初始化图形"
        },
      ]
    }
  },
  //配置扩展插件
  extensions: [
    //布局的配置
    DDeiCoreStandLayout.configuration({
      //配置插件
      'top': [],
      'middle': ['ddei-core-panel-canvasview', 'ddei-core-panel-quickcolorview'],
      'bottom': [],
      'left': [],   // [!code --]
      'right': []
    }),
  ],
}
</script>

<template>
  <div style="width:400px;height:400px;margin:100px auto;">
    <DDeiEditorView :options="options" id="ddei_editor_1"></DDeiEditorView>
  </div>
</template>

实时效果
在这里插入图片描述

二、自定义控件

customdemo.js

//控件定义
const controls: object[] = [
  {
    'id': '9999001',
    'name': '自定义1',
    'code': 'cust_1',
    'desc': '自定义节点1',
    'from': '302006',
    'define': {
      fill: {
        color: "#e1b348"
      }
    }
  },
  {
    'id': '9999002',
    'name': '自定义2',
    'code': 'cust_2',
    'desc': '自定义节点2',
    'from': '302006',
    'define': {
      fill: {
        color: "#ffc0be"
      }
    }
  },
  {
    'id': '9999003',
    'name': '自定义3',
    'code': 'cust_3',
    'desc': '自定义节点3',
    'from': '102010',
    'define': {
      fill: {
        color: "#b1c1b2"
      }
    }
  }
]

//分组定义
const groups: object[] = [
  {
    id: '999',
    name: '自定义扩展',
    code: 'custom-group',
    desc: '自定义扩展分组',
    subject: 'custom',
    orderNo: 0,
    controls: [
      {
        'id': '302002',
        'name': '扩展用例',
      },
      {
        'id': '9999001',
        'name': '自定义1'
      },
      {
        'id': '9999002',
        'name': '自定义2'
      },
      {
        'id': '9999003',
        'name': '自定义3'
      },
      {
        'id': '302007',
        'name': '扩展用例',
      }
    ]
  }
]

export { controls, groups }

demo.vue

<script setup lang="ts">
import DDeiEditorView from "ddei-editor";
import { DDeiCoreStandLayout } from "ddei-editor";
import { DDeiExtUML } from "ddei-editor"; // [!code ++]
import {controls as ControlDefinesDemo,groups as GroupDefinesDemo} from "customdemo"; // [!code ++]

const options = {
  config: { 
    "grid": 0, //网格线 // [!code --]
    "background": { color: "blue", opacity: 0.1 }, //背景色 // [!code --]
    // 自定义控件，接收一个object[]。由于定义内容较多，提取到外部，便于维护 // [!code ++:4]
    controlDefines: ControlDefinesDemo,
    // 自定义分组，接收一个object[]。由于定义内容较多，提取到外部，便于维护
    groupDefines: GroupDefinesDemo,
    initData: {
      controls: [
        {  // [!code --:4]
          model: "102010",
          text: "初始化图形"
        },
        { // [!code ++:8]
          model: "9999003",
          text: "初始化图形"
        },
        {
          model: "9999001",
          offsetY:100
        }
      ]
    }
  },
  //配置扩展插件
  extensions: [
    //布局的配置
    DDeiCoreStandLayout.configuration({
      //配置插件
      'top': [],
      'middle': ['ddei-core-panel-canvasview', 'ddei-core-panel-quickcolorview'],
      'bottom': [],
      'left': [],   // [!code --]
      'right': []
    }),
    DDeiExtUML // [!code ++]
  ],
}
</script>

<template>
  <div style="width:400px;height:400px;margin:100px auto;">
    <DDeiEditorView :options="options" id="ddei_editor_1"></DDeiEditorView>
  </div>
</template>

实时效果
在这里插入图片描述

三、覆写已有控件属性

customdemo.js

//控件定义
const controls: object[] = [
  //复写已有的配置
  {
    'id': '100002',
    'define': {
      fill: {
        color: "#e1b348"
      },
      width:150,
      height:100
    }
  }
]

export { controls }

demo.vue

<script setup lang="ts">
import DDeiEditorView from "ddei-editor";
import { DDeiCoreStandLayout } from "ddei-editor";
import {controls as ControlDefinesDemo} from "customdemo"; // [!code ++]

const options = {
  config: { 
    "grid": 0, //网格线 // [!code --]
    "background": { color: "blue", opacity: 0.1 }, //背景色 // [!code --]
    // 自定义控件，接收一个object[]。由于定义内容较多，提取到外部，便于维护 // [!code ++:2]
    controlDefines: ControlDefinesDemo,
    initData: {
      controls: [
        {
          model: "102010",
          text: "覆写属性"  // [!code ++:2]
        }
      ]
    }
  },
  //配置扩展插件
  extensions: [
    //布局的配置
    DDeiCoreStandLayout.configuration({
      //配置插件
      'top': [],
      'middle': ['ddei-core-panel-canvasview', 'ddei-core-panel-quickcolorview'],
      'bottom': [],
      'left': [], 
      'right': []
    })
  ],
}
</script>

<template>
  <div style="width:400px;height:400px;margin:100px auto;">
    <DDeiEditorView :options="options" id="ddei_editor_1"></DDeiEditorView>
  </div>
</template>

实时效果
在这里插入图片描述

四、自定义属性

customdemo.js

//控件定义
const controls: object[] = [
  {
    'id': '9999001',
    'name': '自定义1',
    'code': 'cust_1',
    'desc': '自定义节点1',
    'from': '302006',
    'define': {
      fill: {
        color: "#e1b348"
      },
      //扩展属性与分组信息
      ext: {
        attrs: [
          {
            'code': 'text1',
            'name': '文本1',
            'desc': '控件的主体显示文本',
            'controlType': 'excheckbox',
            'dataType': 'integer',
            'dataSource': [{ 'text': '文本', 'value': 0 }, { 'text': '数字', 'value': 1 }, { 'text': '金额', 'value': 2 }, { 'text': '时间', 'value': 3 }],
            'itemStyle': { width: 80, height: 25, col: 2, row: 0, imgWidth: 20, imgHeight: 20 },
            'isArray': true,
            'defaultValue': [1, 2],
            'type': [1, 2], //类别，1图形，2业务，3事件
            'readonly': true,
          },
        ],
        groups: [
          {
            name: "数据",
            icon: 'icon-a-ziyuan409',
            subGroups: [
              {
                name: "分组1",
                attrs: ["code", "text1"]
              },
              {
                name: "分组2",
                attrs: ["text"]
              },

            ]
          },
        ]
      }
    }
  }
]

//分组定义
const groups: object[] = [
  {
    id: '999',
    name: '自定义扩展',
    code: 'custom-group',
    desc: '自定义扩展分组',
    subject: 'custom',
    orderNo: 0,
    controls: [
      {
        'id': '9999001',
        'name': '自定义1'
      }
    ]
  }
]

export { controls, groups }

demo.vue

<script setup lang="ts">
import DDeiEditorView from "ddei-editor";
import { DDeiCoreStandLayout } from "ddei-editor";
import { DDeiExtUML } from "ddei-editor"; // [!code ++]
import {controls as ControlDefinesDemo,groups as GroupDefinesDemo} from "customdemo"; // [!code ++]

const options = {
  config: { 
    "grid": 0, //网格线 // [!code --]
    "background": { color: "blue", opacity: 0.1 }, //背景色 // [!code --]
    // 自定义控件，接收一个object[]。由于定义内容较多，提取到外部，便于维护 // [!code ++:4]
    controlDefines: ControlDefinesDemo,
    // 自定义分组，接收一个object[]。由于定义内容较多，提取到外部，便于维护
    groupDefines: GroupDefinesDemo,
    initData: {
      controls: [
        { // [!code ++:3]
          model: "9999001",
        }
      ]
    }
  },
  //配置扩展插件
  extensions: [
    //布局的配置
    DDeiCoreStandLayout.configuration({
      //配置插件
      'top': [],
      'middle': ['ddei-core-panel-canvasview', 'ddei-core-panel-quickcolorview'],
      'bottom': [],
      'left': [],   
      'right': [] // [!code --]
    }),
    DDeiExtUML // [!code ++]
  ],
}
</script>

<template>
  <div style="width:400px;height:400px;margin:100px auto;">
    <DDeiEditorView :options="options" id="ddei_editor_1"></DDeiEditorView>
  </div>
</template>

实时效果
在这里插入图片描述

仓库信息

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

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

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

QQ:3697355039

hoslay757
关注
专栏目录
康佳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片段。 ...
4个优秀的在线原型设计工具，让你的设计更上一层楼！
2301_79733101的博客
03-14 924
原型设计主要是产品的可视化呈现，传达产品的信息结构、内容、功能和交互方式。这是一种让用户提前体验产品、交流设计理念、展示复杂系统的方式。顾名思义，在线原型设计是基于Web端的原型设计。产品的交互原型需要使用在线原型设计工具或平台来创建，产品的界面设计、功能和交互过程需要通过可视化来展示。今天，我们分享四个在线原型设计工具。 即时设计 - 可实时协作的专业 UI 设计工具即时设计是一款支持在线协作的专业级 UI 设计工具，支持 Sketch、Figma、XD 格式导入，海量优质设计资源即拿即用。支持创建交互
如何使用纯前端控件集 WijmoJS 中的可视化在线设计器
weixin_34199405的博客
08-13 337
概述WijmoJS Designer，一种全新的在线Web托管工具，为WijmoJS纯前端控件集提供了可视化设计图面和 Java代码生成器。 WijmoJS Designer允许用户创建控件实例，指定属性和事件，并生成可以合并到应用程序中的相应HTML 和 Java。WijmoJS 在线Web设计器对于开发网格和图表等复杂对象特别有用。The Wijmo Designer除了这款在线设计器，如果您...
DDei在线设计器-快速指南
hoslay1的专栏
05-28 909
本篇演示了从创建工程到使用设计器组件，并通过配置以及插件对功能进行调整的全过程。按照本篇的步骤，您可以把DDei设计器快速集成到应用中。更多的特性请参考示例和文档，尝试不同的插件与属性搭配，以实现您的个性化需求。
DDei在线设计器-DDeiCore-面板插件
hoslay1的专栏
06-11 868
介绍了DDei在线设计器的各种面板
DDei在线设计器-插件介绍
hoslay1的专栏
06-06 625
DDei在线设计器的插件概述
DDei在线设计器-API-DDeiEditor
hoslay1的专栏
06-18 782
DDeiEditor是DDei设计器的核心类，每当使用都会生成一个组件实例，其中的editor属性类型为DDeiEditor。DDeiEditor实例包含了组件的所有数据，在获取后可以通过它访问其他内容。DDeiEditor中维护了一个实例池，可以根据名称得到任意实例。一个DDeiEditor实例至少包含一个DDeiFile实例和一个DDei实例。本篇最后提供的示例可以在直接预览。
DDei在线设计器-API-DDeiStage
hoslay1的专栏
06-25 1024
DDeiStage代表一个舞台，一个舞台含有多个。DDeiStage实例包含了一个舞台的所有数据，以及渲染器，在获取后可以通过它访问其他内容。DDeiSheet和DDei中都有stage属性，前者的关系是固定的，后者指向当前激活的画布。一个DDeiSheet实例至少包含一个DDeiStage实例。本篇最后提供的示例可以在直接预览。
DDei在线设计器-API-DDei
hoslay1的专栏
06-20 260
DDei是DDeiEditor的一个内置对象，实现了部分与图形显示有关但与设计器无关的功能、配置以及公共方法。在图形内部一般不直接访问DDeiEditor，而是使用DDei，DDeiEditor的绝大多数初始化属性、回调函数等在DDei也能获取。。本篇最后提供的示例可以在直接预览。
DDei在线设计器-API-DDeiAbstractShape
hoslay1的专栏
06-27 594
代表是所有可见图形的父类，定义了图形所需要的公共属性和方法。DDeiAbstractShape实例包含了一个图形的所有数据和渲染器，在获取后可以通过它访问其他内容。中的layer指向所在图层,stage指向所属舞台，pModel指向其父容器，顶级指向layer。本篇最后提供的示例可以在直接预览。
深度威胁邮件网关介绍.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年第二...
前端用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 912
同步代码：按照代码的书写顺序立即执行。异步代码：通过关键字，异步操作会被放入微任务队列中等待执行。事件循环：在同步代码执行完毕后，事件循环会检查并执行微任务队列中的任务。async2script endasync1 end这个顺序反映了JavaScript中同步与异步代码的执行机制以及事件循环的工作原理。定义：HEAD请求是一种HTTP方法，它请求服务器返回与GET请求相同的响应头部，但不返回响应的主体部分。用途：主要用于获取资源的元信息，如文件大小、最后修改时间等，而无需下载整个资源。定义。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值