fix(editor): Plus node button should not be visible on readonly mode (#10692)

packages/editor-ui/src/__tests__/data/canvas.ts

@@ -121,12 +121,14 @@ export function createCanvasHandleProvide({
 	type = NodeConnectionType.Main,
 	isConnected = false,
 	isConnecting = false,
+	isReadOnly = false,
 }: {
 	label?: string;
 	mode?: CanvasConnectionMode;
 	type?: NodeConnectionType;
 	isConnected?: boolean;
 	isConnecting?: boolean;
+	isReadOnly?: boolean;
 } = {}) {
 	return {
 		[`${CanvasNodeHandleKey}`]: {
@@ -135,6 +137,7 @@ export function createCanvasHandleProvide({
 			type: ref(type),
 			isConnected: ref(isConnected),
 			isConnecting: ref(isConnecting),
+			isReadOnly: ref(isReadOnly),
 		} satisfies CanvasNodeHandleInjectionData,
 	};
 }

packages/editor-ui/src/components/canvas/elements/handles/CanvasHandleRenderer.vue

@@ -18,6 +18,7 @@ const props = defineProps<{
 	mode: CanvasConnectionMode;
 	isConnected?: boolean;
 	isConnecting?: boolean;
+	isReadOnly?: boolean;
 	label?: string;
 	type: CanvasConnectionPort['type'];
 	index: CanvasConnectionPort['index'];
@@ -99,6 +100,7 @@ function onAdd() {
 const label = toRef(props, 'label');
 const isConnected = toRef(props, 'isConnected');
 const isConnecting = toRef(props, 'isConnecting');
+const isReadOnly = toRef(props, 'isReadOnly');
 const mode = toRef(props, 'mode');
 const type = toRef(props, 'type');
 
@@ -108,6 +110,7 @@ provide(CanvasNodeHandleKey, {
 	type,
 	isConnected,
 	isConnecting,
+	isReadOnly,
 });
 </script>
 

packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.spec.ts

@@ -7,7 +7,7 @@ const renderComponent = createComponentRenderer(CanvasHandleMainOutput);
 describe('CanvasHandleMainOutput', () => {
 	it('should render correctly', async () => {
 		const label = 'Test Label';
-		const { container, getByText } = renderComponent({
+		const { container, getByText, getByTestId } = renderComponent({
 			global: {
 				provide: {
 					...createCanvasHandleProvide({ label }),
@@ -16,6 +16,19 @@ describe('CanvasHandleMainOutput', () => {
 		});
 
 		expect(container.querySelector('.canvas-node-handle-main-output')).toBeInTheDocument();
+		expect(getByTestId('canvas-handle-plus')).toBeInTheDocument();
 		expect(getByText(label)).toBeInTheDocument();
 	});
+
+	it('should not render CanvasHandlePlus when isReadOnly', () => {
+		const { queryByTestId } = renderComponent({
+			global: {
+				provide: {
+					...createCanvasHandleProvide({ isReadOnly: true }),
+				},
+			},
+		});
+
+		expect(queryByTestId('canvas-handle-plus')).not.toBeInTheDocument();
+	});
 });

packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.vue

@@ -9,7 +9,7 @@ const emit = defineEmits<{
 }>();
 
 const { render } = useCanvasNode();
-const { label, isConnected, isConnecting } = useCanvasNodeHandle();
+const { label, isConnected, isConnecting, isReadOnly } = useCanvasNodeHandle();
 
 const handleClasses = 'source';
 const isHovered = ref(false);
@@ -45,8 +45,9 @@ function onClickAdd() {
 		<CanvasHandleDot :handle-classes="handleClasses" />
 		<Transition name="canvas-node-handle-main-output">
 			<CanvasHandlePlus
-				v-if="!isConnected"
+				v-if="!isConnected && !isReadOnly"
 				v-show="isHandlePlusVisible"
+				data-test-id="canvas-handle-plus"
 				:line-size="plusLineSize"
 				:handle-classes="handleClasses"
 				@mouseenter="onMouseEnter"

packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue

@@ -271,6 +271,7 @@ onBeforeUnmount(() => {
 				:offset="source.offset"
 				:is-connected="source.isConnected"
 				:is-connecting="source.isConnecting"
+				:is-read-only="readOnly"
 				:is-valid-connection="isValidConnection"
 				@add="onAdd"
 			/>
@@ -287,6 +288,7 @@ onBeforeUnmount(() => {
 				:offset="target.offset"
 				:is-connected="target.isConnected"
 				:is-connecting="target.isConnecting"
+				:is-read-only="readOnly"
 				:is-valid-connection="isValidConnection"
 				@add="onAdd"
 			/>

packages/editor-ui/src/composables/useCanvasNodeHandle.ts

@@ -16,11 +16,13 @@ export function useCanvasNodeHandle() {
 	const isConnecting = computed(() => handle?.isConnecting.value ?? false);
 	const type = computed(() => handle?.type.value ?? NodeConnectionType.Main);
 	const mode = computed(() => handle?.mode.value ?? CanvasConnectionMode.Input);
+	const isReadOnly = computed(() => handle?.isReadOnly.value);
 
 	return {
 		label,
 		isConnected,
 		isConnecting,
+		isReadOnly,
 		type,
 		mode,
 	};

packages/editor-ui/src/types/canvas.ts

@@ -165,6 +165,7 @@ export interface CanvasNodeHandleInjectionData {
 	type: Ref<NodeConnectionType>;
 	isConnected: Ref<boolean | undefined>;
 	isConnecting: Ref<boolean | undefined>;
+	isReadOnly: Ref<boolean | undefined>;
 }
 
 export type ConnectStartEvent = { handleId: string; handleType: string; nodeId: string };