[dumili] Fix detection debugging boxes calculation

Author: bperel

apps/dumili/src/components/Book.vue

@@ -34,7 +34,7 @@
                 v-if="
                   showAiDetections !== undefined &&
                   xOffset !== undefined &&
-                  displayRatio &&
+                  displayRatioNoCropping &&
                   aiDetails[url].panels?.length
                 "
                 class="position-absolute h-100"
@@ -50,10 +50,10 @@
                   :key="`ocr-match-${idx}`"
                   class="position-absolute ocr-match panel"
                   :style="{
-                    left: `${x * displayRatio}px`,
-                    top: `${y * displayRatio}px`,
-                    width: `${width * displayRatio}px`,
-                    height: `${height * displayRatio}px`,
+                    left: `${x * displayRatioNoCropping}px`,
+                    top: `${y * displayRatioNoCropping}px`,
+                    width: `${width * displayRatioNoCropping}px`,
+                    height: `${height * displayRatioNoCropping}px`,
                   }"
                 ></div>
                 <div
@@ -178,29 +178,32 @@ const releaseDate = computed(() => {
 });
 
 const displayedWidth = computed(() => book.value?.getSettings().width);
+const displayedHeight = computed(() => book.value?.getSettings().height);
 
 const xOffset = computed(
   () =>
+    displayedHeight.value &&
+    pageRatio.value &&
     displayedWidth.value &&
-    displayRatio.value &&
-    coverWidth.value &&
-    (displayedWidth.value - coverWidth.value * displayRatio.value) / 2
+    (displayedWidth.value - displayedHeight.value * pageRatio.value) / 2
 );
 
-const displayRatio = computed(
+const pageRatio = computed(() => coverWidth.value! / coverHeight.value!);
+
+const displayRatioNoCropping = computed(
   () =>
-    displayedWidth.value &&
+    displayedHeight.value &&
     coverHeight.value &&
-    displayedWidth.value / coverHeight.value
+    displayedHeight.value / coverHeight.value
 );
 
 const firstPanelPosition = (url: string) => {
   const { bbox } = aiDetails.value[url].panels[0];
   return {
-    left: bbox.x * displayRatio.value!,
-    top: bbox.y * displayRatio.value!,
-    width: bbox.width * displayRatio.value!,
-    height: bbox.height * displayRatio.value!,
+    left: bbox.x * displayRatioNoCropping.value!,
+    top: bbox.y * displayRatioNoCropping.value!,
+    width: bbox.width * displayRatioNoCropping.value!,
+    height: bbox.height * displayRatioNoCropping.value!,
   };
 };
 

packages/api/package.json

@@ -11,7 +11,7 @@
     "~prisma-clients": "../prisma-clients"
   },
   "dependencies": {
-    "@prisma/client": "^5.2.0",
+    "@prisma/client": "^5.3.1",
     "@pusher/push-notifications-server": "^1.2.6",
     "@sentry/node": "^7.68.0",
     "axios": "^1.5.0",

packages/prisma-clients/package.json

@@ -7,7 +7,7 @@
     "build": "ls schemas/*.prisma | while read -r schema; do pnpx prisma generate --schema=$schema; done && rm -rf dist && ./node_modules/.pnpm/node_modules/.bin/tsc"
   },
   "dependencies": {
-    "@prisma/client": "5.2.0",
+    "@prisma/client": "^5.3.1",
     "prisma": "^5.2.0",
     "ts-node": "^10.9.1"
   }