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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer/renderer",
-  "version": "1.0.0-alpha.21",
+  "version": "1.0.0-alpha.23",
   "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.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"
   },
   "devDependencies": {
-    "@leafer/interface": "1.0.0-alpha.21"
+    "@leafer/interface": "1.0.0-alpha.23"
   }
 }

package/src/Renderer.ts

@@ -1,10 +1,12 @@
-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'
 import { Platform } from '@leafer/platform'
 import { Debug, Run } from '@leafer/debug'
 
+import { renderHitView } from './renderHitView'
+
 
 const debug = Debug.get('Renderer')
 
@@ -28,7 +30,7 @@ export class Renderer implements IRenderer {
 
     protected __eventIds: IEventListenerId[]
 
-    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)
@@ -60,7 +62,6 @@ export class Renderer implements IRenderer {
 
         target.emit(RenderEvent.START)
         this.renderOnce(callback)
-        target.emit(RenderEvent.RENDER)
         target.emit(RenderEvent.END)
 
         debug.log(target.innerId, '---|')
@@ -75,7 +76,7 @@ export class Renderer implements IRenderer {
 
         if (callback) {
 
-            target.emit(RenderEvent.BEFORE_ONCE)
+            target.emit(RenderEvent.BEFORE)
 
             callback()
 
@@ -83,7 +84,7 @@ export class Renderer implements IRenderer {
 
             this.requestLayout()
 
-            target.emit(RenderEvent.BEFORE_ONCE)
+            target.emit(RenderEvent.BEFORE)
 
             if (this.config.usePartRender && this.totalTimes > 1) {
                 this.partRender()
@@ -93,9 +94,8 @@ export class Renderer implements IRenderer {
 
         }
 
-        target.emit(RenderEvent.ONCE)
-        target.emit(RenderEvent.AFTER_ONCE)
-
+        target.emit(RenderEvent.RENDER)
+        target.emit(RenderEvent.AFTER)
 
         this.updateBlocks = null
 
@@ -104,73 +104,69 @@ export class Renderer implements IRenderer {
 
     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)
 
         canvas.save()
-        canvas.clearWorld(bounds, true)
-        if (Debug.showRepaint) canvas.strokeWorld(bounds, 'red')
-        canvas.clipWorld(bounds, true)
-        target.__render(canvas, fullMode ? {} : { bounds })
+        if (Debug.showRepaint || !includes) {
+            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)
         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): void {
+        const options: IRenderOptions = bounds?.includes(this.target.__world) ? {} : { bounds }
+        this.target.__render(this.canvas, options)
+        if (Debug.showHitView) renderHitView(this.target, this.canvas, options)
+    }
+
     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)
+        //if (this.changed && this.times < 3) this.target.emit(RenderEvent.AGAIN)
     }
 
     protected __requestRender(): void {
@@ -195,7 +191,7 @@ export class Renderer implements IRenderer {
     }
 
     protected __onLayoutEnd(event: LayoutEvent): void {
-        event.data.map(item => this.addBlock(item.updatedBounds))
+        event.data?.map(item => this.addBlock(item.updatedBounds))
     }
 
     protected __listenEvents(): void {
@@ -214,6 +210,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()
+    }
+}