@leafer-ui/interface 1.0.0-beta.9 → 1.0.0-rc.10

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "@leafer-ui/interface",
-  "version": "1.0.0-beta.9",
+  "version": "1.0.0-rc.10",
   "description": "@leafer-ui/interface",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
   "main": "src/index.ts",
+  "types": "types/index.d.ts",
   "files": [
-    "src"
+    "src",
+    "types",
+    "dist"
   ],
   "repository": {
     "type": "git",
@@ -19,6 +22,6 @@
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/interface": "1.0.0-beta.9"
+    "@leafer/interface": "1.0.0-rc.10"
   }
 }

package/src/ICommonAttr.ts

@@ -1,15 +1,17 @@
-import { IPaint, IStrokeAlign, IStrokeCap, IStrokeJoin, IBlurEffect, IFontWeight, ITextCase, ITextDecoration, IShadowEffect, IGrayscaleEffect, ITextAlign, IVerticalAlign, IOverflow, IUnitData } from './type/IType'
+import { INumber, IBoolean, IString } from '@leafer/interface'
+import { IStrokeAlign, IStrokeCap, IStrokeJoin, IBlurEffect, IFontWeight, ITextCase, ITextDecoration, IShadowEffect, IGrayscaleEffect, ITextAlign, IVerticalAlign, IOverflow, IUnitData, ITextWrap, IStroke, IFill, IArrowType } from './type/IType'
 import { ILeafStrokePaint, ILeafShadowEffect, ILeafPaint } from './type/IComputedType'
