jgraph / jgraph/drawio

Individual border color for partialRectangle or similar elements

Open
#5,694 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
Dominant language
JavaScript
Stars
8.2k
Forks
1.2k
PR merge metrics
No merged PRs in 30d

Description

  • I agree to follow the Code of Conduct that this project adheres to.
  • I have searched the issue tracker for a feature request that matches the one I want to file, without success.

Thanks for such a wonderful product. It makes daily diagramming a breeze, and can be done on mobile, desktop devices effortlessly. It helps conveys ideas without the hassle that other software packages carry with them.

Some time ago I asked (and found a solution) to the problem of turning on or off individual borders for elements. The user who answered this question was kind enough to provide a clear explanation and it served my purposes at that point.

Change Style of Individual Borders of a Rectangle

I now have a specific use case related to the same issue. In this case, I wish to individually select the color attribute for each of the elements borders. The style element is "strokeColor". and it only allows for one single color. Given that drawio is HTML and CSS intensive, I thought about trying the following in the Edit Style dialog to select individual colors for each border section: Top, Right, Bottom, Left

border-color: purple orange teal gray; /* Top, Right, Bottom, Left */

However, only one color can be selected at a time.
I tried this: strokeColor=[red, blue, orange, teal] and this: strokeColor=red, blue, orange, teal;

Obviously I am missing something, or the feature does not exist.

Proposed Solution

Adding the possibility to select individual element border colors would be appreciated.
Ideal: Adding a selector in the properties, such that they all default to a single stroke color always, unless the user manually changes each elements colors. Then the user can save this style for further use in their libraries.

Alternatives considered

As mentioned above, I tried some CSS idioms, to no avail.

Additional context

This is a sample partial rectangle with bottom and left border ON. Notice the individual strokeColor property applies for each of the individual borders.

Image

This would be the expected behavior of the feature addition: Both left and bottom border are ON. Each of them have individual colors blue and red selected.

Image

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the request in draw.io's Edit Style dialog using a partial rectangle with bottom and left borders enabled, then trace how the single strokeColor value is applied. Done means users can assign separate colors to the top, right, bottom, and left borders where present, while retaining a shared default and saving the result in a reusable style.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.