@leafer/renderer 1.0.0-alpha.7 → 1.0.0-bate

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer/renderer",
-  "version": "1.0.0-alpha.7",
+  "version": "1.0.0-bate",
   "description": "@leafer/renderer",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
@@ -19,13 +19,13 @@
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/event": "1.0.0-alpha.7",
-    "@leafer/math": "1.0.0-alpha.7",
-    "@leafer/data": "1.0.0-alpha.7",
-    "@leafer/platform": "1.0.0-alpha.7",
-    "@leafer/debug": "1.0.0-alpha.7"
+    "@leafer/event": "1.0.0-bate",
+    "@leafer/math": "1.0.0-bate",
+    "@leafer/data": "1.0.0-bate",
+    "@leafer/platform": "1.0.0-bate",
+    "@leafer/debug": "1.0.0-bate"
   },
   "devDependencies": {
-    "@leafer/interface": "1.0.0-alpha.7"
+    "@leafer/interface": "1.0.0-bate"
   }
 }

package/src/Renderer.ts

@@ -1,4 +1,4 @@
-import { ILeaf, ILeaferCanvas, IRenderer, IRendererConfig, IEventListenerId, IBounds, IFunction, ILayoutBlockData } from '@leafer/interface'
+import { ILeaf, ILeaferCanvas, IRenderer, IRendererConfig, IEventListenerId, IBounds, IFunction, IRenderOptions } from '@leafer/interface'
 import { LayoutEvent, RenderEvent, ResizeEvent } from '@leafer/event'
 import { Bounds } from '@leafer/math'
 import { DataHelper } from '@leafer/data'
@@ -6,80 +6,54 @@ import { Platform } from '@leafer/platform'
 import { Debug, Run } from '@leafer/debug'
 
 
