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

✨ Add /workflows/demo route (#2745)

Browse source 
* ⚡ added /workflows/demo route

* ⚡ suggested improvements

* ⚡ added n8n version in postmessage

* ⚡ updated zoom menu styling

* ⚡ updated component padding for zoomToFit

* ⚡ suggested improvements

* ⚡ moved getFixedNodeList to canvasHelpers

* 📝 removed unused import and rebased from master
This commit is contained in:
Anuj Kapoor 2022-02-11 13:48:39 +05:30 committed by GitHub
parent d265d8b74f
commit 1b69148d9a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 97 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
packages/editor-ui/src/components/DataDisplay.vue
View file

@ -96,6 +96,9 @@ export default mixins(externalHooks, nodeHelpers, workflowHelpers).extend({
this.$externalHooks().run('dataDisplay.nodeTypeChanged', { nodeSubtitle: this.getNodeSubtitle(node, this.nodeType, this.getWorkflow()) });
this.$telemetry.track('User opened node modal', { node_type: this.nodeType ? this.nodeType.name : '', workflow_id: this.$store.getters.workflowId });
}
if (window.top) {
window.top.postMessage(JSON.stringify({command: (node? 'openNDV': 'closeNDV')}), '*');
}
},
},
methods: {

7
packages/editor-ui/src/router.ts
View file

@ -51,5 +51,12 @@ export default new Router({
sidebar: MainSidebar,
},
},
{
path: '/workflows/demo',
name: 'WorkflowDemo',
components: {
default: NodeView,
},
},
],
});

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

