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

package/package.json

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

package/src/Arrow.ts

@@ -0,0 +1,27 @@
+import { registerUI, strokeType, dataProcessor } from '@leafer/core'
+
+import { IArrow, IArrowData, IArrowInputData, IArrowType } from '@leafer-ui/interface'
+import { ArrowData } from '@leafer-ui/data'
+
+import { Line } from './Line'
+
+
+@registerUI()
+export class Arrow extends Line implements IArrow {
+
+    public get __tag() { return 'Arrow' }
+
+    @dataProcessor(ArrowData)
+    declare public __: IArrowData
+
+    @strokeType('none')
+    declare public startArrow: IArrowType
+
+    @strokeType('lines')
+    declare public endArrow: IArrowType
+
+    constructor(data?: IArrowInputData) {
+        super(data)
+    }
+
+}

package/src/Box.ts

@@ -1,12 +1,11 @@
-import { ILeaferCanvas, IRenderOptions, IPathDrawer, IBoundsData, IPathCommandData, __Boolean } from '@leafer/interface'
+import { ILeaferCanvas, IRenderOptions, IPathDrawer, IBoundsData, IPathCommandData } from '@leafer/interface'
 import { rewrite, rewriteAble, registerUI, BoundsHelper, dataProcessor, affectRenderBoundsType } from '@leafer/core'
 
 import { IBox, IBoxData, IBoxInputData, IOverflow } from '@leafer-ui/interface'
+import { BoxData } from '@leafer-ui/data'
 
 import { Group } from './Group'
 import { Rect } from './Rect'
-import { BoxData } from '@leafer-ui/data'
-
 
 const rect = Rect.prototype
 const group = Group.prototype
