@visactor/vrender-core
Version:
## Description
208 lines (207 loc) • 7.02 kB
TypeScript
import type { IColor } from '../color';
import type { IContext2d } from '../context';
import type { IGraphicAttribute, IGraphic } from '../graphic';
import type { IImage, IImageGraphicAttribute } from './image';
import type { ITextGraphicAttribute } from './text';
export type IRichTextEditOptionsType = {
placeholder?: string;
placeholderColor?: string;
placeholderFontSize?: number;
placeholderFontFamily?: string;
syncPlaceholderToTextConfig?: boolean;
keepHeightWhileEmpty?: boolean;
boundsStrokeWhenInput?: string;
stopPropagation?: boolean;
};
export type IRichTextAttribute = {
upgradeAttrs: {
lineHeight: true;
multiBreakLine: true;
} | null;
width: number;
height: number;
editable: boolean;
ascentDescentMode?: 'actual' | 'font';
editOptions: IRichTextEditOptionsType | null;
ellipsis: boolean | string;
wordBreak: RichTextWordBreak;
verticalDirection: RichTextVerticalDirection;
maxHeight: number;
maxWidth: number;
textAlign: RichTextGlobalAlignType;
textBaseline: RichTextGlobalBaselineType;
layoutDirection: RichTextLayoutDirectionType;
textConfig: IRichTextCharacter[];
disableAutoWrapLine: boolean;
singleLine: boolean;
};
export type IRichTextGraphicAttribute = Partial<IGraphicAttribute & ITextGraphicAttribute> & Partial<IRichTextAttribute>;
export type RichTextWordBreak = 'break-word' | 'break-all';
export type RichTextVerticalDirection = 'top' | 'middle' | 'bottom';
export type RichTextGlobalAlignType = 'left' | 'right' | 'center';
export type RichTextGlobalBaselineType = 'top' | 'middle' | 'bottom';
export type RichTextLayoutDirectionType = 'horizontal' | 'vertical';
export type RichTextFontStyle = 'normal' | 'italic' | 'oblique';
export type RichTextTextDecoration = 'none' | 'underline' | 'line-through';
export type RichTextScript = 'normal' | 'sub' | 'super';
export type IRichTextBasicCharacter = {
lineHeight?: number | string;
textAlign?: CanvasTextAlign;
textBaseline?: CanvasTextBaseline;
direction?: RichTextLayoutDirectionType;
};
export type IRichTextParagraphCharacter = IRichTextBasicCharacter & {
text: string | number;
fontSize?: number;
fontFamily?: string;
fill?: IColor | boolean;
stroke?: IColor | boolean;
fontWeight?: string;
lineWidth?: number;
fontStyle?: RichTextFontStyle;
textDecoration?: RichTextTextDecoration;
script?: RichTextScript;
underline?: boolean;
lineThrough?: boolean;
opacity?: number;
fillOpacity?: number;
strokeOpacity?: number;
background?: string;
backgroundOpacity?: number;
};
export type IRichTextImageCharacter = IRichTextBasicCharacter & {
image: string | HTMLImageElement | HTMLCanvasElement;
width: number;
height: number;
backgroundShowMode?: 'always' | 'hover';
backgroundFill?: boolean | IColor;
backgroundFillOpacity?: number;
backgroundStroke?: boolean | IColor;
backgroundStrokeOpacity?: number;
backgroundRadius?: number;
backgroundWidth?: number;
backgroundHeight?: number;
id?: string;
margin?: number | number[];
funcType?: string;
hoverImage?: string | HTMLImageElement | HTMLCanvasElement;
};
export type IRichTextCharacter = IRichTextParagraphCharacter | IRichTextImageCharacter;
export type IRichTextIconGraphicAttribute = IImageGraphicAttribute & {
id?: string;
backgroundShowMode?: 'always' | 'hover' | 'never';
backgroundFill?: boolean | IColor;
backgroundFillOpacity?: number;
backgroundStroke?: boolean | IColor;
backgroundStrokeOpacity?: number;
backgroundRadius?: number;
backgroundWidth?: number;
backgroundHeight?: number;
textAlign?: CanvasTextAlign;
textBaseline?: CanvasTextBaseline;
direction?: RichTextLayoutDirectionType;
margin?: number | number[];
};
export interface IRichTextParagraph {
text: string;
ascent: number;
descent: number;
width: number;
height: number;
lineHeight: number;
fontSize: number;
length: number;
newLine: boolean;
character: IRichTextParagraphCharacter;
left: number;
top: number;
direction?: 'horizontal' | 'vertical';
widthOrigin?: number;
heightOrigin?: number;
textBaseline?: CanvasTextBaseline;
ellipsis: 'normal' | 'add' | 'replace' | 'hide';
ellipsisWidth: number;
ellipsisOtherParagraphWidth: number;
verticalEllipsis?: boolean;
updateWidth: () => void;
draw: (ctx: IContext2d, baseline: number, deltaLeft: number, isLineFirst: boolean, textAlign: string) => void;
getWidthWithEllips: (direction: string) => number;
}
export interface IRichTextLine {
left: number;
top: number;
width: number;
height: number;
baseline: number;
ascent: number;
descent: number;
paragraphs: (IRichTextParagraph | IRichTextIcon)[];
actualWidth: number;
blankWidth: number;
textAlign: string;
direction: 'horizontal' | 'vertical';
directionKey: {
width: string;
height: string;
left: string;
x: string;
y: string;
};
draw: (ctx: IContext2d, lastLine: boolean, x: number, y: number, drawEllipsis: boolean | string, drawIcon: (icon: IRichTextIcon, context: IContext2d, x: number, y: number, baseline: number) => void) => void;
getWidthWithEllips: (ellipsis: string) => number;
}
export interface IRichTextFrame {
left: number;
top: number;
bottom: number;
right: number;
width: number;
height: number;
actualHeight: number;
ellipsis: boolean | string;
wordBreak: 'break-word' | 'break-all';
verticalDirection: 'top' | 'middle' | 'bottom';
lines: IRichTextLine[];
globalAlign: 'left' | 'center' | 'right' | 'start' | 'end';
globalBaseline: 'top' | 'middle' | 'bottom';
layoutDirection: 'horizontal' | 'vertical';
directionKey: {
width: string;
height: string;
left: string;
top: string;
bottom: string;
};
isWidthMax: boolean;
isHeightMax: boolean;
singleLine: boolean;
icons: Map<string, IRichTextIcon>;
draw: (ctx: IContext2d, drawIcon: (icon: IRichTextIcon, context: IContext2d, x: number, y: number, baseline: number) => void) => boolean;
getActualSize: () => {
width: number;
height: number;
};
getRawActualSize: () => {
width: number;
height: number;
};
getActualSizeWidthEllipsis: () => {
width: number;
height: number;
};
}
export interface IRichText extends IGraphic<IRichTextGraphicAttribute> {
getFrameCache: () => IRichTextFrame;
cliped?: boolean;
}
export interface IRichTextIcon extends IImage {
attribute: IRichTextIconGraphicAttribute;
richtextId?: string;
globalX?: number;
globalY?: number;
_x: number;
_y: number;
_hovered: boolean;
_marginArray: [number, number, number, number];
setHoverState: (hovered: boolean) => void;
}