zydx-plus 1.35.543 → 1.35.545

package/package.json

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

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="docView" @mouseleave="mouseUpTest" @mouseup="mouseUpTest">
+  <div class="docView" @click="extendRightDel" @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>-->
@@ -19,18 +19,30 @@
       </div>
     </div>
     <div>
-      <div class="book" ref="book">
+      <div class="book" ref="book" @click.right="rightMenu($event)">
         <div class="pages">
           <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">
+                <div class="extend-right" v-if="rightMenuShow" :style="extendStyle">
+                  <p @click.stop="extendRight(index)">链接扩展</p>
+                </div>
                 <div class="textLayer" ref="textLayer">
                   <span :dir="item2.dir" :style="styleText(item2,item.styles, item.id)" v-for="(item2) in item.items">{{ item2.str }}</span>
                 </div>
                 <div class="annotationLayer" ref="annotationLayer">
-                  <section tabindex="1000" @click="annotationTap(item2)" :style="styleAnnotation(item2)" v-for="(item2) in item.annotations">
-                    <a :href="item2.url" target="_blank"></a>
-                  </section>
+                  <template v-for="(item,index) in annotations">
+                    <div :style="styleAnnotation(item)" class="magnifier" v-if="item.type === 'tag'">
+                      <img @click.stop="magnifierTap($event,item)" src="../img/fangdajing.png" alt="" />
+                      <div class="magnifier-list" v-if="item.show" :style="item.style">
+                        <div class="magnifier-list-item" @click="annotationTap(item2)" v-for="(item2,index2) in item.list">{{ index2+1 }}.{{ item2?.title }}</div>
+                        <div class="magnifier-list-add" @click="annotationTap(item,'add')">添加扩展链接</div>
+                      </div>
+                    </div>
+                    <section v-else tabindex="1000" @click="annotationTap(item,item.id)" :style="styleAnnotation(item)">
+                      <a :href="item.url" target="_blank"></a>
+                    </section>
+                  </template>
                 </div>
                 <canvas @click.stop="turnText" class="wrap-can-one" :class="{isPointer: isPointer}" @mousedown.stop="mouseDown"
                         @mousemove.stop="mouseMove" :id="item.id"></canvas>
@@ -55,13 +67,25 @@
           </div>
           <div class="wrap" ref="wrap" v-show="!doublePage">
             <div class="wrap-can" v-show="!loading" ref="wrapCan">
+              <div class="extend-right" v-if="rightMenuShow" :style="extendStyle">
+                <p @click.stop="extendRight(null)">链接扩展</p>
+              </div>
               <div class="textLayer" ref="textLayer">
                 <span :dir="item.dir" :style="styleText(item,styles)" v-for="(item,index) in items">{{ item.str }}</span>
               </div>
               <div class="annotationLayer" ref="annotationLayer">
-                <section tabindex="1000" :style="styleAnnotation(item)" v-for="(item,index) in annotations">
-                  <a :href="item.url" target="_blank"></a>
-                </section>
+                <template v-for="(item,index) in annotations">
+                  <div :style="styleAnnotation(item)" class="magnifier" v-if="item.type === 'tag'">
+                    <img @click.stop="magnifierTap($event,item)" src="../img/fangdajing.png" alt="" />
+                    <div class="magnifier-list" v-if="item.show" :style="item.style">
+                      <div class="magnifier-list-item" @click="annotationTap(item2)" v-for="(item2,index2) in item.list">{{ index2+1 }}.{{ item2?.title }}</div>
+                      <div class="magnifier-list-add" @click="annotationTap(item,'add')">添加扩展链接</div>
+                    </div>
+                  </div>
+                  <section v-else tabindex="1000" @click="annotationTap(item)" :style="styleAnnotation(item)">
+                    <a :href="item.url" target="_blank"></a>
+                  </section>
+                </template>
               </div>
               <canvas @click.stop="turnText" class="wrap-can-one" :class="{isPointer: isPointer}" @mousedown.stop="mouseDown"
                       @mousemove.stop="mouseMove" :id="`${id}`"></canvas>
