mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-28 05:59:42 -08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fix(editor): Fix bug causing connection lines to disappear when hovering stickies (#11950)

Browse source
This commit is contained in:
Alex Grozav 2024-11-28 16:22:20 +02:00 committed by GitHub
parent 5bcb6a3505
commit 439a1cc4f3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 11 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
packages/editor-ui/src/components/canvas/Canvas.vue
View file

@ -350,7 +350,6 @@ const arrowHeadMarkerId = ref('custom-arrow-head');
const edgesHoveredById = ref<Record<string, boolean>>({});
const edgesBringToFrontById = ref<Record<string, boolean>>({});
const nodesHoveredById = ref<Record<string, boolean>>({});
onEdgeMouseEnter(({ edge }) => {
edgesBringToFrontById.value = { [edge.id]: true };
@ -381,6 +380,13 @@ onEdgeMouseLeave(({ edge }) => {
edgesHoveredById.value = { [edge.id]: false };
});
function onUpdateEdgeLabelHovered(id: string, hovered: boolean) {
edgesBringToFrontById.value = { [id]: true };
edgesHoveredById.value[id] = hovered;
}
const nodesHoveredById = ref<Record<string, boolean>>({});
onNodeMouseEnter(({ node }) => {
nodesHoveredById.value = { [node.id]: true };
});
@ -389,10 +395,6 @@ onNodeMouseLeave(({ node }) => {
nodesHoveredById.value = { [node.id]: false };
});
function onUpdateEdgeHovered(id: string, hovered: boolean) {
edgesHoveredById.value[id] = hovered;
}
/**
* Executions
*/
@ -653,7 +655,6 @@ provide(CanvasKey, {
:read-only="readOnly"
:event-bus="eventBus"
:hovered="nodesHoveredById[nodeProps.id]"
:bring-to-front="nodesHoveredById[nodeProps.id]"
@delete="onDeleteNode"
@run="onRunNode"
@select="onSelectNode"
@ -675,7 +676,7 @@ provide(CanvasKey, {
:bring-to-front="edgesBringToFrontById[edgeProps.id]"
@add="onClickConnectionAdd"
@delete="onDeleteConnection"
@update:hovered="onUpdateEdgeHovered(edgeProps.id, $event)"
@update:label:hovered="onUpdateEdgeLabelHovered(edgeProps.id, $event)"
/>
</template>

6
packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.vue
View file

@ -12,7 +12,7 @@ import { getEdgeRenderData } from './utils';
const emit = defineEmits<{
add: [connection: Connection];
delete: [connection: Connection];
'update:hovered': [hovered: boolean];
'update:label:hovered': [hovered: boolean];
}>();
export type CanvasEdgeProps = EdgeProps<CanvasConnectionData> & {
@ -111,11 +111,11 @@ function onDelete() {
}
function onEdgeLabelMouseEnter() {
emit('update:hovered', true);
emit('update:label:hovered', true);
}
function onEdgeLabelMouseLeave() {
emit('update:hovered', false);
emit('update:label:hovered', false);
}
</script>

2
packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue
View file

@ -36,7 +36,6 @@ type Props = NodeProps<CanvasNodeData> & {
readOnly?: boolean;
eventBus?: EventBus<CanvasEventBusEvents>;
hovered?: boolean;
bringToFront?: boolean; // Determines if entire nodes layer should be brought to front
};
const emit = defineEmits<{
@ -81,7 +80,6 @@ const classes = computed(() => ({
[style.showToolbar]: showToolbar.value,
hovered: props.hovered,
selected: props.selected,
'bring-to-front': props.bringToFront,
}));
/**