Merge branch 'main' of ssh://18.167.251.121:10002/aidlab/FiDA_Front

src/components/Canvas/DepthCanvas/components/brush-control-panel.vue

@@ -7,7 +7,7 @@
 					:is-input="false"
 					v-model="brushSize"
 					:tip-formatter="(v) => v + 'px'"
-					:min="5"
+					:min="1"
 					:max="100"
 					@input="onInputSize"
 				/>

src/components/Canvas/DepthCanvas/components/details-panel/basic-info.vue

@@ -0,0 +1,65 @@
+<template>
+	<div class="basic-info">
+		<div>
+			<span class="label">X:</span>
+			<span class="value">{{ object.left }}</span>
+		</div>
+		<div>
+			<span class="label">Y:</span>
+			<span class="value">{{ object.top }}</span>
+		</div>
+		<div>
+			<span class="label">Width:</span>
+			<span class="value">{{ object.width }}</span>
+		</div>
+		<div>
+			<span class="label">Height:</span>
+			<span class="value">{{ object.height }}</span>
+		</div>
+		<div>
+			<span class="label">缩放X:</span>
+			<span class="value">{{ object.scaleX }}</span>
+		</div>
+		<div>
+			<span class="label">缩放Y:</span>
+			<span class="value">{{ object.scaleY }}</span>
+		</div>
+		<div>
+			<span class="label">Angle:</span>
+			<span class="value">{{ object.angle }}</span>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { ref, inject, computed, watch, onMounted } from 'vue'
+	const props = defineProps({
+		object: {
+			type: Object,
+			default: () => ({})
+		}
+	})
+	onMounted(() => {})
+</script>
+
+<style lang="less" scoped>
+	.basic-info {
+		> div {
+			padding: 0.8rem 0;
+			display: flex;
+			align-items: center;
+			> .label {
+				font-size: 1.6rem;
+				color: #000;
+				font-weight: bold;
+				min-width: 7rem;
+				text-align: right;
+				margin-right: 0.8rem;
+			}
+			> .value {
+				font-size: 1.6rem;
+				color: #333;
+			}
+		}
+	}
+</style>

src/components/Canvas/DepthCanvas/components/details-panel/index.vue

@@ -8,34 +8,7 @@
 			</span>
 		</div>
 		<div class="content" v-if="activeObject" v-show="show">
-			<div>
+			<basic-info :object="activeObject" />
-				<span class="label">X:</span>
-				<span class="value">{{ activeObject.left }}</span>
-			</div>
-			<div>
-				<span class="label">Y:</span>
-				<span class="value">{{ activeObject.top }}</span>
-			</div>
-			<div>
-				<span class="label">Width:</span>
-				<span class="value">{{ activeObject.width }}</span>
-			</div>
-			<div>
-				<span class="label">Height:</span>
-				<span class="value">{{ activeObject.height }}</span>
-			</div>
-			<div>
-				<span class="label">缩放X:</span>
-				<span class="value">{{ activeObject.scaleX }}</span>
-			</div>
-			<div>
-				<span class="label">缩放Y:</span>
-				<span class="value">{{ activeObject.scaleY }}</span>
-			</div>
-			<div>
-				<span class="label">Angle:</span>
-				<span class="value">{{ activeObject.angle }}</span>
-			</div>
 		</div>
 	</div>
 </template>
@@ -51,8 +24,7 @@
 	const activeObject = ref(null)
 	const updateActiveObject = () => {
 		const obj = layers.value.find((v: any) => v.info.id === activeID.value)
-		// activeObject.value = obj?.toJSON('info') || null
+		activeObject.value = obj ? JSON.parse(JSON.stringify(obj)) : null
-		activeObject.value = obj
 	}
 	watch(layers, () => updateActiveObject())
 	watch(activeID, () => updateActiveObject())
@@ -95,23 +67,7 @@
 		}
 		> .content {
 			padding: 1.6rem;
-			> div {
+			
-				padding: 0.8rem 0;
-				display: flex;
-				align-items: center;
-				> .label {
-					font-size: 1.6rem;
-					color: #000;
-					font-weight: bold;
-					min-width: 7rem;
-					text-align: right;
-					margin-right: 0.8rem;
-				}
-				> .value {
-					font-size: 1.6rem;
-					color: #333;
-				}
-			}
 		}
 	}
 </style>

src/components/Canvas/DepthCanvas/manager/CanvasManager.ts

