请问怎么预览（不可修改）呢？

[Estelle00]

请问怎么预览（不可修改）呢？

[ChrisShen93]

@Estelle00 这种不可修改的需求点的目的是什么呢？只要没有将数据保存到服务端，下次打开依然是原图，不会对业务有影响。。。

当前本身没有提供这个功能，提供两个思路：

1. 利用 onAfterCommandExecute进行位置的重置；
2. 可以考虑在图层上方覆盖一个透明的蒙板，使得用户不可选择到图形元素，间接的达到不可修改的目的

另：等vue 3发布beta之后我会考虑用 vue 3 和 g6 v3 重构，届时会考虑将这个作为一个需求点。

[Estelle00]

@ChrisShen93
目前使用mode: "readOnly"设置 但是点击node节点等事件也被全部禁用了...
因为我想把生成的图表给别人看
但别人只能查看可以点击不能拖拽和修改流程里面的内容等

[ChrisShen93]

@Estelle00 我刚刚本地试了一下，readOnly模式下点击实践可以正常触发呀

demo

version: 2.7.0

可否提供一下你使用的 VGEditor 和 vue 的版本，以及一份可供复现的代码片段？

[Estelle00]

vue2.6.10版本的
本来想写一个demo的 但是发现vue-cli4.0与这个组件有冲突.

[ChrisShen93]

@Estelle00 建议升级到 2.7.0 哈

功能是一样的，然后2.6.x里其实是有一些bug的

然后你说的冲突是什么？vue的版本么？

[Estelle00]

"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]

1、如上代码 不触发事件
2、因为你项目中使用的core-js 是v2版本未锁定版本，目前vue-cli4 已经开始使用V3版本了 出现冲突

[ChrisShen93]

@Estelle00 今晚十一点左右我会重新传一个npm包，更新到2.7.1之后应该就可以了

[Estelle00]

谢啦！
另：3.0的时候我愿尽一点绵薄之力

[Estelle00]

@ChrisShen93
2.7.1版本依然无发触发事件o(╥﹏╥)o

[Estelle00]

目前是当引入item-panel组件后 readOnly会失效，不引入readOnly能用但是事件不触发

[ChrisShen93]

@Estelle00 可以提供一个可复现的步骤 or 仓库吗？

目前是当引入item-panel组件后 readOnly会失效，不引入readOnly能用但是事件不触发

确实是这样。话说如果只是让用户看的话为啥还要提供 ItemPanel？

VGEditor目前只是从 GGEditor 迁移的vue版本，包括也用了他们的 gg-editor-core 这个包，所以他们不支持的功能我这边基本上也是没有的 o(╥﹏╥)o

现在想的是 3.0 版本在保持功能都有的前提下从头开始撸。想想都觉得兴(hao)奋(nan)

[Estelle00]

@ChrisShen93 最近注意到GGEditor新版本已经移除了 gg-editor-core这个包的依赖 我在尝试看这个包的压缩文件 看看是否能找到问题o(╥﹏╥)o

[Estelle00]

找到起问题了 panCanvas 事件高于了 node点击事件 所以出现点不到节点这个问题
我把所以nodes需要的事件重添加一次能解决这个问题

[AK081KA]

@Estelle00 请问你怎么实现的啊

[jisheng100]

找到起问题了 panCanvas 事件高于了 node点击事件 所以出现点不到节点这个问题
我把所以nodes需要的事件重添加一次能解决这个问题

同问，请问怎么解决的 @Estelle00

[tianya520]

@Estelle00 请问如何解决的，现在遇到的问题是如果添加了panCanvas，节点的点击事件就无法使用，如果去掉panCanvas，整个画布就不可以拖动了，导致流程图无法显示完全
modes: {
"readOnly": ["panCanvas", "clickEdgeSelected", "clickNodeSelected", "clickCanvasSelected", "clickGroupSelected"]
}

[tianya520]

找到解决办法了，把panCanvas换成panBlank，画布可拖动，点击事件可用