接入3d 创建画布相关接口

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

@@ -53,8 +53,8 @@
 		@home="() => fitView({ maxZoom: 1 })"
 	/>
 	<image-preview ref="imagePreviewRef" />
-	<baseModal ref="three">
-
+	<baseModal ref="threeModelRef" >
+		<threeModel />
 	</baseModal>
 </template>
 
@@ -68,11 +68,16 @@
 	import zoom from '../components/zoom.vue'
 	import imagePreview from '../components/image-preview.vue'
 	import baseModal from '../components/base-modal.vue'
+	// 工具
+	import threeModel from './components/tools/threeModel/index.vue'
 	// 节点
 	import node from './components/node.vue'
 	import resultImage from './components/nodes/result-image.vue'
 	import card from './components/nodes/cards/index.vue'
 	import text from './components/nodes/text.vue'
+
+	// 接口
+	import { getSketchFlowCanvas, putSketchFlowCanvas } from '@/api/flow-canvas'
 	const components = {
 		[NODE_COMPONENT.RESULT_IMAGE]: resultImage,
 		[NODE_COMPONENT.CARD]: card,
@@ -166,16 +171,25 @@
 	// 导出流程
 	const exportFlow = () => {
 		// flowManager.exportFlow()
+		
 		const str = JSON.stringify(stateManager.nodes.value)
 		const json = JSON.parse(str)
-		localStorage.setItem('flow_json', str)
+		putSketchFlowCanvas({
+			id: props.config.id || '==========',
+			canvasData: str
+		}).then((res) => {
+			if (res) {
+				console.log(res)
+			}
+		})
+		// localStorage.setItem('flow_json', str)
 	}
 	// 导入流程
-	const importFlow = async () => {
+	const importFlow = async (json) => {
 		try {
 			stateManager.nodes.value = []
 			await nextTick()
-			const json = JSON.parse(localStorage.getItem('flow_json') || '[]')
+			// const json = JSON.parse(localStorage.getItem('flow_json') || '[]')
 			stateManager.nodes.value = json
 			setTimeout(() => {
 				nextTick(() => {
@@ -188,24 +202,42 @@
 	}
 
 	const imagePreviewRef = ref<any>()
+	const threeModelRef = ref<any>()
 	/** 打开图片预览 */
 	const openImagePreview = (url: string) => {
 		imagePreviewRef.value.open(url)
 	}
 	provide('openImagePreview', openImagePreview)
 
-	onMounted(() => {
+	onMounted(async () => {
 		// window['vueFlow'] = vueFlow
 		// window['nodes'] = nodes
-		nodeManager.createResultNode({
-			data: {
-				disableDelete: true,
-				isHeader: false,
-				data: {
-					url: props.config.url
+		let json = []
+		await new Promise((resolve) => {
+			getSketchFlowCanvas({ id: props.config.id || '==========' }).then((res) => {
+				if (res) {
+					console.log(res)
+					json = res.data
 				}
-			}
+				resolve(true)
+			}).catch(() => {
+				resolve(true)
+			})
 		})
+		if(json.length > 0){
+			importFlow(json)
+		}else{
+			nodeManager.createResultNode({
+				data: {
+					disableDelete: true,
+					isHeader: false,
+					data: {
+						url: props.config.url
+					}
+				}
+			})
+		}
+		
 	})
 	onBeforeMount(() => {
 		eventManager.removeEvents() // 移除事件