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

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

Browse Source
This commit is contained in:
李志鹏
2026-01-14 11:26:53 +08:00
parent dbe4557dc3 bc7099cce2
commit e42975159f
15 changed files with 442 additions and 266 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,26 +2,26 @@
<div class="demo">
<div
class="control"
:class="{ active: item.id === activeId }"
:class="{ active: item.token === activeToken }"
v-for="(item, index) in list"
:key="item.id"
@click="onSelect(item.id)"
:key="item.token"
@click="onSelect(item.token)"
>
<div>
<b>{{ item.name }}</b>
<button
v-if="index !== 0"
@click="onMove(item.id, list[index - 1].id)"
@click="onMove(item.token, list[index - 1].token)"
>
←
</button>
<button
v-if="index !== list.length - 1"
@click="onMove(item.id, list[index + 1].id)"
@click="onMove(item.token, list[index + 1].token)"
>
→
</button>
<button @click.stop="onDelete(item.id)">删除</button>
<button @click.stop="onDelete(item.token)">删除</button>
</div>
<div>
<span>偏移X</span>
@@ -105,10 +105,10 @@
const convertDotNotationToBracket = (str) =>
str.replace(/(?:^|\.)(\d+)(?=\.|$)/g, "[#$1]").replace(/\[#/g, "[");
const activeId = ref("1");
const activeToken = ref("1");
const list = ref([
{
id: "1",
token: "1",
ifSingle: false,
level2Type: "Pattern",
designType: "Library",
@@ -133,7 +133,7 @@
},
},
{
id: "2",
token: "2",
ifSingle: false,
level2Type: "Pattern",
designType: "Library",
@@ -163,42 +163,35 @@
const oldList = ref(deepCopy(list.value));
const pingpuRef = ref(null);
const updateCanvas = (arr) => {
console.log(arr);
oldList.value = deepCopy(list.value);
arr.forEach((item) => {
list.value.forEach((v) => {
const obj = list.value.find((v) => v.token === item.token);
if (item.action === ACTIONS.UPDATE) {
if (item.action === ACTIONS.UPDATE) {
if (v.id === item.id) {
if (item.action === ACTIONS.UPDATE) {
try {
const key = item.key;
const str = /^\[/.test(item.key)
? "v" + key
: "v." + key;
eval(`${str} = item.value`);
} catch (error) {
console.error(error);
}
}
try {
const key = item.key;
const str = /^\[/.test(item.key)
? "obj" + key
: "obj." + key;
eval(`${str} = item.value`);
} catch (error) {
console.error(error);
}
} else if (item.action === ACTIONS.SELECT) {
activeId.value = item.id;
}
});
} else if (item.action === ACTIONS.SELECT) {
activeToken.value = item.token;
}
});
};
const onSelect = (id) => {
activeId.value = id;
pingpuRef.value.updataList([
{
id: id,
action: ACTIONS.SELECT,
},
]);
const onSelect = (token) => {
activeToken.value = token;
pingpuRef.value.updataList([{ token, action: ACTIONS.SELECT }]);
};
const onMove = (id, id2) => {
const obj1 = list.value.find((v) => v.id === id);
const obj2 = list.value.find((v) => v.id === id2);
const onMove = (token1, token2) => {
const obj1 = list.value.find((v) => v.token === token1);
const obj2 = list.value.find((v) => v.token === token2);
const index1 = list.value.indexOf(obj1);
const index2 = list.value.indexOf(obj2);
if (index1 < index2) {
@@ -206,26 +199,16 @@
} else {
list.value.splice(index1, 0, list.value.splice(index2, 1)[0]);
}
const ids = list.value.map((v) => v.id);
pingpuRef.value.updataList([
{
action: ACTIONS.SORT,
ids,
},
]);
const tokens = list.value.map((v) => v.token);
pingpuRef.value.updataList([{ action: ACTIONS.SORT, tokens }]);
};
const onDelete = (id) => {
list.value = list.value.filter((v) => v.id !== id);
pingpuRef.value.updataList([
{
id: id,
action: ACTIONS.DELETE,
},
]);
const onDelete = (token) => {
list.value = list.value.filter((v) => v.token !== token);
pingpuRef.value.updataList([{ token, action: ACTIONS.DELETE }]);
};
const onAdd = () => {
const obj = {
id: Date.now().toString(),
token: Date.now().toString(),
ifSingle: false,
level2Type: "Pattern",
designType: "Library",
@@ -250,12 +233,7 @@
},
};
list.value.push(obj);
pingpuRef.value.updataList([
{
action: ACTIONS.ADD,
data: obj,
},
]);
pingpuRef.value.updataList([{ action: ACTIONS.ADD, data: obj }]);
};
watch(
() => list.value,
@@ -266,20 +244,20 @@
const updateList = () => {
const changeList = [];
oldList.value.forEach((oldItem) => {
const newItem = list.value.find((v) => v.id === oldItem.id);
const newItem = list.value.find((v) => v.token === oldItem.token);
if (newItem) {
const arr = findDiffProps(oldItem, newItem);
arr.forEach((item) => {
changeList.push({
...item,
id: oldItem.id,
token: oldItem.token,
action: ACTIONS.UPDATE,
key: convertDotNotationToBracket(item.key),
});
});
} else {
changeList.push({
id: oldItem.id,
token: oldItem.token,
action: ACTIONS.DELETE,
});
}

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

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