token

src/component/Canvas/OverallCanvas/demo.vue

@@ -25,49 +25,95 @@
 			</div>
 			<div>
 				<span>偏移X</span>
-				<input type="number" v-model="item.location[0]" />
+				<input
+					type="number"
+					v-model="item.location[0]"
+					@input="updateList(item, 'location[0]', item.location[0])"
+				/>
 			</div>
 			<div>
 				<span>偏移Y</span>
-				<input type="number" v-model="item.location[1]" />
+				<input
+					type="number"
+					v-model="item.location[1]"
+					@input="updateList(item, 'location[1]', item.location[1])"
+				/>
 			</div>
 			<div>
 				<span>角度</span>
-				<input type="number" v-model="item.angle" />
+				<input
+					type="number"
+					v-model="item.angle"
+					@input="updateList(item, 'angle', item.angle)"
+				/>
 			</div>
 			<div>
 				<span>缩放</span>
-				<input type="number" v-model="item.scale[0]" />
+				<input
+					type="number"
+					v-model="item.scale[0]"
+					@input="updateList(item, 'scale[0]', item.scale[0])"
+				/>
 			</div>
 			<div>
 				<span>水平间距</span>
-				<input type="number" v-model="item.object.gapX" />
+				<input
+					type="number"
+					v-model="item.object.gapX"
+					@input="updateList(item, 'object.gapX', item.object.gapX)"
+				/>
 			</div>
 			<div>
 				<span>垂直间距</span>
-				<input type="number" v-model="item.object.gapY" />
+				<input
+					type="number"
+					v-model="item.object.gapY"
+					@input="updateList(item, 'object.gapY', item.object.gapY)"
+				/>
 			</div>
 			<hr />
 			<hr />
 			<div>
 				<span>缩放X</span>
-				<input type="number" v-model="item.object.scaleX" step="0.1" />
+				<input
+					type="number"
+					v-model="item.object.scaleX"
+					step="0.1"
+					@input="updateList(item, 'object.scaleX', item.object.scaleX)"
+				/>
 			</div>
 			<div>
 				<span>缩放Y</span>
-				<input type="number" v-model="item.object.scaleY" step="0.1" />
+				<input
+					type="number"
+					v-model="item.object.scaleY"
+					step="0.1"
+					@input="updateList(item, 'object.scaleY', item.object.scaleY)"
+				/>
 			</div>
 			<div>
 				<span>X</span>
-				<input type="number" v-model="item.object.left" />
+				<input
+					type="number"
+					v-model="item.object.left"
+					@input="updateList(item, 'object.left', item.object.left)"
+				/>
 			</div>
 			<div>
 				<span>Y</span>
-				<input type="number" v-model="item.object.top" />
+				<input
+					type="number"
+					v-model="item.object.top"
+					@input="updateList(item, 'object.top', item.object.top)"
+				/>
 			</div>
 			<div>
 				<span>角度</span>
-				<input type="number" v-model="item.object.angle" />
+				<input
+					type="number"
+					v-model="item.object.angle"
+					@input="updateList(item, 'object.angle', item.object.angle)"
+				/>
 			</div>
 
 			<div>
@@ -78,6 +124,7 @@
 					step="0.1"
 					min="0"
 					max="1"
+					@input="updateList(item, 'object.opacity', item.object.opacity)"
 				/>
 			</div>
 		</div>
@@ -235,51 +282,17 @@
 		list.value.push(obj);
 		pingpuRef.value.updataList([{ action: ACTIONS.ADD, data: obj }]);
 	};
-	watch(
-		() => list.value,
-		() => updateList(),
-		{ deep: true }
-	);
 	// 监听列表变化属性变更
-	const updateList = () => {
+	const updateList = (item, key, value) => {
-		const changeList = [];
+		if(key === "scale[0]") item.scale[1] = value;
-		oldList.value.forEach((oldItem) => {
+		pingpuRef.value.updataList([
-			const newItem = list.value.find((v) => v.token === oldItem.token);
+			{
-			if (newItem) {
+				token: item.token,
-				const arr = findDiffProps(oldItem, newItem);
+				action: ACTIONS.UPDATE,
-				arr.forEach((item) => {
+				key,
-					changeList.push({
+				value,
-						...item,
+			},
-						token: oldItem.token,
+		]);
-						action: ACTIONS.UPDATE,
-						key: convertDotNotationToBracket(item.key),
-					});
-				});
-			} else {
-				changeList.push({
-					token: oldItem.token,
-					action: ACTIONS.DELETE,
-				});
-			}
-		});
-		oldList.value = deepCopy(list.value);
-		if (changeList.length) {
-			pingpuRef.value.updataList(changeList);
-		}
-	};
-	// 递归查找不同的属性
-	const findDiffProps = (obj1, obj2, diffProps = [], path = "") => {
-		for (const key in obj1) {
-			if (typeof obj1[key] === "object") {
-				findDiffProps(obj1[key], obj2[key], diffProps, `${path}${key}.`);
-			} else if (obj1[key] !== obj2[key]) {
-				diffProps.push({
-					key: `${path}${key}`,
-					value: obj2[key],
-				});
-			}
-		}
-		return diffProps;
 	};
 </script>
 

src/component/Canvas/OverallCanvas/index.vue

@@ -263,7 +263,7 @@
 					case KEYS.FILL_GAPX:
 					case KEYS.FILL_GAPY:
 						let pattern = await setFill(
-							props.list.find((v) => v.id === item.id)
+							props.list.find((v) => v.token === item.token)
 						);
 						object.set("fill", pattern);
 						break;