@leafer-ui/interface 1.0.0-alpha.23 → 1.0.0-alpha.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer-ui/interface",
-  "version": "1.0.0-alpha.23",
+  "version": "1.0.0-alpha.30",
   "description": "@leafer-ui/interface",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
@@ -19,6 +19,6 @@
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/interface": "1.0.0-alpha.23"
+    "@leafer/interface": "1.0.0-alpha.30"
   }
 }

package/src/ICommonAttr.ts

@@ -1,4 +1,4 @@
-import { IPaint, IStrokeAlign, IStrokeCap, IStrokeJoin, IBlurEffect, IFontWeight, ITextCase, ITextDecoration, IShadowEffect, IGrayscaleEffect, ITextAlign, IVerticalAlign } from './type/IType'
+import { IPaint, IStrokeAlign, IStrokeCap, IStrokeJoin, IBlurEffect, IFontWeight, ITextCase, ITextDecoration, IShadowEffect, IGrayscaleEffect, ITextAlign, IVerticalAlign, IOverflow, IUnitData } from './type/IType'
 import { ILeafStrokePaint, ILeafShadowEffect, ILeafPaint } from './type/IComputedType'
 import { IPaintString, IDashPatternString, IPercent, IShadowString, IStringColor, IStrokeWidthString, ICornerRadiusString } from './type/IStringType'
 
