AuroraMiddleware/skia2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[canvaskit] Add docs/types for paragraph

Browse Source 
The docs on the C++ side are not complete in some areas, so
these docs are incomplete as well.

Bug: skia:10717
Change-Id: I1cbb559ab5c8b3973686b85f420ccd9752eaa24d
Reviewed-on: https://skia-review.googlesource.com/c/skia/+/322321
Reviewed-by: Kevin Lubick <kjlubick@google.com>
This commit is contained in:
Kevin Lubick 2020-10-06 08:24:00 -04:00
parent e2c6940c36
commit c488fd3d01
5 changed files with 459 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
modules/canvaskit/canvaskit/types/canvaskit-wasm-tests.ts
View File

@ -5,6 +5,7 @@ import {
CanvasKit,
Paragraph,
PathCommand,
PositionWithAffinity,
PosTan,
ShapedText,
SkAnimatedImage,
@ -31,6 +32,7 @@ import {
SkVertices,
TonalColorsOutput,
TypedArray,
URange,
Vector3,
VectorN,
} from "canvaskit-wasm";
@ -51,6 +53,8 @@ CanvasKitInit({locateFile: (file: string) => '/node_modules/canvaskit/bin/' + fi
maskFilterTests(CK);
matrixTests(CK);
paintTests(CK);
paragraphBuilderTests(CK);
paragraphTests(CK);
pathEffectTests(CK);
pathTests(CK);
pictureTests(CK);
@ -445,6 +449,72 @@ function pathTests(CK: CanvasKit) {
path.trim(0.1, 0.7, false);
}
function paragraphTests(CK: CanvasKit, p?: Paragraph) {
if (!p) return;
const a = p.didExceedMaxLines(); // $ExpectType boolean
const b = p.getAlphabeticBaseline(); // $ExpectType number
const c = p.getGlyphPositionAtCoordinate(10, 3); // $ExpectType PositionWithAffinity
const d = p.getHeight(); // $ExpectType number
const e = p.getIdeographicBaseline(); // $ExpectType number
const f = p.getLongestLine(); // $ExpectType number
const g = p.getMaxIntrinsicWidth(); // $ExpectType number
const h = p.getMaxWidth(); // $ExpectType number
const i = p.getMinIntrinsicWidth(); // $ExpectType number
const j = p.getRectsForPlaceholders(); // $ExpectType Float32Array
const k = p.getRectsForRange(2, 10, CK.RectHeightStyle.Max, // $ExpectType Float32Array
CK.RectWidthStyle.Tight);
const l = p.getWordBoundary(10); // $ExpectType URange
p.layout(300);
}
function paragraphBuilderTests(CK: CanvasKit, fontMgr?: SkFontMgr, paint?: SkPaint) {
if (!fontMgr || !paint) return;
const paraStyle = new CK.ParagraphStyle({ // $ExpectType ParagraphStyle
textStyle: {
color: CK.BLACK,
fontFamilies: ['Noto Serif'],
fontSize: 20,
},
textAlign: CK.TextAlign.Center,
maxLines: 8,
ellipsis: '.._.',
strutStyle: {
strutEnabled: true,
fontFamilies: ['Roboto'],
fontSize: 28,
heightMultiplier: 1.5,
forceStrutHeight: true,
},
});
const blueText = new CK.TextStyle({ // $ExpectType TextStyle
backgroundColor: CK.Color(234, 208, 232), // light pink
color: CK.Color(48, 37, 199),
fontFamilies: ['Noto Serif'],
decoration: CK.LineThroughDecoration,
decorationThickness: 1.5, // multiplier based on font size
fontSize: 24,
fontFeatures: [{name: 'smcp', value: 1}],
shadows: [{color: CK.BLACK, blurRadius: 15},
{color: CK.RED, blurRadius: 5, offset: [10, 10]}],
});
const builder = CK.ParagraphBuilder.Make(paraStyle, fontMgr); // $ExpectType ParagraphBuilder
builder.pushStyle(blueText);
builder.addText('VAVAVAVAVAVAVA\nVAVA\n');
builder.pop();
const paragraph = builder.build(); // $ExpectType Paragraph
const buf = new ArrayBuffer(10);
const fontSrc = CK.TypefaceFontProvider.Make(); // $ExpectType TypefaceFontProvider
fontSrc.registerFont(buf, 'sans-serif');
const builder2 = CK.ParagraphBuilder.MakeFromFontProvider(// $ExpectType ParagraphBuilder
paraStyle, fontSrc);
builder2.pushPaintStyle(blueText, paint, paint);
builder2.addPlaceholder();
builder2.addPlaceholder(10, 20, CK.PlaceholderAlignment.Top, CK.TextBaseline.Ideographic, 3);
}
function pathEffectTests(CK: CanvasKit) {
const pe1 = CK.SkPathEffect.MakeCorner(2); // $ExpectType SkPathEffect | null
const pe2 = CK.SkPathEffect.MakeDash([2, 4]); // $ExpectType SkPathEffect

383
modules/canvaskit/canvaskit/types/index.d.ts vendored
View File

@ -339,14 +339,17 @@ export interface CanvasKit {
// Constructors, i.e. things made with `new CanvasKit.Foo()`;
readonly ImageData: ImageDataConstructor;
readonly ParagraphStyle: ParagraphStyleConstructor;
readonly ShapedText: ShapedTextConstructor;
readonly SkContourMeasureIter: SkContourMeasureIterConstructor;
readonly SkFont: SkFontConstructor;
readonly SkPaint: DefaultConstructor<SkPaint>;
readonly SkPath: SkPathConstructorAndFactory;
readonly SkPictureRecorder: DefaultConstructor<SkPictureRecorder>;
readonly TextStyle: TextStyleConstructor;
// Factories, i.e. things made with CanvasKit.Foo.MakeTurboEncapsulator()
readonly ParagraphBuilder: ParagraphBuilderFactory;
readonly SkColorFilter: SkColorFilterFactory;
readonly SkFontMgr: SkFontMgrFactory;
readonly SkImageFilter: SkImageFilterFactory;
@ -355,6 +358,7 @@ export interface CanvasKit {
readonly SkRuntimeEffect: SkRuntimeEffectFactory;
readonly SkShader: SkShaderFactory;
readonly SkTextBlob: SkTextBlobFactory;
readonly TypefaceFontProvider: TypefaceFontProviderFactory;
// Misc
readonly SkColorMatrix: ColorMatrixHelpers;
@ -404,6 +408,25 @@ export interface CanvasKit {
readonly SaveLayerF16ColorType: SaveLayerFlag;
readonly gpu: boolean; // if GPU code was compiled in
// Paragraph Enums
readonly Affinity: AffinityEnumValues;
readonly DecorationStyle: DecorationStyleEnumValues;
readonly FontSlant: FontSlantEnumValues;
readonly FontWeight: FontWeightEnumValues;
readonly FontWidth: FontWidthEnumValues;
readonly PlaceholderAlignment: PlaceholderAlignmentEnumValues;
readonly RectHeightStyle: RectHeightStyleEnumValues;
readonly RectWidthStyle: RectWidthStyleEnumValues;
readonly TextAlign: TextAlignEnumValues;
readonly TextBaseline: TextBaselineEnumValues;
readonly TextDirection: TextDirectionEnumValues;
// Paragraph Constants
readonly NoDecoration: number;
readonly UnderlineDecoration: number;
readonly OverlineDecoration: number;
readonly LineThroughDecoration: number;
}
export interface Camera {
@ -499,6 +522,12 @@ export type EmulatedCanvas2DContext = CanvasRenderingContext2D;
export type EmulatedImageData = ImageData;
export type EmulatedPath2D = Path2D;
export interface FontStyle {
weight?: FontWeight;
width?: FontWidth;
slant?: FontSlant;
}
/**
* See GrContext.h for more on this class.
*/
@ -542,7 +571,107 @@ export interface MallocObj {
* been compiled in.
*/
export interface Paragraph extends EmbindObject<Paragraph> {
todo: number; // TODO(kjlubick)
didExceedMaxLines(): boolean;
getAlphabeticBaseline(): number;
/**
* Returns the index of the glyph that corresponds to the provided coordinate,
* with the top left corner as the origin, and +y direction as down.
*/
getGlyphPositionAtCoordinate(dx: number, dy: number): PositionWithAffinity;
getHeight(): number;
getIdeographicBaseline(): number;
getLongestLine(): number;
getMaxIntrinsicWidth(): number;
getMaxWidth(): number;
getMinIntrinsicWidth(): number;
getRectsForPlaceholders(): FlattenedRectangleArray;
/**
* Returns bounding boxes that enclose all text in the range of glpyh indexes [start, end).
* @param start
* @param end
* @param hStyle
* @param wStyle
*/
getRectsForRange(start: number, end: number, hStyle: RectHeightStyle,
wStyle: RectWidthStyle): FlattenedRectangleArray;
/**
* Finds the first and last glyphs that define a word containing the glyph at index offset.
* @param offset
*/
getWordBoundary(offset: number): URange;
/**
* Lays out the text in the paragraph so it is wrapped to the given width.
* @param width
*/
layout(width: number): void;
}
export interface ParagraphBuilder extends EmbindObject<ParagraphBuilder> {
/**
* Pushes the information required to leave an open space.
* @param width
* @param height
* @param alignment
* @param baseline
* @param offset
*/
addPlaceholder(width?: number, height?: number, alignment?: PlaceholderAlignment,
baseline?: TextBaseline, offset?: number): void;
/**
* Adds text to the builder. Forms the proper runs to use the upper-most style
* on the style_stack.
* @param str
*/
addText(str: string): void;
/**
* Returns a Paragraph object that can be used to be layout and paint the text to an
* SkCanvas.
*/
build(): Paragraph;
/**
* Remove a style from the stack. Useful to apply different styles to chunks
* of text such as bolding.
*/
pop(): void;
/**
* Push a style to the stack. The corresponding text added with addText will
* use the top-most style.
* @param text
*/
pushStyle(text: TextStyle): void;
/**
* Pushes a TextStyle using paints instead of colors for foreground and background.
* @param textStyle
* @param fg
* @param bg
*/
pushPaintStyle(textStyle: TextStyle, fg: SkPaint, bg: SkPaint): void;
}
export interface ParagraphStyle {
disableHinting?: boolean;
ellipsis?: string;
heightMultiplier?: number;
maxLines?: number;
strutStyle?: StrutStyle;
textAlign?: TextAlign;
textDirection?: TextDirection;
textStyle?: TextStyle;
}
export interface PositionWithAffinity {
pos: number;
affinity: Affinity;
}
/**
@ -671,8 +800,8 @@ export interface SkCanvas extends EmbindObject<SkCanvas> {
* @param blendMode - BlendMode combining colors and sprites
* @param colors - If provided, will be blended with sprite using blendMode.
*/
drawAtlas(atlas: SkImage, srcRects: FlattenedRectangleArray,
dstXforms: FlattenedRSXFormArray, paint: SkPaint,
drawAtlas(atlas: SkImage, srcRects: InputFlattenedRectangleArray,
dstXforms: InputFlattenedRSXFormArray, paint: SkPaint,
blendMode?: BlendMode, colors?: ColorIntArray): void;
/**
@ -815,7 +944,7 @@ export interface SkCanvas extends EmbindObject<SkCanvas> {
* @param points
* @param paint
*/
drawPoints(mode: PointMode, points: FlattenedPointArray, paint: SkPaint): void;
drawPoints(mode: PointMode, points: InputFlattenedPointArray, paint: SkPaint): void;
/**
* Draws the given rectangle using the current clip, current matrix, and the provided paint.
@ -1542,7 +1671,7 @@ export interface SkPath extends EmbindObject<SkPath> {
* @param points - represents n points with 2n floats.
* @param weights - used if any of the verbs are conics, can be omitted otherwise.
*/
addVerbsPointsWeights(verbs: VerbList, points: FlattenedPointArray,
addVerbsPointsWeights(verbs: VerbList, points: InputFlattenedPointArray,
weights?: WeightList): SkPath;
/**
@ -2068,6 +2197,50 @@ export interface StrokeOpts {
cap?: StrokeCap;
}
export interface StrutStyle {
strutEnabled?: boolean;
fontFamilies?: string[];
fontStyle?: FontStyle;
fontSize?: number;
heightMultiplier?: number;
leading?: number;
forceStrutHeight?: boolean;
}
export interface TextFontFeatures {
name: string;
value: number;
}
export interface TextShadow {
color?: InputColor;
/**
* 2d array for x and y offset. Defaults to [0, 0]
*/
offset?: number[];
blurRadius?: number;
}
export interface TextStyle {
backgroundColor?: InputColor;
color?: InputColor;
decoration?: number;
decorationColor?: InputColor;
decorationThickness?: number;
decrationStyle?: DecorationStyle;
fontFamilies?: string[];
fontFeatures?: TextFontFeatures[];
fontSize?: number;
fontStyle?: FontStyle;
foregroundColor?: InputColor;
heightMultiplier?: number;
letterSpacing?: number;
locale?: string;
shadows?: TextShadow[];
textBaseline?: TextBaseline;
wordSpacing?: number;
}
export interface TonalColorsInput {
ambient: InputColor;
spot: InputColor;
@ -2078,6 +2251,21 @@ export interface TonalColorsOutput {
spot: SkColor;
}
export interface TypefaceFontProvider extends EmbindObject<TypefaceFontProvider> {
/**
* Registers a given typeface with the given family name (ignoring whatever name the
* typface has for itself).
* @param bytes - the raw bytes for a typeface.
* @param family
*/
registerFont(bytes: ArrayBuffer | Uint8Array, family: string): void;
}
export interface URange {
start: number;
end: number;
}
/**
* Options for configuring a WebGL context. If an option is omitted, a sensible default will
* be used. These are defined by the WebGL standards.
@ -2171,9 +2359,9 @@ export interface Matrix3x3Helpers {
/**
* Maps the given 2d points according to the given 3x3 matrix.
* @param m
* @param points - the points to map; the results are computed in place on this array.
* @param points - the flattened points to map; the results are computed in place on this array.
*/
mapPoints(m: Matrix3x3 | number[], points: FlattenedPointArray): FlattenedPointArray;
mapPoints(m: Matrix3x3 | number[], points: number[]): number[];
/**
* Multiplies the provided 3x3 matrices together from left to right.
@ -2313,6 +2501,31 @@ export interface Matrix4x4Helpers {
transpose(matrix: Matrix4x4 | number[]): number[];
}
export interface ParagraphBuilderFactory {
/**
* Creates a ParagraphBuilder using the fonts available from the given font manager.
* @param style
* @param fontManager
*/
Make(style: ParagraphStyle, fontManager: SkFontMgr): ParagraphBuilder;
/**
* Creates a ParagraphBuilder using the fonts available from the given font provider.
* @param style
* @param fontSrc
*/
MakeFromFontProvider(style: ParagraphStyle, fontSrc: TypefaceFontProvider): ParagraphBuilder;
}
export interface ParagraphStyleConstructor {
/**
* Fills out all optional fields with defaults. The emscripten bindings complain if there
* is a field undefined and it was expecting a float (for example).
* @param ps
*/
new(ps: ParagraphStyle): ParagraphStyle;
}
/**
* This class is an abstraction around SkShaper.h
*/
@ -2492,7 +2705,7 @@ export interface SkPathConstructorAndFactory extends DefaultConstructor<SkPath>
* @param points - represents n points with 2n floats.
* @param weights - used if any of the verbs are conics, can be omitted otherwise.
*/
MakeFromVerbsPointsWeights(verbs: VerbList, points: FlattenedPointArray,
MakeFromVerbsPointsWeights(verbs: VerbList, points: InputFlattenedPointArray,
weights?: WeightList): SkPath;
}
@ -2590,7 +2803,7 @@ export interface SkTextBlobFactory {
* @param rsxforms
* @param font
*/
MakeFromRSXform(str: string, rsxforms: FlattenedRSXFormArray, font: SkFont): SkTextBlob;
MakeFromRSXform(str: string, rsxforms: InputFlattenedRSXFormArray, font: SkFont): SkTextBlob;
/**
* Returns a TextBlob built from a single run of text with rotation, scale, and translations.
@ -2599,7 +2812,7 @@ export interface SkTextBlobFactory {
* @param rsxforms
* @param font
*/
MakeFromRSXformGlyphs(glyphs: InputGlyphIDArray, rsxforms: FlattenedRSXFormArray,
MakeFromRSXformGlyphs(glyphs: InputGlyphIDArray, rsxforms: InputFlattenedRSXFormArray,
font: SkFont): SkTextBlob;
/**
@ -2626,6 +2839,22 @@ export interface SkTextBlobFactory {
MakeOnPath(str: string, path: SkPath, font: SkFont, initialOffset?: number): SkTextBlob;
}
export interface TextStyleConstructor {
/**
* Fills out all optional fields with defaults. The emscripten bindings complain if there
* is a field undefined and it was expecting a float (for example).
* @param ts
*/
new(ts: TextStyle): TextStyle;
}
export interface TypefaceFontProviderFactory {
/**
* Return an empty TypefaceFontProvider
*/
Make(): TypefaceFontProvider;
}
/**
* Functions for manipulating vectors. It is Loosely based off of SkV3 in SkM44.h but Skia
* also has SkVec2 and Skv4. This combines them and works on vectors of any length.
@ -2751,17 +2980,12 @@ export type ColorIntArray = MallocObj | Uint32Array | number[];
* FlattenedPointArray represents n points by 2*n float values. In order, the values should
* be the x, y for each point.
*/
export type FlattenedPointArray = MallocObj | Float32Array | number[];
export type FlattenedPointArray = Float32Array;
/**
* FlattenedRectangleArray represents n rectangles by 4*n float values. In order, the values should
* be the top, left, right, bottom point for each rectangle.
*/
export type FlattenedRectangleArray = MallocObj | Float32Array | number[];
/**
* FlattenedRSXFormArray represents n RSXforms by 4*n float values. In order, the values should
* be scos, ssin, tx, ty for each RSXForm. See RSXForm.h for more details.
*/
export type FlattenedRSXFormArray = MallocObj | Float32Array | number[];
export type FlattenedRectangleArray = Float32Array;
/**
* Regardless of the format we use internally for GlyphID (16 bit unsigned atm), we expose them
* as 32 bit unsigned.
@ -2812,6 +3036,16 @@ export type InputColorMatrix = MallocObj | SkColorMatrix | number[];
* Length n for n glyph IDs.
*/
export type InputGlyphIDArray = MallocObj | GlyphIDArray | number[];
/**
* CanvasKit APIs accept normal arrays, typed arrays, or Malloc'd memory as flattened points.
* Length 2 * n for n points.
*/
export type InputFlattenedPointArray = MallocObj | FlattenedPointArray | number[];
/**
* CanvasKit APIs accept normal arrays, typed arrays, or Malloc'd memory as flattened rectangles.
* Length 4 * n for n rectangles.
*/
export type InputFlattenedRectangleArray = MallocObj | FlattenedRectangleArray | number[];
/**
* CanvasKit APIs accept all of these matrix types. Under the hood, we generally use 4x4 matrices.
*/
@ -2831,6 +3065,11 @@ export type InputIRect = MallocObj | SkIRect | number[];
* rounded corners. Length 12.
*/
export type InputRRect = MallocObj | SkRRect | number[];
/**
* This represents n RSXforms by 4*n float values. In order, the values should
* be scos, ssin, tx, ty for each RSXForm. See RSXForm.h for more details.
*/
export type InputFlattenedRSXFormArray = MallocObj | Float32Array | number[];
export type AlphaType = EmbindEnumEntity;
export type BlendMode = EmbindEnumEntity;
@ -2851,6 +3090,23 @@ export type StrokeJoin = EmbindEnumEntity;
export type TileMode = EmbindEnumEntity;
export type VertexMode = EmbindEnumEntity;
export type Affinity = EmbindEnumEntity;
export type DecorationStyle = EmbindEnumEntity;
export type FontSlant = EmbindEnumEntity;
export type FontWeight = EmbindEnumEntity;
export type FontWidth = EmbindEnumEntity;
export type PlaceholderAlignment = EmbindEnumEntity;
export type RectHeightStyle = EmbindEnumEntity;
export type RectWidthStyle = EmbindEnumEntity;
export type TextAlign = EmbindEnumEntity;
export type TextBaseline = EmbindEnumEntity;
export type TextDirection = EmbindEnumEntity;
export interface AffinityEnumValues extends EmbindEnum {
Upstream: Affinity;
Downstream: Affinity;
}
export interface AlphaTypeEnumValues extends EmbindEnum {
Opaque: AlphaType;
Premul: AlphaType;
@ -2922,12 +3178,12 @@ export interface ColorTypeEnumValues extends EmbindEnum {
RGBA_F32: ColorType;
}
export interface ImageFormatEnumValues extends EmbindEnum {
// TODO(kjlubick) When these are compiled in depending on the availability of the codecs,
// be sure to make these nullable.
PNG: EncodedImageFormat;
JPEG: EncodedImageFormat;
WEBP: EncodedImageFormat;
export interface DecorationStyleEnumValues extends EmbindEnum {
Solid: DecorationStyle;
Double: DecorationStyle;
Dotted: DecorationStyle;
Dashed: DecorationStyle;
Wavy: DecorationStyle;
}
export interface FillTypeEnumValues extends EmbindEnum {
@ -2955,6 +3211,46 @@ export interface FontHintingEnumValues extends EmbindEnum {
Full: FontHinting;
}
export interface FontSlantEnumValues extends EmbindEnum {
Upright: FontSlant;
Italic: FontSlant;
Oblique: FontSlant;
}
export interface FontWeightEnumValues extends EmbindEnum {
Invisible: FontWeight;
Thin: FontWeight;
ExtraLight: FontWeight;
Light: FontWeight;
Normal: FontWeight;
Medium: FontWeight;
SemiBold: FontWeight;
Bold: FontWeight;
ExtraBold: FontWeight;
Black: FontWeight;
ExtraBlack: FontWeight;
}
export interface FontWidthEnumValues extends EmbindEnum {
UltraCondensed: FontWidth;
ExtraCondensed: FontWidth;
Condensed: FontWidth;
SemiCondensed: FontWidth;
Normal: FontWidth;
SemiExpanded: FontWidth;
Expanded: FontWidth;
ExtraExpanded: FontWidth;
UltraExpanded: FontWidth;
}
export interface ImageFormatEnumValues extends EmbindEnum {
// TODO(kjlubick) When these are compiled in depending on the availability of the codecs,
// be sure to make these nullable.
PNG: EncodedImageFormat;
JPEG: EncodedImageFormat;
WEBP: EncodedImageFormat;
}
export interface PaintStyleEnumValues extends EmbindEnum {
Fill: PaintStyle;
Stroke: PaintStyle;
@ -2968,12 +3264,34 @@ export interface PathOpEnumValues extends EmbindEnum {
ReverseDifference: PathOp;
}
export interface PlaceholderAlignmentEnumValues extends EmbindEnum {
Baseline: PlaceholderAlignment;
AboveBaseline: PlaceholderAlignment;
BelowBaseline: PlaceholderAlignment;
Top: PlaceholderAlignment;
Bottom: PlaceholderAlignment;
Middle: PlaceholderAlignment;
}
export interface PointModeEnumValues extends EmbindEnum {
Points: PointMode;
Lines: PointMode;
Polygon: PointMode;
}
export interface RectHeightStyleEnumValues extends EmbindEnum {
Tight: RectHeightStyle;
Max: RectHeightStyle;
IncludeLineSpacingMiddle: RectHeightStyle;
IncludeLineSpacingTop: RectHeightStyle;
IncludeLineSpacingBottom: RectHeightStyle;
}
export interface RectWidthStyleEnumValues extends EmbindEnum {
Tight: RectWidthStyle;
Max: RectWidthStyle;
}
export interface StrokeCapEnumValues extends EmbindEnum {
Butt: StrokeCap;
Round: StrokeCap;
@ -2986,6 +3304,25 @@ export interface StrokeJoinEnumValues extends EmbindEnum {
Round: StrokeJoin;
}
export interface TextAlignEnumValues extends EmbindEnum {
Left: TextAlign;
Right: TextAlign;
Center: TextAlign;
Justify: TextAlign;
Start: TextAlign;
End: TextAlign;
}
export interface TextBaselineEnumValues extends EmbindEnum {
Alphabetic: TextBaseline;
Ideographic: TextBaseline;
}
export interface TextDirectionEnumValues extends EmbindEnum {
LTR: TextDirection;
RTL: TextDirection;
}
export interface TileModeEnumValues extends EmbindEnum {
Clamp: TileMode;
Decal: TileMode;

11
modules/canvaskit/paragraph.js
View File

@ -53,6 +53,8 @@
// These helpers fill out all fields, because emscripten complains if we
// have undefined and it expects, for example, a float.
// TODO(kjlubick) For efficiency, we should probably just return opaque WASM objects so we do
// not have to keep copying them across the wire.
CanvasKit.ParagraphStyle = function(s) {
// Use [''] to tell closure not to minify the names
s['disableHinting'] = s['disableHinting'] || false;
@ -104,15 +106,6 @@
return s;
}
function placeholderStyle(s) {
s['width'] = s['width'] || 0;
s['height'] = s['height'] || 0;
s['alignment'] = s['alignment'] || CanvasKit.PlaceholderAlignment.Baseline;
s['baseline'] = s['baseline'] || CanvasKit.TextBaseline.Alphabetic;
s['offset'] = s['offset'] || 0;
return s;
}
CanvasKit.TextStyle = function(s) {
// Use [''] to tell closure not to minify the names
if (!s['color']) {

41
modules/canvaskit/paragraph_bindings.cpp
View File

@ -294,6 +294,7 @@ EMSCRIPTEN_BINDINGS(Paragraph) {
.function("getGlyphPositionAtCoordinate", &para::ParagraphImpl::getGlyphPositionAtCoordinate)
.function("getHeight", &para::Paragraph::getHeight)
.function("getIdeographicBaseline", &para::Paragraph::getIdeographicBaseline)
.function("getLineMetrics", &para::ParagraphImpl::getLineMetrics)
.function("getLongestLine", &para::Paragraph::getLongestLine)
.function("getMaxIntrinsicWidth", &para::Paragraph::getMaxIntrinsicWidth)
.function("getMaxWidth", &para::Paragraph::getMaxWidth)
@ -383,6 +384,13 @@ EMSCRIPTEN_BINDINGS(Paragraph) {
.value("Upstream", para::Affinity::kUpstream)
.value("Downstream", para::Affinity::kDownstream);
enum_<para::TextDecorationStyle>("DecorationStyle")
.value("Solid", para::TextDecorationStyle::kSolid)
.value("Double", para::TextDecorationStyle::kDouble)
.value("Dotted", para::TextDecorationStyle::kDotted)
.value("Dashed", para::TextDecorationStyle::kDashed)
.value("Wavy", para::TextDecorationStyle::kWavy);
enum_<SkFontStyle::Slant>("FontSlant")
.value("Upright", SkFontStyle::Slant::kUpright_Slant)
.value("Italic", SkFontStyle::Slant::kItalic_Slant)
@ -412,6 +420,14 @@ EMSCRIPTEN_BINDINGS(Paragraph) {
.value("ExtraExpanded", SkFontStyle::Width::kExtraExpanded_Width)
.value("UltraExpanded", SkFontStyle::Width::kUltraExpanded_Width);
enum_<para::PlaceholderAlignment>("PlaceholderAlignment")
.value("Baseline", para::PlaceholderAlignment::kBaseline)
.value("AboveBaseline", para::PlaceholderAlignment::kAboveBaseline)
.value("BelowBaseline", para::PlaceholderAlignment::kBelowBaseline)
.value("Top", para::PlaceholderAlignment::kTop)
.value("Bottom", para::PlaceholderAlignment::kBottom)
.value("Middle", para::PlaceholderAlignment::kMiddle);
enum_<para::RectHeightStyle>("RectHeightStyle")
.value("Tight", para::RectHeightStyle::kTight)
.value("Max", para::RectHeightStyle::kMax)
@ -431,29 +447,15 @@ EMSCRIPTEN_BINDINGS(Paragraph) {
.value("Start", para::TextAlign::kStart)
.value("End", para::TextAlign::kEnd);
enum_<para::TextDirection>("TextDirection")
.value("LTR", para::TextDirection::kLtr)
.value("RTL", para::TextDirection::kRtl);
enum_<para::TextDecorationStyle>("DecorationStyle")
.value("Solid", para::TextDecorationStyle::kSolid)
.value("Double", para::TextDecorationStyle::kDouble)
.value("Dotted", para::TextDecorationStyle::kDotted)
.value("Dashed", para::TextDecorationStyle::kDashed)
.value("Wavy", para::TextDecorationStyle::kWavy);
enum_<para::PlaceholderAlignment>("PlaceholderAlignment")
.value("Baseline", para::PlaceholderAlignment::kBaseline)
.value("AboveBaseline", para::PlaceholderAlignment::kAboveBaseline)
.value("BelowBaseline", para::PlaceholderAlignment::kBelowBaseline)
.value("Top", para::PlaceholderAlignment::kTop)
.value("Bottom", para::PlaceholderAlignment::kBottom)
.value("Middle", para::PlaceholderAlignment::kMiddle);
enum_<para::TextBaseline>("TextBaseline")
.value("Alphabetic", para::TextBaseline::kAlphabetic)
.value("Ideographic", para::TextBaseline::kIdeographic);
enum_<para::TextDirection>("TextDirection")
.value("LTR", para::TextDirection::kLtr)
.value("RTL", para::TextDirection::kRtl);
// These value objects make it easier to send data across the wire.
value_object<para::PositionWithAffinity>("PositionWithAffinity")
.field("pos", &para::PositionWithAffinity::position)
.field("affinity", &para::PositionWithAffinity::affinity);
@ -511,6 +513,7 @@ EMSCRIPTEN_BINDINGS(Paragraph) {
// The U stands for unsigned - we can't bind a generic/template object, so we have to specify it
// with the type we are using.
// TODO(kjlubick) make this a typedarray.
value_object<para::SkRange<size_t>>("URange")
.field("start", &para::SkRange<size_t>::start)
.field("end", &para::SkRange<size_t>::end);

10
modules/canvaskit/tests/paragraph.spec.js
View File

@ -666,9 +666,9 @@ describe('Paragraph Behavior', function() {
paint.setStyle(CanvasKit.PaintStyle.Stroke);
// Register Noto Serif as 'sans-serif'.
const fontMgr = CanvasKit.TypefaceFontProvider.Make();
fontMgr.registerFont(notoSerifFontBuffer, 'sans-serif');
fontMgr.registerFont(notoSerifBoldItalicFontBuffer, 'sans-serif');
const fontSrc = CanvasKit.TypefaceFontProvider.Make();
fontSrc.registerFont(notoSerifFontBuffer, 'sans-serif');
fontSrc.registerFont(notoSerifBoldItalicFontBuffer, 'sans-serif');
const wrapTo = 250;
@ -684,7 +684,7 @@ describe('Paragraph Behavior', function() {
disableHinting: true,
});
const builder = CanvasKit.ParagraphBuilder.MakeFromFontProvider(paraStyle, fontMgr);
const builder = CanvasKit.ParagraphBuilder.MakeFromFontProvider(paraStyle, fontSrc);
builder.addText('Default text\n');
const boldItalic = new CanvasKit.TextStyle({
@ -713,7 +713,7 @@ describe('Paragraph Behavior', function() {
paint.delete();
paragraph.delete();
builder.delete();
fontMgr.delete();
fontSrc.delete();
});
gm('paragraph_text_styles', (canvas) => {