Fix issues with support for touch-devices

This commit is contained in:
Jan Oberhauser 2020-10-23 18:15:52 +02:00
parent e48c9b2dc0
commit c40601eecb
3 changed files with 26 additions and 15 deletions

View file

@ -1,6 +1,6 @@
<template>
<div class="node-wrapper" :style="nodePosition">
<div class="node-default" :ref="data.name" :style="nodeStyle" :class="nodeClass" @dblclick="setNodeActive" @click.left="mouseLeftClick" v-touch:end="mouseLeftClick">
<div class="node-default" :ref="data.name" :style="nodeStyle" :class="nodeClass" @dblclick="setNodeActive" @click.left="mouseLeftClick" v-touch:end="touchEnd">
<div v-if="hasIssues" class="node-info-icon node-issues">
<el-tooltip placement="top" effect="light">
<div slot="content" v-html="nodeIssues"></div>

View file

@ -333,19 +333,27 @@ export const nodeBase = mixins(
});
},
mouseLeftClick (e: MouseEvent) {
if (this.$store.getters.isActionActive('dragActive')) {
this.$store.commit('removeActiveAction', 'dragActive');
} else {
if (this.isCtrlKeyPressed(e) === false) {
this.$emit('deselectAllNodes');
touchEnd(e: MouseEvent) {
if (this.isTouchDevice) {
if (this.$store.getters.isActionActive('dragActive')) {
this.$store.commit('removeActiveAction', 'dragActive');
}
if (this.$store.getters.isNodeSelected(this.data.name)) {
this.$emit('deselectNode', this.name);
}
},
mouseLeftClick (e: MouseEvent) {
if (!this.isTouchDevice) {
if (this.$store.getters.isActionActive('dragActive')) {
this.$store.commit('removeActiveAction', 'dragActive');
} else {
this.$emit('nodeSelected', this.name);
if (this.isCtrlKeyPressed(e) === false) {
this.$emit('deselectAllNodes');
}
if (this.$store.getters.isNodeSelected(this.data.name)) {
this.$emit('deselectNode', this.name);
} else {
this.$emit('nodeSelected', this.name);
}
}
}
},

View file

@ -7,7 +7,7 @@
@touchend="mouseUp"
@touchmove="mouseMoveNodeWorkflow"
@mousedown="mouseDown"
v-touch:tap="mouseDown"
v-touch:tap="touchTap"
@mouseup="mouseUp"
@wheel="wheelScroll"
>
@ -340,9 +340,12 @@ export default mixins(
await this.addNodes(data.nodes, data.connections);
},
touchTap (e: MouseEvent | TouchEvent) {
if (this.isTouchDevice) {
this.mouseDown(e);
}
},
mouseDown (e: MouseEvent | TouchEvent) {
console.log('mouseDown');
// Save the location of the mouse click
const position = this.getMousePosition(e);
const offsetPosition = this.$store.getters.getNodeViewOffsetPosition;