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 edgesHoveredById = ref<Record<string, boolean>>({});
const edgesBringToFrontById = ref<Record<string, boolean>>({}); const edgesBringToFrontById = ref<Record<string, boolean>>({});
const nodesHoveredById = ref<Record<string, boolean>>({});
onEdgeMouseEnter(({ edge }) => { onEdgeMouseEnter(({ edge }) => {
edgesBringToFrontById.value = { [edge.id]: true }; edgesBringToFrontById.value = { [edge.id]: true };
@ -381,6 +380,13 @@ onEdgeMouseLeave(({ edge }) => {
edgesHoveredById.value = { [edge.id]: false }; 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 }) => { onNodeMouseEnter(({ node }) => {
nodesHoveredById.value = { [node.id]: true }; nodesHoveredById.value = { [node.id]: true };
}); });
@ -389,10 +395,6 @@ onNodeMouseLeave(({ node }) => {
nodesHoveredById.value = { [node.id]: false }; nodesHoveredById.value = { [node.id]: false };
}); });
function onUpdateEdgeHovered(id: string, hovered: boolean) {
edgesHoveredById.value[id] = hovered;
}
/** /**
* Executions * Executions
*/ */
@ -653,7 +655,6 @@ provide(CanvasKey, {
:read-only="readOnly" :read-only="readOnly"
:event-bus="eventBus" :event-bus="eventBus"
:hovered="nodesHoveredById[nodeProps.id]" :hovered="nodesHoveredById[nodeProps.id]"
:bring-to-front="nodesHoveredById[nodeProps.id]"
@delete="onDeleteNode" @delete="onDeleteNode"
@run="onRunNode" @run="onRunNode"
@select="onSelectNode" @select="onSelectNode"
@ -675,7 +676,7 @@ provide(CanvasKey, {
:bring-to-front="edgesBringToFrontById[edgeProps.id]" :bring-to-front="edgesBringToFrontById[edgeProps.id]"
@add="onClickConnectionAdd" @add="onClickConnectionAdd"
@delete="onDeleteConnection" @delete="onDeleteConnection"
@update:hovered="onUpdateEdgeHovered(edgeProps.id, $event)" @update:label:hovered="onUpdateEdgeLabelHovered(edgeProps.id, $event)"
/> />
</template> </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<{ const emit = defineEmits<{
add: [connection: Connection]; add: [connection: Connection];
delete: [connection: Connection]; delete: [connection: Connection];
'update:hovered': [hovered: boolean]; 'update:label:hovered': [hovered: boolean];
}>(); }>();
export type CanvasEdgeProps = EdgeProps<CanvasConnectionData> & { export type CanvasEdgeProps = EdgeProps<CanvasConnectionData> & {
@ -111,11 +111,11 @@ function onDelete() {
} }
function onEdgeLabelMouseEnter() { function onEdgeLabelMouseEnter() {
emit('update:hovered', true); emit('update:label:hovered', true);
} }
function onEdgeLabelMouseLeave() { function onEdgeLabelMouseLeave() {
emit('update:hovered', false); emit('update:label:hovered', false);
} }
</script> </script>

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

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