魔墙:添加多选的键盘移动

This commit is contained in:
miao 2022-12-28 16:25:22 +08:00
parent 330c8a205e
commit c0b97255d3
1 changed files with 88 additions and 14 deletions

View File

@ -3,6 +3,7 @@
persistent persistent
v-model="show_dialog" v-model="show_dialog"
@before-hide="resetData" @before-hide="resetData"
@keydown=" @keydown="
(evt) => { (evt) => {
if (!loading && evt.keyCode == 27) { if (!loading && evt.keyCode == 27) {
@ -12,13 +13,24 @@
sub_x(); sub_x();
} }
if(evt.keyCode==38){// if(evt.keyCode==38){//
add_y(); sub_y();
} }
if(evt.keyCode==39){// if(evt.keyCode==39){//
add_x(); add_x();
} }
if(evt.keyCode==40){// if(evt.keyCode==40){//
sub_y(); add_y();
}
if(evt.keyCode==17){//ctrl
multiple=true;
}
}
"
@keyup="
(evt) => {
if(evt.keyCode==17){//ctrl
multiple=false;
} }
} }
@ -304,6 +316,9 @@
</q-list> </q-list>
</q-popup-proxy> </q-popup-proxy>
{{ item.uuid }} {{ item.uuid }}
<q-separator ></q-separator>
x:{{ item.centerx }}
y:{{ item.centery }}
</div> </div>
</vue3-resize-drag> </vue3-resize-drag>
</div> </div>
@ -541,7 +556,7 @@ export default defineComponent({
height: 0, height: 0,
angle: 0, angle: 0,
}); });
let multiple=ref(false);
const aw = 128; const aw = 128;
const ah = 72; const ah = 72;
const bw = 160; const bw = 160;
@ -637,6 +652,7 @@ export default defineComponent({
} }
}; };
let test_monitor_wall: Ref<test_monitor[]> = ref([]); let test_monitor_wall: Ref<test_monitor[]> = ref([]);
let multiple_select:Ref<number[]>=ref([]);
const set_x = () => { const set_x = () => {
const wall_dom = wall.value; const wall_dom = wall.value;
const item = test_monitor_wall.value[current_index.value]; const item = test_monitor_wall.value[current_index.value];
@ -890,6 +906,8 @@ export default defineComponent({
} }
}); });
return { return {
multiple_select,
multiple,
exceedrange, exceedrange,
max_angle, max_angle,
four_point, four_point,
@ -929,6 +947,7 @@ export default defineComponent({
let sizeh = wall_dom.offsetHeight / element.background_h; let sizeh = wall_dom.offsetHeight / element.background_h;
let sizew = wall_dom.offsetWidth / element.background_w; let sizew = wall_dom.offsetWidth / element.background_w;
item.currentx = element.lt.x * wall_dom.offsetWidth; item.currentx = element.lt.x * wall_dom.offsetWidth;
item.currenty = element.lt.y * wall_dom.offsetHeight;
percenter.value = parseFloat(element.percenter.toString()); percenter.value = parseFloat(element.percenter.toString());
item.InitialH = element.initial_h * sizeh; item.InitialH = element.initial_h * sizeh;
item.InitialW = element.initial_w * sizew; item.InitialW = element.initial_w * sizew;
@ -957,6 +976,8 @@ export default defineComponent({
test_monitor_wall.value = []; test_monitor_wall.value = [];
current_index.value = -1; current_index.value = -1;
percenter.value = 1; percenter.value = 1;
multiple_select.value=[]
multiple.value=false;
test_monitor_list.value.forEach((element) => { test_monitor_list.value.forEach((element) => {
element.isHide = false; element.isHide = false;
}); });
@ -1017,12 +1038,25 @@ export default defineComponent({
activeMouseDown(item: test_monitor, index: number) { activeMouseDown(item: test_monitor, index: number) {
item.active = true; item.active = true;
Unchecked.value = false; Unchecked.value = false;
if (item.active) { if(multiple.value){
test_monitor_wall.value.forEach((element) => { if( multiple_select.value.indexOf(item.id)!=-1){
element.active = false; test_monitor_wall.value[item.id].active=false;
}); multiple_select.value[multiple_select.value.indexOf(item.id)]=-1;
}else{
multiple_select.value.push(item.id);
test_monitor_wall.value[item.id].active=true;
current_index.value = index;
}
}else{
multiple_select.value=[]
if (item.active) {
test_monitor_wall.value.forEach((element) => {
element.active = false;
});
multiple_select.value.push(item.id);
}
item.active = true;
} }
item.active = true;
current_index.value = index; current_index.value = index;
}, },
onDragStart(e: DragEvent, item: test_monitor) { onDragStart(e: DragEvent, item: test_monitor) {
@ -1190,6 +1224,8 @@ export default defineComponent({
element.active = false; element.active = false;
}); });
} }
multiple_select.value=[]
multiple.value=false;
}, },
changeAngle() { changeAngle() {
const wall_dom = wall.value; const wall_dom = wall.value;
@ -1197,26 +1233,64 @@ export default defineComponent({
exceedrange(item); exceedrange(item);
}, },
sub_x(){ sub_x(){
console.log(111)
let item = test_monitor_wall.value[current_index.value] let item = test_monitor_wall.value[current_index.value]
item.currentx--; if(multiple_select.value.length>1){
item.centerx--; multiple_select.value.forEach((element)=>{
if(element!=-1){
test_monitor_wall.value[element].currentx--;
test_monitor_wall.value[element].centerx--;
}
})
}else{
item.currentx--;
item.centerx--;
}
}, },
sub_y(){ sub_y(){
let item = test_monitor_wall.value[current_index.value] let item = test_monitor_wall.value[current_index.value]
if(multiple_select.value.length>1){
multiple_select.value.forEach((element)=>{
if(element!=-1){
test_monitor_wall.value[element].currenty--;
test_monitor_wall.value[element].centery--;
}
})
}else{
item.currenty--; item.currenty--;
item.centery--; item.centery--;
}
}, },
add_x(){ add_x(){
let item = test_monitor_wall.value[current_index.value] let item = test_monitor_wall.value[current_index.value]
if(multiple_select.value.length>1){
multiple_select.value.forEach((element)=>{
if(element!=-1){
test_monitor_wall.value[element].currentx++;
test_monitor_wall.value[element].centerx++;
}
})
}else{
item.currentx++; item.currentx++;
item.centerx++; item.centerx++;
}
}, },
add_y(){ add_y(){
let item = test_monitor_wall.value[current_index.value] let item = test_monitor_wall.value[current_index.value]
item.currenty++; if(multiple_select.value.length>1){
item.centery++; multiple_select.value.forEach((element)=>{
} if(element!=-1){
test_monitor_wall.value[element].currenty++;
test_monitor_wall.value[element].centery++;
}
})
}else{
item.currenty++;
item.centery++;
}
},
}; };
}, },
}); });