React + pdf.js: PDF перезагружается/исчезает при запуске «калибровать из двух точек»; не могу изменить страницы после эт ⇐ Javascript

[Anonymous]

Я строю инструмент браузера, который показывает большие чертежи PDF и позволяет вам измерять, с помощью поток «SET Scale → калибровать из двух точек» (щелкните две точки на листе, введите реальное расстояние, и мы сохраняем этот масштаб для страницы), но когда я запускаю калибровку PDF, иногда бланки/перезагрузки, а иногда я не могу менять страницу, пока я не обновляю; Я подозреваю, что зритель перезаряжается при изменении состояния пользовательского интерфейса (например, открытие модальной/переключающей калибровки) или наложение во время калибровки-это кража кликов, поэтому вторая точка никогда не регистрируется, а зритель остается «замороженным». Наложение на E-Events: нет, и калибровка автоматического канцела при изменении страницы, но я все еще вижу случайное исчезновение/перезагрузка. Я ищу надежный шаблон, чтобы сохранить базовый холст стабильным во время изменения состояния пользовательского интерфейса, проверка здравомыслия о том, что моя масштабная математика верна (расстояние измерения в точках PDF-1/72 ″-затем вычислите RealFeetPerpoint = RealFeet/MeasuredPDFPOINTS) и наилучшие консультации для больших листов (например, только raster и использование CSSS FOR PAN/ZOOM. Пороговые значения, или перейти к подходу в стиле Tiled/DeepZoom).
После того, как я решен, я также хочу использовать предустановленные шкалы, например, 3/16 '= 1' и многие другие, поэтому пользователь имеет параметры для калибровки с использованием двух точек или выбора пресетов. Точка A затем точка B на текущей странице < /p>
Модальный открывается для входа, например, 25 футов → хранилище зрителей на ноги на точку PDF, и все измерения используют эту шкалу < /p>
Лист остается совершенно неподвижно, пока выбирая точки; Я все еще могу ориентироваться в страницах (или калибровки отменяется чисто) < /p>
Фактическое
После давления калибровки из двух точек PDF иногда перезагружает /очищает или становится пустым < /p>
Навигация страниц Иногда останавливается (выглядит как Freeze Flag. с стабильным URL < /p>
// takeoff.tsx
import { useEffect, useState } from 'react';
import SimplePDFViewer from '@/components/TakeoffViewer';

export default function TakeoffPage({ project }: { project?: { pdfPath?: string } }) {
const [stablePdfUrl, setStablePdfUrl] = useState();

useEffect(() => {
const raw = project?.pdfPath ?? '';
if (!raw) return;

// normalize: if already '/api/...' or 'http...', use as-is; else prefix
const next =
/^https?:\/\//.test(raw) || raw.startsWith('/api/')
? raw
: `/api/files/${raw}`;

setStablePdfUrl(prev => (prev === next ? prev : next));
console.log('[parent] pdfPath raw:', raw, 'normalized:', next);
}, [project?.pdfPath]);

return (
{}}
// calibration is handled inside the viewer/store
/>
);
}
< /code>
Просмотрщик загружается один раз и видит страницу < /p>
// TakeoffViewer.tsx (React + TypeScript)
import React, { useEffect, useRef, useState, useCallback } from 'react';
import * as pdfjsLib from 'pdfjs-dist';
pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdf.worker.min.js';

type Props = { pdfUrl?: string; currentPage: number; onPageChange: (n: number) => void; };

export function SimplePDFViewer({ pdfUrl, currentPage }: Props) {
const canvasRef = useRef(null);
const [pdfDoc, setPdfDoc] = useState
(null);
const prevUrlRef = useRef();

// Load only when URL really changes
useEffect(() => {
if (prevUrlRef.current === pdfUrl) return;
console.warn('[PDF loader] firing for url:', pdfUrl);
prevUrlRef.current = pdfUrl;
if (!pdfUrl) { setPdfDoc(null); return; }

const task = pdfjsLib.getDocument(pdfUrl);
task.promise.then(doc => setPdfDoc(doc)).catch(console.error);
return () => task.destroy?.();
}, [pdfUrl]);

// Render current page
const renderPage = useCallback(async (n: number) => {
if (!pdfDoc || !canvasRef.current) return;
const page = await pdfDoc.getPage(n);
const viewport = page.getViewport({ scale: 1 });
const canvas = canvasRef.current;
const ctx = canvas.getContext('2d')!;
canvas.width = Math.floor(viewport.width);
canvas.height = Math.floor(viewport.height);
await page.render({ canvasContext: ctx, viewport }).promise;
}, [pdfDoc]);

useEffect(() => { renderPage(currentPage); }, [renderPage, currentPage]);

return ;
}

< /code>
калибровочный поток (двухточечный) < /p>
// CSS → PDF point conversion (PDF points are 1/72")
function cssToPdfPoint(canvasEl: HTMLCanvasElement, clientX: number, clientY: number) {
const rect = canvasEl.getBoundingClientRect();
const dpr = window.devicePixelRatio || 1;
const cssX = clientX - rect.left;
const cssY = clientY - rect.top;
const scaleX = canvasEl.width / rect.width;
const scaleY = canvasEl.height / rect.height;
return { x: (cssX * scaleX) / dpr, y: (cssY * scaleY) / dpr };
}

// after two clicks:
const pixelDistance = Math.hypot(p2.x - p1.x, p2.y - p1.y); // PDF points
// if user enters "25 ft":
const feetPerPoint = 25 / pixelDistance; // ratio in ft / PDF-point
// store per-page scale: real = pixels * feetPerPoint
< /code>
Example inside a list:

```
// eight-space indentation produces a preformatted code block
const ratio = realFeet / pdfPointDistance;
```
< /code>
What I’ve tried
Stabilized the URL (no undefined → url → undefined flips)
Guarded loader: only run when URL actually changes
During calibration, skip re-rendering and avoid changing base canvas size
“Snapshot canvas” overlay while calibrating with pointerEvents: none
Auto-cancel calibration on page change
Still, on some runs the base canvas blanks/reloads or navigation gets stuck.
Questions I have
React + pdf.js: what’s the robust pattern to keep the base canvas from clearing/reloading when toggling UI state (opening the calibration modal, switching tools), so the page stays visible while I pick two points?
Coordinate system / scale math: is computing feetPerPoint = realFeet / pdfPointDistance the correct approach (given PDF points are 1/72")? Or should I use pdf.js’s viewport transform or page.view for a more stable mapping?
Large sheets: should I avoid re-rendering on pan/zoom and use CSS transforms, only re-rasterizing when the zoom crosses thresholds? Is a tile pyramid (DeepZoom/IIIF-style) the recommended approach for performance?
Environment
React 18 (TypeScript)
pdf.js v3.x
Vite dev server
Chrome latest

Подробнее здесь: https://stackoverflow.com/questions/797 ... two-points