Vue中实现在线画流程图实现

概述

最近在调研一些在线文档的实现,包括文档编辑器、在线思维导图、在线流程图等,前面的文章基于语雀编辑器的在线文档编辑与查看实现了文档编辑器。在本文,分享在Vue框架下基于metaeditor-mxgraph实现在线流程图。

实现效果

image.png

实现

1. 添加依赖

{"metaeditor-mxgraph": "^2.0.7"
}

2. 编辑器简介

metaeditor-mxgraph,图元编辑器,支持独立的流程图编辑器,以及 DrawIO 嵌入方案。文档地址为:https://npm.io/package/metaeditor-mxgraph。

3. 编辑器实现

<template><div class="flow-chart" ref="flowChart"></div>
</template><script>
import 'metaeditor-mxgraph/assets/index.scss'
import { MetaEditor } from 'metaeditor-mxgraph'
const { MetaGraphEditor, getLanguage, stringToXml, xmlToString } = MetaEditorexport default {props: {chartData: {type: Object,default: () => null,},},mounted() {this.$nextTick(() => {this.init()})},watch: {chartData() {this.init()},},unmounted() {this.destroy()},methods: {destroy() {if (window.metaGraphEditor) window.metaGraphEditor.destroy()window.metaGraphEditor = null},init() {this.destroy()const xml = stringToXml(this.chartData || '<mxGraphModel></mxGraphModel>')const dom = this.$refs.flowChartconst metaGraphEditor = new MetaGraphEditor({container: dom,})const lan = getLanguage('zh')metaGraphEditor.init(lan, xml)window.metaGraphEditor = metaGraphEditor},},
}
</script><style scoped lang="scss">
.flow-chart {width: 100%;height: 100%;
}
</style>

需要注意的是,编辑器默认是绝对定位的,想要跟随设定dom大小,需要设置其样式为:

 .metagraph-container {position: relative;width: 100%;height: 100%;user-select: none;
}

设置完样式后,菜单的位置会出错,这个还没修复,使用时请注意。

4. 文档预览

