🐛 Fix issues in read-only mode #39

packages/editor-ui/src/components/mixins/nodeBase.ts

@@ -65,6 +65,7 @@ export const nodeBase = mixins(nodeIndex).extend({
 		'name',
 		'nodeId',
 		'instance',
+		'isReadOnly',
 	],
 	methods: {
 		__addNode (node: INodeUi) {
@@ -182,7 +183,7 @@ export const nodeBase = mixins(nodeIndex).extend({
 					endpoint: inputData.endpoint,
 					endpointStyle: inputData.endpointStyle,
 					isSource: false,
-					isTarget: true,
+					isTarget: !this.isReadOnly,
 					parameters: {
 						nodeIndex: this.nodeIndex,
 						type: inputName,
@@ -246,7 +247,7 @@ export const nodeBase = mixins(nodeIndex).extend({
 					maxConnections: inputData.maxConnections,
 					endpoint: inputData.endpoint,
 					endpointStyle: inputData.endpointStyle,
-					isSource: true,
+					isSource: !this.isReadOnly,
 					isTarget: false,
 					parameters: {
 						nodeIndex: this.nodeIndex,
@@ -275,6 +276,7 @@ export const nodeBase = mixins(nodeIndex).extend({
 				this.instance.addEndpoint(this.nodeName, newEndpointData);
 			});
 
+			if (this.isReadOnly === false) {
 				// Make nodes draggable
 				this.instance.draggable(this.nodeName, {
 					grid: [10, 10],
@@ -330,6 +332,7 @@ export const nodeBase = mixins(nodeIndex).extend({
 					},
 					filter: '.node-description, .node-description .node-name, .node-description .node-subtitle',
 				});
+			}
 		},
 
 		isCtrlKeyPressed (e: MouseEvent | KeyboardEvent): boolean {

packages/editor-ui/src/views/NodeView.vue

@@ -20,6 +20,7 @@
 				:id="'node-' + getNodeIndex(nodeData.name)"
 				:key="getNodeIndex(nodeData.name)"
 				:name="nodeData.name"
+				:isReadOnly="isReadOnly"
 				:instance="instance"
 				></node>
 			</div>
@@ -102,6 +103,9 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import {
+	OverlaySpec,
+} from 'jsplumb';
 import { MessageBoxInputData } from 'element-ui/types/message-box';
 import { jsPlumb, Endpoint, OnConnectionBindInfo } from 'jsplumb';
 import { NODE_NAME_PREFIX, PLACEHOLDER_EMPTY_WORKFLOW_ID } from '@/constants';
@@ -1013,21 +1017,9 @@ export default mixins(
 				}
 			},
 			initNodeView () {
-				this.instance.importDefaults({
-					// notice the 'curviness' argument to this Bezier curve.
-					// the curves on this page are far smoother
-					// than the curves on the first demo, which use the default curviness value.
-					// Connector: ["Bezier", { curviness: 80 }],
-					Connector: ['Bezier', { curviness: 40 }],
-					// @ts-ignore
-					Endpoint: ['Dot', { radius: 5 }],
-					DragOptions: { cursor: 'pointer', zIndex: 5000 },
-					PaintStyle: { strokeWidth: 2, stroke: '#334455' },
-					EndpointStyle: { radius: 9, fill: '#acd', stroke: 'red' },
-					// EndpointStyle: {},
-					HoverPaintStyle: { stroke: '#ff6d5a', lineWidth: 4 },
-					EndpointHoverStyle: { fill: '#ff6d5a', stroke: '#acd' },
-					ConnectionOverlays: [
+				const connectionOverlays: OverlaySpec[] = [];
+				if (this.isReadOnly === false) {
+					connectionOverlays.push.apply(connectionOverlays, [
 						[
 							'Arrow',
 							{
@@ -1045,7 +1037,24 @@ export default mixins(
 								location: 0.5,
 							},
 						],
-					],
+					]);
+				}
+
+				this.instance.importDefaults({
+					// notice the 'curviness' argument to this Bezier curve.
+					// the curves on this page are far smoother
+					// than the curves on the first demo, which use the default curviness value.
+					// Connector: ["Bezier", { curviness: 80 }],
+					Connector: ['Bezier', { curviness: 40 }],
+					// @ts-ignore
+					Endpoint: ['Dot', { radius: 5 }],
+					DragOptions: { cursor: 'pointer', zIndex: 5000 },
+					PaintStyle: { strokeWidth: 2, stroke: '#334455' },
+					EndpointStyle: { radius: 9, fill: '#acd', stroke: 'red' },
+					// EndpointStyle: {},
+					HoverPaintStyle: { stroke: '#ff6d5a', lineWidth: 4 },
+					EndpointHoverStyle: { fill: '#ff6d5a', stroke: '#acd' },
+					ConnectionOverlays: connectionOverlays,
 					Container: '#node-view',
 				});
 
@@ -1100,6 +1109,10 @@ export default mixins(
 						info.connection.setConnector(['Straight']);
 					}
 
+					// @ts-ignore
+					info.connection.removeOverlay('drop-add-node');
+
+					if (this.isReadOnly === false) {
 						// Display the connection-delete button only on hover
 						let timer: NodeJS.Timeout | undefined;
 						info.connection.bind('mouseover', (connection: IConnection) => {
@@ -1117,9 +1130,6 @@ export default mixins(
 							}, 500);
 						});
 
-					// @ts-ignore
-					info.connection.removeOverlay('drop-add-node');
-
 						// @ts-ignore
 						info.connection.addOverlay([
 							'Label',
@@ -1135,6 +1145,7 @@ export default mixins(
 								},
 							},
 						]);
+					}
 
 					// Display input names if they exist on connection
 					const targetNodeTypeData: INodeTypeDescription = this.$store.getters.nodeType(targetNode.type);
@@ -1329,6 +1340,7 @@ export default mixins(
 					// @ts-ignore
 					this.instance.connect({
 						uuids: uuid,
+						detachable: !this.isReadOnly,
 					});
 				} else {
 					// When nodes get connected it gets saved automatically to the storage