@@ -121,7 +145,7 @@ import * as PdfJs from 'pdfjs-dist'
 import "pdfjs-dist/build/pdf.worker.mjs";
 import Range from "../../tagging/src/range";
 
-let pdfs = null;
+let pdfs = {};
 
 export default {
   name: "zydx-flip",
@@ -195,7 +219,13 @@ export default {
       viewWidth: 0,
       viewHeight: 0,
       annotations: [],
-      inits: true
+      annotationsInit: [],
+      extendStyle: {
+        left: '0px',
+        top: '0px'
+      },
+      rightMenuShow: false,
+      annData: {}
     }
   },
   props: {
@@ -252,11 +282,23 @@ export default {
   watch: {
     annotationsData: {
       handler: function (val) {
-        console.log(val)
         if(typeof val === Object) {
-          this.annotations.push(val)
+          this.annotations.push({
+            ...val,
+            show: false,
+            style: {},
+            type: "tag"
+          })
         }else {
-          this.annotations = val.concat(this.annotations)
+          const arr = val.map(x => {
+            return {
+              ...x,
+              show: false,
+              style: {},
+              type: "tag"
+            }
+          })
+          this.annotations = arr.concat(this.annotationsInit)
         }
       },
       deep: true,
@@ -334,9 +376,8 @@ export default {
       immediate: true
     }
   },
-  emits: ['flip','annotationTap'],
+  emits: ['flip','annotationTap', 'annotationsSend'],
   mounted() {
-    this.inits = true
     if (!this.doublePage) {
       this.id = 'canvas-wrap' + this.generateUniqueKey()
     }
@@ -353,12 +394,86 @@ export default {
     this.cancelResizeObserver()
   },
   methods: {
-    annotationTap(v) {
-      this.$emit('annotationTap',v)
+    magnifierTap(e,v) {
+      if(!v.show) this.extendRightDel()
+      v.show = !v.show
+      setTimeout(() => {
+        const w = e.target.nextSibling.offsetWidth
+        const x = (v.rect[0] * this.scales / this.viewport?.width) * 100
+        const y = ((this.viewport?.height - (v.rect[1] * this.scales)) / this.viewport?.height) * 100
+        if(x > 50) {
+          v.style.left = `-${w?w + 5:0}px`
+        }else {
+          v.style.right = `-${w?w + 5:0}px`
+        }
+        if(y > 40) {
+          v.style.bottom = '0px'
+        }else {
+          v.style.top = '0px'
+        }
+      },20)
+    },
+    extendRightDel() {
+      this.rightMenuShow = false
+      this.annotations.map(x => {
+        x.show = false
+        return x
+      })
+    },
+    annotationTap(v, n ) {
+      if(v.url) return
+      if(n === 'add') {
+        this.$emit('annotationsSend', {
+          id: v.id,
+          page: v.page,
+          borderColor: v.borderColor,
+          borderStyle: v.borderStyle,
+          rect: v.rect,
+        })
+      }else {
+        this.$emit('annotationTap',v)
+      }
+    },
+    // 扩展点击
+    extendRight(i) {
+      this.extendRightDel()
+      this.$emit('annotationsSend', {
+        ...this.annData,
+        id: new Date().getTime(),
+        page: i? i + 1 : this.pageIndex,
+      })
+    },
+    // 右键菜单
+    rightMenu(e) {
+      e.preventDefault()
+      if(this.doublePage) return;
+      if(e.target.nodeName === 'SPAN') {
+        const wid = this.$refs.wrap.offsetWidth - 10
+        const hei = this.$refs.wrap.offsetHeight - 10
+        const endOffset = this.getRange().endOffset
+        const style = e.target.attributes.style.value
+        const size = style.match(/font-size:\s*([^;]+)/)[1].trim().replace(/px/g, "")
+        const topMatch = style.match(/top:\s*([^;]+)/)[1].trim().replace(/%/g, "");
+        const x1 = this.viewport.width * (e.target.offsetLeft + (endOffset * Number(size)))/wid
+        const y1 = this.viewport.height * (1 - (Number(topMatch/100))) - 3
+        const x2 = x1 + 15
+        const y2 = y1 + 15
+        const left = e.target.offsetLeft + e.offsetX
+        this.rightMenuShow = true
+        this.extendStyle = {
+          left: left + 'px',
+          top: Number(topMatch) + ((size/hei)*100) + '%'
+        }
+        this.annData = {
+          rect: [x1/this.scales,y1/this.scales,x2/this.scales,y2/this.scales],
+          type: 'tag',
+          borderStyle: {width: 0},
+          borderColor: [0,0,0]
+        }
+      }
     },
     // 添加标注
     flipText(next) {
-      if(this.doublePage) return;
       let timestamp = 'flip' + Math.random().toString(36).substr(2)
       this.replaceSelectedStrByEle(timestamp)
       const elements = document.querySelectorAll(`.${timestamp}`)[0];
@@ -428,6 +543,7 @@ export default {
       return range
     },
     styleAnnotation(v) {
+      if(!v) return {}
       const x1 = (v.rect[0] * this.scales / this.viewport?.width) * 100
       const y1 = ((this.viewport?.height - (v.rect[1] * this.scales)) / this.viewport?.height) * 100
       const x2 = (((v.rect[2] - v.rect[0]) * this.scales) / this.viewport?.width) * 100
@@ -441,6 +557,7 @@ export default {
       }
     },
     styleText(v,n, id) {
+      if(!v) return {}
       const textLayer = id? this.$refs[`wrap-${id}`][0] : this.$refs.textLayer;
       const actualWidth = textLayer.clientWidth
       const pageScale = actualWidth / this.viewWidth
@@ -1331,7 +1448,7 @@ export default {
         cMapPacked: true
       })
       loadingTask.promise.then((pdf) => {
-        pdfs = pdf
+        pdfs[that.id] = pdf
         that.pdfPages = pdf.numPages // 获取pdf文件的总页数
         that.$nextTick(() => {
           if (that.doublePage) {
@@ -1356,7 +1473,7 @@ export default {
         let that = this
         that.mouse()
         that.$nextTick(() => {
-          pdfs.getPage(that.pageIndex).then(function (page) {
+          pdfs[that.id].getPage(that.pageIndex).then(function (page) {
             that.doc = page
             that.viewWidth = page.view[2] - page.view[0]
             that.viewHeight = page.view[3] - page.view[1]
@@ -1404,15 +1521,16 @@ export default {
               that.styles = res.styles
             })
             page.getAnnotations().then((res) => {
-              console.log(that.inits)
-              if(that.inits) {
-                that.annotations = res.concat(that.annotationsData)
-                setTimeout(() => {
-                  that.inits = false
-                },1000)
-              }else {
-                that.annotations = res
-              }
+              that.annotationsInit = res
+              const arr = that.annotationsData.map(x => {
+                return {
+                  ...x,
+                  show: false,
+                  style: {},
+                  type: "tag"
+                }
+              })
+              that.annotations = res.concat(arr)
             })
             that.loading = false
             if (that.oneIndex === 'right') {
@@ -1440,7 +1558,7 @@ export default {
         that.mouse()
         that.$nextTick(() => {
           that.pageInfoArr.forEach((item, index) => {
-            pdfs.getPage(index + 1).then(function (page) {
+            pdfs[that.id].getPage(index + 1).then(function (page) {
               that.doc = page
               that.viewWidth = page.view[2] - page.view[0]
               that.viewHeight = page.view[3] - page.view[1]
@@ -1488,14 +1606,8 @@ export default {
                 item.styles = res.styles
               })
               page.getAnnotations().then((res) => {
-                if(that.inits) {
-                  item.annotations = res.concat(that.annotationsData)
-                  setTimeout(() => {
-                    that.inits = false
-                  },1000)
-                }else {
-                  item.annotations = res
-                }
+                that.annotationsInit = res
+                that.annotations = res.concat(that.annotationsData)
               })
               that.loading = false
               if (that.oneIndex === 'right') {
@@ -1531,6 +1643,67 @@ export default {
 @import '../icon.css';
 @import '../annotationLayer.css';
 @import '../textLayer.css';
+.magnifier{
+  position: absolute;
+  text-align: initial;
+  pointer-events: auto;
+  box-sizing: border-box;
+  transform-origin: 0 0;
+  cursor: pointer;
+}
+.magnifier>img{
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+.magnifier-list{
+  position: absolute;
+  max-width: 300px;
+  background-color: #fff;
+  border-radius: 5px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
+  padding: 10px 20px;
+  font-size: 14px;
+  z-index: 1;
+  animation: linkDown .4s linear forwards;
+  opacity: 0;
+}
+.magnifier-list-item{
+  line-height: 24px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.magnifier-list-item:hover{
+  color: #4B0C77 !important;
+}
+@keyframes linkDown {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.magnifier-list-add{
+  color: #666;
+  font-size: 12px;
+  padding: 5px 0;
+}
+.extend-right{
+  position: absolute;
+  z-index: 5;
+  background-color: #fff;
+  border-radius: 5px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
+  padding: 10px 20px;
+}
+.extend-right>p{
+  cursor: pointer;
+}
 .isPointer{
   pointer-events: none;
 }

package/src/components/sketchpad/src/sketchpad.vue

@@ -6,9 +6,10 @@
 <script>
 import {createElement} from 'react'
 import {createRoot} from 'react-dom/client'
-import {AssetRecordType,createShapeId, Tldraw, FileHelpers} from 'tldraw'
+import {AssetRecordType,createShapeId, Tldraw} from 'tldraw'
 import 'tldraw/tldraw.css'
-import * as buffer from "buffer"; //引入buffer
+import * as buffer from "buffer";
+import {debounce} from "../../utils"; //引入buffer
 
 if (typeof window.Buffer === "undefined") { // 判断当前环境是否有Buffer对象
   window.Buffer = buffer.Buffer; // Buffer对象不存在则创建导入的buffer
@@ -153,7 +154,14 @@ export default {
     },
     handleMountedEditor(editor) {
       editorAPP = editor
-      // console.log('editorAPP',editorAPP);
+      editorAPP.sideEffects.registerAfterChangeHandler('shape', debounce((next)=> {
+        // there can only be one red shape at a time:
+        this.$emit('shapeChangeHandler', next);
+      },300))
+      editorAPP.sideEffects.registerAfterDeleteHandler('shape', (shape) => {
+        // if the last shape in a frame is deleted, delete the frame too:
+        this.$emit('shapeDeleteHandler', shape);
+      })
       editorAPP.setCameraOptions({ isLocked: this.cameraIsLocked })
       editorAPP.updateInstanceState({ isToolLocked: this.isToolLocked })
       if (this.top) {
@@ -174,12 +182,13 @@ export default {
     // 清空
     clear() {
       // editorAPP.store.loadSnapshot(clearJson)
-      let graphicIds = []
-      for(let key in editorAPP.store.query.atoms.current) {
-        if(key.split(':')[0]==='shape') {
-          graphicIds.push(key)
-        }
-      }
+      editorAPP.selectAll()
+      let graphicIds = editorAPP.getSelectedShapeIds()
+      // for(let key in editorAPP.store.query.atoms.current) {
+      //   if(key.split(':')[0]==='shape') {
+      //     graphicIds.push(key)
+      //   }
+      // }
       editorAPP.deleteShapes(graphicIds)
     },
     // 添加快照

package/src/components/utils/index.js

@@ -10,4 +10,16 @@ export function debounce(fn, delay = debounceTimer) {
             fn.apply(that, args)
         }, delay)
     }
+}
+export function throttle(fn, limit=debounceTimer) {
+    let inThrottle;
+    return function() {
+        const args = arguments;
+        const context = this;
+        if (!inThrottle) {
+            fn.apply(context, args);
+            inThrottle = true;
+            setTimeout(() => { inThrottle = false; }, limit);
+        }
+    };
 }

package/src/index.js

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