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

package/package.json

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

package/src/LeafBounds.ts

@@ -2,7 +2,7 @@ import { ILeafBoundsModule } from '@leafer/interface'
 import { BoundsHelper } from '@leafer/math'
 
 
-const { setByBoundsTimesMatrix } = BoundsHelper
+const { toOuterOf, copyAndSpread } = BoundsHelper
 
 export const LeafBounds: ILeafBoundsModule = {
 
@@ -14,97 +14,98 @@ export const LeafBounds: ILeafBoundsModule = {
             const layout = this.__layout
 
 
-            if (layout.boxBoundsChanged) {
+            if (layout.boxChanged) {
 
                 this.__updatePath()
                 this.__updateRenderPath()
 
                 this.__updateBoxBounds()
-                layout.boxBoundsChanged = false
+                layout.boxChanged = false
                 resize = true
             }
 
 
-            if (layout.localBoxBoundsChanged) { // position change
+            if (layout.localBoxChanged) { // position change
 
-                this.__updateRelativeBoxBounds()
-                layout.localBoxBoundsChanged = false
+                this.__updateLocalBoxBounds()
+                layout.localBoxChanged = false
 
-                if (layout.eventBoundsSpreadWidth) layout.eventBoundsChanged = true
-                if (layout.renderBoundsSpreadWidth) layout.renderBoundsChanged = true
-                this.parent?.__layout.boxBoundsChange()
+                if (layout.strokeSpread) layout.strokeChanged = true
+                if (layout.renderSpread) layout.renderChanged = true
+                this.parent?.__layout.boxChange()
             }
 
 
-            if (layout.eventBoundsChanged) {
+            if (layout.strokeChanged) {
 
-                layout.eventBoundsSpreadWidth = this.__updateEventBoundsSpreadWidth()
+                layout.strokeSpread = this.__updateStrokeSpread()
 
-                if (layout.eventBoundsSpreadWidth) {
+                if (layout.strokeSpread) {
 
-                    if (layout.eventBounds === layout.boxBounds) {
-                        layout.eventBoundsSpread()
+                    if (layout.strokeBounds === layout.boxBounds) {
+                        layout.spreadStroke()
                     }
 
-                    this.__updateEventBounds()
-                    this.__updateRelativeEventBounds()
-                    layout.eventBoundsChanged = false
-
-                    if (layout.renderBoundsSpreadWidth) layout.renderBoundsChanged = true
+                    this.__updateStrokeBounds()
+                    this.__updateLocalStrokeBounds()
 
                 } else {
-                    layout.eventBoundsSpreadCancel()
+                    layout.spreadStrokeCancel()
                 }
 
-                this.parent?.__layout.eventBoundsChange()
+                layout.strokeChanged = false
+                if (layout.renderSpread) layout.renderChanged = true
+
+                if (this.parent) this.parent.__layout.strokeChange()
                 resize || (resize = true)
             }
 
 
-            if (layout.renderBoundsChanged) {
+            if (layout.renderChanged) {
 
-                layout.renderBoundsSpreadWidth = this.__updateRenderBoundsSpreadWidth()
+                layout.renderSpread = this.__updateRenderSpread()
 
-                if (layout.renderBoundsSpreadWidth) {
+                if (layout.renderSpread) {
 
-                    if (layout.renderBounds === layout.boxBounds || layout.renderBounds === layout.eventBounds) {
-                        layout.renderBoundsSpread()
+                    if (layout.renderBounds === layout.boxBounds || layout.renderBounds === layout.strokeBounds) {
+                        layout.spreadRender()
                     }
 
                     this.__updateRenderBounds()
-                    this.__updateRelativeRenderBounds()
-                    layout.renderBoundsChanged = false
+                    this.__updateLocalRenderBounds()
 
                 } else {
-                    layout.renderBoundsSpreadCancel()
+                    layout.spreadRenderCancel()
                 }
 
-                this.parent?.__layout.renderBoundsChange()
+                layout.renderChanged = false
+
+                if (this.parent) this.parent.__layout.renderChange()
             }
 
 
             layout.boundsChanged = false
 
-            setByBoundsTimesMatrix(this.__world, this.__layout.renderBounds, this.__world)
+            toOuterOf(this.__layout.renderBounds, this.__world, this.__world)
 
             if (resize) this.__onUpdateSize()
 
         } else {
-            setByBoundsTimesMatrix(this.__world, this.__layout.renderBounds, this.__world)
+            toOuterOf(this.__layout.renderBounds, this.__world, this.__world)
         }
 
     },
 
-    __updateRelativeBoxBounds(): void {
-        setByBoundsTimesMatrix(this.__relative, this.__layout.boxBounds, this.__relative)
+    __updateLocalBoxBounds(): void {
+        toOuterOf(this.__layout.boxBounds, this.__local, this.__local)
     },
 
-    __updateRelativeEventBounds(): void {
-        setByBoundsTimesMatrix(this.__layout.relativeEventBounds, this.__layout.eventBounds, this.__relative)
+    __updateLocalStrokeBounds(): void {
+        toOuterOf(this.__layout.strokeBounds, this.__local, this.__layout.localStrokeBounds)
     },
 
-    __updateRelativeRenderBounds(): void {
-        setByBoundsTimesMatrix(this.__layout.relativeRenderBounds, this.__layout.renderBounds, this.__relative)
+    __updateLocalRenderBounds(): void {
+        toOuterOf(this.__layout.renderBounds, this.__local, this.__layout.localRenderBounds)
     },
 
 
@@ -114,6 +115,14 @@ export const LeafBounds: ILeafBoundsModule = {
         b.y = 0
         b.width = this.__.width
         b.height = this.__.height
-    }
+    },
+
+    __updateStrokeBounds(): void {
+        copyAndSpread(this.__layout.strokeBounds, this.__layout.boxBounds, this.__layout.strokeSpread)
+    },
+
+    __updateRenderBounds(): void {
+        copyAndSpread(this.__layout.renderBounds, this.__layout.strokeBounds, this.__layout.renderSpread)
+    },
 
 }

package/src/LeafDataProxy.ts

@@ -1,30 +1,23 @@
 import { ILeafDataProxyModule } from '@leafer/interface'
-import { AttrEvent } from '@leafer/event'
+import { PropertyEvent } from '@leafer/event'
 
 
 export const LeafDataProxy: ILeafDataProxyModule = {
 
-    __set(attrName: string, newValue: unknown): void {
-        if (this.root) {
-            const oldValue = this.__.__getInput(attrName)
-            if (oldValue !== newValue) {
-                this.__[attrName] = newValue
-                this.root.emitEvent(new AttrEvent(AttrEvent.CHANGE, this, attrName, oldValue, newValue))
-            }
+    __setAttr(name: string, newValue: unknown): void {
+        if (this.leafer && this.leafer.ready) {
+            this.__[name] = newValue
+            const { CHANGE } = PropertyEvent
+            const event = new PropertyEvent(CHANGE, this, name, this.__.__get(name), newValue)
+            if (this.hasEvent(CHANGE) && !this.isLeafer) this.emitEvent(event)
+            this.leafer.emitEvent(event)
         } else {
-            this.__[attrName] = newValue
+            this.__[name] = newValue
         }
     },
 
-    __get(attrName: string): unknown {
-        return this.__.__getInput(attrName)
-    },
-
-    __updateAttr(attrName: string): void {
-        if (this.root) {
-            const value = this.__.__getInput(attrName)
-            this.root.emitEvent(new AttrEvent(AttrEvent.CHANGE, this, attrName, value, value))
-        }
+    __getAttr(name: string): unknown {
+        return this.__.__get(name)
     }
 
 }

package/src/LeafEventer.ts

@@ -1,6 +1,5 @@
 import { IEventListener, IEventListenerOptions, IEventListenerMap, IEventListenerItem, IEventListenerId, IEvent, IObject, IEventTarget, ILeafEventerModule } from '@leafer/interface'
 
-
 const empty = {}
 
 export const LeafEventer: ILeafEventerModule = {
@@ -50,13 +49,13 @@ export const LeafEventer: ILeafEventerModule = {
         })
     },
 
-    on__(type: string | string[], listener: IEventListener, bind?: IObject, options?: IEventListenerOptions | boolean): IEventListenerId {
+    on_(type: string | string[], listener: IEventListener, bind?: IObject, options?: IEventListenerOptions | boolean): IEventListenerId {
         if (bind) listener = listener.bind(bind)
         this.on(type, listener, options)
         return { type, listener, options }
     },
 
-    off__(id: IEventListenerId | IEventListenerId[]): void {
+    off_(id: IEventListenerId | IEventListenerId[]): void {
         if (!id) return
         const list = id instanceof Array ? id : [id]
         list.forEach(item => {
@@ -77,7 +76,10 @@ export const LeafEventer: ILeafEventerModule = {
             for (let i = 0, len = list.length; i < len; i++) {
                 item = list[i]
                 item.listener(event)
-                if (item.once) this.off(type, item.listener, capture)
+                if (item.once) {
+                    this.off(type, item.listener, capture)
+                    i--, len--
+                }
                 if (event && (event as IEvent).isStopNow) break
             }
         }

package/src/LeafHit.ts

@@ -1,24 +1,23 @@
-import { ILeafHitModule, IRadiusPointData } from '@leafer/interface'
+import { ILeafHitModule, IRadiusPointData, ILeaferCanvas } from '@leafer/interface'
 import { PointHelper } from '@leafer/math'
 
 
-const { toLocalRadiusPoint } = PointHelper
-const local = {} as IRadiusPointData
+const { toInnerRadiusPointOf } = PointHelper
+const inner = {} as IRadiusPointData
 
 export const LeafHit: ILeafHitModule = {
 
-    __updateHitCanvas(): void {
-        if (!this.__hitCanvas) this.__hitCanvas = this.leafer.hitCanvasManager.getPathType(this)
-        this.__drawRenderPath(this.__hitCanvas)
-    },
-
     __hitWorld(point: IRadiusPointData): boolean {
         if (this.__layout.hitCanvasChanged) {
             this.__updateHitCanvas()
             this.__layout.hitCanvasChanged = false
         }
-        toLocalRadiusPoint(point, this.__world, local)
-        return this.__hit(local)
+        toInnerRadiusPointOf(point, this.__world, inner)
+        return this.__hit(inner)
+    },
+
+    __drawHitPath(canvas: ILeaferCanvas): void {
+        this.__drawRenderPath(canvas)
     }
 
 }

package/src/LeafMask.ts

@@ -0,0 +1,33 @@
+import { ILeaf, ILeaferCanvas, ILeafMaskModule } from '@leafer/interface'
+
+
+export const LeafMask: ILeafMaskModule = {
+
+    __updateMask(value?: boolean): void {
+        this.__hasMask = value ? true : this.children.some(item => item.__.isMask)
+    },
+
+    __renderMask(canvas: ILeaferCanvas, content: ILeaferCanvas, mask: ILeaferCanvas): void {
+        content.resetTransform()
+        content.useMask(mask)
+        canvas.resetTransform()
+        canvas.copyWorld(content)
+    },
+
+    __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--
+                }
+            }
+        }
+    }
+
+}

package/src/LeafMatrix.ts

@@ -10,10 +10,10 @@ export const LeafMatrix: ILeafMatrixModule = {
     __updateWorldMatrix(): void {
 
         const pw = this.parent ? this.parent.__world : defaultMatrix
-        const r = this.__relative
+        const r = this.__local
         const w = this.__world
 
-        if (this.__layout.matrixChanged) this.__updateRelativeMatrix()
+        if (this.__layout.matrixChanged) this.__updateLocalMatrix()
 
         if (this.__layout.affectScaleOrRotation) {
             w.a = r.a * pw.a + r.b * pw.c
@@ -32,9 +32,9 @@ export const LeafMatrix: ILeafMatrixModule = {
         }
     },
 
-    __updateRelativeMatrix(): void {
+    __updateLocalMatrix(): void {
 
-        const r = this.__relative
+        const r = this.__local
         const layout = this.__layout
 
         if (layout.affectScaleOrRotation) {

package/src/LeafRender.ts

@@ -7,7 +7,7 @@ export const LeafRender: ILeafRenderModule = {
         if (this.__worldOpacity) {
             canvas.setWorld(this.__world, options.matrix)
             canvas.opacity = this.__worldOpacity
-            this.__complex ? this.__draw(canvas, options) : this.__drawFast(canvas, options)
+            this.__draw(canvas, options)
         }
     },
 

package/src/index.ts

@@ -4,4 +4,5 @@ export { LeafMatrix } from './LeafMatrix'
 export { LeafBounds } from './LeafBounds'
 export { LeafHit } from './LeafHit'
 export { LeafRender } from './LeafRender'
+export { LeafMask } from './LeafMask'