@@ -52,7 +52,8 @@ export class CanvasManager {
 		this.canvas.setWidth(this.canvasViewWidth)
 		this.canvas.setHeight(this.canvasViewHeight)
 	}
-	initCanvas(options: CanvasInitOptions) {
+	/** 初始化画布 */
+	async initCanvas(options: CanvasInitOptions) {
 		this.layerManager = this.stateManager.layerManager
 		this.canvasWidth = options.canvasWidth || 750
 		this.canvasHeight = options.canvasHeight || 600
@@ -84,29 +85,35 @@ export class CanvasManager {
 		this.setupCanvasEvents()
 		this.setupBrushEvents()
 
+
+		this.stateManager.setIsRecord(false)
 		// 创建矩形
-		const rect = this.layerManager.createRectLayer({
+		const rect = await this.layerManager.createRectLayer({
 			left: 400,
 			top: 100,
 		})
 		//创建圆形
-		const circle = this.layerManager.createCircleLayer({
+		const circle = await this.layerManager.createCircleLayer({
 			left: 200,
 			top: 200,
 		})
 		// 文字
-		const text = this.layerManager.createTextLayer('Hello World');
+		const text = await this.layerManager.createTextLayer('Hello World');
 		this.layerManager.updateLayers()
 		this.layerManager.setActiveID(text.info.id)
+		this.stateManager.setIsRecord(true)
 		this.stateManager.recordState()
 		// this.stateManager.toolManager.setTool(OperationType.RECTANGLE)
 	}
 	/** 画布添加对象 */
-	add(obj: any, isUpdate = true) {
+	async add(obj: any, isUpdate = true) {
 		this.canvas.add(obj)
+		const id = obj?.info?.id || ""
 		if (isUpdate) {
 			this.layerManager.updateLayers()
 			this.renderAll()
+			if (id) await this.layerManager.updateLayerThumbnailsById(id)
+			this.stateManager.recordState()
 		}
 	}
 	/** 画布移除对象 */
@@ -134,7 +141,6 @@ export class CanvasManager {
 	/** 设置激活对象 */
 	setActiveObjectById(id: string) {
 		const obj = this.getObjectById(id)
-		console.log(obj)
 		if (obj) this.canvas.setActiveObject(obj)
 		this.renderAll()
 	}
@@ -164,12 +170,7 @@ export class CanvasManager {
 		this.canvas.moveTo(this.getObjectById(id), newIndex)
 		this.layerManager.updateLayers()
 		this.renderAll()
-	}
+		this.stateManager.recordState()
-	getBitObjects() {
-		return this.getObjects().map(v => {
-			const object = v.toJSON("info");
-			return object
-		})
 	}
 
 	/** 画笔事件 */
@@ -189,7 +190,7 @@ export class CanvasManager {
 		if (activeLayer) {
 			this.layerManager.imageMergeToLayer(activeLayer, fabricImage)
 		} else {
-			const emptyLayer = this.layerManager.createEmptyLayer();
+			const emptyLayer = this.layerManager.createEmptyLayer(false);
 			this.layerManager.setActiveID(emptyLayer.info.id, false)
 			this.layerManager.imageMergeToLayer(emptyLayer, fabricImage)
 		}

src/components/Canvas/DepthCanvas/manager/LayerManager.ts

@@ -29,13 +29,21 @@ export class LayerManager {
 		const layer = this.getLayerById(id)
 		if (layer) {
 			layer.info.name = name
+		}
+		const object = this.canvasManager.getObjectById(id)
+		if (object) {
+			object.info.name = name
 			this.canvasManager.renderAll()
 		}
 	}
 	setLayerVisibleById(id, visible: boolean) {
 		const layer = this.getLayerById(id)
 		if (layer) {
-			layer.set({
+			layer.visible = visible
+		}
+		const object = this.canvasManager.getObjectById(id)
+		if (object) {
+			object.set({
 				visible: visible
 			})
 			this.canvasManager.renderAll()
@@ -46,6 +54,7 @@ export class LayerManager {
 		if (id === this.activeID.value && isActive) {
 			this.setActiveID(this.layers.value[0]?.info?.id || "")
 		}
+		if (isActive) this.stateManager.recordState()
 	}
 	// 拖拽排序
 	dragSort(id, newIndex) {
@@ -61,24 +70,24 @@ export class LayerManager {
 	}
 
 	/** 设置图层位置-不设置默认居中 */
-	setLayerPosition(layer, options?: any) {
+	setLayerPosition(object, options?: any) {
 		const width = this.canvasManager.canvasWidth
 		const height = this.canvasManager.canvasHeight
 
 		if (options && options.top !== undefined) {
-			layer.set({ top: options.top })
+			object.set({ top: options.top })
 		} else {
-			layer.set({ top: height / 2 - layer.height * layer.scaleY / 2 })
+			object.set({ top: height / 2 - object.height * object.scaleY / 2 })
 		}
 		if (options && options.left !== undefined) {
-			layer.set({ left: options.left })
+			object.set({ left: options.left })
 		} else {
-			layer.set({ left: width / 2 - layer.width * layer.scaleX / 2 })
+			object.set({ left: width / 2 - object.width * object.scaleX / 2 })
 		}
 	}
 	/** 创建空图层 */
-	createEmptyLayer() {
+	createEmptyLayer(isUpdate = true) {
-		const emptyLayer = new fabric.Rect({
+		const emptyObject = new fabric.Rect({
 			width: 0,
 			height: 0,
 			fill: 'transparent',
@@ -87,13 +96,13 @@ export class LayerManager {
 				name: '空图层',
 			}
 		})
-		this.setLayerPosition(emptyLayer)
+		this.setLayerPosition(emptyObject)
-		this.canvasManager.add(emptyLayer)
+		this.canvasManager.add(emptyObject, isUpdate)
-		return emptyLayer
+		return emptyObject
 	}
 	/** 创建文本图层 */
-	createTextLayer(text: string, options?: any) {
+	async createTextLayer(text: string, options?: any) {
-		const textLayer = new fabric.IText(text, {
+		const textObject = new fabric.IText(text, {
 			fontSize: 24,
 			fill: '#000',
 			...(options || {}),
@@ -103,13 +112,13 @@ export class LayerManager {
 				...(options?.info || {}),
 			}
 		})
-		this.setLayerPosition(textLayer, options)
+		this.setLayerPosition(textObject, options)
-		this.canvasManager.add(textLayer)
+		await this.canvasManager.add(textObject)
-		return textLayer
+		return textObject
 	}
 	/** 创建矩形图层 */
-	createRectLayer(options?: any, isActive = false) {
+	async createRectLayer(options?: any, isActive = false) {
-		const rectLayer = new fabric.Rect({
+		const rectObject = new fabric.Rect({
 			width: 100,
 			height: 100,
 			fill: '#000',
@@ -120,14 +129,14 @@ export class LayerManager {
 				...(options?.info || {}),
 			}
 		})
-		this.setLayerPosition(rectLayer, options)
+		this.setLayerPosition(rectObject, options)
-		this.canvasManager.add(rectLayer)
+		await this.canvasManager.add(rectObject)
-		if (isActive) this.setActiveID(rectLayer.info.id)
+		if (isActive) this.setActiveID(rectObject.info.id)
-		return rectLayer
+		return rectObject
 	}
 	/** 创建圆形图层 */
-	createCircleLayer(options?: any, isActive = false) {
+	async createCircleLayer(options?: any, isActive = false) {
-		const circleLayer = new fabric.Circle({
+		const circleObject = new fabric.Circle({
 			radius: 50,
 			fill: '#000',
 			...(options || {}),
@@ -137,17 +146,17 @@ export class LayerManager {
 				...(options?.info || {}),
 			}
 		})
-		this.setLayerPosition(circleLayer, options)
+		this.setLayerPosition(circleObject, options)
-		this.canvasManager.add(circleLayer)
+		await this.canvasManager.add(circleObject)
-		if (isActive) this.setActiveID(circleLayer.info.id)
+		if (isActive) this.setActiveID(circleObject.info.id)
-		return circleLayer
+		return circleObject
 	}
 	/** 创建图片图层 */
 	async createImageLayer(imgOrUrl: string | HTMLImageElement, options?: any) {
 		const canvasWidth = this.canvasManager.canvasWidth
 		const canvasHeight = this.canvasManager.canvasHeight
 
-		const imageLayer = await new Promise((resolve) => {
+		const imageObject = await new Promise((resolve) => {
 			const url = typeof imgOrUrl === 'string' ? imgOrUrl : imgOrUrl.src
 			fabric.Image.fromURL(url, (img) => {
 				const width = img.width
@@ -168,10 +177,10 @@ export class LayerManager {
 				resolve(img)
 			})
 		}) as fabric.Object
-		this.setLayerPosition(imageLayer, options)
+		this.setLayerPosition(imageObject, options)
-		this.canvasManager.add(imageLayer)
+		await this.canvasManager.add(imageObject)
-		this.setActiveID(imageLayer.info.id)
+		this.setActiveID(imageObject.info.id)
-		return imageLayer
+		return imageObject
 	}
 
 
@@ -196,7 +205,7 @@ export class LayerManager {
 		const index = this.canvasManager.getObjects().indexOf(targetLayer);
 		this.deleteLayerById(targetLayer.info.id, false)
 		this.setActiveID(mergedImage.info.id, false)
-		this.canvasManager.add(mergedImage, false);
+		await this.canvasManager.add(mergedImage);
 		this.canvasManager.canvas.moveTo(mergedImage, index);
 		this.canvasManager.renderAll()
 		this.updateLayers()
@@ -216,13 +225,8 @@ export class LayerManager {
 		const object = this.canvasManager.getObjectById(id);
 		if (!object) return;
 		const url = await exportObjectToThumbnail(object);
-		object.set({
+		object.thumbnail = url
-			thumbnail: url
-		})
-		// object.thumbnail = url
 		this.updateLayers()
-		// this.canvasManager.renderAll()
-
 	}
 
 	dispose() { }

src/components/Canvas/DepthCanvas/manager/StateManager.ts

@@ -37,7 +37,10 @@ export class StateManager {
 	}
 
 
-
+	/** 设置是否开始记录状态 */
+	setIsRecord(isRecord: boolean) {
+		this.running.value = !isRecord
+	}
 	/** 清空状态 */
 	clearState(isRecordCurrentState?: boolean) {
 		this.historyList.value = []

src/components/Canvas/DepthCanvas/manager/brushes/brushManager.js

@@ -40,7 +40,8 @@ export class BrushManager {
 		this.brushStore = new BrushState();
 		this.layerManager = options.layerManager; // 添加图层管理器引用
 		this.brushIndicator = options.brushIndicator; // 添加笔刷指示器引用
-		this.t = options.t
+		// this.t = options.t
+		this.t = (v) => v
 
 		// 当前活动笔刷
 		this.activeBrush = null;

src/components/Canvas/DepthCanvas/manager/events/CanvasEventManager.js

@@ -728,14 +728,14 @@ export class CanvasEventManager {
 			// console.log("object:skewing", e);
 			updateLayers(e);
 		});
-		this.canvas.on("object:modified", (e) => {
+		this.canvas.on("object:modified", async (e) => {
 			updateLayers(e);
+			const id = e.target?.info?.id;
+			if (id) await this.layerManager.updateLayerThumbnailsById(id)
 			this.stateManager.recordState();
-			this.layerManager.updateLayerThumbnailsById(e.target.info.id);
 		});
 		this.canvas.on("object:removed", (e) => {
 			updateLayers(e);
-			this.stateManager.recordState();
 		});
 	}
 	setupDoubleClickEvents() {

src/components/Canvas/DepthCanvas/tools/canvasMethod.js

@@ -11,6 +11,7 @@ export async function cloneObjects(objects = []) {
 					height: obj.height,
 					scaleX: obj.scaleX,
 					scaleY: obj.scaleY,
+					angle: obj.angle,
 				})
 				resolve(v)
 			})
@@ -26,10 +27,11 @@ export async function getObjectsBoundingBox(objects = []) {
 	const box1 = { x: Infinity, y: Infinity }
 	const box2 = { x: -Infinity, y: -Infinity }
 	objects.forEach(obj => {
-		box1.x = Math.min(box1.x, obj.left)
+		const rect = obj.getBoundingRect()
-		box1.y = Math.min(box1.y, obj.top)
+		box1.x = Math.min(box1.x, rect.left)
-		box2.x = Math.max(box2.x, obj.left + obj.width * obj.scaleX)
+		box1.y = Math.min(box1.y, rect.top)
-		box2.y = Math.max(box2.y, obj.top + obj.height * obj.scaleY)
+		box2.x = Math.max(box2.x, rect.left + rect.width)
+		box2.y = Math.max(box2.y, rect.top + rect.height)
 	})
 	return {
 		left: box1.x,

src/components/Canvas/FlowCanvas/components/nodes/cards/index.vue

@@ -123,6 +123,7 @@
 	const onGenerateClick = async () => {
 		const data = componentRef.value?.getApiData?.() || {}
 		const subordNode = stateManager.getSubordNodeById(attrs.node.id)
+		const subordNodes = stateManager.getSubordNodes(attrs.node.id)
 		emit('update-data', componentRef.value?.data)
 		if(!attrs.node?.data?.originalImage)console.log('originalImage 找不到原始图片')
 
@@ -131,32 +132,32 @@
 			imageUrl: attrs.node?.data?.originalImage,
 			...data,
 		}
+		console.log(subordNode)
 		const taskList = await currentComponent.value.api(apiData).then((rv)=>{
 			return rv
 		}) || []
 		// const taskList = [{taskId:'123'}]
-		console.log(taskList)
+		// if (!subordNode) {
-		if (!subordNode) {
+		taskList.forEach((item,index) => {
-			taskList.forEach((item,index) => {
+			nodeManager.createResultNode({
-				nodeManager.createResultNode({
+				positionY: (index + subordNodes.length) * (50 + 250),
-					positionY: index * (50 + 250),
+				data: {
+					superiorID: attrs.node.id,
+					createIndexPosition: index,
+					tier: currentComponent.value.tier,
+					isActive: index == 0 && subordNodes.length == 0,
 					data: {
-						superiorID: attrs.node.id,
+						imageProcessTasks:[item],
-						createIndexPosition: index,
+						selectTaskId:item.taskId,
-						tier: currentComponent.value.tier,
-						isActive: index == 0,
-						data: {
-							imageProcessTasks:[item],
-							selectTaskId:item.taskId,
-						}
 					}
-				})
+				}
 			})
-		} else {
+		})
-			subordNode.data.data.url =
+		// } else {
-				'https://s3-alpha-sig.figma.com/img/8ce2/f1a4/12b93da90e5f17109e7430f14837fd14?Expires=1773619200&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=kmLsTFtXJqfvuxj6husWlDkRDMOIRDjzUUjb7zh79GkBKihUHc0f59k5OAImHTPdaiEREUCCpn~8sQ-si5lenuauJpApCmAU~NsxjfQhuh9m5O~GiHenr2fKu0DIJ75-oCE3859fyxoSFXQgZ9PRmeb98kikMR6uRX9nI5TPUHgKO8ZgkhDBTW~iyaDT~1ybnoK7elPa6T2VzfO-bpIyY-MZ71VRq3RxwmZRxduqHEb3Dh-jjrHyh2SoQsHmUjSJOf-uYilfvpGUResZAjAq8ZVLEjvhzKC2bmCNZIp3RmhYO8ctU7pd5t91J6Xaa6jBLtGfMxbqIm652EC79K0RoA__'
+			// subordNode.data.data.url =
-			setTimeout(() => stateManager.recordState())
+			// 	'https://s3-alpha-sig.figma.com/img/8ce2/f1a4/12b93da90e5f17109e7430f14837fd14?Expires=1773619200&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=kmLsTFtXJqfvuxj6husWlDkRDMOIRDjzUUjb7zh79GkBKihUHc0f59k5OAImHTPdaiEREUCCpn~8sQ-si5lenuauJpApCmAU~NsxjfQhuh9m5O~GiHenr2fKu0DIJ75-oCE3859fyxoSFXQgZ9PRmeb98kikMR6uRX9nI5TPUHgKO8ZgkhDBTW~iyaDT~1ybnoK7elPa6T2VzfO-bpIyY-MZ71VRq3RxwmZRxduqHEb3Dh-jjrHyh2SoQsHmUjSJOf-uYilfvpGUResZAjAq8ZVLEjvhzKC2bmCNZIp3RmhYO8ctU7pd5t91J6Xaa6jBLtGfMxbqIm652EC79K0RoA__'
-		}
+			// setTimeout(() => stateManager.recordState())
+		// }
 	}
 	//删除功能卡片
 	const onDeleteClick = ()=>{

src/components/Canvas/FlowCanvas/manager/StateManager.ts

@@ -145,6 +145,8 @@ export class StateManager {
 	setNodesDraggable(v: boolean) { this.nodesDraggable.value = v }
 	/** 设置是否可以平移画布 */
 	setPanOnDrag(v: boolean) { this.panOnDrag.value = v }
+	/** 获取所有下级节点 */
+	getSubordNodes(id: string) { return this.nodes.value.filter((node: NodesItem) => node.data.superiorID === id) }
 	/** 设置节点层级至最顶部 */
 	bringToFont(id) {
 		const fromIndex = this.nodes.value.findIndex(item => item.id === id)

src/components/Canvas/components/base-modal.vue

@@ -26,7 +26,7 @@
 			default: '63vw'
 		}
 	})
-	const showDialog = ref(true)
+	const showDialog = ref(false)
 	const open = (url_: any) => {
 		showDialog.value = true
 	}