Feature request: set text range background

[ghost]

Hi Tomas,
Would it be possible to look into adding a couple of method to set and apply a background color to selected ranges within text?

The functionality I am hoping to achieve is to store the ranges selected by the user for a given text string and give them the option to show/hide background color for those ranges.

For example:
myRange = textAreaCSS.getSelection();
myRange.setBackground(Color c);
myRange.showBackground(true);

Thanks for your help with this.
Best regards,
Maher

[TomasMikula]

Hi Maher,

I'm planning on adding a different, more general feature, that would enable you to do this. It is setting and getting multiple style ranges at once.

There would be a class like

class StyleRanges<S> {
    int start;
    int[] ends;
    S[] styles;
}

where styles[0] represents the style between start and ends[0], styles[1] represents the style between ends[0] and ends[1], and so on.

You would have these additional methods on text area:

void setStyleRanges(StyleRanges ranges);
StyleRanges getStyleRanges(int from, int to);

Using these, you would set the background for a range [from, to) like this:

StyleRanges ranges = area.getStyleRanges(from, to);
for(int i = 0; i < ranges.styles.length; ++i) {
    ranges.styles[i] = ranges.styles[i] + "-fx-background-color: #abcdef;";
}
area.setStyleRanges(ranges);

Let me know if this would work for you.

I should be able to add this early next year.

Regards,
Tomas

[ghost]

Hi Tomas,
Thanks for looking into this!

A question: What does the notation mean? Is this like defining a type
in ArrayList objects?

Feedback: I think (and this might be my personal approach to things), I
believe it would be easier to work at the range level of granularity and
give the user the preference of how they would like to collect them in
their preferred data structure. It would make it easier to do in-line on
the fly editing; Sort of what you added for the InLineCSSTextArea. So, I
pick a range and set its background on the fly. These are my two cents :)

Thanks a lot for your help! and have great holiday!
Hopefully you will see a cool prototype somewhere in the near future.
Thanks again!
Maher

On Mon, Dec 23, 2013 at 7:51 PM, TomasMikula notifications@github.comwrote:

Hi Maher,

I'm planning on adding a different, more general feature, that would
enable you to do this. It is setting and getting multiple style ranges at
once.

There would be a class like

class StyleRanges {
int start;
int[] ends;
S[] styles;}

where styles[0] represents the style between start and ends[0], style[1]represents the style between
ends[0] and ends[1], and so on.

You would have these additional methods on text area:

void setStyleRanges(StyleRanges ranges);StyleRanges getStyleRanges(int from, int to);

Using these, you would set the background for a range [from, to) like
this:

StyleRanges ranges = area.getStyleRanges(from, to);for(int i = 0; i < ranges.styles.length; ++i) {
ranges.styles[i] = ranges.styles[i] + "-fx-background-color: #abcdef;"}area.setStyleRanges(ranges);

Let me know if this would work for you.

I should be able to add this early next year.

Regards,
Tomas

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/4#issuecomment-31157224
.

[TomasMikula]

The <S> notation means a type parameter, as in ArrayList, except in this case it is the type of your style information. For InlineCssTextArea, S would be just String.

Let's just make sure we are on the same page. You already can set the background of a text range using setStyle(from, to, "-fx-background-color: #abcdef;"). The problem with this is that you lose any other style information (e.g. bold) in that range. So I assume you are looking for a way to set the background color without affecting any other style properties in that range.

But then you might want the same for, say, bold face: Set bold font for a given range, without affecting any other style properties in that range. So we add area.setBoldFace(int from, int to, boolean bold). But then, the same is desired for italics, underline, font color, font size, ... You see the problem with this approach - it cannot possibly cover all the options one could come up with. That's why I am looking for a more general solution.

Best,
Tomas

[ghost]

Hi Tomas,
Thanks for the clarification. and Not sure I missed it. CSS has a
background parameter! Oops! and YES!! I see what you're getting at now.
Makes sense.

The way I am going about handling my CSS styles and ranges is as follows:

make a range object which will store the selected range, the text strings
value, and the CSS-string.

For the CSS, I'll store color values, sizes, weight, etc into fields, which
get updated from GUI sliders (one for each font parameter).

And then construct a CSS style string by concatenating slider values as in:
"-fx-background-color: " + getBackgroundColorSliderValue() + ";" + etc

Then have a wrapping method to manage the updating of the CSS style string
when the value of any of the sliders change. Each selected range will have
its own CSS.

