Comments (18)
@ChrisShen93 最近注意到GGEditor新版本已经移除了 gg-editor-core这个包的依赖 我在尝试看这个包的压缩文件 看看是否能找到问题o(╥﹏╥)o
from vgeditor.
@Estelle00 这种不可修改的需求点的目的是什么呢?只要没有将数据保存到服务端,下次打开依然是原图,不会对业务有影响。。。
当前本身没有提供这个功能,提供两个思路:
- 利用 onAfterCommandExecute进行位置的重置;
- 可以考虑在图层上方覆盖一个透明的蒙板,使得用户不可选择到图形元素,间接的达到不可修改的目的
另:等vue 3发布beta之后我会考虑用 vue 3 和 g6 v3 重构,届时会考虑将这个作为一个需求点。
from vgeditor.
@ChrisShen93
目前使用mode: "readOnly"设置 但是点击node节点等事件也被全部禁用了...
因为我想把生成的图表给别人看
但别人只能查看可以点击不能拖拽和修改流程里面的内容等
from vgeditor.
@Estelle00 我刚刚本地试了一下,readOnly模式下点击实践可以正常触发呀
version: 2.7.0
可否提供一下你使用的 VGEditor 和 vue 的版本,以及一份可供复现的代码片段?
from vgeditor.
vue2.6.10版本的
本来想写一个demo的 但是发现vue-cli4.0与这个组件有冲突.
from vgeditor.
@Estelle00 建议升级到 2.7.0 哈
功能是一样的,然后2.6.x里其实是有一些bug的
然后你说的冲突是什么?vue的版本么?
from vgeditor.
"vg-editor": "^2.7.0",
"vue": "^2.6.10"
<template>
<v-g-editor>
<flow :data="data" :graph="graph" :onNodeClick="handleNodeClick"></flow>
</v-g-editor>
</template>
<script>
import VGEditor, { Flow } from "vg-editor";
export default {
components: {
VGEditor,
Flow
},
data() {
return {
data: {
'nodes': [{
'type': 'node',
'size': '72*72',
'shape': 'flow-circle',
'color': '#FA8C16',
'label': 'Start',
'x': 468,
'y': 61,
'id': '01729835',
'index': 0
}, {
'type': 'node',
'size': '80*48',
'shape': 'flow-rect',
'color': '#1890FF',
'label': 'Normal',
'x': 468,
'y': 201.5,
'id': 'b69121d6',
'index': 1
}, {
'type': 'node',
'size': '80*72',
'shape': 'flow-rhombus',
'color': '#13C2C2',
'label': 'Decision',
'x': 468,
'y': 339.5,
'id': 'a459eb24',
'index': 2
}, {
'type': 'node',
'size': '80*48',
'shape': 'flow-rect',
'color': '#1890FF',
'label': 'Normal',
'x': 672.3,
'y': 201.6,
'id': '18e81721',
'index': 3
}, {
'type': 'node',
'size': '72*72',
'shape': 'flow-circle',
'color': '#FA8C16',
'label': 'end',
'x': 468,
'y': 502.00000000000006,
'id': '03511b2c',
'index': 9
}],
'edges': [{
'source': '01729835',
'sourceAnchor': 2,
'target': 'b69121d6',
'targetAnchor': 0,
'id': '070785c1',
'index': 4
}, {
'source': 'b69121d6',
'sourceAnchor': 2,
'target': 'a459eb24',
'targetAnchor': 0,
'id': 'a3bbe682',
'index': 5
}, {
'source': 'a459eb24',
'sourceAnchor': 1,
'target': '18e81721',
'targetAnchor': 2,
'id': '25f2209d',
'index': 6
}, {
'source': '18e81721',
'sourceAnchor': 3,
'target': 'b69121d6',
'targetAnchor': 1,
'id': 'd3a887fa',
'index': 7
}, {
'source': 'a459eb24',
'sourceAnchor': 2,
'target': '03511b2c',
'targetAnchor': 0,
'id': '494f8cc4',
'index': 8
}]
},
graph: {
width: 800,
height: 500,
mode: "readOnly"
}
}
},
methods: {
handleNodeClick(e) {
console.log(e);
}
}
}
</script>
from vgeditor.
1、如上代码 不触发事件
2、因为你项目中使用的core-js 是v2版本未锁定版本,目前vue-cli4 已经开始使用V3版本了 出现冲突
from vgeditor.
@Estelle00 今晚十一点左右我会重新传一个npm包,更新到2.7.1之后应该就可以了
from vgeditor.
谢啦!
另:3.0的时候我愿尽一点绵薄之力
from vgeditor.
@ChrisShen93
2.7.1版本依然无发触发事件o(╥﹏╥)o
from vgeditor.
目前是当引入item-panel组件后 readOnly会失效,不引入readOnly能用但是事件不触发
from vgeditor.
@Estelle00 可以提供一个可复现的步骤 or 仓库吗?
目前是当引入item-panel组件后 readOnly会失效,不引入readOnly能用但是事件不触发
确实是这样。话说如果只是让用户看的话为啥还要提供 ItemPanel?
VGEditor目前只是从 GGEditor 迁移的vue版本,包括也用了他们的 gg-editor-core 这个包,所以他们不支持的功能我这边基本上也是没有的 o(╥﹏╥)o
现在想的是 3.0 版本在保持功能都有的前提下从头开始撸。想想都觉得兴(hao)奋(nan)
from vgeditor.
找到起问题了 panCanvas 事件高于了 node点击事件 所以出现点不到节点这个问题
我把所以nodes需要的事件重添加一次能解决这个问题
from vgeditor.
@Estelle00 请问你怎么实现的啊
from vgeditor.
找到起问题了 panCanvas 事件高于了 node点击事件 所以出现点不到节点这个问题
我把所以nodes需要的事件重添加一次能解决这个问题
同问,请问怎么解决的 @Estelle00
from vgeditor.
@Estelle00 请问如何解决的,现在遇到的问题是如果添加了panCanvas,节点的点击事件就无法使用,如果去掉panCanvas,整个画布就不可以拖动了,导致流程图无法显示完全
modes: {
"readOnly": ["panCanvas", "clickEdgeSelected", "clickNodeSelected", "clickCanvasSelected", "clickGroupSelected"]
}
from vgeditor.
找到解决办法了,把panCanvas换成panBlank,画布可拖动,点击事件可用
from vgeditor.
Related Issues (20)
- mind节点自定义设置完之后如何设置第一层子节点和第二层子节点为我自定义的shape呢
- koni 连线报错,导致整个拓扑图无法连线 HOT 7
- 无法获取 graph 实例,下载拓扑图 HOT 1
- 可以实现 在线上显示文字和图标吗
- How to change shapes in canvas HOT 1
- 思维导图可以导出成png吗 HOT 3
- G6 配置 modes 无法生效 HOT 9
- How to use RegisterCommand?
- 脑图主题垂直间距设置
- How to load remote data? HOT 1
- 是否可以更新一下g6的版本
- 大佬你的API怎么打不开了
- 文档中 Mind 里面的命令 “collaspeExpand” 拼写错误,实际是 “collapseExpand”
- 怎么修改文字大小???怎么试都不行 HOT 1
- 如何自定义一些交互呢?
- 请问PropsAPI这部分是文档还没有完成还是这部分没有实现呢 HOT 2
- Mind 绑定点击事件报错 HOT 10
- 可不可以像GG-editor一样在codesandbox提供一些示例 HOT 1
- 需求收集 HOT 14
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vgeditor.