fix: 修改 Server backed 模式回复注释bug

packages/core/src/annotation/layer.js

@@ -701,6 +701,7 @@ class ComPDFAnnotationLayer {
     if (this.annotations && this.annotations.length) {
       for (let i = 0; i < this.annotations.length; i++) {
         const annotation = this.annotations[i]
+        if (!annotation) continue
         const markupType = ['highlight', 'underline', 'squiggly', 'strikeout']
         if (markupType.includes(annotation.type)) {
           const markup = new MarkupTextAnnotation({

packages/core/src/index.js

@@ -685,9 +685,11 @@ class ComPDFKitViewer {
     annotation.index = Number(rawAnnotation.index)
     annotation.contents = rawAnnotation.content || ''
     annotation.opacity = round(rawAnnotation.opacity, 2) || 1
-    rawAnnotation.replies && (annotation.replies = rawAnnotation.replies)
-    rawAnnotation.markedAnnotState && (annotation.markedAnnotState = AnnotationStateString[rawAnnotation.markedAnnotState])
-    rawAnnotation.reviewAnnotState && (annotation.reviewAnnotState = AnnotationStateString[rawAnnotation.reviewAnnotState])
+    rawAnnotation.mainName && (annotation.mainName = rawAnnotation.mainName)
+    rawAnnotation.replies && (annotation.replies = rawAnnotation.replies);
+    (rawAnnotation.markedAnnotState || rawAnnotation.markedAnnotState === 0) && (annotation.markedAnnotState = AnnotationStateString[rawAnnotation.markedAnnotState]);
+    (rawAnnotation.reviewAnnotState || rawAnnotation.reviewAnnotState === 0) && (annotation.reviewAnnotState = AnnotationStateString[rawAnnotation.reviewAnnotState])
+    annotation.name = rawAnnotation.name || uuidv4()
 
     switch (rawAnnotation.type) {
       case 'freetext':
@@ -838,7 +840,7 @@ class ComPDFKitViewer {
 
     if (annotation.replies?.length) {
       for (const reply of annotation.replies) {
-        reply.name = uuidv4()
+        reply.name = reply.name || uuidv4()
         reply.contents = reply.content
         delete reply.content
         reply.date = parseAdobePDFTimestamp(rawAnnotation.recentlyModifyDate || rawAnnotation.date || rawAnnotation.creationdate)
@@ -2561,6 +2563,7 @@ class ComPDFKitViewer {
     for (let page in this.annotations) {
       for (let i = 0; i < this.annotations[page].length; i++) {
         const annot = this.annotations[page][i]
+        if (!annot) continue
         const element = document.getElementById(annot['name'])
 
         if (element) {
@@ -3336,7 +3339,7 @@ class ComPDFKitViewer {
       })
     }
   }
-  
+
   // 处理回复注释
   async handleReplyAnnotation(data) {
     const { type, annotation, reply, reviewAnnotState, markedAnnotState } = data
@@ -3365,9 +3368,10 @@ class ComPDFKitViewer {
           if (reviewAnnotState) annot.reviewAnnotState = reviewAnnotState
           if (markedAnnotState) annot.markedAnnotState = markedAnnotState
         } else {
-          const index = findIndex(annot.name, this.annotations[annotation.pageIndex])
+          const annotations = this.annotations[annotation.pageIndex]
+          const index = findIndex(annot.name, annotations)
           annot.index = index
-          
+
           annotateHandles.push({
             operate: 'add-annot',
             type: 'reply',
@@ -3379,6 +3383,8 @@ class ComPDFKitViewer {
           })
           if (!annot.replies) annot.replies = []
           annot.replies.push(reply)
+
+          annotations.push(reply)
         }
       }
       if (reviewAnnotState || markedAnnotState) { // 添加有状态回复（首次设置注释状态）
@@ -3391,9 +3397,11 @@ class ComPDFKitViewer {
           if (markedAnnotState) annot.markedAnnotState = newState
           else annot.reviewAnnotState = newState
         } else {
+          const annotations = this.annotations[annotation.pageIndex]
+          const index = findIndex(annot.name, annotations)
           const data = {
             operate: 'mod-annot',
-            index: annot.index,
+            index,
             pageIndex: annot.pageIndex,
             targetPage: annot.pageIndex + 1
           }
@@ -3408,7 +3416,6 @@ class ComPDFKitViewer {
           annotateHandles.push(data)
         }
       }
-
     } else if (type === 'delete') {
       if (!this.webviewerServer) {
         await this.messageHandler.sendWithPromise('RemoveAnnot', {
@@ -3423,13 +3430,13 @@ class ComPDFKitViewer {
           targetPage: reply.pageIndex + 1
         })
       }
-      annot.replies = annot.replies.filter(item => item.name !== reply.name)
-      annot.replies.forEach(item => {
-        if (item.index > reply.index) {
-          item.index--
-        }
-      })
 
+      annot.replies.splice(reply.index, 1)
+      annot.replies.map((item, index) => item.index = index)
+
+      const annotations = this.annotations[annotation.pageIndex]
+      const index = findIndex(reply.name, annotations)
+      annotations.splice(index, 1)
     } else if (type === 'edit') {
       if (markedAnnotState || reviewAnnotState) { // 修改注释状态
         if (!this.webviewerServer) {
@@ -3444,16 +3451,24 @@ class ComPDFKitViewer {
             annot.reviewAnnotState = newState
           }
         } else {
+          const annotations = this.annotations[annotation.pageIndex]
+          const index = findIndex(annot.name, annotations)
+          const data = {
+            operate: 'mod-annot',
+            index,
+            pageIndex: annot.pageIndex,
+            targetPage: annot.pageIndex + 1
+          }
           if (markedAnnotState) {
             annot.markedAnnotState = markedAnnotState
+            data.markedAnnotState = markedAnnotState
           }
           if (reviewAnnotState) {
             annot.reviewAnnotState = reviewAnnotState
+            data.reviewAnnotState = reviewAnnotState
           }
-          let postData = JSON.parse(JSON.stringify(annot))
-          annotateHandles.push(postData)
+          annotateHandles.push(data)
         }
-        
       } else { // 修改回复内容
         if (!this.webviewerServer) {
           this.messageHandler.sendWithPromise('EditReplyAnnotation', {
@@ -3474,15 +3489,10 @@ class ComPDFKitViewer {
           targetPage: reply.pageIndex + 1,
           content: reply.contents
         })
-      }
 
-      // const res = await this.messageHandler.sendWithPromise('GetReplyAnnotation', {
-      //   pagePtr,
-      //   annotPtr
-      // })
-      // annot.replies = res.replies
-      // annot.reviewAnnotState = res.reviewAnnotState
-      // annot.markedAnnotState = res.markedAnnotState
+        const replayAnnotation = this.annotations[annotation.pageIndex].find(item => item.name === replyItem.name)
+        replayAnnotation.contents = reply.contents
+      }
     }
 
     this.eventBus.dispatch('annotationChanged', { annotations: this.annotations })

packages/core/src/worker/compdfkit_worker.js

@@ -1925,7 +1925,7 @@ function getAnnotation({
   const { replies, reviewAnnotState, markedAnnotState } = getReplyArray(pagePtr, annotPtr)
   if (replies.length) annotation.replies = replies
   if (reviewAnnotState) annotation.reviewAnnotState = reviewAnnotState
-  if (reviewAnnotState) annotation.markedAnnotState = markedAnnotState
+  if (markedAnnotState) annotation.markedAnnotState = markedAnnotState
 
   let hasColor = 0
   let isFilled = 0

packages/webview/src/components/AnnotationContainer/AnnotationContent.vue

@@ -43,30 +43,32 @@
                   <textarea placeholder="Reply or add thoughts" v-model="replyText" class="annotReplyInput"></textarea>
                   <div class="buttons">
                     <span @click.stop="cancel">Cancel</span>
-                    <button :class="{ 'active': replyText }" @click="addReply">Reply</button>
+                    <button :class="{ 'active': replyText, disabled: !replyText }" @click="addReply">Reply</button>
                   </div>
                 </div>
 
                 <div class="replies">
-                  <div class="info" v-for="(reply, index) in item.replies">
-                    <div class="info-header">
-                      <div>
-                        <p class="name">{{ reply.author || reply.title || annotator }}</p>
-                        <p class="date">{{ dayjs(reply.date).format('DD/MM/YYYY HH:mm:ss') }}</p>
+                  <template v-for="(reply, index) in item.replies" :key="index">
+                    <div v-if="reply.contents" class="info">
+                      <div class="info-header">
+                        <div>
+                          <p class="name">{{ reply.author || reply.title || annotator }}</p>
+                          <p class="date">{{ dayjs(reply.date).format('DD/MM/YYYY HH:mm:ss') }}</p>
+                        </div>
+                        <Button class="more" :class="{ active: showReplyPopover && reply.name === selectedReply?.name }" @click="handleReplyPopoverShow($event, reply)">
+                          <MoreA />
+                        </Button>
                       </div>
-                      <Button class="more" :class="{ active: showReplyPopover && reply.name === selectedReply?.name }" @click="handleReplyPopoverShow($event, reply)">
-                        <MoreA />
-                      </Button>
-                    </div>
-                    <div class="content" v-if="editing && reply.name === selectedReply?.name">
-                      <textarea v-model="editingReplyText" class="replyEditInput"></textarea>
-                      <div class="buttons">
-                        <span @click="cancelEdit">Cancel</span>
-                        <button :class="{ 'active': editingReplyText && editingReplyText !== reply.contents }" @click="editReply">Confirm</button>
+                      <div class="content" v-if="editing && reply.name === selectedReply?.name">
+                        <textarea v-model="editingReplyText" class="replyEditInput"></textarea>
+                        <div class="buttons">
+                          <span @click="cancelEdit">Cancel</span>
+                          <button :class="[editingReplyText && editingReplyText !== reply.contents ? 'active' : 'disabled']" @click="editReply">Confirm</button>
+                        </div>
                       </div>
+                      <div class="content" v-else>{{ reply.contents }}</div>
                     </div>
-                    <div class="content" v-else>{{ reply.contents }}</div>
-                  </div>
+                  </template>
                 </div>
 
                 <n-popover
@@ -172,7 +174,7 @@ const setAnnotationList = ({ annotations }) => {
   useDocument.initAnnotations(annotations)
   const instance = getCurrentInstance();
   instance?.proxy?.$forceUpdate();
-  console.log(annotations[0])
+  console.log(annotations && annotations[0])
 }
 core.addEvent('annotationChanged', setAnnotationList)
 
@@ -247,6 +249,7 @@ const handleReplyPopoverShow = (e, reply) => {
 // 标记状态
 const setMarkedState = (annotation) => {
   let data
+  debugger
   if (annotation.markedAnnotState) {
     data = {
       type: 'edit',
@@ -268,6 +271,7 @@ const setMarkedState = (annotation) => {
 
 // 回复
 const addReply = () => {
+  if (replyText.value === '') return
   const data = {
     type: 'add',
     annotation: selectedAnnot.value,
@@ -288,6 +292,7 @@ const addReply = () => {
 
 // 编辑回复
 const editReply = () => {
+  showReplyInput.value = false
   if (editing.value && editingReplyText.value !== selectedReply.value.contents) {
     const data = {
       type: 'edit',
@@ -390,7 +395,7 @@ core.addEvent('openAnnotationReply', openAnnotationReply)
 .annotation-view {
   position: relative;
   padding: 0 8px;
-  height: calc(100% - 95px);
+  height: 100%;
   overflow: auto;
 
   .page-title {
@@ -543,6 +548,10 @@ core.addEvent('openAnnotationReply', openAnnotationReply)
             color: #fff;
             background: #1460F3;
           }
+
+          &.disabled {
+            cursor: not-allowed;
+          }
         }
       }
 

packages/webview/src/stores/modules/document.js

@@ -195,20 +195,22 @@ export const useDocumentStore = defineStore({
         const len = pageAnnotations.length
         if (len) {
           for (let i = 0; i < len; i++) {
+            const annotation = pageAnnotations[i]
+            if (!pageAnnotations[i]) continue
            // if (pageAnnotations[i].type === 'line' && pageAnnotations[i].tail === 'OpenArrow') continue
-            if (pageAnnotations[i] && pageAnnotations[i].type === 'line') {
+            if (annotation && annotation.type === 'line') {
               let supportLine = true
-              if(pageAnnotations[i].tail || pageAnnotations[i].head)
+              if(annotation.tail || annotation.head)
               {
-                if (pageAnnotations[i].tail === 'None' && pageAnnotations[i].head === 'None') {
+                if (annotation.tail === 'None' && annotation.head === 'None') {
                   supportLine = true
                 } else {
-                  if (pageAnnotations[i].head && pageAnnotations[i].head !== 'OpenArrow' && pageAnnotations[i].head !== 'None' && pageAnnotations[i].head !== 'Unknown') {
+                  if (annotation.head && annotation.head !== 'OpenArrow' && annotation.head !== 'None' && annotation.head !== 'Unknown') {
                     supportLine = false
                     continue
                   }
 
-                  if (pageAnnotations[i].tail && pageAnnotations[i].tail !== 'OpenArrow' && pageAnnotations[i].tail !== 'None' && pageAnnotations[i].tail !== 'Unknown') {
+                  if (annotation.tail && annotation.tail !== 'OpenArrow' && annotation.tail !== 'None' && annotation.tail !== 'Unknown') {
                     supportLine = false
                     continue
                   }
@@ -216,7 +218,7 @@ export const useDocumentStore = defineStore({
               }
             }
 
-            if (type.includes(pageAnnotations[i].type)) {
+            if (type.includes(annotation.type) && !annotation.mainName) {
               if (!annotationsContainers.annotations[page]) {
                 annotationsContainers.annotations[page] = {
                   pageAnnotationsCount: 0,
@@ -225,7 +227,13 @@ export const useDocumentStore = defineStore({
               }
               annotationsContainers.annotations[page].pageAnnotationsCount++
               annotationsContainers.annotationsCount++
-              annotationsContainers.annotations[page].annotations.push(pageAnnotations[i])
+              annotationsContainers.annotations[page].annotations.push(annotation)
+
+              let replies = annotation.replies
+              if (replies && replies.length) {
+                replies = replies.filter(reply => reply.contents)
+              }
+              annotation.replies = replies
             }
           }
         }