@leafer/display 1.0.0-beta → 1.0.0-beta.11

package/package.json

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

package/src/Branch.ts

@@ -1,9 +1,9 @@
-import { ILeaf, ILeaferCanvas, IRenderOptions } from '@leafer/interface'
+import { ILeaf } from '@leafer/interface'
 import { ChildEvent } from '@leafer/event'
 import { BoundsHelper } from '@leafer/math'
 import { BranchHelper, LeafBoundsHelper, WaitHelper } from '@leafer/helper'
 import { useModule } from '@leafer/decorator'
-import { LeafMask } from '@leafer/display-module'
+import { BranchRender, LeafMask } from '@leafer/display-module'
 
 import { Leaf } from './Leaf'
 
@@ -12,6 +12,8 @@ const { setByListWithHandle } = BoundsHelper
 const { sort } = BranchHelper
 const { localBoxBounds, localEventBounds, localRenderBounds, maskLocalBoxBounds, maskLocalEventBounds, maskLocalRenderBounds } = LeafBoundsHelper
 
+
+@useModule(BranchRender)
 @useModule(LeafMask)
 export class Branch extends Leaf {
 
@@ -51,83 +53,23 @@ export class Branch extends Leaf {
         setByListWithHandle(this.__layout.renderBounds, this.children, this.__hasMask ? maskLocalRenderBounds : localRenderBounds)
     }
 
-    public __updateChange(): void {
-        const { __layout: layout } = this
-        if (layout.childrenSortChanged) {
-            this.__updateSortChildren()
-            layout.childrenSortChanged = false
-        }
-    }
-
 
     // own
 
     public __updateSortChildren(): void {
+        let affectSort: boolean
         const { children } = this
         if (children.length > 1) {
             for (let i = 0, len = children.length; i < len; i++) {
                 children[i].__tempNumber = i
+                if (children[i].__.zIndex) affectSort = true
             }
             children.sort(sort)
+            this.__layout.affectChildrenSort = affectSort
         }
     }
 
-    public __render(canvas: ILeaferCanvas, options: IRenderOptions): void {
-
-        if (this.__worldOpacity) {
-
-            let child: ILeaf
-            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)
-                }
-
-            }
-        }
-
-    }
-
     public add(child: ILeaf, index?: number): void {
-
         if (child.parent) child.parent.remove(child)
         child.parent = this
 
@@ -139,48 +81,57 @@ export class Branch extends Leaf {
 
         if (this.leafer) {
             child.__bindLeafer(this.leafer)
-
-            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 (this.leafer.ready) this.__emitChildEvent(ChildEvent.ADD, child)
         }
 
+        this.__layout.affectChildrenSort && this.__layout.childrenSortChange()
     }
 
-    public remove(child?: Leaf): void {
-
+    public remove(child?: Leaf, destroy?: boolean): void {
         if (child) {
             const index = this.children.indexOf(child)
             if (index > -1) {
                 this.children.splice(index, 1)
-                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)
-                    }
-                }
-
+                this.__preRemove()
+                this.__realRemoveChild(child)
+                if (destroy) child.destroy()
             }
-        } else {
-            super.remove()
+        } else if (child === undefined) {
+            super.remove(null, destroy)
         }
+    }
+
+    public removeAll(destroy?: boolean): void {
+        const { children } = this
+        this.children = []
+        this.__preRemove()
+        this.__.__childBranchNumber = 0
+        children.forEach(child => {
+            this.__realRemoveChild(child)
+            if (destroy) child.destroy()
+        })
+    }
 
+    protected __preRemove(): void {
+        if (this.__hasMask) this.__updateMask()
+        if (this.__hasEraser) this.__updateEraser()
+        this.__layout.boxChange()
+        this.__layout.affectChildrenSort && this.__layout.childrenSortChange()
     }
-}
 
+    protected __realRemoveChild(child: ILeaf): void {
+        child.parent = null
+        if (this.leafer) {
+            child.__bindLeafer(null)
+            if (this.leafer.ready) this.__emitChildEvent(ChildEvent.REMOVE, child)
+        }
+    }
 
+    protected __emitChildEvent(type: string, child: ILeaf): void {
+        const event = new ChildEvent(type, child, this)
+        if (child.hasEvent(type)) child.emitEvent(event)
+        if (this.hasEvent(type) && !this.isLeafer) this.emitEvent(event)
+        this.leafer.emitEvent(event)
+    }
+}

package/src/Leaf.ts

@@ -1,13 +1,16 @@
-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 { 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, IBranch } 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'
+import { LeafHelper, WaitHelper } from '@leafer/helper'
 
 
 const { LEAF, create } = IncrementId
+const { toInnerPoint, toOuterPoint } = MatrixHelper
+const { tempToOuterOf, copy } = PointHelper
+const { moveLocal, zoomOfLocal, rotateOfLocal } = LeafHelper
 
 @useModule(LeafDataProxy)
 @useModule(LeafMatrix)
