mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-17 10:02:05 +00:00
feat(Loop Over Items (Split in Batches) Node): Automatically add a loop + rename (#7228)
Github issue / Community forum post (link here to close automatically): --------- Co-authored-by: Michael Kret <michael.k@radency.com>
This commit is contained in:
Elias Meire
@@ -1,8 +1,107 @@
|
||||
<script setup lang="ts">
|
||||
import { defineAsyncComponent, reactive } from 'vue';
|
||||
import { getMidCanvasPosition } from '@/utils/nodeViewUtils';
|
||||
import {
|
||||
DEFAULT_STICKY_HEIGHT,
|
||||
DEFAULT_STICKY_WIDTH,
|
||||
NODE_CREATOR_OPEN_SOURCES,
|
||||
STICKY_NODE_TYPE,
|
||||
} from '@/constants';
|
||||
import { useUIStore } from '@/stores/ui.store';
|
||||
import type { AddedNodesAndConnections, ToggleNodeCreatorOptions } from '@/Interface';
|
||||
import { useActions } from './NodeCreator/composables/useActions';
|
||||
|
||||
type Props = {
|
||||
nodeViewScale: number;
|
||||
createNodeActive?: boolean;
|
||||
};
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/naming-convention, @typescript-eslint/no-unsafe-assignment
|
||||
const NodeCreator = defineAsyncComponent(
|
||||
async () => import('@/components/Node/NodeCreator/NodeCreator.vue'),
|
||||
);
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
createNodeActive: false,
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'addNodes', value: AddedNodesAndConnections): void;
|
||||
(event: 'toggleNodeCreator', value: ToggleNodeCreatorOptions): void;
|
||||
}>();
|
||||
|
||||
const state = reactive({
|
||||
showStickyButton: false,
|
||||
});
|
||||
|
||||
const uiStore = useUIStore();
|
||||
|
||||
const { getAddedNodesAndConnections } = useActions();
|
||||
|
||||
function onCreateMenuHoverIn(mouseinEvent: MouseEvent) {
|
||||
const buttonsWrapper = mouseinEvent.target as Element;
|
||||
|
||||
// Once the popup menu is hovered, it's pointer events are disabled so it's not interfering with element underneath it.
|
||||
state.showStickyButton = true;
|
||||
const moveCallback = (mousemoveEvent: MouseEvent) => {
|
||||
if (buttonsWrapper) {
|
||||
const wrapperBounds = buttonsWrapper.getBoundingClientRect();
|
||||
const wrapperH = wrapperBounds.height;
|
||||
const wrapperW = wrapperBounds.width;
|
||||
const wrapperLeftNear = wrapperBounds.left;
|
||||
const wrapperLeftFar = wrapperLeftNear + wrapperW;
|
||||
const wrapperTopNear = wrapperBounds.top;
|
||||
const wrapperTopFar = wrapperTopNear + wrapperH;
|
||||
const inside =
|
||||
mousemoveEvent.pageX > wrapperLeftNear &&
|
||||
mousemoveEvent.pageX < wrapperLeftFar &&
|
||||
mousemoveEvent.pageY > wrapperTopNear &&
|
||||
mousemoveEvent.pageY < wrapperTopFar;
|
||||
if (!inside) {
|
||||
state.showStickyButton = false;
|
||||
document.removeEventListener('mousemove', moveCallback, false);
|
||||
}
|
||||
}
|
||||
};
|
||||
document.addEventListener('mousemove', moveCallback, false);
|
||||
}
|
||||
|
||||
function openNodeCreator() {
|
||||
emit('toggleNodeCreator', {
|
||||
source: NODE_CREATOR_OPEN_SOURCES.ADD_NODE_BUTTON,
|
||||
createNodeActive: true,
|
||||
});
|
||||
}
|
||||
|
||||
function addStickyNote() {
|
||||
if (document.activeElement) {
|
||||
(document.activeElement as HTMLElement).blur();
|
||||
}
|
||||
|
||||
const offset: [number, number] = [...uiStore.nodeViewOffsetPosition];
|
||||
|
||||
const position = getMidCanvasPosition(props.nodeViewScale, offset);
|
||||
position[0] -= DEFAULT_STICKY_WIDTH / 2;
|
||||
position[1] -= DEFAULT_STICKY_HEIGHT / 2;
|
||||
|
||||
emit('addNodes', getAddedNodesAndConnections([{ type: STICKY_NODE_TYPE, position }]));
|
||||
}
|
||||
|
||||
function closeNodeCreator() {
|
||||
emit('toggleNodeCreator', { createNodeActive: false });
|
||||
}
|
||||
|
||||
function nodeTypeSelected(nodeTypes: string[]) {
|
||||
emit('addNodes', getAddedNodesAndConnections(nodeTypes.map((type) => ({ type }))));
|
||||
closeNodeCreator();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
v-if="!createNodeActive"
|
||||
:class="[$style.nodeButtonsWrapper, showStickyButton ? $style.noEvents : '']"
|
||||
:class="[$style.nodeButtonsWrapper, state.showStickyButton ? $style.noEvents : '']"
|
||||
@mouseenter="onCreateMenuHoverIn"
|
||||
>
|
||||
<div :class="$style.nodeCreatorButton" data-test-id="node-creator-plus-button">
|
||||
@@ -15,7 +114,7 @@
|
||||
:title="$locale.baseText('nodeView.addNode')"
|
||||
/>
|
||||
<div
|
||||
:class="[$style.addStickyButton, showStickyButton ? $style.visibleButton : '']"
|
||||
:class="[$style.addStickyButton, state.showStickyButton ? $style.visibleButton : '']"
|
||||
@click="addStickyNote"
|
||||
data-test-id="add-sticky-button"
|
||||
>
|
||||
@@ -37,111 +136,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineAsyncComponent, defineComponent } from 'vue';
|
||||
import { getMidCanvasPosition } from '@/utils/nodeViewUtils';
|
||||
import {
|
||||
DEFAULT_STICKY_HEIGHT,
|
||||
DEFAULT_STICKY_WIDTH,
|
||||
NODE_CREATOR_OPEN_SOURCES,
|
||||
STICKY_NODE_TYPE,
|
||||
} from '@/constants';
|
||||
import { mapStores } from 'pinia';
|
||||
import { useUIStore } from '@/stores/ui.store';
|
||||
|
||||
const NodeCreator = defineAsyncComponent(
|
||||
async () => import('@/components/Node/NodeCreator/NodeCreator.vue'),
|
||||
);
|
||||
|
||||
export default defineComponent({
|
||||
name: 'node-creation',
|
||||
components: {
|
||||
NodeCreator,
|
||||
},
|
||||
props: {
|
||||
nodeViewScale: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
createNodeActive: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showStickyButton: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapStores(useUIStore),
|
||||
},
|
||||
methods: {
|
||||
onCreateMenuHoverIn(mouseinEvent: MouseEvent) {
|
||||
const buttonsWrapper = mouseinEvent.target as Element;
|
||||
|
||||
// Once the popup menu is hovered, it's pointer events are disabled so it's not interfering with element underneath it.
|
||||
this.showStickyButton = true;
|
||||
const moveCallback = (mousemoveEvent: MouseEvent) => {
|
||||
if (buttonsWrapper) {
|
||||
const wrapperBounds = buttonsWrapper.getBoundingClientRect();
|
||||
const wrapperH = wrapperBounds.height;
|
||||
const wrapperW = wrapperBounds.width;
|
||||
const wrapperLeftNear = wrapperBounds.left;
|
||||
const wrapperLeftFar = wrapperLeftNear + wrapperW;
|
||||
const wrapperTopNear = wrapperBounds.top;
|
||||
const wrapperTopFar = wrapperTopNear + wrapperH;
|
||||
const inside =
|
||||
mousemoveEvent.pageX > wrapperLeftNear &&
|
||||
mousemoveEvent.pageX < wrapperLeftFar &&
|
||||
mousemoveEvent.pageY > wrapperTopNear &&
|
||||
mousemoveEvent.pageY < wrapperTopFar;
|
||||
if (!inside) {
|
||||
this.showStickyButton = false;
|
||||
document.removeEventListener('mousemove', moveCallback, false);
|
||||
}
|
||||
}
|
||||
};
|
||||
document.addEventListener('mousemove', moveCallback, false);
|
||||
},
|
||||
openNodeCreator() {
|
||||
this.$emit('toggleNodeCreator', {
|
||||
source: NODE_CREATOR_OPEN_SOURCES.ADD_NODE_BUTTON,
|
||||
createNodeActive: true,
|
||||
});
|
||||
},
|
||||
addStickyNote() {
|
||||
if (document.activeElement) {
|
||||
(document.activeElement as HTMLElement).blur();
|
||||
}
|
||||
|
||||
const offset: [number, number] = [...this.uiStore.nodeViewOffsetPosition];
|
||||
|
||||
const position = getMidCanvasPosition(this.nodeViewScale, offset);
|
||||
position[0] -= DEFAULT_STICKY_WIDTH / 2;
|
||||
position[1] -= DEFAULT_STICKY_HEIGHT / 2;
|
||||
|
||||
this.$emit('addNode', [
|
||||
{
|
||||
nodeTypeName: STICKY_NODE_TYPE,
|
||||
position,
|
||||
},
|
||||
]);
|
||||
},
|
||||
closeNodeCreator() {
|
||||
this.$emit('toggleNodeCreator', { createNodeActive: false });
|
||||
},
|
||||
nodeTypeSelected(nodeTypeNames: string[]) {
|
||||
this.$emit(
|
||||
'addNode',
|
||||
nodeTypeNames.map((nodeTypeName) => ({ nodeTypeName })),
|
||||
);
|
||||
this.closeNodeCreator();
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.nodeButtonsWrapper {
|
||||
position: absolute;
|
||||
|
||||
Reference in New Issue
Block a user