@leafer-ui/interface 1.0.0-alpha.1

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023-present, Chao (Leafer) Wan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# @leafer-ui/interface

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@leafer-ui/interface",
+  "version": "1.0.0-alpha.1",
+  "description": "@leafer-ui/interface",
+  "author": "Chao (Leafer) Wan",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "files": ["src"],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/leaferjs/ui.git"
+  },
+  "homepage": "https://github.com/leaferjs/ui/tree/main/packages/interface",
+  "bugs": "https://github.com/leaferjs/ui/issues",
+  "keywords": [
+    "leaferui",
+    "leafer-ui",
+    "leaferjs"
+  ],
+  "dependencies": {
+    "@leafer/interface": "1.0.0-alpha.1"
+  }
+}

package/src/ICachedShape.ts

@@ -0,0 +1,8 @@
+import { ILeaferCanvas, IBoundsData, ICachedLeaf } from '@leafer/interface'
+
+export interface ICachedShape extends ICachedLeaf {
+    worldCanvas?: ILeaferCanvas
+    shapeBounds: IBoundsData
+    scaleX: number
+    scaleY: number
+}

package/src/ICommonAttr.ts

@@ -0,0 +1,140 @@
+import { IPaint, IStrokeAlign, IStrokeCap, IStrokeJoin, IBlurEffect, IFontWeight, ITextCase, ITextDecoration, IShadowEffect, IGrayscaleEffect } from './type/IType'
+import { ILeafStrokePaint, ILeafShadowEffect, ILeafPaint } from './type/IComputedType'
+import { IPaintString, IDashPatternString, IPercent, IShadowString, IStringColor, IBorderWidthString, IBorderRadiusString } from './type/IStringType'
+
+// corner---
+export interface ICornerRadiusAttrData {
+    cornerRadius: number
+    cornerSmoothing: number
+}
+export interface ICornerRadiusInputData {
+    cornerRadius?: number
+    cornerSmoothing?: number
+}
+export interface ICornerRadiusComputedData {
+    cornerRadius?: number
+    cornerSmoothing?: number
+}
+
+// fill---
+export interface IFillAttrData {
+    fill: IPaint | IPaint[] | IPaintString
+}
+export interface IFillInputData {
+    fill?: IPaint | IPaint[] | IPaintString
+}
+export interface IFillComputedData {
+    fill?: IStringColor | ILeafPaint[]
+}
+
+// border 
+export interface IBorderAttrData {
+    borderWidth: number | number[] | IBorderWidthString
+    borderRadius: number | number[] | IBorderRadiusString
+}
+export interface IBorderInputData {
+    borderWidth?: number | number[]
+    borderRadius?: number | number[]
+}
+export interface IBorderComputedData {
+    borderWidth?: number | number[]
+    borderRadius?: number | number[]
+}
+
+// stroke---
+export interface IStrokeAttrData {
+    stroke: IPaint | IPaint[] | IPaintString
+
+    strokeAlign: IStrokeAlign
+    strokeWidth: number
+    strokeCap: IStrokeCap
+    strokeJoin: IStrokeJoin
+    dashPattern: number[] | IDashPatternString
+    dashOffset: number
+    miterLimit: number
+}
+export interface IStrokeInputData {
+    stroke?: IPaint | IPaint[] | IPaintString
+
+    strokeAlign?: IStrokeAlign
+    strokeWidth?: number
+    strokeCap?: IStrokeCap
+    strokeJoin?: IStrokeJoin
+    dashPattern?: number[] | IDashPatternString
+    dashOffset?: number
+    miterLimit?: number
+}
+export interface IStrokeComputedData {
+    stroke?: IStringColor | ILeafStrokePaint[]
+
+    strokeAlign?: IStrokeAlign
+    strokeWidth?: number
+    strokeWidths?: number[]
+    strokeCap?: IStrokeCap
+    strokeJoin?: IStrokeJoin
+    dashPattern?: number[]
+    dashOffset?: number
+    miterLimit?: number
+}
+
+// text---
+export interface ITextStyleAttrData {
+    fontFamily: string
+    fontSize: number
+    fontWeight: IFontWeight
+    italic: boolean
+    textCase: ITextCase
+    textDecoration: ITextDecoration
+    letterSpacing: number | IPercent
+    lineHeight: number | IPercent
+    paragraphIndent: number
+    paragraphSpacing: number
+}
+export interface ITextStyleInputData {
+    fontFamily?: string
+    fontSize?: number
+    fontWeight?: IFontWeight
+    italic?: boolean
+    textCase?: ITextCase
+    textDecoration?: ITextDecoration
+    letterSpacing?: number | IPercent
+    lineHeight?: number | IPercent
+    paragraphIndent?: number
+    paragraphSpacing?: number
+}
+export interface ITextStyleComputedData {
+    fontFamily?: string
+    fontSize?: number
+    fontWeight?: IFontWeight
+    italic?: boolean
+    textCase?: ITextCase
+    textDecoration?: ITextDecoration
+    letterSpacing?: number
+    lineHeight?: number
+
+    paragraphIndent?: number
+    paragraphSpacing?: number
+}
+
+// effect---
+export interface IEffectAttrData {
+    shadow: IShadowEffect | IShadowEffect[] | IShadowString
+    innerShadow: IShadowEffect | IShadowEffect[] | IShadowString
+    blur: number | IBlurEffect
+    backgroundBlur: number | IBlurEffect
+    grayscale: number | IGrayscaleEffect
+}
+export interface IEffectInputData {
+    shadow?: IShadowEffect | IShadowEffect[] | IShadowString
+    innerShadow?: IShadowEffect | IShadowEffect[] | IShadowString
+    blur?: number | IBlurEffect
+    backgroundBlur?: number | IBlurEffect
+    grayscale?: number | IGrayscaleEffect
+}
+export interface IEffectComputedData {
+    shadow?: ILeafShadowEffect[]
+    innerShadow?: ILeafShadowEffect[]
+    blur?: number
+    backgroundBlur?: number
+    grayscale?: number
+}

