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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer-ui/display",
-  "version": "1.0.0-alpha.21",
+  "version": "1.0.0-alpha.23",
   "description": "@leafer-ui/display",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
@@ -19,13 +19,13 @@
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/core": "1.0.0-alpha.21",
-    "@leafer-ui/data": "1.0.0-alpha.21",
-    "@leafer-ui/display-module": "1.0.0-alpha.21",
-    "@leafer-ui/decorator": "1.0.0-alpha.21"
+    "@leafer/core": "1.0.0-alpha.23",
+    "@leafer-ui/data": "1.0.0-alpha.23",
+    "@leafer-ui/display-module": "1.0.0-alpha.23",
+    "@leafer-ui/decorator": "1.0.0-alpha.23"
   },
   "devDependencies": {
-    "@leafer/interface": "1.0.0-alpha.21",
-    "@leafer-ui/interface": "1.0.0-alpha.21"
+    "@leafer/interface": "1.0.0-alpha.23",
+    "@leafer-ui/interface": "1.0.0-alpha.23"
   }
 }

package/src/Ellipse.ts

@@ -7,7 +7,6 @@ import { EllipseData } from '@leafer-ui/data'
 import { UI } from './UI'
 
 
-
 const { PI } = Math
 const { begin, moveTo, close, ellipse } = PathCreator
 
