zydx-plus 1.35.488 → 1.35.489

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zydx-plus",
-  "version": "1.35.488",
+  "version": "1.35.489",
   "description": "Vue.js",
   "main": "src/index.js",
   "files": [

package/src/components/flip/src/flip.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="docView">
+  <div class="docView" @mouseleave="mouseUpTest" @mouseup="mouseUpTest">
     <div class="full-screen" v-if="false">
       <div class="full-screen-img" @click.stop="fullScreen">
         <!--        <div class="full-screen-title" style="" v-if="showText">全屏查看</div>-->
@@ -21,7 +21,7 @@
     <div>
       <div class="book" ref="book">
         <div class="pages">
-          <div class="wrap-box" ref="wrap-box"  v-if="doublePage">
+          <div class="wrap-box" ref="wrap-box" v-show="doublePage">
             <div class="wrap wrap-block" :ref="`wrap-${item.id}`" v-for="(item,index) in pageInfoArr" :key="index">
               <div class="wrap-can" v-show="!loading" ref="wrapCanBox">
                 <canvas @click.stop="turnText" class="wrap-can-one" @mousedown.stop="mouseDown"
@@ -45,7 +45,7 @@
               </div>
             </div>
           </div>
-          <div class="wrap" ref="wrap" v-else>
+          <div class="wrap" ref="wrap" v-show="!doublePage">
             <div class="wrap-can" v-show="!loading" ref="wrapCan">
               <canvas @click.stop="turnText" class="wrap-can-one" @mousedown.stop="mouseDown"
                       @mousemove.stop="mouseMove" :id="`${id}`"></canvas>
@@ -105,7 +105,7 @@ import {debounce} from '../../utils'
 
 PdfJs.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.entry')
 
-let pdfs = null
+let pdfs = null;
 
 export default {
   name: "zydx-flip",
@@ -292,15 +292,15 @@ export default {
   },
   emits: ['flip'],
   mounted() {
-    if(!this.doublePage){
+    if (!this.doublePage) {
       this.id = 'canvas-wrap' + this.generateUniqueKey()
     }
     window.addEventListener('keydown', this.handleKeyEvent)
     // 在画板以外松开鼠标后冻结画笔
-    document.onmouseup = () => {
-      if (this.isDrawing || this.checkDrawing) this.mouseUp()
-      this.textMoveStart = false
-    }
+    // document.onmouseup = () => {
+    //   if (this.isDrawing || this.checkDrawing) this.mouseUp()
+    //   this.textMoveStart = false
+    // }
     this.setResizeObserver()
   },
   beforeDestroy() {
@@ -308,22 +308,26 @@ export default {
     this.cancelResizeObserver()
   },
   methods: {
+    mouseUpTest(){
+      if (this.isDrawing || this.checkDrawing) this.mouseUp()
+      this.textMoveStart = false
+    },
     setResizeObserver() {
-      setTimeout(()=>{
+      setTimeout(() => {
         const el = this.$refs.book;
-        let resizeTimer ;
+        let resizeTimer;
         this.resizeObserver = new ResizeObserver(() => {
           clearTimeout(resizeTimer);
           resizeTimer = setTimeout(() => {
-            if(this.doublePage){
+            if (this.doublePage) {
               this.readDoublePdf()
-            }else {
+            } else {
               this.readPdf()
             }
           }, 150); // 根据需求调整延迟时间
         });
         this.resizeObserver.observe(el);
-      },300)
+      }, 300)
     },
     cancelResizeObserver() {
       const el = this.$refs.book;
@@ -333,16 +337,16 @@ export default {
       this.$emit('showPen', true)
       // this.isDraw = true
     },
-    changeView(){
-      this.$emit('changeViewDoublePage',!this.doublePage)
-      setTimeout(()=>{
+    changeView() {
+      this.$emit('changeViewDoublePage', !this.doublePage)
+      setTimeout(() => {
         this.doublePage = !this.doublePage
-        if(this.doublePage){
+        if (this.doublePage) {
           this.$emit('showPen', false)
         }
-      },500)
+      }, 500)
     },
-    fullScreen(){
+    fullScreen() {
       window.open(this.source)
     },
     colorTap(v) {
@@ -614,13 +618,14 @@ export default {
       }
     },
     mouseDown(e) {
-      if(this.doublePage){
+      if (this.doublePage) {
         return;
       }
       this.setShow = false
       e = e || event
       e.preventDefault()
       if (this.state === null || this.state === 'del') {
+        this.$emit('mouseClick')
         this.checkDrawing = true
         this.checkDown(e)
         return
@@ -644,7 +649,7 @@ export default {
     },
     // 鼠标移动
     mouseMove(e) {
-      if(this.doublePage){
+      if (this.doublePage) {
         return;
       }
       e = e || event
@@ -1131,9 +1136,9 @@ export default {
         this.pageIndex = e
       }
       this.oneIndex = 'right'
-      if(this.doublePage){
+      if (this.doublePage) {
         this.readDoublePdf()
-      }else {
+      } else {
         this.readPdf()
       }
       if (!v) {
@@ -1151,9 +1156,9 @@ export default {
         this.pageIndex = e
       }
       this.oneIndex = 'left'
-      if(this.doublePage){
+      if (this.doublePage) {
         this.readDoublePdf()
-      }else {
+      } else {
         this.readPdf()
       }
       if (!v) {
@@ -1176,9 +1181,9 @@ export default {
         pdfs = pdf
         that.pdfPages = pdf.numPages // 获取pdf文件的总页数
         that.$nextTick(() => {
-          if(that.doublePage){
+          if (that.doublePage) {
             that.readDoublePdf(pdf)
-          }else {
+          } else {
             that.readPdf(pdf)
           }
         })
@@ -1190,75 +1195,21 @@ export default {
         })
       })
     },
-    readPdf:debounce(function (){
-      let that = this
-      that.mouse()
-      pdfs.getPage(that.pageIndex).then(function (page) {
-        let canvas = document.getElementById(that.id)
-        let canvas2 = document.getElementById(`${that.id}2`)
-        that.ctx = canvas.getContext('2d');
-        let ctx2 = canvas2.getContext('2d');
-        that.boxWidth = that.$refs.wrap.offsetWidth
-        that.scales=(that.boxWidth/846)*(that.boxWidth/(that.boxWidth-(that.boxWidth*0.115*2)))
-        let viewport = page.getViewport({scale: that.scales})
-        const sc = viewport.width / viewport.height
-        const wid = that.$refs.wrap.offsetWidth - 10
-        const hei = wid / sc
-        canvas.width = wid * that.sratio
-        canvas.height = hei * that.sratio
-        canvas.style.width = wid + 'px'
-        canvas.style.height = hei + 'px'
-        canvas2.width = wid * that.sratio
-        canvas2.height = hei * that.sratio
-        canvas2.style.width = wid + 'px'
-        canvas2.style.height = hei + 'px'
-        that.canvasStyle = {
-          width: wid + 'px',
-          height: hei + 'px',
-          marginLeft: -(wid / 2) + 'px',
-          widthCanvas: wid * that.sratio,
-          heightCanvas: hei * that.sratio
-        }
-        let renderContext = {
-          canvasContext: ctx2,
-          viewport: viewport,
-          transform: [2, 0, 0, 2, 0, 0] //这里会进行放大，解决模糊问题
-        }
-        page.render(renderContext)
-        that.loading = false
-        if (that.oneIndex === 'right') {
-          that.flipRights = true
-          that.flipLefts = false
-        } else {
-          that.flipRights = false
-          that.flipLefts = true
-        }
-        // 获取canvas的base64数据
-        setTimeout(() => {
-          that.flipRights = false
-          that.flipLefts = false
-          that.oneShow = false
-          that.imgArr = canvas2.toDataURL('image/jpeg', 1)
-          that.processing()
-        }, 1000)
-      })
-    },200),
-    readDoublePdf:debounce(function (){
-      let that = this
-      that.mouse()
-      that.$nextTick(()=>{
-        that.pageInfoArr.forEach((item,index)=>{
-          pdfs.getPage(index+1).then(function (page) {
-            let canvas = document.getElementById(item.id)
-            let canvas2 = document.getElementById(`${item.id}2`)
-            item.ctx = canvas.getContext('2d');
-            item.ctx2 = canvas2.getContext('2d');
-            let wrapBoxWidth = that.$refs['wrap-box'].offsetWidth
-            // let newScale= wrapBoxWidth/(wrapBoxWidth-(wrapBoxWidth*0.1*2))
-            let newScale=(wrapBoxWidth/846)*(wrapBoxWidth/(wrapBoxWidth-(wrapBoxWidth*0.115*2)))
-            let viewport = page.getViewport({scale: newScale/2})//
+    readPdf: debounce(function () {
+      setTimeout(() => {
+        let that = this
+        that.mouse()
+        that.$nextTick(() => {
+          pdfs.getPage(that.pageIndex).then(function (page) {
+            let canvas = document.getElementById(`${that.id}`)
+            let canvas2 = document.getElementById(`${that.id}2`)
+            that.ctx = canvas.getContext('2d');
+            let ctx2 = canvas2.getContext('2d');
+            that.boxWidth = that.$refs.wrap.offsetWidth
+            that.scales = (that.boxWidth / 846) * (that.boxWidth / (that.boxWidth - (that.boxWidth * 0.115 * 2)))
+            let viewport = page.getViewport({scale: that.scales})
             const sc = viewport.width / viewport.height
-            const wid = that.$refs[`wrap-${item.id}`][0].offsetWidth-15
+            const wid = that.$refs.wrap.offsetWidth - 10
             const hei = wid / sc
             canvas.width = wid * that.sratio
             canvas.height = hei * that.sratio
@@ -1276,9 +1227,9 @@ export default {
               heightCanvas: hei * that.sratio
             }
             let renderContext = {
-              canvasContext: item.ctx2,
+              canvasContext: ctx2,
               viewport: viewport,
-              transform: [2,0,0,2,0,0] //这里会进行放大，解决模糊问题
+              transform: [2, 0, 0, 2, 0, 0] //这里会进行放大，解决模糊问题
             }
             page.render(renderContext)
             that.loading = false
@@ -1294,14 +1245,74 @@ export default {
               that.flipRights = false
               that.flipLefts = false
               that.oneShow = false
-              that.doubleImgArr.push(canvas2.toDataURL('image/jpeg', 1))
+              that.imgArr = canvas2.toDataURL('image/jpeg', 1)
               that.processing()
             }, 1000)
           })
         })
-      })
-    },200),
-    generateUniqueKey (){
+      }, 200)
+    }, 200),
+    readDoublePdf: debounce(function () {
+      setTimeout(() => {
+        let that = this
+        that.mouse()
+        that.$nextTick(() => {
+          that.pageInfoArr.forEach((item, index) => {
+            pdfs.getPage(index + 1).then(function (page) {
+              let canvas = document.getElementById(item.id)
+              let canvas2 = document.getElementById(`${item.id}2`)
+              item.ctx = canvas.getContext('2d');
+              item.ctx2 = canvas2.getContext('2d');
+              let wrapBoxWidth = that.$refs['wrap-box'].offsetWidth
+              // let newScale= wrapBoxWidth/(wrapBoxWidth-(wrapBoxWidth*0.1*2))
+              let newScale = (wrapBoxWidth / 846) * (wrapBoxWidth / (wrapBoxWidth - (wrapBoxWidth * 0.115 * 2)))
+              let viewport = page.getViewport({scale: newScale / 2})//
+              const sc = viewport.width / viewport.height
+              const wid = that.$refs[`wrap-${item.id}`][0].offsetWidth - 15
+              const hei = wid / sc
+              canvas.width = wid * that.sratio
+              canvas.height = hei * that.sratio
+              canvas.style.width = wid + 'px'
+              canvas.style.height = hei + 'px'
+              canvas2.width = wid * that.sratio
+              canvas2.height = hei * that.sratio
+              canvas2.style.width = wid + 'px'
+              canvas2.style.height = hei + 'px'
+              that.canvasStyle = {
+                width: wid + 'px',
+                height: hei + 'px',
+                marginLeft: -(wid / 2) + 'px',
+                widthCanvas: wid * that.sratio,
+                heightCanvas: hei * that.sratio
+              }
+              let renderContext = {
+                canvasContext: item.ctx2,
+                viewport: viewport,
+                transform: [2, 0, 0, 2, 0, 0] //这里会进行放大，解决模糊问题
+              }
+              page.render(renderContext)
+              that.loading = false
+              if (that.oneIndex === 'right') {
+                that.flipRights = true
+                that.flipLefts = false
+              } else {
+                that.flipRights = false
+                that.flipLefts = true
+              }
+              // 获取canvas的base64数据
+              setTimeout(() => {
+                that.flipRights = false
+                that.flipLefts = false
+                that.oneShow = false
+                that.doubleImgArr.push(canvas2.toDataURL('image/jpeg', 1))
+                that.processing()
+              }, 1000)
+            })
+          })
+        })
+      }, 200)
+    }, 200),
+    generateUniqueKey() {
       // Math.random().toString(36).substr(2)
       return `${new Date().getTime()}${Math.random().toString(36).substr(2)}`;
     }
@@ -1372,7 +1383,7 @@ export default {
   border: 1px solid #cccccc;
   overflow: hidden;
   /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);*/
-/*cursor: none;*/
+  /*cursor: none;*/
 }
 
 .wrap-can img {
@@ -1459,7 +1470,7 @@ export default {
   overflow-y: auto;*/
 }
 
-.book::-webkit-scrollbar{
+.book::-webkit-scrollbar {
   display: none;
 }
 
@@ -1518,28 +1529,28 @@ export default {
   }
 }
 
-.wrap-box{
+.wrap-box {
   display: flex;
   flex-flow: row wrap;
   justify-content: space-between;
 }
 
-.wrap-box>.wrap{
+.wrap-box > .wrap {
   width: 50%;
 }
 
-div{
+div {
   box-sizing: border-box;
 }
 
-.full-screen{
+.full-screen {
   position: absolute;
   top: 20px;
   right: -20px;
   z-index: 100;
 }
 
-.full-screen>.full-screen-img{
+.full-screen > .full-screen-img {
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
@@ -1547,12 +1558,13 @@ div{
   margin-bottom: 10px;
 }
 
-.full-screen-title{
+.full-screen-title {
   width: 100%;
   white-space: nowrap;
   overflow: hidden;
-  animation:span-animation 0.3s linear;
+  animation: span-animation 0.3s linear;
 }
+
 @keyframes span-animation {
   0% {
     width: 0;
@@ -1562,9 +1574,9 @@ div{
   }
 }
 
-.full-screen-img>img{
+.full-screen-img > img {
   width: 20px;
   height: 20px;
-/*margin-left: 5px;*/
+  /*margin-left: 5px;*/
 }
 </style>

package/src/index.js

@@ -87,7 +87,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.35.488',
+    version: '1.35.489',
     install,
     Calendar,
     Message,