平铺画布更改

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

@@ -35,10 +35,11 @@
 	};
 	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);
@@ -46,7 +47,7 @@
 	onMounted(async () => {
 		initCanvas();
 		// taskQueue.addTask(async () => await setCanvasData());
-		emit("init-canvas", props.list);
+		emit("init-canvas", list.value);
 		let throttleDelay = 100;
 		let trailingTimeout = null;
 		observer.value = new ResizeObserver((entries) => {
@@ -168,9 +169,9 @@
 	};
 	const setCanvasData = async () => {
 		canvas.clear();
-		console.log("OverallCanvas: setCanvasData", props.list);
+		console.log("OverallCanvas: setCanvasData", list.value);
-		for (let i = 0; i < props.list.length; i++) {
+		for (let i = 0; i < list.value.length; i++) {
-			let item = props.list[i];
+			let item = list.value[i];
 			await addObject(item);
 		}
 		canvas.renderAll();
@@ -225,12 +226,12 @@
 		});
 		return pattern;
 	};
-	const updataList = async (list) => {
+	const updataList = async (list_) => {
-		const cd = async (list) => {
+		const cd = async (list_) => {
-			console.log("OverallCanvas: updataList", 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;
@@ -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,20 +288,26 @@
 				} 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));
+		taskQueue.addTask(async () => await cd(list_));
 	};
 	defineExpose({
 		updataList,