+const debug = Debug.get('Renderer')
+
 export class Renderer implements IRenderer {
 
     public target: ILeaf
     public canvas: ILeaferCanvas
-    public layoutedBlocks: ILayoutBlockData[]
+    public updateBlocks: IBounds[]
 
+    public FPS = 60
     public totalTimes = 0
     public times: number = 0
 
-    public FPS = 60
+    public running: boolean
+    public rendering: boolean
+
+    public waitAgain: boolean
+    public changed: boolean
 
     public config: IRendererConfig = {
+        usePartRender: true,
         maxFPS: 60
     }
 
-    public running: boolean
+    protected renderBounds: IBounds
+    protected renderOptions: IRenderOptions
+    protected totalBounds: IBounds
 
-    private _changed = false
-    set changed(value: boolean) {
-        if (value) {
-            if (!this._changed) {
-                this._changed = true
-                this.requestRender()
-            }
-        } else {
-            this._changed = false
-        }
-    }
-    get changed(): boolean { return this._changed }
+    protected __eventIds: IEventListenerId[]
 
-    protected eventIds: IEventListenerId[]
+    protected get needFill(): boolean { return !!(!this.canvas.allowBackgroundColor && this.config.fill) }
 
-    constructor(target: ILeaf, canvas: ILeaferCanvas, userConfig: IRendererConfig) {
+    constructor(target: ILeaf, canvas: ILeaferCanvas, userConfig?: IRendererConfig) {
         this.target = target
         this.canvas = canvas
         if (userConfig) this.config = DataHelper.default(userConfig, this.config)
-        this.listenEvents()
+        this.__listenEvents()
     }
 
     public start(): void {
         this.running = true
-        this.changed = true
     }
 
     public stop(): void {
         this.running = false
     }
 
-    private listenEvents(): void {
-        const { target } = this
-        this.eventIds = [
-            target.on__(RenderEvent.REQUEST, this.onRequest, this),
-            target.on__(LayoutEvent.END, this.onLayoutEnd, this),
-            target.on__(RenderEvent.AGAIN, this.renderOnce, this),
-            target.on__(ResizeEvent.RESIZE, this.onResize, this)
-        ]
-    }
-
-    private removeListenEvents(): void {
-        this.target.off__(this.eventIds)
-    }
-
-    protected onResize(e: ResizeEvent): void {
-        if (e.bigger || !e.samePixelRatio) {
-            const { width, height } = e.old
-            const bounds = new Bounds(0, 0, width, height)
-            if (!bounds.includes(this.target.__world)) {
-                this.target.__updateAttr('fill')
-                this.changed = true
-            }
-        }
-    }
-
-    protected onRequest(): void {
+    public update(): void {
+        if (!this.changed) this.__requestRender()
         this.changed = true
     }
 
@@ -87,112 +61,153 @@ export class Renderer implements IRenderer {
         this.target.emit(LayoutEvent.REQUEST)
     }
 
-    public onLayoutEnd(event: LayoutEvent): void {
-        this.layoutedBlocks = event.data
-    }
-
     public render(callback?: IFunction): void {
+        if (!(this.running)) return
+
         const { target } = this
-        const { START, RENDER, END } = RenderEvent
         this.times = 0
-        target.emit(START)
-        this.renderOnce(callback)
-        target.emit(RENDER)
-        target.emit(END)
+        this.totalBounds = new Bounds()
+
+        debug.log(target.innerName, '--->')
+
+        try {
+            this.emitRender(RenderEvent.START)
+            this.renderOnce(callback)
+            this.emitRender(RenderEvent.END, this.totalBounds)
+        } catch (e) {
+            debug.error(e)
+        }
+
+        debug.log('-------------|')
+    }
+
+    public renderAgain(): void {
+        if (this.rendering) {
+            this.waitAgain = true
+        } else {
+            this.renderOnce()
+        }
     }
 
     public renderOnce(callback?: IFunction): void {
-        const { target } = this
-        const { BEFORE_ONCE, ONCE, AFTER_ONCE } = RenderEvent
+        if (this.rendering) return debug.warn('rendering')
+        if (this.times > 3) return debug.warn('render max times')
 
         this.times++
         this.totalTimes++
+
+        this.rendering = true
         this.changed = false
+        this.renderBounds = new Bounds()
+        this.renderOptions = {}
 
         if (callback) {
-
-            target.emit(BEFORE_ONCE)
-
+            this.emitRender(RenderEvent.BEFORE)
             callback()
-
         } else {
-
             this.requestLayout()
 
-            target.emit(BEFORE_ONCE)
+            this.emitRender(RenderEvent.BEFORE)
 
-            if (this.totalTimes > 1) {
-                if (this.layoutedBlocks) this.partRender()
+            if (this.config.usePartRender && this.totalTimes > 1) {
+                this.partRender()
             } else {
                 this.fullRender()
             }
-
         }
 
-        target.emit(ONCE)
-        target.emit(AFTER_ONCE)
+        this.emitRender(RenderEvent.RENDER, this.renderBounds, this.renderOptions)
+        this.emitRender(RenderEvent.AFTER, this.renderBounds, this.renderOptions)
 
+        this.updateBlocks = null
+        this.rendering = false
 
-        if (this.layoutedBlocks) {
-            this.layoutedBlocks.forEach(item => { item.destroy() })
-            this.layoutedBlocks = undefined
+        if (this.waitAgain) {
+            this.waitAgain = false
+            this.renderOnce()
         }
-
-        this.__checkAgain()
     }
 
-    protected __checkAgain(): void {
-        if (this.changed && this.times < 3) this.target.emit(RenderEvent.AGAIN)
+    public partRender(): void {
+        const { canvas, updateBlocks: list } = this
+        if (!list) return debug.warn('PartRender: need update attr')
+
+        if (list.some(block => block.includes(this.target.__world))) this.mergeBlocks()
+        list.forEach(block => { if (canvas.bounds.hit(block) && !block.isEmpty()) this.clipRender(block) })
     }
 
+    public clipRender(block: IBounds): void {
+        const t = Run.start('PartRender')
+        const { canvas } = this
 
-    protected partRender(): void {
-        const { canvas, layoutedBlocks } = this
+        const bounds = block.getIntersect(canvas.bounds)
+        const includes = block.includes(this.target.__world)
+        const realBounds = new Bounds().copy(bounds)
 
-        if (layoutedBlocks.some(block => block.updatedBounds.includes(this.target.__world))) {
-            this.fullRender(canvas.bounds)
+        canvas.save()
+
+        if (includes && !Debug.showRepaint) {
+            canvas.clear()
         } else {
-            let bounds: IBounds
-            layoutedBlocks.forEach(block => {
-                bounds = block.updatedBounds
-                if (canvas.bounds.hit(bounds) && !bounds.isEmpty()) this.clipRender(bounds.getIntersect(canvas.bounds))
-            })
+            bounds.spread(1 + 1 / this.canvas.pixelRatio).ceil()
+            canvas.clearWorld(bounds, true)
+            canvas.clipWorld(bounds, true)
         }
+
+        this.__render(bounds, realBounds)
+        canvas.restore()
+
+        Run.end(t)
     }
 
-    public clipRender(bounds: IBounds): void {
-        const t = Run.start('part render')
-        const { canvas, target } = this
+    public fullRender(): void {
+        const t = Run.start('FullRender')
+        const { canvas } = this
 
         canvas.save()
-        canvas.clearBounds(bounds)
-        if (Debug.showRepaint) canvas.strokeBounds(bounds, 'red')
-        canvas.clipBounds(bounds)
-        target.__render(canvas, { bounds })
+        canvas.clear()
+        this.__render(canvas.bounds)
         canvas.restore()
 
         Run.end(t)
     }
 
-    public fullRender(bounds?: IBounds): void {
-        const { canvas, target } = this
-        Renderer.fullRender(target, canvas, bounds)
-        if (Debug.showRepaint) canvas.strokeBounds(bounds || canvas.bounds, 'red')
+    protected __render(bounds: IBounds, realBounds?: IBounds): void {
+        const options: IRenderOptions = bounds?.includes(this.target.__world) ? {} : { bounds }
+
+        if (this.needFill) this.canvas.fillWorld(bounds, this.config.fill)
+        if (Debug.showRepaint) this.canvas.strokeWorld(bounds, 'red')
+
+        this.target.__render(this.canvas, options)
+
+        this.renderBounds = realBounds || bounds
+        this.renderOptions = options
+        this.totalBounds.isEmpty() ? this.totalBounds = this.renderBounds : this.totalBounds.add(this.renderBounds)
+
+        if (Debug.showHitView) this.renderHitView(options)
+        if (Debug.showBoundsView) this.renderBoundsView(options)
     }
 
-    static fullRender(target: ILeaf, canvas: ILeaferCanvas, bounds?: IBounds): void {
-        const t = Run.start('full render')
-        if (!bounds) bounds = canvas.bounds
+    public renderHitView(_options: IRenderOptions): void { }
 
-        canvas.save()
-        canvas.clear()
-        target.__render(canvas, canvas.bounds.includes(target.__world) ? {} : { bounds })
-        canvas.restore()
+    public renderBoundsView(_options: IRenderOptions): void { }
 
-        Run.end(t)
+    public addBlock(block: IBounds): void {
+        if (!this.updateBlocks) this.updateBlocks = []
+        this.updateBlocks.push(block)
     }
 
-    private requestRender(): void {
+    public mergeBlocks(): void {
+        const { updateBlocks: list } = this
+        if (list) {
+            const bounds = new Bounds()
+            bounds.setByList(list)
+            list.length = 0
+            list.push(bounds)
+        }
+    }
+
+    protected __requestRender(): void {
         const startTime = Date.now()
         Platform.requestRender(() => {
             if (this.changed) {
@@ -202,12 +217,58 @@ export class Renderer implements IRenderer {
         })
     }
 
+    protected __onResize(e: ResizeEvent): void {
+        if (this.canvas.unreal) return
+        if (e.bigger || !e.samePixelRatio) {
+            const { width, height } = e.old
+            const bounds = new Bounds(0, 0, width, height)
+            if (!bounds.includes(this.target.__world) || this.needFill || !e.samePixelRatio) {
+                this.addBlock(this.canvas.bounds)
+                this.target.forceUpdate('blendMode')
+            }
+        }
+    }
+
+    protected __onLayoutEnd(event: LayoutEvent): void {
+        if (event.data) event.data.map(item => {
+            let empty: boolean
+            if (item.updatedList) item.updatedList.list.some(leaf => {
+                empty = (!leaf.__world.width || !leaf.__world.height)
+                if (empty) {
+                    debug.warn(leaf.innerName, ': none bounds')
+                    empty = (!leaf.isBranch || leaf.isBranchLeaf) // render object
+                }
+                return empty
+            })
+            this.addBlock(empty ? this.canvas.bounds : item.updatedBounds)
+        })
+    }
+
+    protected emitRender(type: string, bounds?: IBounds, options?: IRenderOptions): void {
+        this.target.emitEvent(new RenderEvent(type, this.times, bounds, options))
+    }
+
+    protected __listenEvents(): void {
+        const { target } = this
+        this.__eventIds = [
+            target.on_(RenderEvent.REQUEST, this.update, this),
+            target.on_(LayoutEvent.END, this.__onLayoutEnd, this),
+            target.on_(RenderEvent.AGAIN, this.renderAgain, this),
+            target.on_(ResizeEvent.RESIZE, this.__onResize, this)
+        ]
+    }
+
+    protected __removeListenEvents(): void {
+        this.target.off_(this.__eventIds)
+    }
+
     public destroy(): void {
         if (this.target) {
-            this.removeListenEvents()
-            this.target = undefined
-            this.canvas = undefined
-            this.config = undefined
+            this.stop()
+            this.__removeListenEvents()
+            this.target = null
+            this.canvas = null
+            this.config = null
         }
     }
 }