Merge branch 'dev_vite' of http://18.167.251.121:10003/aidlab/aida_front into dev_vite

src/component/Canvas/OverallCanvas/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="pingpu" ref="el"><canvas ref="canvasRef"></canvas></div>
+	<div class="overall-canvas" ref="el"><canvas ref="canvasRef"></canvas></div>
 </template>
 
 <script setup>
@@ -100,23 +100,23 @@
 		const object = e.target;
 		const action = e.action;
 		const list = [];
-		const id = object.id;
+		const token = object.token;
 		if (action === "drag" || action === "rotate") {
 			list.push({
-				id: id,
+				token,
 				action: ACTIONS.UPDATE,
 				key: KEYS.O_TOP,
 				value: object.top,
 			});
 			list.push({
-				id: id,
+				token,
 				action: ACTIONS.UPDATE,
 				key: KEYS.O_LEFT,
 				value: object.left,
 			});
 			if (action === "rotate") {
 				list.push({
-					id: id,
+					token,
 					action: ACTIONS.UPDATE,
 					key: KEYS.O_ANGLE,
 					value: object.angle,
@@ -124,13 +124,13 @@
 			}
 		} else if (action === "scale") {
 			list.push({
-				id: id,
+				token,
 				action: ACTIONS.UPDATE,
 				key: KEYS.O_SCALE_X,
 				value: object.scaleX,
 			});
 			list.push({
-				id: id,
+				token,
 				action: ACTIONS.UPDATE,
 				key: KEYS.O_SCALE_Y,
 				value: object.scaleY,
@@ -140,13 +140,8 @@
 	};
 	// 对象选中
 	const onObjectSelected = (e) => {
-		const id = e.selected[0].id;
-		const list = [
-			{
-				id: id,
-				action: ACTIONS.SELECT,
-			},
-		];
+		const token = e.selected[0].token;
+		const list = [{ token, action: ACTIONS.SELECT }];
 		emit("change-canvas", list);
 	};
 	const urlToCanvas = (url) => {
@@ -181,7 +176,7 @@
 		const cheight = canvas.height;
 		let pattern = await setFill(item);
 		let rect = new fabric.Rect({
-			id: item.id,
+			token: item.token,
 			width: cwidth,
 			height: cheight,
 			fill: pattern,
@@ -191,7 +186,6 @@
 	};
 	const setFill = async (item) => {
 		if (!item) return null;
-		console.log(item.scale);
 		const cwidth = canvas.width;
 		const cheight = canvas.height;
 		let image = await urlToCanvas(item.path);
@@ -225,12 +219,13 @@
 		return pattern;
 	};
 	const updataList = async (list) => {
+		console.log(list);
 		const objects = canvas.getObjects();
-		// list.forEach((item) => {
 		for (let i = 0; i < list.length; i++) {
 			let item = list[i];
-			let object = objects.find((o) => o.id === item.id);
+			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:
@@ -274,18 +269,17 @@
 						break;
 				}
 			} else if (item.action === ACTIONS.SELECT) {
-				canvas.setActiveObject(object);
+				if (object) canvas.setActiveObject(object);
 			} else if (item.action === ACTIONS.SORT) {
-				let ids = item.ids;
+				let tokens = item.tokens;
 				canvas.clear();
-				for (let j = 0; j < ids.length; j++) {
-					let id = ids[j];
-					let object = objects.find((o) => o.id === id);
-					canvas.add(object);
+				for (let j = 0; j < tokens.length; j++) {
+					let object = objects.find((o) => o.token === tokens[j]);
+					if (object) canvas.add(object);
 				}
 				canvas.renderAll();
 			} else if (item.action === ACTIONS.DELETE) {
-				canvas.remove(object);
+				if (object) canvas.remove(object);
 			} else if (item.action === ACTIONS.ADD) {
 				await addObject(item.data);
 			}
@@ -298,7 +292,7 @@
 </script>
 
 <style lang='less' scoped>
-	.pingpu {
+	.overall-canvas {
 		width: 100%;
 		height: 100%;
 	}