refactor(astrolabe): extract PDF viewer to dedicated component
Replace fragile 20-iteration retry loop with proper Vue lifecycle management. Changes: - Create PDFViewer.vue component (~200 lines) with: - Proper mounted/beforeUnmount lifecycle hooks - Loading/error/content states - Page navigation controls - PDF document cleanup - User-friendly error messages - Simplify App.vue by removing ~120 lines: - Remove loadPdf() and renderPdfPage() methods - Remove manual DOM polling with $nextTick() loops - Replace PDF template with <PDFViewer> component - Add pdfjs-dist@4.0.379 dependency Result: Canvas found on first attempt instead of requiring 20 retries. Follows patterns from Nextcloud's production files_pdfviewer app and 2025 Vue.js + PDF.js best practices. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Chris Coutinho
+198
@@ -13,6 +13,7 @@
|
||||
"@nextcloud/l10n": "^3.1.0",
|
||||
"@nextcloud/router": "^3.0.1",
|
||||
"@nextcloud/vue": "^8.29.2",
|
||||
"pdfjs-dist": "^4.0.379",
|
||||
"plotly.js-dist-min": "^2.35.3",
|
||||
"vue": "^2.7.16",
|
||||
"vue-material-design-icons": "^5.3.1"
|
||||
@@ -1479,6 +1480,191 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@napi-rs/canvas": {
|
||||
"version": "0.1.84",
|
||||
"resolved": "https://registry.npmjs.org/@napi-rs/canvas/-/canvas-0.1.84.tgz",
|
||||
"integrity": "sha512-88FTNFs4uuiFKP0tUrPsEXhpe9dg7za9ILZJE08pGdUveMIDeana1zwfVkqRHJDPJFAmGY3dXmJ99dzsy57YnA==",
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"workspaces": [
|
||||
"e2e/*"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@napi-rs/canvas-android-arm64": "0.1.84",
|
||||
"@napi-rs/canvas-darwin-arm64": "0.1.84",
|
||||
"@napi-rs/canvas-darwin-x64": "0.1.84",
|
||||
"@napi-rs/canvas-linux-arm-gnueabihf": "0.1.84",
|
||||
"@napi-rs/canvas-linux-arm64-gnu": "0.1.84",
|
||||
"@napi-rs/canvas-linux-arm64-musl": "0.1.84",
|
||||
"@napi-rs/canvas-linux-riscv64-gnu": "0.1.84",
|
||||
"@napi-rs/canvas-linux-x64-gnu": "0.1.84",
|
||||
"@napi-rs/canvas-linux-x64-musl": "0.1.84",
|
||||
"@napi-rs/canvas-win32-x64-msvc": "0.1.84"
|
||||
}
|
||||
},
|
||||
"node_modules/@napi-rs/canvas-android-arm64": {
|
||||
"version": "0.1.84",
|
||||
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-android-arm64/-/canvas-android-arm64-0.1.84.tgz",
|
||||
"integrity": "sha512-pdvuqvj3qtwVryqgpAGornJLV6Ezpk39V6wT4JCnRVGy8I3Tk1au8qOalFGrx/r0Ig87hWslysPpHBxVpBMIww==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"android"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@napi-rs/canvas-darwin-arm64": {
|
||||
"version": "0.1.84",
|
||||
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-darwin-arm64/-/canvas-darwin-arm64-0.1.84.tgz",
|
||||
"integrity": "sha512-A8IND3Hnv0R6abc6qCcCaOCujTLMmGxtucMTZ5vbQUrEN/scxi378MyTLtyWg+MRr6bwQJ6v/orqMS9datIcww==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@napi-rs/canvas-darwin-x64": {
|
||||
"version": "0.1.84",
|
||||
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-darwin-x64/-/canvas-darwin-x64-0.1.84.tgz",
|
||||
"integrity": "sha512-AUW45lJhYWwnA74LaNeqhvqYKK/2hNnBBBl03KRdqeCD4tKneUSrxUqIv8d22CBweOvrAASyKN3W87WO2zEr/A==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@napi-rs/canvas-linux-arm-gnueabihf": {
|
||||
"version": "0.1.84",
|
||||
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm-gnueabihf/-/canvas-linux-arm-gnueabihf-0.1.84.tgz",
|
||||
"integrity": "sha512-8zs5ZqOrdgs4FioTxSBrkl/wHZB56bJNBqaIsfPL4ZkEQCinOkrFF7xIcXiHiKp93J3wUtbIzeVrhTIaWwqk+A==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@napi-rs/canvas-linux-arm64-gnu": {
|
||||
"version": "0.1.84",
|
||||
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm64-gnu/-/canvas-linux-arm64-gnu-0.1.84.tgz",
|
||||
"integrity": "sha512-i204vtowOglJUpbAFWU5mqsJgH0lVpNk/Ml4mQtB4Lndd86oF+Otr6Mr5KQnZHqYGhlSIKiU2SYnUbhO28zGQA==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@napi-rs/canvas-linux-arm64-musl": {
|
||||
"version": "0.1.84",
|
||||
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm64-musl/-/canvas-linux-arm64-musl-0.1.84.tgz",
|
||||
"integrity": "sha512-VyZq0EEw+OILnWk7G3ZgLLPaz1ERaPP++jLjeyLMbFOF+Tr4zHzWKiKDsEV/cT7btLPZbVoR3VX+T9/QubnURQ==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@napi-rs/canvas-linux-riscv64-gnu": {
|
||||
"version": "0.1.84",
|
||||
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-riscv64-gnu/-/canvas-linux-riscv64-gnu-0.1.84.tgz",
|
||||
"integrity": "sha512-PSMTh8DiThvLRsbtc/a065I/ceZk17EXAATv9uNvHgkgo7wdEfTh2C3aveNkBMGByVO3tvnvD5v/YFtZL07cIg==",
|
||||
"cpu": [
|
||||
"riscv64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@napi-rs/canvas-linux-x64-gnu": {
|
||||
"version": "0.1.84",
|
||||
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-x64-gnu/-/canvas-linux-x64-gnu-0.1.84.tgz",
|
||||
"integrity": "sha512-N1GY3noO1oqgEo3rYQIwY44kfM11vA0lDbN0orTOHfCSUZTUyiYCY0nZ197QMahZBm1aR/vYgsWpV74MMMDuNA==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@napi-rs/canvas-linux-x64-musl": {
|
||||
"version": "0.1.84",
|
||||
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-x64-musl/-/canvas-linux-x64-musl-0.1.84.tgz",
|
||||
"integrity": "sha512-vUZmua6ADqTWyHyei81aXIt9wp0yjeNwTH0KdhdeoBb6azHmFR8uKTukZMXfLCC3bnsW0t4lW7K78KNMknmtjg==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@napi-rs/canvas-win32-x64-msvc": {
|
||||
"version": "0.1.84",
|
||||
"resolved": "https://registry.npmjs.org/@napi-rs/canvas-win32-x64-msvc/-/canvas-win32-x64-msvc-0.1.84.tgz",
|
||||
"integrity": "sha512-YSs8ncurc1xzegUMNnQUTYrdrAuaXdPMOa+iYYyAxydOtg0ppV386hyYMsy00Yip1NlTgLCseRG4sHSnjQx6og==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@napi-rs/wasm-runtime": {
|
||||
"version": "0.2.12",
|
||||
"resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.12.tgz",
|
||||
@@ -9926,6 +10112,18 @@
|
||||
"node": ">= 0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/pdfjs-dist": {
|
||||
"version": "4.10.38",
|
||||
"resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-4.10.38.tgz",
|
||||
"integrity": "sha512-/Y3fcFrXEAsMjJXeL9J8+ZG9U01LbuWaYypvDW2ycW1jL269L3js3DVBjDJ0Up9Np1uqDXsDrRihHANhZOlwdQ==",
|
||||
"license": "Apache-2.0",
|
||||
"engines": {
|
||||
"node": ">=20"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@napi-rs/canvas": "^0.1.65"
|
||||
}
|
||||
},
|
||||
"node_modules/picocolors": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
|
||||
|
||||
Vendored
+1
@@ -23,6 +23,7 @@
|
||||
"@nextcloud/router": "^3.0.1",
|
||||
"@nextcloud/vue": "^8.29.2",
|
||||
"plotly.js-dist-min": "^2.35.3",
|
||||
"pdfjs-dist": "^4.0.379",
|
||||
"vue": "^2.7.16",
|
||||
"vue-material-design-icons": "^5.3.1"
|
||||
},
|
||||
|
||||
Vendored
+237
-23
@@ -173,14 +173,13 @@
|
||||
<span class="mcp-result-type">{{ result.doc_type || 'unknown' }}</span>
|
||||
<div class="mcp-result-actions">
|
||||
<NcButton
|
||||
v-if="result.excerpt"
|
||||
type="tertiary"
|
||||
:aria-label="t('astroglobe', 'Toggle excerpt')"
|
||||
@click="toggleExcerpt(index)">
|
||||
:aria-label="t('astroglobe', 'Show Chunk')"
|
||||
@click="viewChunk(result)">
|
||||
<template #icon>
|
||||
<TextBoxOutline v-if="!expandedExcerpts[index]" :size="18" />
|
||||
<TextBoxRemoveOutline v-else :size="18" />
|
||||
<Eye :size="18" />
|
||||
</template>
|
||||
{{ t('astroglobe', 'Show Chunk') }}
|
||||
</NcButton>
|
||||
<span class="mcp-result-score">{{ formatScore(result.score) }}%</span>
|
||||
</div>
|
||||
@@ -192,15 +191,17 @@
|
||||
{{ result.title || t('astroglobe', 'Untitled') }}
|
||||
<OpenInNew :size="14" class="mcp-external-icon" />
|
||||
</a>
|
||||
<div
|
||||
v-if="result.excerpt && expandedExcerpts[index]"
|
||||
class="mcp-result-excerpt mcp-result-excerpt--expanded">
|
||||
{{ result.excerpt }}
|
||||
<div class="mcp-result-metadata">
|
||||
<span v-if="result.chunk_index !== undefined && result.total_chunks">
|
||||
{{ t('astroglobe', 'Chunk {chunk}/{total}', { chunk: result.chunk_index + 1, total: result.total_chunks }) }}
|
||||
</span>
|
||||
<span v-if="result.page_number && result.page_count" class="mcp-metadata-separator">
|
||||
· {{ t('astroglobe', 'Page {page}/{total}', { page: result.page_number, total: result.page_count }) }}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="result.excerpt"
|
||||
class="mcp-result-excerpt">
|
||||
{{ truncateExcerpt(result.excerpt) }}
|
||||
{{ result.excerpt }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -277,6 +278,43 @@
|
||||
</NcButton>
|
||||
</div>
|
||||
</NcAppContent>
|
||||
|
||||
<!-- PDF/Chunk Viewer Modal -->
|
||||
<div v-if="showViewer" class="mcp-modal-overlay" @click.self="closeViewer">
|
||||
<div class="mcp-modal">
|
||||
<div class="mcp-modal-header">
|
||||
<h3>{{ viewerTitle }}</h3>
|
||||
<NcButton type="tertiary" @click="closeViewer">
|
||||
<template #icon>
|
||||
<Close :size="20" />
|
||||
</template>
|
||||
</NcButton>
|
||||
</div>
|
||||
<div class="mcp-modal-body">
|
||||
<!-- Loading State -->
|
||||
<div v-if="viewerLoading" class="mcp-viewer-loading">
|
||||
<NcLoadingIcon :size="32" />
|
||||
<span>{{ t('astroglobe', 'Loading content...') }}</span>
|
||||
</div>
|
||||
|
||||
<!-- PDF Viewer -->
|
||||
<PDFViewer
|
||||
v-else-if="viewerType === 'pdf'"
|
||||
:file-path="currentPdfPath"
|
||||
:page-number="viewerPage"
|
||||
@prev-page="viewerPage--"
|
||||
@next-page="viewerPage++"
|
||||
@error="handlePdfError" />
|
||||
|
||||
<!-- Text Viewer (for non-PDFs) -->
|
||||
<div v-else class="mcp-text-viewer">
|
||||
<div v-if="viewerContext.before" class="mcp-context-text">{{ viewerContext.before }}</div>
|
||||
<div class="mcp-highlighted-chunk">{{ viewerContext.chunk }}</div>
|
||||
<div v-if="viewerContext.after" class="mcp-context-text">{{ viewerContext.after }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</NcContent>
|
||||
</template>
|
||||
|
||||
@@ -302,10 +340,26 @@ import Refresh from 'vue-material-design-icons/Refresh.vue'
|
||||
import TextBoxOutline from 'vue-material-design-icons/TextBoxOutline.vue'
|
||||
import TextBoxRemoveOutline from 'vue-material-design-icons/TextBoxRemoveOutline.vue'
|
||||
import OpenInNew from 'vue-material-design-icons/OpenInNew.vue'
|
||||
import Eye from 'vue-material-design-icons/Eye.vue'
|
||||
import Close from 'vue-material-design-icons/Close.vue'
|
||||
|
||||
import PDFViewer from './components/PDFViewer.vue'
|
||||
|
||||
import axios from '@nextcloud/axios'
|
||||
import { generateUrl } from '@nextcloud/router'
|
||||
import Plotly from 'plotly.js-dist-min'
|
||||
import * as pdfjsLib from 'pdfjs-dist'
|
||||
|
||||
// Set worker source with error handling
|
||||
try {
|
||||
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
|
||||
'pdfjs-dist/build/pdf.worker.mjs',
|
||||
import.meta.url
|
||||
).toString()
|
||||
} catch (e) {
|
||||
console.warn('Failed to set PDF.js worker, will use fallback', e)
|
||||
// PDF.js will use fake worker automatically
|
||||
}
|
||||
|
||||
// App name for translations
|
||||
const APP_NAME = 'astroglobe'
|
||||
@@ -324,6 +378,7 @@ export default {
|
||||
NcNoteCard,
|
||||
NcEmptyContent,
|
||||
NcCheckboxRadioSwitch,
|
||||
PDFViewer,
|
||||
Magnify,
|
||||
ChartBox,
|
||||
Cog,
|
||||
@@ -333,6 +388,8 @@ export default {
|
||||
TextBoxOutline,
|
||||
TextBoxRemoveOutline,
|
||||
OpenInNew,
|
||||
Eye,
|
||||
Close,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -358,6 +415,18 @@ export default {
|
||||
vectorStatus: null,
|
||||
statusLoading: false,
|
||||
statusError: null,
|
||||
// Viewer state
|
||||
showViewer: false,
|
||||
viewerLoading: false,
|
||||
viewerTitle: '',
|
||||
viewerType: 'text',
|
||||
viewerPage: 1,
|
||||
currentPdfPath: '',
|
||||
viewerContext: {
|
||||
chunk: '',
|
||||
before: '',
|
||||
after: '',
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -482,15 +551,13 @@ export default {
|
||||
case 'note':
|
||||
return generateUrl(`/apps/notes/#/note/${id}`)
|
||||
case 'file':
|
||||
if (result.path) {
|
||||
const dir = result.path.substring(0, result.path.lastIndexOf('/')) || '/'
|
||||
const file = result.path.substring(result.path.lastIndexOf('/') + 1)
|
||||
return generateUrl(`/apps/files/?dir=${encodeURIComponent(dir)}&scrollto=${encodeURIComponent(file)}`)
|
||||
if (id) {
|
||||
return generateUrl(`/apps/files/files/${id}?dir=/&editing=false&openfile=true`)
|
||||
}
|
||||
return generateUrl('/apps/files/')
|
||||
case 'deck_card':
|
||||
if (result.board_id && result.card_id) {
|
||||
return generateUrl(`/apps/deck/#!/board/${result.board_id}/card/${result.card_id}`)
|
||||
if (result.board_id && id) {
|
||||
return generateUrl(`/apps/deck/board/${result.board_id}/card/${id}`)
|
||||
}
|
||||
return generateUrl('/apps/deck/')
|
||||
case 'calendar':
|
||||
@@ -636,14 +703,68 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
async viewChunk(result) {
|
||||
this.showViewer = true
|
||||
this.viewerLoading = true
|
||||
this.viewerTitle = result.title || 'Chunk Viewer'
|
||||
|
||||
try {
|
||||
// Fetch chunk context
|
||||
const url = generateUrl('/apps/astroglobe/api/chunk-context')
|
||||
const params = {
|
||||
doc_type: result.doc_type,
|
||||
doc_id: result.id,
|
||||
start: result.chunk_start_offset,
|
||||
end: result.chunk_end_offset,
|
||||
}
|
||||
|
||||
const response = await axios.get(url, { params })
|
||||
|
||||
if (response.data.success) {
|
||||
// Determine viewer type and setup
|
||||
if (result.doc_type === 'file' && response.data.page_number) {
|
||||
this.viewerType = 'pdf'
|
||||
this.currentPdfPath = result.metadata?.path || ''
|
||||
this.viewerPage = response.data.page_number
|
||||
} else {
|
||||
this.viewerType = 'text'
|
||||
this.viewerContext = {
|
||||
chunk: response.data.chunk_text,
|
||||
before: response.data.before_context,
|
||||
after: response.data.after_context,
|
||||
}
|
||||
}
|
||||
} else {
|
||||
console.error('Failed to load chunk:', response.data.error)
|
||||
this.closeViewer()
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error loading chunk:', err)
|
||||
this.closeViewer()
|
||||
} finally {
|
||||
this.viewerLoading = false
|
||||
}
|
||||
},
|
||||
|
||||
handlePdfError(error) {
|
||||
console.error('PDF viewer error:', error)
|
||||
this.viewerType = 'text'
|
||||
},
|
||||
|
||||
closeViewer() {
|
||||
this.showViewer = false
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.mcp-section {
|
||||
padding: 24px;
|
||||
max-width: 1000px;
|
||||
/* Standard Nextcloud app padding - matches Deck/core spacing */
|
||||
padding: 44px 24px 24px var(--default-clickable-area);
|
||||
/* Remove max-width to allow content to fill available space like Notes app */
|
||||
min-height: calc(100vh - 150px); /* Ensure content extends to bottom of viewport */
|
||||
}
|
||||
|
||||
.mcp-section-header {
|
||||
@@ -879,14 +1000,19 @@ a.mcp-result-title {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mcp-result-metadata {
|
||||
font-size: 12px;
|
||||
color: var(--color-text-maxcontrast);
|
||||
margin-bottom: 6px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.mcp-result-excerpt {
|
||||
font-size: 13px;
|
||||
color: var(--color-text-maxcontrast);
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
|
||||
&--expanded {
|
||||
display: block;
|
||||
@@ -963,6 +1089,80 @@ a.mcp-result-title {
|
||||
margin: 0 3px;
|
||||
}
|
||||
|
||||
// Modal
|
||||
.mcp-modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.mcp-modal {
|
||||
background: var(--color-main-background);
|
||||
border-radius: var(--border-radius-large);
|
||||
width: 90%;
|
||||
max-width: 900px;
|
||||
height: 80vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.mcp-modal-header {
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.mcp-modal-body {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mcp-viewer-loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: var(--color-text-lighter);
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.mcp-text-viewer {
|
||||
font-family: monospace;
|
||||
line-height: 1.6;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.mcp-context-text {
|
||||
color: var(--color-text-lighter);
|
||||
}
|
||||
|
||||
.mcp-highlighted-chunk {
|
||||
background: #fff9c4;
|
||||
color: #000;
|
||||
padding: 4px;
|
||||
border-radius: 2px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.mcp-search-row {
|
||||
flex-direction: column;
|
||||
@@ -977,5 +1177,19 @@ a.mcp-result-title {
|
||||
.mcp-checkbox-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.mcp-modal {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
/* Fix for double margin/padding issue when nested in #content */
|
||||
#content-vue {
|
||||
margin-top: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
+278
@@ -0,0 +1,278 @@
|
||||
<template>
|
||||
<div class="pdf-viewer">
|
||||
<div v-if="loading" class="loading-indicator">
|
||||
<NcLoadingIcon :size="64" />
|
||||
<p>{{ t('astroglobe', 'Loading PDF...') }}</p>
|
||||
</div>
|
||||
<div v-else-if="error" class="error-message">
|
||||
<AlertCircle :size="48" />
|
||||
<p>{{ error }}</p>
|
||||
</div>
|
||||
<div v-else class="pdf-canvas-container" ref="container">
|
||||
<canvas ref="canvas"></canvas>
|
||||
</div>
|
||||
<div v-if="!loading && !error && totalPages > 0" class="pdf-controls">
|
||||
<NcButton
|
||||
:disabled="pageNumber <= 1"
|
||||
@click="$emit('prev-page')">
|
||||
<template #icon>
|
||||
<ChevronLeft :size="20" />
|
||||
</template>
|
||||
{{ t('astroglobe', 'Previous') }}
|
||||
</NcButton>
|
||||
<span class="page-info">
|
||||
{{ t('astroglobe', 'Page {current} of {total}', { current: pageNumber, total: totalPages }) }}
|
||||
</span>
|
||||
<NcButton
|
||||
:disabled="pageNumber >= totalPages"
|
||||
@click="$emit('next-page')">
|
||||
<template #icon>
|
||||
<ChevronRight :size="20" />
|
||||
</template>
|
||||
{{ t('astroglobe', 'Next') }}
|
||||
</NcButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as pdfjsLib from 'pdfjs-dist'
|
||||
import { generateUrl } from '@nextcloud/router'
|
||||
import { translate as t } from '@nextcloud/l10n'
|
||||
import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
|
||||
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
|
||||
import AlertCircle from 'vue-material-design-icons/AlertCircle.vue'
|
||||
import ChevronLeft from 'vue-material-design-icons/ChevronLeft.vue'
|
||||
import ChevronRight from 'vue-material-design-icons/ChevronRight.vue'
|
||||
|
||||
export default {
|
||||
name: 'PDFViewer',
|
||||
components: {
|
||||
NcLoadingIcon,
|
||||
NcButton,
|
||||
AlertCircle,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
},
|
||||
props: {
|
||||
filePath: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
pageNumber: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
scale: {
|
||||
type: Number,
|
||||
default: 1.5,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pdfDoc: null,
|
||||
loading: true,
|
||||
error: null,
|
||||
totalPages: 0,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
pageNumber(newPage) {
|
||||
if (this.pdfDoc && newPage > 0 && newPage <= this.totalPages) {
|
||||
this.renderPage(newPage)
|
||||
}
|
||||
},
|
||||
filePath() {
|
||||
// Reload PDF if file path changes
|
||||
this.loadPDF()
|
||||
},
|
||||
},
|
||||
async mounted() {
|
||||
await this.loadPDF()
|
||||
},
|
||||
beforeUnmount() {
|
||||
if (this.pdfDoc) {
|
||||
this.pdfDoc.destroy()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
t,
|
||||
async loadPDF() {
|
||||
this.loading = true
|
||||
this.error = null
|
||||
|
||||
try {
|
||||
// Clean and encode the file path
|
||||
const cleanPath = this.filePath.startsWith('/')
|
||||
? this.filePath.substring(1)
|
||||
: this.filePath
|
||||
const encodedPath = cleanPath.split('/').map(encodeURIComponent).join('/')
|
||||
const downloadUrl = generateUrl(`/remote.php/webdav/${encodedPath}`)
|
||||
|
||||
// Load PDF document
|
||||
const loadingTask = pdfjsLib.getDocument({
|
||||
url: downloadUrl,
|
||||
withCredentials: true,
|
||||
useWorkerFetch: false, // Disable worker fetch for CSP compliance
|
||||
isEvalSupported: false, // Disable eval for CSP
|
||||
})
|
||||
|
||||
this.pdfDoc = await loadingTask.promise
|
||||
this.totalPages = this.pdfDoc.numPages
|
||||
this.$emit('loaded', { totalPages: this.totalPages })
|
||||
|
||||
// Wait for canvas to be in DOM
|
||||
await this.$nextTick()
|
||||
|
||||
// Canvas should be available now (mounted lifecycle guarantees it)
|
||||
if (!this.$refs.canvas) {
|
||||
throw new Error('Canvas element not available after mount')
|
||||
}
|
||||
|
||||
// Render the requested page
|
||||
await this.renderPage(this.pageNumber)
|
||||
} catch (err) {
|
||||
console.error('PDF load error:', err)
|
||||
|
||||
// Provide user-friendly error messages
|
||||
if (err.name === 'MissingPDFException') {
|
||||
this.error = t('astroglobe', 'PDF file not found')
|
||||
} else if (err.name === 'InvalidPDFException') {
|
||||
this.error = t('astroglobe', 'Invalid or corrupted PDF file')
|
||||
} else if (err.message?.includes('NetworkError') || err.message?.includes('Network')) {
|
||||
this.error = t('astroglobe', 'Network error loading PDF')
|
||||
} else if (err.message?.includes('404')) {
|
||||
this.error = t('astroglobe', 'PDF file not found')
|
||||
} else {
|
||||
this.error = t('astroglobe', 'Unable to load PDF file')
|
||||
}
|
||||
|
||||
this.$emit('error', err)
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
async renderPage(pageNum) {
|
||||
if (!this.pdfDoc) {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const page = await this.pdfDoc.getPage(pageNum)
|
||||
const canvas = this.$refs.canvas
|
||||
|
||||
if (!canvas) {
|
||||
console.error('PDF canvas ref not found')
|
||||
this.error = t('astroglobe', 'Canvas element not available')
|
||||
return
|
||||
}
|
||||
|
||||
const context = canvas.getContext('2d')
|
||||
|
||||
// Use scale for better resolution on high-DPI screens
|
||||
const viewport = page.getViewport({ scale: this.scale })
|
||||
|
||||
canvas.height = viewport.height
|
||||
canvas.width = viewport.width
|
||||
|
||||
// Render page to canvas
|
||||
const renderContext = {
|
||||
canvasContext: context,
|
||||
viewport: viewport,
|
||||
}
|
||||
|
||||
await page.render(renderContext).promise
|
||||
|
||||
this.$emit('page-rendered', { pageNumber: pageNum })
|
||||
} catch (err) {
|
||||
console.error('PDF render error:', err)
|
||||
this.error = t('astroglobe', 'Error rendering PDF page')
|
||||
this.$emit('error', err)
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.pdf-viewer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.loading-indicator {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 48px;
|
||||
|
||||
p {
|
||||
color: var(--color-text-maxcontrast);
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.error-message {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 48px;
|
||||
color: var(--color-error);
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.pdf-canvas-container {
|
||||
position: relative;
|
||||
border: 1px solid var(--color-border);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
background: var(--color-main-background);
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
|
||||
canvas {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.pdf-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 8px;
|
||||
background: var(--color-background-dark);
|
||||
border-radius: var(--border-radius-large);
|
||||
|
||||
.page-info {
|
||||
font-size: 14px;
|
||||
color: var(--color-text-maxcontrast);
|
||||
min-width: 120px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.pdf-viewer {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.pdf-controls {
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
|
||||
.page-info {
|
||||
order: -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user