8000 feat(text-base): Add Span vertical-align support by bundyo · Pull Request #8257 · NativeScript/NativeScript · GitHub
[go: up one dir, main page]
Skip to content

feat(text-base): Add Span vertical-align support #8257

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Jun 6, 2020
Merged

feat(text-base): Add Span vertical-align support #8257

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
0ce6083
Implement Android part of FormattedString's vertical-align property
bundyo Oct 4, 2019
010406a
Add partial iOS implementation
bundyo Oct 17, 2019
f3dd483
Fixes to the iOS implementation
bundyo Jan 18, 2020
93910e8
Fix linter
bundyo Jan 18, 2020
3c5b60d
Fix wrong import after rebase
bundyo Jan 18, 2020
05b0355
fix: fixed setting text with null value
vtrifonov Jan 20, 2020
d830632
chore: cleanup
NathanWalker Jun 6, 2020
68f7834
chore: cleanup
NathanWalker Jun 6, 2020
f85b60e
chore: cleanup
NathanWalker Jun 6, 2020
ea134a0
chore: cleanup
NathanWalker Jun 6, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 7 additions & 2 deletions nativescript-core/ui/styling/style-properties.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -358,13 +358,18 @@ export namespace HorizontalAlignment {
export const horizontalAlignmentProperty = new CssProperty<Style, HorizontalAlignment>({ name: "horizontalAlignment", cssName: "horizontal-align", defaultValue: HorizontalAlignment.STRETCH, affectsLayout: isIOS, valueConverter: HorizontalAlignment.parse });
horizontalAlignmentProperty.register(Style);

export type VerticalAlignment = "top" | "middle" | "bottom" | "stretch";
export type VerticalAlignment = "top" | "middle" | "bottom" | "stretch" | "text-top" | "text-bottom" | "super" | "sub" | "baseline";
export namespace VerticalAlignment {
export const TOP: "top" = "top";
export const MIDDLE: "middle" = "middle";
export const BOTTOM: "bottom" = "bottom";
export const STRETCH: "stretch" = "stretch";
export const isValid = makeValidator<VerticalAlignment>(TOP, MIDDLE, BOTTOM, STRETCH);
export const TEXTTOP: "text-top" = "text-top";
export const TEXTBOTTOM: "text-bottom" = "text-bottom";
export const SUPER: "super" = "super";
export const SUB: "sub" = "sub";
export const BASELINE: "baseline" = "baseline";
export const isValid = makeValidator<VerticalAlignment>(TOP, MIDDLE, BOTTOM, STRETCH, TEXTTOP, TEXTBOTTOM, SUPER, SUB, BASELINE);
export const parse = (value: string) => value.toLowerCase() === "center" ? MIDDLE : parseStrict(value);
const parseStrict = makeParser<VerticalAlignment>(isValid);
}
Expand Down
2 changes: 1 addition & 1 deletion nativescript-core/ui/text-base/span.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ export class Span extends ViewBase implements SpanDefinition {
}
set text(value: string) {
if (this._text !== value) {
this._text = value;
this._text = value && value.replace("\\n", "\n").replace("\\t", "\t");
this.notifyPropertyChange("text", value);
}
}
Expand Down
16 changes: 14 additions & 2 deletions nativescript-core/ui/text-base/text-base-common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,6 +201,18 @@ function onFormattedTextPropertyChanged(textBase: TextBaseCommon, oldValue: Form
}
}

export function getClosestPropertyValue<T>(property: CssProperty<any, T>, span: Span): T {
if (property.isSet(span.style)) {
return span.style[property.name];
} else if (property.isSet(span.parent.style)) {
// parent is FormattedString
return span.parent.style[property.name];
} else if (property.isSet(span.parent.parent.style)) {
// parent.parent is TextBase
return span.parent.parent.style[property.name];
}
}