package/src/IUI.ts

@@ -0,0 +1,208 @@
+import { ILeaf, ILeafComputedData, ILeafData, ILeafInputData, ILeaferCanvas, IRenderOptions, ICanvasDrawPath, IPointData, Path2D, IPathCommandData, IBranch, ILeaferImageConfig, IMatrixData, IBoundsData } from '@leafer/interface'
+
+import { IPathString, IVectorPathString } from './type/IStringType'
+import { IBlendMode, IWindingRule } from './type/IType'
+import { IVectorPath } from './type/IType'
+
+import {
+    IFillAttrData, IFillInputData, IFillComputedData,
+    IBorderComputedData, IBorderInputData,
+    ICornerRadiusAttrData, ICornerRadiusInputData, ICornerRadiusComputedData,
+    IStrokeAttrData, IStrokeComputedData, IStrokeInputData,
+    IEffectAttrData, IEffectInputData, IEffectComputedData,
+    ITextStyleAttrData, ITextStyleInputData, ITextStyleComputedData, IBorderAttrData
+} from './ICommonAttr'
+
+
+// Line
+export interface ILine extends IUI {
+    __: ILineData
+    toPoint: IPointData
+}
+export interface ILineData extends IUIData { }
+export interface ILineInputData extends IUIInputData { }
+
+
+// Rect
+export interface IRect extends IUI {
+    __: IRectData
+}
+export interface IRectData extends IUIData { }
+export interface IRectInputData extends IUIInputData { }
+
+
+// Ellipse
+export interface IEllipse extends IUI {
+    __: IEllipseData
+    startAngle: number
+    endAngle: number
+    innerRadius: number
+}
+interface IEllipseAttrData {
+    startAngle?: number
+    endAngle?: number
+    innerRadius?: number
+}
+export interface IEllipseData extends IEllipseAttrData, IUIData { }
+export interface IEllipseInputData extends IEllipseAttrData, IUIInputData { }
+
+
+// Polygon
+export interface IPolygon extends IUI {
+    __: IPolygonData
+    sides: number
+}
+interface IPolygonAttrData {
+    sides?: number
+}
+export interface IPolygonData extends IPolygonAttrData, IUIData { }
+export interface IPolygonInputData extends IPolygonAttrData, IUIInputData { }
+
+
+// Star
+export interface IStar extends IUI {
+    __: IStarData
+    points: number
+    innerRadius: number
+}
+interface IStarAttrData {
+    points?: number
+    innerRadius?: number
+}
+
+export interface IStarData extends IStarAttrData, IUIData { }
+export interface IStarInputData extends IStarAttrData, IUIInputData { }
+
+// Path
+export interface IPath extends IUI {
+    __: IPathData
+    path: IPathCommandData | IPathString
+    windingRule: IWindingRule
+}
+export interface IPathData extends IUIData {
+    path?: IPathCommandData
+    windingRule?: IWindingRule
+}
+export interface IPathInputData extends IUIInputData {
+    path?: IPathCommandData | IPathString
+    windingRule?: IWindingRule
+}
+
+
+// Vector
+export interface IVector extends IUI {
+    __: IVectorData
+    paths: IVectorPath[] | IVectorPathString
+}
+export interface IVectorData extends IUIData {
+    paths?: IVectorPath[]
+}
+export interface IVectorInputData extends IUIInputData {
+    paths?: IVectorPath[] | IVectorPathString
+}
+
+
+// Text
+export interface IText extends ITextStyleAttrData, IUI {
+    __: ITextData
+    content: string
+}
+interface ITextAttrData {
+    content?: string
+}
+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
+}
+interface IImageAttrData {
+    url?: string
+    thumb?: string
+}
+export interface IImageData extends IImageAttrData, IRectData { }
+export interface IImageInputData extends IImageAttrData, IUIInputData { }
+
+// Frame
+export interface IFrame extends IGroup {
+    __: IFrameData
+    clip: boolean
+    __updateRectBoxBounds(): void
+    __updateRectEventBounds(): void
+    __updateRectRenderBounds(): void
+    __renderRect(canvas: ILeaferCanvas, options: IRenderOptions): void
+    __renderGroup(canvas: ILeaferCanvas, options: IRenderOptions): void
+}
+export interface IFrameData extends IGroupData {
+    clip?: boolean
+}
+export interface IFrameInputData extends IGroupInputData {
+    clip?: boolean
+}
+
+
+// Group
+export interface IGroup extends IBranch, IUI {
+    __: IGroupData
+    root?: IGroup
+    parent?: IGroup
+    children: IUI[]
+    add(child: IUI, index?: number): void
+    remove(child?: IUI): void
+    addAt(child: IUI, index: number): void
+    addAfter(child: IUI, after: IUI): void
+    addBefore(child: IUI, before: IUI): void
+}
+export interface IGroupData extends IUIData { }
+export interface IGroupInputData extends IUIInputData { }
+
+// UI
+export interface IUI extends IFillAttrData, IBorderAttrData, IStrokeAttrData, ICornerRadiusAttrData, IEffectAttrData, ILeaf {
+    __: IUIData
+    root?: IGroup
+    parent?: IGroup
+    readonly worldTransform: IMatrixData
+    readonly relativeTransform: IMatrixData
+    readonly worldBoxBounds: IBoundsData
+    readonly worldRenderBounds: IBoundsData
+    __drawPathByData(drawer: ICanvasDrawPath, data: IPathCommandData): void
+}
+
+export interface IUIData extends IUIComputedData, ILeafData {
+    // 非数据属性, 自动计算的缓存数据
+    __isFills?: boolean
+    __isStrokes?: boolean
+
+    __isTranslucentFill?: boolean  // 半透明的
+    __isTranslucentStroke?: boolean
+
+    __useEffect?: boolean
+
+    // path
+    path?: IPathCommandData
+    windingRule?: IWindingRule
+
+    __renderPath?: IPathCommandData
+    __renderPath2D?: Path2D
+
+    __strokeOuterWidth?: number // boxBounds外面的笔触宽度
+}
+export interface IUIComputedData extends IFillComputedData, IBorderComputedData, IStrokeComputedData, ICornerRadiusComputedData, IEffectComputedData, ILeafComputedData {
+    blendMode?: IBlendMode
+    mask?: boolean
+    locked?: boolean
+}
+
+export interface IUIInputData extends IFillInputData, IBorderInputData, IStrokeInputData, ICornerRadiusInputData, IEffectInputData, ILeafInputData {
+    blendMode?: IBlendMode
+    mask?: boolean
+    locked?: boolean
+}

