🐛 Fix issues in read-only mode #39

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,41 +1109,43 @@ export default mixins(
 						info.connection.setConnector(['Straight']);
 					}
 
-					// Display the connection-delete button only on hover
-					let timer: NodeJS.Timeout | undefined;
-					info.connection.bind('mouseover', (connection: IConnection) => {
-						if (timer !== undefined) {
-							clearTimeout(timer);
-						}
-						const overlay = info.connection.getOverlay('remove-connection');
-						overlay.setVisible(true);
-					});
-					info.connection.bind('mouseout', (connection: IConnection) => {
-						timer = setTimeout(() => {
-							const overlay = info.connection.getOverlay('remove-connection');
-							overlay.setVisible(false);
-							timer = undefined;
-						}, 500);
-					});
-
 					// @ts-ignore
 					info.connection.removeOverlay('drop-add-node');
 
-					// @ts-ignore
-					info.connection.addOverlay([
-						'Label',
-						{
-							id: 'remove-connection',
-							label: '<span class="delete-connection clickable" title="Delete Connection">x</span>',
-							cssClass: 'remove-connection-label',
-							visible: false,
-							events: {
-								mousedown: () => {
-									this.__removeConnectionByConnectionInfo(info, true);
+					if (this.isReadOnly === false) {
+						// Display the connection-delete button only on hover
+						let timer: NodeJS.Timeout | undefined;
+						info.connection.bind('mouseover', (connection: IConnection) => {
+							if (timer !== undefined) {
+								clearTimeout(timer);
+							}
+							const overlay = info.connection.getOverlay('remove-connection');
+							overlay.setVisible(true);
+						});
+						info.connection.bind('mouseout', (connection: IConnection) => {
+							timer = setTimeout(() => {
+								const overlay = info.connection.getOverlay('remove-connection');
+								overlay.setVisible(false);
+								timer = undefined;
+							}, 500);
+						});
+
+						// @ts-ignore
+						info.connection.addOverlay([
+							'Label',
+							{
+								id: 'remove-connection',
+								label: '<span class="delete-connection clickable" title="Delete Connection">x</span>',
+								cssClass: 'remove-connection-label',
+								visible: false,
+								events: {
+									mousedown: () => {
+										this.__removeConnectionByConnectionInfo(info, true);
+									},
 								},
 							},
-						},
-					]);
+						]);
+					}
 
 					// 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