画布

src/components/Canvas/FlowCanvas/components/header-tools.vue

@@ -1,12 +1,12 @@
 <template>
 	<div class="header-tools">
-		<span class="icon"><svg-icon name="c-mouse" size="16" /></span>
-		<span class="icon"><svg-icon name="c-hand" size="18" /></span>
-		<span class="icon"><svg-icon name="c-t" size="18" /></span>
+		<span class="icon" @click="emit('mouse')"><svg-icon name="c-mouse" size="16" /></span>
+		<span class="icon" @click="emit('hand')"><svg-icon name="c-hand" size="18" /></span>
+		<span class="icon" @click="emit('t')"><svg-icon name="c-t" size="18" /></span>
 		<span class="line"></span>
-		<span class="icon"><svg-icon name="c-undo" size="18" /></span>
-		<span class="icon"><svg-icon name="c-redo" size="18" /></span>
-		<button class="export">
+		<span class="icon" @click="emit('undo')"><svg-icon name="c-undo" size="18" /></span>
+		<span class="icon" @click="emit('redo')"><svg-icon name="c-redo" size="18" /></span>
+		<button class="export" @click="emit('export')">
 			<span class="icon"><svg-icon name="export" size="11" /></span>
 			<span class="text">Export</span>
 		</button>
@@ -19,7 +19,7 @@
 		zoom: { default: 1, type: Number },
 		step: { default: 0.1, type: Number }
 	})
-	const emit = defineEmits(['add', 'sub'])
+	const emit = defineEmits(['mouse', 'hand', 't', 'undo', 'redo', 'export'])
 </script>
 
 <style lang="less" scoped>

src/components/Canvas/FlowCanvas/flow-canvas.vue

@@ -23,7 +23,7 @@
 			</template>
 		</VueFlow>
 	</div>
-	<header-tools />
+	<header-tools @export="exportFlow" />
 	<zoom
 		:zoom="stateManager.zoom.value"
 		:step="0.1"
@@ -90,6 +90,11 @@
 		}, 0)
 	}
 
+	const exportFlow = () => {
+		// flowManager.exportFlow()
+		console.log(flowManager.exportFlow())
+	}
+
 	onMounted(() => {
 		// window['vueFlow'] = vueFlow
 		// window['nodes'] = nodes