package/src/index.ts

@@ -0,0 +1,28 @@
+export * from '@leafer/interface'
+
+export {
+    ILine, ILineInputData, ILineData,
+    IRect, IRectInputData, IRectData,
+    IEllipse, IEllipseInputData, IEllipseData,
+    IPolygon, IPolygonInputData, IPolygonData,
+    IStar, IStarInputData, IStarData,
+    IPath, IPathInputData, IPathData,
+    IVector, IVectorInputData, IVectorData,
+    IText, ITextInputData, ITextData,
+    IImage, IImageInputData, IImageData,
+    IFrame, IFrameInputData, IFrameData,
+    IGroup, IGroupInputData, IGroupData,
+    IUI, IUIInputData, IUIData
+} from './IUI'
+export { IBlendMode, IVectorPath, IWindingRule, IShadowEffect, IBlurEffect, IGrayscaleEffect, IStrokeAlign, IStrokeJoin, IStrokeCap, IColor, IPaint, IGradientPaint, IImagePaint, IImagePaintMode, IFontWeight, ITextCase, ITextDecoration } from './type/IType'
+export { IBorderRadiusString, IBorderWidthString, IPaintString, IShadowString, IPercent, IDashPatternString, IPathString, IVectorPathString, IStringColor } from './type/IStringType'
+export { ILeafFill, ILeafPaint, ILeafPaintColor, ILeafStrokePaint, ILeafShadowEffect } from './type/IComputedType'
+
+export { IUIRenderModule, IRectRenderModule, IGroupRenderModule, IFrameRenderModule } from './module/IUIRender'
+export { IUIBoundsModule } from './module/IUIBounds'
+export { IUIHitModule } from './module/IUIHit'
+
+export { IPaintModule } from './module/IPaint'
+export { IEffectModule } from './module/IEffect'
+export { ICachedShape } from './ICachedShape'
+