@@ -15,6 +14,8 @@ const { begin, moveTo, close, ellipse } = PathCreator
 @registerUI()
 export class Ellipse extends UI implements IEllipse {
 
+    public get __tag() { return 'Ellipse' }
+
     @dataProcessor(EllipseData)
     public __: IEllipseData
 
@@ -41,12 +42,14 @@ export class Ellipse extends UI implements IEllipse {
         if (innerRadius) {
 
             if (startAngle || endAngle) {
-                ellipse(rx, ry, rx * (1 - innerRadius), ry * (1 - innerRadius), 0, startAngle * OneRadian, endAngle * OneRadian, false)
+                if (innerRadius < 1) ellipse(rx, ry, rx * innerRadius, ry * innerRadius, 0, startAngle * OneRadian, endAngle * OneRadian, false)
                 ellipse(rx, ry, rx, ry, 0, endAngle * OneRadian, startAngle * OneRadian, true)
-                close()
+                if (innerRadius < 1) close()
             } else {
-                ellipse(rx, ry, rx * (1 - innerRadius), ry * (1 - innerRadius), 0, 0, 2 * PI, false)
-                moveTo(width, ry)
+                if (innerRadius < 1) {
+                    ellipse(rx, ry, rx * innerRadius, ry * innerRadius, 0, 0, 2 * PI, false)
+                    moveTo(width, ry)
+                }
                 ellipse(rx, ry, rx, ry, 0, 0, 2 * PI, true)
             }
 

package/src/Frame.ts

@@ -20,6 +20,8 @@ const { copy, add } = BoundsHelper
 @registerUI()
 export class Frame extends Group implements IFrame {
 
+    public get __tag() { return 'Frame' }
+
     @dataProcessor(FrameData)
     public __: IFrameData
 
@@ -45,12 +47,12 @@ export class Frame extends Group implements IFrame {
         }
     }
 
-    public __updateEventBounds(): void {
-        this.__updateRectEventBounds()
+    public __updateStrokeBounds(): void {
+        this.__updateRectStrokeBounds()
         if (!this.__.clip) {
-            const { eventBounds } = this.__layout
+            const { strokeBounds: eventBounds } = this.__layout
             copy(bounds, eventBounds)
-            super.__updateEventBounds()
+            super.__updateStrokeBounds()
             add(eventBounds, bounds)
         }
     }
@@ -68,8 +70,8 @@ export class Frame extends Group implements IFrame {
     @rewrite(rect.__updateBoxBounds)
     public __updateRectBoxBounds(): void { }
 
-    @rewrite(rect.__updateEventBounds)
-    public __updateRectEventBounds(): void { }
+    @rewrite(rect.__updateStrokeBounds)
+    public __updateRectStrokeBounds(): void { }
 
     @rewrite(rect.__updateRenderBounds)
     public __updateRectRenderBounds(): void { }

package/src/Group.ts

@@ -10,11 +10,24 @@ import { UI } from './UI'
 @registerUI()
 export class Group extends UI implements IGroup {
 
+    public get __tag() { return 'Group' }
+
     @dataProcessor(GroupData)
     public __: IGroupData
 
     public children: IUI[]
 
+    public set mask(child: IUI) {
+        if (this.__hasMask) this.__removeMask()
+        if (child) {
+            child.isMask = true
+            this.addAt(child, 0)
+        }
+    }
+    public get mask(): IUI {
+        return this.children.find(item => item.isMask)
+    }
+
     constructor(data?: IGroupInputData) {
         super(data)
         this.__isBranch = true
@@ -39,4 +52,20 @@ export class Group extends UI implements IGroup {
 
     public remove(_child?: IUI): void { }
 
+    protected __removeMask(child?: IUI): void {
+        if (child) {
+            child.isMask = false
+            this.remove(child)
+        } else {
+            const { children } = this
+            for (let i = 0, len = children.length; i < len; i++) {
+                child = children[i]
+                if (child.isMask) {
+                    child.isMask = false
+                    this.remove(child)
+                    len--, i--
+                }
+            }
+        }
+    }
 }

package/src/Image.ts

@@ -1,7 +1,7 @@
 import { ILeaferImage, __String } from '@leafer/interface'
-import { boundsType, dataProcessor, registerUI, Creator } from '@leafer/core'
+import { ImageEvent, boundsType, dataProcessor, registerUI } from '@leafer/core'
 
-import { IImage, IImageInputData, IImageData } from '@leafer-ui/interface'
+import { IImage, IImageInputData, IImageData, IImagePaint } from '@leafer-ui/interface'
 import { ImageData } from '@leafer-ui/data'
 
 import { Rect } from './Rect'
@@ -10,27 +10,41 @@ import { Rect } from './Rect'
 @registerUI()
 export class Image extends Rect implements IImage {
 
+    public get __tag() { return 'Image' }
+
     @dataProcessor(ImageData)
     public __: IImageData
 
     @boundsType('')
     public url: __String
 
-    @boundsType('')
-    public thumb: __String
+    public get ready(): boolean { return this.image?.ready }
 
-    public __image: ILeaferImage
+    public image: ILeaferImage
 
     constructor(data?: IImageInputData) {
         super(data)
     }
 
     public __updateBoxBounds(): void {
-        this.__image = Creator.image(this)
-    }
 
+        let update: boolean
+
+        const { url } = this
+        const fills = this.fill as IImagePaint[]
+        if (fills) {
+            if (fills[0].url !== url) update = true
+        } else {
+            if (url) update = true
+        }
+
+        if (update) {
+            if (this.image) this.image = null
+            this.fill = { type: 'image', mode: 'strench', url }
+            this.once(ImageEvent.LOADED, (e) => this.image = e.image)
+        }
 
-    public drawFill(): void {
+        super.__updateBoxBounds()
 
     }
 

package/src/Line.ts

@@ -1,7 +1,7 @@
 import { IPointData, ITwoPointBoundsData, __Number } from '@leafer/interface'
-import { PathCreator, PointHelper, TwoPointBoundsHelper, boundsType, dataProcessor, registerUI } from '@leafer/core'
+import { PathCreator, PointHelper, TwoPointBoundsHelper, boundsType, affectEventBoundsType, dataProcessor, registerUI } from '@leafer/core'
 
-import { ILine, ILineData, ILineInputData } from '@leafer-ui/interface'
+import { ILine, ILineData, ILineInputData, IStrokeAlign } from '@leafer-ui/interface'
 import { LineData } from '@leafer-ui/data'
 
 import { UI } from './UI'
@@ -17,12 +17,17 @@ const pointBounds = {} as ITwoPointBoundsData
 @registerUI()
 export class Line extends UI implements ILine {
 
+    public get __tag() { return 'Line' }
+
     @dataProcessor(LineData)
     public __: ILineData
 
     @boundsType()
     public rotation: __Number
 
+    @affectEventBoundsType('center')
+    public strokeAlign: IStrokeAlign
+
     protected __toPoint: IPointData
 
     public get toPoint(): IPointData {

package/src/Path.ts

@@ -1,21 +1,19 @@
-import { ITwoPointBoundsData, ILeaferCanvas, IPathCommandData, IWindingRule } from '@leafer/interface'
-import { PathHelper, TwoPointBoundsHelper, dataProcessor, pathType, registerUI } from '@leafer/core'
+import { ILeaferCanvas, IPathCommandData, IWindingRule } from '@leafer/interface'
+import { PathHelper, dataProcessor, pathType, affectEventBoundsType, registerUI } from '@leafer/core'
 
-import { IPath, IPathData, IPathInputData, IPathString } from '@leafer-ui/interface'
+import { IPath, IPathData, IPathInputData, IPathString, IStrokeAlign } from '@leafer-ui/interface'
 import { PathData } from '@leafer-ui/data'
 
 import { UI } from './UI'
 
 
-const { toTwoPointBounds } = PathHelper
-const { toBounds } = TwoPointBoundsHelper
-
-const pointBounds = {} as ITwoPointBoundsData
-
+const { toBounds } = PathHelper
 
 @registerUI()
 export class Path extends UI implements IPath {
 
+    public get __tag() { return 'Path' }
+
     @dataProcessor(PathData)
     public __: IPathData
 
@@ -25,6 +23,9 @@ export class Path extends UI implements IPath {
     @pathType()
     public windingRule: IWindingRule
 
+    @affectEventBoundsType('center')
+    public strokeAlign: IStrokeAlign
+
     constructor(data?: IPathInputData) {
         super(data)
     }
@@ -35,8 +36,7 @@ export class Path extends UI implements IPath {
     }
 
     public __updateBoxBounds(): void {
-        toTwoPointBounds(this.__.path, pointBounds)
-        toBounds(pointBounds, this.__layout.boxBounds)
+        toBounds(this.__.path, this.__layout.boxBounds)
     }
 
 }

package/src/Polygon.ts

@@ -14,6 +14,8 @@ const { begin, moveTo, lineTo, close } = PathCreator
 @registerUI()
 export class Polygon extends UI implements IPolygon {
 
+    public get __tag() { return 'Polygon' }
+
     @dataProcessor(PolygonData)
     public __: IPolygonData
 

package/src/Rect.ts

@@ -12,6 +12,8 @@ import { UI } from './UI'
 @registerUI()
 export class Rect extends UI implements IRect {
 
+    public get __tag() { return 'Rect' }
+
     @dataProcessor(RectData)
     public __: IRectData
 

package/src/Star.ts

@@ -14,13 +14,15 @@ const { begin, moveTo, lineTo, close } = PathCreator
 @registerUI()
 export class Star extends UI implements IStar {
 
+    public get __tag() { return 'Star' }
+
     @dataProcessor(StarData)
     public __: IStarData
 
     @pathType(5)
     public points: __Number
 
-    @pathType(0.38)
+    @pathType(0.382)
     public innerRadius: __Number
 
     constructor(data?: IStarInputData) {

package/src/Text.ts

@@ -1,20 +1,29 @@
 import { IPathDrawer, IPathCommandData, __Boolean, __Number, __String } from '@leafer/interface'
-import { Platform, boundsType, dataProcessor, registerUI, useModule } from '@leafer/core'
+import { boundsType, dataProcessor, registerUI, surfaceType, useModule } from '@leafer/core'
 
-import { IText, IFontWeight, ITextCase, ITextDecoration, IPercent, ITextData, ITextInputData } from '@leafer-ui/interface'
+import { IText, IFontWeight, ITextCase, ITextDecoration, IPercent, ITextData, ITextInputData, ITextAlign, IVerticalAlign, ITextDrawData } from '@leafer-ui/interface'
 import { TextData } from '@leafer-ui/data'
 import { TextRender } from '@leafer-ui/display-module'
+import { TextConvert } from '@leafer-ui/text'
 
 import { UI } from './UI'
 
-
 @useModule(TextRender)
 @registerUI()
 export class Text extends UI implements IText {
 
+    public get __tag() { return 'Text' }
+
     @dataProcessor(TextData)
     public __: ITextData
 
+    // size
+    @boundsType(undefined)
+    public width: __Number
+
+    @boundsType(undefined)
+    public height: __Number
+
     @boundsType('')
     public content: __String
 
@@ -33,13 +42,13 @@ export class Text extends UI implements IText {
     @boundsType('normal')
     public textCase: ITextCase
 
-    @boundsType('normal')
+    @boundsType('none')
     public textDecoration: ITextDecoration
 
     @boundsType()
     public letterSpacing: __Number | IPercent
 
-    @boundsType()
+    @boundsType(1)
     public lineHeight: __Number | IPercent
 
     @boundsType()
@@ -48,6 +57,21 @@ export class Text extends UI implements IText {
     @boundsType()
     public paragraphSpacing: __Number
 
+    @surfaceType('left')
+    public textAlign: ITextAlign
+
+    @surfaceType('top')
+    public verticalAlign: IVerticalAlign
+
+    public get realWidth(): number { return this.textDrawData.width }
+
+    public get realHeight(): number { return this.textDrawData.height }
+
+    public get textDrawData(): ITextDrawData {
+        this.__updateTextDrawData()
+        return this.__.__textDrawData
+    }
+
     constructor(data?: ITextInputData) {
         super(data)
     }
@@ -57,18 +81,21 @@ export class Text extends UI implements IText {
         drawer.rect(0, 0, width, height)
     }
 
+    public __updateTextDrawData(): void {
+        this.__.__textDrawData || (this.__.__textDrawData = TextConvert.getDrawData(this.__.content, this.__))
+    }
+
     public __updateBoxBounds(): void {
-        const { fontFamily, fontSize, fontWeight, italic, textCase, lineHeight } = this.__
-        const b = this.__layout.boxBounds
 
-        this.__.__font = Platform.canvas.font = `${italic ? 'italic' : ''} ${textCase === 'small-caps' ? 'small-caps' : 'normal'} ${fontWeight ? fontWeight : 'normal'} ${fontSize}px/${lineHeight ? lineHeight : fontSize}px ${fontFamily}`
-        const width = Platform.canvas.measureText(this.content).width
-        const height = fontSize
+        this.__updateTextDrawData()
+
+        const { width, height, __textDrawData: data } = this.__
+        const b = this.__layout.boxBounds
 
-        b.x = 0
-        b.y = -fontSize * 0.75
-        b.width = width
-        b.height = height
+        b.x = width ? 0 : data.x || 0
+        b.y = height ? 0 : data.y || 0
+        b.width = width ? Math.max(width, data.width) : data.width
+        b.height = height ? Math.max(height, data.height) : data.height
     }
 
 }

package/src/UI.ts

@@ -1,12 +1,14 @@
-import { ILeaferCanvas, IPathDrawer, IPathCommandData, IMatrixData, IBoundsData, IHitType, __Number, __Boolean, __String } from '@leafer/interface'
-import { Leaf, PathHelper, affectEventBoundsType, surfaceType, dataType, positionType, boundsType, pathType, scaleType, rotationType, opacityType, sortType, dataProcessor, useModule, rewrite, rewriteAble } from '@leafer/core'
+import { ILeaferCanvas, IPathDrawer, IPathCommandData, IHitType, __Number, __Boolean, __String } from '@leafer/interface'
+import { Leaf, PathHelper, affectEventBoundsType, surfaceType, dataType, positionType, boundsType, pathType, scaleType, rotationType, opacityType, sortType, maskType, dataProcessor, useModule, rewrite, rewriteAble, UICreator } from '@leafer/core'
 
-import { IUI, IShadowEffect, IBlurEffect, IPaint, IStrokeAlign, IStrokeJoin, IStrokeCap, IBlendMode, IPaintString, IDashPatternString, IShadowString, IGrayscaleEffect, IUIData, IGroup, IStrokeWidthString, ICornerRadiusString } from '@leafer-ui/interface'
+import { IUI, IShadowEffect, IBlurEffect, IPaint, IStrokeAlign, IStrokeJoin, IStrokeCap, IBlendMode, IPaintString, IDashPatternString, IShadowString, IGrayscaleEffect, IUIData, IGroup, IStrokeWidthString, ICornerRadiusString, IUITagInputData, IUIInputData } from '@leafer-ui/interface'
 import { effectType } from '@leafer-ui/decorator'
 
 import { UIData } from '@leafer-ui/data'
 import { UIBounds, UIHit, UIRender } from '@leafer-ui/display-module'
 
+import { Paint } from '@leafer-ui/external'
+
 
 @useModule(UIBounds)
 @useModule(UIHit)
@@ -18,7 +20,6 @@ export class UI extends Leaf implements IUI {
     @dataProcessor(UIData)
     public __: IUIData
 
-    public root?: IGroup
     public parent?: IGroup
 
     // ---
@@ -35,15 +36,24 @@ export class UI extends Leaf implements IUI {
 
 
     // layer
+    @surfaceType() // "pass-through"
+    public blendMode: IBlendMode
+
     @opacityType(1)
     public opacity: __Number
 
     @opacityType(true)
     public visible: __Boolean
 
+    @maskType(false)
+    public isMask: __Boolean
+
     @sortType(0)
     public zIndex: __Number
 
+    @dataType()
+    public locked: __Boolean
+
 
     // position
     @positionType(0)
@@ -96,17 +106,6 @@ export class UI extends Leaf implements IUI {
     // ---
 
 
-    // layer
-
-    @surfaceType() // "pass-through"
-    public blendMode: IBlendMode
-
-    @boundsType()
-    public mask: __Boolean
-
-    @dataType()
-    public locked: __Boolean
-
     // fill
 
     @surfaceType()
@@ -117,7 +116,7 @@ export class UI extends Leaf implements IUI {
     @affectEventBoundsType()
     public stroke: IPaint | IPaint[] | IPaintString
 
-    @affectEventBoundsType('center')
+    @affectEventBoundsType('inside')
     public strokeAlign: IStrokeAlign
 
     @affectEventBoundsType(1)
@@ -165,18 +164,26 @@ export class UI extends Leaf implements IUI {
     public grayscale: __Number | IGrayscaleEffect
 
 
-    // now transform
-
-    public get worldTransform(): IMatrixData { return this.__layout.getTransform('world') }
-
-    public get relativeTransform(): IMatrixData { return this.__layout.getTransform('relative') }
+    constructor(data?: IUIInputData) {
+        super(data)
+    }
 
-    // now bounds
 
-    public get worldBoxBounds(): IBoundsData { return this.__layout.getBounds('world', 'box') }
+    public set(data: IUITagInputData): void {
+        Object.assign(this, data)
+    }
 
-    public get worldRenderBounds(): IBoundsData { return this.__layout.getBounds('world', 'render') }
+    public get(): IUITagInputData {
+        return this.__.__getInputData()
+    }
 
+    public __onUpdateSize(): void {
+        if (this.__.__input) {
+            const { fill, stroke } = this.__.__input
+            if (fill) Paint.computeFill(this)
+            if (stroke) Paint.computeStroke(this)
+        }
+    }
 
     public __updateRenderPath(): void {
         if (this.__.path) {
@@ -198,4 +205,8 @@ export class UI extends Leaf implements IUI {
     @rewrite(PathHelper.drawData)
     public __drawPathByData(_drawer: IPathDrawer, _data: IPathCommandData): void { }
 
+    static one(data: IUITagInputData, x?: number, y?: number, width?: number, height?: number): IUI {
+        return UICreator.get(data.tag || this.prototype.__tag, data, x, y, width, height) as IUI
+    }
+
 }

package/src/Vector.ts

@@ -9,6 +9,8 @@ import { Group } from './Group'
 @registerUI()
 export class Vector extends Group implements IVector {
 
+    public get __tag() { return 'Vector' }
+
     @dataProcessor(VectorData)
     public __: IVectorData