@leafer/display 1.0.0-alpha.23 → 1.0.0-alpha.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer/display",
-  "version": "1.0.0-alpha.23",
+  "version": "1.0.0-alpha.30",
   "description": "@leafer/display",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
@@ -19,15 +19,15 @@
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/math": "1.0.0-alpha.23",
-    "@leafer/data": "1.0.0-alpha.23",
-    "@leafer/layout": "1.0.0-alpha.23",
-    "@leafer/display-module": "1.0.0-alpha.23",
-    "@leafer/event": "1.0.0-alpha.23",
-    "@leafer/decorator": "1.0.0-alpha.23",
-    "@leafer/helper": "1.0.0-alpha.23"
+    "@leafer/math": "1.0.0-alpha.30",
+    "@leafer/data": "1.0.0-alpha.30",
+    "@leafer/layout": "1.0.0-alpha.30",
+    "@leafer/display-module": "1.0.0-alpha.30",
+    "@leafer/event": "1.0.0-alpha.30",
+    "@leafer/decorator": "1.0.0-alpha.30",
+    "@leafer/helper": "1.0.0-alpha.30"
   },
   "devDependencies": {
-    "@leafer/interface": "1.0.0-alpha.23"
+    "@leafer/interface": "1.0.0-alpha.30"
   }
 }

package/src/Branch.ts

@@ -1,7 +1,9 @@
 import { ILeaf, ILeaferCanvas, IRenderOptions } from '@leafer/interface'
 import { ChildEvent } from '@leafer/event'
 import { BoundsHelper } from '@leafer/math'
-import { BranchHelper, LeafBoundsHelper } from '@leafer/helper'
+import { BranchHelper, LeafBoundsHelper, WaitHelper } from '@leafer/helper'
+import { useModule } from '@leafer/decorator'
+import { LeafMask } from '@leafer/display-module'
 
 import { Leaf } from './Leaf'
 
@@ -10,11 +12,12 @@ const { setByListWithHandle } = BoundsHelper
 const { sort } = BranchHelper
 const { localBoxBounds, localEventBounds, localRenderBounds, maskLocalBoxBounds, maskLocalEventBounds, maskLocalRenderBounds } = LeafBoundsHelper
 
