DDeiEditor

DDeiEditor是DDei设计器的核心类，每当使用DDeiEditorViewer都会生成一个组件实例，其中的editor属性类型为DDeiEditor。

DDeiEditor实例包含了组件的所有数据，在获取后可以通过它访问其他内容。DDeiEditor中维护了一个实例池，可以根据名称得到任意实例。

一个DDeiEditor实例至少包含一个DDeiFile实例和一个DDei实例。

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

属性

属性名	说明	数据类型	静态	默认值	备注
id	id	string	否
containerid	所属容器ID	string	否
files	文件列表	DDeiFile[]	否	[]
currentFileIndex	当前文件下标	number	否	-1
state	状态	DDeiEditorState	否	DESIGNING
modelType	模型名称	string	否	DDeiEditor
ddInstance	DDei内部对象	string	否	DDeiEditor
editMode	编辑模式	number	否	1	1指针/2手/3文本创建/4线段创建
INSTANCE_POOL	实例池	Map	是		以key-value的形式维护了所有DDeiEditor实例
width	画布宽度	number	否		仅用于初始化
height	画布高度	number	否		仅用于初始化
ratio	缩放比率	number	否	1.0	仅用于初始化
mark	水印	string/object/null	否	1.0	仅用于初始化查看详情
ruler	标尺	number	否	1.0	仅用于初始化查看详情
grid	网格	number/null	否	1	仅用于初始化查看详情
paper	纸张	string/object/null	否		仅用于初始化查看详情
background	背景	string/object/null	否		仅用于初始化查看详情
EXT_STAGE_WIDTH	自动扩展宽度	boolean	否
EXT_STAGE_HEIGHT	自动扩展宽度	boolean	否
GLOBAL_ALLOW_STAGE_RATIO	开启全局缩放	boolean	否	true
GLOBAL_ADV_WEIGHT	吸附区域尺寸	number	否	5	大于0时拖拽时会有吸附效果，小于0时没有效果
GLOBAL_HELP_LINE_ENABLE	显示对齐辅助线	boolean	否	true
EVENT_LOAD_FILE	加载文件	Function/null	否		回调函数
EVENT_SAVE_FILE	保存文件	Function/null	否		回调函数
EVENT_CONTROL_SELECT_BEFORE	控件选择前	Function/null	否		回调函数
EVENT_CONTROL_SELECT_AFTER	控件选择后	Function/null	否		回调函数
EVENT_CONTROL_SELECT_CREATE	控件创建前	Function/null	否		回调函数
EVENT_MOUSE_OPERATING	鼠标操作中	Function/null	否		回调函数
EVENT_CONTROL_DRAG_BEFORE	拖拽前	Function/null	否		回调函数
EVENT_CONTROL_DRAG_AFTER	拖拽后	Function/null	否		回调函数
EVENT_LINE_DRAG_BEFORE	线拖拽前	Function/null	否		回调函数
EVENT_LINE_DRAG_AFTER	线拖砖后	Function/null	否		回调函数
EVENT_CONTROL_DEL_BEFORE	控件删除前	Function/null	否		回调函数
EVENT_CONTROL_DEL_AFTER	控件删除后	Function/null	否		回调函数
EVENT_CONTROL_EDIT_BEFORE	控件编辑前	Function/null	否		回调函数
EVENT_CONTROL_EDIT_AFTER	控件编辑后	Function/null	否		回调函数
EVENT_CONTROL_EDIT_BEFORE	控件编辑前	Function/null	否		回调函数
EVENT_CONTROL_EDIT_AFTER	控件编辑后	Function/null	否		回调函数
EVENT_STAGE_CHANGE_WPV	移动视窗	Function/null	否		回调函数
EVENT_STAGE_CHANGE_RATIO	全局缩放	Function/null	否		回调函数

方法

addFile

添加文件到列表中,默认添加到最后面

参数

参数名	类型	范围	默认值	备注
file	DDeiFile			文件
index	number			位置下标

返回值

无

removeFile

移除文件，可以传入文件或下标

参数

参数名	类型	范围	默认值	备注
file	DDeiFile			文件
index	number			位置下标

返回值

无

changeFile

交换文件

参数

参数名	类型	范围	默认值	备注
indexA	number			位置下标1
indexB	number			位置下标2

返回值

无

addControls

