Сообщество программистов Autodesk в СНГ :: Forge Viewer: Markup-ы PDF документов

31/07/2020

Forge Viewer: Markup-ы PDF документов

Ранее в ForgeViewer-е был единственный компонент LeafletLoader для отображения PDF документов, затем появился показывали новый способ загрузки PDF в Forge Viewer c помощью нового компонента PDFLoader, мы писали об этом в статье https://forge.autodesk.com/blog/fast-pdf-viewingmarkup-inside-forge-viewer.

Какой из загрузчиков будет использоваться зависит от разрешения, заданного в самом PDF документе, или, если быть точнее, в зависимости от значения totalRasterPixels в манифесте документа, преобразованного сервисом. Также можно повлиять на то, какой именно загрузчик будет использоваться для отображения документа можно с помощью свойств LMV_RASTER_PDF и LMV_VECTOR_PDF.

Вы можете посмотреть, какой именно загрузчик был использован при отображении PDF с помощью инструментов разработчика в браузере:

Код - JavaScript: [Выделить]

NOP_VIEWER.model.loader
// значением будет либо
// LeafletLoader со свойством 'isLeafletLoader = true' или
// PDFLoader со свойством 'isPdfLoader = true'

При этом вероятной проблемой для Вас может стать то, что пользователь мог создавать markup-ы в документе, загруженным с помощью LeafletLoader-а, а потом пытаться просмотреть эти же самые пометки, но при этом для отображения документа использовался PDFLoader. ВPDF документе, загруженном LeafletLoader-ом, используется нормализованная система координат, в то время как PDFLoader использует систему координат страницы самого PDF документа, поэтому Вы, скорее всего столкнетесь с тем, что при смене загрузчиков позиция и масштаб markup-ов будут некорректными, как на картинке в начале статьи.

Помочь решить эту проблему может функция Autodesk.Viewing.PDFUtils.leafletToPdfWorld(), которая возвращает преобразование позиции и масштаба, необходимое для корректного отображения markup-ов. Зная это преобразование, самым простым решением может быть отредактировать SVG, добавив атрибут «transform».

Итак, давайте проверим, как это работает. В инструментах разработчика браузера, в консоли:

1) Перед загрузкой документа установим:

Код - JavaScript: [Выделить]

window.LMV_RASTER_PDF = true

2) Проверим, что после загрузки PDF используется LeafletLoader

Код - JavaScript: [Выделить]

NOP_VIEWER.model.loader

3) Перейдем в режим редактирования markup-ов:

Код - JavaScript: [Выделить]

let markupExtension = await NOP_VIEWER.loadExtension('Autodesk.Viewing.MarkupsCore')
markupExtension.enterEditMode();
var arrow = new Autodesk.Viewing.Extensions.Markups.Core.EditModeArrow(markupExtension)
markupExtension.changeEditMode(arrow)

4) Нарисуем несколько стрелочек, постараемся запомнить их расположение :-)

5) Сохраним в SVG созданные markup-ы:

Код - JavaScript: [Выделить]

var markupGeneratedForLeaflet = markupExtension.generateData()

6) Переключимся на PDFLoader:

Код - JavaScript: [Выделить]

window.LMV_RASTER_PDF = false

7) Заново загрузим PDF документ

8) Загрузим сохраненные markup-ы с коррекцией их положения и масштаба:

Код - JavaScript: [Выделить]

let markupExtension = await NOP_VIEWER.loadExtension('Autodesk.Viewing.MarkupsCore')
markupExtension.show()
markupExtension.loadMarkups(markupGeneratedForLeaflet, "layerName")
if (NOP_VIEWER.model.loader.isPdfLoader) {
  let origin = Autodesk.Viewing.PDFUtils.leafletToPdfWorld(NOP_VIEWER, new THREE.Vector3(0,0,0))
  let one = Autodesk.Viewing.PDFUtils.leafletToPdfWorld(NOP_VIEWER, new THREE.Vector3(1,1,1))
  let svg = markupExtension.svg
  svg.firstChild.setAttribute("transform", `translate(${origin.x}, ${origin.y}) scale(${one.x - origin.x}, ${one.y - origin.y})`)
}

Если Вы столкнулись с противоположной проблемой, когда данные SVG Ваших markup-ов были созданы в документе, загруженном PDFLoader-ом, а Вы хотите их корректно отобразить с использованием LeafletLoader-а, на шаге 8, Вы можете воспользоваться следующим кодом:

Код - JavaScript: [Выделить]

let markupExtension = await NOP_VIEWER.loadExtension('Autodesk.Viewing.MarkupsCore')
markupExtension.show()
markupExtension.loadMarkups(markupGeneratedForPdf, "layerName")
if (NOP_VIEWER.model.loader.isLeafletLoader) {
  let origin = Autodesk.Viewing.PDFUtils.leafletToPdfWorld(NOP_VIEWER, new THREE.Vector3(0,0,0))
  let one = Autodesk.Viewing.PDFUtils.leafletToPdfWorld(NOP_VIEWER, new THREE.Vector3(1,1,1))
  let svg = markupExtension.svg
  svg.firstChild.setAttribute("transform", `scale(${1 / (one.x - origin.x)}, ${1 / (one.y - origin.y)}) translate(${-origin.x}, ${-origin.y})`)
}