diff --git a/lib/src/constants.dart b/lib/src/constants.dart index ce1214dad..656112868 100644 --- a/lib/src/constants.dart +++ b/lib/src/constants.dart @@ -430,6 +430,7 @@ const css_selector_domain = 'domain-line'; const css_selector_base_pair_line = 'base-pair-line'; const css_selector_extension = 'extension-line'; const css_selector_crossover = 'crossover-curve'; +const css_selector_crossover_same_helix = 'crossover-curve-same-helix'; const css_selector_loopout = 'loopout-curve'; const css_selector_end_5p_strand = 'five-prime-end-first-substrand'; const css_selector_end_3p_strand = 'three-prime-end-last-substrand'; diff --git a/lib/src/view/design_main_strand_crossover.dart b/lib/src/view/design_main_strand_crossover.dart index 9a9f02413..bd38a03ef 100644 --- a/lib/src/view/design_main_strand_crossover.dart +++ b/lib/src/view/design_main_strand_crossover.dart @@ -69,6 +69,13 @@ class DesignMainStrandCrossoverComponent classname += ' ' + constants.css_selector_scaffold; } + // Want to display crossovers within a helix a little darker since it's hard to see them; + // This is for "crossovers" that really are just buffered space between domains on the same helix. + if (props.prev_domain.helix == props.next_domain.helix && + props.prev_domain.forward == props.next_domain.forward) { + classname += ' ' + constants.css_selector_crossover_same_helix; + } + var prev_group = props.helices[props.prev_domain.helix].group; var next_group = props.helices[props.next_domain.helix].group; bool within_group = prev_group == next_group; diff --git a/web/scadnano-styles.css b/web/scadnano-styles.css index ee21607cd..c697a24a7 100644 --- a/web/scadnano-styles.css +++ b/web/scadnano-styles.css @@ -742,6 +742,10 @@ label + select { fill: none; } +.crossover-curve-same-helix { + stroke-opacity: 0.55; +} + .potential-vertical-crossover-curve { stroke-width: 4; fill: none;