@leafer-ui/interface 1.0.0-rc.8 → 1.0.0

package/src/editor/IEditor.ts

@@ -1,25 +1,35 @@
-import { IGroup, IUI, IRectInputData, ISelectorProxy, IEditSize, ICursorType, IAround, IDragEvent, IRotateEvent, IStroke, IFill, ILeaf, IObject, IBoxInputData } from '@leafer-ui/interface'
+import { IGroup, IUI, IBox, IRectInputData, ISelectorProxy, IEditSize, ICursorType, IAlign, IUnitPointData, IDragEvent, IRotateEvent, IStroke, IFill, ILeaf, ILeafList, IObject, IBoxInputData, IGroupInputData, IImageCursor, IRect, IBoundsData, IKeyEvent, IUIInputData, IZoomEvent, IColorString } from '@leafer-ui/interface'
 
 export interface IEditorBase extends IGroup, ISelectorProxy {
     config: IEditorConfig
+    readonly mergeConfig: IEditorConfig // 实际使用，合并了选中元素上的editConfig
 
-    hoverTarget: IUI
-    target: IUI | IUI[]
+    hoverTarget?: IUI
+    target?: IUI | IUI[]
 
     readonly list: IUI[]
+    leafList: ILeafList
+    openedGroupList: ILeafList
+
+    readonly editing: boolean
+    innerEditing: boolean
+    readonly groupOpening: boolean
 
-    readonly hasTarget: boolean
     readonly multiple: boolean
     readonly single: boolean
 
     readonly dragging: boolean
 
-    element: IUI
+    element?: IUI
     buttons: IGroup
 
     selector: IGroup
-    editBox: IGroup
-    editTool: IObject
+    editBox: IEditBoxBase
+    editTool?: IObject
+    innerEditor?: IObject
+
+    select(target: IUI | IUI[]): void
+    cancel(): void
 
     hasItem(item: IUI): boolean
     shiftItem(item: IUI): void
@@ -27,17 +37,23 @@ export interface IEditorBase extends IGroup, ISelectorProxy {
     removeItem(item: IUI): void
 
     update(): void
+    updateEditBox(): void
     updateEditTool(): void
 
     getEditSize(ui: ILeaf): IEditSize
 
     onMove(e: IDragEvent): void
-    onScale(e: IDragEvent): void
+    onScale(e: IDragEvent | IZoomEvent): void
     onRotate(e: IDragEvent | IRotateEvent): void
     onSkew(e: IDragEvent): void
 
-    group(): void
-    ungroup(): void
+    group(group?: IGroup | IGroupInputData): IGroup
+    ungroup(): IUI[]
+    openGroup(group: IGroup): void
+    closeGroup(group: IGroup): void
+
+    openInnerEditor(target?: IUI): void
+    closeInnerEditor(): void
 
     lock(): void
     unlock(): void
@@ -47,7 +63,9 @@ export interface IEditorBase extends IGroup, ISelectorProxy {
 }
 
 export interface IEditorConfig {
-    editSize?: 'auto' | IEditSize
+    editSize?: IEditSize
+    dualEvent?: boolean
+    keyEvent?: boolean
 
     stroke?: IStroke
     strokeWidth?: number
@@ -62,26 +80,84 @@ export interface IEditorConfig {
 
     rect?: IBoxInputData
     area?: IRectInputData
+    mask?: IColorString
 
     buttonsDirection?: 'top' | 'right' | 'bottom' | 'left'
     buttonsFixed?: boolean
     buttonsMargin?: number
 
     hideOnMove?: boolean
+    hideOnSmall?: boolean | number
 
     moveCursor?: ICursorType
-    resizeCursor?: ICursorType[]
-    rotateCursor?: ICursorType[]
+    resizeCursor?: IImageCursor
+    rotateCursor?: IImageCursor
+    skewCursor?: IImageCursor
 
-    around?: IAround
-    lockRatio?: boolean
+    around?: IAlign | IUnitPointData
+    lockRatio?: boolean | 'corner'
     rotateGap?: number
 
     selector?: boolean
     hover?: boolean
+    hoverStyle?: IUIInputData
+    select?: 'press' | 'tap'
     boxSelect?: boolean
+    continuousSelect?: boolean // 点击可以连续选择
+    openInner?: 'double' | 'long' // 双击/长按打开内部
 
-    rotateable?: boolean
-    resizeable?: boolean
+    moveable?: boolean
+    rotateable?: boolean | 'rotate'
+    resizeable?: boolean | 'zoom'
     skewable?: boolean
-}
+}
+
+export interface IEditPoint extends IBox {
+    direction: number
+    pointType: IEditPointType
+}
+
+export type IEditPointType = 'rotate' | 'resize'
+
+export interface IEditBoxBase extends IGroup {
+    editor: IEditorBase
+    dragging: boolean
+    moving: boolean
+
+    view: IGroup //  放置默认编辑工具控制点
+
+    circle: IEditPoint
+    rect: IRect
+
+    buttons: IGroup
+
+    resizePoints: IEditPoint[]
+    rotatePoints: IEditPoint[]
+    resizeLines: IEditPoint[]
+
+    readonly flipped: boolean
+    readonly flippedX: boolean
+    readonly flippedY: boolean
+    readonly flippedOne: boolean
+
+    enterPoint: IEditPoint
+
+    getPointStyle(userStyle?: IBoxInputData): IBoxInputData
+    getPointsStyle(): IBoxInputData[]
+    getMiddlePointsStyle(): IBoxInputData[]
+
+    load(): void
+    update(bounds: IBoundsData): void
+    unload(): void
+
+    onArrow(e: IKeyEvent): void
+
+}
+
+export interface IEditorConfigFunction {
+    (ui: any): IEditorConfig
+}
+
+export interface IEditToolFunction {
+    (ui: any): string
+}

package/src/index.ts

@@ -5,6 +5,7 @@ export { ILeafer } from './app/ILeafer'
 
 export {
     ILine, ILineInputData, ILineData,
+    IArrow, IArrowInputData, IArrowData,
     IRect, IRectInputData, IRectData,
     IEllipse, IEllipseInputData, IEllipseData,
     IPolygon, IPolygonInputData, IPolygonData,
@@ -15,27 +16,31 @@ export {
     IImage, IImageInputData, IImageData,
     ICanvas, ICanvasInputData, ICanvasData,
     IFrame, IFrameInputData, IFrameData,
+    IFlow, IFlowInputData, IFlowData,
     IBox, IBoxInputData, IBoxData,
     IGroup, IGroupInputData, IGroupData,
     ILeaferInputData, ILeaferData,
     IAppInputData, IAppData,
     IUI, IUIBaseInputData, IUIData, IFindUIMethod,
-    IUITag, IUIInputData
+    IUITag, IUIInputData, IUIJSONData
 } from './IUI'
 
-export { IUnitData, IVectorPath, IShadowEffect, IBlurEffect, IGrayscaleEffect, IFill, IStroke, IStrokeAlign, IStrokeJoin, IStrokeCap, IRGB, IRGBA, IColor, IColorStop, IPaint, IGradientPaint, IImagePaint, IImagePaintMode, IFontWeight, ITextCase, ITextDecoration, ITextAlign, IVerticalAlign, IOverflow, ITextWrap, IRepeat } from './type/IType'
+export { IVectorPath, IShadowEffect, IBlurEffect, IGrayscaleEffect, IFill, IStroke, IPaintAttr, IStrokeAlign, IStrokeJoin, IStrokeCap, IArrowType, IPathDataArrow, IPathDataArrowMap, IRGB, IRGBA, IColor, IColorStop, IPaint, IGradientPaint, IImagePaint, IImagePaintMode, IFontWeight, ITextCase, ITextDecoration, ITextAlign, IVerticalAlign, IOverflow, ITextWrap, IRepeat } from './type/IType'
 export { ICornerRadiusString, IStrokeWidthString, IPaintString, IShadowString, IPercent, IDashPatternString, IColorString } from './type/IStringType'
 export { ILeafFill, ILeafPaint, ILeafPaintPatternData, ILeafPaintColor, ILeafStrokePaint, ILeafShadowEffect } from './type/IComputedType'
+export { IStrokeAttrData, IStrokeInputData, IStrokeComputedData, ITextStyleAttrData, ITextStyleInputData, ITextStyleComputedData, IEffectAttrData, IEffectInputData, IEffectComputedData } from './ICommonAttr'
 
 export { IUIRenderModule, IRectRenderModule, IImageRenderModule, ITextRenderModule, IGroupRenderModule, IFrameRenderModule } from './module/IUIRender'
 export { IUIBoundsModule } from './module/IUIBounds'
 export { IUIHitModule } from './module/IUIHit'
+export { IPathArrowModule } from './module/IPathArrow'
 export { ITextConvertModule } from './module/ITextConvert'
 export { IColorConvertModule } from './module/IColorConvert'
-export { IExportModule, IExportOptions, IExportResult, IExportResultFunction } from './module/IExport'
+export { IExportModule } from './module/IExport'
+export { IStateModule } from './module/IState'
 
-export { IPaintModule } from './module/IPaint'
+export { IPaintModule, IPaintImageModule, IPaintGradientModule } from './module/IPaint'
 export { IEffectModule } from './module/IEffect'
 export { ICachedShape } from './ICachedShape'
 
-export { IEditorBase, IEditorConfig } from './editor/IEditor'
+export { IEditorBase, IEditorConfig, IEditBoxBase, IEditPoint, IEditPointType, IEditToolFunction, IEditorConfigFunction } from './editor/IEditor'

package/src/module/IColorConvert.ts

@@ -1,5 +1,5 @@
 import { IColor } from '../type/IType'
 
 export interface IColorConvertModule {
-    string?(color: IColor, opacity?: number): string
+    string(color: IColor, opacity?: number): string
 }

package/src/module/IEffect.ts

@@ -1,12 +1,12 @@
-import { ILeaferCanvas, IRenderOptions } from '@leafer/interface'
+import { ILeaferCanvas } from '@leafer/interface'
 
 import { IUI } from '../IUI'
 import { ICachedShape } from '../ICachedShape'
 
 
 export interface IEffectModule {
-    shadow?(ui: IUI, current: ILeaferCanvas, shape: ICachedShape, renderOptions: IRenderOptions): void
-    innerShadow?(ui: IUI, current: ILeaferCanvas, shape: ICachedShape, renderOptions: IRenderOptions): void
-    blur?(ui: IUI, current: ILeaferCanvas, origin: ILeaferCanvas, renderOptions: IRenderOptions): void
-    backgroundBlur?(ui: IUI, current: ILeaferCanvas, shape: ICachedShape, renderOptions: IRenderOptions): void
+    shadow(ui: IUI, current: ILeaferCanvas, shape: ICachedShape): void
+    innerShadow(ui: IUI, current: ILeaferCanvas, shape: ICachedShape): void
+    blur(ui: IUI, current: ILeaferCanvas, origin: ILeaferCanvas): void
+    backgroundBlur(ui: IUI, current: ILeaferCanvas, shape: ICachedShape): void
 }

package/src/module/IExport.ts

@@ -1,20 +1,7 @@
-import { ILeaf, IExportFileType, IBlob } from '@leafer/interface'
-
-export interface IExportOptions {
-    quality?: number
-    blob?: boolean
-}
-
-export interface IExportResult {
-    data: IBlob | string | boolean
-}
-
-export interface IExportResultFunction {
-    (data: IExportResult): void
-}
+import { ILeaf, IExportFileType, IExportOptions, IExportResult } from '@leafer/interface'
 
 
 export interface IExportModule {
     running?: boolean
-    export?(leaf: ILeaf, filename: IExportFileType | string, options?: IExportOptions | number | boolean): Promise<IExportResult>
+    export(leaf: ILeaf, filename: IExportFileType | string, options?: IExportOptions | number | boolean): Promise<IExportResult>
 }

package/src/module/IPaint.ts

@@ -1,26 +1,45 @@
-import { ILeaferCanvas, IRenderOptions, IBooleanMap } from '@leafer/interface'
+import { ILeaferCanvas, IRenderOptions, IBooleanMap, IBoundsData, ILeaferImage, IAround, IPointData, IMatrixData } from '@leafer/interface'
 
-import { ILeafPaint } from '../type/IComputedType'
+import { ILeafPaint, ILeafPaintPatternData } from '../type/IComputedType'
 import { IUI, IUIData } from '../IUI'
 import { ICachedShape } from '../ICachedShape'
+import { IGradientPaint, IImagePaint, IPaintAttr } from '../type/IType'
+
 
 export interface IPaintModule {
-    compute?(attrName: 'fill' | 'stroke', ui: IUI): void
+    compute(attrName: IPaintAttr, ui: IUI): void
+
+    fill(fill: string, ui: IUI, canvas: ILeaferCanvas,): void
+    fills(fills: ILeafPaint[], ui: IUI, canvas: ILeaferCanvas): void
 
-    fill?(fill: string, ui: IUI, canvas: ILeaferCanvas,): void
-    fills?(fills: ILeafPaint[], ui: IUI, canvas: ILeaferCanvas): void
+    fillText(ui: IUI, canvas: ILeaferCanvas): void
 
-    fillText?(ui: IUI, canvas: ILeaferCanvas): void
+    stroke(stroke: string, ui: IUI, canvas: ILeaferCanvas): void
+    strokes(strokes: ILeafPaint[], ui: IUI, canvas: ILeaferCanvas): void
 
-    stroke?(stroke: string, ui: IUI, canvas: ILeaferCanvas, renderOptions: IRenderOptions): void
-    strokes?(strokes: ILeafPaint[], ui: IUI, canvas: ILeaferCanvas, renderOptions: IRenderOptions): void
+    strokeText(stroke: string | ILeafPaint[], ui: IUI, canvas: ILeaferCanvas): void
+    drawTextStroke(ui: IUI, canvas: ILeaferCanvas): void
 
-    strokeText?(stroke: string, ui: IUI, canvas: ILeaferCanvas, renderOptions: IRenderOptions): void
-    strokesText?(strokes: ILeafPaint[], ui: IUI, canvas: ILeaferCanvas, renderOptions: IRenderOptions): void
+    shape(ui: IUI, current: ILeaferCanvas, renderOptions: IRenderOptions): ICachedShape
+}
 
-    drawTextStroke?(ui: IUI, canvas: ILeaferCanvas): void
 
-    shape?(ui: IUI, current: ILeaferCanvas, renderOptions: IRenderOptions): ICachedShape
+export interface IPaintImageModule {
+    image(ui: IUI, attrName: string, paint: IImagePaint, boxBounds: IBoundsData, firstUse: boolean): ILeafPaint
+    checkImage(ui: IUI, canvas: ILeaferCanvas, paint: ILeafPaint, allowPaint?: boolean): boolean
+    createPattern(ui: IUI, paint: ILeafPaint, pixelRatio: number): boolean
+    recycleImage(attrName: IPaintAttr, data: IUIData): IBooleanMap
 
-    recycleImage?(attrName: 'fill' | 'stroke', data: IUIData): IBooleanMap
+    createData(leafPaint: ILeafPaint, image: ILeaferImage, paint: IImagePaint, box: IBoundsData): void
+    getPatternData(paint: IImagePaint, box: IBoundsData, image: ILeaferImage): ILeafPaintPatternData
+    fillOrFitMode(data: ILeafPaintPatternData, box: IBoundsData, x: number, y: number, scaleX: number, scaleY: number, rotation: number): void
+    clipMode(data: ILeafPaintPatternData, box: IBoundsData, x: number, y: number, scaleX: number, scaleY: number, rotation: number): void
+    repeatMode(data: ILeafPaintPatternData, box: IBoundsData, width: number, height: number, x: number, y: number, scaleX: number, scaleY: number, rotation: number, around: IAround): void
 }
+
+export interface IPaintGradientModule {
+    linearGradient(paint: IGradientPaint, box: IBoundsData): ILeafPaint
+    radialGradient(paint: IGradientPaint, box: IBoundsData): ILeafPaint
+    conicGradient(paint: IGradientPaint, box: IBoundsData): ILeafPaint
+    getTransform(box: IBoundsData, from: IPointData, to: IPointData, stretch: number, rotate90: boolean): IMatrixData
+}

package/src/module/IPathArrow.ts

@@ -0,0 +1,8 @@
+import { IPathDataArrowMap } from '../type/IType'
+import { IUI } from '../IUI'
+
+
+export interface IPathArrowModule {
+    list: IPathDataArrowMap
+    addArrows(ui: IUI, changeRenderPath?: boolean): void
+}

package/src/module/IState.ts

@@ -0,0 +1,11 @@
+import { ILeaf, IStateStyleType } from '@leafer/interface'
+
+export interface IStateModule {
+    isHover(leaf: ILeaf): boolean
+    isPress(leaf: ILeaf): boolean
+    isFocus(leaf: ILeaf): boolean
+    isDrag(leaf: ILeaf): boolean
+
+    setStyle(leaf: ILeaf, stateType: IStateStyleType, value: boolean): void
+    updateEventStyle(leaf: ILeaf, eventType: string): void
+}

package/src/module/ITextConvert.ts

@@ -1,5 +1,5 @@
 import { ITextData, ITextDrawData } from '../IUI'
 
 export interface ITextConvertModule {
-    getDrawData?(content: string, style: ITextData): ITextDrawData
+    getDrawData(content: string, style: ITextData): ITextDrawData
 }

package/src/type/IType.ts

@@ -1,17 +1,14 @@
-import { IPointData, IPathCommandData, IWindingRule, IBlendMode, IExportFileType } from '@leafer/interface'
+import { IPointData, IPathCommandData, IWindingRule, IBlendMode, IExportFileType, ISizeData, IFourNumber, IAlign, IUnitPointData } from '@leafer/interface'
 import { IColorString, IPaintString } from './IStringType'
 
-export interface IUnitData {
-    type: 'percent' | 'px'
-    value: number
-}
-
 export type IPaint = ISolidPaint | IGradientPaint | IImagePaint
 
 export type IFill = IPaint | IPaint[] | IPaintString
 
 export type IStroke = IPaint | IPaint[] | IPaintString
 
+export type IPaintAttr = 'fill' | 'stroke'
+
 export interface IPaintBase {
     type: IPaintType
     blendMode?: IBlendMode
@@ -50,10 +47,10 @@ export interface IRGBA extends IRGB {
 // ---
 export interface IGradientPaint extends IPaintBase {
     type: IGradientType
-    from?: IPointData
-    to?: IPointData
+    from?: IAlign | IUnitPointData
+    to?: IAlign | IUnitPointData
     stretch?: number
-    stops: IColorStop[]
+    stops: IColorStop[] | IColorString[]
 }
 export interface IColorStop {
     offset: number
@@ -69,7 +66,12 @@ export interface IImagePaint extends IPaintBase {
 
     filters?: IImageFilters
 
+    padding?: IFourNumber
+
+    align?: IAlign
     offset?: IPointData
+
+    size?: number | ISizeData
     scale?: number | IPointData
     rotation?: number
 
@@ -84,14 +86,33 @@ export interface IImageFilters {
     highlights?: number // 高光
     shadows?: number // 阴影
 }
-export type IImagePaintMode = 'cover' | 'fit' | 'strench' | 'clip' | 'repeat'
+export type IImagePaintMode = 'normal' | 'cover' | 'fit' | 'strench' | 'clip' | 'repeat'
 export type IRepeat = boolean | 'x' | 'y'
 
 // 描边
 export type IStrokeAlign = 'inside' | 'outside' | 'center'
-export type IStrokeCap = 'none' | 'round' | 'square' | 'arrow-lines' | 'arrow-equilateral'
+export type IStrokeCap = 'none' | 'round' | 'square'
 export type IStrokeJoin = 'bevel' | 'round' | 'miter'
 
+// 箭头
+export type IArrowType = IPathDataArrow | 'none' | 'angle' | 'angle-side' | 'arrow' | 'triangle' | 'triangle-flip' | 'circle' | 'circle-line' | 'square' | 'square-line' | 'diamond' | 'diamond-line' | 'mark'
+
+export interface IPathDataArrowMap {
+    [name: string]: IPathDataArrow
+}
+
+export interface IPathDataArrow {
+    connect?: IPathDataArrowOffset // 箭头与线条的连接点位置
+    offset?: IPathDataArrowOffset  // 箭头偏移距离，与末端对齐
+    path: IPathCommandData
+}
+
+export interface IPathDataArrowOffset {
+    x?: number // 偏移距离（x轴）
+    bevelJoin?: number // strokeJoin 为 bevel 时增加的偏移距离（x轴）
+    roundJoin?: number // strokeJoin 为 round 时增加的偏移距离（x轴）
+}
+
 // 文本
 export type ITextAlign = 'left' | 'center' | 'right' | 'justify'
 export type IVerticalAlign = 'top' | 'middle' | 'bottom'