@@ -20,10 +19,10 @@ export class Box extends Group implements IBox {
     public get __tag() { return 'Box' }
 
     @dataProcessor(BoxData)
-    public __: IBoxData
+    declare public __: IBoxData
 
     @affectRenderBoundsType('show')
-    public overflow: IOverflow
+    declare public overflow: IOverflow
 
     constructor(data?: IBoxInputData) {
         super(data)
@@ -46,7 +45,15 @@ export class Box extends Group implements IBox {
 
 
     @rewrite(rect.__updateBoxBounds)
-    public __updateBoxBounds(): void { }
+    public __updateRectBoxBounds(): void { }
+
+    public __updateBoxBounds(): void {
+        if (this.__.__autoBounds && this.children.length) {
+            super.__updateBoxBounds()
+        } else {
+            this.__updateRectBoxBounds()
+        }
+    }
 
     @rewrite(rect.__updateStrokeBounds)
     public __updateStrokeBounds(): void { }

package/src/Canvas.ts

@@ -1,4 +1,4 @@
-import { ILeaferCanvas, ILeaferCanvasConfig, __String, __Number, IRenderOptions, IPointData, ICanvasContext2D, IScreenSizeData, ISizeData, IHitType } from '@leafer/interface'
+import { ILeaferCanvas, ILeaferCanvasConfig, INumber, IRenderOptions, IPointData, ICanvasContext2D, IScreenSizeData, ISizeData, IHitType } from '@leafer/interface'
 import { Creator, Matrix, Platform, dataProcessor, registerUI, hitType } from '@leafer/core'
 
 import { ICanvas, ICanvasData, ICanvasInputData, IUI } from '@leafer-ui/interface'
@@ -14,22 +14,22 @@ export class Canvas extends Rect implements ICanvas {
     public get __tag() { return 'Canvas' }
 
     @dataProcessor(ImageData)
-    public __: ICanvasData
+    declare public __: ICanvasData
 
     @resizeType(100)
-    public width: __Number
+    declare public width: INumber
 
     @resizeType(100)
-    public height: __Number
+    declare public height: INumber
 
     @resizeType(Platform.devicePixelRatio)
-    public pixelRatio: __Number
+    public pixelRatio: INumber
 
     @resizeType(true)
     public smooth: boolean
 
     @hitType('all')
-    public hitFill: IHitType
+    declare public hitFill: IHitType
 
     public canvas: ILeaferCanvas
 
@@ -43,18 +43,17 @@ export class Canvas extends Rect implements ICanvas {
     }
 
     public draw(ui: IUI, offset?: IPointData, scale?: number | IPointData, rotation?: number): void {
-        ui.__layout.checkUpdate()
+        ui.__layout.update()
 
-        const matrix = new Matrix(ui.__world)
-        matrix.invert()
+        const matrix = new Matrix(ui.__world).invert()
 
         const m = new Matrix()
         if (offset) m.translate(offset.x, offset.y)
         if (scale) typeof scale === 'number' ? m.scale(scale) : m.scale(scale.x, scale.y)
         if (rotation) m.rotate(rotation)
-        matrix.preMultiply(m)
+        matrix.multiplyParent(m)
 
-        ui.__render(this.canvas, { matrix })
+        ui.__render(this.canvas, { matrix: matrix.withScale() })
         this.paint()
     }
 

package/src/Ellipse.ts

@@ -1,5 +1,5 @@
-import { __Number } from '@leafer/interface'
-import { PathCommandDataHelper, dataProcessor, pathType, registerUI } from '@leafer/core'
+import { INumber } from '@leafer/interface'
+import { PathCommandDataHelper, Platform, dataProcessor, pathType, registerUI } from '@leafer/core'
 
 import { IEllipse, IEllipseInputData, IEllipseData } from '@leafer-ui/interface'
 import { EllipseData } from '@leafer-ui/data'
@@ -15,16 +15,16 @@ export class Ellipse extends UI implements IEllipse {
     public get __tag() { return 'Ellipse' }
 
     @dataProcessor(EllipseData)
-    public __: IEllipseData
+    declare public __: IEllipseData
 
     @pathType(0)
-    public innerRadius: __Number
+    public innerRadius: INumber
 
     @pathType(0)
-    public startAngle: __Number
+    public startAngle: INumber
 
     @pathType(0)
-    public endAngle: __Number
+    public endAngle: INumber
 
     constructor(data?: IEllipseInputData) {
         super(data)
@@ -48,9 +48,12 @@ export class Ellipse extends UI implements IEllipse {
                     ellipse(path, rx, ry, rx * innerRadius, ry * innerRadius)
                     moveTo(path, width, ry)
                 }
-                ellipse(path, rx, ry, rx, ry, 0, 0, 360, true)
+                ellipse(path, rx, ry, rx, ry, 0, 360, 0, true)
             }
 
+            // fix node
+            if (Platform.ellipseToCurve) this.__.path = this.getPath(true)
+
         } else {
 
             if (startAngle || endAngle) {

package/src/Frame.ts

@@ -1,7 +1,6 @@
-import { __Boolean } from '@leafer/interface'
-import { dataProcessor, registerUI, affectRenderBoundsType } from '@leafer/core'
+import { dataProcessor, registerUI, affectRenderBoundsType, surfaceType } from '@leafer/core'
 
-import { IFrame, IFrameData, IFrameInputData, IOverflow } from '@leafer-ui/interface'
+import { IFrame, IFrameData, IFrameInputData, IFill, IOverflow } from '@leafer-ui/interface'
 import { FrameData } from '@leafer-ui/data'
 
 import { Box } from './Box'
@@ -13,13 +12,16 @@ export class Frame extends Box implements IFrame {
     public get __tag() { return 'Frame' }
 
     @dataProcessor(FrameData)
-    public __: IFrameData
+    declare public __: IFrameData
+
+    @surfaceType('#FFFFFF')
+    declare public fill: IFill
 
     @affectRenderBoundsType('hide')
-    public overflow: IOverflow
+    declare public overflow: IOverflow
 
     constructor(data?: IFrameInputData) {
         super(data)
-        if (!this.__.fill) this.__.fill = '#FFFFFF'
+        this.isFrame = true
     }
 }

package/src/Group.ts

@@ -1,6 +1,7 @@
-import { Branch, useModule, dataProcessor, registerUI } from '@leafer/core'
+import { IPickOptions, IPickResult, IPointData } from '@leafer/interface'
+import { Branch, useModule, dataProcessor, registerUI, UICreator } from '@leafer/core'
 
-import { IGroup, IGroupData, IGroupInputData, IUI } from '@leafer-ui/interface'
+import { IGroup, IGroupData, IGroupInputData, IUI, IUIInputData } from '@leafer-ui/interface'
 import { GroupData } from '@leafer-ui/data'
 
 import { UI } from './UI'
@@ -13,27 +14,62 @@ export class Group extends UI implements IGroup {
     public get __tag() { return 'Group' }
 
     @dataProcessor(GroupData)
-    public __: IGroupData
+    declare 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)
-    }
+    declare public children: IUI[]
 
     constructor(data?: IGroupInputData) {
         super(data)
+        this.__setBranch()
+    }
+
+    public __setBranch(): void {
         this.isBranch = true
-        this.children = []
+        if (!this.children) this.children = []
+    }
+
+    // data
+
+    public set(data: IUIInputData): void {
+        if (data.children) {
+            const { children } = data
+            delete data.children
+
+            if (!this.children) {
+                this.__setBranch()
+            } else {
+                this.removeAll(true)
+            }
+
+            super.set(data)
+
+            let child: IUI
+            children.forEach(childData => {
+                child = UICreator.get(childData.tag, childData) as IUI
+                this.add(child)
+            })
+
+            data.children = children
+
+        } else {
+            super.set(data)
+        }
     }
 
+    public toJSON(): IUIInputData {
+        const data = super.toJSON()
+        data.children = this.children.map(child => child.toJSON())
+        return data
+    }
+
+
+    // hit rewrite
+
+    public pick(_hitPoint: IPointData, _options?: IPickOptions): IPickResult { return undefined }
+
+
+    // add
+
     public addAt(child: IUI, index: number): void {
         this.add(child, index)
     }
@@ -50,8 +86,12 @@ export class Group extends UI implements IGroup {
 
     public add(_child: IUI, _index?: number): void { }
 
-    public remove(_child?: IUI): void { }
+    public addMany(..._children: IUI[]): void { }
+
+    public remove(_child?: IUI, _destroy?: boolean): void { }
+
+    public removeAll(_destroy?: boolean): void { }
 
-    public removeAll(): void { }
+    public clear(): void { }
 
 }

package/src/Image.ts

@@ -1,7 +1,7 @@
-import { ILeaferImage, __String } from '@leafer/interface'
+import { ILeaferImage, IString } from '@leafer/interface'
 import { ImageEvent, boundsType, dataProcessor, registerUI } from '@leafer/core'
 
-import { IImage, IImageInputData, IImageData, IImagePaint } from '@leafer-ui/interface'
+import { IImage, IImageInputData, IImageData } from '@leafer-ui/interface'
 import { ImageData } from '@leafer-ui/data'
 
 import { Rect } from './Rect'
@@ -13,10 +13,10 @@ export class Image extends Rect implements IImage {
     public get __tag() { return 'Image' }
 
     @dataProcessor(ImageData)
-    public __: IImageData
+    declare public __: IImageData
 
     @boundsType('')
-    public url: __String
+    public url: IString
 
     public get ready(): boolean { return this.image ? this.image.ready : false }
 
@@ -24,29 +24,9 @@ export class Image extends Rect implements IImage {
 
     constructor(data?: IImageInputData) {
         super(data)
-    }
-
-    public __updateBoxBounds(): void {
-
-        let update: boolean
-
-        const { url } = this
-        const fill = this.fill as IImagePaint
-
-        if (fill) {
-            if (fill.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)
-        }
-
-        super.__updateBoxBounds()
-
+        this.on(ImageEvent.LOADED, (e: ImageEvent) => {
+            if (e.attrName === 'fill' && e.attrValue.url === this.url) this.image = e.image
+        })
     }
 
     public destroy(): void {