zydx-plus 1.35.503 → 1.35.505

package/package.json

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

package/src/components/dragPopup/src/dragPopup.vue

@@ -1,10 +1,11 @@
 <template>
+  <teleport to="body">
     <div class="drag-pop" :class="{trans: transAll, 'drag-pop-shadow': !fixedStart}" :style="position" :id="id" @mousedown.stop="dragTap">
       <div v-show="!fixedStart" class="drag-head" :style="{'background-color':titleColor}" @click="selectedDrag">
-        <span :class="id + 'draggable'" :style="{'text-align': title === ''? 'center':'left'}" v-html="title"></span>
+        <span :id="'draggable' + id" :style="{'text-align': title === ''? 'center':'left'}" v-html="title"></span>
         <div class="drag-i">
-          <!--        <i class="minimize-cir" v-if="minimizeCir" @click.stop="minimizeTap"></i>-->
-          <!--        <i class="minimize" v-if="minimize" @click.stop="minimizeTap"></i>-->
+          <i class="minimize-cir" v-if="minimizeCir" @click.stop="minimizeTap"></i>
+          <i class="minimize" v-if="minimize" @click.stop="minimizeTap"></i>
           <slot name="icon"></slot>
           <i class="disconnect" v-if="disconnectShow" @click.stop="disconnect"></i>
           <i class="enlarge" v-if="enlargeShow" @click.stop="enlarge"></i>
@@ -31,12 +32,13 @@
         </div>
       </div>
     </div>
