diff --git a/Dockerfile b/Dockerfile index 956c68a5..69cb1bed 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,4 +1,4 @@ -FROM nginx:1.25.2 +FROM nginx:1.25.3 # Create app directory RUN mkdir /var/www/ diff --git a/package-lock.json b/package-lock.json index fd8b15fe..4f13807c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@micahg/ntt", - "version": "0.0.33", + "version": "0.0.34", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@micahg/ntt", - "version": "0.0.33", + "version": "0.0.34", "dependencies": { "@auth0/auth0-spa-js": "^2.1.1", "@emotion/react": "^11.11.1", diff --git a/package.json b/package.json index c80c83f1..72646d7f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@micahg/ntt", - "version": "0.0.33", + "version": "0.0.34", "files": [ "build" ], diff --git a/src/components/RemoteDisplayComponent/RemoteDisplayComponent.tsx b/src/components/RemoteDisplayComponent/RemoteDisplayComponent.tsx index 9c6fbe03..c248b035 100644 --- a/src/components/RemoteDisplayComponent/RemoteDisplayComponent.tsx +++ b/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) diff --git a/src/utils/geometry.ts b/src/utils/geometry.ts index bfdb6a4d..2063258a 100644 --- a/src/utils/geometry.ts +++ b/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