@ -42,7 +42,7 @@
@nodeTypeSelected="nodeTypeSelected"
@closeNodeCreator="closeNodeCreator"
></node-creator>
<div :class="{ 'zoom-menu': true, expanded: !sidebarMenuCollapsed }">
<div :class="{ 'zoom-menu': true, 'regular-zoom-menu': !isDemo, 'demo-zoom-menu': isDemo, expanded: !sidebarMenuCollapsed }">
<button @click="zoomToFit" class="button-white" :title="$locale.baseText('nodeView.zoomToFit')">
<font-awesome-icon icon="expand"/>
</button>
@ -53,7 +53,7 @@
<font-awesome-icon icon="search-minus"/>
</button>
<button
v-if="nodeViewScale !== 1"
v-if="nodeViewScale !== 1 && !isDemo"
@click="resetZoom()"
class="button-white"
:title="$locale.baseText('nodeView.resetZoom')"
@ -277,6 +277,9 @@ export default mixins(
executionWaitingForWebhook (): boolean {
return this.$store.getters.executionWaitingForWebhook;
},
isDemo (): boolean {
return this.$route.name === 'WorkflowDemo';
},
lastSelectedNode (): INodeUi | null {
return this.$store.getters.lastSelectedNode;
},
@ -510,6 +513,17 @@ export default mixins(
});
}
},
async importWorkflowExact(data: {workflow: IWorkflowDataUpdate}) {
if (!data.workflow.nodes || !data.workflow.connections) {
throw new Error('Invalid workflow object');
}
this.resetWorkspace();
data.workflow.nodes = CanvasHelpers.getFixedNodesList(data.workflow.nodes);
await this.addNodes(data.workflow.nodes, data.workflow.connections);
this.$nextTick(() => {
this.zoomToFit();
});
},
async openWorkflowTemplate (templateId: string) {
this.setLoadingText(this.$locale.baseText('nodeView.loadingTemplate'));
this.resetWorkspace();
@ -539,22 +553,7 @@ export default mixins(
return;
}
const nodes = data.workflow.nodes;
const hasStartNode = !!nodes.find(node => node.type === START_NODE_TYPE);
const leftmostTop = CanvasHelpers.getLeftmostTopNode(nodes);
const diffX = CanvasHelpers.DEFAULT_START_POSITION_X - leftmostTop.position[0];
const diffY = CanvasHelpers.DEFAULT_START_POSITION_Y - leftmostTop.position[1];
data.workflow.nodes.map((node) => {
node.position[0] += diffX + (hasStartNode? 0 : CanvasHelpers.NODE_SIZE * 2);
node.position[1] += diffY;
});
if (!hasStartNode) {
data.workflow.nodes.push({...CanvasHelpers.DEFAULT_START_NODE});
}
data.workflow.nodes = CanvasHelpers.getFixedNodesList(data.workflow.nodes);
this.blankRedirect = true;
this.$router.push({ name: 'NodeViewNew', query: { templateId } });
@ -1029,7 +1028,7 @@ export default mixins(
return;
}
const {zoomLevel, offset} = CanvasHelpers.getZoomToFit(nodes);
const {zoomLevel, offset} = CanvasHelpers.getZoomToFit(nodes, !this.isDemo);
this.setZoomLevel(zoomLevel);
this.$store.commit('setNodeViewOffsetPosition', {newOffset: offset});
@ -1845,7 +1844,10 @@ export default mixins(
document.addEventListener('keyup', this.keyUp);
window.addEventListener("beforeunload", (e) => {
if(this.$store.getters.getStateIsDirty === true) {
if(this.isDemo){
return;
}
else if(this.$store.getters.getStateIsDirty === true) {
const confirmationMessage = this.$locale.baseText('nodeView.itLooksLikeYouHaveBeenEditingSomething');
(e || window.event).returnValue = confirmationMessage; //Gecko + IE
return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
@ -2690,6 +2692,27 @@ export default mixins(
async mounted () {
window.addEventListener('message', async (message) => {
try {
const json = JSON.parse(message.data);
if (json && json.command === 'openWorkflow') {
try {
await this.importWorkflowExact(json);
} catch (e) {
if (window.top) {
window.top.postMessage(JSON.stringify({command: 'error', message: 'Could not import workflow'}), '*');
}
this.$showMessage({
title: 'Could not import workflow',
message: (e as Error).message,
type: 'error',
});
}
}
} catch (e) {
}
});
this.$root.$on('importWorkflowData', async (data: IDataObject) => {
await this.importWorkflowData(data.data as IWorkflowDataUpdate);
});
@ -2737,6 +2760,9 @@ export default mixins(
try {
this.initNodeView();
await this.initView();
if (window.top) {
window.top.postMessage(JSON.stringify({command: 'n8nReady',version:this.$store.getters.versionCli}), '*');
}
} catch (error) {
this.$showError(
error,
@ -2773,10 +2799,6 @@ export default mixins(
color: #444;
padding-right: 5px;
@media (max-width: $--breakpoint-2xs) {
bottom: 90px;
}
&.expanded {
left: $--sidebar-expanded-width + $--zoom-menu-margin;
}
@ -2786,6 +2808,17 @@ export default mixins(
}
}
.regular-zoom-menu {
@media (max-width: $--breakpoint-2xs) {
bottom: 90px;
}
}
.demo-zoom-menu {
left: 10px;
bottom: 10px;
}
.node-creator-button {
position: fixed;
text-align: center;

37
packages/editor-ui/src/views/canvasHelpers.ts
View file

@ -4,6 +4,7 @@ import { IBounds, INodeUi, IZoomConfig, XYPosition } from "@/Interface";
import { Connection, Endpoint, Overlay, OverlaySpec, PaintStyle } from "jsplumb";
import {
IConnection,
INode,
ITaskData,
INodeExecutionData,
NodeInputConnections,
@ -587,25 +588,27 @@ export const addConnectionOutputSuccess = (connection: Connection, output: {tota
};
export const getZoomToFit = (nodes: INodeUi[]): {offset: XYPosition, zoomLevel: number} => {
export const getZoomToFit = (nodes: INodeUi[], addComponentPadding = true): {offset: XYPosition, zoomLevel: number} => {
const {minX, minY, maxX, maxY} = getWorkflowCorners(nodes);
const sidebarWidth = addComponentPadding? SIDEBAR_WIDTH: 0;
const headerHeight = addComponentPadding? HEADER_HEIGHT: 0;
const PADDING = NODE_SIZE * 4;
const editorWidth = window.innerWidth;
const diffX = maxX - minX + SIDEBAR_WIDTH + PADDING;
const diffX = maxX - minX + sidebarWidth + PADDING;
const scaleX = editorWidth / diffX;
const editorHeight = window.innerHeight;
const diffY = maxY - minY + HEADER_HEIGHT + PADDING;
const diffY = maxY - minY + headerHeight + PADDING;
const scaleY = editorHeight / diffY;
const zoomLevel = Math.min(scaleX, scaleY, 1);
let xOffset = (minX * -1) * zoomLevel + SIDEBAR_WIDTH; // find top right corner
xOffset += (editorWidth - SIDEBAR_WIDTH - (maxX - minX + NODE_SIZE) * zoomLevel) / 2; // add padding to center workflow
let xOffset = (minX * -1) * zoomLevel + sidebarWidth; // find top right corner
xOffset += (editorWidth - sidebarWidth - (maxX - minX + NODE_SIZE) * zoomLevel) / 2; // add padding to center workflow
let yOffset = (minY * -1) * zoomLevel + HEADER_HEIGHT; // find top right corner
yOffset += (editorHeight - HEADER_HEIGHT - (maxY - minY + NODE_SIZE * 2) * zoomLevel) / 2; // add padding to center workflow
let yOffset = (minY * -1) * zoomLevel + headerHeight; // find top right corner
yOffset += (editorHeight - headerHeight - (maxY - minY + NODE_SIZE * 2) * zoomLevel) / 2; // add padding to center workflow
return {
zoomLevel,
@ -685,3 +688,23 @@ export const getOutputEndpointUUID = (nodeIndex: string, outputIndex: number) =>
export const getInputEndpointUUID = (nodeIndex: string, inputIndex: number) => {
return `${nodeIndex}${INPUT_UUID_KEY}${inputIndex}`;
};
export const getFixedNodesList = (workflowNodes: INode[]) => {
const nodes = [...workflowNodes];
const hasStartNode = !!nodes.find(node => node.type === START_NODE_TYPE);
const leftmostTop = getLeftmostTopNode(nodes);
const diffX = DEFAULT_START_POSITION_X - leftmostTop.position[0];
const diffY = DEFAULT_START_POSITION_Y - leftmostTop.position[1];
nodes.map((node) => {
node.position[0] += diffX + (hasStartNode? 0 : NODE_SIZE * 2);
node.position[1] += diffY;
});
if (!hasStartNode) {
nodes.push({...DEFAULT_START_NODE});
}
return nodes;
};