From c5bc8e6eb9eadadf44f763e5e5aac4b35d03cc31 Mon Sep 17 00:00:00 2001 From: Alex Grozav Date: Thu, 5 Sep 2024 14:18:13 +0300 Subject: [PATCH] fix(editor): Add sticky note readonly state in new canvas (#10678) --- .../editor-ui/src/__tests__/data/canvas.ts | 5 +- .../canvas/elements/nodes/CanvasNode.vue | 2 + .../elements/nodes/CanvasNodeToolbar.spec.ts | 22 ++++++++ .../elements/nodes/CanvasNodeToolbar.vue | 9 +++- .../render-types/CanvasNodeStickyNote.spec.ts | 21 +++++++- .../render-types/CanvasNodeStickyNote.vue | 3 +- .../CanvasNodeStickyNote.spec.ts.snap | 50 ++++++------------- .../src/composables/useCanvasNode.ts | 3 +- packages/editor-ui/src/types/canvas.ts | 1 + 9 files changed, 75 insertions(+), 41 deletions(-) diff --git a/packages/editor-ui/src/__tests__/data/canvas.ts b/packages/editor-ui/src/__tests__/data/canvas.ts index 6455c6dec5..ffd98945c9 100644 --- a/packages/editor-ui/src/__tests__/data/canvas.ts +++ b/packages/editor-ui/src/__tests__/data/canvas.ts @@ -91,21 +91,24 @@ export function createCanvasNodeProvide({ id = 'node', label = 'Test Node', selected = false, + readOnly = false, data = {}, eventBus = createEventBus(), }: { id?: string; label?: string; selected?: boolean; + readOnly?: boolean; data?: Partial; eventBus?: EventBus; } = {}) { - const props = createCanvasNodeProps({ id, label, selected, data }); + const props = createCanvasNodeProps({ id, label, selected, readOnly, data }); return { [`${CanvasNodeKey}`]: { id: ref(props.id), label: ref(props.label), selected: ref(props.selected), + readOnly: ref(props.readOnly), data: ref(props.data), eventBus: ref(eventBus), } satisfies CanvasNodeInjectionData, diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue index 5ab0d2da6f..49ff966d60 100644 --- a/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue +++ b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue @@ -219,12 +219,14 @@ const id = toRef(props, 'id'); const data = toRef(props, 'data'); const label = toRef(props, 'label'); const selected = toRef(props, 'selected'); +const readOnly = toRef(props, 'readOnly'); provide(CanvasNodeKey, { id, data, label, selected, + readOnly, eventBus: canvasNodeEventBus, }); diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNodeToolbar.spec.ts b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNodeToolbar.spec.ts index d11e200d94..8f079a7bac 100644 --- a/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNodeToolbar.spec.ts +++ b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNodeToolbar.spec.ts @@ -93,4 +93,26 @@ describe('CanvasNodeToolbar', () => { expect(emitted('open:contextmenu')[0]).toEqual([expect.any(MouseEvent)]); }); + + it('should emit "update" when sticky note color is changed', async () => { + const { getAllByTestId, getByTestId, emitted } = renderComponent({ + global: { + provide: { + ...createCanvasNodeProvide({ + data: { + render: { + type: CanvasNodeRenderType.StickyNote, + options: { color: 3 }, + }, + }, + }), + }, + }, + }); + + await fireEvent.click(getByTestId('change-sticky-color')); + await fireEvent.click(getAllByTestId('color')[0]); + + expect(emitted('update')[0]).toEqual([{ color: 1 }]); + }); }); diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNodeToolbar.vue b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNodeToolbar.vue index 554e51e464..b22401f5a6 100644 --- a/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNodeToolbar.vue +++ b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNodeToolbar.vue @@ -47,7 +47,9 @@ const isDisableNodeVisible = computed(() => { const isDeleteNodeVisible = computed(() => !props.readOnly); -const isStickyNoteNodeType = computed(() => render.value.type === CanvasNodeRenderType.StickyNote); +const isStickyNoteChangeColorVisible = computed( + () => !props.readOnly && render.value.type === CanvasNodeRenderType.StickyNote, +); function executeNode() { emit('run'); @@ -106,7 +108,10 @@ function onOpenContextMenu(event: MouseEvent) { :title="i18n.baseText('node.delete')" @click="onDeleteNode" /> - + { describe('CanvasNodeStickyNote', () => { it('should render node correctly', () => { - const { getByTestId } = renderComponent({ + const { html } = renderComponent({ global: { provide: { ...createCanvasNodeProvide({ @@ -23,6 +23,23 @@ describe('CanvasNodeStickyNote', () => { }, }); - expect(getByTestId('canvas-sticky-note-node')).toMatchSnapshot(); + expect(html()).toMatchSnapshot(); + }); + + it('should disable resizing when node is readonly', () => { + const { container } = renderComponent({ + global: { + provide: { + ...createCanvasNodeProvide({ + id: 'sticky', + readOnly: true, + }), + }, + }, + }); + + const resizeControls = container.querySelectorAll('.vue-flow__resize-control'); + + expect(resizeControls).toHaveLength(0); }); }); diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeStickyNote.vue b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeStickyNote.vue index 37dbbaac02..c03c5473bc 100644 --- a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeStickyNote.vue +++ b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeStickyNote.vue @@ -20,7 +20,7 @@ const emit = defineEmits<{ const $style = useCssModule(); -const { id, isSelected, render, eventBus } = useCanvasNode(); +const { id, isSelected, isReadOnly, render, eventBus } = useCanvasNode(); const renderOptions = computed(() => render.value.options as CanvasNodeStickyNoteRender['options']); @@ -95,6 +95,7 @@ onBeforeUnmount(() => { :min-width="150" :height="renderOptions.height" :width="renderOptions.width" + :is-visible="!isReadOnly" @resize="onResize" /> should render node correctly 1`] = ` -
-
-
-
+"
+
+
+
+
+
+
+
+
+
+
+
- " `; diff --git a/packages/editor-ui/src/composables/useCanvasNode.ts b/packages/editor-ui/src/composables/useCanvasNode.ts index b9686e258b..4f9c25a916 100644 --- a/packages/editor-ui/src/composables/useCanvasNode.ts +++ b/packages/editor-ui/src/composables/useCanvasNode.ts @@ -45,7 +45,7 @@ export function useCanvasNode() { const connections = computed(() => data.value.connections); const isDisabled = computed(() => data.value.disabled); - + const isReadOnly = computed(() => node?.readOnly.value); const isSelected = computed(() => node?.selected.value); const pinnedDataCount = computed(() => data.value.pinnedData.count); @@ -75,6 +75,7 @@ export function useCanvasNode() { outputs, connections, isDisabled, + isReadOnly, isSelected, pinnedDataCount, hasPinnedData, diff --git a/packages/editor-ui/src/types/canvas.ts b/packages/editor-ui/src/types/canvas.ts index 3b7716af4f..55300db2e4 100644 --- a/packages/editor-ui/src/types/canvas.ts +++ b/packages/editor-ui/src/types/canvas.ts @@ -155,6 +155,7 @@ export interface CanvasNodeInjectionData { data: Ref; label: Ref; selected: Ref; + readOnly: Ref; eventBus: Ref>; }