display: Avoid scaling, instead show content as wide as input

1 files changed, 9 insertions, 4 deletions

diff --git a/src/clicks_display.ts b/src/clicks_display.ts
index 7ef6f4e..3478a0f 100644
--- a/src/clicks_display.ts
+++ b/src/clicks_display.ts
@@ -25,10 +25,12 @@ namespace Clicks {
 
 class PageData {
     readonly url: string
+    readonly width: number
     readonly data: h337.HeatmapData<h337.DataPoint>
 
-    constructor(url: string, data: h337.DataPoint[]) {
+    constructor(url: string, width: number, data: h337.DataPoint[]) {
         this.url = url
+        this.width = width
         let maxValue = 0
         for (const d of data) {
             if (d.value > maxValue) maxValue = d.value
@@ -43,6 +45,7 @@ class PageData {
 
 class Display {
     private status: HTMLElement
+    private frame_container: HTMLElement
     private frame: HTMLIFrameElement
     private heatmap: HTMLElement
     private data: PageData[] | undefined
@@ -50,6 +53,7 @@ class Display {
 
     constructor() {
         this.status = document.getElementById("status")!!
+        this.frame_container = document.getElementById("frame_container")!!
         this.frame = document.getElementById("frame")!! as HTMLIFrameElement
         this.heatmap = document.getElementById("heatmap")!!
         this.map = h337.create({
@@ -67,7 +71,7 @@ class Display {
                 return
             }
             this.data = []
-            const scaleX = this.frame.clientWidth
+            const scaleX = data.width
             const scaleY = data.width
             let url: string | undefined
             let clicks: h337.DataPoint[] = []
@@ -76,7 +80,7 @@ class Display {
                 if ("url" in event) {
                     if (url !== undefined) {
                         console.log(clicks)
-                        this.data.push(new PageData(url, clicks))
+                        this.data.push(new PageData(url, data.width, clicks))
                     }
                     url = event.url
                     clicks = []
@@ -97,7 +101,7 @@ class Display {
             }
             if (url !== undefined) {
                 console.log(clicks)
-                this.data.push(new PageData(url, clicks))
+                this.data.push(new PageData(url, data.width, clicks))
             }
 
             this.setStatus("Loaded")
@@ -111,6 +115,7 @@ class Display {
     }
 
     private show(data: PageData) {
+        this.frame_container.style.width = `${data.width}px`
         this.frame.src = data.url
         this.heatmap.style.transform = "translateY(0px)"
         this.frame.addEventListener("load", () => {