+@useModule(LeafMask)
 export class Branch extends Leaf {
 
     constructor() {
         super()
-        this.__isBranch = true
+        this.isBranch = true
         this.children = []
     }
 
@@ -36,7 +39,6 @@ export class Branch extends Leaf {
         return 0
     }
 
-
     public __updateBoxBounds(): void {
         setByListWithHandle(this.__layout.boxBounds, this.children, this.__hasMask ? maskLocalBoxBounds : localBoxBounds)
     }
@@ -73,47 +75,52 @@ export class Branch extends Leaf {
     public __render(canvas: ILeaferCanvas, options: IRenderOptions): void {
 
         if (this.__worldOpacity) {
+
             let child: ILeaf
             const { children } = this
-            if (this.__hasMask) {
 
-                let oldCanvas: ILeaferCanvas = canvas, maskCanvas: ILeaferCanvas
+            if (this.__hasMask && children.length > 1) {
+
+                let mask: boolean
+                let maskCanvas = canvas.getSameCanvas()
+                let contentCanvas = canvas.getSameCanvas()
 
                 for (let i = 0, len = children.length; i < len; i++) {
                     child = children[i]
 
                     if (child.isMask) {
-                        // if (mask) { } // 多个遮罩的情况
-                        canvas = canvas.getSameCanvas()
-                        maskCanvas = canvas.getSameCanvas()
+                        if (mask) {
+                            this.__renderMask(canvas, contentCanvas, maskCanvas)
+                            maskCanvas.clear()
+                            contentCanvas.clear()
+                        } else {
+                            mask = true
+                        }
+
                         child.__render(maskCanvas, options)
-                        //mask = child
                         continue
                     }
 
-                    child.__render(canvas, options)
+                    child.__render(contentCanvas, options)
                 }
 
-                if (maskCanvas) {
-
-                    maskCanvas.resetTransform()
-                    maskCanvas.copyWorld(canvas, this.__world, null, 'source-in')
-
-                    oldCanvas.resetTransform()
-                    oldCanvas.copyWorld(maskCanvas, this.__world)
-
-                    canvas.recycle()
-                    maskCanvas.recycle()
-                }
+                this.__renderMask(canvas, contentCanvas, maskCanvas)
+                maskCanvas.recycle()
+                contentCanvas.recycle()
 
             } else {
+
                 const { bounds, hideBounds } = options
+
                 for (let i = 0, len = children.length; i < len; i++) {
                     child = children[i]
+
                     if (bounds && !bounds.hit(child.__world, options.matrix)) continue
-                    if (hideBounds && hideBounds.includes(child.__world)) continue
+                    if (hideBounds && hideBounds.includes(child.__world, options.matrix)) continue
+
                     child.__render(canvas, options)
                 }
+
             }
         }
 
@@ -122,23 +129,26 @@ export class Branch extends Leaf {
     public add(child: ILeaf, index?: number): void {
 
         if (child.parent) child.parent.remove(child)
-
         child.parent = this
 
         index === undefined ? this.children.push(child) : this.children.splice(index, 0, child)
-        if (child.__isBranch) this.__.__childBranchNumber = (this.__.__childBranchNumber || 0) + 1
+        if (child.isBranch) this.__.__childBranchNumber = (this.__.__childBranchNumber || 0) + 1
+        child.__layout.boundsChanged || child.__layout.positionChange() // layouted(removed), need update
+
+        if (child.__parentWait) WaitHelper.run(child.__parentWait)
 
         if (this.leafer) {
             child.__bindLeafer(this.leafer)
 
             if (this.leafer.ready) {
-                const event = new ChildEvent(ChildEvent.ADD, child, this)
-                if (this.hasEvent(ChildEvent.ADD)) this.emitEvent(event)
+                const { ADD } = ChildEvent
+                const event = new ChildEvent(ADD, child, this)
+                if (child.hasEvent(ADD)) child.emitEvent(event)
+                if (this.hasEvent(ADD) && !this.isLeafer) this.emitEvent(event)
                 this.leafer.emitEvent(event)
             }
         }
 
-        if (child.__parentWait) child.__runParentWait()
     }
 
     public remove(child?: Leaf): void {
@@ -147,24 +157,27 @@ export class Branch extends Leaf {
             const index = this.children.indexOf(child)
             if (index > -1) {
                 this.children.splice(index, 1)
+                if (this.__hasMask) this.__updateMask()
+                this.__layout.boxBoundsChange()
 
-                if (child.__isBranch) this.__.__childBranchNumber = (this.__.__childBranchNumber || 1) - 1
+                if (child.isBranch) this.__.__childBranchNumber = (this.__.__childBranchNumber || 1) - 1
+                child.parent = null
 
                 if (this.leafer) {
+                    child.__bindLeafer(null)
+
                     if (this.leafer.ready) {
-                        const event = new ChildEvent(ChildEvent.REMOVE, child, this)
-                        if (this.hasEvent(ChildEvent.REMOVE)) this.emitEvent(event)
+                        const { REMOVE } = ChildEvent
+                        const event = new ChildEvent(REMOVE, child, this)
+                        if (child.hasEvent(REMOVE)) child.emitEvent(event)
+                        if (this.hasEvent(REMOVE) && !this.isLeafer) this.emitEvent(event)
                         this.leafer.emitEvent(event)
                     }
-
-                    child.__bindLeafer(null)
                 }
 
-                child.parent = null
-                this.__layout.boxBoundsChange()
             }
         } else {
-            if (this.parent) this.parent.remove(this)
+            super.remove()
         }
 
     }

package/src/Leaf.ts

@@ -4,6 +4,7 @@ import { LeafData } from '@leafer/data'
 import { LeafLayout } from '@leafer/layout'
 import { LeafDataProxy, LeafMatrix, LeafBounds, LeafHit, LeafEventer, LeafRender } from '@leafer/display-module'
 import { useModule } from '@leafer/decorator'
+import { WaitHelper } from '@leafer/helper'
 
 
 const { LEAF, create } = IncrementId
@@ -20,6 +21,7 @@ export class Leaf implements ILeaf {
     public get __tag(): string { return 'Leaf' }
 
     public readonly innerId: InnerId  // 内部唯一标识
+    public get innerName(): string { return this.__.name || this.tag + this.innerId }
 
     public get __DataProcessor() { return LeafData }
     public get __LayoutProcessor() { return LeafLayout }
@@ -28,8 +30,8 @@ export class Leaf implements ILeaf {
     public parent?: ILeaf
 
     public isLeafer: boolean
-    public __isBranch: boolean
-    public __isBranchLeaf: boolean
+    public isBranch: boolean
+    public isBranchLeaf: boolean
 
     public __: ILeafData
     public __layout: ILeafLayout
@@ -48,19 +50,23 @@ export class Leaf implements ILeaf {
     public get worldRenderBounds(): IBoundsData { return this.getBounds('render') }
 
     // now opacity
-    public get worldOpacity(): number { this.__layout.update(); return this.__worldOpacity }
+    public get worldOpacity(): number { this.__layout.checkUpdate(); return this.__worldOpacity }
 
-    public __level: number // 所在层级 0 -> 高
-    public __tempNumber: number // 用于排序，记录最后一次在parent中的排序索引，可用于移除之后回退
+    public __level: number // layer level  0 -> branch -> branch -> deep
+    public __tempNumber: number // temp sort
 
     public __hasMask?: boolean
     public __hitCanvas?: IHitCanvas
 
+    public get __onlyHitMask(): boolean { return this.__hasMask && !this.__.hitChildren }
+    public get __ignoreHitWorld(): boolean { return this.__hasMask && this.__.hitChildren }
+
     // event
     public __captureMap?: IEventListenerMap
     public __bubbleMap?: IEventListenerMap
 
     public __parentWait?: IFunction[]
+    public __leaferWait?: IFunction[]
 
     // branch 
     public children?: ILeaf[]
@@ -81,25 +87,24 @@ export class Leaf implements ILeaf {
     }
 
 
-    public __addParentWait(item: IFunction): void {
+    public waitParent(item: IFunction): void {
         this.__parentWait ? this.__parentWait.push(item) : this.__parentWait = [item]
     }
 
-    public __runParentWait(): void {
-        const len = this.__parentWait.length
-        for (let i = 0; i < len; i++) {
-            this.__parentWait[i]()
-        }
-        this.__parentWait = null
+    public waitLeafer(item: IFunction): void {
+        this.__leaferWait ? this.__leaferWait.push(item) : this.__leaferWait = [item]
     }
 
-    public __bindLeafer(leafer: ILeafer): void {
+
+    public __bindLeafer(leafer: ILeafer | null): void {
         if (this.isLeafer) leafer = this as unknown as ILeafer
 
         this.leafer = leafer
         this.__level = this.parent ? this.parent.__level + 1 : 1
 
-        if (this.__isBranch) {
+        if (this.__leaferWait && leafer) WaitHelper.run(this.__leaferWait)
+
+        if (this.isBranch) {
             const { children } = this
             for (let i = 0, len = children.length; i < len; i++) {
                 children[i].__bindLeafer(leafer)
@@ -118,12 +123,13 @@ export class Leaf implements ILeaf {
 
     public __getAttr(_attrName: string): __Value { return undefined }
 
-    public __updateAttr(_attrName?: string, _value?: __Value): void { }
-
     // ---
 
-    public forceUpdate(): void {
-        this.__updateAttr('x')
+    public forceUpdate(attrName?: string): void {
+        if (!attrName) attrName = 'x'
+        const value = this.__.__get(attrName)
+        this.__[attrName] = (value === null) ? 0 : null;
+        (this as any)[attrName] = value
     }
 
 
@@ -159,12 +165,22 @@ export class Leaf implements ILeaf {
 
     public __updateRenderBoundsSpreadWidth(): number { return 0 }
 
-
     public __onUpdateSize(): void { }
 
     // ---
 
 
+    // LeafMask rewrite
+
+    public __updateMask(): void { }
+
+    public __renderMask(_canvas: ILeaferCanvas, _content: ILeaferCanvas, _mask: ILeaferCanvas): void { }
+
+    public __removeMask(_child?: ILeaf): void { }
+
+    // ---
+
+
     // convert
 
     public getWorld(attrName: IMatrixDecompositionAttr): number {
@@ -296,7 +312,7 @@ export class Leaf implements ILeaf {
             this.__captureMap = null
             this.__bubbleMap = null
 
-            if (this.__isBranch) {
+            if (this.children) {
                 this.children.forEach(child => { child.destroy() })
                 this.children.length = 0
             }