didi / didi/LogicFlow

[Bug Report]: 使用插件 Snapshot 导出svg格式的图片时,配置了 partial: false,但只导出了可见区域的流程图

Open
#2,294 1 comment 0 reactions 1 assignee Claimed by @CraneReturn View on GitHub
priority:P1 type:bug
Dominant language
TypeScript
Stars
11.7k
Forks
1.4k
PR merge metrics
No merged PRs in 30d

Description

### 发生了什么?

使用插件 Snapshot 导出图片时,选择导出 png 格式的图片可以导出完整的流程图,选择导出 svg 格式只导出了可见区域的流程图。参数 partial 对 svg 无效。

操作步骤:放大至只显示部分区域后,分别保存 png 和 svg 格式的图片。

**放大后的效果:**
Image

**PNG 格式:**
Image

**SVG 格式:**
Image

```vue



保存PNG
保存SVG

import LogicFlow from "@logicflow/core";
import "@logicflow/core/lib/style/index.css";
import { Snapshot } from "@logicflow/extension";

export default {
name: 'lf-Demo',
data() {
return {
renderData: {
// 节点数据
nodes: [
{
id: '21', // 节点ID,需要全局唯一,不传入内部会自动生成一个ID
type: 'rect', // 节点类型,可以传入LogicFlow内置的7种节点类型,也可以注册自定义节点后传入自定义类型
x: 100, // 节点形状中心在x轴位置
y: 100, // 节点形状中心在y轴的位置
text: 'Origin Usage-rect', // 节点文本
properties: { // 自定义属性,用于存储需要这个节点携带的信息,可以传入宽高以重设节点的宽高
width: 160,
height: 80,
}
},
{
id: '50',
type: 'circle',
x: 300,
y: 300,
text: 'Origin Usage-circle',
properties: {
r: 60,
}
},
],
// 边数据
edges: [
{
id: 'rect-2-circle', // 边ID,性质与节点ID一样
type: 'polyline', // 边类型
sourceNodeId: '50', // 起始节点Id
targetNodeId: '21', // 目标节点Id
},
],
}
}
},
mounted() {
this.lf = new LogicFlow({
container: this.$refs.container,
grid: true,
plugins: [Snapshot]
});
this.lf.render(this.renderData);
},
methods: {
handleClick(fileType) {
this.lf.getSnapshot("test", {
fileType,
partial: false
})
}
}
};

.container {
width: 800px;
height: 500px;
}

```

### logicflow/core版本

2.1.2

### logicflow/extension版本

2.1.4

### logicflow/engine版本

_No response_

### 浏览器&环境

Chrome

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.