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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer-ui/interface",
-  "version": "1.0.0-alpha.21",
+  "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.21"
+    "@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 } 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,10 +77,16 @@ export interface ITextStyleAttrData {
     italic: boolean
     textCase: ITextCase
     textDecoration: ITextDecoration
-    letterSpacing: number | IPercent
-    lineHeight: number | IPercent
-    paragraphIndent: number
-    paragraphSpacing: number
+    letterSpacing: number | IUnitData
+    lineHeight: number | IUnitData
+
+    paraIndent: number
+    paraSpacing: number
+
+    textAlign: ITextAlign
+    verticalAlign: IVerticalAlign
+
+    textOverflow: IOverflow | string
 }
 export interface ITextStyleInputData {
     fontFamily?: string
@@ -89,10 +95,16 @@ export interface ITextStyleInputData {
     italic?: boolean
     textCase?: ITextCase
     textDecoration?: ITextDecoration
-    letterSpacing?: number | IPercent
-    lineHeight?: number | IPercent
-    paragraphIndent?: number
-    paragraphSpacing?: number
+    letterSpacing?: number | IUnitData
+    lineHeight?: number | IUnitData
+
+    paraIndent?: number
+    paraSpacing?: number
+
+    textAlign?: ITextAlign
+    verticalAlign?: IVerticalAlign
+
+    textOverflow?: IOverflow | string
 }
 export interface ITextStyleComputedData {
     fontFamily?: string
@@ -104,8 +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,8 +1,7 @@
-import { ILeaf, ILeafComputedData, ILeafData, ILeafInputData, ILeaferCanvas, IRenderOptions, IPathDrawer, IPointData, IPath2D, IPathCommandData, IWindingRule, IBranch, ILeaferImageConfig, IMatrixData, IBoundsData, __Number } from '@leafer/interface'
+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 { IBlendMode } from './type/IType'
-import { IVectorPath } from './type/IType'
+import { IOverflow, IUnitData, IVectorPath } from './type/IType'
 
 import {
     IFillAttrData, IFillInputData, IFillComputedData,
@@ -20,7 +19,9 @@ export interface ILine extends IUI {
     toPoint: IPointData
 }
 export interface ILineData extends IUIData { }
-export interface ILineInputData extends IUIInputData { }
+export interface ILineInputData extends IUIInputData {
+    toPoint?: IPointData
+}
 
 
 // Rect
@@ -78,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
@@ -88,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 {
@@ -105,56 +135,130 @@ 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 {
-    __font?: string
+    __baseLine?: number
+    __lineHeight?: number
+    __letterSpacing?: number
 }
 export interface ITextInputData extends ITextAttrData, ITextStyleInputData, IUIInputData {
 
 }
 
+export interface ITextRowData {
+    x?: number
+    y?: number
+    width?: number
+    height?: number
+    text?: string
+    data?: ITextCharData[]
+    words?: ITextWordData[]
+
+    paraStart?: boolean // paragraph start
+    paraEnd?: boolean // paragraph end
+    isOverflow?: boolean
+}
+
+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 {
     __: IImageData
     url: string
-    thumb: string
+    ready: boolean
+    image?: ILeaferImage
 }
 interface IImageAttrData {
     url?: string
-    thumb?: string
 }
 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
-    __updateRectEventBounds(): 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
 }
 
 
 // Group
-export interface IGroup extends IBranch, IUI {
+export interface IGroup extends IUI {
     __: IGroupData
-    root?: IGroup
-    parent?: IGroup
     children: IUI[]
+    mask?: IUI
     add(child: IUI, index?: number): void
     remove(child?: IUI): void
     addAt(child: IUI, index: number): void
@@ -167,19 +271,25 @@ export interface IGroupInputData extends IUIInputData { }
 // UI
 export interface IUI extends IFillAttrData, IStrokeAttrData, ICornerRadiusAttrData, IEffectAttrData, ILeaf {
     __: IUIData
-    root?: IGroup
     parent?: IGroup
-    readonly worldTransform: IMatrixData
-    readonly relativeTransform: IMatrixData
-    readonly worldBoxBounds: IBoundsData
-    readonly worldRenderBounds: IBoundsData
+
+    set(data: IUITagInputData): void
+    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
@@ -194,15 +304,36 @@ export interface IUIData extends IUIComputedData, ILeafData {
     __path2DForRender?: IPath2D
 
     __strokeOuterWidth?: number // boxBounds外面的笔触宽度
+
+    // text
+    __font?: string
+    __textDrawData?: ITextDrawData
+
 }
-export interface IUIComputedData extends IFillComputedData, IBorderComputedData, IStrokeComputedData, ICornerRadiusComputedData, IEffectComputedData, ILeafComputedData {
-    blendMode?: IBlendMode
-    mask?: boolean
+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 {
-    blendMode?: IBlendMode
-    mask?: boolean
+export interface IUIInputData extends IFillInputData, IStrokeInputData, ITextStyleInputData, ICornerRadiusInputData, IEffectInputData, ILeafInputData {
+    padding?: number | number[]
     locked?: boolean
 }
+
+
+export type IUITag =
+    | 'Rect'
+    | 'Ellipse'
+    | 'Polygon'
+    | 'Star'
+    | 'Line'
+    | 'Path'
+    | 'Text'
+    | 'Image'
+    | 'Group'
+    | 'Frame'
+
+
+export interface IUITagInputData extends IRectInputData, IEllipseInputData, IPolygonInputData, IStarInputData, ILineInputData, IPathInputData, ITextInputData, IImageInputData, IGroupInputData, IFrameInputData, IObject {
+    tagName?: IUITag
+}

package/src/index.ts

@@ -1,3 +1,4 @@
+import { ITextStyleComputedData } from './ICommonAttr'
 export * from '@leafer/interface'
 
 export {
@@ -7,18 +8,23 @@ export {
     IPolygon, IPolygonInputData, IPolygonData,
     IStar, IStarInputData, IStarData,
     IPath, IPathInputData, IPathData,
+    IPen, IPenInputData, IPenData,
     IVector, IVectorInputData, IVectorData,
-    IText, ITextInputData, ITextData,
+    IText, ITextInputData, ITextData, ITextRowData, ITextWordData, ITextCharData, ITextDrawData,
     IImage, IImageInputData, IImageData,
+    ICanvas, ICanvasInputData, ICanvasData,
     IFrame, IFrameInputData, IFrameData,
+    IBox, IBoxInputData, IBoxData,
     IGroup, IGroupInputData, IGroupData,
-    IUI, IUIInputData, IUIData
+    ILeaferInputData, ILeaferData,
+    IUI, IUIInputData, IUIData,
+    IUITag, IUITagInputData
 } from './IUI'
-export { IBlendMode, IVectorPath, IShadowEffect, IBlurEffect, IGrayscaleEffect, IStrokeAlign, IStrokeJoin, IStrokeCap, IColor, IPaint, IGradientPaint, IImagePaint, IImagePaintMode, IFontWeight, ITextCase, ITextDecoration } 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'
 
-export { IUIRenderModule, IRectRenderModule, IImageRenderModule, IGroupRenderModule, IFrameRenderModule } from './module/IUIRender'
+export { IUIRenderModule, IRectRenderModule, IImageRenderModule, ITextRenderModule, IGroupRenderModule, IFrameRenderModule } from './module/IUIRender'
 export { IUIBoundsModule } from './module/IUIBounds'
 export { IUIHitModule } from './module/IUIHit'
 

package/src/module/IPaint.ts

@@ -1,12 +1,25 @@
-import { ILeaferCanvas } from '@leafer/interface'
+import { ILeaferCanvas, IRenderOptions } from '@leafer/interface'
 
 import { ILeafPaint } from '../type/IComputedType'
 import { IUI } from '../IUI'
+import { ICachedShape } from '../ICachedShape'
 
 export interface IPaintModule {
+    computeFill?(ui: IUI): void
+    computeStroke?(ui: IUI): void
+
     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,34 +1,40 @@
-import { ILeafRender, ILeaferCanvas, IRenderOptions, } from '@leafer/interface'
+import { ILeafRender, ILeaferCanvas, IRenderOptions } from '@leafer/interface'
 
-import { IUI, IRect, IImage, IFrame, IGroup } from '../IUI'
+import { IUI, IRect, IImage, IText, IFrame, IGroup } from '../IUI'
 
 export type IUIRenderModule = IUIRender & ThisType<IUI>
 
-interface IUIRender extends ILeafRender {
-    __renderShape?(canvas: ILeaferCanvas, options: IRenderOptions): void
+export interface IUIRender extends ILeafRender {
+    __drawAfterFill?(canvas: ILeaferCanvas, options: IRenderOptions): void
 }
 
 export type IRectRenderModule = IRectRender & ThisType<IRect>
 
-interface IRectRender extends IUIRender {
+export interface IRectRender extends IUIRender {
 
 }
 
 export type IImageRenderModule = IImageRender & ThisType<IImage>
 
-interface IImageRender extends IUIRender {
+export interface IImageRender extends IUIRender {
+
+}
+
+export type ITextRenderModule = ITextRender & ThisType<IText>
+
+export interface ITextRender extends IUIRender {
 
 }
 
 export type IGroupRenderModule = IGroupRender & ThisType<IGroup>
 
-interface IGroupRender extends IUIRender {
+export interface IGroupRender extends IUIRender {
 
 }
 
 export type IFrameRenderModule = IFrameRender & ThisType<IFrame>
 
-interface IFrameRender extends IGroupRender {
+export interface IFrameRender extends IGroupRender {
 
 }
 

package/src/type/IComputedType.ts

@@ -1,7 +1,7 @@
-import { IPointData } from '@leafer/interface'
+import { IBlendMode, IMatrixData } from '@leafer/interface'
 
 import { IStringColor } from './IStringType'
-import { IBlendMode, IStrokeAlign, IStrokeJoin, IStrokeCap } from './IType'
+import { IStrokeAlign, IStrokeJoin, IStrokeCap } from './IType'
 import { IPaintType } from './IType'
 
 export type ILeafPaintColor = IStringColor | CanvasGradient | CanvasPattern
@@ -9,7 +9,7 @@ export type ILeafPaintColor = IStringColor | CanvasGradient | CanvasPattern
 export interface ILeafPaint {
     type: IPaintType
     style: ILeafPaintColor
-    scale?: IPointData
+    transform?: IMatrixData
     blendMode?: IBlendMode
     opacity?: number
 }

package/src/type/IType.ts

@@ -1,25 +1,10 @@
-import { IMatrixData, IPointData, IPathCommandData, IWindingRule } from '@leafer/interface'
+import { IPointData, IPathCommandData, IWindingRule, IBlendMode } from '@leafer/interface'
 import { IStringColor } from './IStringType'
 
-export type IBlendMode =
-    | 'pass-through'
-    | 'normal'
-    | 'multiply'
-    | 'screen'
-    | 'overlay'
-    | 'darken'
-    | 'lighten'
-    | 'color-dodge'
-    | 'color-burn'
-    | 'hard-light'
-    | 'soft-light'
-    | 'difference'
-    | 'exclusion'
-    | 'hue'
-    | 'saturation'
-    | 'color'
-    | 'luminosity'
-
+export interface IUnitData {
+    type: 'percent' | 'px'
+    value: number
+}
 
 export type IPaint = ISolidPaint | IGradientPaint | IImagePaint
 
@@ -37,10 +22,9 @@ export type IPaintType =
     | IGradientType
 
 export type IGradientType =
-    | 'gradient-linear'
-    | 'gradient-radial'
-    | 'gradient-angular'
-    | 'gradient-diamond'
+    | 'linear'
+    | 'radial'
+    | 'angular'
 
 // ---   
 export interface ISolidPaint extends IPaintBase {
@@ -48,11 +32,12 @@ export interface ISolidPaint extends IPaintBase {
     color: IColor
 }
 
-export type IColor = IStringColor // | RGB | RGBA
+export type IColor = IStringColor | IRGB | IRGBA
 export interface IRGB {
     r: number
     g: number
     b: number
+    a?: number
 }
 export interface IRGBA extends IRGB {
     a: number
@@ -61,8 +46,8 @@ export interface IRGBA extends IRGB {
 // ---
 export interface IGradientPaint extends IPaintBase {
     type: IGradientType
-    from: IPointData
-    to: IPointData
+    from?: IPointData
+    to?: IPointData
     stretch?: number
     stops: IColorStop[]
 }
@@ -75,11 +60,13 @@ export interface IColorStop {
 export interface IImagePaint extends IPaintBase {
     type: "image"
     url: string
-    mode: IImagePaintMode
-    transform?: IMatrixData
-    scale?: number
-    rotation?: number
+    mode?: IImagePaintMode
+
     filters?: IImageFilters
+
+    offset?: IPointData
+    scale?: number | IPointData
+    rotation?: number
 }
 export interface IImageFilters {
     exposure?: number // 曝光
@@ -90,7 +77,7 @@ export interface IImageFilters {
     highlights?: number // 高光
     shadows?: number // 阴影
 }
-export type IImagePaintMode = 'fill' | 'fit' | 'tile' | 'crop'
+export type IImagePaintMode = 'cover' | 'fit' | 'strench' | 'clip' | 'repeat'
 
 // 描边
 export type IStrokeAlign = 'inside' | 'outside' | 'center'
@@ -98,9 +85,11 @@ export type IStrokeCap = 'none' | 'round' | 'square' | 'arrow-lines' | 'arrow-eq
 export type IStrokeJoin = 'bevel' | 'round' | 'miter'
 
 // 文本
-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 ITextAlign = 'left' | 'center' | 'right' | 'justify'
+export type IVerticalAlign = 'top' | 'middle' | 'bottom'
+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'
@@ -111,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 {
@@ -139,4 +128,6 @@ export interface IBlurEffect {
 export interface IGrayscaleEffect {
     grayscale: number
     visible?: boolean
-}
+}
+
+export type IOverflow = 'show' | 'hide'