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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer-ui/interface",
-  "version": "1.0.0-alpha.21",
+  "version": "1.0.0-alpha.23",
   "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.23"
   }
 }

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 } from './type/IType'
 import { ILeafStrokePaint, ILeafShadowEffect, ILeafPaint } from './type/IComputedType'
 import { IPaintString, IDashPatternString, IPercent, IShadowString, IStringColor, IStrokeWidthString, ICornerRadiusString } from './type/IStringType'
 
@@ -79,8 +79,12 @@ export interface ITextStyleAttrData {
     textDecoration: ITextDecoration
     letterSpacing: number | IPercent
     lineHeight: number | IPercent
+
     paragraphIndent: number
     paragraphSpacing: number
+
+    textAlign: ITextAlign
+    verticalAlign: IVerticalAlign
 }
 export interface ITextStyleInputData {
     fontFamily?: string
@@ -91,8 +95,12 @@ export interface ITextStyleInputData {
     textDecoration?: ITextDecoration
     letterSpacing?: number | IPercent
     lineHeight?: number | IPercent
+
     paragraphIndent?: number
     paragraphSpacing?: number
+
+    textAlign?: ITextAlign
+    verticalAlign?: IVerticalAlign
 }
 export interface ITextStyleComputedData {
     fontFamily?: string
@@ -106,6 +114,9 @@ export interface ITextStyleComputedData {
 
     paragraphIndent?: number
     paragraphSpacing?: number
+
+    textAlign?: ITextAlign
+    verticalAlign?: IVerticalAlign
 }
 
 // effect---

package/src/IUI.ts

@@ -1,7 +1,6 @@
-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 {
@@ -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
@@ -110,23 +111,39 @@ export interface IText extends ITextStyleAttrData, IUI {
 interface ITextAttrData {
     content?: string
 }
+
+export interface ITextRowData {
+    x?: number
+    y?: number
+    width?: number
+    height?: number
+    text: string
+}
+
+export interface ITextDrawData extends IBoundsData {
+    list: ITextRowData[]
+    font: string
+    decorationY?: number
+    decorationHeight?: number
+}
 export interface ITextData extends ITextAttrData, ITextStyleComputedData, IUIData {
-    __font?: string
 }
 export interface ITextInputData extends ITextAttrData, ITextStyleInputData, IUIInputData {
 
 }
 
 
+
+
 // 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 { }
@@ -136,7 +153,7 @@ export interface IFrame extends IGroup {
     __: IFrameData
     clip: boolean
     __updateRectBoxBounds(): void
-    __updateRectEventBounds(): void
+    __updateRectStrokeBounds(): void
     __updateRectRenderBounds(): void
     __renderRect(canvas: ILeaferCanvas, options: IRenderOptions): void
     __renderGroup(canvas: ILeaferCanvas, options: IRenderOptions): void
@@ -150,11 +167,10 @@ export interface IFrameInputData extends IGroupInputData {
 
 
 // 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,12 +183,11 @@ 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
 }
 
@@ -194,15 +209,32 @@ export interface IUIData extends IUIComputedData, ILeafData {
     __path2DForRender?: IPath2D
 
     __strokeOuterWidth?: number // boxBounds外面的笔触宽度
+
+    // text
+    __textDrawData?: ITextDrawData
 }
 export interface IUIComputedData extends IFillComputedData, IBorderComputedData, IStrokeComputedData, ICornerRadiusComputedData, IEffectComputedData, ILeafComputedData {
-    blendMode?: IBlendMode
-    mask?: boolean
     locked?: boolean
 }
 
 export interface IUIInputData extends IFillInputData, IStrokeInputData, ICornerRadiusInputData, IEffectInputData, ILeafInputData {
-    blendMode?: IBlendMode
-    mask?: boolean
     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

@@ -8,17 +8,18 @@ export {
     IStar, IStarInputData, IStarData,
     IPath, IPathInputData, IPathData,
     IVector, IVectorInputData, IVectorData,
-    IText, ITextInputData, ITextData,
+    IText, ITextInputData, ITextData, ITextRowData, ITextDrawData,
     IImage, IImageInputData, IImageData,
     IFrame, IFrameInputData, IFrameData,
     IGroup, IGroupInputData, IGroupData,
-    IUI, IUIInputData, IUIData
+    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 { IVectorPath, IShadowEffect, IBlurEffect, IGrayscaleEffect, IStrokeAlign, IStrokeJoin, IStrokeCap, IColor, IColorStop, IPaint, IGradientPaint, IImagePaint, IImagePaintMode, IFontWeight, ITextCase, ITextDecoration, ITextAlign, IVerticalAlign } 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,18 @@
-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
 
     stroke?(ui: IUI, canvas: ILeaferCanvas, stroke: string | object): void
     strokes?(ui: IUI, canvas: ILeaferCanvas, strokes: ILeafPaint[]): void
+
+    shape?(ui: IUI, current: ILeaferCanvas, options: IRenderOptions): ICachedShape
 }

package/src/module/IUIRender.ts

@@ -1,34 +1,39 @@
-import { ILeafRender, ILeaferCanvas, IRenderOptions, } from '@leafer/interface'
+import { ILeafRender } 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 {
 }
 
 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,6 @@
-import { IMatrixData, IPointData, IPathCommandData, IWindingRule } from '@leafer/interface'
+import { IMatrixData, 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 type IPaint = ISolidPaint | IGradientPaint | IImagePaint
 
@@ -37,10 +18,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 +28,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 +42,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 +56,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 +73,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,7 +81,9 @@ 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 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 IFontWeightString =