VGEditor
VGEditor copied to clipboard
ChrisShen93
请问怎么预览（不可修改）呢？
@Estelle00 这种不可修改的需求点的目的是什么呢？只要没有将数据保存到服务端，下次打开依然是原图，不会对业务有影响。。。
当前本身没有提供这个功能，提供两个思路：
- 利用 onAfterCommandExecute进行位置的重置；
- 可以考虑在图层上方覆盖一个透明的蒙板，使得用户不可选择到图形元素，间接的达到不可修改的目的
另：等vue 3发布beta之后我会考虑用 vue 3 和 g6 v3 重构，届时会考虑将这个作为一个需求点。
@ChrisShen93 目前使用mode: "readOnly"设置 但是点击node节点等事件也被全部禁用了... 因为我想把生成的图表给别人看 但别人只能查看可以点击不能拖拽和修改流程里面的内容等
@Estelle00 我刚刚本地试了一下，readOnly模式下点击实践可以正常触发呀
version: 2.7.0
可否提供一下你使用的 VGEditor 和 vue 的版本，以及一份可供复现的代码片段？
"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>
@Estelle00 可以提供一个可复现的步骤 or 仓库吗？
目前是当引入item-panel组件后 readOnly会失效，不引入readOnly能用但是事件不触发
确实是这样。话说如果只是让用户看的话为啥还要提供 ItemPanel？
VGEditor目前只是从 GGEditor 迁移的vue版本，包括也用了他们的 gg-editor-core 这个包，所以他们不支持的功能我这边基本上也是没有的 o(╥﹏╥)o
现在想的是 3.0 版本在保持功能都有的前提下从头开始撸。想想都觉得兴(hao)奋(nan)
@ChrisShen93 最近注意到GGEditor新版本已经移除了 gg-editor-core这个包的依赖 我在尝试看这个包的压缩文件 看看是否能找到问题o(╥﹏╥)o
找到起问题了 panCanvas 事件高于了 node点击事件 所以出现点不到节点这个问题 我把所以nodes需要的事件重添加一次能解决这个问题
同问，请问怎么解决的 @Estelle00
@Estelle00 请问如何解决的，现在遇到的问题是如果添加了panCanvas，节点的点击事件就无法使用，如果去掉panCanvas，整个画布就不可以拖动了，导致流程图无法显示完全 modes: { "readOnly": ["panCanvas", "clickEdgeSelected", "clickNodeSelected", "clickCanvasSelected", "clickGroupSelected"] }