@@ -77,14 +77,16 @@ export interface ITextStyleAttrData {
     italic: boolean
     textCase: ITextCase
     textDecoration: ITextDecoration
-    letterSpacing: number | IPercent
-    lineHeight: number | IPercent
+    letterSpacing: number | IUnitData
+    lineHeight: number | IUnitData
 
-    paragraphIndent: number
-    paragraphSpacing: number
+    paraIndent: number
+    paraSpacing: number
 
     textAlign: ITextAlign
     verticalAlign: IVerticalAlign
+
+    textOverflow: IOverflow | string
 }
 export interface ITextStyleInputData {
     fontFamily?: string
@@ -93,14 +95,16 @@ export interface ITextStyleInputData {
     italic?: boolean
     textCase?: ITextCase
     textDecoration?: ITextDecoration
-    letterSpacing?: number | IPercent
-    lineHeight?: number | IPercent
+    letterSpacing?: number | IUnitData
+    lineHeight?: number | IUnitData
 
-    paragraphIndent?: number
-    paragraphSpacing?: number
+    paraIndent?: number
+    paraSpacing?: number
 
     textAlign?: ITextAlign
     verticalAlign?: IVerticalAlign
+
+    textOverflow?: IOverflow | string
 }
 export interface ITextStyleComputedData {
     fontFamily?: string
@@ -112,11 +116,12 @@ export interface ITextStyleComputedData {
     letterSpacing?: number
     lineHeight?: number
 
-    paragraphIndent?: number
-    paragraphSpacing?: number
+    paraIndent?: number
+    paraSpacing?: number
 
     textAlign?: ITextAlign
     verticalAlign?: IVerticalAlign
+    textOverflow?: IOverflow
 }
 
 // effect---

package/src/IUI.ts

@@ -1,7 +1,7 @@
 import { ILeaf, ILeafComputedData, ILeafData, ILeafInputData, ILeaferCanvas, IRenderOptions, IPathDrawer, IPointData, IPath2D, IPathCommandData, IWindingRule, ILeaferImageConfig, IBoundsData, IObject, __Number, ILeaferImage } from '@leafer/interface'
 
 import { IPathString, IVectorPathString } from './type/IStringType'
-import { IVectorPath } from './type/IType'
+import { IOverflow, IUnitData, IVectorPath } from './type/IType'
 
 import {
     IFillAttrData, IFillInputData, IFillComputedData,
@@ -79,6 +79,8 @@ export interface IPath extends IUI {
     __: IPathData
     path: IPathCommandData | IPathString
     windingRule: IWindingRule
+    getCurvePath(): IPathCommandData
+    getStringPath(curve?: boolean): IPathString
 }
 export interface IPathData extends IUIData {
     path?: IPathCommandData
@@ -89,6 +91,33 @@ export interface IPathInputData extends IUIInputData {
     windingRule?: IWindingRule
 }
 
+// Pen
+
+export interface IPen extends IGroup {
+    __: IPenData
+    path: IPath
+    pathStyle: IPathInputData
+    pathData: IPathCommandData
+
+    moveTo(x: number, y: number): IPen
+    lineTo(x: number, y: number): IPen
+    bezierCurveTo(x1: number, y1: number, x2: number, y2: number, x: number, y: number): IPen
+    quadraticCurveTo(x1: number, y1: number, x: number, y: number): IPen
+
+    rect(x: number, y: number, width: number, height: number): IPen
+    roundRect(x: number, y: number, width: number, height: number, cornerRadius: number | number[]): IPen
+    ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation?: number, startAngle?: number, endAngle?: number, anticlockwise?: boolean): IPen
+    arc(x: number, y: number, radius: number, startAngle?: number, endAngle?: number, anticlockwise?: boolean): IPen
+    arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): IPen
+
+    close(): IPen
+    clear(): IPen
+
+    paint(): void
+}
+
+export interface IPenData extends IGroupData { }
+export interface IPenInputData extends IGroupInputData { }
 
 // Vector
 export interface IVector extends IUI {
@@ -106,10 +135,19 @@ export interface IVectorInputData extends IUIInputData {
 // Text
 export interface IText extends ITextStyleAttrData, IUI {
     __: ITextData
-    content: string
+    text: string
 }
 interface ITextAttrData {
-    content?: string
+    text?: string
+}
+
+export interface ITextData extends ITextAttrData, ITextStyleComputedData, IUIData {
+    __baseLine?: number
+    __lineHeight?: number
+    __letterSpacing?: number
+}
+export interface ITextInputData extends ITextAttrData, ITextStyleInputData, IUIInputData {
+
 }
 
 export interface ITextRowData {
@@ -117,23 +155,40 @@ export interface ITextRowData {
     y?: number
     width?: number
     height?: number
-    text: string
-}
+    text?: string
+    data?: ITextCharData[]
+    words?: ITextWordData[]
 
-export interface ITextDrawData extends IBoundsData {
-    list: ITextRowData[]
-    font: string
-    decorationY?: number
-    decorationHeight?: number
-}
-export interface ITextData extends ITextAttrData, ITextStyleComputedData, IUIData {
+    paraStart?: boolean // paragraph start
+    paraEnd?: boolean // paragraph end
+    isOverflow?: boolean
 }
-export interface ITextInputData extends ITextAttrData, ITextStyleInputData, IUIInputData {
 
+export interface ITextWordData {
+    x?: number
+    y?: number
+    width?: number
+    height?: number
+    data?: ITextCharData[]
 }
 
+export interface ITextCharData {
+    x?: number
+    y?: number
+    width?: number
+    height?: number
+    char?: string
+}
 
-
+export interface ITextDrawData {
+    bounds: IBoundsData
+    rows: ITextRowData[]
+    paraNumber: number
+    font: string
+    decorationY?: number
+    decorationHeight?: number
+    overflow?: number // overflowed row number, not index
+}
 
 // Image
 export interface IImage extends IRect, ILeaferImageConfig {
@@ -148,21 +203,54 @@ interface IImageAttrData {
 export interface IImageData extends IImageAttrData, IRectData { }
 export interface IImageInputData extends IImageAttrData, IUIInputData { }
 
+export interface ICanvas extends IRect {
+    __: ICanvasData
+    pixelRatio: number
+    smooth: boolean
+    canvas: ILeaferCanvas
+}
+interface ICanvasAttrData {
+    pixelRatio?: number
+    smooth?: boolean
+}
+export interface ICanvasData extends ICanvasAttrData, IRectData { }
+export interface ICanvasInputData extends ICanvasAttrData, IUIInputData { }
+
+
+// Leafer
+export interface ILeaferData extends IGroupData {
+    pixelRatio?: number
+}
+
+export interface ILeaferInputData extends IGroupInputData {
+    pixelRatio?: number
+}
+
+
 // Frame
-export interface IFrame extends IGroup {
+export interface IFrame extends IBox {
     __: IFrameData
-    clip: boolean
-    __updateRectBoxBounds(): void
-    __updateRectStrokeBounds(): void
+}
+export interface IFrameData extends IBoxData {
+
+}
+export interface IFrameInputData extends IBoxInputData {
+
+}
+
+
+// Box
+export interface IBox extends IGroup {
+    __: IBoxData
+    overflow: IOverflow
     __updateRectRenderBounds(): void
-    __renderRect(canvas: ILeaferCanvas, options: IRenderOptions): void
     __renderGroup(canvas: ILeaferCanvas, options: IRenderOptions): void
 }
-export interface IFrameData extends IGroupData {
-    clip?: boolean
+export interface IBoxData extends IGroupData {
+    overflow?: IOverflow
 }
-export interface IFrameInputData extends IGroupInputData {
-    clip?: boolean
+export interface IBoxInputData extends IGroupInputData {
+    overflow?: IOverflow
 }
 
 
@@ -189,12 +277,19 @@ export interface IUI extends IFillAttrData, IStrokeAttrData, ICornerRadiusAttrDa
     get(): IUITagInputData
 
     __drawPathByData(drawer: IPathDrawer, data: IPathCommandData): void
+    __drawAfterFill?(canvas: ILeaferCanvas, options: IRenderOptions): void
 }
 
 export interface IUIData extends IUIComputedData, ILeafData {
+
+    padding?: number | number[]
+    locked?: boolean
+
     // 非数据属性, 自动计算的缓存数据
     __isFills?: boolean
     __isStrokes?: boolean
+    __drawAfterFill?: boolean
+    __isOverflow?: boolean
 
     __isTranslucentFill?: boolean  // 半透明的
     __isTranslucentStroke?: boolean
@@ -211,13 +306,17 @@ export interface IUIData extends IUIComputedData, ILeafData {
     __strokeOuterWidth?: number // boxBounds外面的笔触宽度
 
     // text
+    __font?: string
     __textDrawData?: ITextDrawData
+
 }
-export interface IUIComputedData extends IFillComputedData, IBorderComputedData, IStrokeComputedData, ICornerRadiusComputedData, IEffectComputedData, ILeafComputedData {
+export interface IUIComputedData extends IFillComputedData, IBorderComputedData, IStrokeComputedData, ITextStyleComputedData, ICornerRadiusComputedData, IEffectComputedData, ILeafComputedData {
+    padding?: number | number[]
     locked?: boolean
 }
 
-export interface IUIInputData extends IFillInputData, IStrokeInputData, ICornerRadiusInputData, IEffectInputData, ILeafInputData {
+export interface IUIInputData extends IFillInputData, IStrokeInputData, ITextStyleInputData, ICornerRadiusInputData, IEffectInputData, ILeafInputData {
+    padding?: number | number[]
     locked?: boolean
 }
 

package/src/index.ts

@@ -1,3 +1,4 @@
+import { ITextStyleComputedData } from './ICommonAttr'
 export * from '@leafer/interface'
 
 export {
@@ -7,15 +8,19 @@ export {
     IPolygon, IPolygonInputData, IPolygonData,
     IStar, IStarInputData, IStarData,
     IPath, IPathInputData, IPathData,
+    IPen, IPenInputData, IPenData,
     IVector, IVectorInputData, IVectorData,
-    IText, ITextInputData, ITextData, ITextRowData, ITextDrawData,
+    IText, ITextInputData, ITextData, ITextRowData, ITextWordData, ITextCharData, ITextDrawData,
     IImage, IImageInputData, IImageData,
+    ICanvas, ICanvasInputData, ICanvasData,
     IFrame, IFrameInputData, IFrameData,
+    IBox, IBoxInputData, IBoxData,
     IGroup, IGroupInputData, IGroupData,
+    ILeaferInputData, ILeaferData,
     IUI, IUIInputData, IUIData,
     IUITag, IUITagInputData
 } from './IUI'
-export { IVectorPath, IShadowEffect, IBlurEffect, IGrayscaleEffect, IStrokeAlign, IStrokeJoin, IStrokeCap, IColor, IColorStop, IPaint, IGradientPaint, IImagePaint, IImagePaintMode, IFontWeight, ITextCase, ITextDecoration, ITextAlign, IVerticalAlign } from './type/IType'
+export { IUnitData, IVectorPath, IShadowEffect, IBlurEffect, IGrayscaleEffect, IStrokeAlign, IStrokeJoin, IStrokeCap, IRGB, IRGBA, IColor, IColorStop, IPaint, IGradientPaint, IImagePaint, IImagePaintMode, IFontWeight, ITextCase, ITextDecoration, ITextAlign, IVerticalAlign, IOverflow } from './type/IType'
 export { ICornerRadiusString, IStrokeWidthString, IPaintString, IShadowString, IPercent, IDashPatternString, IPathString, IVectorPathString, IStringColor } from './type/IStringType'
 export { ILeafFill, ILeafPaint, ILeafPaintColor, ILeafStrokePaint, ILeafShadowEffect } from './type/IComputedType'
 

package/src/module/IPaint.ts

@@ -11,8 +11,15 @@ export interface IPaintModule {
     fill?(ui: IUI, canvas: ILeaferCanvas, fill: string | object): void
     fills?(ui: IUI, canvas: ILeaferCanvas, fills: ILeafPaint[]): void
 
+    drawText?(ui: IUI, canvas: ILeaferCanvas): void
+
     stroke?(ui: IUI, canvas: ILeaferCanvas, stroke: string | object): void
     strokes?(ui: IUI, canvas: ILeaferCanvas, strokes: ILeafPaint[]): void
 
+    strokeText?(ui: IUI, canvas: ILeaferCanvas, stroke: string | object): void
+    strokesText?(ui: IUI, canvas: ILeaferCanvas, strokes: ILeafPaint[]): void
+
+    drawTextStroke?(ui: IUI, canvas: ILeaferCanvas): void
+
     shape?(ui: IUI, current: ILeaferCanvas, options: IRenderOptions): ICachedShape
 }

package/src/module/IUIRender.ts

@@ -1,10 +1,11 @@
-import { ILeafRender } from '@leafer/interface'
+import { ILeafRender, ILeaferCanvas, IRenderOptions } from '@leafer/interface'
 
 import { IUI, IRect, IImage, IText, IFrame, IGroup } from '../IUI'
 
 export type IUIRenderModule = IUIRender & ThisType<IUI>
 
 export interface IUIRender extends ILeafRender {
+    __drawAfterFill?(canvas: ILeaferCanvas, options: IRenderOptions): void
 }
 
 export type IRectRenderModule = IRectRender & ThisType<IRect>

package/src/type/IType.ts

@@ -1,6 +1,10 @@
-import { IMatrixData, IPointData, IPathCommandData, IWindingRule, IBlendMode } from '@leafer/interface'
+import { IPointData, IPathCommandData, IWindingRule, IBlendMode } from '@leafer/interface'
 import { IStringColor } from './IStringType'
 
+export interface IUnitData {
+    type: 'percent' | 'px'
+    value: number
+}
 
 export type IPaint = ISolidPaint | IGradientPaint | IImagePaint
 
@@ -83,9 +87,9 @@ export type IStrokeJoin = 'bevel' | 'round' | 'miter'
 // 文本
 export type ITextAlign = 'left' | 'center' | 'right' | 'justify'
 export type IVerticalAlign = 'top' | 'middle' | 'bottom'
-export type ITextCase = | 'upper' | 'lower' | 'title' | 'original' | 'small-caps' | 'small-caps-forced'
-export type IFontWeight = IFontWeightNumerical | IFontWeightString
-export type IFontWeightNumerical = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
+export type ITextCase = | 'upper' | 'lower' | 'title' | 'none' | 'small-caps' | 'small-caps-forced'
+export type IFontWeight = IFontWeightNumer | IFontWeightString
+export type IFontWeightNumer = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
 export type IFontWeightString =
     | 'thin'
     | 'extra-light'
@@ -96,7 +100,7 @@ export type IFontWeightString =
     | 'bold'
     | 'extra-bold'
     | 'black'
-export type ITextDecoration = 'none' | 'strikethrough' | 'underline'
+export type ITextDecoration = 'none' | 'delete' | 'underline'
 
 // 路径
 export interface IVectorPath {
@@ -124,4 +128,6 @@ export interface IBlurEffect {
 export interface IGrayscaleEffect {
     grayscale: number
     visible?: boolean
-}
+}
+
+export type IOverflow = 'show' | 'hide'