DDei在线设计器-加载数据

最新推荐文章于 2024-10-16 17:24:30 发布

hoslay757

最新推荐文章于 2024-10-16 17:24:30 发布

阅读量212

点赞数 8

分类专栏： DDei 文章标签：编辑器前端 vue 流程图 uml

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

版权

DDei 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

加载数据

本示例演示了怎样加载已有的JSON到设计器中。

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

外部数据JSON

demo.vue

<script setup lang="ts">
import DDeiEditorView from "ddei-editor";
import { DDeiCoreStandLayout } from "ddei-editor";
import { ref,getCurrentInstance } from "vue"; // [!code ++:4]
import {DDeiEditor,DDeiFile} from "ddei-editor";
//获取主对象实例，代替this获取$refs
const {proxy} = getCurrentInstance()

const options = {
  config: { 
    "grid": 0, //网格线 // [!code --]
    "background": { color: "blue", opacity: 0.1 }, //背景色 // [!code --]
    "background": -1, //无背景 // [!code ++]
    initData: { // [!code --:8]
      controls: [
        {
          model: "102010",
          text: "初始化图形"
        },
      ]
    }
  },
  //配置扩展插件
  extensions: [
    //布局的配置
    DDeiCoreStandLayout.configuration({
      //配置插件
      'top': [],
      'middle': ['ddei-core-panel-canvasview', 'ddei-core-panel-quickcolorview'],
      'bottom': [],
      'left': [],
      'right': []
    }),
  ],
}
//初始化json数据 // [!code ++:4]
const jsontext = ref(`
    {"name":"新建文件_NEW","desc":"","extData":{},"state":2,"publish":"0","lastUpdateTime":1721809587831,"path":"/新建文件_NEW","sheets":[{"name":"页面-1","desc":"页面-1","stage":{"id":"stage_1","layers":[{"id":"layer_default","name":"图层","models":{"task_1":{"id":"task_1","modelCode":"102010","modelType":"DDeiPolygon","cpv":{"x":148.5,"y":105,"z":1},"hpv":[{"x":148.5,"y":105,"z":1},{"x":174.95833333333334,"y":105,"z":1}],"exPvs":{},"poly":2,"mirrorX":false,"mirrorY":false,"sptStyle":{},"text":"加载图形","bpv":{"x":177.60416666666669,"y":123.52083333333333,"z":1},"model":"102010"}},"midList":["task_1"],"modelType":"DDeiLayer","baseModelType":"DDeiLayer","index":-1,"background":null,"display":1,"lock":false,"print":true,"centerOpPoints":[],"modelCode":"DDeiLayer","modelChanged":true,"modelNumber":1}],"layerIndex":0,"idIdx":1,"modelType":"DDeiStage","ratio":1,"width":2245.0393700787404,"height":1587.4015748031497,"wpv":{"x":-778.5196850393702,"y":-496.20078740157487,"z":0},"links":[],"spv":{"x":561.2598425196851,"y":396.85039370078744,"z":1},"modelCode":"DDeiStage","drawing":true,"unit":"mm"},"active":1,"modelType":"DDeiSheet","unicode":"10be3e690ac86f84a0de69fa49247019"}],"currentSheetIndex":0,"modelType":"DDeiFile","modelNumber":1,"unicode":"7f7864f482a9623988489f9c1621f93f","ddeiVersion":1239}
`)

const loadDataToEditor = () => { // [!code ++:9]
  //获取编辑器实例
  let editor:DDeiEditor = proxy.$refs["ddei_editor_1"].editor;
  //获取文件json
  let fileJSON = JSON.parse(jsontext.value)
  //加载json到编辑器
  editor.loadData(fileJSON)
};


</script>

<template>
  <div style="width:400px;height:400px;margin:100px auto;">
    <textarea v-model="jsontext" style="border:1px solid grey;margin-left:5px;padding:5px;width:100%;height:100%"></textarea>
      <button @click="loadDataToEditor" style="border:1px solid grey;margin-left:5px;margin-top:20px;padding:5px">加载数据</button>
  </div>
  <div style="width:400px;height:400px;margin:100px auto;">
    <DDeiEditorView :options="options" ref="ddei_editor_1"  id="ddei_editor_1"></DDeiEditorView>
  </div>
</template>

效果截图

在这里插入图片描述