feat(editor): Add readonly mode to new canvas (no-changelog) (#10133)

packages/editor-ui/src/components/canvas/Canvas.vue

@@ -7,7 +7,7 @@ import { Controls } from '@vue-flow/controls';
 import { MiniMap } from '@vue-flow/minimap';
 import Node from './elements/nodes/CanvasNode.vue';
 import Edge from './elements/edges/CanvasEdge.vue';
-import { computed, onMounted, onUnmounted, ref, useCssModule } from 'vue';
+import { computed, onMounted, onUnmounted, ref, useCssModule, watch } from 'vue';
 import type { EventBus } from 'n8n-design-system';
 import { createEventBus } from 'n8n-design-system';
 import { useContextMenu, type ContextMenuAction } from '@/composables/useContextMenu';
@@ -59,6 +59,7 @@ const props = withDefaults(
 		connections: CanvasConnection[];
 		controlsPosition?: PanelPosition;
 		eventBus?: EventBus;
+		readOnly?: boolean;
 	}>(),
 	{
 		id: 'canvas',
@@ -66,6 +67,7 @@ const props = withDefaults(
 		connections: () => [],
 		controlsPosition: PanelPosition.BottomLeft,
 		eventBus: () => createEventBus(),
+		readOnly: false,
 	},
 );
 
@@ -75,6 +77,8 @@ const {
 	removeSelectedNodes,
 	viewportRef,
 	fitView,
+	setInteractive,
+	elementsSelectable,
 	project,
 	nodes: graphNodes,
 	onPaneReady,
@@ -267,6 +271,11 @@ async function onFitView() {
 	await fitView({ maxZoom: 1.2, padding: 0.1 });
 }
 
+function setReadonly(value: boolean) {
+	setInteractive(!value);
+	elementsSelectable.value = true;
+}
+
 /**
  * Context menu
  */
@@ -337,6 +346,10 @@ onPaneReady(async () => {
 	await onFitView();
 	paneReady.value = true;
 });
+
+watch(() => props.readOnly, setReadonly, {
+	immediate: true,
+});
 </script>
 
 <template>
@@ -365,6 +378,7 @@ onPaneReady(async () => {
 		<template #node-canvas-node="canvasNodeProps">
 			<Node
 				v-bind="canvasNodeProps"
+				:read-only="readOnly"
 				@delete="onDeleteNode"
 				@run="onRunNode"
 				@select="onSelectNode"
@@ -380,6 +394,7 @@ onPaneReady(async () => {
 		<template #edge-canvas-edge="canvasEdgeProps">
 			<Edge
 				v-bind="canvasEdgeProps"
+				:read-only="readOnly"
 				:hovered="hoveredEdges[canvasEdgeProps.id]"
 				@add="onClickConnectionAdd"
 				@delete="onDeleteConnection"
@@ -394,6 +409,7 @@ onPaneReady(async () => {
 			data-test-id="canvas-controls"
 			:class="$style.canvasControls"
 			:position="controlsPosition"
+			:show-interactive="!readOnly"
 			@fit-view="onFitView"
 		></Controls>