diff --git a/packages/editor-ui/src/__tests__/data/canvas.ts b/packages/editor-ui/src/__tests__/data/canvas.ts
index ffd98945c9..9fa91e8ebc 100644
--- a/packages/editor-ui/src/__tests__/data/canvas.ts
+++ b/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,
};
}
diff --git a/packages/editor-ui/src/components/canvas/elements/handles/CanvasHandleRenderer.vue b/packages/editor-ui/src/components/canvas/elements/handles/CanvasHandleRenderer.vue
index 9fc8d1fc07..3571cc32f7 100644
--- a/packages/editor-ui/src/components/canvas/elements/handles/CanvasHandleRenderer.vue
+++ b/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,
});
diff --git a/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.spec.ts b/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.spec.ts
index 22b8bbce31..956f132582 100644
--- a/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.spec.ts
+++ b/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();
+ });
});
diff --git a/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.vue b/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.vue
index 8f8ca9c6ea..c7ed5eed81 100644
--- a/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.vue
+++ b/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() {
{
: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"
/>
diff --git a/packages/editor-ui/src/composables/useCanvasNodeHandle.ts b/packages/editor-ui/src/composables/useCanvasNodeHandle.ts
index 9a6005d017..d3d0f0d7de 100644
--- a/packages/editor-ui/src/composables/useCanvasNodeHandle.ts
+++ b/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,
};
diff --git a/packages/editor-ui/src/types/canvas.ts b/packages/editor-ui/src/types/canvas.ts
index 55300db2e4..aaaf9218af 100644
--- a/packages/editor-ui/src/types/canvas.ts
+++ b/packages/editor-ui/src/types/canvas.ts
@@ -165,6 +165,7 @@ export interface CanvasNodeHandleInjectionData {
type: Ref;
isConnected: Ref;
isConnecting: Ref;
+ isReadOnly: Ref;
}
export type ConnectStartEvent = { handleId: string; handleType: string; nodeId: string };