Correctly position focus box for charts with an offset parent (#61)

julianna-langston · julianna-ciq · web-flow · commit 4726794eaf6d · 2023-09-22T14:34:00.000-04:00
* ts tidying

* Add examples using relatively positioned containers

* Account for non-body offset parents in position calc

---------

Co-authored-by: Julianna Langston &lt;julianna@cosaic.io&gt;
diff --git a/index.html b/index.html
@@ -15,6 +15,12 @@
       #app > div:has(canvas) {
         max-width: var(--tile-size);
       }
+      #position > div:has(canvas) {
+        position: relative;
+        margin: auto;
+        height: 80vh;
+        width: 80vw;
+      }
     </style>
   </head>
   <body>
@@ -25,6 +31,9 @@ <h2>Vanilla chart.js</h2>
 
     <h2>react-chartjs-2</h2>
     <div id="react-root"></div>
+
+    <h2>Positioning</h2>
+    <div id="position"></div>
     <script type="module" src="/samples/main.tsx"></script>
   </body>
 </html>
diff --git a/samples/main.tsx b/samples/main.tsx
@@ -3,9 +3,10 @@ import ReactDOM from "react-dom/client";
 import Charts from "./react/index";
 import {generateCharts} from "./makeChart";
 
-generateCharts(document.querySelector<HTMLDivElement>('#app')!);
+generateCharts(document.querySelector('#app') as HTMLDivElement);
+generateCharts(document.querySelector('#position') as HTMLDivElement);
 
-const root = ReactDOM.createRoot(document.getElementById("react-root"));
+const root = ReactDOM.createRoot(document.getElementById("react-root") as HTMLDivElement);
 root.render(
     <Charts />
 );
diff --git a/src/plugin.ts b/src/plugin.ts
@@ -105,11 +105,15 @@ class ChartLegendManager {
                 return;
             }
 
+            const useOffset = this.canvas.offsetParent !== null && !["BODY", "HTML"].includes(this.canvas.offsetParent.nodeName);
+
             const bbox = this.canvas.getBoundingClientRect();
+            const adjustment = useOffset ? (this.canvas.offsetParent as HTMLElement).getBoundingClientRect() : {x: 0 - window.scrollX, y: 0 - window.scrollY};
+
             const {left, top, width, height, text} = this.hitBoxes[index];
 
-            focusBox.style.left = `${bbox.x + left - this.focusBoxMargin - window.pageXOffset}px`;
-            focusBox.style.top = `${bbox.y + top - this.focusBoxMargin + window.pageYOffset}px`;
+            focusBox.style.left = `${bbox.x - adjustment.x + left - this.focusBoxMargin}px`;
+            focusBox.style.top = `${bbox.y - adjustment.y + top - this.focusBoxMargin}px`;
             focusBox.style.width = `${width + (2*this.focusBoxMargin)}px`;
             focusBox.style.height = `${height + (2*this.focusBoxMargin)}px`;
             focusBox.setAttribute("aria-label", `${text}, ${index+1} of ${this.hitBoxes.length}`);