+  </teleport>
 </template>
 
 <script>
 import interact from 'interactjs'
 export default {
-  name: "zydx-drag-popup",
+  name: "zydx-drag-popup2",
   data() {
     return {
       x: 0,//left:x
@@ -153,7 +155,6 @@ export default {
         this.footDownOffset = val
         if (this.isInitShowBottomRight) {
           this.y = window.innerHeight - val
-          console.log('this.y', this.y)
         }
       },
       immediate: true
@@ -167,33 +168,11 @@ export default {
       deep: true
     }
   },
+  created() {
+    this.id = Math.random().toString(36).substr(2)
+  },
   mounted() {
-    let that = this
-    this.id = Math.random().toString(36).substr(2);
     this.init()
-    // 全局监听鼠标抬起事件
-    setTimeout(() => {
-      interact(`.${that.id}draggable`).draggable({
-        listeners: {
-          move (event) {
-            that.y = event.rect.top
-            that.x = event.rect.left
-            if (that.x < -that.footRightOffset / 2) {
-              that.x = -that.footRightOffset / 2
-            }
-            if (that.x > that.clientWidth - that.footRightOffset + that.footRightOffset / 2) {
-              that.x = that.clientWidth - that.footRightOffset + that.footRightOffset / 2
-            }
-            if (that.y < 0) {
-              that.y = 0
-            }
-            if (that.y > that.clientHeight - that.footDownOffset + that.footDownOffset / 2) {
-              that.y = that.clientHeight - that.footDownOffset + that.footDownOffset / 2
-            }
-          }
-        }
-      })
-    },100)
     document.addEventListener('mouseup', this.footUp);
     this.$nextTick(() => {
       this.$emit('updateDrag', {
@@ -265,6 +244,7 @@ export default {
       this.$emit('dragStatus')
     },
     init() {
+      let that = this
       if(this.fixedStart) {
         const wid = document.getElementById('app').offsetWidth
         this.x = this.left + (wid-this.initWidth)/2
@@ -275,6 +255,28 @@ export default {
         this.x = this.clientWidth / 2 - this.footRightOffset / 2;
         this.y = this.clientHeight / 2 - this.footDownOffset / 2;
       }
+      setTimeout(() => {
+        interact(`#draggable${that.id}`).draggable({
+          listeners: {
+            move (event) {
+              that.y = event.rect.top
+              that.x = event.rect.left
+              if (that.x < -that.footRightOffset / 2) {
+                that.x = -that.footRightOffset / 2
+              }
+              if (that.x > that.clientWidth - that.footRightOffset + that.footRightOffset / 2) {
+                that.x = that.clientWidth - that.footRightOffset + that.footRightOffset / 2
+              }
+              if (that.y < 0) {
+                that.y = 0
+              }
+              if (that.y > that.clientHeight - that.footDownOffset + that.footDownOffset / 2) {
+                that.y = that.clientHeight - that.footDownOffset + that.footDownOffset / 2
+              }
+            }
+          }
+        })
+      },0)
     },
     getWH(v) {
       this.transAll = true
@@ -296,7 +298,7 @@ export default {
       if (this.direction === 'd') {
         this.footDownOffset = event.clientY - this.y;
       } else if (this.direction === 'in') {
-        this.footDownOffset = event.clientY - this.y;
+        this.footDownOffset = event.clientX - this.x;
         this.footRightOffset = event.clientX - this.x;
       } else if (this.direction === 'r') {
         this.footRightOffset = event.clientX - this.x;
@@ -539,9 +541,3 @@ export default {
   z-index: 10000;
 }
 </style>
-<script setup>
-</script>
-<script setup>
-</script>
-<script setup>
-</script>

package/src/components/dragPopup2/src/dragPopup.vue

@@ -2,10 +2,10 @@
   <teleport to="body">
     <div class="drag-pop" :class="{trans: transAll, 'drag-pop-shadow': !fixedStart}" :style="position" :id="id" @mousedown.stop="dragTap">
       <div v-show="!fixedStart" class="drag-head" :style="{'background-color':titleColor}" @click="selectedDrag">
-        <span :class="id + 'draggable'" :style="{'text-align': title === ''? 'center':'left'}" v-html="title"></span>
+        <span :id="'draggable' + id" :style="{'text-align': title === ''? 'center':'left'}" v-html="title"></span>
         <div class="drag-i">
-          <!--        <i class="minimize-cir" v-if="minimizeCir" @click.stop="minimizeTap"></i>-->
-          <!--        <i class="minimize" v-if="minimize" @click.stop="minimizeTap"></i>-->
+          <i class="minimize-cir" v-if="minimizeCir" @click.stop="minimizeTap"></i>
+          <i class="minimize" v-if="minimize" @click.stop="minimizeTap"></i>
           <slot name="icon"></slot>
           <i class="disconnect" v-if="disconnectShow" @click.stop="disconnect"></i>
           <i class="enlarge" v-if="enlargeShow" @click.stop="enlarge"></i>
@@ -155,7 +155,6 @@ export default {
         this.footDownOffset = val
         if (this.isInitShowBottomRight) {
           this.y = window.innerHeight - val
-          console.log('this.y', this.y)
         }
       },
       immediate: true
@@ -169,33 +168,11 @@ export default {
       deep: true
     }
   },
+  created() {
+    this.id = Math.random().toString(36).substr(2)
+  },
   mounted() {
-    let that = this
-    this.id = Math.random().toString(36).substr(2);
     this.init()
-    // 全局监听鼠标抬起事件
-    setTimeout(() => {
-      interact(`.${that.id}draggable`).draggable({
-        listeners: {
-          move (event) {
-            that.y = event.rect.top
-            that.x = event.rect.left
-            if (that.x < -that.footRightOffset / 2) {
-              that.x = -that.footRightOffset / 2
-            }
-            if (that.x > that.clientWidth - that.footRightOffset + that.footRightOffset / 2) {
-              that.x = that.clientWidth - that.footRightOffset + that.footRightOffset / 2
-            }
-            if (that.y < 0) {
-              that.y = 0
-            }
-            if (that.y > that.clientHeight - that.footDownOffset + that.footDownOffset / 2) {
-              that.y = that.clientHeight - that.footDownOffset + that.footDownOffset / 2
-            }
-          }
-        }
-      })
-    },100)
     document.addEventListener('mouseup', this.footUp);
     this.$nextTick(() => {
       this.$emit('updateDrag', {
@@ -267,6 +244,7 @@ export default {
       this.$emit('dragStatus')
     },
     init() {
+      let that = this
       if(this.fixedStart) {
         const wid = document.getElementById('app').offsetWidth
         this.x = this.left + (wid-this.initWidth)/2
@@ -277,6 +255,28 @@ export default {
         this.x = this.clientWidth / 2 - this.footRightOffset / 2;
         this.y = this.clientHeight / 2 - this.footDownOffset / 2;
       }
+      setTimeout(() => {
+        interact(`#draggable${that.id}`).draggable({
+          listeners: {
+            move (event) {
+              that.y = event.rect.top
+              that.x = event.rect.left
+              if (that.x < -that.footRightOffset / 2) {
+                that.x = -that.footRightOffset / 2
+              }
+              if (that.x > that.clientWidth - that.footRightOffset + that.footRightOffset / 2) {
+                that.x = that.clientWidth - that.footRightOffset + that.footRightOffset / 2
+              }
+              if (that.y < 0) {
+                that.y = 0
+              }
+              if (that.y > that.clientHeight - that.footDownOffset + that.footDownOffset / 2) {
+                that.y = that.clientHeight - that.footDownOffset + that.footDownOffset / 2
+              }
+            }
+          }
+        })
+      },0)
     },
     getWH(v) {
       this.transAll = true
@@ -298,7 +298,7 @@ export default {
       if (this.direction === 'd') {
         this.footDownOffset = event.clientY - this.y;
       } else if (this.direction === 'in') {
-        this.footDownOffset = event.clientY - this.y;
+        this.footDownOffset = event.clientX - this.x;
         this.footRightOffset = event.clientX - this.x;
       } else if (this.direction === 'r') {
         this.footRightOffset = event.clientX - this.x;
@@ -541,9 +541,3 @@ export default {
   z-index: 10000;
 }
 </style>
-<script setup>
-</script>
-<script setup>
-</script>
-<script setup>
-</script>

package/src/components/editor/src/editor.vue

@@ -1050,12 +1050,10 @@ export default {
       handler: function (e) {
         let time = setInterval(() => {
           if (this.editor) { // 没有时间以后 停止定时器
-            this.editor.setOptions({
-              editable: !e
-            })
+            this.editor.setOptions({editable: !e})
             if (this.page) {
-              this.editableShow = !e
               setTimeout(() => {
+                this.editableShow = !e
                 if (e) {
                   this.readOnlyPage() // 只读分页
                 }
@@ -2164,6 +2162,11 @@ export default {
           this.$refs['read-only'].style.width = '900px'
           this.wit = 900
         }
+        let element = document.querySelectorAll('.editor-content-show')[0]
+        let witA = element.offsetWidth
+        if (witA !== this.wit) {
+          element.style.width = '900px'
+        }
         let max = this.wit * 1.6 - 186
         let pHeight = 0
         let html = ''
@@ -2198,7 +2201,7 @@ export default {
           let mBottom = parseInt(getComputedStyle(data[i]).marginBottom)
           let text = data[i].offsetHeight + Bottom + top + mtop + mBottom
           if ((pHeight + text) > max) {
-            const {start, end, size} = this.rows(data[i], max - pHeight)
+            const {start, middle, end, size} = this.rows(data[i], max - pHeight,max)
             let child = data[i].childNodes[0]
             let childNodes = data[i].childNodes[0].childNodes[0]
             let fontSize = size
@@ -2225,28 +2228,48 @@ export default {
             } else {
               label = 'span'
             }
-            if (child && child.nodeName !== '#text') {
-              if (childNodes && childNodes.nodeName === 'MARK') {
-                html += `<p ${signid ? 'data-signid=' + signid : ''} style="text-align: ${textAlign}" class="${className}"><${label} style="font-size: ${fontSize}; font-family: ${fontFamily};color:${color}"><mark class="custom-class" data-color="${childBColor}" style="background-color: ${childBColor}; color: ${childColor};">${start.data}</mark></${label}></p>`
+            if(start.data!== ''){
+              if (child && child.nodeName !== '#text') {
+                if (childNodes && childNodes.nodeName === 'MARK') {
+                  html += `<p ${signid ? 'data-signid=' + signid : ''} style="text-align: ${textAlign}" class="${className}"><${label} style="font-size: ${fontSize}; font-family: ${fontFamily};color:${color}"><mark class="custom-class" data-color="${childBColor}" style="background-color: ${childBColor}; color: ${childColor};">${start.data}</mark></${label}></p>`
+                } else {
+                  html += `<p ${signid ? 'data-signid=' + signid : ''} style="text-align: ${textAlign}" class="${className}"><${label} style="font-size: ${fontSize}; font-family: ${fontFamily};color:${color}">${start.data}</${label}></p>`
+                }
               } else {
-                html += `<p ${signid ? 'data-signid=' + signid : ''} style="text-align: ${textAlign}" class="${className}"><${label} style="font-size: ${fontSize}; font-family: ${fontFamily};color:${color}">${start.data}</${label}></p>`
+                html += `<p ${signid ? 'data-signid=' + signid : ''} style="text-align: ${textAlign}" class="${className}"><${label} style="font-size: ${size}px;">${start.data}</${label}></p>`
               }
-            } else {
-              html += `<p ${signid ? 'data-signid=' + signid : ''} style="text-align: ${textAlign}" class="${className}"><${label} style="font-size: ${size}px;">${start.data}</${label}></p>`
+              this.htmlArr.push(html)
+              pHeight = 0
+              html = ''
             }
-            this.htmlArr.push(html)
-            pHeight = 0
-            html = ''
-            if (child && child.nodeName !== '#text') {
-              if (childNodes && childNodes.nodeName === 'MARK') {
-                html += `<p ${signid ? 'data-signid=' + signid : ''} style="text-align: ${textAlign}"><${label} style="font-size: ${fontSize}; font-family: ${fontFamily};color:${color}"><mark class="custom-class" data-color="${childBColor}" style="background-color: ${childBColor}; color: ${childColor};">${end.data}</mark></${label}></p>`
+            if (middle.length){
+              middle.forEach(item=>{
+                if (child && child.nodeName !== '#text') {
+                  if (childNodes && childNodes.nodeName === 'MARK') {
+                    html += `<p ${signid ? 'data-signid=' + signid : ''} style="text-align: ${textAlign}"><${label} style="font-size: ${fontSize}; font-family: ${fontFamily};color:${color}"><mark class="custom-class" data-color="${childBColor}" style="background-color: ${childBColor}; color: ${childColor};">${item.data}</mark></${label}></p>`
+                  } else {
+                    html += `<p ${signid ? 'data-signid=' + signid : ''} style="text-align: ${textAlign}"><${label} style="font-size: ${fontSize}; font-family: ${fontFamily};color:${color}">${item.data}</${label}></p>`
+                  }
+                } else {
+                  html += `<p ${signid ? 'data-signid=' + signid : ''} style="text-align: ${textAlign}"><${label} style="font-size: ${size}px;">${item.data}</${label}></p>`
+                }
+                this.htmlArr.push(html)
+                pHeight = 0
+                html = ''
+              })
+            }
+            if(end.data!== ''){
+              if (child && child.nodeName !== '#text') {
+                if (childNodes && childNodes.nodeName === 'MARK') {
+                  html += `<p ${signid ? 'data-signid=' + signid : ''} style="text-align: ${textAlign}"><${label} style="font-size: ${fontSize}; font-family: ${fontFamily};color:${color}"><mark class="custom-class" data-color="${childBColor}" style="background-color: ${childBColor}; color: ${childColor};">${end.data}</mark></${label}></p>`
+                } else {
+                  html += `<p ${signid ? 'data-signid=' + signid : ''} style="text-align: ${textAlign}"><${label} style="font-size: ${fontSize}; font-family: ${fontFamily};color:${color}">${end.data}</${label}></p>`
+                }
               } else {
-                html += `<p ${signid ? 'data-signid=' + signid : ''} style="text-align: ${textAlign}"><${label} style="font-size: ${fontSize}; font-family: ${fontFamily};color:${color}">${end.data}</${label}></p>`
+                html += `<p ${signid ? 'data-signid=' + signid : ''} style="text-align: ${textAlign}"><${label} style="font-size: ${size}px;">${end.data}</${label}></p>`
               }
-            } else {
-              html += `<p ${signid ? 'data-signid=' + signid : ''} style="text-align: ${textAlign}"><${label} style="font-size: ${size}px;">${end.data}</${label}></p>`
+              pHeight = end.size
             }
-            pHeight = end.size
           } else {
             pHeight += text
             if (data[i].dataset?.signid !== 'splitLine' && data[i].dataset?.signid !== 'annotationSplitLine' && data[i].dataset?.signid !== 'referenceSplitLine') html += data[i].outerHTML
@@ -2374,18 +2397,31 @@ export default {
       this.menus = false
       this.menuOne = false
     },
-    rows(data, num) {
+    rows(data, num, max) {
       let size = parseInt(window.getComputedStyle(data, null).fontSize)
       let line = parseInt(window.getComputedStyle(data, null).lineHeight)
-      let width = data.offsetWidth
+      let width = data.offsetWidth-40
       let height = data.offsetHeight
       let rows = Math.round(num / line)  // 行数
+      let rowsA = Math.round( max / line)  // 行数
       let text = data.innerText
       let textLen = this.measureText(text, size, width * rows)
       let start = text.slice(0, textLen)
+      let textLenA = this.measureText(text, size, width * rowsA)
+      let ON = Math.round((text.length - textLen)/textLenA)
+      let middle = []
+      for (let i = 0; i < ON; i++) {
+        let obj = {
+          data:text.slice(textLen+1, textLen+textLenA),
+          size:max
+        }
+        middle.push(obj)
+        textLen+=textLenA
+      }
       let end = text.slice(textLen)
       return {
         start: {data: start, size: num},
+        middle:middle,
         end: {data: end, size: height - num},
         size: size,
         // family: fontFamily.replace(/\"/g,"")

package/src/components/paint/src/paint.vue

@@ -1,5 +1,5 @@
 <template>
-  <dragPopup2 :z-index="10002" title="手写记录" @updateDrag="updateDragInit" :width="width" :height="height" :minWidth="740" :minHeight="487" @close="cancel" :minimizeCir="false" :dragTextShow="false">
+  <dragPopup :z-index="10002" title="手写记录" @updateDrag="updateDragInit" :width="width" :height="height" :minWidth="740" :minHeight="487" @close="cancel" :minimizeCir="false" :dragTextShow="false">
     <template #content>
       <div class="paint" :id="ids">
         <div class="paint-title"></div>
@@ -12,8 +12,8 @@
         </div>
       </div>
     </template>
-  </dragPopup2>
-  <dragPopup2 :z-index="10003" :width="600" :height="417" v-if="show" :dragStatus="false" :minimizeCir="false" :enlargeShow="false" @close="close">
+  </dragPopup>
+  <dragPopup :z-index="10003" :width="600" :height="417" v-if="show" :dragStatus="false" :minimizeCir="false" :enlargeShow="false" @close="close">
     <template #content>
       <div class="can">
         <div class="can-cont" :id="ids + 'cont'">
@@ -35,7 +35,7 @@
         </div>
       </div>
     </template>
-  </dragPopup2>
+  </dragPopup>
   <teleport to="body">
     <div class="tool-cont" :style="{left: left + 'px', top: top + 'px'}">
       <div class="tool"
@@ -112,14 +112,15 @@
 </template>
 
 <script>
+import interact from 'interactjs'
 import Sketchpad from '../../sketchpad/src/sketchpad'
-import dragPopup2 from '../../dragPopup2/src/dragPopup'
+import dragPopup from '../../dragPopup/src/dragPopup'
 import Mess from '../../tipBox/index'
 
 let stayTime = 0
 let timer = null
 export default {
-  components: {Sketchpad, dragPopup2},
+  components: {Sketchpad, dragPopup},
   data() {
     return {
       width: 940,

package/src/index.js

@@ -89,7 +89,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.35.503',
+    version: '1.35.505',
     install,
     Calendar,
     Message,