commit 49f0a8ee6d2e698e8384d0527a9d77aa17b57035

Author: kanno <[email protected]> Date: Mon Jan 20 16:05:13 2025 +0800 feat: better cache
nonzzz · Jan 20, 2025 · 527419a · 527419a
1 parent 3a31c03
commit 527419a
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 14 deletions.
diff --git a/src/primitives/component.ts b/src/primitives/component.ts
@@ -1,6 +1,6 @@
 /* eslint-disable no-use-before-define */
-import { Bitmap, Box, Canvas, Schedule } from '../etoile'
-import type { Render, RenderViewportOptions } from '../etoile'
+import { Bitmap, Box, Canvas, Schedule, drawGraphIntoCanvas } from '../etoile'
+import type { RenderViewportOptions } from '../etoile'
 import type { DOMEventDefinition } from '../etoile/native/dom'
 import { log } from '../etoile/native/log'
 import { Matrix2D } from '../etoile/native/matrix'
@@ -270,6 +270,7 @@ export function createTreemap() {
 
   function resize() {
     if (!treemap || !root) { return }
+    treemap.renderCache.destroy()
     const { width, height } = root.getBoundingClientRect()
     treemap.render.initOptions({ height, width, devicePixelRatio: window.devicePixelRatio })
     treemap.render.canvas.style.position = 'absolute'
@@ -281,6 +282,7 @@ export function createTreemap() {
     treemap.highlight.init()
     resetLayout(treemap, width, height)
     treemap.update()
+    treemap.renderCache.flush(treemap, treemap.matrix)
   }
 
   function setOptions(options: TreemapOptions) {
@@ -334,13 +336,13 @@ export class RenderCache extends Canvas {
   get state() {
     return this.$memory
   }
-  flush(render: Render, matrix: Matrix2D) {
-    // this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
-    const { devicePixelRatio, width, height } = render.options
-    const w = width / devicePixelRatio
-    const h = height / devicePixelRatio
-    // applyCanvasTransform(this.ctx, matrix, devicePixelRatio)
-    this.ctx.drawImage(render.canvas, 0, 0, w, h)
+  flush(treemap: TreemapLayout, matrix = new Matrix2D({ a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 })) {
+    const { devicePixelRatio, width, height } = treemap.render.options
+    const { a, d } = matrix
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
+    this.setOptions({ width: width * a, height: height * d, devicePixelRatio })
+    resetLayout(treemap, width * a, height * d)
+    drawGraphIntoCanvas(treemap, { c: this.canvas, ctx: this.ctx, dpr: devicePixelRatio })
     this.$memory = true
   }
   destroy() {

diff --git a/src/primitives/event.ts b/src/primitives/event.ts
@@ -159,6 +159,7 @@ export class TreemapEvent extends DOMEvent {
       { name: 'off', fn: () => this.exposedEvent.off.bind(this.exposedEvent) }
     ]
 
+    // eslint-disable-next-line unused-imports/no-unused-vars, @typescript-eslint/no-unused-vars
     const macOS = isMacOS()
 
     DOM_EVENTS.forEach((evt) => {
@@ -212,7 +213,7 @@ export class TreemapEvent extends DOMEvent {
       if (this.state.currentNode !== node) {
         this.state.currentNode = node
       }
-      drawHighlight(ctx.treemap, this)
+      // drawHighlight(ctx.treemap, this)
     } else {
       // for drag
       const { treemap } = ctx
@@ -226,7 +227,7 @@ export class TreemapEvent extends DOMEvent {
         treemap.reset()
         this.matrix.translation(drawX, drawY)
         Object.assign(this.state, { isDragging: true, dragX: x, dragY: y })
-        stackMatrixTransformWithGraphAndLayer(treemap.elements, this.matrix.e, this.matrix.f, this.matrix.a)
+        stackMatrixTransformWithGraphAndLayer(treemap.elements, this.matrix.e, this.matrix.f, 1)
         treemap.update()
       }, {
         duration: ANIMATION_DURATION,
@@ -252,7 +253,7 @@ export class TreemapEvent extends DOMEvent {
     this.state.dragY = metadata.native.offsetY
     this.state.forceDestroy = false
     if (!ctx.treemap.renderCache.state) {
-      ctx.treemap.renderCache.flush(ctx.treemap.render, this.matrix)
+      ctx.treemap.renderCache.flush(ctx.treemap, this.matrix)
     }
   }
 
@@ -294,13 +295,13 @@ export class TreemapEvent extends DOMEvent {
     const translateY = offsetY - (offsetY - this.matrix.f) * delta
     runEffect((progress) => {
       this.state.isWheeling = true
-      treemap.reset()
       const easedProgress = easing.quadraticOut(progress)
       const scale = (targetScaleRatio - this.matrix.a) * easedProgress
       this.matrix.a += scale
       this.matrix.d += scale
       this.matrix.translation((translateX - this.matrix.e) * easedProgress, (translateY - this.matrix.f) * easedProgress)
-      stackMatrixTransformWithGraphAndLayer(treemap.elements, this.matrix.e, this.matrix.f, this.matrix.a)
+      resetLayout(treemap, treemap.render.canvas.width * this.matrix.a, treemap.render.canvas.height * this.matrix.d)
+      stackMatrixTransformWithGraphAndLayer(treemap.elements, this.matrix.e, this.matrix.f, 1)
       treemap.update()
     }, {
       duration: ANIMATION_DURATION,
@@ -374,6 +375,7 @@ function estimateZoomingArea(node: LayoutModule, root: LayoutModule | null, w: n
 function createOnZoom(treemap: TreemapLayout, evt: TreemapEvent) {
   let root: LayoutModule | null = null
   return (node: LayoutModule) => {
+    treemap.renderCache.destroy()
     evt.state.isZooming = true
     const c = treemap.render.canvas
     const boundingClientRect = c.getBoundingClientRect()