@leafer/layouter 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/layouter

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@leafer/layouter",
+  "version": "1.0.0-alpha.1",
+  "description": "@leafer/canvas",
+  "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/canvas/canvas",
+  "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",
+    "@leafer/list": "1.0.0-alpha.1",
+    "@leafer/data": "1.0.0-alpha.1",
+    "@leafer/helper": "1.0.0-alpha.1",
+    "@leafer/debug": "1.0.0-alpha.1"
+  },
+  "devDependencies": {
+     "@leafer/interface": "1.0.0-alpha.1"
+  }
+}

package/src/LayoutBlockData.ts

@@ -0,0 +1,52 @@
+import { IBounds, ILayoutBlockData, ILeafList, ILeaf } from '@leafer/interface'
+import { Bounds, BoundsHelper } from '@leafer/math'
+import { LeafBoundsHelper } from '@leafer/helper'
+import { LeafList } from '@leafer/list'
+
+
+const { worldBounds } = LeafBoundsHelper
+const { setByListWithHandle } = BoundsHelper
+
+export class LayoutBlockData implements ILayoutBlockData {
+
+    public updatedList: ILeafList
+    public updatedBounds: IBounds = new Bounds()
+
+    public beforeBounds: IBounds = new Bounds()
+    public afterBounds: IBounds = new Bounds()
+
+    constructor(list: ILeafList | ILeaf[]) {
+        if (list instanceof Array) list = new LeafList(list)
+        this.updatedList = list
+    }
+
+    public setBefore(): void {
+        setByListWithHandle(this.beforeBounds, this.updatedList.list, worldBounds)
+    }
+
+    public setAfter(): void {
+        setByListWithHandle(this.afterBounds, this.updatedList.list, worldBounds)
+        this.__computeChange()
+    }
+
+    public merge(data: ILayoutBlockData): void {
+        this.updatedList.pushList(data.updatedList.list)
+        this.beforeBounds.add(data.beforeBounds)
+        this.afterBounds.add(data.afterBounds)
+        this.updatedBounds.add(data.updatedBounds)
+    }
+
+    protected __computeChange(): void {
+        const { updatedBounds: changedBounds } = this
+        changedBounds.setByList([this.beforeBounds, this.afterBounds])
+        if (!changedBounds.isEmpty()) {
+            changedBounds.spread(2)
+            changedBounds.ceil()
+        }
+    }
+
+    public destroy(): void {
+        this.updatedList = undefined
+    }
+
+}

package/src/Layouter.ts

@@ -0,0 +1,189 @@
+import { ILayouter, ILeaf, ILayoutBlockData, IEventListenerId, ILayouterConfig, ILeafList } from '@leafer/interface'
+import { LayoutEvent, RenderEvent, WatchEvent } from '@leafer/event'
+import { LeafLevelList, LeafList } from '@leafer/list'
+import { BranchHelper, LeafHelper } from '@leafer/helper'
+import { DataHelper } from '@leafer/data'
+import { Run } from '@leafer/debug'
+
+import { updateBounds, updateMatrix, updateChange } from './LayouterHelper'
+import { LayoutBlockData } from './LayoutBlockData'
+
+
+const { updateAllWorldMatrix, updateAllChange } = LeafHelper
+const { pushAllBranchStack, updateWorldBoundsByBranchStack } = BranchHelper
+
+export class Layouter implements ILayouter {
+
+    public target: ILeaf
+    public layoutedBlocks: ILayoutBlockData[]
+    public totalTimes: number = 0
+    public times: number
+    public changed: boolean = true
+
+    public config: ILayouterConfig = {
+        partLayout: {
+            maxTimes: 3
+        }
+    }
+
+    public running: boolean
+
+    protected updateList: ILeafList
+    protected levelList: LeafLevelList = new LeafLevelList()
+    protected eventIds: IEventListenerId[]
+
+    constructor(target: ILeaf, userConfig?: ILayouterConfig) {
+        this.target = target
+        if (userConfig) this.config = DataHelper.default(userConfig, this.config)
+        this.listenEvents()
+    }
+
+    public start(): void {
+        this.running = true
+    }
+
+    public stop(): void {
+        this.running = false
+    }
+
+    protected listenEvents(): void {
+        const { target } = this
+        this.eventIds = [
+            target.on__(LayoutEvent.REQUEST, this.layout, this),
+            target.on__(LayoutEvent.AGAIN, this.layoutOnce, this),
+            target.on__(WatchEvent.DATA, this.onReceiveWatchData, this),
+            target.on__(RenderEvent.REQUEST, this.onChange, this),
+        ]
+    }
+
+    protected removeListenEvents(): void {
+        this.target.off__(this.eventIds)
+    }
+
+    protected onReceiveWatchData(event: WatchEvent): void {
+        this.updateList = event.data.updatedList
+    }
+
+    protected onChange(): void {
+        this.changed = true
+    }
+
+    public layout(): void {
+        if (!this.running) return
+        const { target } = this
+        const { START, LAYOUT, END } = LayoutEvent
+        this.times = 0
+        this.changed = false
+        target.emit(START)
+        this.layoutOnce()
+        target.emitEvent(new LayoutEvent(LAYOUT, this.layoutedBlocks))
+        target.emitEvent(new LayoutEvent(END, this.layoutedBlocks))
+        this.layoutedBlocks = undefined
+    }
+
+    public layoutOnce(): void {
+
+        this.totalTimes++
+        this.times++
+
+        this.target.emit(WatchEvent.REQUEST)
+        if (this.totalTimes > 1) {
+            this.partLayout()
+        } else {
+            this.fullLayout()
+        }
+    }
+
+    public partLayout(): void {
+        if (!this.updateList?.length) return
+
+        const t = Run.start('part layout')
+        const { target, updateList } = this
+        const { BEFORE_ONCE, ONCE, AFTER_ONCE } = LayoutEvent
+
+        const blocks = this.getBlocks(updateList)
+        blocks.forEach(item => { item.setBefore() })
+        target.emitEvent(new LayoutEvent(BEFORE_ONCE, blocks))
+
+        updateList.sort()
+        updateMatrix(updateList, this.levelList)
+        updateBounds(this.levelList)
+        updateChange(updateList)
+
+        blocks.forEach(item => { item.setAfter() })
+        target.emitEvent(new LayoutEvent(ONCE, blocks))
+        target.emitEvent(new LayoutEvent(AFTER_ONCE, blocks))
+
+        this.setBlocks(blocks)
+
+        this.levelList.reset()
+        this.updateList = undefined
+        Run.end(t)
+
+        this.__checkAgain()
+    }
+
+    public fullLayout(): void {
+        const t = Run.start('full layout')
+
+        const { target } = this
+        const { BEFORE_ONCE, ONCE, AFTER_ONCE } = LayoutEvent
+
+        const blocks = this.getBlocks(new LeafList(target))
+        target.emitEvent(new LayoutEvent(BEFORE_ONCE, blocks))
+
+        Layouter.fullLayout(target)
+
+        blocks.forEach(item => { item.setAfter() })
+        target.emitEvent(new LayoutEvent(ONCE, blocks))
+        target.emitEvent(new LayoutEvent(AFTER_ONCE, blocks))
+
+        this.setBlocks(blocks)
+
+        Run.end(t)
+
+        this.__checkAgain()
+    }
+
+    protected __checkAgain(): void {
+        if (this.changed && this.times <= this.config.partLayout.maxTimes) this.target.emit(LayoutEvent.AGAIN) // 防止更新布局过程中产生了属性修改
+    }
+
+
+    public createBlock(data: ILeafList | ILeaf[]): ILayoutBlockData {
+        return new LayoutBlockData(data)
+    }
+
+    public getBlocks(list: ILeafList): ILayoutBlockData[] {
+        return [this.createBlock(list)]
+    }
+
+    public setBlocks(current: ILayoutBlockData[]) {
+        this.layoutedBlocks ? this.layoutedBlocks.push(...current) : this.layoutedBlocks = current
+    }
+
+
+    static fullLayout(target: ILeaf): void {
+        updateAllWorldMatrix(target)
+
+        if (target.__isBranch) {
+            const branchStack: ILeaf[] = [target]
+            pushAllBranchStack(target, branchStack)
+            updateWorldBoundsByBranchStack(branchStack)
+        } else {
+            target.__updateWorldBounds()
+        }
+
+        updateAllChange(target)
+    }
+
+    destroy(): void {
+        if (this.target) {
+            this.removeListenEvents()
+            this.target = undefined
+        }
+    }
+
+}
+
+

