@leafer/display-module 1.0.0-rc.9 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer/display-module",
-  "version": "1.0.0-rc.9",
+  "version": "1.0.1",
   "description": "@leafer/display-module",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
@@ -15,18 +15,19 @@
     "type": "git",
     "url": "https://github.com/leaferjs/leafer.git"
   },
-  "homepage": "https://github.com/leaferjs/leafer/tree/main/packages/display-module",
+  "homepage": "https://github.com/leaferjs/leafer/tree/main/packages/display-module/display-module",
   "bugs": "https://github.com/leaferjs/leafer/issues",
   "keywords": [
     "leafer",
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/helper": "1.0.0-rc.9",
-    "@leafer/event": "1.0.0-rc.9",
-    "@leafer/math": "1.0.0-rc.9"
+    "@leafer/helper": "1.0.1",
+    "@leafer/event": "1.0.1",
+    "@leafer/math": "1.0.1",
+    "@leafer/debug": "1.0.1"
   },
   "devDependencies": {
-    "@leafer/interface": "1.0.0-rc.9"
+    "@leafer/interface": "1.0.1"
   }
 }

package/src/BranchRender.ts

@@ -1,6 +1,9 @@
-import { ILeaf, ILeaferCanvas, IRenderOptions, IBranchRenderModule } from '@leafer/interface'
+import { LeafBoundsHelper } from '@leafer/helper'
+import { ILeaferCanvas, IRenderOptions, IBranchRenderModule } from '@leafer/interface'
 
 
+const { excludeRenderBounds } = LeafBoundsHelper
+
 export const BranchRender: IBranchRenderModule = {
 
     __updateChange(): void {
@@ -18,74 +21,54 @@ export const BranchRender: IBranchRenderModule = {
         if (this.__worldOpacity) {
 
             if (this.__.__single) {
-                canvas.resetTransform()
+
+                if (this.__.eraser === 'path') return this.__renderEraser(canvas, options)
+
                 const tempCanvas = canvas.getSameCanvas(false, true)
 
                 this.__renderBranch(tempCanvas, options)
 
-                canvas.opacity = this.__worldOpacity
+                const nowWorld = this.__getNowWorld(options)
 
-                const blendMode = this.__.isEraser ? 'destination-out' : this.__.blendMode
+                canvas.opacity = this.__.opacity
+                canvas.copyWorldByReset(tempCanvas, nowWorld, nowWorld, this.__.__blendMode, true)
 
-                if (this.__worldFlipped || options.matrix) {
-                    canvas.copyWorld(tempCanvas, null, null, blendMode)
-                } else {
-                    canvas.copyWorld(tempCanvas, this.__world, this.__world, blendMode)
-                }
+                tempCanvas.recycle(nowWorld)
 
-                tempCanvas.recycle()
             } else {
+
                 this.__renderBranch(canvas, options)
+
             }
 
         }
+
     },
 
     __renderBranch(canvas: ILeaferCanvas, options: IRenderOptions): void {
+        if (this.__hasMask) {
 
-        let child: ILeaf
-        const { children } = this
+            this.__renderMask(canvas, options)
 
-        if (this.__hasMask && children.length > 1) {
-
-            let mask: boolean
-            const maskCanvas = canvas.getSameCanvas(false, true)
-            const contentCanvas = canvas.getSameCanvas(false, true)
+        } else {
 
+            const { children } = this
             for (let i = 0, len = children.length; i < len; i++) {
-                child = children[i]
-
-                if (child.isMask) {
-                    if (mask) {
-                        this.__renderMask(canvas, contentCanvas, maskCanvas)
-                    } else {
-                        mask = true
-                    }
-
-                    child.__render(maskCanvas, options)
-                    continue
-                }
-
-                child.__render(mask ? contentCanvas : canvas, options)
+                if (excludeRenderBounds(children[i], options)) continue
+                children[i].__render(canvas, options)
             }
 
-            this.__renderMask(canvas, contentCanvas, maskCanvas, true)
-
-        } else {
+        }
+    },
 
-            const { bounds, hideBounds } = options
 
+    __clip(canvas: ILeaferCanvas, options: IRenderOptions): void {
+        if (this.__worldOpacity) {
+            const { 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, options.matrix)) continue
-
-                child.__render(canvas, options)
+                if (excludeRenderBounds(children[i], options)) continue
+                children[i].__clip(canvas, options)
             }
-
         }
-
     }
-
 }

