fix: respect dpi

nonzzz · Jan 24, 2025 · 084ee79 · 084ee79
1 parent 7b04e5d
commit 084ee79
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/src/etoile/graph/image.ts b/src/etoile/graph/image.ts
@@ -12,19 +12,22 @@ export interface BitmapOptions extends Omit<GraphOptions, 'style'> {
     }
   >
   bitmap: HTMLCanvasElement
+  dpi: number
 }
 
 export class Bitmap extends Graph {
   bitmap: HTMLCanvasElement | null
   style: Required<BitmapOptions['style']>
+  dpi: number
   constructor(options: Partial<BitmapOptions> = {}) {
     super(options)
     this.bitmap = options.bitmap || null
     this.style = (options.style || Object.create(null)) as Required<BitmapOptions['style']>
+    this.dpi = options.dpi || 1
   }
   create() {
     if (this.bitmap) {
-      this.instruction.drawImage(this.bitmap, 0, 0)
+      this.instruction.drawImage(this.bitmap, 0, 0, this.bitmap.width / this.dpi, this.bitmap.height / this.dpi)
     }
   }
   clone() {

diff --git a/src/primitives/component.ts b/src/primitives/component.ts
@@ -199,7 +199,7 @@ export class TreemapLayout extends Schedule<InternalEventDefinition> {
     this.bgBox.destory()
     if (this.renderCache.state) {
       this.fgBox.destory()
-      this.bgBox.add(new Bitmap({ bitmap: this.renderCache.canvas }))
+      this.bgBox.add(new Bitmap({ bitmap: this.renderCache.canvas, dpi: this.render.options.devicePixelRatio }))
     } else {
       for (const node of this.layoutNodes) {
         this.drawBackgroundNode(node)

diff --git a/src/primitives/event.ts b/src/primitives/event.ts
@@ -311,7 +311,11 @@ export class TreemapEvent extends DOMEvent {
       this.matrix.a += scale
       this.matrix.d += scale
       this.matrix.translation((translateX - this.matrix.e) * easedProgress, (translateY - this.matrix.f) * easedProgress)
-      resetLayout(treemap, treemap.render.canvas.width * this.matrix.a, treemap.render.canvas.height * this.matrix.d)
+      resetLayout(
+        treemap,
+        treemap.render.canvas.width * this.matrix.a / treemap.render.options.devicePixelRatio,
+        treemap.render.canvas.height * this.matrix.d / treemap.render.options.devicePixelRatio
+      )
       stackMatrixTransformWithGraphAndLayer(treemap.elements, this.matrix.e, this.matrix.f, 1)
       treemap.update()
     }, {