Merge branch 'dev_vite' of ssh://18.167.251.121:10002/aidlab/aida_front into dev_vite

src/component/Canvas/OverallCanvas/demo.vue

@@ -137,7 +137,6 @@
 		<button @click="onAdd">添加</button>
 		<div class="box">
 			<pingpu
-				:list="list"
 				ref="pingpuRef"
 				:width="600"
 				:height="900"
@@ -161,58 +160,7 @@
 	const convertDotNotationToBracket = (str) =>
 		str.replace(/(?:^|\.)(\d+)(?=\.|$)/g, "[#$1]").replace(/\[#/g, "[");
 	const activeToken = ref("1");
-	const list = ref([
+	const list = ref([]);
-		{
-			token: "1",
-			ifSingle: false,
-			level2Type: "Pattern",
-			designType: "Library",
-			path: "/src/assets/images/canvas/yinhua1.jpg",
-			location: [0, 0],
-			scale: [1, 1],
-			angle: 0,
-			name: "Print1",
-			priority: 1,
-			object: {
-				top: 0,
-				left: 0,
-				scaleX: 1,
-				scaleY: 1,
-				opacity: 1,
-				angle: 0,
-				flipX: false,
-				flipY: false,
-				blendMode: "multiply",
-				gapX: 10,
-				gapY: 20,
-			},
-		},
-		{
-			token: "2",
-			ifSingle: false,
-			level2Type: "Pattern",
-			designType: "Library",
-			path: "/src/assets/images/canvas/yinhua1.jpg",
-			location: [0, 0],
-			scale: [2, 2],
-			angle: -45,
-			name: "Print2",
-			priority: 1,
-			object: {
-				top: 450,
-				left: 300,
-				scaleX: 0.5,
-				scaleY: 0.5,
-				opacity: 1,
-				angle: 0,
-				flipX: false,
-				flipY: false,
-				blendMode: "multiply",
-				gapX: 0,
-				gapY: 0,
-			},
-		},
-	]);
 	// 深拷贝
 	const deepCopy = (obj) => JSON.parse(JSON.stringify(obj));
 	const oldList = ref(deepCopy(list.value));

src/component/Canvas/OverallCanvas/index.vue

@@ -3,8 +3,11 @@
 </template>
 
 <script setup>
+	import TaskQueue from "../utils/TaskQueue.js";
 	import { fabric } from "fabric-with-all";
-	import { ref, watch, onMounted } from "vue";
+	import { ref, watch, onMounted, nextTick } from "vue";
+	// 任务队列
+	const taskQueue = new TaskQueue();
 	const KEYS = {
 		FILL_X: "location[0]",
 		FILL_Y: "location[1]",
@@ -32,45 +35,36 @@
 	};
 	const emit = defineEmits(["change-canvas", "init-canvas"]);
 	const props = defineProps({
-		list: { type: Array, default: () => [] },
+		// list: { type: Array, default: () => [] },
 		width: { type: Number, required: true },
 		height: { type: Number, required: true },
 	});
+	const list = ref([]);
 	const el = ref(null);
 	const canvasRef = ref(null);
 	const observer = ref(null);
 	var canvas = null;
 	onMounted(async () => {
 		initCanvas();
-		// await setCanvasData();
+		// taskQueue.addTask(async () => await setCanvasData());
-		let throttleTimeout = null;
+		emit("init-canvas", list.value);
-		let lastRunTime = 0;
+		let throttleDelay = 100;
 		let trailingTimeout = null;
 		observer.value = new ResizeObserver((entries) => {
-			const now = Date.now();
-			const throttleDelay = 100;
-			if (!throttleTimeout) {
-				updateCanvasSize();
-				lastRunTime = now;
-				throttleTimeout = setTimeout(() => {
-					throttleTimeout = null;
-				}, throttleDelay);
-			} else {
 			clearTimeout(trailingTimeout);
 			trailingTimeout = setTimeout(() => {
-					updateCanvasSize();
+				console.log("OverallCanvas: resize");
-					lastRunTime = Date.now();
+				taskQueue.addTask(async () => await updateCanvasSize());
 			}, throttleDelay);
-			}
 		});
 		observer.value.observe(el.value);
-		emit("init-canvas", props.list);
 	});
 	onBeforeUnmount(() => {
 		observer.value.disconnect();
 		unbindEvent();
 	});
 	const initCanvas = () => {
+		console.log("OverallCanvas: initCanvas");
 		canvas = new fabric.Canvas(canvasRef.value, {
 			selection: false,
 			preserveObjectStacking: true,
@@ -80,7 +74,7 @@
 		bindEvent();
 	};
 	const updateCanvasSize = async () => {
-		console.log('========','updataCanvasSize')
+		console.log("OverallCanvas: updateCanvasSize");
 		canvas.setWidth(el.value.offsetWidth);
 		canvas.setHeight(el.value.offsetHeight);
 		await setCanvasData();
@@ -99,7 +93,7 @@
 	};
 	// 处理对象修改事件
 	const onObjectModified = (e) => {
-		console.log(e);
+		console.log("OverallCanvas: onObjectModified", e);
 		const object = e.target;
 		const action = e.action;
 		const list = [];
@@ -175,8 +169,9 @@
 	};
 	const setCanvasData = async () => {
 		canvas.clear();
-		for (let i = 0; i < props.list.length; i++) {
+		console.log("OverallCanvas: setCanvasData", list.value);
-			let item = props.list[i];
+		for (let i = 0; i < list.value.length; i++) {
+			let item = list.value[i];
 			await addObject(item);
 		}
 		canvas.renderAll();
@@ -195,7 +190,6 @@
 			left: item.object.left / (props.width / canvas.width),
 			onDelete: (v) => onDeleteItem(v),
 		});
-		console.log("==========", props)
 		canvas.add(rect);
 	};
 	const setFill = async (item) => {
@@ -232,21 +226,28 @@
 		});
 		return pattern;
 	};
-	const updataList = async (list) => {
+	const updataList = async (list_) => {
-		console.log(list);
+		const cd = async (list_) => {
+			console.log("OverallCanvas: updataList", list_);
 			const objects = canvas.getObjects();
-		for (let i = 0; i < list.length; i++) {
+			for (let i = 0; i < list_.length; i++) {
-			let item = list[i];
+				let item = list_[i];
 				let object = objects.find((o) => o.token === item.token);
 				if (item.action === ACTIONS.UPDATE) {
 					if (!object) continue;
 					let value = item.value;
 					switch (item.key) {
 						case KEYS.O_TOP:
-						object.set("top", value / (props.height / canvas.height));
+							object.set(
+								"top",
+								value / (props.height / canvas.height)
+							);
 							break;
 						case KEYS.O_LEFT:
-						object.set("left", value / (props.width / canvas.width));
+							object.set(
+								"left",
+								value / (props.width / canvas.width)
+							);
 							break;
 						case KEYS.O_OPACITY:
 							object.set("opacity", value);
@@ -277,7 +278,7 @@
 						case KEYS.FILL_GAPX:
 						case KEYS.FILL_GAPY:
 							let pattern = await setFill(
-							props.list.find((v) => v.token === item.token)
+								list.value.find((v) => v.token === item.token)
 							);
 							object.set("fill", pattern);
 							break;
@@ -287,19 +288,27 @@
 				} else if (item.action === ACTIONS.SORT) {
 					let tokens = item.tokens;
 					canvas.clear();
+					const list_ = [];
 					for (let j = 0; j < tokens.length; j++) {
+						let item_ = list.value.find((v) => v.token === tokens[j]);
+						if (item_) list_.push(item_);
 						let object = objects.find((o) => o.token === tokens[j]);
 						if (object) canvas.add(object);
 					}
+					list.value = list_;
 					canvas.renderAll();
 				} else if (item.action === ACTIONS.DELETE) {
+					list.value = list.value.filter((v) => v.token !== item.token);
 					if (object) canvas.remove(object);
 				} else if (item.action === ACTIONS.ADD) {
+					list.value.push(item.data);
 					await addObject(item.data);
 				}
 			}
 			canvas.renderAll();
 		};
+		taskQueue.addTask(async () => await cd(list_));
+	};
 	defineExpose({
 		updataList,
 	});

src/component/Canvas/utils/TaskQueue.js

@@ -0,0 +1,28 @@
+export default class TaskQueue {
+	constructor() {
+		this.tasks = [];
+		this.running = false;
+	}
+	// 添加任务
+	addTask(task) {
+		this.tasks.push(task);
+		// 执行任务
+		this.executeTasks();
+	}
+	// 执行任务
+	async executeTasks() {
+		if (this.running) {
+			return;
+		}
+		this.running = true;
+		for (const task of this.tasks) {
+			await task();
+		}
+		this.running = false;
+		this.clearTasks();
+	}
+	// 清空任务队列
+	clearTasks() {
+		this.tasks = [];
+	}
+}