@leafer/display-module 1.0.0-alpha.1

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023-present, Chao (Leafer) Wan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# @leafer/display-module

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@leafer/display-module",
+  "version": "1.0.0-alpha.1",
+  "description": "@leafer/display-module",
+  "author": "Chao (Leafer) Wan",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "files": ["src"],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/leaferjs/leafer.git"
+  },
+  "homepage": "https://github.com/leaferjs/leafer/tree/main/packages/display-module",
+  "bugs": "https://github.com/leaferjs/leafer/issues",
+  "keywords": [
+    "leafer",
+    "leaferjs"
+  ],
+  "dependencies": {
+    "@leafer/event": "1.0.0-alpha.1",
+    "@leafer/math": "1.0.0-alpha.1"
+  },
+  "devDependencies": {
+     "@leafer/interface": "1.0.0-alpha.1"
+  }
+}

package/src/LeafBounds.ts

@@ -0,0 +1,119 @@
+import { ILeafBoundsModule } from '@leafer/interface'
+import { BoundsHelper } from '@leafer/math'
+
+
+const { setByBoundsTimesMatrix } = BoundsHelper
+
+export const LeafBounds: ILeafBoundsModule = {
+
+    __updateWorldBounds(): void {
+
+        if (this.__layout.boundsChanged) {
+
+            let resize: boolean
+            const layout = this.__layout
+
+
+            if (layout.boxBoundsChanged) {
+
+                this.__updatePath()
+                this.__updateRenderPath()
+
+                this.__updateBoxBounds()
+                layout.boxBoundsChanged = false
+                resize = true
+            }
+
+
+            if (layout.localBoxBoundsChanged) { // position change
+
+                this.__updateRelativeBoxBounds()
+                layout.localBoxBoundsChanged = false
+
+                if (layout.eventBoundsSpreadWidth) layout.eventBoundsChanged = true
+                if (layout.renderBoundsSpreadWidth) layout.renderBoundsChanged = true
+                this.parent?.__layout.boxBoundsChange()
+            }
+
+
+            if (layout.eventBoundsChanged) {
+
+                layout.eventBoundsSpreadWidth = this.__updateEventBoundsSpreadWidth()
+
+                if (layout.eventBoundsSpreadWidth) {
+
+                    if (layout.eventBounds === layout.boxBounds) {
+                        layout.eventBoundsSpread()
+                    }
+
+                    this.__updateEventBounds()
+                    this.__updateRelativeEventBounds()
+                    layout.eventBoundsChanged = false
+
+                    if (layout.renderBoundsSpreadWidth) layout.renderBoundsChanged = true
+
+                } else {
+                    layout.eventBoundsSpreadCancel()
+                }
+
+                this.parent?.__layout.eventBoundsChange()
+                resize || (resize = true)
+            }
+
+
+            if (layout.renderBoundsChanged) {
+
+                layout.renderBoundsSpreadWidth = this.__updateRenderBoundsSpreadWidth()
+
+                if (layout.renderBoundsSpreadWidth) {
+
+                    if (layout.renderBounds === layout.boxBounds || layout.renderBounds === layout.eventBounds) {
+                        layout.renderBoundsSpread()
+                    }
+
+                    this.__updateRenderBounds()
+                    this.__updateRelativeRenderBounds()
+                    layout.renderBoundsChanged = false
+
+                } else {
+                    layout.renderBoundsSpreadCancel()
+                }
+
+                this.parent?.__layout.renderBoundsChange()
+            }
+
+
+            layout.boundsChanged = false
+
+            setByBoundsTimesMatrix(this.__world, this.__layout.renderBounds, this.__world)
+
+            if (resize) this.__onUpdateSize()
+
+        } else {
+            setByBoundsTimesMatrix(this.__world, this.__layout.renderBounds, this.__world)
+        }
+
+    },
+
+    __updateRelativeBoxBounds(): void {
+        setByBoundsTimesMatrix(this.__relative, this.__layout.boxBounds, this.__relative)
+    },
+
+    __updateRelativeEventBounds(): void {
+        setByBoundsTimesMatrix(this.__layout.relativeEventBounds, this.__layout.eventBounds, this.__relative)
+    },
+
+    __updateRelativeRenderBounds(): void {
+        setByBoundsTimesMatrix(this.__layout.relativeRenderBounds, this.__layout.renderBounds, this.__relative)
+    },
+
+
+    __updateBoxBounds(): void {
+        const b = this.__layout.boxBounds
+        b.x = 0
+        b.y = 0
+        b.width = this.__.width
+        b.height = this.__.height
+    }
+
+}