const textAlignmentConverter = makeParser<TextAlignment>(makeValidator<TextAlignment>("initial", "left", "center", "right"));
export const textAlignmentProperty = new InheritedCssProperty<Style, TextAlignment>({ name: "textAlignment", cssName: "text-align", defaultValue: "initial", valueConverter: textAlignmentConverter });
textAlignmentProperty.register(Style);
Expand All @@ -217,10 +229,10 @@ const textDecorationConverter = makeParser<TextDecoration>(makeValidator<TextDec
export const textDecorationProperty = new CssProperty<Style, TextDecoration>({ name: "textDecoration", cssName: "text-decoration", defaultValue: "none", valueConverter: textDecorationConverter });
textDecorationProperty.register(Style);

export const letterSpacingProperty = new CssProperty<Style, number>({ name: "letterSpacing", cssName: "letter-spacing", defaultValue: 0, affectsLayout: isIOS, valueConverter: v => parseFloat(v) });
export const letterSpacingProperty = new InheritedCssProperty<Style, number>({ name: "letterSpacing", cssName: "letter-spacing", defaultValue: 0, affectsLayout: isIOS, valueConverter: v => parseFloat(v) });
letterSpacingProperty.register(Style);

export const lineHeightProperty = new CssProperty<Style, number>({ name: "lineHeight", cssName: "line-height", affectsLayout: isIOS, valueConverter: v => parseFloat(v) });
export const lineHeightProperty = new InheritedCssProperty<Style, number>({ name: "lineHeight", cssName: "line-height", affectsLayout: isIOS, valueConverter: v => parseFloat(v) });
lineHeightProperty.register(Style);

export const resetSymbol = Symbol("textPropertyDefault");
109 changes: 76 additions & 33 deletions nativescript-core/ui/text-base/text-base.android.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// Types
import { TextTransformation, TextDecoration, TextAlignment, TextTransform, WhiteSpace } from "./text-base-common";
import { TextTransformation, TextDecoration, TextAlignment, TextTransform, WhiteSpace, getClosestPropertyValue } from "./text-base-common";

// Requires
import { Font } from "../styling/font";
Expand Down Expand Up @@ -33,7 +33,7 @@ function initializeTextTransformation(): void {
// NOTE: Do we need to transform the new text here?
const formattedText = this.textBase.formattedText;
if (formattedText) {
return createSpannableStringBuilder(formattedText);
return createSpannableStringBuilder(formattedText, (<android.widget.TextView>view).getTextSize());
}
else {
const text = this.textBase.text;
Expand Down Expand Up @@ -170,7 +170,7 @@ export class TextBase extends TextBaseCommon {
return;
}

const spannableStringBuilder = createSpannableStringBuilder(value);
const spannableStringBuilder = createSpannableStringBuilder(value, this.style.fontSize);
nativeView.setText(<any>spannableStringBuilder);
this._setTappableState(isStringTappable(value));

Expand Down Expand Up @@ -265,10 +265,11 @@ export class TextBase extends TextBaseCommon {
}

[lineHeightProperty.getDefault](): number {
return this.nativeTextViewProtected.getLineSpacingExtra() / layout.getDisplayDensity();
return this.nativeTextViewProtected.getLineHeight() / layout.getDisplayDensity();
}
[lineHeightProperty.setNative](value: number) {
this.nativeTextViewProtected.setLineSpacing(value * layout.getDisplayDensity(), 1);
const fontHeight = this.nativeTextViewProtected.getPaint().getFontMetricsInt(null);
this.nativeTextViewProtected.setLineSpacing(Math.max(value - fontHeight, 0) * layout.getDisplayDensity(), 1);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@bundyo was this intended here and tested as far as you know? We are seeing some oddities on android with line height related to this change.

Copy link
Contributor Author
@bundyo bundyo Aug 7, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, unfortunately the line height in Android wasn't really line height, but instead the space between the two lines, so I changed it to follow what a line height is on web. I communicated then, that this was a breaking change and maybe better left for a major version.

}

[fontInternalProperty.getDefault](): android.graphics.Typeface {
Expand Down Expand Up @@ -348,7 +349,7 @@ export class TextBase extends TextBaseCommon {

let transformedText: any;
if (this.formattedText) {
transformedText = createSpannableStringBuilder(this.formattedText);
transformedText = createSpannableStringBuilder(this.formattedText, this.style.fontSize);
} else {
const text = this.text;
const stringValue = (text === null || text === undefined) ? "" : text.toString();
Expand Down Expand Up @@ -415,7 +416,7 @@ function isStringTappable(formattedString: FormattedString) {
return false;
}

function createSpannableStringBuilder(formattedString: FormattedString): android.text.SpannableStringBuilder {
function createSpannableStringBuilder(formattedString: FormattedString, defaultFontSize: number): android.text.SpannableStringBuilder {
if (!formattedString || !formattedString.parent) {
return null;
}
Expand All @@ -433,18 +434,75 @@ function createSpannableStringBuilder(formattedString: FormattedString): android
spanLength = spanText.length;
if (spanLength > 0) {
ssb.insert(spanStart, spanText);
setSpanModifiers(ssb, span, spanStart, spanStart + spanLength);
setSpanModifiers(ssb, span, spanStart, spanStart + spanLength, defaultFontSize);
spanStart += spanLength;
}
}

return ssb;
}

function setSpanModifiers(ssb: android.text.SpannableStringBuilder, span: Span, start: number, end: number): void {
class BaselineAdjustedSpan extends android.text.style.MetricAffectingSpan {
fontSize: number;
align: string | number = "baseline";

constructor(fontSize: number, align?: string | number) {
super();

this.align = align;
this.fontSize = fontSize;
}

updateDrawState(paint: android.text.TextPaint) {
this.updateState(paint);
}

updateMeasureState(paint: android.text.TextPaint) {
this.updateState(paint);
}

updateState(paint: android.text.TextPaint) {
const metrics = paint.getFontMetrics();

if (!this.align || this.align === "baseline") {
return;
}

if (this.align === "top") {
return paint.baselineShift = -this.fontSize - metrics.bottom - metrics.top;
}

if (this.align === "bottom") {
return paint.baselineShift = metrics.bottom;
}

if (this.align === "text-top") {
return paint.baselineShift = -this.fontSize - metrics.descent - metrics.ascent;
}

if (this.align === "text-bottom") {
return paint.baselineShift = metrics.bottom - metrics.descent;
}

if (this.align === "middle") {
return paint.baselineShift = (metrics.descent - metrics.ascent) / 2 - metrics.descent;
}

if (this.align === "super") {
return paint.baselineShift = -this.fontSize * .4;
}

if (this.align === "sub") {
return paint.baselineShift = (metrics.descent - metrics.ascent) * .4;
}
}
}

function setSpanModifiers(ssb: android.text.SpannableStringBuilder, span: Span, start: number, end: number, defaultFontSize: number): void {
const spanStyle = span.style;
const bold = isBold(spanStyle.fontWeight);
const italic = spanStyle.fontStyle === "italic";
const align = spanStyle.verticalAlignment;

if (bold && italic) {
ssb.setSpan(new android.text.style.StyleSpan(android.graphics.Typeface.BOLD_ITALIC), start, end, android.text.Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
Expand Down Expand Up @@ -474,45 +532,30 @@ function setSpanModifiers(ssb: android.text.SpannableStringBuilder, span: Span,
ssb.setSpan(new android.text.style.ForegroundColorSpan(color.android), start, end, android.text.Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
}

let backgroundColor: Color;
if (backgroundColorProperty.isSet(spanStyle)) {
backgroundColor = spanStyle.backgroundColor;
} else if (backgroundColorProperty.isSet(span.parent.style)) {
// parent is FormattedString
backgroundColor = span.parent.style.backgroundColor;
} else if (backgroundColorProperty.isSet(span.parent.parent.style)) {
// parent.parent is TextBase
backgroundColor = span.parent.parent.style.backgroundColor;
}
const backgroundColor: Color = getClosestPropertyValue(backgroundColorProperty, span);

if (backgroundColor) {
ssb.setSpan(new android.text.style.BackgroundColorSpan(backgroundColor.android), start, end, android.text.Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
}

let valueSource: typeof spanStyle;
if (textDecorationProperty.isSet(spanStyle)) {
valueSource = spanStyle;
} else if (textDecorationProperty.isSet(span.parent.style)) {
// span.parent is FormattedString
valueSource = span.parent.style;
} else if (textDecorationProperty.isSet(span.parent.parent.style)) {
// span.parent.parent is TextBase
valueSource = span.parent.parent.style;
}
const textDecoration: TextDecoration = getClosestPropertyValue(textDecorationProperty, span);

if (valueSource) {
const textDecorations = valueSource.textDecoration;
const underline = textDecorations.indexOf("underline") !== -1;
if (textDecoration) {
const underline = textDecoration.indexOf("underline") !== -1;
if (underline) {
ssb.setSpan(new android.text.style.UnderlineSpan(), start, end, android.text.Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
}

const strikethrough = textDecorations.indexOf("line-through") !== -1;
const strikethrough = textDecoration.indexOf("line-through") !== -1;
if (strikethrough) {
ssb.setSpan(new android.text.style.StrikethroughSpan(), start, end, android.text.Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
}
}

if (align) {
ssb.setSpan(new BaselineAdjustedSpan(defaultFontSize * layout.getDisplayDensity(), align), start, end, android.text.Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
}

const tappable = span.tappable;
if (tappable) {
initializeClickableSpan();
Expand Down
Loading
0