@leafer/display 1.0.0-alpha.9 → 1.0.0-beta

package/package.json

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

package/src/Branch.ts

@@ -1,52 +1,54 @@
 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'
 
 
 const { setByListWithHandle } = BoundsHelper
 const { sort } = BranchHelper
-const { relativeBoxBounds: localBoxBounds, relativeEventBounds: localEventBounds, relativeRenderBounds: localRenderBounds } = LeafBoundsHelper
+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 = []
     }
 
     // overwrite
 
-    public __updateEventBoundsSpreadWidth(): number {
+    public __updateStrokeSpread(): number {
         const { children } = this
         for (let i = 0, len = children.length; i < len; i++) {
-            if (children[i].__layout.eventBoundsSpreadWidth) return 1
+            if (children[i].__layout.strokeSpread) return 1
         }
         return 0
     }
 
-    public __updateRenderBoundsSpreadWidth(): number {
+    public __updateRenderSpread(): number {
         const { children } = this
         for (let i = 0, len = children.length; i < len; i++) {
-            if (children[i].__layout.renderBoundsSpreadWidth) return 1
+            if (children[i].__layout.renderSpread) return 1
         }
         return 0
     }
 
-
     public __updateBoxBounds(): void {
-        setByListWithHandle(this.__layout.boxBounds, this.children, localBoxBounds)
+        setByListWithHandle(this.__layout.boxBounds, this.children, this.__hasMask ? maskLocalBoxBounds : localBoxBounds)
     }
 
-    public __updateEventBounds(): void {
-        setByListWithHandle(this.__layout.eventBounds, this.children, localEventBounds)
+    public __updateStrokeBounds(): void {
+        setByListWithHandle(this.__layout.strokeBounds, this.children, this.__hasMask ? maskLocalEventBounds : localEventBounds)
     }
 
     public __updateRenderBounds(): void {
-        setByListWithHandle(this.__layout.renderBounds, this.children, localRenderBounds)
+        setByListWithHandle(this.__layout.renderBounds, this.children, this.__hasMask ? maskLocalRenderBounds : localRenderBounds)
     }
 
     public __updateChange(): void {
@@ -73,13 +75,52 @@ export class Branch extends Leaf {
     public __render(canvas: ILeaferCanvas, options: IRenderOptions): void {
 
         if (this.__worldOpacity) {
+
             let child: ILeaf
-            const { bounds, hideBounds } = options, { children } = this
-            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
-                child.__render(canvas, options)
+            const { children } = this
+
+            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) {
+                            this.__renderMask(canvas, contentCanvas, maskCanvas)
+                            maskCanvas.clear()
+                            contentCanvas.clear()
+                        } else {
+                            mask = true
+                        }
+
+                        child.__render(maskCanvas, options)
+                        continue
+                    }
+
+                    child.__render(contentCanvas, options)
+                }
+
+                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, options.matrix)) continue
+
+                    child.__render(canvas, options)
+                }
+
             }
         }
 
