feat: add rtl render support (#2653)

This commit is contained in:
Niklas von Hertzen 2021-08-13 19:50:59 +08:00 committed by GitHub
parent 437b367d3b
commit 6947982848
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 29 additions and 0 deletions

View File

@ -31,6 +31,7 @@ import {
borderTopWidth borderTopWidth
} from './property-descriptors/border-width'; } from './property-descriptors/border-width';
import {color} from './property-descriptors/color'; import {color} from './property-descriptors/color';
import {direction} from './property-descriptors/direction';
import {display, DISPLAY} from './property-descriptors/display'; import {display, DISPLAY} from './property-descriptors/display';
import {float, FLOAT} from './property-descriptors/float'; import {float, FLOAT} from './property-descriptors/float';
import {letterSpacing} from './property-descriptors/letter-spacing'; import {letterSpacing} from './property-descriptors/letter-spacing';
@ -107,6 +108,7 @@ export class CSSParsedDeclaration {
borderLeftWidth: ReturnType<typeof borderLeftWidth.parse>; borderLeftWidth: ReturnType<typeof borderLeftWidth.parse>;
boxShadow: ReturnType<typeof boxShadow.parse>; boxShadow: ReturnType<typeof boxShadow.parse>;
color: Color; color: Color;
direction: ReturnType<typeof direction.parse>;
display: ReturnType<typeof display.parse>; display: ReturnType<typeof display.parse>;
float: ReturnType<typeof float.parse>; float: ReturnType<typeof float.parse>;
fontFamily: ReturnType<typeof fontFamily.parse>; fontFamily: ReturnType<typeof fontFamily.parse>;
@ -175,6 +177,7 @@ export class CSSParsedDeclaration {
this.borderLeftWidth = parse(context, borderLeftWidth, declaration.borderLeftWidth); this.borderLeftWidth = parse(context, borderLeftWidth, declaration.borderLeftWidth);
this.boxShadow = parse(context, boxShadow, declaration.boxShadow); this.boxShadow = parse(context, boxShadow, declaration.boxShadow);
this.color = parse(context, color, declaration.color); this.color = parse(context, color, declaration.color);
this.direction = parse(context, direction, declaration.direction);
this.display = parse(context, display, declaration.display); this.display = parse(context, display, declaration.display);
this.float = parse(context, float, declaration.cssFloat); this.float = parse(context, float, declaration.cssFloat);
this.fontFamily = parse(context, fontFamily, declaration.fontFamily); this.fontFamily = parse(context, fontFamily, declaration.fontFamily);

View File

@ -0,0 +1,23 @@
import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {Context} from '../../core/context';
export const enum DIRECTION {
LTR = 0,
RTL = 1
}
export const direction: IPropertyIdentValueDescriptor<DIRECTION> = {
name: 'direction',
initialValue: 'ltr',
prefix: false,
type: PropertyDescriptorParsingType.IDENT_VALUE,
parse: (_context: Context, direction: string) => {
switch (direction) {
case 'rtl':
return DIRECTION.RTL;
case 'ltr':
default:
return DIRECTION.LTR;
}
}
};

View File

@ -43,6 +43,7 @@ import {TextShadow} from '../../css/property-descriptors/text-shadow';
import {PAINT_ORDER_LAYER} from '../../css/property-descriptors/paint-order'; import {PAINT_ORDER_LAYER} from '../../css/property-descriptors/paint-order';
import {Renderer} from '../renderer'; import {Renderer} from '../renderer';
import {Context} from '../../core/context'; import {Context} from '../../core/context';
import {DIRECTION} from '../../css/property-descriptors/direction';
import {splitGraphemes} from 'text-segmentation'; import {splitGraphemes} from 'text-segmentation';
export type RenderConfigurations = RenderOptions & { export type RenderConfigurations = RenderOptions & {
@ -174,6 +175,8 @@ export class CanvasRenderer extends Renderer {
this.ctx.font = font; this.ctx.font = font;
this.ctx.direction = styles.direction === DIRECTION.RTL ? 'rtl' : 'ltr';
this.ctx.textAlign = 'left';
this.ctx.textBaseline = 'alphabetic'; this.ctx.textBaseline = 'alphabetic';
const {baseline, middle} = this.fontMetrics.getMetrics(fontFamily, fontSize); const {baseline, middle} = this.fontMetrics.getMetrics(fontFamily, fontSize);
const paintOrder = styles.paintOrder; const paintOrder = styles.paintOrder;