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

package/package.json

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

package/src/Branch.ts

@@ -8,7 +8,7 @@ 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
 
 export class Branch extends Leaf {
 
@@ -20,10 +20,10 @@ export class Branch extends Leaf {
 
     // overwrite
 
-    public __updateEventBoundsSpreadWidth(): number {
+    public __updateStrokeBoundsSpreadWidth(): 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.strokeBoundsSpreadWidth) return 1
         }
         return 0
     }
@@ -38,15 +38,15 @@ export class Branch extends Leaf {
 
 
     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 {
@@ -74,12 +74,46 @@ export class Branch extends Leaf {
 
         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) {
+
+                let oldCanvas: ILeaferCanvas = canvas, maskCanvas: ILeaferCanvas
+
+                for (let i = 0, len = children.length; i < len; i++) {
+                    child = children[i]
+
+                    if (child.isMask) {
+                        // if (mask) { } // 多个遮罩的情况
+                        canvas = canvas.getSameCanvas()
+                        maskCanvas = canvas.getSameCanvas()
+                        child.__render(maskCanvas, options)
+                        //mask = child
+                        continue
+                    }
+
+                    child.__render(canvas, options)
+                }
+
+                if (maskCanvas) {
+
+                    maskCanvas.resetTransform()
+                    maskCanvas.copyWorld(canvas, this.__world, null, 'source-in')
+
+                    oldCanvas.resetTransform()
+                    oldCanvas.copyWorld(maskCanvas, this.__world)
+
+                    canvas.recycle()
+                    maskCanvas.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
+                    child.__render(canvas, options)
+                }
             }
         }
 
@@ -87,22 +121,21 @@ 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
 
-        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 event = new ChildEvent(ChildEvent.ADD, child, this)
+                if (this.hasEvent(ChildEvent.ADD)) this.emitEvent(event)
+                this.leafer.emitEvent(event)
+            }
         }
 
         if (child.__parentWait) child.__runParentWait()
@@ -115,13 +148,16 @@ export class Branch extends Leaf {
             if (index > -1) {
                 this.children.splice(index, 1)
 
-                if (child.__isBranch) this.__.__childBranchNumber > 1 ? this.__.__childBranchNumber-- : this.__.__childBranchNumber = 0
+                if (child.__isBranch) this.__.__childBranchNumber = (this.__.__childBranchNumber || 1) - 1
+
+                if (this.leafer) {
+                    if (this.leafer.ready) {
+                        const event = new ChildEvent(ChildEvent.REMOVE, child, this)
+                        if (this.hasEvent(ChildEvent.REMOVE)) this.emitEvent(event)
+                        this.leafer.emitEvent(event)
+                    }
 
-                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 = null
+                    child.__bindLeafer(null)
                 }
 
                 child.parent = null

package/src/Leaf.ts

@@ -1,5 +1,5 @@
-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'
@@ -16,31 +16,44 @@ 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 __DataProcessor() { return LeafData }
     public get __LayoutProcessor() { return LeafLayout }
 
     public leafer?: ILeafer
-    public root?: ILeaf
     public parent?: ILeaf
 
-    public __isRoot: 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毫秒
+
+    // 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') }
+
+    // now opacity
+    public get worldOpacity(): number { this.__layout.update(); return this.__worldOpacity }
 
     public __level: number // 所在层级 0 -> 高
     public __tempNumber: number // 用于排序，记录最后一次在parent中的排序索引，可用于移除之后回退
 
+    public __hasMask?: boolean
     public __hitCanvas?: IHitCanvas
 
     // event
@@ -49,7 +62,6 @@ export class Leaf implements ILeaf {
 
     public __parentWait?: IFunction[]
 
-
     // branch 
     public children?: ILeaf[]
 
@@ -57,11 +69,10 @@ export class Leaf implements ILeaf {
 
         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)
@@ -82,72 +93,69 @@ export class Leaf implements ILeaf {
         this.__parentWait = null
     }
 
-    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): 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) {
             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 { }
+
+    public get(_attrNames?: string[]): IObject { return undefined }
+
 
     // LeafDataProxy rewrite
 
-    public __set(_attrName: string, _newValue: unknown): void { }
+    public __setAttr(_attrName: string, _newValue: __Value): void { }
 
-    public __get(_attrName: string): unknown { return undefined }
+    public __getAttr(_attrName: string): __Value { return undefined }
 
-    public __updateAttr(_attrName: string): void { }
+    public __updateAttr(_attrName?: string, _value?: __Value): void { }
 
     // ---
 
+    public forceUpdate(): void {
+        this.__updateAttr('x')
+    }
+
 
     // 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 __updateStrokeBoundsSpreadWidth(): number { return 0 }
 
     public __updateRenderBoundsSpreadWidth(): number { return 0 }
 
@@ -157,12 +165,50 @@ export class Leaf implements ILeaf {
     // ---
 
 
+    // convert
+
+    public getWorld(attrName: IMatrixDecompositionAttr): number {
+        return this.__layout.getMatrixDecompositionData('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 { }
 
     // ---
@@ -176,6 +222,9 @@ export class Leaf implements ILeaf {
 
     public __draw(_canvas: ILeaferCanvas, _options: IRenderOptions): void { }
 
+    public __renderShape(_canvas: ILeaferCanvas, _options: IRenderOptions): void { }
+
+
     public __updateWorldOpacity(): void { }
 
     public __updateRenderTime(): void { }
@@ -202,7 +251,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)
+    }
 
     // ---
 
@@ -229,19 +280,12 @@ export class Leaf implements ILeaf {
 
     public destroy(): void {
         if (this.__) {
-
-            if (this.__isBranch) {
-                this.children.forEach(child => { child.destroy() })
-                this.children = null
-            }
-
             if (this.__hitCanvas) {
                 this.__hitCanvas.destroy()
                 this.__hitCanvas = null
             }
 
             this.leafer = null
-            this.root = null
             this.parent = null
 
             this.__.destroy()
@@ -251,6 +295,11 @@ export class Leaf implements ILeaf {
 
             this.__captureMap = null
             this.__bubbleMap = null
+
+            if (this.__isBranch) {
+                this.children.forEach(child => { child.destroy() })
+                this.children.length = 0
+            }
         }
     }