feat: default settings prop

src/PDFViewer.vue

@@ -60,6 +60,7 @@
 </template>
 
 <script>
+import controls, { CATALOG } from './constants/controls'
 import './assets/iconfont/iconfont.css'
 import Viewer from './components/Viewer/Viewer.vue'
 import ViewerPageSelector from './components/ViewerPageSelector.vue'
@@ -74,18 +75,7 @@ export default {
     controls: {
       type: Array,
       default: () => {
-        return [
-          'download',
-          'print',
-          'double', // TODO
-          'fullscreen', // TODO
-          'abort', // TODO
-          'fullpage', // TODO
-          'rotate',
-          'zoom',
-          'catalog',
-          'switchPage',
-        ]
+        return controls
       },
     },
     loadingText: {
@@ -96,6 +86,10 @@ export default {
       type: String,
       default: 'Rendering',
     },
+    settings: {
+      type: Object,
+      default: () => ({}),
+    },
   },
   components: {
     Viewer,
@@ -164,6 +158,10 @@ export default {
     },
     deep: true,
   },
+  mounted() {
+    this.zoom = this.settings.defaultZoom || 100
+    this.catalogVisible = this.controls.includes(CATALOG)
+  },
   methods: {
     handleDownload() {
       this.$emit('download', {

src/components/Viewer/Viewer.vue

@@ -137,7 +137,7 @@ export default {
     viewerStyle() {
       return {
         // height: `${this.zoom / NORMAL_RATIO}%`,
-        width: `${(this.zoom / NORMAL_RATIO / 100) * this.viewportWidth}px`,
+        width: `${(this.zoom / NORMAL_RATIO / 100) * this.viewportWidth - 40}px`,
         transform: `rotate(${this.rotate}deg)`,
       }
     },
@@ -159,6 +159,9 @@ export default {
           }
         : {}
     },
+    verticalPadding() {
+      return (this.viewportWidth / this.viewportHeight) * 0
+    },
   },
   watch: {
     isFullpage(n, o) {
@@ -185,6 +188,16 @@ export default {
         this.render()
       },
     },
+    catalogVisible(n, o) {
+      if (n !== o) {
+        this.viewportWidth = n ? this.viewportWidth - 300 : this.viewportWidth + 300
+      }
+      // setTimeout(() => {
+      //   this.$nextTick(() => {
+      //     this.handleResize()
+      //   })
+      // }, 500)
+    },
   },
   activated() {
     this.$nextTick(() => {
@@ -214,7 +227,8 @@ export default {
       contentWindow.print()
     },
     updateZoomFullpage() {
-      const perViewerHeight = this.viewerContentHeight / this.total
+      const perViewerHeight =
+        (this.viewerContentHeight - this.verticalPadding) / this.total
       const rate = this.viewportHeight / (perViewerHeight - MARGIN_OFFSET)
 
       this.$emit('update:zoom', this.zoom * rate)
@@ -223,7 +237,9 @@ export default {
     handleViewerScroll(evt) {
       this.isScrolling = true
       const yOffset = evt.target.scrollTop
-      const perHeight = (this.viewerContentHeight + MARGIN_OFFSET) / this.total
+      const perHeight =
+        (this.viewerContentHeight + MARGIN_OFFSET - this.verticalPadding) /
+        this.total
       const halfViewportOffset = (perHeight - this.viewportHeight) / 2
 
       const currentPosition = (yOffset - halfViewportOffset) / perHeight + 1
@@ -299,6 +315,9 @@ export default {
           const image = document.createElement('img')
           image.className = 'placeholder'
           image.src = URL.createObjectURL(blobData.blob)
+          image.onload = e => {
+            e.target.naturalWidth
+          }
 
           return image
         }
@@ -334,6 +353,10 @@ export default {
         this.$emit('rendered')
         this.$emit('update:isRendering', false)
 
+        if (this.settings?.isFullWidth) {
+          this.$emit('update:zoom', 200)
+        }
+
         await this.$nextTick()
         this.viewerContentHeight = this.$refs.viewerContent.clientHeight
       } catch (e) {

src/constants/controls.js

@@ -12,10 +12,10 @@ export const SWITCH_PAGE = 'switchPage'
 export default [
   DOWNLOAD,
   PRINT,
-  DOUBLE,
-  FULLSCREEN,
-  ABOUT,
-  FULLPAGE,
+  DOUBLE, // TODO
+  FULLSCREEN, // TODO
+  ABOUT, // TODO
+  FULLPAGE, // TODO
   ROTATE,
   ZOOM,
   CATALOG,