@leafer-ui/display 1.0.0-rc.3 → 1.0.0-rc.30

package/package.json

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

package/src/Box.ts

@@ -1,17 +1,16 @@
-import { ILeaferCanvas, IRenderOptions, IPathDrawer, IBoundsData, IPathCommandData, __Boolean } from '@leafer/interface'
-import { rewrite, rewriteAble, registerUI, BoundsHelper, dataProcessor, affectRenderBoundsType } from '@leafer/core'
+import { ILeaferCanvas, IRenderOptions, IBoundsData, IBoolean } from '@leafer/interface'
+import { rewrite, rewriteAble, registerUI, BoundsHelper, dataProcessor, affectRenderBoundsType, dataType } 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
-const bounds = {} as IBoundsData
-const { copy, add } = BoundsHelper
+const childrenRenderBounds = {} as IBoundsData
+const { copy, add, includes } = BoundsHelper
 
 @rewriteAble()
 @registerUI()
@@ -19,17 +18,21 @@ export class Box extends Group implements IBox {
 
     public get __tag() { return 'Box' }
 
+    public get isBranchLeaf(): boolean { return true }
+
     @dataProcessor(BoxData)
     declare public __: IBoxData
 
+    @dataType(false)
+    public resizeChildren?: IBoolean
+
     @affectRenderBoundsType('show')
-    declare public overflow: IOverflow
+    declare public overflow?: IOverflow
 
-    public get resizeable(): boolean { return true }
+    public isOverflow: boolean
 
     constructor(data?: IBoxInputData) {
         super(data)
-        this.isBranchLeaf = true
         this.__layout.renderChanged || this.__layout.renderChange()
     }
 
@@ -40,29 +43,56 @@ 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
+        return this.__updateRectRenderSpread() || -1
     }
 
 
     @rewrite(rect.__updateBoxBounds)
-    public __updateBoxBounds(): void { }
+    public __updateRectBoxBounds(): void { }
+
+    public __updateBoxBounds(): void {
+        const data = this.__
+
+        if (this.children.length) {
+            if (data.__autoSide) {
+                if (this.leafer && this.leafer.ready) this.leafer.layouter.addExtra(this)
+                super.__updateBoxBounds()
+                if (!data.__autoSize) {
+                    const b = this.__layout.boxBounds
+                    if (!data.__autoWidth) b.height += b.y, b.width = data.width, b.x = b.y = 0
+                    if (!data.__autoHeight) b.width += b.x, b.height = data.height, b.y = b.x = 0
+                }
+            } else {
+                this.__updateRectBoxBounds()
+            }
+
+            if (data.flow) this.__updateContentBounds()
+
+        } else {
+            this.__updateRectBoxBounds()
+        }
+    }
 
     @rewrite(rect.__updateStrokeBounds)
     public __updateStrokeBounds(): void { }
 
     public __updateRenderBounds(): void {
-        this.__updateRectRenderBounds()
-        if (!this.__.__drawAfterFill) {
-            const { renderBounds } = this.__layout
-            copy(bounds, renderBounds)
+        let isOverflow: boolean
+        const { renderBounds } = this.__layout
+
+        if (this.children.length) {
             super.__updateRenderBounds()
-            add(renderBounds, bounds)
+            copy(childrenRenderBounds, renderBounds)
+            this.__updateRectRenderBounds()
+
+            isOverflow = !includes(renderBounds, childrenRenderBounds) || undefined
+        } else {
+            this.__updateRectRenderBounds()
         }
-    }
 
+        this.isOverflow !== isOverflow && (this.isOverflow = isOverflow)
+        if (isOverflow && !(this.__.__drawAfterFill = this.__.overflow === 'hide')) add(renderBounds, childrenRenderBounds)
+    }
 
     @rewrite(rect.__updateRenderBounds)
     public __updateRectRenderBounds(): void { }
@@ -76,10 +106,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 { }
 
