javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-11-02 19:12:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(css): text-stroke support (#10399)

Browse Source 
closes https://github.com/NativeScript/NativeScript/issues/3597
closes https://github.com/NativeScript/NativeScript/issues/3972
This commit is contained in:
Nathan Walker
2023-10-09 12:00:21 -07:00
committed by GitHub
parent 93e24783a1
commit d6478237ec
18 changed files with 230 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
packages/core/ui/text-base/index.android.ts
View File

@ -5,9 +5,10 @@ import { ShadowCSSValues } from '../styling/css-shadow';
// Requires
import { Font } from '../styling/font';
import { backgroundColorProperty } from '../styling/style-properties';
import { TextBaseCommon, formattedTextProperty, textAlignmentProperty, textDecorationProperty, textProperty, textTransformProperty, textShadowProperty, letterSpacingProperty, whiteSpaceProperty, lineHeightProperty, isBold, resetSymbol } from './text-base-common';
import { TextBaseCommon, formattedTextProperty, textAlignmentProperty, textDecorationProperty, textProperty, textTransformProperty, textShadowProperty, textStrokeProperty, letterSpacingProperty, whiteSpaceProperty, lineHeightProperty, isBold, resetSymbol } from './text-base-common';
import { Color } from '../../color';
import { colorProperty, fontSizeProperty, fontInternalProperty, paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, Length } from '../styling/style-properties';
import { StrokeCSSValues } from '../styling/css-stroke';
import { FormattedString } from './formatted-string';
import { Span } from './span';
import { CoreTypes } from '../../core-types';
@ -15,7 +16,6 @@ import { layout } from '../../utils';
import { SDK_VERSION } from '../../utils/constants';
import { isString, isNullOrUndefined } from '../../utils/types';
import { accessibilityIdentifierProperty } from '../../accessibility/accessibility-properties';
import * as Utils from '../../utils';
import { testIDProperty } from '../../ui/core/view';
export * from './text-base-common';
@ -169,9 +169,9 @@ function initializeBaselineAdjustedSpan(): void {
}
export class TextBase extends TextBaseCommon {
nativeViewProtected: android.widget.TextView;
nativeViewProtected: org.nativescript.widgets.StyleableTextView;
// @ts-ignore
nativeTextViewProtected: android.widget.TextView;
nativeTextViewProtected: org.nativescript.widgets.StyleableTextView;
private _defaultTransformationMethod: android.text.method.TransformationMethod;
private _paintFlags: number;
private _minHeight: number;
@ -237,6 +237,9 @@ export class TextBase extends TextBaseCommon {
this._setNativeText(reset);
}
[textStrokeProperty.setNative](value: StrokeCSSValues) {
this._setNativeText();
}
createFormattedTextNative(value: FormattedString) {
return createSpannableStringBuilder(value, this.style.fontSize);
}
@ -386,7 +389,7 @@ export class TextBase extends TextBaseCommon {
}
}
[textDecorationProperty.getDefault](value: number) {
[textDecorationProperty.getDefault]() {
return (this._paintFlags = this.nativeTextViewProtected.getPaintFlags());
}
@ -410,7 +413,7 @@ export class TextBase extends TextBaseCommon {
}
}
[textShadowProperty.getDefault](value: number) {
[textShadowProperty.getDefault]() {
return {
radius: this.nativeTextViewProtected.getShadowRadius(),
offsetX: this.nativeTextViewProtected.getShadowDx(),
@ -498,6 +501,13 @@ export class TextBase extends TextBaseCommon {
transformedText = getTransformedText(stringValue, this.textTransform);
}
if (this.style?.textStroke) {
this.nativeViewProtected.setTextStroke(Length.toDevicePixels(this.style.textStroke.width), this.style.textStroke.color.android, this.style.color.android);
} else if (this.nativeViewProtected.setTextStroke) {
// reset
this.nativeViewProtected.setTextStroke(0, 0, 0);
}
this.nativeTextViewProtected.setText(<any>transformedText);
}

2
packages/core/ui/text-base/index.d.ts vendored
View File

@ -5,6 +5,7 @@ import { Length } from '../styling/style-properties';
import { Property, CssProperty, InheritedCssProperty } from '../core/properties';
import { CoreTypes } from '../../core-types';
import { ShadowCSSValues } from '../styling/css-shadow';
import { StrokeCSSValues } from '../styling/css-stroke';
export class TextBase extends View implements AddChildFromBuilder {
/**
@ -138,6 +139,7 @@ export const textAlignmentProperty: InheritedCssProperty<Style, CoreTypes.TextAl
export const textDecorationProperty: CssProperty<Style, CoreTypes.TextDecorationType>;
export const textTransformProperty: CssProperty<Style, CoreTypes.TextTransformType>;
export const textShadowProperty: CssProperty<Style, ShadowCSSValues>;
export const textStrokeProperty: CssProperty<Style, StrokeCSSValues>;
export const whiteSpaceProperty: CssProperty<Style, CoreTypes.WhiteSpaceType>;
export const textOverflowProperty: CssProperty<Style, CoreTypes.TextOverflowType>;
export const letterSpacingProperty: CssProperty<Style, number>;

14
packages/core/ui/text-base/index.ios.ts
View File

@ -5,11 +5,12 @@ import { ShadowCSSValues } from '../styling/css-shadow';
// Requires
import { Font } from '../styling/font';
import { iosAccessibilityAdjustsFontSizeProperty, iosAccessibilityMaxFontScaleProperty, iosAccessibilityMinFontScaleProperty } from '../../accessibility/accessibility-properties';
import { TextBaseCommon, textProperty, formattedTextProperty, textAlignmentProperty, textDecorationProperty, textTransformProperty, textShadowProperty, letterSpacingProperty, lineHeightProperty, maxLinesProperty, resetSymbol } from './text-base-common';
import { TextBaseCommon, textProperty, formattedTextProperty, textAlignmentProperty, textDecorationProperty, textTransformProperty, textShadowProperty, textStrokeProperty, letterSpacingProperty, lineHeightProperty, maxLinesProperty, resetSymbol } from './text-base-common';
import { Color } from '../../color';
import { FormattedString } from './formatted-string';
import { Span } from './span';
import { colorProperty, fontInternalProperty, fontScaleInternalProperty, Length } from '../styling/style-properties';
import { StrokeCSSValues } from '../styling/css-stroke';
import { isString, isNullOrUndefined } from '../../utils/types';
import { iOSNativeHelper, layout } from '../../utils';
import { Trace } from '../../trace';
@ -247,6 +248,10 @@ export class TextBase extends TextBaseCommon {
this._setNativeText();
}
[textStrokeProperty.setNative](value: StrokeCSSValues) {
this._setNativeText();
}
[letterSpacingProperty.setNative](value: number) {
this._setNativeText();
}
@ -306,16 +311,19 @@ export class TextBase extends TextBaseCommon {
const letterSpacing = this.style.letterSpacing ? this.style.letterSpacing : 0;
const lineHeight = this.style.lineHeight ? this.style.lineHeight : 0;
if (this.formattedText) {
(<any>this.nativeTextViewProtected).nativeScriptSetFormattedTextDecorationAndTransformLetterSpacingLineHeight(this.getFormattedStringDetails(this.formattedText), letterSpacing, lineHeight);
this.nativeTextViewProtected.nativeScriptSetFormattedTextDecorationAndTransformLetterSpacingLineHeight(this.getFormattedStringDetails(this.formattedText) as any, letterSpacing, lineHeight);
} else {
// console.log('setTextDecorationAndTransform...')
const text = getTransformedText(isNullOrUndefined(this.text) ? '' : `${this.text}`, this.textTransform);
(<any>this.nativeTextViewProtected).nativeScriptSetTextDecorationAndTransformTextDecorationLetterSpacingLineHeight(text, this.style.textDecoration || '', letterSpacing, lineHeight);
this.nativeTextViewProtected.nativeScriptSetTextDecorationAndTransformTextDecorationLetterSpacingLineHeight(text, this.style.textDecoration || '', letterSpacing, lineHeight);
if (!this.style?.color && majorVersion >= 13 && UIColor.labelColor) {
this._setColor(UIColor.labelColor);
}
}
if (this.style?.textStroke) {
this.nativeTextViewProtected.nativeScriptSetFormattedTextStrokeColor(Length.toDevicePixels(this.style.textStroke.width, 0), this.style.textStroke.color.ios);
}
}
createFormattedTextNative(value: FormattedString) {

11
packages/core/ui/text-base/text-base-common.ts
View File

@ -14,6 +14,7 @@ import { CoreTypes } from '../../core-types';
import { TextBase as TextBaseDefinition } from '.';
import { Color } from '../../color';
import { ShadowCSSValues, parseCSSShadow } from '../styling/css-shadow';
import { StrokeCSSValues, parseCSSStroke } from '../styling/css-stroke';
const CHILD_SPAN = 'Span';
const CHILD_FORMATTED_TEXT = 'formattedText';
@ -288,6 +289,16 @@ export const textShadowProperty = new CssProperty<Style, string | ShadowCSSValue
});
textShadowProperty.register(Style);
export const textStrokeProperty = new CssProperty<Style, string | StrokeCSSValues>({
name: 'textStroke',
cssName: 'text-stroke',
affectsLayout: global.isIOS,
valueConverter: (value) => {
return parseCSSStroke(value);
},
});
textStrokeProperty.register(Style);
const whiteSpaceConverter = makeParser<CoreTypes.WhiteSpaceType>(makeValidator<CoreTypes.WhiteSpaceType>('initial', 'normal', 'nowrap'));
export const whiteSpaceProperty = new CssProperty<Style, CoreTypes.WhiteSpaceType>({
name: 'whiteSpace',