diff --git a/css/panels.css b/css/panels.css index ed9db28e..7281cab0 100644 --- a/css/panels.css +++ b/css/panels.css @@ -1691,6 +1691,7 @@ span.controller_state_section_info { } .controller_state_connection.selected { --color-connection: var(--color-marker); + z-index: 1; } .controller_state_connection:hover { --color-connection: var(--color-light); diff --git a/js/animations/animation_controllers.js b/js/animations/animation_controllers.js index 2ce627e6..2d2a6490 100644 --- a/js/animations/animation_controllers.js +++ b/js/animations/animation_controllers.js @@ -1360,7 +1360,23 @@ Interface.definePanels(() => { }; if (!this.controller) return connections; let {states, selected_state} = this.controller; + + // Count incoming plugs let incoming_plugs = {}; + let total_incoming_plugs = {}; + states.forEach((state, state_index) => { + total_incoming_plugs[state.uuid] = {top: 0, bottom: 0}; + states.forEach((origin_state, origin_state_index) => { + if (state === origin_state) return; + origin_state.transitions.forEach(t => { + if (t.target === state.uuid) { + state_index < origin_state_index + ? total_incoming_plugs[state.uuid].top++ + : total_incoming_plugs[state.uuid].bottom++; + } + }); + }); + }); let plug_gap = 16; @@ -1407,15 +1423,17 @@ Interface.definePanels(() => { } if (back) {// Top + let incoming_gap_width = Math.min(plug_gap, 260 / total_incoming_plugs[target.uuid].top); connections.max_layer_top = Math.max(connections.max_layer_top, layer); con.end_x = state_index * 312 + 150 + start_plug_offset; - con.start_x = target_index * 312 + (300 - 25 - incoming_plugs[target.uuid].top * plug_gap); + con.start_x = target_index * 312 + (300 - 25 - incoming_plugs[target.uuid].top * incoming_gap_width); incoming_plugs[target.uuid].top++; } else {// Bottom + let incoming_gap_width = Math.min(plug_gap, 260 / total_incoming_plugs[target.uuid].bottom); connections.max_layer_bottom = Math.max(connections.max_layer_bottom, layer); con.start_x = state_index * 312 + 150 - start_plug_offset; - con.end_x = target_index * 312 + 25 + incoming_plugs[target.uuid].bottom * plug_gap; + con.end_x = target_index * 312 + 25 + incoming_plugs[target.uuid].bottom * incoming_gap_width; incoming_plugs[target.uuid].bottom++; }