demo地址:http://62.234.69.136/ G6文档 https://www.yuque.com/antv/g6
这个是个基于阿里G6制作的modelFlow组件 g6版本为3.0,UI部分用了elementUI。 由于公司需要,需要一个模型流程图编辑器,本来g6-editor是个不错的选择,但是调研之后发现 g6-editor不开源,不得商用。嗝屁,只能自己尝试着用g6实现一个editor。代码写的比较丑,仅做参考使用,不喜勿喷~。
vue+g6 3.0实现的editor 由于g6-editor不开源 自己撸了一个
License: MIT License
demo地址:http://62.234.69.136/ G6文档 https://www.yuque.com/antv/g6
这个是个基于阿里G6制作的modelFlow组件 g6版本为3.0,UI部分用了elementUI。 由于公司需要,需要一个模型流程图编辑器,本来g6-editor是个不错的选择,但是调研之后发现 g6-editor不开源,不得商用。嗝屁,只能自己尝试着用g6实现一个editor。代码写的比较丑,仅做参考使用,不喜勿喷~。
You may need an appropriate loader to handle this file type.
fromMatrix: Util.clone(self.getMatrix()),
toMatrix: formatProps.matrix,
...animator
};
}
点中节点,在右侧出现节点属性框,修改名称(光标回退)节点会自动消失
我在使用基于 G6 和 Vue 的可视化图形编辑器时遇到以下问题。有谁能帮助解答一下。问题如下:
1、从左侧工具栏中拖拉图形元素到画布中,拖拉过程中有时可以成功添加,有时对象会丢失,无法成功添加图元;
2、鼠标拖拽图形元素移动时,有时图形元素会消失不见;
3、鼠标选中画布中的图形元素,可看到缩放锚点,但是无法拖拉移动。
当鼠标进入节点, 并悬浮在outPoint上时, 会设置填充色, 但是当鼠标离开outPoint,但是没有离开Node时, 填充色没有被取消, 这是一个小小问题.
自定义行为中:
behavior/hover-node.js 里面做如下修改就可以了
if (e.target.attrs.isOutPointOut || e.target.attrs.isOutPoint) {
...
} else {
// 如果鼠标悬浮在node上, 但目标不是out点, 移除点的填充色
group.find(g => {
if (g.attrs.isInPoint || g.attrs.isOutPoint) {
g.attr('fill', '#fff')
}
})
}
老哥,我想请教一个问题,连接俩个图形的时候,如何记录下起始节点和结束节点的属性。我在您的文件上面拓展加了一个node:mousedown,事件不生效;问件是src/behavior/add-edge里面
想问一下为什么有的连线是虚线,有的是实线?什么情况下是虚线呢?
你好,请问下this.graph.save()返回的数据保存后,怎么渲染到页面上
先把项目的package-lock.json删了
然后改package.json
"dependencies": {
"@antv/g": "3.4.6",
"@antv/g6": "3.0.5-beta.9",
改成这样,npm install npm run dev
画布拖拽插件,可以一直往一个方向拖,不会停,看了官方文档,也没有找到方向,求大佬指点
话说没有api么
最近的项目里有使用到,想参考大佬的思路,哈哈哈
纯自定义边上面加文本需要自己addShape(“text”)实现,具体可以参考g6源码实现 你也可以尝试使用g6自带的edge 支持label 或者继承g6的边来实现
Originally posted by @caoyu48 in #2 (comment)
npm i 的时候
文档:Dprojvueeditorvue-g6-editornpm insta...
链接:http://note.youdao.com/noteshare?id=1df42113544224ded2fa363b9d28b364&sub=BD9206DB64134561ACF6F41ED72B90DA
D:\proj\vue\editor\vue-g6-editor>npm install --save @antv/g6
npm ERR! code EINTEGRITY
npm ERR! sha1-60MZjF4vuDuTI6vuY72Hg2+afIU= integrity checksum failed when using sha1: wanted sha1-60MZjF4vuDuTI6vuY72Hg2+afIU= but got sha512-mwq
eW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA== sha1-stEE/g2Psnz54KHNqCYt04M8bKs=. (5537 bytes)
npm ERR! A complete log of this run can be found in:
npm ERR! D:\npm\cache_logs\2023-01-20T11_26_48_127Z-debug.log
...
ract [email protected] extracted to D:\proj\vue\editor\vue-g6-editor\node_modules.staging\string-width-d7c0f901 (141ms)
12412 silly extract [email protected] extracted to D:\proj\vue\editor\vue-g6-editor\node_modules.staging\wrap-ansi-2bf1172f (141ms)
12413 silly extract [email protected]
12414 silly tarball trying [email protected] by hash: sha1-otTg1PTxFvHmKX66WLBdQwEA6fk=
12415 silly tarball trying [email protected] by hash: sha1-XS/yKXcAPsaHpLhwc9+7rBRszyk=
12416 http fetch GET 200 https://cdn.npmmirror.com/packages/webpack-dev-server/3.8.0/webpack-dev-server-3.8.0.tgz 879ms
12417 verbose stack Error: sha1-60MZjF4vuDuTI6vuY72Hg2+afIU= integrity checksum failed when using sha1: wanted sha1-60MZjF4vuDuTI6vuY72Hg2+afIU= but got sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA== sha1-stEE/g2Psnz54KHNqCYt04M8bKs=. (5537 bytes)
12417 verbose stack at Transform. (D:\env\node14\node-v14.19.3-win-x64\node_modules\npm\node_modules\ssri\index.js:328:19)
12417 verbose stack at Transform.emit (events.js:412:35)
12417 verbose stack at endReadableNT (internal/streams/readable.js:1333:12)
12417 verbose stack at processTicksAndRejections (internal/process/task_queues.js:82:21)
12418 verbose cwd D:\proj\vue\editor\vue-g6-editor
12419 verbose Windows_NT 10.0.22000
12420 verbose argv "D:\env\node14\node-v14.19.3-win-x64\node.exe" "D:\env\node14\node-v14.19.3-win-x64\node_modules\npm\bin\npm-cli.js" "install" "--save" "@antv/g6"
12421 verbose node v14.19.3
12422 verbose npm v6.14.17
12423 error code EINTEGRITY
12424 error sha1-60MZjF4vuDuTI6vuY72Hg2+afIU= integrity checksum failed when using sha1: wanted sha1-60MZjF4vuDuTI6vuY72Hg2+afIU= but got sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA== sha1-stEE/g2Psnz54KHNqCYt04M8bKs=. (5537 bytes)
12425 verbose exit [ 1, true ]
比如更新group部分。
我看在npm上好像有部分进行更新了,github上可以同步吗?
大佬锚点是不是代码控制了啊,现在只有上下锚点,左右锚点设置咋不成功呢
UC浏览器和火狐浏览器不兼容,无法实现拖拽和连线,作者有解决方案吗
很多配置参数设置无效 比如grid 网格 , inPoints outPoints 连接点官网也没找到相关参数
该项目中尝试使用布局,但是设置了不起作用,请问博主有试过吗?
两个节点如果有连线,再连的话,表现上正常,打印出来的数据不对
To install them, you can run: npm install --save @antv/g/src/shapes @antv/g6/build/g6 @antv/g6/build/grid @antv/g6/build/minimap @antv/g6/src/util
怎么把连接线改成折线的啊?怎么在四边都设置锚点啊,现在只有顶部跟底部才有锚点
触摸板双指放大画布却是缩小,双指缩小画布却是放大,鼠标滚轮放大缩小也有同样问题,请问这是在哪监听的?
+1
To install them, you can run: npm install --save @antv/g/src/shapes @antv/g6/build/g6 @antv/g6/build/grid @antv/g6/build/minimap @antv/g6/src/util
+1,Me Too 什么原因啊,node版本?
Originally posted by @front-end-fan in #11 (comment)
不要使用cnpm下载依赖,使用npm下载就行了
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.