fix(slide-potentiometer): not functional in Firefox #87

Author: urish

src/potentiometer-element.ts

@@ -3,7 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { analog, ElementPin } from './pin';
 import { clamp } from './utils/clamp';
-import { calculateBoundingRect } from './utils/geometry';
+import { getScreenCTM } from './utils/ctm-workaround';
 
 const knobCenter = {
   x: 9.91,
@@ -193,42 +193,11 @@ export class PotentiometerElement extends LitElement {
 
   private updateKnobMatrix() {
     const knob = this.shadowRoot?.querySelector<SVGRectElement>('#knob');
-    this.pageToKnobMatrix = knob?.getScreenCTM()?.inverse() ?? null;
-
-    const { userAgent } = navigator;
-
-    if (userAgent.indexOf('Firefox') >= 0 || userAgent.indexOf('Epiphany') >= 0) {
-      // Firefox's getScreenCTM() is broken: https://bugzilla.mozilla.org/show_bug.cgi?id=1610093
-      const firefoxWorkaround =
-        this.shadowRoot?.querySelector<SVGRectElement>('#firefox-workaround');
-      const boundingRect = firefoxWorkaround?.getBoundingClientRect();
-      const svgRect = firefoxWorkaround?.ownerSVGElement?.getBoundingClientRect();
-      if (!boundingRect || !svgRect) {
-        return;
-      }
-
-      const cx = svgRect.x + svgRect.width / 2;
-      const cy = svgRect.y + svgRect.height / 2;
-      const deltaX = cx - (boundingRect.x + boundingRect.width / 2);
-      const deltaY = cy - (boundingRect.y + boundingRect.height / 2);
-      const angle = (Math.atan2(deltaY, deltaX) / Math.PI) * 180;
-      const rotation = new DOMMatrix().rotate(angle);
-      const rotatedRect = calculateBoundingRect(new DOMRect(0, 9.5, 1, 1), rotation);
-      const sx = rotatedRect.width / boundingRect.width;
-      const sy = rotatedRect.height / boundingRect.height;
-      this.pageToKnobMatrix = rotation
-        .inverse()
-        .multiply(
-          new DOMMatrix([
-            sx,
-            0,
-            0,
-            sy,
-            rotatedRect.left - boundingRect.left * sx,
-            rotatedRect.top - boundingRect.top * sy,
-          ])
-        );
-    }
+    const workaroundElement = this.shadowRoot?.querySelector<SVGRectElement>('#firefox-workaround');
+    this.pageToKnobMatrix =
+      knob && workaroundElement
+        ? getScreenCTM(knob, workaroundElement, new DOMRect(0, 9.5, 1, 1))
+        : null;
   }
 
   private rotateHandler(event: MouseEvent | TouchEvent) {

src/slide-potentiometer-element.ts

@@ -1,7 +1,8 @@
-import { html, LitElement, css } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { analog, ElementPin } from './pin';
 import { clamp } from './utils/clamp';
+import { getScreenCTM } from './utils/ctm-workaround';
 import { mmToPix } from './utils/units';
 
 @customElement('wokwi-slide-potentiometer')
@@ -171,6 +172,7 @@ export class SlidePotentiometerElement extends LitElement {
             <rect x="22.2" y="0" width=".6" height="19" fill="#efefef" />
           </g>
         </g>
+        <rect x="0" y="14" width="1" height="1" fill="none" id="firefox-workaround" />
       </svg>
     `;
   }
@@ -210,8 +212,14 @@ export class SlidePotentiometerElement extends LitElement {
 
   private updateCaseDisplayProperties(): void {
     const element = this.shadowRoot?.querySelector<SVGRectElement>('#sliderCase');
-    if (element) {
-      this.pageToLocalTransformationMatrix = element.getScreenCTM()?.inverse() || null;
+    const firefoxWorkaround = this.shadowRoot?.querySelector<SVGRectElement>('#firefox-workaround');
+
+    if (element && firefoxWorkaround) {
+      this.pageToLocalTransformationMatrix = getScreenCTM(
+        element,
+        firefoxWorkaround,
+        new DOMRect(0, 14, 1, 1)
+      );
     }
 
     // Handle zooming in the storybook

src/utils/ctm-workaround.ts

@@ -0,0 +1,40 @@
+import { calculateBoundingRect } from './geometry';
+
+export function getScreenCTM(
+  target: SVGGraphicsElement,
+  workaroundElement: SVGGraphicsElement,
+  workaroundRect: DOMRectReadOnly
+) {
+  const { userAgent } = navigator;
+  const workaroundNeeded = userAgent.indexOf('Firefox') >= 0 || userAgent.indexOf('Epiphany') >= 0;
+
+  if (workaroundNeeded) {
+    // Firefox's getScreenCTM() is broken: https://bugzilla.mozilla.org/show_bug.cgi?id=1610093
+    const targetCTM = target.getCTM();
+    const workaroundCTM = workaroundElement?.getCTM();
+    const boundingRect = workaroundElement?.getBoundingClientRect();
+    const svgRect = workaroundElement?.ownerSVGElement?.getBoundingClientRect();
+    if (!boundingRect || !svgRect || !workaroundCTM || !targetCTM) {
+      return null;
+    }
+
+    const centerX = svgRect.x + svgRect.width / 2;
+    const centerY = svgRect.y + svgRect.height / 2;
+    const deltaX = centerX - (boundingRect.x + boundingRect.width / 2);
+    const deltaY = centerY - (boundingRect.y + boundingRect.height / 2);
+    const angle = (Math.atan2(deltaY, deltaX) / Math.PI) * 180;
+    const rotation = new DOMMatrix().rotate(angle);
+    const rotatedRect = calculateBoundingRect(workaroundRect, rotation);
+    const scaleX = rotatedRect.width / boundingRect.width;
+    const scaleY = rotatedRect.height / boundingRect.height;
+    const localCTM = workaroundCTM.inverse().multiply(targetCTM);
+    return rotation
+      .inverse()
+      .translate(rotatedRect.left, rotatedRect.top)
+      .multiply(localCTM.inverse())
+      .scale(scaleX, scaleY)
+      .translate(-boundingRect.left, -boundingRect.top);
+  } else {
+    return target.getScreenCTM()?.inverse() || null;
+  }
+}