package/src/LayouterHelper.ts

@@ -0,0 +1,67 @@
+import { ILeaf, ILeafLayout, ILeafLevelList, ILeafList } from '@leafer/interface'
+import { BranchHelper, LeafHelper } from '@leafer/helper'
+
+
+const { updateAllWorldMatrix, updateAllWorldOpacity } = LeafHelper
+const { pushAllChildBranch, pushAllParent } = BranchHelper
+
+
+export function updateMatrix(updateList: ILeafList, levelList: ILeafLevelList): void {
+
+    let layout: ILeafLayout
+    updateList.list.forEach(leaf => {  // 更新矩阵, 所有子元素，和父元素都需要更新bounds
+        layout = leaf.__layout
+        if (levelList.without(leaf)) { // 防止重复， 子元素可能已经被父元素更新过
+
+            if (layout.matrixChanged) {
+
+                updateAllWorldMatrix(leaf)
+
+                levelList.push(leaf)
+                if (leaf.__isBranch) pushAllChildBranch(leaf, levelList)
+                pushAllParent(leaf, levelList)
+
+            } else if (layout.boundsChanged) {
+
+                levelList.push(leaf)
+                if (leaf.__isBranch) leaf.__tempNumber = 0  // 标识需要更新子Leaf元素的WorldBounds分支, 0表示不需要更新
+                pushAllParent(leaf, levelList)
+            }
+        }
+    })
+
+}
+
+
+export function updateBounds(boundsList: ILeafLevelList): void {
+
+    let itemList: ILeaf[], branch: ILeaf
+    boundsList.sort(true)
+    boundsList.levels.forEach(level => {
+        itemList = boundsList.levelMap[level]
+        for (let i = 0, len = itemList.length; i < len; i++) {
+            branch = itemList[i]
+
+            // 标识了需要更新子元素
+            if (branch.__isBranch && branch.__tempNumber) {
+                for (let j = 0, jLen = branch.children.length; j < jLen; j++) {
+                    if (!branch.children[j].__isBranch) {
+                        branch.children[j].__updateWorldBounds()
+                    }
+                }
+            }
+
+            branch.__updateWorldBounds()
+
+        }
+    })
+
+}
+
+
+export function updateChange(updateList: ILeafList): void {
+    updateList.list.forEach(leaf => {
+        if (leaf.__layout.opacityChanged) updateAllWorldOpacity(leaf)
+        leaf.__updateChange()
+    })
+}

package/src/index.ts

@@ -0,0 +1 @@
+export { Layouter } from './Layouter'