@@ -87,25 +128,27 @@ export class Branch extends Leaf {
 
     public add(child: ILeaf, index?: number): void {
 
-        if (child.parent) {
-            if (child.parent !== this) console.warn('child had other parent, can not add to this, child innerId:' + child.innerId)
-            return
-        }
-
+        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++ : this.__childBranchNumber = 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.root) {
-            child.__bindRoot(this.root)
+        if (this.leafer) {
+            child.__bindLeafer(this.leafer)
 
-            const event = new ChildEvent(ChildEvent.ADD, child, this)
-            if (this.hasEvent(ChildEvent.ADD)) this.emitEvent(event)
-            this.root.emitEvent(event)
+            if (this.leafer.ready) {
+                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 {
@@ -114,21 +157,27 @@ export class Branch extends Leaf {
             const index = this.children.indexOf(child)
             if (index > -1) {
                 this.children.splice(index, 1)
-
-                if (child.__isBranch) this.__childBranchNumber > 1 ? this.__childBranchNumber-- : this.__childBranchNumber = 0
-
-                if (this.root) {
-                    const event = new ChildEvent(ChildEvent.REMOVE, child, this)
-                    if (this.hasEvent(ChildEvent.REMOVE)) this.emitEvent(event)
-                    this.root.emitEvent(event)
-                    child.root = undefined
+                if (this.__hasMask) this.__updateMask()
+                this.__layout.boxChange()
+
+                if (child.isBranch) this.__.__childBranchNumber = (this.__.__childBranchNumber || 1) - 1
+                child.parent = null
+
+                if (this.leafer) {
+                    child.__bindLeafer(null)
+
+                    if (this.leafer.ready) {
+                        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.parent = undefined
-                this.__layout.boxBoundsChange()
             }
         } else {
-            if (this.parent) this.parent.remove(this)
+            super.remove()
         }
 
     }

package/src/Leaf.ts

@@ -1,9 +1,10 @@
-import { ILeafer, ILeaf, ILeafInputData, ILeafData, ILeaferCanvas, IRenderOptions, IMatrixWithBoundsData, __Number, __Boolean, ILeafLayout, InnerId, IHitCanvas, IRadiusPointData, IEventListenerMap, IEventListener, IEventListenerOptions, IEventListenerId, IEvent, IObject, IFunction, __String } from '@leafer/interface'
-import { IncrementId } from '@leafer/math'
+import { ILeafer, ILeaf, ILeafInputData, ILeafData, ILeaferCanvas, IRenderOptions, IMatrixWithBoundsData, __Number, __Boolean, __Value, ILeafLayout, InnerId, IHitCanvas, IRadiusPointData, IEventListenerMap, IEventListener, IEventListenerOptions, IEventListenerId, IEvent, IObject, IFunction, __String, IPointData, IMatrixDecompositionAttr, ILayoutBoundsType, ILayoutLocationType, IBoundsData, IMatrixData } from '@leafer/interface'
+import { IncrementId, MatrixHelper, PointHelper } from '@leafer/math'
 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
@@ -16,57 +17,68 @@ const { LEAF, create } = IncrementId
 @useModule(LeafRender)
 export class Leaf implements ILeaf {
 
-    public get tag(): string { return this.constructor.name }
+    public get tag(): string { return this.__tag }
+    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 }
 
     public leafer?: ILeafer
-    public root?: ILeaf
     public parent?: ILeaf
 
-    public __isRoot: boolean
-    public __isBranch: boolean
-    public __isBranchLeaf: boolean
+    public isLeafer: boolean
+    public isBranch: boolean
+    public isBranchLeaf: boolean
 
     public __: ILeafData
     public __layout: ILeafLayout
 
-    public __relative: IMatrixWithBoundsData
+    public __local: IMatrixWithBoundsData
     public __world: IMatrixWithBoundsData
-
     public __worldOpacity: number
-    public __renderTime: number // μs 1000微秒 = 1毫秒
-    public __complex: boolean // 外观是否复杂
 
-    public __interactionOff: boolean
-    public __childrenInteractionOff: boolean
+    // now transform
+    public get worldTransform(): IMatrixData { return this.__layout.getTransform('world') }
+    public get localTransform(): IMatrixData { return this.__layout.getTransform('local') }
+
+    // now bounds
+    public get worldBoxBounds(): IBoundsData { return this.getBounds('box') }
+    public get worldStrokeBounds(): IBoundsData { return this.getBounds('stroke') }
+    public get worldRenderBounds(): IBoundsData { return this.getBounds('render') }
 
-    public __level: number // 所在层级 0 -> 高
-    public __tempNumber: number // 用于排序，记录最后一次在parent中的排序索引，可用于移除之后回退
+    // now opacity
+    public get worldOpacity(): number { this.__layout.checkUpdate(); return this.__worldOpacity }
 
+    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[]
-    public __childBranchNumber?: number
 
     constructor(data?: ILeafInputData) {
 
         this.innerId = create(LEAF)
 
-        this.__relative = { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0, x: 0, y: 0, width: 0, height: 0 }
+        this.__local = { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0, x: 0, y: 0, width: 0, height: 0 }
         this.__world = { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0, x: 0, y: 0, width: 0, height: 0 }
 
         this.__worldOpacity = 1
-        this.__renderTime = 2
 
         this.__ = new this.__DataProcessor(this)
         this.__layout = new this.__LayoutProcessor(this)
@@ -75,107 +87,144 @@ 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 = undefined
+    public waitLeafer(item: IFunction): void {
+        this.__leaferWait ? this.__leaferWait.push(item) : this.__leaferWait = [item]
     }
 
-    public __setAsLeafer(): void {
-        this.leafer = this as unknown as ILeafer
-    }
-
-    public __setAsRoot(): void {
-        this.__bindRoot(this)
-        this.__isRoot = true
-    }
 
-    public __bindRoot(root: ILeaf): void {
-        if (this.__isRoot) return
+    public __bindLeafer(leafer: ILeafer | null): void {
+        if (this.isLeafer) leafer = this as unknown as ILeafer
 
-        this.root = root
-        this.leafer = root.leafer
+        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].__bindRoot(root)
+                children[i].__bindLeafer(leafer)
             }
         }
     }
 
+    public set(_data: IObject): void { }
 
-    // LeafDataProxy rewrite
-
-    public __set(_attrName: string, _newValue: unknown): void { }
-
-    public __get(_attrName: string): unknown { return undefined }
+    public get(_attrNames?: string[]): IObject { return undefined }
 
-    public __updateAttr(_attrName: string): void { }
-
-    // ---
 
+    // LeafDataProxy rewrite
 
-    // worldOpacity rewrite, include visible
+    public __setAttr(_attrName: string, _newValue: __Value): void { }
 
-    public __updateWorldOpacity(): void { }
+    public __getAttr(_attrName: string): __Value { return undefined }
 
     // ---
 
+    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
+    }
 
 
     // LeafMatrix rewrite
 
     public __updateWorldMatrix(): void { }
 
-    public __updateRelativeMatrix(): void { }
+    public __updateLocalMatrix(): void { }
 
     // ---
 
-
     // LeafBounds rewrite
 
     public __updateWorldBounds(): void { }
 
 
-    public __updateRelativeBoxBounds(): void { }
+    public __updateLocalBoxBounds(): void { }
 
-    public __updateRelativeEventBounds(): void { }
+    public __updateLocalStrokeBounds(): void { }
 
-    public __updateRelativeRenderBounds(): void { }
+    public __updateLocalRenderBounds(): void { }
 
     // box
 
     public __updateBoxBounds(): void { }
 
-    public __updateEventBounds(): void { }
+    public __updateStrokeBounds(): void { }
 
     public __updateRenderBounds(): void { }
 
 
-    public __updateEventBoundsSpreadWidth(): number { return 0 }
-
-    public __updateRenderBoundsSpreadWidth(): number { return 0 }
+    public __updateStrokeSpread(): number { return 0 }
 
+    public __updateRenderSpread(): 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 {
+        return this.__layout.decomposeTransform('world')[attrName]
+    }
+
+    public getBounds(type: ILayoutBoundsType, locationType: ILayoutLocationType = 'world'): IBoundsData {
+        return this.__layout.getBounds(type, locationType)
+    }
+
+
+    public worldToLocal(world: IPointData, to?: IPointData, isMovePoint?: boolean): void {
+        if (this.parent) {
+            MatrixHelper.toInnerPoint(this.parent.worldTransform, world, to, isMovePoint)
+        } else {
+            if (to) PointHelper.copy(to, world)
+        }
+    }
+
+    public localToWorld(local: IPointData, to?: IPointData, isMovePoint?: boolean): void {
+        if (this.parent) {
+            MatrixHelper.toOuterPoint(this.parent.worldTransform, local, to, isMovePoint)
+        } else {
+            if (to) PointHelper.copy(to, local)
+        }
+    }
+
+    public worldToInner(world: IPointData, to?: IPointData, isMovePoint?: boolean): void {
+        MatrixHelper.toInnerPoint(this.worldTransform, world, to, isMovePoint)
+    }
+
+    public innerToWorld(inner: IPointData, to?: IPointData, isMovePoint?: boolean): void {
+        MatrixHelper.toOuterPoint(this.worldTransform, inner, to, isMovePoint)
+    }
+
+
     // LeafHit rewrite
 
     public __hitWorld(_point: IRadiusPointData): boolean { return true }
 
     public __hit(_local: IRadiusPointData): boolean { return true }
 
+    public __drawHitPath(_canvas: ILeaferCanvas): void { }
+
     public __updateHitCanvas(): void { }
 
     // ---
@@ -189,6 +238,11 @@ export class Leaf implements ILeaf {
 
     public __draw(_canvas: ILeaferCanvas, _options: IRenderOptions): void { }
 
+    public __renderShape(_canvas: ILeaferCanvas, _options: IRenderOptions): void { }
+
+
+    public __updateWorldOpacity(): void { }
+
     public __updateChange(): void { }
 
     // ---
@@ -211,7 +265,9 @@ export class Leaf implements ILeaf {
 
     public add(_child: ILeaf, _index?: number): void { }
 
-    public remove(_child?: ILeaf): void { }
+    public remove(_child?: ILeaf): void {
+        if (this.parent) this.parent.remove(this)
+    }
 
     // ---
 
@@ -222,9 +278,9 @@ export class Leaf implements ILeaf {
 
     public off(_type: string | string[], _listener: IEventListener, _options?: IEventListenerOptions | boolean): void { }
 
-    public on__(_type: string | string[], _listener: IEventListener, _bind?: IObject, _options?: IEventListenerOptions | boolean): IEventListenerId { return undefined }
+    public on_(_type: string | string[], _listener: IEventListener, _bind?: IObject, _options?: IEventListenerOptions | boolean): IEventListenerId { return undefined }
 
-    public off__(_id: IEventListenerId | IEventListenerId[]): void { }
+    public off_(_id: IEventListenerId | IEventListenerId[]): void { }
 
     public once(_type: string | string[], _listener: IEventListener, _capture?: boolean): void { }
 
@@ -238,28 +294,26 @@ export class Leaf implements ILeaf {
 
     public destroy(): void {
         if (this.__) {
-
-            if (this.__isBranch) {
-                this.children.forEach(child => { child.destroy() })
-                this.children = undefined
-            }
-
             if (this.__hitCanvas) {
                 this.__hitCanvas.destroy()
-                this.__hitCanvas = undefined
+                this.__hitCanvas = null
             }
 
-            this.leafer = undefined
-            this.root = undefined
-            this.parent = undefined
+            this.leafer = null
+            this.parent = null
 
             this.__.destroy()
             this.__layout.destroy()
-            this.__ = undefined
-            this.__layout = undefined
+            this.__ = null
+            this.__layout = null
 
-            this.__captureMap = undefined
-            this.__bubbleMap = undefined
+            this.__captureMap = null
+            this.__bubbleMap = null
+
+            if (this.children) {
+                this.children.forEach(child => { child.destroy() })
+                this.children.length = 0
+            }
         }
     }