package/src/LeafBounds.ts

@@ -1,11 +1,13 @@
 import { ILeafBoundsModule } from '@leafer/interface'
 import { BoundsHelper } from '@leafer/math'
+import { PathBounds } from '@leafer/path'
 import { BranchHelper, LeafHelper } from '@leafer/helper'
 
 
-const { updateMatrix, updateAllMatrix, hasParentAutoLayout } = LeafHelper
+const { updateMatrix, updateAllMatrix } = LeafHelper
 const { updateBounds } = BranchHelper
-const { toOuterOf, copyAndSpread } = BoundsHelper
+const { toOuterOf, copyAndSpread, copy } = BoundsHelper
+const { toBounds } = PathBounds
 
 export const LeafBounds: ILeafBoundsModule = {
 
@@ -26,11 +28,10 @@ export const LeafBounds: ILeafBoundsModule = {
 
         if (layout.boxChanged) {
 
-            this.__updatePath()
+            if (!this.__.__pathInputed) this.__updatePath()
             this.__updateRenderPath()
 
             this.__updateBoxBounds()
-            layout.boxChanged = false
             layout.resized = true
         }
 
@@ -46,15 +47,16 @@ export const LeafBounds: ILeafBoundsModule = {
         }
 
 
+        layout.boxChanged = false // must after updateLocalBoxBounds()
+
+
         if (layout.strokeChanged) {
 
             layout.strokeSpread = this.__updateStrokeSpread()
 
             if (layout.strokeSpread) {
 
-                if (layout.strokeBounds === layout.boxBounds) {
-                    layout.spreadStroke()
-                }
+                if (layout.strokeBounds === layout.boxBounds) layout.spreadStroke()
 
                 this.__updateStrokeBounds()
                 this.__updateLocalStrokeBounds()
@@ -64,7 +66,7 @@ export const LeafBounds: ILeafBoundsModule = {
             }
 
             layout.strokeChanged = false
-            if (layout.renderSpread) layout.renderChanged = true
+            if (layout.renderSpread || layout.strokeSpread !== layout.strokeBoxSpread) layout.renderChanged = true
 
             if (this.parent) this.parent.__layout.strokeChange()
             layout.resized = true
@@ -77,9 +79,7 @@ export const LeafBounds: ILeafBoundsModule = {
 
             if (layout.renderSpread) {
 
-                if (layout.renderBounds === layout.boxBounds || layout.renderBounds === layout.strokeBounds) {
-                    layout.spreadRender()
-                }
+                if (layout.renderBounds === layout.boxBounds || layout.renderBounds === layout.strokeBounds) layout.spreadRender()
 
                 this.__updateRenderBounds()
                 this.__updateLocalRenderBounds()
@@ -98,7 +98,7 @@ export const LeafBounds: ILeafBoundsModule = {
     },
 
     __updateLocalBoxBounds(): void {
-        if (this.__hasAutoLayout) this.__updateAutoLayout()
+        if (this.__hasAutoLayout) this.__updateAutoLayout() //  origin / around / flow
         toOuterOf(this.__layout.boxBounds, this.__local, this.__local)
     },
 
@@ -113,24 +113,39 @@ export const LeafBounds: ILeafBoundsModule = {
 
     __updateBoxBounds(): void {
         const b = this.__layout.boxBounds
-        const { width, height } = this.__
-        b.x = 0
-        b.y = 0
-        b.width = width
-        b.height = height
+        const data = this.__
+        if (data.__pathInputed) {
+            toBounds(data.__pathForRender, b)
+        } else {
+            b.x = 0
+            b.y = 0
+            b.width = data.width
+            b.height = data.height
+        }
     },
 
 
     __updateAutoLayout(): void {
         this.__layout.matrixChanged = true
         if (this.isBranch) {
-            if (this.leafer) this.leafer.layouter.addExtra(this) // add part render
-            if (hasParentAutoLayout(this)) {
-                updateMatrix(this)
+            if (this.leafer && this.leafer.ready) this.leafer.layouter.addExtra(this) // add part 
+
+            if (this.__.flow) {
+
+                if (this.__layout.boxChanged) this.__updateFlowLayout()
+
+                updateAllMatrix(this)
+                updateBounds(this, this)
+
+                if (this.__.__autoSide) this.__updateBoxBounds()
+
             } else {
+
                 updateAllMatrix(this)
                 updateBounds(this, this)
+
             }
+
         } else {
             updateMatrix(this)
         }
@@ -143,11 +158,13 @@ export const LeafBounds: ILeafBoundsModule = {
     },
 
     __updateStrokeBounds(): void {
-        copyAndSpread(this.__layout.strokeBounds, this.__layout.boxBounds, this.__layout.strokeSpread)
+        const layout = this.__layout
+        copyAndSpread(layout.strokeBounds, layout.boxBounds, layout.strokeBoxSpread)
     },
 
     __updateRenderBounds(): void {
-        copyAndSpread(this.__layout.renderBounds, this.__layout.strokeBounds, this.__layout.renderSpread)
-    },
+        const layout = this.__layout
+        layout.renderSpread > 0 ? copyAndSpread(layout.renderBounds, layout.boxBounds, layout.renderSpread) : copy(layout.renderBounds, layout.strokeBounds) // Box use -1
+    }
 
 }

package/src/LeafDataProxy.ts

@@ -1,24 +1,45 @@
 import { ILeafDataProxyModule, IObject, IValue } from '@leafer/interface'
 import { PropertyEvent } from '@leafer/event'
+import { Debug } from '@leafer/debug'
 
 
+const { isFinite } = Number
+const debug = Debug.get('setAttr')
+
 export const LeafDataProxy: ILeafDataProxyModule = {
 
-    __setAttr(name: string, newValue: IValue): void {
+    __setAttr(name: string, newValue: IValue, checkFiniteNumber?: boolean): boolean {
         if (this.leafer && this.leafer.created) {
             const oldValue = this.__.__getInput(name)
+
+            if (checkFiniteNumber && !isFinite(newValue) && newValue !== undefined) { // 警告 NaN、Infinity、-Infinity、null、非有效数字
+                debug.warn(this.innerName, name, newValue)
+                newValue = undefined // must
+            }
+
             if (typeof newValue === 'object' || oldValue !== newValue) {
                 (this.__ as IObject)[name] = newValue
                 if (this.__proxyData) this.setProxyAttr(name, newValue)
 
                 const { CHANGE } = PropertyEvent
                 const event = new PropertyEvent(CHANGE, this, name, oldValue, newValue)
-                if (this.hasEvent(CHANGE) && !this.isLeafer) this.emitEvent(event)
+
+                if (this.isLeafer) {
+                    this.emitEvent(new PropertyEvent(PropertyEvent.LEAFER_CHANGE, this, name, oldValue, newValue))
+                } else {
+                    if (this.hasEvent(CHANGE)) this.emitEvent(event)
+                }
+
                 this.leafer.emitEvent(event)
+                return true
+            } else {
+                return false
             }
+
         } else {
             (this.__ as IObject)[name] = newValue
             if (this.__proxyData) this.setProxyAttr(name, newValue)
+            return true
         }
     },
 

package/src/LeafEventer.ts

@@ -1,14 +1,16 @@
-import { IEventListener, IEventListenerOptions, IEventListenerMap, IEventListenerItem, IEventListenerId, IEvent, IObject, IEventTarget, ILeafEventerModule } from '@leafer/interface'
+import { IEventListener, IEventListenerMap, IEventListenerItem, IEventListenerId, IEvent, IObject, IEventTarget, ILeafEventerModule, IEventOption } from '@leafer/interface'
 import { EventCreator } from '@leafer/platform'
 
 const empty = {}
 
 export const LeafEventer: ILeafEventerModule = {
 
-    on(type: string | string[], listener: IEventListener, options?: IEventListenerOptions | boolean): void {
+    on(type: string | string[], listener: IEventListener, options?: IEventOption): void {
         let capture: boolean, once: boolean
         if (options) {
-            if (typeof options === 'boolean') {
+            if (options === 'once') {
+                once = true
+            } else if (typeof options === 'boolean') {
                 capture = options
             } else {
                 capture = options.capture
@@ -33,27 +35,50 @@ export const LeafEventer: ILeafEventerModule = {
         })
     },
 
-    off(type: string | string[], listener: IEventListener, options?: IEventListenerOptions | boolean): void {
-        let capture: boolean
-        if (options) capture = typeof options === 'boolean' ? options : options.capture
+    off(type?: string | string[], listener?: IEventListener, options?: IEventOption): void {
+        if (type) {
 
-        let events: IEventListenerItem[], index: number
-        const map = __getListenerMap(this, capture)
-        const typeList = typeof type === 'string' ? type.split(' ') : type
+            const typeList = typeof type === 'string' ? type.split(' ') : type
+
+            if (listener) {
+
+                let capture: boolean
+                if (options) capture = typeof options === 'boolean' ? options : (options === 'once' ? false : options.capture)
+
+                let events: IEventListenerItem[], index: number
+                const map = __getListenerMap(this, capture)
+
+                typeList.forEach(type => {
+                    if (type) {
+                        events = map[type]
+                        if (events) {
+                            index = events.findIndex(item => item.listener === listener)
+                            if (index > -1) events.splice(index, 1)
+                            if (!events.length) delete map[type]
+                        }
+                    }
+                })
+
+            } else {
+
+                // off type
+                const { __bubbleMap: b, __captureMap: c } = this
+                typeList.forEach(type => {
+                    if (b) delete b[type]
+                    if (c) delete c[type]
+                })
 
-        typeList.forEach(type => {
-            if (type) {
-                events = map[type]
-                if (events) {
-                    index = events.findIndex(item => item.listener === listener)
-                    if (index > -1) events.splice(index, 1)
-                    if (!events.length) delete map[type]
-                }
             }
-        })
+
+        } else {
+
+            this.__bubbleMap = this.__captureMap = undefined  // off all
+
+        }
+
     },
 
-    on_(type: string | string[], listener: IEventListener, bind?: IObject, options?: IEventListenerOptions | boolean): IEventListenerId {
+    on_(type: string | string[], listener: IEventListener, bind?: IObject, options?: IEventOption): IEventListenerId {
         if (bind) listener = listener.bind(bind)
         this.on(type, listener, options)
         return { type, current: this, listener, options }
@@ -87,6 +112,8 @@ export const LeafEventer: ILeafEventerModule = {
                 if (event && (event as IEvent).isStopNow) break
             }
         }
+
+        this.syncEventer && this.syncEventer.emitEvent(event, capture)
     },
 
     emitEvent(event: IEvent, capture?: boolean): void {
@@ -95,12 +122,11 @@ export const LeafEventer: ILeafEventerModule = {
     },
 
     hasEvent(type: string, capture?: boolean): boolean {
+        if (this.syncEventer && this.syncEventer.hasEvent(type, capture)) return true
+
         const { __bubbleMap: b, __captureMap: c } = this
-        if (capture === undefined) {
-            return !!((c && c[type]) || (b && b[type]))
-        } else {
-            return !!(capture ? (c && c[type]) : (b && b[type]))
-        }
+        const hasB = b && b[type], hasC = c && c[type]
+        return !!(capture === undefined ? (hasB || hasC) : (capture ? hasC : hasB))
     },
 
 }

package/src/LeafMatrix.ts

@@ -1,4 +1,4 @@
-import { ILeafMatrixModule, ILayoutData } from '@leafer/interface'
+import { ILeafMatrixModule, ILayoutData, IScrollPointData } from '@leafer/interface'
 import { AroundHelper, MatrixHelper } from '@leafer/math'
 
 
@@ -9,7 +9,7 @@ export const LeafMatrix: ILeafMatrixModule = {
 
     __updateWorldMatrix(): void {
 
-        multiplyParent(this.__local || this.__layout, this.parent ? this.parent.__world : defaultWorld, this.__world, !!this.__layout.affectScaleOrRotation, this.__ as ILayoutData)
+        multiplyParent(this.__local || this.__layout, this.parent ? this.parent.__world : defaultWorld, this.__world, !!this.__layout.affectScaleOrRotation, this.__ as ILayoutData, this.parent && this.parent.__ as IScrollPointData)
 
     },
 
@@ -22,18 +22,18 @@ export const LeafMatrix: ILeafMatrixModule = {
             if (layout.affectScaleOrRotation) {
 
                 if (layout.scaleChanged || layout.rotationChanged) {
-                    setLayout(local, data as ILayoutData, null, layout.affectRotation)
+                    setLayout(local, data as ILayoutData, null, null, layout.affectRotation)
                     layout.scaleChanged = layout.rotationChanged = false
                 }
 
             }
 
-            local.e = data.x
-            local.f = data.y
+            local.e = data.x + data.offsetX
+            local.f = data.y + data.offsetY
 
-            if (data.around) {
-                toPoint(data.around, layout.boxBounds, tempPoint)
-                translateInner(local, -tempPoint.x, -tempPoint.y)
+            if (data.around || data.origin) {
+                toPoint(data.around || data.origin, layout.boxBounds, tempPoint)
+                translateInner(local, -tempPoint.x, -tempPoint.y, !data.around)
             }
 
         }

package/src/LeafRender.ts

@@ -5,24 +5,39 @@ export const LeafRender: ILeafRenderModule = {
 
     __render(canvas: ILeaferCanvas, options: IRenderOptions): void {
         if (this.__worldOpacity) {
-            canvas.setWorld(this.__world, options.matrix)
-            canvas.opacity = this.__worldOpacity
+
+            canvas.setWorld(this.__nowWorld = this.__getNowWorld(options))
+            canvas.opacity = this.__.opacity
 
             if (this.__.__single) {
-                const tempCanvas = canvas.getSameCanvas(true, true)
 
+                if (this.__.eraser === 'path') return this.__renderEraser(canvas, options)
+
+                const tempCanvas = canvas.getSameCanvas(true, true)
                 this.__draw(tempCanvas, options)
 
-                const blendMode = this.__.isEraser ? 'destination-out' : this.__.blendMode
-                if (this.__worldFlipped || options.matrix) {
-                    canvas.copyWorldByReset(tempCanvas, null, null, blendMode)
+                if (this.__worldFlipped) {
+                    canvas.copyWorldByReset(tempCanvas, this.__nowWorld, null, this.__.__blendMode, true)
                 } else {
-                    canvas.copyWorldToInner(tempCanvas, this.__world, this.__layout.renderBounds, blendMode)
+                    canvas.copyWorldToInner(tempCanvas, this.__nowWorld, this.__layout.renderBounds, this.__.__blendMode)
                 }
-                tempCanvas.recycle()
+
+                tempCanvas.recycle(this.__nowWorld)
+
             } else {
+
                 this.__draw(canvas, options)
+
             }
+
+        }
+    },
+
+    __clip(canvas: ILeaferCanvas, options: IRenderOptions): void {
+        if (this.__worldOpacity) {
+            canvas.setWorld(this.__nowWorld = this.__getNowWorld(options))
+            this.__drawRenderPath(canvas)
+            this.__.windingRule ? canvas.clip(this.__.windingRule) : canvas.clip()
         }
     },
 

package/src/index.ts

@@ -2,8 +2,6 @@ export { LeafEventer } from './LeafEventer'
 export { LeafDataProxy } from './LeafDataProxy'
 export { LeafMatrix } from './LeafMatrix'
 export { LeafBounds } from './LeafBounds'
-export { LeafHit } from './LeafHit'
 export { LeafRender } from './LeafRender'
-export { LeafMask } from './LeafMask'
 
 export { BranchRender } from './BranchRender'

package/types/index.d.ts

@@ -1,4 +1,4 @@
-import { ILeafEventerModule, ILeafDataProxyModule, ILeafMatrixModule, ILeafBoundsModule, ILeafHitModule, ILeafRenderModule, ILeafMaskModule, IBranchRenderModule } from '@leafer/interface';
+import { ILeafEventerModule, ILeafDataProxyModule, ILeafMatrixModule, ILeafBoundsModule, ILeafRenderModule, IBranchRenderModule } from '@leafer/interface';
 
 declare const LeafEventer: ILeafEventerModule;
 
@@ -8,12 +8,8 @@ declare const LeafMatrix: ILeafMatrixModule;
 
 declare const LeafBounds: ILeafBoundsModule;
 
-declare const LeafHit: ILeafHitModule;
-
 declare const LeafRender: ILeafRenderModule;
 
-declare const LeafMask: ILeafMaskModule;
-
 declare const BranchRender: IBranchRenderModule;
 
-export { BranchRender, LeafBounds, LeafDataProxy, LeafEventer, LeafHit, LeafMask, LeafMatrix, LeafRender };
+export { BranchRender, LeafBounds, LeafDataProxy, LeafEventer, LeafMatrix, LeafRender };

package/src/LeafHit.ts

@@ -1,34 +0,0 @@
-import { ILeafHitModule, IRadiusPointData, ILeaferCanvas } from '@leafer/interface'
-import { PointHelper, BoundsHelper } from '@leafer/math'
-
-
-const { toInnerRadiusPointOf, copy, setRadius } = PointHelper
-const inner = {} as IRadiusPointData
-
-export const LeafHit: ILeafHitModule = {
-
-    __hitWorld(point: IRadiusPointData): boolean {
-        if (this.__layout.hitCanvasChanged || !this.__hitCanvas) {
-            this.__updateHitCanvas()
-            this.__layout.hitCanvasChanged = false
-        }
-
-        if (this.__.hitRadius) {
-            copy(inner, point), point = inner
-            setRadius(point, this.__.hitRadius)
-        }
-
-        toInnerRadiusPointOf(point, this.__world, inner)
-
-        if (this.__.hitBox) {
-            if (BoundsHelper.hitRadiusPoint(this.__layout.boxBounds, inner)) return true
-        }
-
-        return this.__hit(inner)
-    },
-
-    __drawHitPath(canvas: ILeaferCanvas): void {
-        this.__drawRenderPath(canvas)
-    }
-
-}

package/src/LeafMask.ts

@@ -1,48 +0,0 @@
-import { ILeaf, ILeaferCanvas, ILeafMaskModule } from '@leafer/interface'
-
-
-export const LeafMask: ILeafMaskModule = {
-
-    __updateEraser(value?: boolean): void {
-        this.__hasEraser = value ? true : this.children.some(item => item.__.isEraser)
-    },
-
-    __updateMask(value?: boolean): void {
-        this.__hasMask = value ? true : this.children.some(item => item.__.isMask)
-    },
-
-    __renderMask(canvas: ILeaferCanvas, content: ILeaferCanvas, mask: ILeaferCanvas, recycle?: boolean): void {
-        content.opacity = 1
-        content.resetTransform()
-        content.useMask(mask)
-
-        canvas.opacity = this.__worldOpacity
-        canvas.resetTransform()
-        canvas.copyWorld(content)
-
-        if (recycle) {
-            content.recycle()
-            mask.recycle()
-        } else {
-            content.clear()
-            mask.clear()
-        }
-    },
-
-    __removeMask(child?: ILeaf): void {
-        if (child) {
-            child.isMask = false
-            this.remove(child)
-        } else {
-            const { children } = this
-            for (let i = 0, len = children.length; i < len; i++) {
-                child = children[i]
-                if (child.isMask) {
-                    this.__removeMask(child)
-                    len--, i--
-                }
-            }
-        }
-    }
-
-}