that's my poor man way of doing it I guess :D
Thanks again!
Maher

On Mon, Dec 23, 2013 at 9:24 PM, TomasMikula notifications@github.comwrote:

The notation means a type parameter, as in ArrayList, except in this
case it is the type of your style information. For InlineCssTextArea, Swould be just
String.

Let's just make sure we are on the same page. You already can set the
background of a text range using setStyle(from, to,
"-fx-background-color: #abcdef;"). The problem with this is that you lose
any other style information (e.g. bold) in that range. So I assume you are
looking for a way to set the background color without affecting any other
style properties in that range.

But then you might want the same for, say, bold face: Set bold font for a
given range, without affecting any other style properties in that range. So
we add area.setBoldFace(int from, int to, boolean bold). But then, the
same is desired for italics, underline, font color, font size, ... You see
the problem with this approach. That's why I am looking for a more general
solution.

Best,
Tomas

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/4#issuecomment-31159177
.

[TomasMikula]

I don't quite understand when you construct your ranges and why you keep track of them by yourself. If you are working on a rich text editor, what happens (in terms of your ranges) when you select text between 0 and 10 and click bold, and then select text between 5 and 15 and choose yellow background color? How do you handle overlapping ranges?

[ghost]

Hi Tomas, There is a different concept in the prototype I am working on,
wait to see what will happen :)
It may take me time to build, but will be interesting to play with I hope.
I am still in very early stages. Hopefully I will get something in early
Feb. I'll report back once I get something worth showing
Best
Maher
On Dec 24, 2013 6:02 AM, "TomasMikula" notifications@github.com wrote:

I don't quite understand when you construct your ranges and why you keep
track of them by yourself. If you are working on a rich text editor, what
happens (in terms of your ranges) when you select text between 0 and 10 and
click bold, and then select text between 5 and 15 and choose yellow
background color? How do you handle overlapping ranges?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/4#issuecomment-31167698
.

[TomasMikula]

Alright, I'm looking forward to your working example ;). As for this issue,
do you have all the support from CodeArea you need?

On Tue, Dec 24, 2013 at 12:51 PM, melkhaldi notifications@github.comwrote:

Hi Tomas, There is a different concept in the prototype I am working on,
wait to see what will happen :)
It may take me time to build, but will be interesting to play with I hope.
I am still in very early stages. Hopefully I will get something in early
Feb. I'll report back once I get something worth showing
Best
Maher
On Dec 24, 2013 6:02 AM, "TomasMikula" notifications@github.com wrote:

I don't quite understand when you construct your ranges and why you keep
track of them by yourself. If you are working on a rich text editor,
what
happens (in terms of your ranges) when you select text between 0 and 10
and
click bold, and then select text between 5 and 15 and choose yellow
background color? How do you handle overlapping ranges?

—
Reply to this email directly or view it on GitHub<
https://github.com/TomasMikula/CodeAreaFX/issues/4#issuecomment-31167698>
.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/4#issuecomment-31169052
.

[ghost]

Yes. I do sir :D I'll report back!
On Dec 24, 2013 7:02 AM, "TomasMikula" notifications@github.com wrote:

Alright, I'm looking forward to your working example ;). As for this
issue,
do you have all the support from CodeArea you need?

On Tue, Dec 24, 2013 at 12:51 PM, melkhaldi notifications@github.comwrote:

Hi Tomas, There is a different concept in the prototype I am working on,
wait to see what will happen :)
It may take me time to build, but will be interesting to play with I
hope.
I am still in very early stages. Hopefully I will get something in early
Feb. I'll report back once I get something worth showing
Best
Maher
On Dec 24, 2013 6:02 AM, "TomasMikula" notifications@github.com
wrote:

I don't quite understand when you construct your ranges and why you
keep
track of them by yourself. If you are working on a rich text editor,
what
happens (in terms of your ranges) when you select text between 0 and
10
and
click bold, and then select text between 5 and 15 and choose yellow
background color? How do you handle overlapping ranges?

—
Reply to this email directly or view it on GitHub<
https://github.com/TomasMikula/CodeAreaFX/issues/4#issuecomment-31167698>

.

—
Reply to this email directly or view it on GitHub<
https://github.com/TomasMikula/CodeAreaFX/issues/4#issuecomment-31169052>
.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/4#issuecomment-31169357
.

[TomasMikula]

Turns out I was too optimistic.
setStyle(from, to, "-fx-background-color: #abcdef;")
does not work because Text does not support background color.

Let's track progress on this in #22.