¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <div class="container_warp"> |
| | | <div id="containerChart"></div> |
| | | <RightDrawer |
| | | class="right_drawer" |
| | | :drawerType="type" |
| | | :selectCell="selectCell" |
| | | :graph="graph" |
| | | :grid="grid" |
| | | @deleteNode="deleteNode" |
| | | ></RightDrawer> |
| | | |
| | | <div class="operating"> |
| | | <div class="btn-group"> |
| | | <div |
| | | class="btn" |
| | | title="åå½¢èç¹" |
| | | @mousedown="startDrag('Circle', $event)" |
| | | > |
| | | <i class="iconfont icon-circle"></i> |
| | | </div> |
| | | <div |
| | | class="btn" |
| | | title="æ£æ¹å½¢èç¹" |
| | | @mousedown="startDrag('Rect', $event)" |
| | | > |
| | | <i class="iconfont icon-square"></i> |
| | | </div> |
| | | <div class="btn" title="æ¡ä»¶èç¹"> |
| | | <i |
| | | class="iconfont icon-square rotate-square" |
| | | @mousedown="startDrag('polygon', $event)" |
| | | ></i> |
| | | </div> |
| | | <div class="btn-group_tips" v-if="showTips"> |
| | | ææ½çæ<br />èµäº§ææå¾å½¢ |
| | | </div> |
| | | </div> |
| | | <div class="btn-group"> |
| | | <el-tooltip content="ç´çº¿ç®å¤´" placement="bottom"> |
| | | <div |
| | | :class="['btn', currentArrow === 1 ? 'currentArrow' : '']" |
| | | @click="changeEdgeType('normal')" |
| | | > |
| | | <i class="iconfont icon-ai28"></i> |
| | | </div> |
| | | </el-tooltip> |
| | | <el-tooltip content="æ²çº¿ç®å¤´" placement="bottom"> |
| | | <div |
| | | :class="['btn', currentArrow === 2 ? 'currentArrow' : '']" |
| | | @click="changeEdgeType('smooth')" |
| | | > |
| | | <i class="iconfont icon-Down-Right"></i> |
| | | </div> |
| | | </el-tooltip> |
| | | <el-tooltip content="ç´è§ç®å¤´" placement="bottom"> |
| | | <div |
| | | :class="['btn', currentArrow === 3 ? 'currentArrow' : '']" |
| | | @click="changeEdgeType()" |
| | | > |
| | | <i class="iconfont icon-jiantou"></i> |
| | | </div> |
| | | </el-tooltip> |
| | | </div> |
| | | <div class="btn-group"> |
| | | <el-tooltip content="å é¤" placement="bottom"> |
| | | <div class="btn" @click="deleteNode()" style="margin-top: 5px"> |
| | | <i class="iconfont icon-shanchu"></i> |
| | | </div> |
| | | </el-tooltip> |
| | | <el-tooltip content="ä¿åPNG" placement="bottom"> |
| | | <div class="btn" @click="saveToPNG()" title="ä¿å"> |
| | | <i class="iconfont icon-baocun"></i> |
| | | </div> |
| | | </el-tooltip> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import "@antv/x6-vue-shape"; |
| | | import { Graph, Shape, Addon, FunctionExt, DataUri } from "@antv/x6"; |
| | | import RightDrawer from "./RightDrawer"; |
| | | import insertCss from "insert-css"; |
| | | import { startDragToGraph } from "./Graph/methods.js"; |
| | | const data = {}; |
| | | export default { |
| | | data() { |
| | | return { |
| | | graph: "", |
| | | value1: true, |
| | | type: "grid", |
| | | selectCell: "", |
| | | connectEdgeType: { |
| | | //è¿çº¿æ¹å¼ |
| | | connector: "normal", |
| | | router: { |
| | | name: "", |
| | | }, |
| | | }, |
| | | showTips: false, |
| | | currentArrow: 1, |
| | | grid: { |
| | | // ç½æ ¼è®¾ç½® |
| | | size: 20, // ç½æ ¼å¤§å° 10px |
| | | visible: true, // 渲æç½æ ¼èæ¯ |
| | | type: "mesh", |
| | | args: { |
| | | color: "#D0D0D0", |
| | | thickness: 1, // ç½æ ¼çº¿å®½åº¦/ç½æ ¼ç¹å¤§å° |
| | | factor: 10, |
| | | }, |
| | | }, |
| | | }; |
| | | }, |
| | | components: { |
| | | RightDrawer, |
| | | }, |
| | | methods: { |
| | | initX6() { |
| | | var _that = this; |
| | | this.graph = new Graph({ |
| | | container: document.getElementById("containerChart"), |
| | | width: 1700, |
| | | height: "100%", |
| | | grid: _that.grid, |
| | | resizing: { |
| | | //è°æ´èç¹å®½é« |
| | | enabled: true, |
| | | orthogonal: false, |
| | | }, |
| | | selecting: true, //å¯é |
| | | snapline: true, |
| | | interacting: { |
| | | edgeLabelMovable: true, |
| | | }, |
| | | connecting: { |
| | | // èç¹è¿æ¥ |
| | | anchor: "center", |
| | | connectionPoint: "anchor", |
| | | allowBlank: false, |
| | | snap: true, |
| | | createEdge() { |
| | | return new Shape.Edge({ |
| | | attrs: { |
| | | line: { |
| | | stroke: "#1890ff", |
| | | strokeWidth: 1, |
| | | targetMarker: { |
| | | name: "classic", |
| | | size: 8, |
| | | }, |
| | | strokeDasharray: 0, //è线 |
| | | style: { |
| | | animation: "ant-line 30s infinite linear", |
| | | }, |
| | | }, |
| | | }, |
| | | label: { |
| | | text: "", |
| | | }, |
| | | connector: _that.connectEdgeType.connector, |
| | | router: { |
| | | name: _that.connectEdgeType.router.name || "", |
| | | }, |
| | | zIndex: 0, |
| | | }); |
| | | }, |
| | | }, |
| | | highlighting: { |
| | | magnetAvailable: { |
| | | name: "stroke", |
| | | args: { |
| | | padding: 4, |
| | | attrs: { |
| | | strokeWidth: 4, |
| | | stroke: "#6a6c8a", |
| | | }, |
| | | }, |
| | | }, |
| | | }, |
| | | }); |
| | | insertCss(` |
| | | @keyframes ant-line { |
| | | to { |
| | | stroke-dashoffset: -1000 |
| | | } |
| | | } |
| | | `); |
| | | this.graph.fromJSON(data); |
| | | // éåãoptions å°è¢«ä¼ éå°äºä»¶åè°ä¸ã |
| | | this.graph.history.redo(); |
| | | // æ¤éãoptions å°è¢«ä¼ éå°äºä»¶åè°ä¸ |
| | | this.graph.history.undo(); |
| | | // é¼ æ ç§»å
¥ç§»åºèç¹ |
| | | this.graph.on( |
| | | "node:mouseenter", |
| | | FunctionExt.debounce(() => { |
| | | const container = document.getElementById("containerChart"); |
| | | const ports = container.querySelectorAll(".x6-port-body"); |
| | | this.showPorts(ports, true); |
| | | }), |
| | | 500 |
| | | ); |
| | | // é¼ æ ç§»å¼èç¹ |
| | | this.graph.on("node:mouseleave", () => { |
| | | const container = document.getElementById("containerChart"); |
| | | const ports = container.querySelectorAll(".x6-port-body"); |
| | | this.showPorts(ports, false); |
| | | }); |
| | | // åå»ç©ºç½ |
| | | this.graph.on("blank:click", () => { |
| | | this.type = "grid"; |
| | | }); |
| | | // åå»èç¹æè¾¹ |
| | | this.graph.on("cell:click", ({ cell }) => { |
| | | this.type = cell.isNode() ? "node" : "edge"; |
| | | }); |
| | | // éä¸çèç¹/è¾¹åçæ¹å(å¢å )æ¶è§¦åã |
| | | this.graph.on("selection:changed", (args) => { |
| | | args.added.forEach((cell) => { |
| | | this.selectCell = cell; |
| | | if (cell.isEdge()) { |
| | | cell.isEdge() && cell.attr("line/strokeDasharray", 5); //è线èè线 |
| | | cell.addTools([ |
| | | { |
| | | name: "vertices", |
| | | args: { |
| | | padding: 4, |
| | | attrs: { |
| | | strokeWidth: 0.1, |
| | | stroke: "#2d8cf0", |
| | | fill: "#ffffff", |
| | | }, |
| | | }, |
| | | }, |
| | | ]); |
| | | } |
| | | }); |
| | | args.removed.forEach((cell) => { |
| | | cell.isEdge() && cell.attr("line/strokeDasharray", 0); //æ£å¸¸çº¿ |
| | | cell.removeTools(); |
| | | }); |
| | | }); |
| | | }, |
| | | showPorts(ports, show) { |
| | | for (let i = 0, len = ports.length; i < len; i = i + 1) { |
| | | ports[i].style.visibility = show ? "visible" : "hidden"; |
| | | } |
| | | }, |
| | | // ææ½çææ£æ¹å½¢æè
åå½¢ |
| | | startDrag(type, e) { |
| | | startDragToGraph(this.graph, type, e); |
| | | }, |
| | | // å é¤èç¹ |
| | | deleteNode() { |
| | | const cell = this.graph.getSelectedCells(); |
| | | this.graph.removeCells(cell); |
| | | this.type = "grid"; |
| | | }, |
| | | // ä¿åpng |
| | | saveToPNG() { |
| | | this.$nextTick(() => { |
| | | this.graph.toPNG( |
| | | (dataUri) => { |
| | | // ä¸è½½ |
| | | DataUri.downloadDataUri(dataUri, "èµäº§ææå¾.png"); |
| | | }, |
| | | { |
| | | backgroundColor: "white", |
| | | padding: { |
| | | top: 50, |
| | | right: 50, |
| | | bottom: 50, |
| | | left: 50, |
| | | }, |
| | | quality: 1, |
| | | copyStyles: false, |
| | | } |
| | | ); |
| | | }); |
| | | }, |
| | | // æ¹åè¾¹å½¢ç¶ |
| | | changeEdgeType(e) { |
| | | if (e === "normal") { |
| | | this.connectEdgeType = { |
| | | connector: "normal", |
| | | router: { name: "" }, |
| | | }; |
| | | this.currentArrow = 1; |
| | | } else if (e === "smooth") { |
| | | this.connectEdgeType = { |
| | | connector: "smooth", |
| | | router: { name: "" }, |
| | | }; |
| | | this.currentArrow = 2; |
| | | } else { |
| | | this.connectEdgeType = { |
| | | connector: "normal", |
| | | router: { name: "manhattan" }, |
| | | }; |
| | | this.currentArrow = 3; |
| | | } |
| | | }, |
| | | }, |
| | | mounted() { |
| | | this.initX6(); |
| | | setTimeout(() => { |
| | | this.showTips = true; |
| | | }, 1000); |
| | | setTimeout(() => { |
| | | this.showTips = false; |
| | | }, 5000); |
| | | }, |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="scss"> |
| | | @import "./iconfont.css"; |
| | | @import "./index.scss"; |
| | | </style> |