aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

token

Browse Source
This commit is contained in:
李志鹏
2026-01-14 15:08:25 +08:00
parent 7bf1a0bd57
commit 9912f310ec
2 changed files with 69 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
src/component/Canvas/OverallCanvas/demo.vue
View File

@@ -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 changeList = [];
oldList.value.forEach((oldItem) => {
const newItem = list.value.find((v) => v.token === oldItem.token);
if (newItem) {
const arr = findDiffProps(oldItem, newItem);
arr.forEach((item) => {
changeList.push({
...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;
const updateList = (item, key, value) => {
if(key === "scale[0]") item.scale[1] = value;
pingpuRef.value.updataList([
{
token: item.token,
action: ACTIONS.UPDATE,
key,
value,
},
]);
};
</script>

2
src/component/Canvas/OverallCanvas/index.vue
View File

@@ -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;