Release/0.0.34 (#63)

* 0.0.34

* fix: Dockerfile to reduce vulnerabilities (#62)

The following vulnerabilities are fixed with an upgrade:
- https://snyk.io/vuln/SNYK-DEBIAN12-LIBXPM-5927176
- https://snyk.io/vuln/SNYK-DEBIAN12-NGHTTP2-5953379
- https://snyk.io/vuln/SNYK-DEBIAN12-NGINX-5953391
- https://snyk.io/vuln/SNYK-DEBIAN12-TIFF-5934984
- https://snyk.io/vuln/SNYK-DEBIAN12-ZLIB-6008963

Co-authored-by: snyk-bot <[email protected]>

* work around silk scale for the overlay

* ok fix rendering glitches

---------

Co-authored-by: micahg <[email protected]>
Co-authored-by: snyk-bot <[email protected]>

Dockerfile

@@ -1,4 +1,4 @@
-FROM nginx:1.25.2
+FROM nginx:1.25.3
 
 # Create app directory
 RUN mkdir /var/www/

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micahg/ntt",
-  "version": "0.0.33",
+  "version": "0.0.34",
   "files": [
     "build"
   ],

src/components/RemoteDisplayComponent/RemoteDisplayComponent.tsx

@@ -96,6 +96,11 @@ const RemoteDisplayComponent = () => {
      * background with expanded selection if there is one.
      */
     loadImage(backgroundUri).then(bgImg => {
+      // the untainted one is not dealing with the silkScale (more on that in geometry.ts)
+      // since we can safely assume (for now) that the overlay isn't downscaled due to
+      // memory constraints, then we can get our ratios using the intended background size
+      // instead of the actual
+      const bgVPnoTaint = fillToAspect(viewport, tableBGSize, tableBGSize.width, tableBGSize.height);
       const bgVP = fillToAspect(viewport, tableBGSize, bgImg.width, bgImg.height);
       if (overlayUri) {
         loadImage(overlayUri).then(ovrImg => {
@@ -108,25 +113,24 @@ const RemoteDisplayComponent = () => {
           // TODO detect portrait - ALL OF THIS CODE assumes editor/overlay are landsacpe
           let [x, y, w, h] = [0, 0, 0, 0]
           if (bgImg.width < bgImg.height) {
-            [x, y] = rotate(90, bgVP.x, bgVP.y, bgImg.width,
-                            bgImg.height);
-            let [x2, y2] = rotate(90, bgVP.x + bgVP.width, bgVP.y + bgVP.height,
-                                  bgImg.width, bgImg.height);
+            [x, y] = rotate(90, bgVPnoTaint.x, bgVPnoTaint.y, tableBGSize.width, tableBGSize.height);
+            let [x2, y2] = rotate(90, bgVPnoTaint.x + bgVPnoTaint.width, bgVPnoTaint.y + bgVPnoTaint.height,
+                                  tableBGSize.width, tableBGSize.height);
             [x, x2] = [Math.min(x, x2), Math.max(x, x2)];
             [y, y2] = [Math.min(y, y2), Math.max(y, y2)];
             w = x2 - x;
             h = y2 - y;
-            let scale = ovrImg.width/bgImg.height;
+            let scale = ovrImg.width/tableBGSize.height;
             x *= scale;
             y *= scale;
             w *= scale;
             h *= scale;
           } else {
-            let scale = bgImg.width/ovrImg.width;
-            x = bgVP.x / scale;
-            y = bgVP.y / scale;
-            w = bgVP.width / scale;
-            h = bgVP.height / scale;
+            let scale = tableBGSize.width/ovrImg.width;
+            x = bgVPnoTaint.x / scale;
+            y = bgVPnoTaint.y / scale;
+            w = bgVPnoTaint.width / scale;
+            h = bgVPnoTaint.height / scale;
           }
           let olVP = {x: x, y: y, width: w, height: h};
           renderImageFullScreen(ovrImg, overlay, olVP)

src/utils/geometry.ts

@@ -131,11 +131,11 @@ export function fillToAspect(selection: Rect | null, tableBGRect: Rect, width: n
   let scrR = (tableBGRect.width > tableBGRect.height) ? screenWidth/screenHeight : screenHeight/screenWidth;
 
   // calculate coefficient for browser-resized images
-  // const silkScale2 = (tableBGRect.width !== width) ? width / tableBGRect.width : 1;
-  // the formula above (silkScale2) is what the scaling match should be, however, I
-  // think due to a browser bug the silkScale below is what works. FWIW, the bug was
-  // filed here: https://bugs.chromium.org/p/chromium/issues/detail?id=1494756
-  const silkScale =  (width  * width)/(tableBGRect.width * tableBGRect.width);
+  // We shouldn't need to square (**2) the scaling value; however, I
+  // think due to a browser bug, squaring silkScale below is what works.
+  // FWIW, the bug was filed here:
+  // https://bugs.chromium.org/p/chromium/issues/detail?id=1494756
+  const silkScale = (width/tableBGRect.width)**2;
 
   // if the selection ratio is greater than the screen ratio it implies
   // aspect ratio of the selection is wider than the aspect ratio of the