@@ -18,6 +21,8 @@ const { LEAF, create } = IncrementId
 export class Leaf implements ILeaf {
 
     public get tag(): string { return this.__tag }
+    public set tag(_value: string) { }
+
     public get __tag(): string { return 'Leaf' }
 
     public readonly innerId: InnerId  // 内部唯一标识
@@ -56,10 +61,11 @@ export class Leaf implements ILeaf {
     public __tempNumber: number // temp sort
 
     public __hasMask?: boolean
+    public __hasEraser?: boolean
     public __hitCanvas?: IHitCanvas
 
     public get __onlyHitMask(): boolean { return this.__hasMask && !this.__.hitChildren }
-    public get __ignoreHitWorld(): boolean { return this.__hasMask && this.__.hitChildren }
+    public get __ignoreHitWorld(): boolean { return (this.__hasMask || this.__hasEraser) && this.__.hitChildren }
 
     // event
     public __captureMap?: IEventListenerMap
@@ -76,7 +82,7 @@ export class Leaf implements ILeaf {
         this.innerId = create(LEAF)
 
         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.__world = { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0, x: 0, y: 0, width: 0, height: 0, scaleX: 1, scaleY: 1 }
 
         this.__worldOpacity = 1
 
@@ -88,11 +94,11 @@ export class Leaf implements ILeaf {
 
 
     public waitParent(item: IFunction): void {
-        this.__parentWait ? this.__parentWait.push(item) : this.__parentWait = [item]
+        this.parent ? item() : (this.__parentWait ? this.__parentWait.push(item) : this.__parentWait = [item])
     }
 
     public waitLeafer(item: IFunction): void {
-        this.__leaferWait ? this.__leaferWait.push(item) : this.__leaferWait = [item]
+        this.leafer ? item() : (this.__leaferWait ? this.__leaferWait.push(item) : this.__leaferWait = [item])
     }
 
 
@@ -126,9 +132,9 @@ export class Leaf implements ILeaf {
     // ---
 
     public forceUpdate(attrName?: string): void {
-        if (!attrName) attrName = 'x'
-        const value = this.__.__get(attrName)
-        this.__[attrName] = (value === null) ? 0 : null;
+        if (attrName === undefined) attrName = 'x'
+        else if (attrName === 'surface') attrName = 'blendMode'
+        const value = this.__.__getInput(attrName);
         (this as any)[attrName] = value
     }
 
@@ -172,7 +178,9 @@ export class Leaf implements ILeaf {
 
     // LeafMask rewrite
 
-    public __updateMask(): void { }
+    public __updateEraser(_value?: boolean): void { }
+
+    public __updateMask(_value?: boolean): void { }
 
     public __renderMask(_canvas: ILeaferCanvas, _content: ILeaferCanvas, _mask: ILeaferCanvas): void { }
 
@@ -194,26 +202,43 @@ export class Leaf implements ILeaf {
 
     public worldToLocal(world: IPointData, to?: IPointData, isMovePoint?: boolean): void {
         if (this.parent) {
-            MatrixHelper.toInnerPoint(this.parent.worldTransform, world, to, isMovePoint)
+            toInnerPoint(this.parent.worldTransform, world, to, isMovePoint)
         } else {
-            if (to) PointHelper.copy(to, world)
+            if (to) copy(to, world)
         }
     }
 
     public localToWorld(local: IPointData, to?: IPointData, isMovePoint?: boolean): void {
         if (this.parent) {
-            MatrixHelper.toOuterPoint(this.parent.worldTransform, local, to, isMovePoint)
+            toOuterPoint(this.parent.worldTransform, local, to, isMovePoint)
         } else {
-            if (to) PointHelper.copy(to, local)
+            if (to) copy(to, local)
         }
     }
 
     public worldToInner(world: IPointData, to?: IPointData, isMovePoint?: boolean): void {
-        MatrixHelper.toInnerPoint(this.worldTransform, world, to, isMovePoint)
+        toInnerPoint(this.worldTransform, world, to, isMovePoint)
     }
 
     public innerToWorld(inner: IPointData, to?: IPointData, isMovePoint?: boolean): void {
-        MatrixHelper.toOuterPoint(this.worldTransform, inner, to, isMovePoint)
+        toOuterPoint(this.worldTransform, inner, to, isMovePoint)
+    }
+
+
+    // transform
+
+    public move(x: number, y?: number): void {
+        moveLocal(this, x, y)
+    }
+
+    public scaleOf(origin: IPointData, x: number, y?: number): void {
+        this.__layout.checkUpdate()
+        zoomOfLocal(this, tempToOuterOf(origin, this.__local), x, y)
+    }
+
+    public rotateOf(origin: IPointData, angle: number): void {
+        this.__layout.checkUpdate()
+        rotateOfLocal(this, tempToOuterOf(origin, this.__local), angle)
     }
 
 
@@ -265,8 +290,8 @@ export class Leaf implements ILeaf {
 
     public add(_child: ILeaf, _index?: number): void { }
 
-    public remove(_child?: ILeaf): void {
-        if (this.parent) this.parent.remove(this)
+    public remove(_child?: ILeaf, destroy?: boolean): void {
+        if (this.parent) this.parent.remove(this, destroy)
     }
 
     // ---
@@ -294,26 +319,17 @@ export class Leaf implements ILeaf {
 
     public destroy(): void {
         if (this.__) {
-            if (this.__hitCanvas) {
-                this.__hitCanvas.destroy()
-                this.__hitCanvas = null
-            }
 
-            this.leafer = null
-            this.parent = null
+            if (this.children && this.children.length) (this as unknown as IBranch).removeAll(true)
+            if (this.parent) this.remove()
+
+            if (this.__hitCanvas) this.__hitCanvas.destroy()
 
             this.__.destroy()
             this.__layout.destroy()
-            this.__ = null
-            this.__layout = null
 
-            this.__captureMap = null
-            this.__bubbleMap = null
+            this.leafer = this.parent = this.__hitCanvas = this.__ = this.__layout = this.__captureMap = this.__bubbleMap = null
 
-            if (this.children) {
-                this.children.forEach(child => { child.destroy() })
-                this.children.length = 0
-            }
         }
     }