向当前画布添加控件,缺省坐标为当前画布的中心

参数

参数名	类型	备注
controls	object[]	控件配置数组
controls[n].id	string	ID，画布唯一
controls[n].model	string	控件定义编号
controls[n].code	string	编码，一般用于业务
controls[n].width	number	初始化宽度
controls[n].height	number	初始化高度
controls[n].text	string	文本
controls[n].offsetX	number	初始偏移位置x，以中心为0，0
controls[n].offsetY	number	初始偏移位置y，以中心为0，0

返回值

无

removeControls

根据ID删除控件

参数

参数名	类型	范围	默认值	备注
ids	string[]			ID数组

返回值

无

getControlById

根据ID获取控件

参数

参数名	类型	范围	默认值	备注
id	string			ID

返回值

类型	备注
DDeiAbstractShape	控件实例模型

changeTheme

设置主题

参数

参数名	类型	范围	默认值	说明
themeName	string			主题名称

返回值

无

changeStyle

修改样式

参数

参数名	类型	范围	默认值	说明
name	string			主题名称
obj	object			K-V样式对象

返回值

无

changeEditMode

修改当前编辑模式

参数

参数名	类型	范围	默认值	说明
mode	number	1指针/2手/3文本创建/4线创建	1	模式

返回值

无

setEditable

设置是否可以编辑

参数

参数名	类型	范围	默认值	说明
editable	boolean			true可编辑/false不可编辑

返回值

无

setAccessInfo

设置权限信息

参数

参数名	类型	范围	说明
config	object		权限配置,K-V数据
config.key	string	CREATE/EDIT/DRAG/SELECT/LINK/DEL
config.value	boolean		true有权限/false无权限

返回值

无

changeState

修改编辑器状态

参数

参数名	类型	范围	默认值	说明
state	DDeiEditorState			状态

返回值

无

notifyChange

通知改变，刷新画布

参数

无

返回值

无

示例

代码

vue

<script setup lang="ts">
import DDeiEditorView from "ddei-editor";
import {DDeiEditor,DDeiCoreStandLayout,DDeiAbstractShape} from "ddei-editor";
import { defineComponent, markRaw,getCurrentInstance } from "vue";
//获取主对象实例，代替this获取$refs
const {proxy} = getCurrentInstance()

const options = markRaw({
  config: { 
    "background": { color: "blue", opacity: 0.1 }, //背景色
  },
  //配置扩展插件
  extensions: [
    //布局的配置
    DDeiCoreStandLayout.configuration({
      //配置插件
      'top': [],
      'middle': ['ddei-core-panel-canvasview'],
      'bottom': [],
      'left': [],
      'right': []
    }),
  ],
})
const createControl = () => {
  //获取编辑器 
  let editor = proxy.$refs["ddei_editor_api_1"].editor;
  let editor1 = DDeiEditor.INSTANCE_POOL.get("ddei_editor_api_1")
  //添加控件
  editor.addControls([
        {
          id:"control_1",
          model: "102010",
          text: "新图形"
        },
      ]);
};
const removeControl = () => {
  //获取编辑器 
  let editor = proxy.$refs["ddei_editor_api_1"].editor;
  //添加控件
  editor1.removeControls(["control_1"]);
};
const changeControlText = () => {
  //获取编辑器 
  let editor = proxy.$refs["ddei_editor_api_1"].editor;
  //添加控件
  let model:DDeiAbstractShape = editor.getControlById("control_1");
  model.text += "-改"
  model.notifyChange()
};
const changeEditable = () => {
  this.editable = !this.editable
  //获取编辑器 
  let editor = proxy.$refs["ddei_editor_api_1"].editor;
  editor.setEditable(this.editable)
};
</script>

<template>

<button @click="createControl" style="border:1px solid grey;margin-left:5px;padding:5px">创建控件</button>
<button @click="removeControl" style="border:1px solid grey;margin-left:5px;padding:5px">删除控件</button>
<button @click="changeControlText" style="border:1px solid grey;margin-left:5px;padding:5px">修改文本</button>
<button @click="changeEditable" style="border:1px solid grey;margin-left:5px;padding:5px">锁定/解锁</button>

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

效果预览

DDeiEditor ​

属性 ​

方法 ​

示例 ​

技术支持 ​

DDeiEditor

属性

方法

示例

技术支持