@leafer/renderer 1.0.0-alpha.21 → 1.0.0-alpha.30

package/package.json

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

package/src/Renderer.ts

@@ -1,4 +1,4 @@
-import { ILeaf, ILeaferCanvas, IRenderer, IRendererConfig, IEventListenerId, IBounds, IFunction } 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'
@@ -19,6 +19,9 @@ export class Renderer implements IRenderer {
     public times: number = 0
 
     public running: boolean
+    public rendering: boolean
+
+    public waitAgain: boolean
     public changed: boolean
 
     public config: IRendererConfig = {
@@ -26,9 +29,15 @@ export class Renderer implements IRenderer {
         maxFPS: 60
     }
 
+    protected renderBounds: IBounds
+    protected renderOptions: IRenderOptions
+    protected totalBounds: IBounds
+
     protected __eventIds: IEventListenerId[]
 
-    constructor(target: ILeaf, canvas: ILeaferCanvas, userConfig: IRendererConfig) {
+    protected get needFill(): boolean { return !!(!this.canvas.allowBackgroundColor && this.config.fill) }
+
+    constructor(target: ILeaf, canvas: ILeaferCanvas, userConfig?: IRendererConfig) {
         this.target = target
         this.canvas = canvas
         if (userConfig) this.config = DataHelper.default(userConfig, this.config)
@@ -53,126 +62,151 @@ export class Renderer implements IRenderer {
     }
 
     public render(callback?: IFunction): void {
+        if (!(this.running)) return
+
         const { target } = this
         this.times = 0
+        this.totalBounds = new Bounds()
 
-        debug.log(target.innerId, '--->')
+        debug.log(target.innerName, '--->')
 
-        target.emit(RenderEvent.START)
-        this.renderOnce(callback)
-        target.emit(RenderEvent.RENDER)
-        target.emit(RenderEvent.END)
+        try {
+            this.emitRender(RenderEvent.START)
+            this.renderOnce(callback)
+            this.emitRender(RenderEvent.END, this.totalBounds)
+        } catch (e) {
+            debug.error(e)
+        }
 
-        debug.log(target.innerId, '---|')
+        debug.log('-------------|')
+    }
+
+    public renderAgain(): void {
+        if (this.rendering) {
+            this.waitAgain = true
+        } else {
+            this.renderOnce()
+        }
     }
 
     public renderOnce(callback?: IFunction): void {
-        const { target } = this
+        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(RenderEvent.BEFORE_ONCE)
-
+            this.emitRender(RenderEvent.BEFORE)
             callback()
-
         } else {
-
             this.requestLayout()
 
-            target.emit(RenderEvent.BEFORE_ONCE)
+            this.emitRender(RenderEvent.BEFORE)
 
             if (this.config.usePartRender && this.totalTimes > 1) {
                 this.partRender()
             } else {
                 this.fullRender()
             }
-
         }
 
-        target.emit(RenderEvent.ONCE)
-        target.emit(RenderEvent.AFTER_ONCE)
-
+        this.emitRender(RenderEvent.RENDER, this.renderBounds, this.renderOptions)
+        this.emitRender(RenderEvent.AFTER, this.renderBounds, this.renderOptions)
 
         this.updateBlocks = null
+        this.rendering = false
 
-        this.__checkAgain()
+        if (this.waitAgain) {
+            this.waitAgain = false
+            this.renderOnce()
+        }
     }
 
     public partRender(): void {
         const { canvas, updateBlocks: list } = this
+        if (!list) return debug.warn('PartRender: need update attr')
 
-        if (!list) {
-            debug.warn('PartRender: layoutedBlocks is empty')
-            this.fullRender(canvas.bounds)
-            return
-        }
-
-        if (list.some(block => block.includes(this.target.__world))) {
-            this.mergeBlocks()
-            this.clipRender(this.updateBlocks[0], true)
-        } else {
-            list.forEach(block => {
-                if (canvas.bounds.hit(block) && !block.isEmpty()) this.clipRender(block.getIntersect(canvas.bounds))
-            })
-        }
+        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(bounds: IBounds, fullMode?: boolean): void {
+    public clipRender(block: IBounds): void {
         const t = Run.start('PartRender')
-        const { canvas, target } = this
+        const { canvas } = this
 
-        bounds.spread(1 + 1 / this.canvas.pixelRatio)
-        bounds.ceil()
+        const bounds = block.getIntersect(canvas.bounds)
+        const includes = block.includes(this.target.__world)
+        const realBounds = new Bounds().copy(bounds)
 
         canvas.save()
-        canvas.clearWorld(bounds, true)
-        if (Debug.showRepaint) canvas.strokeWorld(bounds, 'red')
-        canvas.clipWorld(bounds, true)
-        target.__render(canvas, fullMode ? {} : { bounds })
+
+        if (includes && !Debug.showRepaint) {
+            canvas.clear()
+        } else {
+            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 fullRender(bounds?: IBounds): void {
-        const { canvas, target } = this
-        Renderer.fullRender(target, canvas, bounds)
-    }
-
-    static fullRender(target: ILeaf, canvas: ILeaferCanvas, bounds?: IBounds): void {
+    public fullRender(): void {
         const t = Run.start('FullRender')
-        if (!bounds) bounds = canvas.bounds
+        const { canvas } = this
 
         canvas.save()
         canvas.clear()
-        target.__render(canvas, canvas.bounds.includes(target.__world) ? {} : { bounds })
+        this.__render(canvas.bounds)
         canvas.restore()
 
         Run.end(t)
     }
 
+    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)
+    }
+
+    public renderHitView(_options: IRenderOptions): void { }
+
+    public renderBoundsView(_options: IRenderOptions): void { }
+
     public addBlock(block: IBounds): void {
         if (!this.updateBlocks) this.updateBlocks = []
         this.updateBlocks.push(block)
     }
 
     public mergeBlocks(): void {
-        const { updateBlocks } = this
-        if (updateBlocks) {
+        const { updateBlocks: list } = this
+        if (list) {
             const bounds = new Bounds()
-            bounds.setByList(updateBlocks)
-            this.updateBlocks = [bounds]
+            bounds.setByList(list)
+            list.length = 0
+            list.push(bounds)
         }
     }
 
-    protected __checkAgain(): void {
-        if (this.changed && this.times < 3) this.target.emit(RenderEvent.AGAIN)
-    }
-
     protected __requestRender(): void {
         const startTime = Date.now()
         Platform.requestRender(() => {
@@ -184,18 +218,34 @@ 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.target.__updateAttr('fill')
-                this.update()
+            if (!bounds.includes(this.target.__world) || this.needFill || !e.samePixelRatio) {
+                this.addBlock(this.canvas.bounds)
+                this.target.forceUpdate('blendMode')
             }
         }
     }
 
     protected __onLayoutEnd(event: LayoutEvent): void {
-        event.data.map(item => this.addBlock(item.updatedBounds))
+        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 {
@@ -203,7 +253,7 @@ export class Renderer implements IRenderer {
         this.__eventIds = [
             target.on__(RenderEvent.REQUEST, this.update, this),
             target.on__(LayoutEvent.END, this.__onLayoutEnd, this),
-            target.on__(RenderEvent.AGAIN, this.renderOnce, this),
+            target.on__(RenderEvent.AGAIN, this.renderAgain, this),
             target.on__(ResizeEvent.RESIZE, this.__onResize, this)
         ]
     }
@@ -214,6 +264,7 @@ export class Renderer implements IRenderer {
 
     public destroy(): void {
         if (this.target) {
+            this.stop()
             this.__removeListenEvents()
             this.target = null
             this.canvas = null

package/src/renderHitView.ts

@@ -0,0 +1,49 @@
+import { ILeaf, ILeaferCanvas, IRenderOptions } from '@leafer/interface'
+
+
+const colorList: string[] = []
+for (let i = 0; i < 360; i++) {
+    colorList.push(Math.round(Math.random() * 360) + '')
+}
+
+export function renderHitView(target: ILeaf, canvas: ILeaferCanvas, options: IRenderOptions, hasMask?: boolean): void {
+    if (target.hittable) {
+        if (target.isBranch) {
+            renderBranchHitView(target, canvas, options)
+        } else {
+            renderLeafHitView(target, canvas, options, hasMask)
+        }
+    }
+}
+
+export function renderBranchHitView(branch: ILeaf, canvas: ILeaferCanvas, options: IRenderOptions): void {
+    const { children } = branch
+    let target: ILeaf
+    for (let i = 0, len = children.length; i < len; i++) {
+        target = children[i]
+        if (target.hittable) {
+            if (target.isBranch) {
+                renderBranchHitView(target, canvas, options)
+            } else {
+                renderLeafHitView(target, canvas, options, target.__hasMask)
+            }
+        }
+    }
+}
+
+function renderLeafHitView(leaf: ILeaf, canvas: ILeaferCanvas, options: IRenderOptions, hasMask: boolean): void {
+    if (leaf.__worldOpacity) {
+        const { isMask, __strokeOuterWidth: strokeWidth } = leaf.__
+        if (hasMask && !isMask) return
+
+        canvas.setWorld(leaf.__world, options.matrix)
+        canvas.opacity = 0.5
+
+        leaf.__drawHitPath(canvas)
+
+        canvas.fillStyle = canvas.strokeStyle = 'hsl(' + colorList[leaf.innerId % 360] + ',50%, 50%)'
+        canvas.fill(leaf.__.windingRule)
+        canvas.strokeWidth = strokeWidth ? strokeWidth * 2 : 1
+        canvas.stroke()
+    }
+}