<template><div class="flow-chart" ref="flowChart"></div>
</template><script>
import 'metaeditor-mxgraph/assets/index.scss'
import { MetaEditor } from 'metaeditor-mxgraph'
const { MetaGraphViewer, stringToXml} = MetaEditorexport default {props: {chartData: {type: Object,default: () => null,},},mounted() {this.$nextTick(() => {this.init()})},watch: {chartData() {this.init()},},methods: {init() {const xml = stringToXml(this.chartData || '<mxGraphModel></mxGraphModel>')const dom = this.$refs.flowChartconst metaGraphEditor = new MetaGraphViewer({xml: xml,})const { offsetWidth, offsetHeight } = domconst svg = metaGraphEditor.renderSVGDom(null, 1, 1, {width: offsetWidth,height: offsetHeight,})dom.appendChild(svg)},},
}
</script><style scoped lang="scss">
.flow-chart {width: 100%;height: 100%;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/375176.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python酷库之旅-第三方库Pandas(017)

目录 一、用法精讲 41、pandas.melt函数 41-1、语法 41-2、参数 41-3、功能 41-4、返回值 41-5、说明 41-5-1、宽格式数据(Wide Format) 41-5-2、长格式数据(Long Format) 41-6、用法 41-6-1、数据准备 41-6-2、代码示例 41-6-3、结果输出 42、pandas.pivot函数 …

休息时间c++

题目描述 小杨计划在某个时刻开始学习&#xff0c;并决定在学习k秒后开始休息。 小杨想知道自己开始休息的时刻是多少。 输入 前三行每行包含一个整数&#xff0c;分别表示小杨开始学习时刻的时h、分m、秒s(h&#xff0c;m&#xff0c;s的值符合1≤h≤12,0≤m≤59,0≤s≤59)…

SpringBoot新手快速入门系列教程七:基于一个低配centoos服务器,如何通过宝塔面板部署一个SpringBoot项目

1&#xff0c;如何打包一个项目 通过IDEA自带的命令行&#xff0c;执行 ./gradlew clean build 2&#xff0c;检查生成的JAR文件 进入 build/libs 目录&#xff0c;你应该会看到一个类似 helloredis-0.0.1-SNAPSHOT.jar 的文件。 3&#xff1a;运行生成的JAR文件 你可以在…

JupyterNotebook中导出当前环境,并存储为requirements.txt

​使用Anaconda管理Python环境时&#xff0c;可以轻松地导出环境配置&#xff0c;以便在其他机器或环境中重新创建相同的环境。可以通过生成一个environment.yml文件实现的&#xff0c;该文件包含了环境中安装的所有包及其版本。但是&#xff0c;常常在一些课程中JupyterNotebo…

韦东山嵌入式linux系列-LED驱动程序

之前学习STM32F103C8T6的时候&#xff0c;学习过对应GPIO的输出&#xff1a; 操作STM32的GPIO需要3个步骤&#xff1a; 使用RCC开启GPIO的时钟、使用GPIO_Init函数初始化GPIO、使用输入/输出函数控制GPIO口。 【STM32】GPIO输出-CSDN博客 这里再看看STM32MP157的GPIO引脚使用…

逻辑回归中的损失函数

目录 一、损失函数介绍&#xff1a;二、简化上述损失函数&#xff1a; 一、损失函数介绍&#xff1a; 与回归问题成本函数不同的是&#xff0c;逻辑回归模型&#xff08;解决分类问题&#xff09;的成本函数在获得损失J的时候不再用真实值y与预测值y^的差值计算损失&#xff0…

Python面试宝典第11题:最长连续序列

题目 给定一个未排序的整数数组 nums &#xff0c;找出数字连续的最长序列&#xff08;不要求序列元素在原数组中连续&#xff09;的长度。请你设计并实现时间复杂度为 O(n) 的算法解决此问题。 示例 1&#xff1a; 输入&#xff1a;nums [100,4,200,1,3,2] 输出&#xff1a;…

STM32智能电网监控系统教程

目录 引言环境准备智能电网监控系统基础代码实现&#xff1a;实现智能电网监控系统 4.1 数据采集模块 4.2 数据处理与分析 4.3 通信与网络系统实现 4.4 用户界面与数据可视化应用场景&#xff1a;电网监控与优化问题解决方案与优化收尾与总结 1. 引言 智能电网监控系统通过S…

学习网络的第一步:全面解析OSI与TCP/IP模型

我是小米,一个喜欢分享技术的29岁程序员。如果你喜欢我的文章,欢迎关注我的微信公众号“软件求生”,获取更多技术干货! Hello,大家好!我是你们的好朋友小米。今天我们来聊一聊网络基础知识中的重量级选手——OSI模型和TCP/IP模型!网络的世界就像一个巨大的迷宫,而这两个…

肯尼亚PVoC认证

一、肯尼亚PVoC认证介绍 为了向肯尼亚消费者保证&#xff0c;他们购买的进口商品的安全和质量&#xff0c;并保护肯尼亚制造商免受不公平竞争&#xff0c;肯尼亚标准局&#xff08;KEBS&#xff09;是肯尼亚政府的一个法定机构&#xff0c;实施了“出口肯尼亚出口验证&#xff…

【源码开源】C#桌面应用开发:串口调试助手

c#桌面应用开发 1、环境搭建和工程创建&#xff1a;参照番茄定时器项目 工程创建参照 2、界面布局设计 3、具体功能函数 &#xff08;1&#xff09;端口扫描&#xff1a; private void btn_com_scan_Click(object sender, EventArgs e){//端口号扫描ReflashPortToComboBox(…

赤壁之战的烽火台 - 观察者模式

“当烽火连三月&#xff0c;家书抵万金&#xff1b;设计模式得其法&#xff0c;千军如一心。” 在波澜壮阔的三国历史长河中&#xff0c;赤壁之战无疑是一场改变乾坤的重要战役。而在这场战役中&#xff0c;一个看似简单却至关重要的系统发挥了巨大作用——烽火台。这个古老的…

基于ssm的图书管理系统的设计与实现

摘 要 在当今信息技术日新月异的时代背景下&#xff0c;图书管理领域正经历着深刻的变革&#xff0c;传统的管理模式已难以适应现代社会的快节奏和高要求&#xff0c;逐渐向数字化、智能化的方向演进。本论文聚焦于这一转变趋势&#xff0c;致力于设计并成功实现一个基于 SSM&…

在HTTP协议中常见的Token类型

在HTTP协议中&#xff0c;常见的Token类型主要有以下几种&#xff1a; Bearer Token&#xff1a;最常见的类型&#xff0c;用于OAuth 2.0认证&#xff0c;通过Authorization头传递&#xff0c;格式为Bearer <token>。更多请阅读&#xff1a;JWK和JWT 学习-CSDN博客 Basi…

【数据结构】09.树与二叉树

一、树的概念与结构 1.1 树的概念 树是一种非线性的数据结构&#xff0c;它是由n&#xff08;n>0&#xff09;个有限结点组成一个具有层次关系的集合。把它叫做树是因为它看起来像一棵倒挂的树&#xff0c;也就是说它是根朝上&#xff0c;而叶朝下的。 根结点&#xff1a;根…

应变与几何方程——弹性力学

变形协调方程 正应变的表达式&#xff1a;切应变的表达&#xff1a; 考虑坐标位移移动造成的增量 应变——考虑物体的变形的剧烈程度 正应变——微元线段长度的变化 剪应变——两微元所夹角度的变化 正应变——拉伸为正&#xff0c;压缩为负 剪应变——夹角减小为正&#x…

删除有序数组中的重复项

26. 删除有序数组中的重复项 - 力扣&#xff08;LeetCode&#xff09; 快慢指针&#xff0c;慢的指针去追赶快的指针&#xff0c;相等时也就是追到时&#xff0c;快指针移动向前 class Solution { public:int removeDuplicates(vector<int>& nums) {int s 1, q 1;i…

sql盲注

文章目录 布尔盲注时间盲注 布尔盲注 介绍&#xff1a;在网页只给你两种回显的时候是用&#xff0c;类似于布尔类型的数据&#xff0c;1表示正确&#xff0c;0表示错误。 特点&#xff1a;思路简单&#xff0c;步骤繁琐且麻烦。 核心函数&#xff1a; length()函数substr()函…

物流智能锁在物流货运智能锁控管理中的应用

一、物流锁控管理的痛点剖析 &#xff08;一&#xff09;货物安全风险高 在传统的物流运输中&#xff0c;常用的机械锁和普通电子锁安全性有限&#xff0c;容易被非法破解或撬开。据不完全统计&#xff0c;每年因货物被盗造成的经济损失高达数十亿。这导致货物在运输途中面临…

前端Canvas入门——怎么用Canvas画一些简单的图案

Canvas作为前端的画图工具&#xff0c;其实用途还是蛮广泛的&#xff0c;但是很多前端学习课程其实都很少涉及到这块内容。 于是乎&#xff0c;就写下这个了。 当然啦&#xff0c;目前还在学习摸索中。 一些实战代码&#xff0c;仅供参考&#xff1a; <canvasid"ctx&…