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 };