search

jgraph / drawio

draw.io is a JavaScript, client-side editor for general diagramming.
https://www.drawio.com
Other
41.14k stars 7.64k forks source link

Request: Labels knockout lines, without using background color #3354

Closed Phrogz closed 7 months ago

Phrogz commented 1 year ago

Is your feature request related to a problem? Please describe. Labels on lines usually want to "hide" the line where it passes under the label, in order to prevent visual confusion reading the text. For example: a line with label text over the middle; the line is not visible as it goes behind the text

This is possible currently only by setting an opaque background color that is the same as the background behind it. This causes two problems:

  1. When the background color varies, custom colors must be picked for different labels. This makes it difficult to have a single default style for creating new labeled connections.
    a series of inset boxes with labeled lines connecting them, with different color for each box background

Further, if the style changes - if new background colors are desired - then every affected label must be adjusted.
the same image as before, but the background colors of each box has been adjusted; the backgrounds of the labels are unchanged, causing them to stand out oddly

  1. Given a diagram where the labels are NOT over a background, and exporting as a transparent PNG, the labels have non-transparent backgrounds. This prevents the diagram from being used cleanly over a variety of non-white backgrounds. image

Describe the solution you'd like Labels on lines should have a mechanism to "erase" the line underneath them without drawing a background.

Suggestion: The Text style gains an additional checkbox named like "Knockout Line" or "Clear Background". This would use a compositing mode that sets the alpha on the associated line only in the background region. This would likely require drawing each line first to an offscreen buffer and then compositing the text with it, before compositing that buffer to the final result. As this checkbox would not be pertinent for text that is not a label on a line, the checkbox could either be shown only when label text is selected, or perhaps disabled unless label text is selected.

Describe alternatives you've considered Instead of a checkbox that causes a complete knockout, provide a percent input with a label like "Background Knockout" which sets the alpha value on the line to a normalized 0-255 value. This would permit the sometimes-desirable effect of a semi-transparent line continuing behind the label: image

stale[bot] commented 8 months ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. See the FAQ for more information.