Hooke / vue-flow-editor

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
2f42445f 1 parent 4a3fc1ec

预览展示页新增缩放工具

Inline Side-by-side
Showing 1 changed file with 60 additions and 2 deletions
1 <!-- 1 <!--
2 * @Date: 2023-12-18 15:01:00 2 * @Date: 2023-12-18 15:01:00
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-12-18 15:09:35 4 + * @LastEditTime: 2024-07-15 11:12:22
5 * @FilePath: /vue-flow-editor/src/editor/vue-flow-editor-preview1.vue 5 * @FilePath: /vue-flow-editor/src/editor/vue-flow-editor-preview1.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
8 <template> 8 <template>
9 <transition name="vue-flow-editor-preview-transition"> 9 <transition name="vue-flow-editor-preview-transition">
10 <div class="vue-flow-editor-preview1" v-if="p_value"> 10 <div class="vue-flow-editor-preview1" v-if="p_value">
11 - <div class="vue-flow-editor-preview-body" ref="body"> 11 + <div class="vue-flow-editor-preview-body" ref="body" style="overflow: scroll;">
12 <div class="vue-flow-editor-preview-target" ref="target"></div> 12 <div class="vue-flow-editor-preview-target" ref="target"></div>
13 </div> 13 </div>
14 + <div style="position: fixed; bottom: 1rem; right: 1rem; font-size: 25px;">
15 + <div @click="zoomIn"><i class="el-icon-zoom-in"></i></div>
16 + <div @click="zoomOut"><i class="el-icon-zoom-out"></i></div>
17 + </div>
14 </div> 18 </div>
15 </transition> 19 </transition>
16 </template> 20 </template>
...@@ -40,12 +44,16 @@ ...@@ -40,12 +44,16 @@
40 return { 44 return {
41 graph: null, 45 graph: null,
42 p_value: this.value, 46 p_value: this.value,
47 + currentHeight: 0,
48 + currentWidth: 0,
43 } 49 }
44 }, 50 },
45 methods: { 51 methods: {
46 refresh() { 52 refresh() {
47 const container = this.$refs.target 53 const container = this.$refs.target
48 const {offsetHeight, offsetWidth} = this.$refs.body 54 const {offsetHeight, offsetWidth} = this.$refs.body
55 + this.currentHeight = offsetHeight;
56 + this.currentWidth = offsetWidth;
49 57
50 if (!!this.graph) { 58 if (!!this.graph) {
51 this.graph.destroy() 59 this.graph.destroy()
...@@ -71,6 +79,56 @@ ...@@ -71,6 +79,56 @@
71 this.p_value = false 79 this.p_value = false
72 this.$emit('input', this.p_value) 80 this.$emit('input', this.p_value)
73 }, 81 },
82 + zoomIn() {
83 + const container = this.$refs.target
84 + this.currentWidth = this.currentWidth + 100;
85 + this.currentHeight = this.currentHeight + 100;
86 +
87 + if (!!this.graph) {
88 + this.graph.destroy()
89 + }
90 + this.graph = new G6.Graph({
91 + container,
92 + width: this.currentWidth,
93 + height: this.currentHeight,
94 +
95 + ...GraphStyle.default,
96 + mode: {
97 + default: [
98 + 'drag-canvas',
99 + 'zoom-canvas',
100 + ]
101 + },
102 + })
103 +
104 + this.graph.read(this.data)
105 + this.graph.fitView(20)
106 + },
107 + zoomOut() {
108 + const container = this.$refs.target
109 + this.currentWidth = this.currentWidth - 100;
110 + this.currentHeight = this.currentHeight - 100;
111 +
112 + if (!!this.graph) {
113 + this.graph.destroy()
114 + }
115 + this.graph = new G6.Graph({
116 + container,
117 + width: this.currentWidth,
118 + height: this.currentHeight,
119 +
120 + ...GraphStyle.default,
121 + mode: {
122 + default: [
123 + 'drag-canvas',
124 + 'zoom-canvas',
125 + ]
126 + },
127 + })
128 +
129 + this.graph.read(this.data)
130 + this.graph.fitView(20)
131 + }
74 }, 132 },
75 } 133 }
76 </script> 134 </script>
......