@libresign/pdf-elements 0.3.1 → 1.0.0

package/src/components/PDFElements.vue

@@ -25,6 +25,8 @@ SPDX-License-Identifier: AGPL-3.0-or-later
                 class="overlay"
                 @mousemove="handleMouseMove"
                 @touchmove="handleMouseMove"
+                @click="handleOverlayClick(docIndex, pIndex, $event)"
+                @touchend="handleOverlayClick(docIndex, pIndex, $event)"
               >
                 <div
                   v-if="isAddingMode && previewPageDocIndex === docIndex && previewPageIndex === pIndex && previewElement && previewVisible"
@@ -137,18 +139,21 @@ SPDX-License-Identifier: AGPL-3.0-or-later
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent, type PropType, markRaw } from 'vue'
 import PDFPage from './PDFPage.vue'
 import DraggableElement from './DraggableElement.vue'
-import { readAsPDF, readAsArrayBuffer } from '../utils/asyncReader.js'
-import { clampPosition, getVisibleArea } from '../utils/geometry.js'
-import { getViewportWindow, isPageInViewport } from '../utils/pageBounds.js'
-import { applyScaleToDocs } from '../utils/zoom.js'
-import { objectIdExistsInDoc, findObjectPageIndex, updateObjectInDoc, removeObjectFromDoc } from '../utils/objectStore.js'
-import { getCachedMeasurement } from '../utils/measurements.js'
-
-export default {
+import { readAsPDF, readAsArrayBuffer } from '../utils/asyncReader'
+import { clampPosition, getVisibleArea } from '../utils/geometry'
+import { getViewportWindow, isPageInViewport } from '../utils/pageBounds'
+import { applyScaleToDocs } from '../utils/zoom'
+import { objectIdExistsInDoc, findObjectPageIndex, updateObjectInDoc, removeObjectFromDoc } from '../utils/objectStore'
+import { getCachedMeasurement } from '../utils/measurements'
+import type { PDFDocumentEntry, PDFElementObject } from '../types'
+
+export default defineComponent({
   name: 'PDFElements',
+  emits: ['pdf-elements:end-init', 'pdf-elements:delete-object', 'pdf-elements:object-click'],
   components: {
     PDFPage,
     DraggableElement,
@@ -163,11 +168,13 @@ export default {
       default: '100%',
     },
     initFiles: {
-      type: Array,
+      type: Array as PropType<
+        (string | Blob | ArrayBuffer | ArrayBufferView | Record<string, unknown>)[]
+      >,
       default: () => [],
     },
     initFileNames: {
-      type: Array,
+      type: Array as PropType<string[]>,
       default: () => [],
     },
     initialScale: {
@@ -194,8 +201,12 @@ export default {
       type: Boolean,
       default: false,
     },
+    emitObjectClick: {
+      type: Boolean,
+      default: false,
+    },
     ignoreClickOutsideSelectors: {
-      type: Array,
+      type: Array as PropType<string[]>,
       default: () => [],
     },
     pageCountFormat: {
@@ -206,32 +217,36 @@ export default {
       type: Boolean,
       default: false,
     },
+    pdfjsOptions: {
+      type: Object as PropType<Record<string, unknown>>,
+      default: () => ({}),
+    },
   },
   data() {
     return {
       scale: this.initialScale,
-      pdfDocuments: [],
+      pdfDocuments: [] as PDFDocumentEntry[],
       selectedDocIndex: -1,
       selectedPageIndex: -1,
       isAddingMode: false,
-      previewElement: null,
+      previewElement: null as PDFElementObject | null,
       previewPosition: { x: 0, y: 0 },
       previewScale: { x: 1, y: 1 },
       previewPageDocIndex: -1,
       previewPageIndex: -1,
       previewVisible: false,
       hoverRafId: 0,
-      pendingHoverClientPos: null,
-      lastHoverRect: null,
+      pendingHoverClientPos: null as { x: number; y: number } | null,
+      lastHoverRect: null as DOMRect | null,
       addingListenersAttached: false,
       dragRafId: 0,
-      pendingDragClientPos: null,
+      pendingDragClientPos: null as { x: number; y: number } | null,
       pageBoundsVersion: 0,
       lastScrollTop: 0,
       lastClientWidth: 0,
       nextObjectCounter: 0,
       isDraggingElement: false,
-      draggingObject: null,
+      draggingObject: null as PDFElementObject | null,
       draggingDocIndex: -1,
       draggingPageIndex: -1,
       draggingClientPosition: { x: 0, y: 0 },
@@ -240,22 +255,20 @@ export default {
       draggingElementShift: { x: 0, y: 0 },
       lastMouseClientPos: { x: 0, y: 0 },
       viewportRafId: 0,
-      objectIndexCache: {},
-      zoomRafId: null,
-      wheelZoomRafId: null,
-      boundHandleWheel: null,
+      objectIndexCache: markRaw({}) as Record<string, number>,
+      zoomRafId: null as number | null,
+      wheelZoomRafId: null as number | null,
+      boundHandleWheel: null as ((event: WheelEvent) => void) | null,
       visualScale: this.initialScale,
       autoFitApplied: false,
       lastContainerWidth: 0,
+      _pagesBoundingRects: markRaw({}) as Record<string, { docIndex: number; pageIndex: number; rect: DOMRect }>,
+      _pagesBoundingRectsList: markRaw([]) as { docIndex: number; pageIndex: number; rect: DOMRect }[],
+      _pageMeasurementCache: markRaw({}) as Record<string, { width: number; height: number }>,
+      _lastPageBoundsScrollTop: 0,
+      _lastPageBoundsClientHeight: 0,
     }
   },
-  created() {
-      this._pagesBoundingRects = {}
-      this._pagesBoundingRectsList = []
-      this._pageMeasurementCache = {}
-      this._lastPageBoundsScrollTop = 0
-      this._lastPageBoundsClientHeight = 0
-  },
   mounted() {
     this.boundHandleWheel = this.handleWheel.bind(this)
     this.init()
@@ -295,7 +308,7 @@ export default {
   methods: {
     async init() {
       if (!this.initFiles || this.initFiles.length === 0) return
-      const docs = []
+      const docs: PDFDocumentEntry[] = []
       this.autoFitApplied = false
 
       for (let i = 0; i < this.initFiles.length; i++) {
@@ -305,9 +318,9 @@ export default {
         let pdfDoc
         if (file instanceof Blob) {
           const buffer = await readAsArrayBuffer(file)
-          pdfDoc = await readAsPDF({ data: buffer })
+          pdfDoc = await readAsPDF({ data: buffer }, this.pdfjsOptions)
         } else {
-          pdfDoc = await readAsPDF(file)
+          pdfDoc = await readAsPDF(file, this.pdfjsOptions)
         }
 
         const pages = []
@@ -323,12 +336,14 @@ export default {
           pages.push(pagePromise)
         }
 
+        const rawPages = markRaw(pages)
+
         docs.push({
           name,
           file,
-          pdfDoc,
+          pdfDoc: markRaw(pdfDoc),
           numPages: pdfDoc.numPages,
-          pages,
+          pages: rawPages,
           pageWidths,
           pagesScale: Array(pdfDoc.numPages).fill(this.scale),
           allObjects: Array(pdfDoc.numPages).fill(0).map(() => []),
@@ -336,7 +351,7 @@ export default {
       }
 
       this.pdfDocuments = docs
-      this._pageMeasurementCache = {}
+      this._pageMeasurementCache = markRaw({})
       if (docs.length) {
         this.selectedDocIndex = 0
         this.selectedPageIndex = 0
@@ -388,7 +403,12 @@ export default {
     updateDraggingPosition(clientX, clientY) {
       if (!this.isDraggingElement) return
 
-      this.pendingDragClientPos = { x: clientX, y: clientY }
+      if (this.pendingDragClientPos) {
+        this.pendingDragClientPos.x = clientX
+        this.pendingDragClientPos.y = clientY
+      } else {
+        this.pendingDragClientPos = { x: clientX, y: clientY }
+      }
       if (this.dragRafId) return
       this.dragRafId = window.requestAnimationFrame(() => {
         this.dragRafId = 0
@@ -447,6 +467,7 @@ export default {
 
     cachePageBounds() {
       const nextRects = {}
+      const nextList = []
       const container = this.$el
       const scrollTop = container?.scrollTop || 0
       const viewHeight = container?.clientHeight || 0
@@ -471,22 +492,24 @@ export default {
             }
           }
           const rect = canvas.getBoundingClientRect()
-          nextRects[`${docIdx}-${pageIdx}`] = {
+          const entry = {
             docIndex: docIdx,
             pageIndex: pageIdx,
             rect,
           }
+          nextRects[`${docIdx}-${pageIdx}`] = entry
+          nextList.push(entry)
         }
       }
-      this._pagesBoundingRects = nextRects
-      this._pagesBoundingRectsList = Object.values(nextRects)
+      this._pagesBoundingRects = markRaw(nextRects)
+      this._pagesBoundingRectsList = markRaw(nextList)
       this.pageBoundsVersion++
     },
     cachePageBoundsForPage(docIndex, pageIndex) {
       const canvas = this.getPageCanvasElement(docIndex, pageIndex)
       if (!canvas) return
       const rect = canvas.getBoundingClientRect()
-      this._pagesBoundingRects = {
+      const nextRects = {
         ...this._pagesBoundingRects,
         [`${docIndex}-${pageIndex}`]: {
           docIndex,
@@ -494,7 +517,8 @@ export default {
           rect,
         },
       }
-      this._pagesBoundingRectsList = Object.values(this._pagesBoundingRects)
+      this._pagesBoundingRects = markRaw(nextRects)
+      this._pagesBoundingRectsList = markRaw(Object.values(nextRects))
       this.pageBoundsVersion++
     },
     getPageBoundsMap() {
@@ -520,7 +544,7 @@ export default {
     },
 
     getDisplayedPageScale(docIndex, pageIndex) {
-      this.pageBoundsVersion
+      void this.pageBoundsVersion
       const doc = this.pdfDocuments[docIndex]
       if (!doc) return 1
       const baseWidth = doc.pageWidths?.[pageIndex] || 0
@@ -583,7 +607,12 @@ export default {
       if (!this.isAddingMode || !this.previewElement) return
       const { x, y } = this.getPointerPosition(event)
       if (x === undefined || y === undefined) return
-      this.pendingHoverClientPos = { x, y }
+      if (this.pendingHoverClientPos) {
+        this.pendingHoverClientPos.x = x
+        this.pendingHoverClientPos.y = y
+      } else {
+        this.pendingHoverClientPos = { x, y }
+      }
       if (this.hoverRafId) return
       this.hoverRafId = window.requestAnimationFrame(() => {
         this.hoverRafId = 0
@@ -603,11 +632,11 @@ export default {
             rect: this.lastHoverRect,
           }
         } else {
-          const rects = this.getPageBoundsList().length
+          const rectEntries = this.getPageBoundsList().length
             ? this.getPageBoundsList()
             : Object.values(this.getPageBoundsMap())
-          for (let i = 0; i < rects.length; i++) {
-            const entry = rects[i]
+          for (let i = 0; i < rectEntries.length; i++) {
+            const entry = rectEntries[i]
             const rect = entry.rect
             if (cursorX >= rect.left && cursorX <= rect.right &&
                 cursorY >= rect.top && cursorY <= rect.bottom) {
@@ -651,6 +680,49 @@ export default {
         this.previewVisible = true
       })
     },
+    handleOverlayClick(docIndex, pageIndex, event) {
+      if (!this.emitObjectClick) return
+
+      const { x: clientX, y: clientY } = this.getPointerPosition(event)
+      if (!Number.isFinite(clientX) || !Number.isFinite(clientY)) return
+
+      this.cachePageBoundsForPage(docIndex, pageIndex)
+      const pageRect = this.getPageRect(docIndex, pageIndex)
+      if (!pageRect) return
+
+      const pagesScale = this.getDisplayedPageScale(docIndex, pageIndex) || 1
+      const relX = (clientX - pageRect.left) / pagesScale
+      const relY = (clientY - pageRect.top) / pagesScale
+
+      const doc = this.pdfDocuments?.[docIndex]
+      const pageObjects = doc?.allObjects?.[pageIndex] || []
+      if (pageObjects.length === 0) return
+      let hitObject = null
+
+      for (let i = pageObjects.length - 1; i >= 0; i--) {
+        const object = pageObjects[i]
+        const x = Number(object.x)
+        const y = Number(object.y)
+        const width = Number(object.width)
+        const height = Number(object.height)
+        if (![x, y, width, height].every(Number.isFinite)) {
+          continue
+        }
+        if (relX >= x && relX <= x + width && relY >= y && relY <= y + height) {
+          hitObject = object
+          break
+        }
+      }
+
+      if (!hitObject) return
+
+      this.$emit('pdf-elements:object-click', {
+        docIndex,
+        pageIndex,
+        object: hitObject,
+        event,
+      })
+    },
 
     handleKeyDown(event) {
       if (event.key === 'Escape' && this.isAddingMode) {
@@ -679,7 +751,7 @@ export default {
 
       applyScaleToDocs(this.pdfDocuments, this.scale)
 
-      this._pageMeasurementCache = {}
+      this._pageMeasurementCache = markRaw({})
       this.cachePageBounds()
     },
 
@@ -746,7 +818,7 @@ export default {
       if (!this.addingListenersAttached) return
       this.addingListenersAttached = false
       document.removeEventListener('mousemove', this.handleMouseMove)
-      document.removeEventListener('touchmove', this.handleMouseMove, { passive: true })
+      document.removeEventListener('touchmove', this.handleMouseMove)
       document.removeEventListener('mouseup', this.finishAdding)
       document.removeEventListener('touchend', this.finishAdding)
       document.removeEventListener('keydown', this.handleKeyDown)
@@ -765,8 +837,9 @@ export default {
         objectToAdd = { ...objectToAdd, id: this.generateObjectId() }
       }
 
-      const pageWidth = this.getPageWidth(docIndex, pageIndex)
-      const pageHeight = this.getPageHeight(docIndex, pageIndex)
+      const measurement = this.getCachedMeasurement(docIndex, pageIndex, pageRef)
+      const pageWidth = measurement.width
+      const pageHeight = measurement.height
 
       if (objectToAdd.x < 0 || objectToAdd.y < 0 ||
           objectToAdd.x + objectToAdd.width > pageWidth ||
@@ -814,11 +887,11 @@ export default {
             pageNumber: pageIndex + 1,
             scale: pagesScale,
             normalizedCoordinates: {
-              llx: parseInt(object.x, 10),
-              lly: parseInt(normalizedCanvasHeight - object.y, 10),
-              ury: parseInt(normalizedCanvasHeight - object.y - object.height, 10),
-              width: parseInt(object.width, 10),
-              height: parseInt(object.height, 10),
+              llx: Math.round(object.x),
+              lly: Math.round(normalizedCanvasHeight - object.y),
+              ury: Math.round(normalizedCanvasHeight - object.y - object.height),
+              width: Math.round(object.width),
+              height: Math.round(object.height),
             },
           })
         })
@@ -1026,9 +1099,11 @@ export default {
       if (!targetObject) return currentPageIndex
 
       let targetPageIndex = currentPageIndex
+      const pageBoundsList = this.getPageBoundsList()
       const pageBoundsMap = this.getPageBoundsMap()
-      for (const key in pageBoundsMap) {
-        const { docIndex: rectDocIndex, pageIndex, rect } = pageBoundsMap[key]
+      const boundsEntries = pageBoundsList.length ? pageBoundsList : Object.values(pageBoundsMap)
+      for (let i = 0; i < boundsEntries.length; i++) {
+        const { docIndex: rectDocIndex, pageIndex, rect } = boundsEntries[i]
         if (rectDocIndex === docIndex &&
             mouseX >= rect.left && mouseX <= rect.right &&
             mouseY >= rect.top && mouseY <= rect.bottom) {
@@ -1138,7 +1213,7 @@ export default {
           this.scheduleAutoFitZoom()
           return
         }
-        const canvases = this.$el?.querySelectorAll('canvas')
+        const canvases = this.$el?.querySelectorAll('canvas') as NodeListOf<HTMLCanvasElement> | undefined
         if (!canvases?.length) return
         maxCanvasWidth = Math.max(...Array.from(canvases).map(canvas =>
           canvas.width / (this.scale || 1),
@@ -1151,12 +1226,12 @@ export default {
         this.scale = optimalScale
         this.visualScale = optimalScale
         applyScaleToDocs(this.pdfDocuments, this.scale)
-        this._pageMeasurementCache = {}
+        this._pageMeasurementCache = markRaw({})
         this.cachePageBounds()
       }
     },
   },
-}
+})
 </script>
 
 <style scoped>

package/src/components/PDFPage.vue

@@ -7,12 +7,15 @@ SPDX-License-Identifier: AGPL-3.0-or-later
   <canvas ref="canvas" />
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent, type PropType } from 'vue'
+
+export default defineComponent({
   name: 'PDFPage',
+  emits: ['onMeasure'],
   props: {
     page: {
-      type: Promise,
+      type: Object as PropType<Promise<unknown>>,
       required: true,
     },
     scale: {
@@ -25,7 +28,7 @@ export default {
       dynamicScale: this.scale,
       isRendering: false,
       pendingRender: false,
-      renderTask: null,
+      renderTask: null as { cancel: () => void; promise: Promise<void> } | null,
     }
   },
   watch: {
@@ -41,7 +44,7 @@ export default {
     if (this.renderTask) {
       try {
         this.renderTask.cancel()
-      } catch (e) {
+      } catch {
         // Ignore render cancellation errors.
       }
       this.renderTask = null
@@ -73,12 +76,13 @@ export default {
         if (this.renderTask) {
           try {
             this.renderTask.cancel()
-          } catch (e) {
+          } catch {
             // Ignore render cancellation errors.
           }
           this.renderTask = null
         }
         const context = canvas.getContext('2d')
+        if (!context) return
         const viewport = _page.getViewport({
           scale: this.dynamicScale,
         })
@@ -100,7 +104,7 @@ export default {
       }
     },
   },
-}
+})
 </script>
 
 <style scoped>

package/src/index.ts

@@ -0,0 +1,18 @@
+// SPDX-FileCopyrightText: 2026 LibreCode coop and contributors
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import type { App } from 'vue'
+import PDFElements from './components/PDFElements.vue'
+
+export { setWorkerPath } from './utils/asyncReader'
+export type { PDFDocumentEntry, PDFElementObject, PDFElementsPublicApi } from './types'
+
+const install = (app: App) => {
+  const name = PDFElements.name || 'PDFElements'
+  app.component(name, PDFElements)
+}
+
+;(PDFElements as { install?: (app: App) => void }).install = install
+
+export default PDFElements
+export { PDFElements }

package/src/types.ts

@@ -0,0 +1,35 @@
+// SPDX-FileCopyrightText: 2026 LibreCode coop and contributors
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+export interface PDFElementObject {
+  id?: string
+  x: number
+  y: number
+  width: number
+  height: number
+  type?: string
+  label?: string
+  icon?: string
+  resizable?: boolean
+  [key: string]: unknown
+}
+
+export interface PDFDocumentEntry {
+  name: string
+  file: unknown
+  pdfDoc: unknown
+  numPages: number
+  pages: Promise<unknown>[]
+  pageWidths: number[]
+  pagesScale: number[]
+  allObjects: PDFElementObject[][]
+}
+
+export interface PDFElementsPublicApi {
+  startAddingElement: (templateObject: PDFElementObject) => void
+  addObjectToPage: (object: PDFElementObject, pageIndex?: number, docIndex?: number) => boolean
+  getAllObjects: (docIndex?: number) => PDFElementObject[]
+  updateObject: (docIndex: number, objectId: string, payload: Partial<PDFElementObject>) => void
+  deleteObject: (docIndex: number, objectId: string) => void
+  duplicateObject: (docIndex: number, objectId: string) => void
+}

package/src/utils/asyncReader.ts

@@ -0,0 +1,103 @@
+// SPDX-FileCopyrightText: 2026 LibreCode coop and contributors
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import type { PDFDocumentProxy, PDFWorker } from 'pdfjs-dist'
+
+let sharedWorker: PDFWorker | null = null
+let pdfjsPromise: Promise<typeof import('pdfjs-dist')> | null = null
+let workerUrlPromise: Promise<string> | null = null
+let workerSrcOverride: string | null = null
+
+function loadPdfjs() {
+  if (!pdfjsPromise) {
+    pdfjsPromise = import('pdfjs-dist')
+  }
+  return pdfjsPromise
+}
+
+function loadWorkerUrl() {
+  if (!workerUrlPromise) {
+    workerUrlPromise = import('pdfjs-dist/build/pdf.worker.min.mjs?url').then(
+      (mod) => mod.default as string
+    )
+  }
+  return workerUrlPromise
+}
+
+async function ensureWorkerSrc(pdfjs: typeof import('pdfjs-dist')) {
+  if (workerSrcOverride) {
+    pdfjs.GlobalWorkerOptions.workerSrc = workerSrcOverride
+    return
+  }
+  if (!pdfjs.GlobalWorkerOptions.workerSrc) {
+    pdfjs.GlobalWorkerOptions.workerSrc = await loadWorkerUrl()
+  }
+}
+
+async function getSharedWorker(pdfjs: typeof import('pdfjs-dist')): Promise<PDFWorker> {
+  if (!sharedWorker) {
+    await ensureWorkerSrc(pdfjs)
+    sharedWorker = new pdfjs.PDFWorker({}) as PDFWorker
+  }
+  return sharedWorker
+}
+
+export function setWorkerPath(path: string) {
+  workerSrcOverride = path
+  if (pdfjsPromise) {
+    pdfjsPromise.then((pdfjs) => {
+      pdfjs.GlobalWorkerOptions.workerSrc = path
+    })
+  }
+}
+
+export function readAsArrayBuffer(file: Blob): Promise<ArrayBuffer> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => resolve(reader.result as ArrayBuffer)
+    reader.onerror = reject
+    reader.readAsArrayBuffer(file)
+  })
+}
+
+type PdfInput =
+  | string
+  | ArrayBuffer
+  | ArrayBufferView
+  | Blob
+  | {
+      url?: string
+      data?: ArrayBuffer | Uint8Array
+      [key: string]: unknown
+    }
+
+export async function readAsPDF(
+  file: PdfInput,
+  options: Record<string, unknown> = {}
+): Promise<PDFDocumentProxy> {
+  const pdfjs = await loadPdfjs()
+  const worker = await getSharedWorker(pdfjs)
+  const isArrayBuffer = file instanceof ArrayBuffer
+  const isView = ArrayBuffer.isView(file)
+  const isBlob = typeof Blob !== 'undefined' && file instanceof Blob
+
+  if (file && typeof file === 'object' && !isArrayBuffer && !isView && !isBlob) {
+    return pdfjs.getDocument({ ...(file as Record<string, unknown>), ...options, worker }).promise
+  }
+  if (typeof file === 'string') {
+    return pdfjs.getDocument({ url: file, ...options, worker }).promise
+  }
+  if (isBlob) {
+    const data = await readAsArrayBuffer(file as Blob)
+    return pdfjs.getDocument({ data, ...options, worker }).promise
+  }
+  const data = isArrayBuffer
+    ? (file as ArrayBuffer)
+    : new Uint8Array(
+        (file as ArrayBufferView).buffer,
+        (file as ArrayBufferView).byteOffset,
+        (file as ArrayBufferView).byteLength
+      )
+
+  return pdfjs.getDocument({ data, ...options, worker }).promise
+}

package/src/utils/{geometry.js → geometry.ts}

@@ -1,14 +1,28 @@
 // SPDX-FileCopyrightText: 2026 LibreCode coop and contributors
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
-export function clampPosition(x, y, width, height, pageWidth, pageHeight) {
+export function clampPosition(
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  pageWidth: number,
+  pageHeight: number
+) {
   return {
     x: Math.max(0, Math.min(x, pageWidth - width)),
     y: Math.max(0, Math.min(y, pageHeight - height)),
   }
 }
 
-export function getVisibleArea(newX, newY, objWidth, objHeight, pageWidth, pageHeight) {
+export function getVisibleArea(
+  newX: number,
+  newY: number,
+  objWidth: number,
+  objHeight: number,
+  pageWidth: number,
+  pageHeight: number
+) {
   const visibleLeft = Math.max(0, newX)
   const visibleTop = Math.max(0, newY)
   const visibleRight = Math.min(pageWidth, newX + objWidth)