package/src/module/IEffect.ts

@@ -0,0 +1,12 @@
+import { ILeaferCanvas } from '@leafer/interface'
+
+import { IUI } from '../IUI'
+import { ICachedShape } from '../ICachedShape'
+
+
+export interface IEffectModule {
+    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/IPaint.ts

@@ -0,0 +1,12 @@
+import { ILeaferCanvas } from '@leafer/interface'
+
+import { ILeafPaint } from '../type/IComputedType'
+import { IUI } from '../IUI'
+
+export interface IPaintModule {
+    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
+}

package/src/module/IUIBounds.ts

@@ -0,0 +1,8 @@
+import { ILeafBounds } from '@leafer/interface'
+
+import { IUI } from '../IUI'
+
+export type IUIBoundsModule = IUIBounds & ThisType<IUI>
+
+interface IUIBounds extends ILeafBounds {
+}

package/src/module/IUIHit.ts

@@ -0,0 +1,5 @@
+import { ILeafHit } from '@leafer/interface'
+
+import { IUI } from '../IUI'
+
+export type IUIHitModule = ILeafHit & ThisType<IUI>

package/src/module/IUIRender.ts

@@ -0,0 +1,28 @@
+import { ILeafRender, ILeaferCanvas, IRenderOptions, } from '@leafer/interface'
+
+import { IUI, IRect, IFrame, IGroup } from '../IUI'
+
+export type IUIRenderModule = IUIRender & ThisType<IUI>
+
+interface IUIRender extends ILeafRender {
+    __renderShape?(canvas: ILeaferCanvas, options: IRenderOptions): void
+}
+
+export type IRectRenderModule = IRectRender & ThisType<IRect>
+
+interface IRectRender extends IUIRender {
+
+}
+
+export type IGroupRenderModule = IGroupRender & ThisType<IGroup>
+
+interface IGroupRender extends IUIRender {
+
+}
+
+export type IFrameRenderModule = IFrameRender & ThisType<IFrame>
+
+interface IFrameRender extends IGroupRender {
+
+}
+

package/src/type/IComputedType.ts

@@ -0,0 +1,36 @@
+import { IPointData } from '@leafer/interface'
+
+import { IStringColor } from './IStringType'
+import { IBlendMode, IStrokeAlign, IStrokeJoin, IStrokeCap } from './IType'
+import { IPaintType } from './IType'
+
+export type ILeafPaintColor = IStringColor | CanvasGradient | CanvasPattern
+
+export interface ILeafPaint {
+    type: IPaintType
+    style: ILeafPaintColor
+    scale?: IPointData
+    blendMode?: IBlendMode
+    opacity?: number
+}
+
+export type ILeafFill = ILeafPaint
+
+export interface ILeafStrokePaint extends ILeafPaint {
+    strokeAlign?: IStrokeAlign
+    strokeWidth?: number
+    strokeCap?: IStrokeCap
+    strokeJoin?: IStrokeJoin
+    dashPattern?: number[]
+    miterLimit?: number
+}
+
+export interface ILeafShadowEffect {
+    x: number
+    y: number
+    blur: number
+    spread?: number
+    color: IStringColor
+    blendMode?: IBlendMode
+    showBehind?: boolean // 仅用于 DropShadow
+}

package/src/type/IStringType.ts

@@ -0,0 +1,16 @@
+export type IPercent = string
+
+export type IStringColor = string
+
+export type IBorderRadiusString = string
+export type IBorderWidthString = string
+export type IDashPatternString = string
+export type IVectorPathString = string
+export type IPathString = string
+
+export type IPaintString = ISolidPaintString | IGradientPaintString | IImagePaintString
+export type ISolidPaintString = string
+export type IGradientPaintString = string
+export type IImagePaintString = string
+
+export type IShadowString = string

package/src/type/IType.ts

@@ -0,0 +1,144 @@
+import { IMatrixData, IPointData, IPathCommandData } 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
+
+export interface IPaintBase {
+    type: IPaintType
+    blendMode?: IBlendMode
+    visible?: boolean
+    opacity?: number
+
+}
+
+export type IPaintType =
+    | 'image'
+    | 'solid'
+    | IGradientType
+
+export type IGradientType =
+    | 'gradient-linear'
+    | 'gradient-radial'
+    | 'gradient-angular'
+    | 'gradient-diamond'
+
+// ---   
+export interface ISolidPaint extends IPaintBase {
+    type: 'solid'
+    color: IColor
+}
+
+export type IColor = IStringColor // | RGB | RGBA
+export interface IRGB {
+    r: number
+    g: number
+    b: number
+}
+export interface IRGBA extends IRGB {
+    a: number
+}
+
+// ---
+export interface IGradientPaint extends IPaintBase {
+    type: IGradientType
+    from: IPointData
+    to: IPointData
+    stretch?: number
+    stops: IColorStop[]
+}
+export interface IColorStop {
+    offset: number
+    color: IColor
+}
+
+// ---
+export interface IImagePaint extends IPaintBase {
+    type: "image"
+    url: string
+    mode: IImagePaintMode
+    transform?: IMatrixData
+    scale?: number
+    rotation?: number
+    filters?: IImageFilters
+}
+export interface IImageFilters {
+    exposure?: number // 曝光
+    contrast?: number // 对比度
+    saturation?: number // 饱和度
+    temperature?: number // 色温
+    tint?: number // 色调
+    highlights?: number // 高光
+    shadows?: number // 阴影
+}
+export type IImagePaintMode = 'fill' | 'fit' | 'tile' | 'crop'
+
+// 描边
+export type IStrokeAlign = 'inside' | 'outside' | 'center'
+export type IStrokeCap = 'none' | 'round' | 'square' | 'arrow-lines' | 'arrow-equilateral'
+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 IFontWeightString =
+    | 'thin'
+    | 'extra-light'
+    | 'light'
+    | 'normal'
+    | 'medium'
+    | 'semi-bold'
+    | 'bold'
+    | 'extra-bold'
+    | 'black'
+export type ITextDecoration = 'none' | 'strikethrough' | 'underline'
+
+// 路径
+export interface IVectorPath {
+    rule?: IWindingRule,
+    data: string | IPathCommandData
+}
+export type IWindingRule = 'nonzero' | 'evenodd'
+
+
+// 特效
+export interface IShadowEffect {
+    x: number
+    y: number
+    blur: number
+    spread?: number
+    color: IStringColor | IColor
+    blendMode?: IBlendMode
+    visible?: boolean
+    showBehind?: boolean // 仅用于 DropShadow
+}
+
+export interface IBlurEffect {
+    blur: number
+    visible?: boolean
+}
+
+export interface IGrayscaleEffect {
+    grayscale: number
+    visible?: boolean
+}