魔墙:添加多选的键盘移动
This commit is contained in:
parent
330c8a205e
commit
c0b97255d3
|
@ -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++;
|
||||||
|
}
|
||||||
|
},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue