<template>
|
<div class="bar">
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="清除 (Ctrl + D)"
|
placement="bottom"
|
>
|
<el-button
|
name="delete"
|
@click="handleClick"
|
class="item-space"
|
size="small"
|
>
|
清空
|
</el-button>
|
</el-tooltip>
|
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="撤销 (Ctrl + Z)"
|
placement="bottom"
|
>
|
<el-button
|
:disabled="!canUndo"
|
name="undo"
|
@click="handleClick"
|
class="item-space"
|
size="small"
|
>
|
undo
|
</el-button>
|
</el-tooltip>
|
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="Redo (Ctrl + Shift + Z)"
|
placement="bottom"
|
>
|
<el-button
|
:disabled="!canRedo"
|
name="redo"
|
@click="handleClick"
|
class="item-space"
|
size="small"
|
>
|
redo
|
</el-button>
|
</el-tooltip>
|
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="复制 (Ctrl + C )"
|
placement="bottom"
|
>
|
<el-button
|
name="copy"
|
@click="handleClick"
|
class="item-space"
|
size="small"
|
>
|
复制
|
</el-button>
|
</el-tooltip>
|
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="剪切 (Ctrl + X)"
|
placement="bottom"
|
>
|
<el-button
|
name="cut"
|
@click="handleClick"
|
class="item-space"
|
size="small"
|
>
|
剪切
|
</el-button>
|
</el-tooltip>
|
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="粘贴 (Ctrl + V)"
|
placement="bottom"
|
>
|
<el-button
|
name="paste"
|
@click="handleClick"
|
class="item-space"
|
size="small"
|
>
|
粘贴
|
</el-button>
|
</el-tooltip>
|
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="保存PNG (Ctrl + S)"
|
placement="bottom"
|
>
|
<el-button
|
name="savePNG"
|
@click="handleClick"
|
class="item-space"
|
size="small"
|
>
|
保存PNG
|
</el-button>
|
</el-tooltip>
|
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="保存SVG (Ctrl + S)"
|
placement="bottom"
|
>
|
<el-button
|
name="saveSVG"
|
@click="handleClick"
|
class="item-space"
|
size="small"
|
>
|
保存SVG
|
</el-button>
|
</el-tooltip>
|
|
<!-- <el-tooltip
|
class="item"
|
effect="dark"
|
content="打印 (Ctrl + P)"
|
placement="bottom"
|
>
|
<el-button
|
name="print"
|
@click="handleClick"
|
class="item-space"
|
size="small"
|
>
|
print
|
</el-button>
|
</el-tooltip> -->
|
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="导出 "
|
placement="bottom"
|
>
|
<el-button
|
name="toJSON"
|
@click="handleClick"
|
class="item-space"
|
size="small"
|
>
|
导出JSON
|
</el-button>
|
</el-tooltip>
|
</div>
|
</template>
|
<script>
|
import FlowGraph from "../../graph";
|
import { DataUri } from "@antv/x6";
|
export default {
|
data() {
|
return {
|
canUndo: null,
|
canRedo: null,
|
};
|
},
|
created() {
|
this.myInit();
|
},
|
methods: {
|
myInit() {
|
const { graph } = FlowGraph;
|
// const { history } = graph;
|
// console.log(graph,graph.history,graph.canUndo(), 82);
|
this.canUndo = graph.canUndo();
|
this.canRedo = graph.canRedo();
|
graph.on("history:change", () => {
|
this.canUndo = graph.canUndo();
|
this.canRedo = graph.canRedo();
|
});
|
graph.bindKey("ctrl+z", () => {
|
if (graph.canUndo()) {
|
graph.undo();
|
}
|
return false;
|
});
|
graph.bindKey("ctrl+shift+z", () => {
|
if (graph.canRedo()) {
|
graph.redo();
|
}
|
return false;
|
});
|
graph.bindKey("ctrl+d", () => {
|
graph.clearCells();
|
return false;
|
});
|
graph.bindKey("ctrl+s", () => {
|
graph.toPNG((datauri) => {
|
DataUri.downloadDataUri(datauri, "chart.png");
|
});
|
return false;
|
});
|
graph.bindKey("ctrl+p", () => {
|
graph.printPreview();
|
return false;
|
});
|
graph.bindKey("ctrl+c", this.copy);
|
graph.bindKey("ctrl+v", this.paste);
|
graph.bindKey("ctrl+x", this.cut);
|
},
|
copy() {
|
const { graph } = FlowGraph;
|
const cells = graph.getSelectedCells();
|
if (cells.length) {
|
graph.copy(cells);
|
}
|
return false;
|
},
|
|
cut() {
|
const { graph } = FlowGraph;
|
const cells = graph.getSelectedCells();
|
if (cells.length) {
|
graph.cut(cells);
|
}
|
return false;
|
},
|
|
paste() {
|
const { graph } = FlowGraph;
|
if (!graph.isClipboardEmpty()) {
|
const cells = graph.paste({ offset: 32 });
|
graph.cleanSelection();
|
graph.select(cells);
|
}
|
return false;
|
},
|
|
handleClick(event) {
|
const { graph } = FlowGraph;
|
const name = event.currentTarget.name;
|
switch (name) {
|
case "undo":
|
graph.undo();
|
break;
|
case "redo":
|
graph.redo();
|
break;
|
case "delete":
|
graph.clearCells();
|
break;
|
case "savePNG":
|
graph.toPNG(
|
(dataUri) => {
|
// 下载
|
DataUri.downloadDataUri(dataUri, "chartx.png");
|
},
|
{
|
backgroundColor: "white",
|
padding: {
|
top: 20,
|
right: 30,
|
bottom: 40,
|
left: 50,
|
},
|
quality: 1,
|
}
|
);
|
break;
|
case "saveSVG":
|
graph.toSVG((dataUri) => {
|
// 下载
|
DataUri.downloadDataUri(DataUri.svgToDataUrl(dataUri), "chart.svg");
|
});
|
break;
|
case "print":
|
// graph.printPreview();
|
break;
|
case "copy":
|
this.copy();
|
break;
|
case "cut":
|
this.cut();
|
break;
|
case "paste":
|
this.paste();
|
break;
|
case "toJSON":
|
console.log(graph.toJSON());
|
window.localStorage.setItem(
|
"graphJson",
|
JSON.stringify(graph.toJSON())
|
);
|
// graph.fromJSON({cells:[graph.toJSON().cells[0],graph.toJSON().cells[1]]})
|
break;
|
default:
|
break;
|
}
|
},
|
},
|
};
|
</script>
|
<style scoped>
|
.bar {
|
width: 100%;
|
z-index: 99;
|
margin-right: 16px;
|
}
|
.item-space {
|
margin-left: 16px;
|
}
|
</style>
|
