feat: using culling render (#22)

* chore: fix typo

* feat: add quard tree

* feat: perf render

Author: nonzzz

src/component.ts

@@ -142,7 +142,7 @@ export class Component extends Schedule {
     )
   }
 
-  private drawBroundRect(node: LayoutModule) {
+  private drawRoundRect(node: LayoutModule) {
     const [x, y, w, h] = node.layout
     const { rectRadius } = node.config
 
@@ -157,11 +157,11 @@ export class Component extends Schedule {
       fill,
       padding: 0,
       radius: effectiveRadius
-    })
+    }, { x, y, w, h })
 
     this.rectLayer.add(rect)
     for (const child of node.children) {
-      this.drawBroundRect(child)
+      this.drawRoundRect(child)
     }
   }
   private drawText(node: LayoutModule) {
@@ -203,7 +203,7 @@ export class Component extends Schedule {
     const textY = y + (node.children && node.children.length > 0
       ? Math.round(titleAreaHeight / 2)
       : Math.round(h / 2))
-    const textComponent = createTitleText(text, textX, textY, font, config.color)
+    const textComponent = createTitleText(text, textX, textY, font, config.color, { textX, textY })
     this.textLayer.add(textComponent)
     for (const child of node.children) {
       this.drawText(child)
@@ -224,7 +224,7 @@ export class Component extends Schedule {
       }
     }
     for (const node of this.layoutNodes) {
-      this.drawBroundRect(node)
+      this.drawRoundRect(node)
     }
 
     for (const node of this.layoutNodes) {
@@ -293,8 +293,8 @@ interface TextLayoutResult {
 }
 
 export function getTextLayout(c: CanvasRenderingContext2D, text: string, width: number, height: number): TextLayoutResult {
-  const textWidth = c.measureText(text).width
   const metrics = c.measureText(text)
+  const textWidth = metrics.width
   const textHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent
 
   if (textHeight > height) {

src/etoile/graph/box.ts

@@ -3,8 +3,8 @@ import { asserts } from './types'
 
 export abstract class C extends Display {
   elements: Display[]
-  constructor() {
-    super()
+  constructor(id?: number) {
+    super(id)
     this.elements = []
   }
   abstract get __instanceOf__(): DisplayType
@@ -43,8 +43,8 @@ export abstract class C extends Display {
 export class Box extends C {
   elements: Display[]
 
-  constructor() {
-    super()
+  constructor(id?: number) {
+    super(id)
     this.elements = []
   }
 
@@ -83,7 +83,7 @@ export class Box extends C {
   }
 
   clone() {
-    const box = new Box()
+    const box = new Box(this.id)
     if (this.elements.length) {
       const stack: { elements: Display[], parent: Box }[] = [{ elements: this.elements, parent: box }]
 

src/etoile/graph/display.ts

@@ -21,9 +21,9 @@ export abstract class Display {
   id: number
   matrix: Matrix2D
   abstract get __instanceOf__(): DisplayType
-  constructor() {
+  constructor(id?: number) {
     this.parent = null
-    this.id = SELF_ID.get()
+    this.id = id ?? SELF_ID.get()
     this.matrix = new Matrix2D()
   }
 
@@ -39,7 +39,11 @@ export interface GraphStyleSheet {
   lineWidth: number
 }
 
-export interface LocOptions {
+interface RequestID {
+  __id__?: number
+}
+
+export interface LocOptions extends RequestID {
   width: number
   height: number
   x: number
@@ -166,7 +170,7 @@ export abstract class S extends Display {
   skewY: number
 
   constructor(options: Partial<LocOptions> = {}) {
-    super()
+    super(options.__id__)
     this.width = options.width || 0
     this.height = options.height || 0
     this.x = options.x || 0
@@ -181,14 +185,16 @@ export abstract class S extends Display {
 
 // For performance. we need impl AABB Check for render.
 
-export abstract class Graph extends S {
+export abstract class Graph<T extends Any = Any> extends S {
   instruction: ReturnType<typeof createInstruction>
   __options__: Partial<LocOptions>
+  __widget__: T
   abstract style: GraphStyleSheet
-  constructor(options: Partial<GraphOptions> = {}) {
+  constructor(options: Partial<GraphOptions> = {}, widget?: T) {
     super(options)
     this.instruction = createInstruction()
     this.__options__ = options
+    this.__widget__ = widget as T
   }
   abstract create(): void
   abstract clone(): Graph

src/etoile/graph/rect.ts

@@ -11,10 +11,10 @@ export type RoundRectStyleOptions = RectStyleOptions & { radius: number }
 
 export type RoundRectOptions = RectOptions & { style: Partial<RoundRectStyleOptions> }
 
-export class RoundRect extends Graph {
+export class RoundRect<T extends Any = Any> extends Graph {
   style: Required<RoundRectStyleOptions>
-  constructor(options: Partial<RoundRectOptions> = {}) {
-    super(options)
+  constructor(options: Partial<RoundRectOptions> = {}, widget?: T) {
+    super(options, widget)
     this.style = (options.style || Object.create(null)) as Required<RoundRectStyleOptions>
   }
 
@@ -51,6 +51,6 @@ export class RoundRect extends Graph {
   }
 
   clone() {
-    return new RoundRect({ ...this.style, ...this.__options__ })
+    return new RoundRect({ ...this.style, ...this.__options__, __id__: this.id }, this.__widget__)
   }
 }

src/etoile/graph/text.ts

@@ -14,11 +14,11 @@ export interface TextOptions extends Omit<GraphOptions, 'style'> {
   >
 }
 
-export class Text extends Graph {
+export class Text<T extends Any = Any> extends Graph {
   text: string
   style: Required<TextOptions['style']>
-  constructor(options: Partial<TextOptions> = {}) {
-    super(options)
+  constructor(options: Partial<TextOptions> = {}, widget?: T) {
+    super(options, widget)
     this.text = options.text || ''
     this.style = (options.style || Object.create(null)) as Required<TextOptions['style']>
   }
@@ -35,7 +35,7 @@ export class Text extends Graph {
   }
 
   clone() {
-    return new Text({ ...this.style, ...this.__options__ })
+    return new Text({ ...this.style, ...this.__options__, __id__: this.id }, this.__widget__)
   }
 
   get __shape__() {

src/etoile/graph/types.ts

@@ -15,7 +15,7 @@ export function isRoundRect(display: Display): display is RoundRect {
   return isGraph(display) && display.__shape__ === DisplayType.RoundRect
 }
 
-export function isText(display: Display): display is Text {
+export function isText<T extends Any = Any>(display: Display): display is Text<T> {
   return isGraph(display) && display.__shape__ === DisplayType.Text
 }
 

src/etoile/native/matrix.ts

@@ -51,6 +51,13 @@ export class Matrix2D implements MatrixLoc {
     return this
   }
 
+  transformPoint(x: number, y: number) {
+    return {
+      x: this.a * x + this.c * y + this.e,
+      y: this.b * x + this.d * y + this.f
+    }
+  }
+
   translation(x: number, y: number) {
     this.e += x
     this.f += y

src/etoile/schedule/index.ts

@@ -1,9 +1,11 @@
+/* eslint-disable no-use-before-define */
 import { applyCanvasTransform } from '../../shared'
 import { Box, asserts } from '../graph'
 import { Display } from '../graph/display'
 import { Event } from '../native/event'
 import type { DefaultEventDefinition } from '../native/event'
 import { log } from '../native/log'
+import { Matrix2D } from '../native/matrix'
 import { Render } from './render'
 
 import type { RenderViewportOptions } from './render'
@@ -19,33 +21,141 @@ export interface DrawGraphIntoCanvasOptions {
 // First cleanup canvas
 export function drawGraphIntoCanvas(
   graph: Display,
-  opts: DrawGraphIntoCanvasOptions
+  opts: DrawGraphIntoCanvasOptions,
+  visibleSet?: Set<number>
 ) {
   const { ctx, dpr } = opts
-  ctx.save()
+  if (asserts.isGraph(graph) && visibleSet && !visibleSet.has(graph.id)) {
+    return
+  }
+
   if (asserts.isBox(graph)) {
     const elements = graph.elements
-    const cap = elements.length
-
-    for (let i = 0; i < cap; i++) {
+    for (let i = 0; i < elements.length; i++) {
       const element = elements[i]
-      drawGraphIntoCanvas(element, opts)
+      if (asserts.isGraph(element) && visibleSet && !visibleSet.has(element.id)) {
+        continue
+      }
+      drawGraphIntoCanvas(element, opts, visibleSet)
     }
+    return
   }
   if (asserts.isGraph(graph)) {
+    ctx.save()
     const matrix = graph.matrix.create({ a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 })
     matrix.transform(graph.x, graph.y, graph.scaleX, graph.scaleY, graph.rotation, graph.skewX, graph.skewY)
-
     applyCanvasTransform(ctx, matrix, dpr)
     graph.render(ctx)
+    ctx.restore()
+  }
+}
+
+type BBox = { x: number, y: number, width: number, height: number }
+
+function bboxIntersect(a: BBox, b: BBox) {
+  return !(
+    a.x + a.width < b.x ||
+    a.x > b.x + b.width ||
+    a.y + a.height < b.y ||
+    a.y > b.y + b.height
+  )
+}
+
+class QuadTree<T> {
+  boundary: BBox
+  capacity: number
+  objects: Array<{ bbox: BBox, obj: T }>
+  divided: boolean
+  northeast?: QuadTree<T>
+  northwest?: QuadTree<T>
+  southeast?: QuadTree<T>
+  southwest?: QuadTree<T>
+  constructor(boundary: BBox, capacity: number = 8) {
+    this.boundary = boundary
+    this.capacity = capacity
+    this.objects = []
+    this.divided = false
+  }
+  insert(bbox: BBox, obj: T): boolean {
+    if (!bboxIntersect(this.boundary, bbox)) {
+      return false
+    }
+    if (this.objects.length < this.capacity) {
+      this.objects.push({ bbox, obj })
+      return true
+    }
+    if (!this.divided) {
+      this.subdivide()
+    }
+    return (
+      this.northeast!.insert(bbox, obj) ||
+      this.northwest!.insert(bbox, obj) ||
+      this.southeast!.insert(bbox, obj) ||
+      this.southwest!.insert(bbox, obj)
+    )
+  }
+  subdivide() {
+    const { x, y, width, height } = this.boundary
+    const hw = width / 2
+    const hh = height / 2
+    this.northeast = new QuadTree({ x: x + hw, y, width: hw, height: hh }, this.capacity)
+    this.northwest = new QuadTree({ x, y, width: hw, height: hh }, this.capacity)
+    this.southeast = new QuadTree({ x: x + hw, y: y + hh, width: hw, height: hh }, this.capacity)
+    this.southwest = new QuadTree({ x, y: y + hh, width: hw, height: hh }, this.capacity)
+    this.divided = true
+  }
+  query(range: BBox, found: T[] = []): T[] {
+    if (!bboxIntersect(this.boundary, range)) { return found }
+    for (const { bbox, obj } of this.objects) {
+      if (bboxIntersect(bbox, range)) { found.push(obj) }
+    }
+    if (this.divided) {
+      this.northeast!.query(range, found)
+      this.northwest!.query(range, found)
+      this.southeast!.query(range, found)
+      this.southwest!.query(range, found)
+    }
+    return found
   }
-  ctx.restore()
+}
+
+function collectBoundingGraphics(graph: Display, parentMatrix?: Matrix2D) {
+  const results: Array<{ bbox: BBox, obj: Display }> = []
+  const matrix = parentMatrix ?? new Matrix2D()
+  if (asserts.isGraph(graph)) {
+    const x = graph.x ?? 0
+    const y = graph.y ?? 0
+    const width = graph.width ?? 0
+    const height = graph.height ?? 0
+
+    const p1 = matrix.transformPoint(x, y)
+    const p2 = matrix.transformPoint(x + width, y + height)
+
+    const bbox = <BBox> {
+      x: Math.min(p1.x, p2.x),
+      y: Math.min(p1.y, p2.y),
+      width: Math.abs(p2.x - p1.x),
+      height: Math.abs(p2.y - p1.y)
+    }
+    results.push({ bbox, obj: graph })
+  }
+  if (asserts.isBox(graph)) {
+    const elements = graph.elements
+    const cap = elements.length
+
+    for (let i = 0; i < cap; i++) {
+      const element = elements[i]
+      results.push(...collectBoundingGraphics(element, matrix))
+    }
+  }
+  return results
 }
 
 export class Schedule<D extends DefaultEventDefinition = DefaultEventDefinition> extends Box {
   render: Render
   to: HTMLElement
   event: Event<D>
+  quadTree?: QuadTree<Display>
   constructor(to: ApplyTo, renderOptions: Partial<RenderViewportOptions> = {}) {
     super()
     this.to = typeof to === 'string' ? document.querySelector(to)! : to
@@ -60,13 +170,27 @@ export class Schedule<D extends DefaultEventDefinition = DefaultEventDefinition>
 
   update() {
     this.render.clear(this.render.options.width, this.render.options.height)
-    this.execute(this.render, this)
+    const all = collectBoundingGraphics(this)
+    const viewport = { x: 0, y: 0, width: this.render.options.width, height: this.render.options.height }
+    this.quadTree = new QuadTree<Display>(viewport)
+    const cap = all.length
+    for (let i = 0; i < cap; i++) {
+      const { bbox, obj } = all[i]
+      this.quadTree.insert(bbox, obj)
+    }
+    let visibleSet = undefined
+    if (this.quadTree) {
+      const visible = this.quadTree.query(viewport)
+      visibleSet = new Set(visible.map((g) => g.id))
+    }
+    this.execute(this.render, this, visibleSet)
+
     const matrix = this.matrix.create({ a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 })
     applyCanvasTransform(this.render.ctx, matrix, this.render.options.devicePixelRatio)
   }
 
   // execute all graph elements
-  execute(render: Render, graph: Display = this) {
-    drawGraphIntoCanvas(graph, { c: render.canvas, ctx: render.ctx, dpr: render.options.devicePixelRatio })
+  execute(render: Render, graph: Display = this, visibleSet?: Set<number>) {
+    drawGraphIntoCanvas(graph, { c: render.canvas, ctx: render.ctx, dpr: render.options.devicePixelRatio }, visibleSet)
   }
 }