package/src/LeafDataProxy.ts

@@ -0,0 +1,24 @@
+import { ILeafDataProxyModule } from '@leafer/interface'
+import { AttrEvent } from '@leafer/event'
+
+
+export const LeafDataProxy: ILeafDataProxyModule = {
+
+    __set(attrName: string, newValue: unknown): void {
+        const oldValue = this.__.__getInput(attrName)
+        if (oldValue !== newValue) {
+            this.__[attrName] = newValue
+            this.root.emitEvent(new AttrEvent(AttrEvent.CHANGE, this, attrName, oldValue, newValue))
+        }
+    },
+
+    __get(attrName: string): unknown {
+        return this.__.__getInput(attrName)
+    },
+
+    __updateAttr(attrName: string): void {
+        const value = this.__.__getInput(attrName)
+        this.root?.emitEvent(new AttrEvent(AttrEvent.CHANGE, this, attrName, value, value))
+    }
+
+}

package/src/LeafEventer.ts

@@ -0,0 +1,122 @@
+import { IEventListener, IEventListenerOptions, IEventListenerMap, IEventListenerItem, IEventListenerId, IEvent, IObject, IEventTarget, ILeafEventerModule } from '@leafer/interface'
+
+
+const empty = {}
+
+export const LeafEventer: ILeafEventerModule = {
+
+    on(type: string | string[], listener: IEventListener, options?: IEventListenerOptions | boolean): void {
+        let capture: boolean, once: boolean
+        if (options) {
+            const isBoolean = typeof options === 'boolean'
+            capture = isBoolean ? options : options.capture
+            once = isBoolean ? false : options.once
+        }
+
+        let events: IEventListenerItem[]
+        const map = __getListenerMap(this, capture, true)
+        const typeList = typeof type === 'string' ? type.split(' ') : type
+        const item = once ? { listener, once } : { listener }
+
+        typeList.forEach(type => {
+            if (type) {
+                events = map[type]
+                if (events) {
+                    if (events.findIndex(item => item.listener === listener) === -1) events.push(item)
+                } else {
+                    map[type] = [item]
+                }
+            }
+        })
+    },
+
+    off(type: string | string[], listener: IEventListener, options?: IEventListenerOptions | boolean): void {
+        let capture: boolean
+        if (options) capture = typeof options === 'boolean' ? options : options.capture
+
+        let events: IEventListenerItem[], index: number
+        const map = __getListenerMap(this, capture)
+        const typeList = typeof type === 'string' ? type.split(' ') : 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]
+                }
+            }
+        })
+    },
+
+    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 {
+        if (!id) return
+        const list = id instanceof Array ? id : [id]
+        list.forEach(item => {
+            this.off(item.type, item.listener, item.options)
+        })
+        list.length = 0
+    },
+
+    once(type: string | string[], listener: IEventListener, capture?: boolean): void {
+        this.on(type, listener, { once: true, capture })
+    },
+
+    emit(type: string, event?: IEvent | IObject, capture?: boolean): void {
+        const map = __getListenerMap(this, capture)
+        const list = map[type]
+        if (list) {
+            let item: IEventListenerItem
+            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 (event && (event as IEvent).isStopNow) break
+            }
+        }
+    },
+
+    emitEvent(event: IEvent, capture?: boolean): void {
+        event.current = this
+        this.emit(event.type, event, capture)
+    },
+
+    hasEvent(type: string, capture?: boolean): boolean {
+        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]))
+        }
+    },
+
+}
+
+function __getListenerMap(eventer: IEventTarget, capture?: boolean, create?: boolean): IEventListenerMap {
+    if (capture) {
+
+        const { __captureMap: c } = eventer
+        if (c) {
+            return c
+        } else {
+            return create ? eventer.__captureMap = {} : empty
+        }
+
+    } else {
+
+        const { __bubbleMap: b } = eventer
+        if (b) {
+            return b
+        } else {
+            return create ? eventer.__bubbleMap = {} : empty
+        }
+
+    }
+}

package/src/LeafHit.ts