-import { IPaintString, IDashPatternString, IShadowString, IColorString, IStrokeWidthString, ICornerRadiusString } from './type/IStringType'
+import { IDashPatternString, IShadowString, IColorString, IStrokeWidthString, ICornerRadiusString } from './type/IStringType'
+
 
 // corner---
 export interface ICornerRadiusAttrData {
-    cornerRadius: number | number[] | ICornerRadiusString
-    cornerSmoothing: number
+    cornerRadius: INumber | INumber[] | ICornerRadiusString
+    cornerSmoothing: INumber
 }
 export interface ICornerRadiusInputData {
-    cornerRadius?: number | number[] | ICornerRadiusString
-    cornerSmoothing?: number
+    cornerRadius?: INumber | INumber[] | ICornerRadiusString
+    cornerSmoothing?: INumber
 }
 export interface ICornerRadiusComputedData {
     cornerRadius?: number
@@ -18,10 +20,10 @@ export interface ICornerRadiusComputedData {
 
 // fill---
 export interface IFillAttrData {
-    fill: IPaint | IPaint[] | IPaintString
+    fill: IFill
 }
 export interface IFillInputData {
-    fill?: IPaint | IPaint[] | IPaintString
+    fill?: IFill
 }
 export interface IFillComputedData {
     fill?: IColorString | ILeafPaint[]
@@ -35,26 +37,34 @@ export interface IBorderComputedData {
 
 // stroke---
 export interface IStrokeAttrData {
-    stroke: IPaint | IPaint[] | IPaintString
+    stroke: IStroke
 
     strokeAlign: IStrokeAlign
-    strokeWidth: number | number[] | IStrokeWidthString
+    strokeWidth: INumber | INumber[] | IStrokeWidthString
+    strokeWidthFixed: IBoolean
     strokeCap: IStrokeCap
     strokeJoin: IStrokeJoin
-    dashPattern: number[] | IDashPatternString
-    dashOffset: number
-    miterLimit: number
+    dashPattern: INumber[] | IDashPatternString
+    dashOffset: INumber
+    miterLimit: INumber
+
+    startArrow: IArrowType
+    endArrow: IArrowType
 }
 export interface IStrokeInputData {
-    stroke?: IPaint | IPaint[] | IPaintString
+    stroke?: IStroke
 
     strokeAlign?: IStrokeAlign
-    strokeWidth?: number | number[] | IStrokeWidthString
+    strokeWidth?: INumber | INumber[] | IStrokeWidthString
+    strokeWidthFixed?: IBoolean
     strokeCap?: IStrokeCap
     strokeJoin?: IStrokeJoin
-    dashPattern?: number[] | IDashPatternString
-    dashOffset?: number
-    miterLimit?: number
+    dashPattern?: INumber[] | IDashPatternString
+    dashOffset?: INumber
+    miterLimit?: INumber
+
+    startArrow?: IArrowType
+    endArrow?: IArrowType
 }
 export interface IStrokeComputedData {
     stroke?: IColorString | ILeafStrokePaint[]
@@ -62,6 +72,7 @@ export interface IStrokeComputedData {
     strokeAlign?: IStrokeAlign
     strokeWidth?: number
     strokeWidths?: number[]
+    strokeWidthFixed?: boolean
     strokeCap?: IStrokeCap
     strokeJoin?: IStrokeJoin
     dashPattern?: number[]
@@ -71,39 +82,41 @@ export interface IStrokeComputedData {
 
 // text---
 export interface ITextStyleAttrData {
-    fontFamily: string
-    fontSize: number
+    fontFamily: IString
+    fontSize: INumber
     fontWeight: IFontWeight
-    italic: boolean
+    italic: IBoolean
     textCase: ITextCase
     textDecoration: ITextDecoration
-    letterSpacing: number | IUnitData
-    lineHeight: number | IUnitData
+    letterSpacing: INumber | IUnitData
+    lineHeight: INumber | IUnitData
 
-    paraIndent: number
-    paraSpacing: number
+    paraIndent: INumber
+    paraSpacing: INumber
 
     textAlign: ITextAlign
     verticalAlign: IVerticalAlign
 
+    textWrap: ITextWrap
     textOverflow: IOverflow | string
 }
 export interface ITextStyleInputData {
-    fontFamily?: string
-    fontSize?: number
+    fontFamily?: IString
+    fontSize?: INumber
     fontWeight?: IFontWeight
-    italic?: boolean
+    italic?: IBoolean
     textCase?: ITextCase
     textDecoration?: ITextDecoration
-    letterSpacing?: number | IUnitData
-    lineHeight?: number | IUnitData
+    letterSpacing?: INumber | IUnitData
+    lineHeight?: INumber | IUnitData
 
-    paraIndent?: number
-    paraSpacing?: number
+    paraIndent?: INumber
+    paraSpacing?: INumber
 
     textAlign?: ITextAlign
     verticalAlign?: IVerticalAlign
 
+    textWrap?: ITextWrap
     textOverflow?: IOverflow | string
 }
 export interface ITextStyleComputedData {
@@ -121,23 +134,25 @@ export interface ITextStyleComputedData {
 
     textAlign?: ITextAlign
     verticalAlign?: IVerticalAlign
-    textOverflow?: IOverflow
+
+    textWrap?: ITextWrap
+    textOverflow?: IOverflow | string
 }
 
 // effect---
 export interface IEffectAttrData {
     shadow: IShadowEffect | IShadowEffect[] | IShadowString
     innerShadow: IShadowEffect | IShadowEffect[] | IShadowString
-    blur: number | IBlurEffect
-    backgroundBlur: number | IBlurEffect
-    grayscale: number | IGrayscaleEffect
+    blur: INumber | IBlurEffect
+    backgroundBlur: INumber | IBlurEffect
+    grayscale: INumber | IGrayscaleEffect
 }
 export interface IEffectInputData {
     shadow?: IShadowEffect | IShadowEffect[] | IShadowString
     innerShadow?: IShadowEffect | IShadowEffect[] | IShadowString
-    blur?: number | IBlurEffect
-    backgroundBlur?: number | IBlurEffect
-    grayscale?: number | IGrayscaleEffect
+    blur?: INumber | IBlurEffect
+    backgroundBlur?: INumber | IBlurEffect
+    grayscale?: INumber | IGrayscaleEffect
 }
 export interface IEffectComputedData {
     shadow?: ILeafShadowEffect[]

package/src/IUI.ts

@@ -1,6 +1,4 @@
-import { ILeaf, ILeafComputedData, ILeafData, ILeafInputData, ILeaferCanvas, IRenderOptions, IPathDrawer, IPointData, IPath2D, IPathCommandData, IWindingRule, ILeaferImageConfig, IBoundsData, IObject, __Number, IPathString, ILeaferImage, IBlob } from '@leafer/interface'
-
-import { IOverflow } from './type/IType'
+import { ILeaf, ILeafComputedData, ILeafData, ILeafInputData, ILeaferCanvas, IRenderOptions, IExportOptions, IExportResult, IPathDrawer, IPointData, IPath2D, IPathCommandData, IWindingRule, ILeaferImageConfig, IBoundsData, IObject, IPathString, ILeaferImage, IPathCreator, IAnswer, IPickOptions, IPickResult } from '@leafer/interface'
 
 import {
     IFillAttrData, IFillInputData, IFillComputedData,
@@ -10,18 +8,36 @@ import {
     IEffectAttrData, IEffectInputData, IEffectComputedData,
     ITextStyleAttrData, ITextStyleInputData, ITextStyleComputedData
 } from './ICommonAttr'
-import { IExportOptions } from './module/IExport'
-
+import { IOverflow } from './type/IType'
+import { ILeafer } from './app/ILeafer'
 
 // Line
 export interface ILine extends IUI {
     __: ILineData
     toPoint: IPointData
+    points: number[]
+    curve: boolean | number
 }
-export interface ILineData extends IUIData { }
-export interface ILineInputData extends IUIInputData {
+
+interface ILineAttrData {
     toPoint?: IPointData
+    points?: number[]
+    curve?: boolean | number
 }
+export interface ILineData extends ILineAttrData, IUIData { }
+export interface ILineInputData extends ILineAttrData, IUIBaseInputData { }
+
+
+// Arrow
+export interface IArrow extends ILine {
+    __: IArrowData
+}
+
+interface IArrowAttrData {
+
+}
+export interface IArrowData extends IArrowAttrData, ILineData { }
+export interface IArrowInputData extends IArrowAttrData, IUIBaseInputData { }
 
 
 // Rect
@@ -29,7 +45,7 @@ export interface IRect extends IUI {
     __: IRectData
 }
 export interface IRectData extends IUIData { }
-export interface IRectInputData extends IUIInputData { }
+export interface IRectInputData extends IUIBaseInputData { }
 
 
 // Ellipse
@@ -45,34 +61,38 @@ interface IEllipseAttrData {
     innerRadius?: number
 }
 export interface IEllipseData extends IEllipseAttrData, IUIData { }
-export interface IEllipseInputData extends IEllipseAttrData, IUIInputData { }
+export interface IEllipseInputData extends IEllipseAttrData, IUIBaseInputData { }
 
 
 // Polygon
 export interface IPolygon extends IUI {
     __: IPolygonData
     sides: number
+    points: number[]
+    curve: boolean | number
 }
 interface IPolygonAttrData {
     sides?: number
+    points?: number[]
+    curve?: boolean | number
 }
 export interface IPolygonData extends IPolygonAttrData, IUIData { }
-export interface IPolygonInputData extends IPolygonAttrData, IUIInputData { }
+export interface IPolygonInputData extends IPolygonAttrData, IUIBaseInputData { }
 
 
 // Star
 export interface IStar extends IUI {
     __: IStarData
-    points: number
+    corners: number
     innerRadius: number
 }
 interface IStarAttrData {
-    points?: number
+    corners?: number
     innerRadius?: number
 }
 
 export interface IStarData extends IStarAttrData, IUIData { }
-export interface IStarInputData extends IStarAttrData, IUIInputData { }
+export interface IStarInputData extends IStarAttrData, IUIBaseInputData { }
 
 // Path
 export interface IPath extends IUI {
@@ -84,34 +104,20 @@ export interface IPathData extends IUIData {
     path?: IPathCommandData
     windingRule?: IWindingRule
 }
-export interface IPathInputData extends IUIInputData {
+export interface IPathInputData extends IUIBaseInputData {
     path?: IPathCommandData | IPathString
     windingRule?: IWindingRule
 }
 
 // Pen
 
-export interface IPen extends IGroup {
+export interface IPen extends IGroup, IPathCreator {
     __: IPenData
-    path: IPath
+    pathElement: 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
-
+    path: IPathCommandData
     paint(): void
+    clear(): void
 }
 
 export interface IPenData extends IGroupData { }
@@ -131,8 +137,11 @@ export interface ITextData extends ITextAttrData, ITextStyleComputedData, IUIDat
     __baseLine?: number
     __lineHeight?: number
     __letterSpacing?: number
+    __padding?: number[]
+    __clipText?: boolean
+    __textBoxBounds?: IBoundsData
 }
-export interface ITextInputData extends ITextAttrData, ITextStyleInputData, IUIInputData {
+export interface ITextInputData extends ITextAttrData, ITextStyleInputData, IUIBaseInputData {
 
 }
 
@@ -145,9 +154,13 @@ export interface ITextRowData {
     data?: ITextCharData[]
     words?: ITextWordData[]
 
+    startCharSize?: number
+    endCharSize?: number
+
     paraStart?: boolean // paragraph start
     paraEnd?: boolean // paragraph end
     isOverflow?: boolean
+    textMode?: boolean
 }
 
 export interface ITextWordData {
@@ -186,8 +199,10 @@ export interface IImage extends IRect, ILeaferImageConfig {
 interface IImageAttrData {
     url?: string
 }
-export interface IImageData extends IImageAttrData, IRectData { }
-export interface IImageInputData extends IImageAttrData, IUIInputData { }
+export interface IImageData extends IImageAttrData, IRectData {
+    __setImageFill(value: string): void
+}
+export interface IImageInputData extends IImageAttrData, IUIBaseInputData { }
 
 export interface ICanvas extends IRect {
     __: ICanvasData
@@ -201,7 +216,7 @@ interface ICanvasAttrData {
     smooth?: boolean
 }
 export interface ICanvasData extends ICanvasAttrData, IRectData { }
-export interface ICanvasInputData extends ICanvasAttrData, IUIInputData { }
+export interface ICanvasInputData extends ICanvasAttrData, IUIBaseInputData { }
 
 
 // Leafer
@@ -213,6 +228,12 @@ export interface ILeaferInputData extends IGroupInputData {
     pixelRatio?: number
 }
 
+export interface IAppData extends ILeaferData {
+
+}
+export interface IAppInputData extends ILeaferInputData {
+
+}
 
 // Frame
 export interface IFrame extends IBox {
@@ -245,32 +266,57 @@ export interface IBoxInputData extends IGroupInputData {
 export interface IGroup extends IUI {
     __: IGroupData
     children: IUI[]
-    mask?: IUI
+    pick(hitPoint: IPointData, options?: IPickOptions): IPickResult
     add(child: IUI, index?: number): void
     addAt(child: IUI, index: number): void
     addAfter(child: IUI, after: IUI): void
     addBefore(child: IUI, before: IUI): void
+    addMany(...children: ILeaf[]): void
     remove(child?: IUI): void
     removeAll(): void
+    clear(): void
 }
 export interface IGroupData extends IUIData { }
-export interface IGroupInputData extends IUIInputData { }
+export interface IGroupInputData extends IUIBaseInputData { }
 
 // UI
 export interface IUI extends IFillAttrData, IStrokeAttrData, ICornerRadiusAttrData, IEffectAttrData, ILeaf {
     __: IUIData
+
+    readonly app: ILeafer
+    leafer?: ILeafer
     parent?: IGroup
+    isFrame?: boolean
+
+    proxyData: IUIInputData
+    __proxyData?: IUIInputData
+
+    children?: IUI[]
 
-    set(data: IUITagInputData): void
-    get(): IUITagInputData
+    reset(data?: IUIInputData): void
 
-    getPath(curve?: boolean): IPathCommandData
-    getPathString(curve?: boolean): IPathString
+    set(data: IUIInputData): void
+    toJSON(): IUIInputData
+
+    get(): IUIInputData
+    createProxyData(): IUIInputData
+
+    find(condition: number | string | IFindUIMethod, options?: any): IUI[]
+    findOne(condition: number | string | IFindUIMethod, options?: any): IUI
+
+    getPath(curve?: boolean, pathForRender?: boolean): IPathCommandData
+    getPathString(curve?: boolean, pathForRender?: boolean): IPathString
 
     __drawPathByData(drawer: IPathDrawer, data: IPathCommandData): void
+    __drawPathByBox(drawer: IPathDrawer): void
     __drawAfterFill?(canvas: ILeaferCanvas, options: IRenderOptions): void
 
-    export(filename: string, options?: IExportOptions | number): Promise<IBlob | string | boolean>
+    export(filename: string, options?: IExportOptions | number | boolean): Promise<IExportResult>
+    clone(): IUI
+}
+
+export interface IFindUIMethod {
+    (leaf: IUI, options?: any): IAnswer
 }
 
 export interface IUIData extends IUIComputedData, ILeafData {
@@ -281,15 +327,25 @@ export interface IUIData extends IUIComputedData, ILeafData {
     // 非数据属性, 自动计算的缓存数据
     __isFills?: boolean
     __isStrokes?: boolean
+
+    readonly __strokeWidth: number
+
+    __pixelFill?: boolean // png / svg / webp
+    __pixelStroke?: boolean
+
+    __opacityFill?: boolean  // 半透明的
+    __opacityStroke?: boolean
+
     __drawAfterFill?: boolean
     __isOverflow?: boolean
     __blendLayer?: boolean
 
-    __isTranslucentFill?: boolean  // 半透明的
-    __isTranslucentStroke?: boolean
-
     __useEffect?: boolean
 
+    __autoWidth: boolean
+    __autoHeight: boolean
+    __autoBounds: boolean
+
     // path
     path?: IPathCommandData
     windingRule?: IWindingRule
@@ -303,19 +359,26 @@ export interface IUIData extends IUIComputedData, ILeafData {
     __font?: string
     __textDrawData?: ITextDrawData
 
+    __needComputePaint: boolean
+    __computePaint(): void
+
 }
 export interface IUIComputedData extends IFillComputedData, IBorderComputedData, IStrokeComputedData, ITextStyleComputedData, ICornerRadiusComputedData, IEffectComputedData, ILeafComputedData {
     padding?: number | number[]
+
     locked?: boolean
 }
 
-export interface IUIInputData extends IFillInputData, IStrokeInputData, ITextStyleInputData, ICornerRadiusInputData, IEffectInputData, ILeafInputData {
+export interface IUIBaseInputData extends IFillInputData, IStrokeInputData, ITextStyleInputData, ICornerRadiusInputData, IEffectInputData, ILeafInputData {
     padding?: number | number[]
     locked?: boolean
+    children?: IUIInputData[]
 }
 
 
 export type IUITag =
+    | 'App'
+    | 'Leafer'
     | 'Rect'
     | 'Ellipse'
     | 'Polygon'
@@ -331,6 +394,6 @@ export type IUITag =
     | 'Box'
 
 
-export interface IUITagInputData extends IRectInputData, IEllipseInputData, IPolygonInputData, IStarInputData, ILineInputData, IPathInputData, ITextInputData, IImageInputData, IGroupInputData, IFrameInputData, IObject {
-    tagName?: IUITag
+export interface IUIInputData extends IRectInputData, IEllipseInputData, IPolygonInputData, IStarInputData, ILineInputData, IPathInputData, ITextInputData, IImageInputData, IGroupInputData, IFrameInputData, IUIBaseInputData, IObject {
+    children?: IUIInputData[]
 }

package/src/app/IApp.ts

@@ -0,0 +1,16 @@
+import { ILeaferConfig } from '@leafer/interface'
+
+import { ILeafer } from './ILeafer'
+import { IEditorConfig } from '../editor/IEditor'
+
+export interface IApp extends ILeafer {
+    children: ILeafer[]
+    realCanvas: boolean
+}
+
+export interface IAppConfig extends ILeaferConfig {
+    ground?: ILeaferConfig
+    tree?: ILeaferConfig
+    sky?: ILeaferConfig
+    editor?: IEditorConfig
+}

package/src/app/ILeafer.ts

@@ -0,0 +1,21 @@
+import { IControl, ILeaferAttrData, ILeaferConfig, ILeaferType } from '@leafer/interface'
+import { IApp } from './IApp'
+import { IGroup } from '../IUI'
+import { IEditorBase } from '../editor/IEditor'
+
+export interface ILeafer extends IGroup, ILeaferAttrData, IControl {
+    readonly isApp: boolean
+    readonly app: ILeafer
+    parent?: IApp
+    zoomLayer: IGroup
+    editor: IEditorBase
+
+    ground?: ILeafer
+    tree?: ILeafer
+    sky?: ILeafer
+
+    userConfig?: ILeaferConfig
+
+    onInit(): void
+    initType(type: ILeaferType): void
+}

package/src/editor/IEditor.ts

@@ -0,0 +1,88 @@
+import { IGroup, IUI, IRectInputData, ISelectorProxy, IEditSize, ICursorType, IAround, IDragEvent, IRotateEvent, IStroke, IFill, ILeaf, IObject, IBoxInputData, IGroupInputData, IImageCursor } from '@leafer-ui/interface'
+
+export interface IEditorBase extends IGroup, ISelectorProxy {
+    config: IEditorConfig
+
+    hoverTarget: IUI
+    target: IUI | IUI[]
+
+    readonly list: IUI[]
+
+    readonly hasTarget: boolean
+    readonly multiple: boolean
+    readonly single: boolean
+
+    readonly dragging: boolean
+
+    element: IUI
+    buttons: IGroup
+
+    selector: IGroup
+    editBox: IGroup
+    editTool: IObject
+
+    hasItem(item: IUI): boolean
+    shiftItem(item: IUI): void
+    addItem(item: IUI): void
+    removeItem(item: IUI): void
+
+    update(): void
+    updateEditTool(): void
+
+    getEditSize(ui: ILeaf): IEditSize
+
+    onMove(e: IDragEvent): void
+    onScale(e: IDragEvent): void
+    onRotate(e: IDragEvent | IRotateEvent): void
+    onSkew(e: IDragEvent): void
+
+    group(group?: IGroup | IGroupInputData): IGroup
+    ungroup(): IUI[]
+
+    lock(): void
+    unlock(): void
+
+    toTop(): void
+    toBottom(): void
+}
+
+export interface IEditorConfig {
+    editSize?: 'auto' | IEditSize
+
+    stroke?: IStroke
+    strokeWidth?: number
+
+    pointFill?: IFill
+    pointSize?: number
+    pointRadius?: number
+
+    point?: IBoxInputData | IBoxInputData[]
+    middlePoint?: IBoxInputData | IBoxInputData[]
+    rotatePoint?: IBoxInputData
+
+    rect?: IBoxInputData
+    area?: IRectInputData
+
+    buttonsDirection?: 'top' | 'right' | 'bottom' | 'left'
+    buttonsFixed?: boolean
+    buttonsMargin?: number
+
+    hideOnMove?: boolean
+
+    moveCursor?: ICursorType
+    resizeCursor?: IImageCursor
+    rotateCursor?: IImageCursor
+    skewCursor?: IImageCursor
+
+    around?: IAround
+    lockRatio?: boolean
+    rotateGap?: number
+
+    selector?: boolean
+    hover?: boolean
+    boxSelect?: boolean
+
+    rotateable?: boolean
+    resizeable?: boolean
+    skewable?: boolean
+}