@leafer-ui/display 1.0.0-rc.2 → 1.0.0-rc.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer-ui/display",
-  "version": "1.0.0-rc.2",
+  "version": "1.0.0-rc.20",
   "description": "@leafer-ui/display",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
@@ -22,14 +22,14 @@
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/core": "1.0.0-rc.2",
-    "@leafer-ui/data": "1.0.0-rc.2",
-    "@leafer-ui/display-module": "1.0.0-rc.2",
-    "@leafer-ui/decorator": "1.0.0-rc.2",
-    "@leafer-ui/external": "1.0.0-rc.2"
+    "@leafer/core": "1.0.0-rc.20",
+    "@leafer-ui/data": "1.0.0-rc.20",
+    "@leafer-ui/display-module": "1.0.0-rc.20",
+    "@leafer-ui/decorator": "1.0.0-rc.20",
+    "@leafer-ui/external": "1.0.0-rc.20"
   },
   "devDependencies": {
-    "@leafer/interface": "1.0.0-rc.2",
-    "@leafer-ui/interface": "1.0.0-rc.2"
+    "@leafer/interface": "1.0.0-rc.20",
+    "@leafer-ui/interface": "1.0.0-rc.20"
   }
 }

package/src/Box.ts

@@ -1,12 +1,11 @@
-import { ILeaferCanvas, IRenderOptions, IPathDrawer, IBoundsData, IPathCommandData, __Boolean } from '@leafer/interface'
+import { ILeaferCanvas, IRenderOptions, IBoundsData } 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
@@ -19,17 +18,16 @@ export class Box extends Group implements IBox {
 
     public get __tag() { return 'Box' }
 
+    public get isBranchLeaf(): boolean { return true }
+
     @dataProcessor(BoxData)
     declare public __: IBoxData
 
     @affectRenderBoundsType('show')
     declare public overflow: IOverflow
 
-    public get resizeable(): boolean { return true }
-
     constructor(data?: IBoxInputData) {
         super(data)
-        this.isBranchLeaf = true
         this.__layout.renderChanged || this.__layout.renderChange()
     }
 
@@ -40,15 +38,29 @@ export class Box extends Group implements IBox {
     public __updateRectRenderSpread(): number { return 0 }
 
     public __updateRenderSpread(): number {
-        let width = this.__updateRectRenderSpread() || super.__updateRenderSpread()
-        this.__.__drawAfterFill = this.__.overflow === 'hide'
-        if (!width) width = this.__.__drawAfterFill ? 0 : 1
-        return width
+        const width = this.__updateRectRenderSpread()
+        const hide = this.__.__drawAfterFill = this.__.overflow === 'hide'
+        return (width || hide) ? width : -1
     }
 
 
     @rewrite(rect.__updateBoxBounds)
-    public __updateBoxBounds(): void { }
+    public __updateRectBoxBounds(): void { }
+
+    public __updateBoxBounds(): void {
+        const data = this.__
+        if (data.__autoSide && this.children.length) {
+            if (this.leafer) this.leafer.layouter.addExtra(this)
+            super.__updateBoxBounds()
+            if (!data.__autoSize) {
+                const b = this.__layout.boxBounds
+                if (!data.__autoWidth) b.x = 0, b.width = data.width
+                if (!data.__autoHeight) b.y = 0, b.height = data.height
+            }
+        } else {
+            this.__updateRectBoxBounds()
+        }
+    }
 
     @rewrite(rect.__updateStrokeBounds)
     public __updateStrokeBounds(): void { }
@@ -63,7 +75,6 @@ export class Box extends Group implements IBox {
         }
     }
 
-
     @rewrite(rect.__updateRenderBounds)
     public __updateRectRenderBounds(): void { }
 
@@ -76,10 +87,6 @@ export class Box extends Group implements IBox {
     }
 
 
-    @rewrite(rect.__drawPathByData)
-    public __drawPathByData(_drawer: IPathDrawer, _data: IPathCommandData): void { }
-
-
     @rewrite(rect.__render)
     public __renderRect(_canvas: ILeaferCanvas, _options: IRenderOptions): void { }
 

package/src/Canvas.ts

@@ -1,11 +1,11 @@
-import { ILeaferCanvas, ILeaferCanvasConfig, __String, __Number, IRenderOptions, IPointData, ICanvasContext2D, IScreenSizeData, ISizeData, IHitType } from '@leafer/interface'
+import { ILeaferCanvas, ILeaferCanvasConfig, INumber, IRenderOptions, IPointData, ICanvasContext2D, ICanvasContext2DSettings, 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'
-import { ImageData } from '@leafer-ui/data'
+import { CanvasData } from '@leafer-ui/data'
+import { resizeType } from '@leafer-ui/decorator'
 
 import { Rect } from './Rect'
-import { resizeType } from '@leafer-ui/decorator'
 
 
 @registerUI()
@@ -13,21 +13,24 @@ export class Canvas extends Rect implements ICanvas {
 
     public get __tag() { return 'Canvas' }
 
-    @dataProcessor(ImageData)
+    @dataProcessor(CanvasData)
     declare public __: ICanvasData
 
     @resizeType(100)
-    declare public width: __Number
+    declare public width: INumber
 
     @resizeType(100)
-    declare public height: __Number
+    declare public height: INumber
 
     @resizeType(Platform.devicePixelRatio)
-    public pixelRatio: __Number
+    declare public pixelRatio: INumber
 
     @resizeType(true)
     public smooth: boolean
 
+    @resizeType()
+    public contextSettings: ICanvasContext2DSettings
+
     @hitType('all')
     declare public hitFill: IHitType
 
@@ -43,18 +46,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'
@@ -18,13 +18,13 @@ export class Ellipse extends UI implements IEllipse {
     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'
@@ -12,14 +11,18 @@ export class Frame extends Box implements IFrame {
 
     public get __tag() { return 'Frame' }
 
+    public get isFrame(): boolean { return true }
+
     @dataProcessor(FrameData)
     declare public __: IFrameData
 
+    @surfaceType('#FFFFFF')
+    declare public fill: IFill
+
     @affectRenderBoundsType('hide')
     declare public overflow: IOverflow
 
     constructor(data?: IFrameInputData) {
         super(data)
-        if (!this.__.fill) this.__.fill = '#FFFFFF'
     }
 }

package/src/Group.ts

@@ -1,3 +1,4 @@
+import { IPickOptions, IPickResult, IPointData } from '@leafer/interface'
 import { Branch, useModule, dataProcessor, registerUI, UICreator } from '@leafer/core'
 
 import { IGroup, IGroupData, IGroupInputData, IUI, IUIInputData } from '@leafer-ui/interface'
@@ -8,38 +9,31 @@ import { UI } from './UI'
 
 @useModule(Branch)
 @registerUI()
-export class Group extends UI implements IGroup {
+export class Group extends UI implements IGroup {   // tip: rewrited Box
 
     public get __tag() { return 'Group' }
 
+    public get isBranch(): boolean { return true }
+
     @dataProcessor(GroupData)
     declare public __: IGroupData
 
     declare public children: IUI[]
 
-    public get resizeable(): boolean { return false }
-
-    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)
+    }
+
+    public reset(data?: IGroupInputData): void {
         this.__setBranch()
+        super.reset(data)
     }
 
     public __setBranch(): void {
-        this.isBranch = true
         if (!this.children) this.children = []
     }
 
+
     // data
 
     public set(data: IUIInputData): void {
@@ -47,13 +41,17 @@ export class Group extends UI implements IGroup {
             const { children } = data
             delete data.children
 
-            if (!this.children) this.__setBranch()
+            if (!this.children) {
+                this.__setBranch()
+            } else {
+                this.clear()
+            }
 
             super.set(data)
 
             let child: IUI
             children.forEach(childData => {
-                child = UICreator.get(childData.tag, childData) as IUI
+                child = (childData as IUI).__ ? childData as IUI : UICreator.get(childData.tag, childData) as IUI
                 this.add(child)
             })
 
@@ -70,6 +68,12 @@ export class Group extends UI implements IGroup {
         return data
     }
 
+
+    // hit rewrite
+
+    public pick(_hitPoint: IPointData, _options?: IPickOptions): IPickResult { return undefined }
+
+
     // add
 
     public addAt(child: IUI, index: number): void {
@@ -94,4 +98,6 @@ export class Group extends UI implements IGroup {
 
     public removeAll(_destroy?: boolean): 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'
@@ -16,7 +16,7 @@ export class Image extends Rect implements IImage {
     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 = url ? { type: 'image', mode: 'strench', url } : undefined
-            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 {