@@ -0,0 +1,24 @@
+import { ILeafHitModule, IRadiusPointData } from '@leafer/interface'
+import { PointHelper } from '@leafer/math'
+
+
+const { toLocalRadiusPoint } = PointHelper
+const innerPoint = {} 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, innerPoint)
+        return this.__hit(innerPoint)
+    }
+
+}

package/src/LeafMatrix.ts

@@ -0,0 +1,99 @@
+import { ILeafMatrixModule } from '@leafer/interface'
+import { OneRadian, MatrixHelper } from '@leafer/math'
+
+
+const { defaultMatrix } = MatrixHelper
+const { sin, cos } = Math
+
+export const LeafMatrix: ILeafMatrixModule = {
+
+    __updateWorldMatrix(): void {
+
+        const pw = this.parent ? this.parent.__world : defaultMatrix
+        const r = this.__relative
+        const w = this.__world
+
+        if (this.__layout.matrixChanged) this.__updateRelativeMatrix()
+
+        if (this.__layout.affectScaleOrRotation) {
+            w.a = r.a * pw.a + r.b * pw.c
+            w.b = r.a * pw.b + r.b * pw.d
+            w.c = r.c * pw.a + r.d * pw.c
+            w.d = r.c * pw.b + r.d * pw.d
+            w.e = r.e * pw.a + r.f * pw.c + pw.e
+            w.f = r.e * pw.b + r.f * pw.d + pw.f
+        } else {
+            w.a = pw.a
+            w.b = pw.b
+            w.c = pw.c
+            w.d = pw.d
+            w.e = r.e * pw.a + r.f * pw.c + pw.e
+            w.f = r.e * pw.b + r.f * pw.d + pw.f
+        }
+    },
+
+    __updateRelativeMatrix(): void {
+
+        const r = this.__relative
+        const layout = this.__layout
+
+        if (layout.affectScaleOrRotation) {
+
+            const { scaleX, scaleY } = this.__
+
+            if (layout.affectRotation) {
+
+                if (layout.scaleChanged || layout.rotationChanged) {
+
+                    let { rotation, skewX, skewY } = this.__
+
+                    if (rotation || skewX || skewY) {
+
+                        rotation *= OneRadian
+                        if (skewX) skewX *= OneRadian
+                        if (skewY) skewY *= OneRadian
+
+                        r.a = scaleX * cos(rotation + skewY)
+                        r.b = scaleX * sin(rotation + skewY)
+                        r.c = scaleY * -sin(rotation - skewX)
+                        r.d = scaleY * cos(rotation - skewX)
+
+                    } else {
+
+                        r.a = scaleX
+                        r.b = 0
+                        r.c = 0
+                        r.d = scaleY
+
+                        layout.affectRotation = false
+                    }
+
+                    layout.scaleChanged = false
+                    layout.rotationChanged = false
+
+                }
+
+            } else {
+
+                if (layout.scaleChanged) {
+                    r.a = scaleX
+                    r.d = scaleY
+                    layout.scaleChanged = false
+                }
+
+            }
+
+        }
+
+        if (layout.positionChanged) {
+            r.e = this.__.x
+            r.f = this.__.y
+            layout.positionChanged = false
+        }
+
+        this.__layout.matrixChanged = false
+    }
+
+}
+
+

package/src/LeafRender.ts

@@ -0,0 +1,19 @@
+import { ILeaferCanvas, IRenderOptions, ILeafRenderModule } from '@leafer/interface'
+
+
+export const LeafRender: ILeafRenderModule = {
+
+    __render(canvas: ILeaferCanvas, options: IRenderOptions): void {
+        if (this.__worldOpacity) {
+            canvas.setWorld(this.__world, options.matrix)
+            canvas.opacity = this.__worldOpacity
+            this.__complex ? this.__draw(canvas, options) : this.__drawFast(canvas, options)
+        }
+    },
+
+    __updateWorldOpacity(): void {
+        this.__worldOpacity = this.__.visible ? (this.parent ? this.parent.__worldOpacity * this.__.opacity : this.__.opacity) : 0
+        if (this.__layout.opacityChanged) this.__layout.opacityChanged = false
+    }
+
+}

package/src/index.ts

@@ -0,0 +1,7 @@
+export { LeafEventer } from './LeafEventer'
+export { LeafDataProxy } from './LeafDataProxy'
+export { LeafMatrix } from './LeafMatrix'
+export { LeafBounds } from './LeafBounds'
+export { LeafHit } from './LeafHit'
+export { LeafRender } from './LeafRender'
+