mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

⚡ Fix issues with support for touch-devices

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/editor-ui/src/components/Node.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div class="node-wrapper" :style="nodePosition"> <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"> <div v-if="hasIssues" class="node-info-icon node-issues">
<el-tooltip placement="top" effect="light"> <el-tooltip placement="top" effect="light">
<div slot="content" v-html="nodeIssues"></div> <div slot="content" v-html="nodeIssues"></div>

30
packages/editor-ui/src/components/mixins/nodeBase.ts
View file

@ -333,19 +333,27 @@ export const nodeBase = mixins(
}); });
}, },
touchEnd(e: MouseEvent) {
mouseLeftClick (e: MouseEvent) { if (this.isTouchDevice) {
if (this.$store.getters.isActionActive('dragActive')) { if (this.$store.getters.isActionActive('dragActive')) {
this.$store.commit('removeActiveAction', 'dragActive'); this.$store.commit('removeActiveAction', 'dragActive');
} else {
if (this.isCtrlKeyPressed(e) === false) {
this.$emit('deselectAllNodes');
} }
}
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 { } 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);
}
} }
} }
}, },

9
packages/editor-ui/src/views/NodeView.vue
View file

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