+
-
+
.canvasNode {
- &:hover {
+ &:hover,
+ &.showToolbar {
.canvasNodeToolbar {
opacity: 1;
}
@@ -214,8 +239,4 @@ watch(
transform: translate(-50%, -100%);
opacity: 0;
}
-
-.canvasNodeToolbar:focus-within {
- opacity: 1;
-}
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 7d3c7a48ad..d11e200d94 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
@@ -38,75 +38,59 @@ describe('CanvasNodeToolbar', () => {
expect(queryByTestId('execute-node-button')).not.toBeInTheDocument();
});
- it('should call executeNode function when execute node button is clicked', async () => {
- const executeNode = vi.fn();
- const { getByTestId } = renderComponent({
+ it('should emit "run" when execute node button is clicked', async () => {
+ const { getByTestId, emitted } = renderComponent({
global: {
provide: {
...createCanvasNodeProvide(),
},
- mocks: {
- executeNode,
- },
},
});
await fireEvent.click(getByTestId('execute-node-button'));
- expect(executeNode).toHaveBeenCalled();
+ expect(emitted('run')[0]).toEqual([]);
});
- it('should call toggleDisableNode function when disable node button is clicked', async () => {
- const onToggleNode = vi.fn();
- const { getByTestId } = renderComponent({
+ it('should emit "toggle" when disable node button is clicked', async () => {
+ const { getByTestId, emitted } = renderComponent({
global: {
provide: {
...createCanvasNodeProvide(),
},
- mocks: {
- onToggleNode,
- },
},
});
await fireEvent.click(getByTestId('disable-node-button'));
- expect(onToggleNode).toHaveBeenCalled();
+ expect(emitted('toggle')[0]).toEqual([]);
});
- it('should call deleteNode function when delete node button is clicked', async () => {
- const onDeleteNode = vi.fn();
- const { getByTestId } = renderComponent({
+ it('should emit "delete" when delete node button is clicked', async () => {
+ const { getByTestId, emitted } = renderComponent({
global: {
provide: {
...createCanvasNodeProvide(),
},
- mocks: {
- onDeleteNode,
- },
},
});
await fireEvent.click(getByTestId('delete-node-button'));
- expect(onDeleteNode).toHaveBeenCalled();
+ expect(emitted('delete')[0]).toEqual([]);
});
- it('should call openContextMenu function when overflow node button is clicked', async () => {
- const openContextMenu = vi.fn();
- const { getByTestId } = renderComponent({
+ it('should emit "open:contextmenu" when overflow node button is clicked', async () => {
+ const { getByTestId, emitted } = renderComponent({
global: {
provide: {
...createCanvasNodeProvide(),
},
- mocks: {
- openContextMenu,
- },
},
});
await fireEvent.click(getByTestId('overflow-node-button'));
- expect(openContextMenu).toHaveBeenCalled();
+ expect(emitted('open:contextmenu')[0]).toEqual([expect.any(MouseEvent)]);
});
});
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 69b9862ab0..07bb2d8048 100644
--- a/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNodeToolbar.vue
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNodeToolbar.vue
@@ -8,6 +8,7 @@ const emit = defineEmits<{
delete: [];
toggle: [];
run: [];
+ 'open:contextmenu': [event: MouseEvent];
}>();
const $style = useCssModule();
@@ -45,8 +46,9 @@ function onDeleteNode() {
emit('delete');
}
-// @TODO
-function openContextMenu(_e: MouseEvent, _type: string) {}
+function onOpenContextMenu(event: MouseEvent) {
+ emit('open:contextmenu', event);
+}
@@ -88,7 +90,7 @@ function openContextMenu(_e: MouseEvent, _type: string) {}
size="small"
text
icon="ellipsis-h"
- @click="(e: MouseEvent) => openContextMenu(e, 'node-button')"
+ @click="onOpenContextMenu"
/>
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue
index cbbcf66105..8022733758 100644
--- a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue
@@ -12,6 +12,10 @@ import type { CanvasNodeDefaultRender } from '@/types';
const $style = useCssModule();
const i18n = useI18n();
+const emit = defineEmits<{
+ 'open:contextmenu': [event: MouseEvent];
+}>();
+
const {
label,
inputs,
@@ -79,10 +83,14 @@ const dataTestId = computed(() => {
return `canvas-${type}-node`;
});
+
+function openContextMenu(event: MouseEvent) {
+ emit('open:contextmenu', event);
+}