mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-11-10 14:44:05 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

🐛 Fix issue that nodes can not be opened in readOnly-Mode

Browse source
This commit is contained in:
Jan Oberhauser 2020-06-08 00:34:15 +02:00
parent afe0d16a9a
commit 9cae58c787
1 changed files with 58 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -29,12 +29,6 @@ export const nodeBase = mixins(nodeIndex).extend({
isMacOs (): boolean { isMacOs (): boolean {
return /(ipad|iphone|ipod|mac)/i.test(navigator.platform); return /(ipad|iphone|ipod|mac)/i.test(navigator.platform);
}, },
isReadOnly (): boolean {
if (['NodeViewExisting', 'NodeViewNew'].includes(this.$route.name as string)) {
return false;
}
return true;
},
nodeName (): string { nodeName (): string {
return NODE_NAME_PREFIX + this.nodeIndex; return NODE_NAME_PREFIX + this.nodeIndex;
}, },
@ -276,63 +270,71 @@ export const nodeBase = mixins(nodeIndex).extend({
this.instance.addEndpoint(this.nodeName, newEndpointData); this.instance.addEndpoint(this.nodeName, newEndpointData);
}); });
if (this.isReadOnly === false) { // TODO: This caused problems with displaying old information
// Make nodes draggable // https://github.com/jsplumb/katavorio/wiki
this.instance.draggable(this.nodeName, { // https://jsplumb.github.io/jsplumb/home.html
grid: [10, 10], // Make nodes draggable
start: (params: { e: MouseEvent }) => { this.instance.draggable(this.nodeName, {
if (params.e && !this.$store.getters.isNodeSelected(this.data.name)) { grid: [10, 10],
// Only the node which gets dragged directly gets an event, for all others it is start: (params: { e: MouseEvent }) => {
// undefined. So check if the currently dragged node is selected and if not clear if (this.isReadOnly === true) {
// the drag-selection. // Do not allow to move nodes in readOnly mode
this.instance.clearDragSelection(); return false;
this.$store.commit('resetSelectedNodes'); }
if (params.e && !this.$store.getters.isNodeSelected(this.data.name)) {
// Only the node which gets dragged directly gets an event, for all others it is
// undefined. So check if the currently dragged node is selected and if not clear
// the drag-selection.
this.instance.clearDragSelection();
this.$store.commit('resetSelectedNodes');
}
this.$store.commit('addActiveAction', 'dragActive');
return true;
},
stop: (params: { e: MouseEvent }) => {
if (this.$store.getters.isActionActive('dragActive')) {
const moveNodes = this.$store.getters.getSelectedNodes.slice();
const selectedNodeNames = moveNodes.map((node: INodeUi) => node.name);
if (!selectedNodeNames.includes(this.data.name)) {
// If the current node is not in selected add it to the nodes which
// got moved manually
moveNodes.push(this.data);
} }
this.$store.commit('addActiveAction', 'dragActive'); // This does for some reason just get called once for the node that got clicked
}, // even though "start" and "drag" gets called for all. So lets do for now
stop: (params: { e: MouseEvent }) => { // some dirty DOM query to get the new positions till I have more time to
if (this.$store.getters.isActionActive('dragActive')) { // create a proper solution
const moveNodes = this.$store.getters.getSelectedNodes.slice(); let newNodePositon: XYPositon;
const selectedNodeNames = moveNodes.map((node: INodeUi) => node.name); moveNodes.forEach((node: INodeUi) => {
if (!selectedNodeNames.includes(this.data.name)) { const nodeElement = `node-${this.getNodeIndex(node.name)}`;
// If the current node is not in selected add it to the nodes which const element = document.getElementById(nodeElement);
// got moved manually if (element === null) {
moveNodes.push(this.data); return;
} }
// This does for some reason just get called once for the node that got clicked newNodePositon = [
// even though "start" and "drag" gets called for all. So lets do for now parseInt(element.style.left!.slice(0, -2), 10),
// some dirty DOM query to get the new positions till I have more time to parseInt(element.style.top!.slice(0, -2), 10),
// create a proper solution ];
let newNodePositon: XYPositon;
moveNodes.forEach((node: INodeUi) => {
const nodeElement = `node-${this.getNodeIndex(node.name)}`;
const element = document.getElementById(nodeElement);
if (element === null) {
return;
}
newNodePositon = [ const updateInformation = {
parseInt(element.style.left!.slice(0, -2), 10), name: node.name,
parseInt(element.style.top!.slice(0, -2), 10), properties: {
]; // @ts-ignore, draggable does not have definitions
position: newNodePositon,
},
};
const updateInformation = { this.$store.commit('updateNodeProperties', updateInformation);
name: node.name, });
properties: { }
// @ts-ignore, draggable does not have definitions },
position: newNodePositon, filter: '.node-description, .node-description .node-name, .node-description .node-subtitle',
}, });
};
this.$store.commit('updateNodeProperties', updateInformation);
});
}
},
filter: '.node-description, .node-description .node-name, .node-description .node-subtitle',
});
}
}, },
isCtrlKeyPressed (e: MouseEvent | KeyboardEvent): boolean { isCtrlKeyPressed (e: MouseEvent | KeyboardEvent): boolean {