@leafer/renderer 1.0.0-alpha.23 → 1.0.0-alpha.31

package/package.json

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

package/src/Renderer.ts

@@ -5,8 +5,6 @@ import { DataHelper } from '@leafer/data'
 import { Platform } from '@leafer/platform'
 import { Debug, Run } from '@leafer/debug'
 
-import { renderHitView } from './renderHitView'
-
 
 const debug = Debug.get('Renderer')
 
@@ -21,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 = {
@@ -28,8 +29,14 @@ export class Renderer implements IRenderer {
         maxFPS: 60
     }
 
+    protected renderBounds: IBounds
+    protected renderOptions: IRenderOptions
+    protected totalBounds: IBounds
+
     protected __eventIds: IEventListenerId[]
 
+    protected get needFill(): boolean { return !!(!this.canvas.allowBackgroundColor && this.config.fill) }
+
     constructor(target: ILeaf, canvas: ILeaferCanvas, userConfig?: IRendererConfig) {
         this.target = target
         this.canvas = canvas
@@ -55,51 +62,70 @@ 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.END)
+        try {
+            this.emitRender(RenderEvent.START)
+            this.renderOnce(callback)
+            this.emitRender(RenderEvent.END, this.totalBounds)
+        } catch (e) {
+            debug.error(e)
+        }
+
+        debug.log('-------------|')
+    }
 
-        debug.log(target.innerId, '---|')
+    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)
-
+            this.emitRender(RenderEvent.BEFORE)
             callback()
-
         } else {
-
             this.requestLayout()
 
-            target.emit(RenderEvent.BEFORE)
+            this.emitRender(RenderEvent.BEFORE)
 
             if (this.config.usePartRender && this.totalTimes > 1) {
                 this.partRender()
             } else {
                 this.fullRender()
             }
-
         }
 
-        target.emit(RenderEvent.RENDER)
-        target.emit(RenderEvent.AFTER)
+        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 {
@@ -116,17 +142,19 @@ export class Renderer implements IRenderer {
 
         const bounds = block.getIntersect(canvas.bounds)
         const includes = block.includes(this.target.__world)
+        const realBounds = new Bounds().copy(bounds)
 
         canvas.save()
-        if (Debug.showRepaint || !includes) {
+
+        if (includes && !Debug.showRepaint) {
+            canvas.clear()
+        } else {
             bounds.spread(1 + 1 / this.canvas.pixelRatio).ceil()
             canvas.clearWorld(bounds, true)
             canvas.clipWorld(bounds, true)
-            if (Debug.showRepaint) canvas.strokeWorld(bounds, 'red')
-        } else {
-            canvas.clear()
         }
-        this.__render(bounds)
+
+        this.__render(bounds, realBounds)
         canvas.restore()
 
         Run.end(t)
@@ -144,12 +172,26 @@ export class Renderer implements IRenderer {
         Run.end(t)
     }
 
-    protected __render(bounds: IBounds): void {
+    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)
-        if (Debug.showHitView) renderHitView(this.target, 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)
@@ -165,10 +207,6 @@ export class Renderer implements IRenderer {
         }
     }
 
-    protected __checkAgain(): void {
-        //if (this.changed && this.times < 3) this.target.emit(RenderEvent.AGAIN)
-    }
-
     protected __requestRender(): void {
         const startTime = Date.now()
         Platform.requestRender(() => {
@@ -180,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 {
@@ -199,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)
         ]
     }

package/src/renderHitView.ts

@@ -8,7 +8,7 @@ for (let i = 0; i < 360; i++) {
 
 export function renderHitView(target: ILeaf, canvas: ILeaferCanvas, options: IRenderOptions, hasMask?: boolean): void {
     if (target.hittable) {
-        if (target.__isBranch) {
+        if (target.isBranch) {
             renderBranchHitView(target, canvas, options)
         } else {
             renderLeafHitView(target, canvas, options, hasMask)
@@ -22,7 +22,7 @@ export function renderBranchHitView(branch: ILeaf, canvas: ILeaferCanvas, option
     for (let i = 0, len = children.length; i < len; i++) {
         target = children[i]
         if (target.hittable) {
-            if (target.__isBranch) {
+            if (target.isBranch) {
                 renderBranchHitView(target, canvas, options)
             } else {
                 renderLeafHitView(target, canvas, options, target.__hasMask)
@@ -33,7 +33,8 @@ export function renderBranchHitView(branch: ILeaf, canvas: ILeaferCanvas, option
 
 function renderLeafHitView(leaf: ILeaf, canvas: ILeaferCanvas, options: IRenderOptions, hasMask: boolean): void {
     if (leaf.__worldOpacity) {
-        const { isMask, __strokeOuterWidth: strokeWidth } = leaf.__
+        const { isMask } = leaf.__
+        const { shapeStrokeSpreadWidth: strokeWidth } = leaf.__layout
         if (hasMask && !isMask) return
 
         canvas.setWorld(leaf.__world, options.matrix)