基于乐吾乐meta2d从零实现可视化流程图编辑器（二）主界面布局及其初始化
概要
可视化编辑器已成为前端发展趋势，相关产品层出不穷，但是用户较难根据自身需求去完整实现一个功能较为全面的可视化编辑器，我将采用乐吾乐开源的meta2d.js可视化库来实现一个简单的流程图编辑器，通过这个案例来介绍meta2d的相关功能，并向读者展示如何用meta2d从零出发搭建一个较为完整的项目，让我们在实际项目中来体验meta2d的强大之处吧。
什么是乐吾乐meta2d.js
meta2d是乐吾乐开源的2D图元组成的可视化引擎，集实时数据展示、动态交互、数据管理等一体的全功能2D可视化引擎。能够快速实现数字孪生、大屏可视化、Web组态、SCADA等解决方案。具有实时监控、多样、变化、动态交互、高效、可扩展、支持自动算法、跨平台等特点，最大程度减少研发和运维的成本，并致力于普通业务人员 0 代码开发实现物联网、工业互联网、电力能源、水利工程、智慧农业、智慧医疗、智慧城市等可视化解决方案。
乐吾乐已将其meta2d核心库完全免费开源，本系列教程就是基于meta2d从零实现web端可视化流程图编辑器。
乐吾乐 meta2d开源项目地址：github.com/le5le-com/m…
乐吾乐 meta2d官方文档：doc.le5le.com/document/11…
项目地址
往期教程
2.主界面布局及其初始化
在上一章中，我们完成了项目的基础环境搭建，在本章中，将继续完成项目的主界面布局，引入meta2d核心库，并且实现主界面部分组件的基本功能。
界面布局
根据实际需求，整个界面分为四个部分。如图所示
布局方式为 整个界面分为上下两部分，上部分用于承载Nav组件，下部分用于承载其余三个组件，下部分的布局在这里采用flex布局，将两边组件宽度固定，中间组件设置宽度100%即可 。
Nav组件UI实现
Nav部分主要为用户提供流程图编辑的一些操作配置项，包括但不限于文件操作、打开meta2d原生提供的放大镜、缩略图等，可以基于不同的业务场景做灵活的适配，结合目前需求，我们暂时在Nav部分设置文件的新建、保存、打开功能以及meta2d原生提供的放大镜、缩略图、钢笔、铅笔四个功能，在本章也重点讲解这些功能实现
首先我们选择ElementPlus提供的Menu组件，基于开放封闭原则，将界面需要用到的功能按钮逻辑抽取出来，单独放在一个配置文件中，在这里命名为defaultConfig.js，在components文件夹下defaultConfig.js文件，配置相关按钮名称及其属性，编写相关回调函数（预留，后面每个功能详细讲解）如下图：
// Nav.vue
<template>
<el-menu
class="el-menu-demo"
mode="horizontal"
:ellipsis="false"
index:1
>
<div v-for="(item,index) in menu.left">
<el-sub-menu v-if="item.children" :index="(index+1)+''">
<template #title>{{item.name}}</template>
<el-menu-item v-for="(c,i) in item.children" :index="`${index+1}-${i+1}`" @click="dispatchFunc(c.action)">{{ c.name }}</el-menu-item>
</el-sub-menu>
<el-menu-item v-else @click="dispatchFunc(item.action)" :index="index+1+''">{{ item.name }}</el-menu-item>
</div>
</el-menu>
</template>
<script lang="ts" setup>
import {menu,dispatchFunc} from "./defalutsConfig"
</script>
defaultConfig配置如下
//defaultConfig.js
export const menu = {
left:[
{
key:"file",
name:"文件",
icon: "",
children:[
{
name:"新建文件",
action: "newFile"
},
{
name:"打开文件",
action: "openFile"
},
{
name:"导入文件",
action: "loadFile"
}
]
},
{
key:"save",
name:"保存",
icon:"",
action:"saveFile"
},
{
key:"magnifier",
name:"放大镜",
icon:"",
action: "openMagnifier"
},
{
key:"map",
name:"缩略图",
icon:"",
action:"openMap"
},
{
key:"pen",
name:"钢笔",
icon:"",
action: "usePen"
},
{
key:"pencil",
name:"铅笔",
icon:"",
action: "usePencil"
}
]
}
// 分发执行事件函数
export function dispatchFunc(act){
// doSomething before
menuFunc[act]()
}
const menuFunc = {
newFile(){},
openFile(){},
loadFile(){},
saveFile(){},
openMagnifier(){},
openMap(){},
usePen(){},
usePencil(){}
}
这样，在后期项目迭代只需要更改这个menu对象再配置回调函数即可
其ui界面也可以根据自己喜好参考ElementPlus官网查看配置项或定制自己的样式。
Icons组件UI实现
Icons组件主要负责整个项目的图标部分，为用户提供可选的图标列表，幸运的是，乐吾乐在开发meta2d核心库的同时，也配套开发了丰富的图形库，不仅支持多种自创图形库，也兼容支持了Echarts、HightCharts、LightningChart主流开源可视化图形库，同时支持多种表单控件、表格控件、乐吾乐自研图标等，另外对SVG图标、字体图形也做了相关兼容处理，若所涉及图形库都不能满足用户实际需求，则还可以通过自定义图形方法设计自己的图形库，详情参考官方文档。
介绍完meta2d强大的图形库生态后，我们先进行Icons组件的UI搭建，由于实际需求中需要将图表分类，在UI上我们选择折叠面板来实现。具体代码如下
// Icons.vue
<script setup>
import { icons as iconData } from "../data/icons.js";
import { Search } from "@element-plus/icons-vue";
import { ref } from "vue";
const activeNames = ref(1);
const inputValue = ref("");
function dragPen(data, e) {
const json = JSON.stringify(data);
e.dataTransfer.setData("meta2d", json);
}
</script>
<template>
<div class="icons">
<div class="icon_search">
<el-input
v-model="inputValue"
size="small"
placeholder="搜索图元"
:prefix-icon="Search"
/>
</div>
<div class="icon_list">
<el-collapse v-model="activeNames">
<el-collapse-item title="基本图元" name="1">
<div class="icon_container">
<div
class="icon_item"
v-for="(item, index) in iconData"
draggable="true"
@dragstart="dragPen(item.data, $event)"
:index="index"
>
{{ item.title }}
</div>
</div>
</el-collapse-item>
</el-collapse>
</div>
<div class="icon_manage">
<el-button> 管理图元 </el-button>
</div>
</div>
</template>
<style scoped>
.icons {
width: 300px;
display: flex;
height: 100%;
flex-direction: column;
justify-content: space-between;
}
.icon_search {
height: 50px;
display: flex;
justify-content: center;
align-items: center;
padding: 0 10px;
}
.icon_list {
padding: 5px 0px;
overflow: auto;
flex: 1;
}
.W-10 {
width: 100px;
}
.icon_manage {
border-top: 1px solid #eee;
display: flex;
padding: 16px 0;
justify-content: center;
align-items: center;
}
.icon_container {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
align-content: center;
}
.icon_item {
padding: 5px;
cursor: pointer;
}
.icon_list::-webkit-scrollbar {
/*滚动条整体样式*/
width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
.icon_list::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 10px;
height: 20px;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #4e4e4e;
}
.icon_list::-webkit-scrollbar-track {
/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 10px;
background: #ffffff;
}
</style>
我们所需图元组件都从iconData中获取，具体图元组件的注册等操作，我们放在后面再讲，这里只实现UI。为了显示UI的美观性，在这里在iconData中插入了一条假数据，UI界面如图所示：
Meta2d组件UI实现
Meta2d组件是整个项目的核心组件，是meta2d可视化库的栖息地，所有交互设计操作都在这个组件中进行，在Meta2d组件中，我们不需要额外的设置样式，只需要将其宽度设为100%以至于让其更好地自适应屏幕，然后在组件中导入初始化meta2d对象即可，对象会自动根据所传id进行占位并初始化相关内容。 详细代码如下：
// Meta2d.vue
<script setup>
import { Meta2d } from "@meta2d/core";
import { onMounted } from "vue";
onMounted(() => {
let meta2d = new Meta2d("meta2d");
window.meta2d = meta2d; // 挂载到全局对象上
});
</script>
<template>
<!-- meta2d图纸所站位置-->
<div id="meta2d"></div>
</template>
<style scoped>
#meta2d {
height: 100%;
width: 100%;
overflow: hidden;
background-color: #eee;
}
</style>
最终效果如“界面布局”部分的展示图一样。
Setting组件UI实现
Setting组件是图元相关属性信息的设置与展示的，由于该部分涉及到与meta2d图纸的数据交互和相关事件等，较为复杂，目前我们只给好基本的UI布局，详细内容在后面章节进行讲解。 完成基本布局：
<script setup>
</script>
<template>
<div class="setting">setting</div>
</template>
<style scoped>
.setting {
width: 320px;
display: flex;
height: 100%;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 2px 4px 0 #dad7d7;
}
</style>
SettingUI暂且如下
UI暂且如上，后面教程同步跟进配置
总结
在本章中 我们进行了项目界面的基本布局。主要采用flex布局进行自适应屏幕，同时介绍了四个组件的基本组成和UI实现，整体较为简单，在下一章，我们将从meta2d核心库的核心流程原理，讲解四个部分如何进行交互以及各个部分的基本功能。
Meta2d.js 开源地址
给大家推荐一下 Meta2d.js是一个实时数据响应和交互的2d引擎，可用于Web组态，物联网，数字孪生等场景。
Github：github.com/le5le-com/m…
Gitee: gitee.com/le5le/meta2…
如果本篇文章帮助到了你，欢迎为meta2d项目star点星。