@@ -92,16 +118,25 @@ export class Box extends Group implements IBox {
             this.__renderRect(canvas, options)
         } else {
             this.__renderRect(canvas, options)
-            this.__renderGroup(canvas, options)
+            if (this.children.length) this.__renderGroup(canvas, options)
         }
     }
 
     public __drawAfterFill(canvas: ILeaferCanvas, options: IRenderOptions): void {
-        canvas.save()
-        canvas.clip()
-        this.__renderGroup(canvas, options)
-        canvas.restore()
-        if (this.__.stroke) this.__drawRenderPath(canvas)
+        const { length } = this.children
+        if (this.isOverflow) {
+            canvas.save()
+            canvas.clip()
+            if (length) this.__renderGroup(canvas, options)
+            canvas.restore()
+        } else {
+            if (length) this.__renderGroup(canvas, options)
+        }
+
+        if (this.__.stroke && length) {
+            canvas.setWorld(this.__nowWorld)
+            this.__drawRenderPath(canvas)
+        }
     }
 
 }

package/src/Canvas.ts

@@ -1,11 +1,11 @@
-import { ILeaferCanvas, ILeaferCanvasConfig, __String, __Number, IRenderOptions, IPointData, ICanvasContext2D, IScreenSizeData, ISizeData, IHitType } from '@leafer/interface'
-import { Creator, Matrix, Platform, dataProcessor, registerUI, hitType } from '@leafer/core'
+import { ILeaferCanvas, ILeaferCanvasConfig, INumber, IRenderOptions, IPointData, ICanvasContext2D, ICanvasContext2DSettings, IScreenSizeData, ISizeData } from '@leafer/interface'
+import { Creator, Matrix, Platform, dataProcessor, registerUI } 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,48 +13,47 @@ 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
+    public smooth?: boolean
 
-    @hitType('all')
-    declare public hitFill: IHitType
+    @resizeType()
+    public contextSettings?: ICanvasContext2DSettings
 
-    public canvas: ILeaferCanvas
+    public canvas?: ILeaferCanvas
 
-    public context: ICanvasContext2D
+    public context?: ICanvasContext2D
 
     constructor(data?: ICanvasInputData) {
         super(data)
         this.canvas = Creator.canvas(this.__ as ILeaferCanvasConfig)
         this.context = this.canvas.context
-        this.__.__drawAfterFill = true
+        this.__.__isCanvas = this.__.__drawAfterFill = true
     }
 
     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()
     }
 
@@ -65,7 +64,7 @@ export class Canvas extends Rect implements ICanvas {
     public __drawAfterFill(canvas: ILeaferCanvas, _options: IRenderOptions): void {
         const origin = this.canvas.view as ISizeData
         const { width, height } = this
-        if (this.__.cornerRadius) {
+        if (this.__.cornerRadius || this.pathInputed) {
             canvas.save()
             canvas.clip()
             canvas.drawImage(this.canvas.view as any, 0, 0, origin.width, origin.height, 0, 0, width, height)

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
+    declare public overflow?: IOverflow
 
     constructor(data?: IFrameInputData) {
         super(data)
-        if (!this.__.fill) this.__.fill = '#FFFFFF'
     }
 }

package/src/Group.ts

@@ -1,6 +1,7 @@
+import { IJSONOptions, 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'
+import { IGroup, IGroupData, IGroupInputData, IUI, IUIInputData, IUIJSONData } from '@leafer-ui/interface'
 import { GroupData } from '@leafer-ui/data'
 
 import { UI } from './UI'
@@ -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)
             })
 
@@ -64,12 +62,18 @@ export class Group extends UI implements IGroup {
         }
     }
 
-    public toJSON(): IUIInputData {
-        const data = super.toJSON()
-        data.children = this.children.map(child => child.toJSON())
+    public toJSON(options?: IJSONOptions): IUIJSONData {
+        const data = super.toJSON(options)
+        data.children = this.children.map(child => child.toJSON(options))
         return data
     }
 
+
+    // hit rewrite
+
+    public pick(_hitPoint: IPointData, _options?: IPickOptions): IPickResult { return undefined }
+
+
     // add
 
     public addAt(child: IUI, index: number): void {
@@ -80,7 +84,7 @@ export class Group extends UI implements IGroup {
         this.add(child, this.children.indexOf(after) + 1)
     }
 
-    public addBefore(child: UI, before: IUI): void {
+    public addBefore(child: IUI, before: IUI): void {
         this.add(child, this.children.indexOf(before))
     }
 
@@ -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,37 +16,17 @@ 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 }
 
-    public image: ILeaferImage
+    public image?: ILeaferImage
 
     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 {