add: 添加注释渲染及绘制

packages/core/constants/index.js

@@ -152,6 +152,34 @@ const AnnotationTypeString = {
   26: 'redact',
 };
 
+const LineType = {
+  UNKNOWN: -1,
+  NONE: 0,
+  OPENARROW: 1,
+  CLOSEDARROW: 2,
+  SQUARE: 3,
+  CIRCLE: 4,
+  DIAMOND: 5,
+  BUTT: 6,
+  ROPENARROW: 7,
+  RCLOSEDARROW: 8,
+  SLASH: 9,
+}
+
+const LineTypeString = {
+  '-1': 'Unknown',
+  0: 'None',
+  1: 'OpenArrow',
+  2: 'closedarrow',
+  3: 'square',
+  4: 'circle',
+  5: 'diamond',
+  6: 'butt',
+  7: 'ropenarrow',
+  8: 'rclosedarrow',
+  9: 'slash',
+}
+
 const AnnotationStateModelType = {
   MARKED: "Marked",
   REVIEW: "Review",
@@ -452,6 +480,8 @@ export {
   ImageKind,
   AnnotationType,
   AnnotationTypeString,
+  LineType,
+  LineTypeString,
   AnnotationStateModelType,
   AnnotationMarkedState,
   AnnotationReviewState,

packages/core/src/annotation/freetext.js

@@ -358,7 +358,12 @@ export default class Shape extends Base {
     this.getFreetextRectPoint()
     const actualLeftTopPoint = getInitialPoint(this.leftTop, viewport, scale)
     const actualRightBottomPoint = getInitialPoint(this.rightBottom, viewport, scale)
-    return `${actualLeftTopPoint.x},${actualRightBottomPoint.y},${actualRightBottomPoint.x},${actualLeftTopPoint.y}`
+    return {
+      left: actualLeftTopPoint.x,
+      top: actualLeftTopPoint.y,
+      right: actualRightBottomPoint.x,
+      bottom: actualRightBottomPoint.y
+    }
   }
 
   handleFreetextEditElementBlur () {
@@ -366,23 +371,17 @@ export default class Shape extends Base {
     if (freetextEditElement && freetextEditElement.innerText !== this.annotation.content) {
       const freetextRectString = this.getFreetextRectString()
 
+      const annotation = this.annotation
       const text = getHtmlToText(freetextEditElement)
       this.eventBus.dispatch('annotationChange', {
         type: 'modify',
         annotation: {
           operate: "mod-annot",
-          name: this.annotation.name,
-          page: this.page,
+          name: annotation.name,
+          pageIndex: this.page,
+          pagePtr: annotation.pagePtr,
+          annotPtr: annotation.annotPtr,
           content: text,
-          textColor: '#000000',
-          fillColor: '#FFFFFF',
-          fontSize: 16,
-          fillTransparency: 0,
-          alignment: 0,
-          color: 'transparent',
-          fontName: 'Helvetica',
-          transparency: 1,
-          fillTransparency: 0,
           rect: freetextRectString
         }
       })
@@ -442,7 +441,7 @@ export default class Shape extends Base {
   // 获取实际坐标
   getActualRect (viewport, s,) {
     const annotation = this.annotation
-    const [x1, y1, x2, y2] = annotation.rect.split(',')
+    const { left: x1, top: y1, right: x2, bottom: y2 } = annotation.rect
 
     const start = getActualPoint(
       {
@@ -502,9 +501,9 @@ export default class Shape extends Base {
     let x1, y1, x2, y2;
     if (rotation === 0) {
       x1 = left / s;
-      y1 = (height - top) / s; 
+      y1 = top / s; 
       x2 = right / s;
-      y2 = (height - bottom) / s;
+      y2 = bottom / s;
     } else if (rotation === 90) {
       x1 = bottom / s;
       y1 = right / s;
@@ -754,22 +753,21 @@ export default class Shape extends Base {
 
     const rect = leftTop.x + ',' + rightBottom.y + ',' + rightBottom.x + ',' + leftTop.y
     annotation.rect = rect
+    debugger
     this.eventBus.dispatch('annotationChange', {
       type: 'modify',
       annotation: {
         operate: "mod-annot",
         name: annotation.name,
-        page: this.page,
-        rect,
-        textColor: '#000000',
-        fillColor: '#FFFFFF',
-        fontSize: 16,
-        fillTransparency: 0,
-        alignment: 0,
-        color: 'transparent',
-        fontName: 'Helvetica',
-        transparency: 1,
-        fillTransparency: 0
+        pageIndex: this.page,
+        pagePtr: annotation.pagePtr,
+        annotPtr: annotation.annotPtr,
+        rect: {
+          left: leftTop.x,
+          top: leftTop.y,
+          right: rightBottom.x,
+          bottom: rightBottom.y
+        }
       }
     })
   }
@@ -846,7 +844,7 @@ export default class Shape extends Base {
       annotation: {
         operate: "del-annot",
         name: this.annotation.name,
-        page: this.page,
+        pageIndex: this.page,
       }
     })
   }

packages/core/src/annotation/ink.js

@@ -421,7 +421,7 @@ export default class Ink extends Base {
       annotation: {
         operate: "del-annot",
         name: this.annotation.name,
-        page: this.page
+        pageIndex: this.page
       }
     })
   }

packages/core/src/annotation/layer.js

@@ -707,12 +707,12 @@ class ComPDFAnnotationLayer {
           })
           this.annotationsArray.push(markup)
         } else if (annotation.type === 'line' && !annotation.isDelete) {
-          let supportLine=true
+          let supportLine = true
           if (annotation.tail || annotation.head) {
-            if (annotation.tail === 'None' && annotation.head === 'None') {
+            const noneLine = ['None', 'Unknown']
+            if (noneLine.includes(annotation.tail) && noneLine.includes(annotation.head)) {
               supportLine = true
-            }
-            else {
+            } else {
               if (annotation.head && annotation.head !== 'OpenArrow' && annotation.head !== 'None') {
                 supportLine = false
               }
@@ -722,8 +722,7 @@ class ComPDFAnnotationLayer {
               }
             }
           }
-          if(supportLine)
-          {
+          if(supportLine) {
             const line = new Line({
               container: this.div,
               annotation,

packages/core/src/annotation/line.js

@@ -5,6 +5,7 @@ import { getAbsoluteCoordinate } from './position';
 import { getClickPoint, createSvg } from './utils';
 import { MARGIN_DISTANCE } from '../../constants'
 import ArrowHelper from './arrow'
+import Color from '../color';
 
 export default class Line extends Base {
   constructor ({
@@ -60,10 +61,12 @@ export default class Line extends Base {
     )
     this.start = start
     this.end = end
-    const uuid = uuidv4();
     const actualbdwidth = (this.annotation.lineWidth || this.annotation.width || 2) * this.scale
     const innerRect = this.calculate(start, end)
-    let arrowLength=Math.max(actualbdwidth*3,12*this.scale)
+    let arrowLength = Math.max(actualbdwidth * 3, 12 * this.scale)
+    
+    const { R, G, B } = annotation.borderColor
+    annotation.borderColor = new Color(R, G, B)
 
     const rect = {
       left: innerRect.left - arrowLength,
@@ -77,24 +80,22 @@ export default class Line extends Base {
     this.svgElement.setAttribute("viewBox", `${rect.left} ${rect.top} ${rect.width} ${rect.height}`)
     let line=document.createElementNS("http://www.w3.org/2000/svg",'line')
 
-    line.setAttribute("x1",this.start.x)
-    line.setAttribute("y1",this.start.y)
-    line.setAttribute("x2",this.end.x)
-    line.setAttribute("y2",this.end.y)
-    line.setAttribute("stroke",annotation.borderColor || annotation.color || '#FF0000')
-    line.setAttribute("stroke-width",actualbdwidth)
-    if(annotation.transparency)
-    {
-      line.setAttribute("stroke-opacity",annotation.transparency)
+    line.setAttribute("x1", this.start.x)
+    line.setAttribute("y1", this.start.y)
+    line.setAttribute("x2", this.end.x)
+    line.setAttribute("y2", this.end.y)
+    line.setAttribute("stroke", (annotation.borderColor && annotation.borderColor.getColor()) || annotation.color || '#FF0000')
+    line.setAttribute("stroke-width", actualbdwidth)
+    if(annotation.transparency) {
+      line.setAttribute("stroke-opacity", annotation.transparency)
     }
     
     this.svgElement.append(line)
-  
+
     if (this.annotation.head || this.annotation.tail) {
-      let arrowBuild= new ArrowHelper(this.start, this.end)
-      let arrowUi=[]
-      if(this.annotation.head && this.annotation.head==="OpenArrow")
-      {
+      let arrowBuild = new ArrowHelper(this.start, this.end)
+      let arrowUi = []
+      if (this.annotation.head && this.annotation.head === "OpenArrow") {
         let arrowHead=arrowBuild.getStartArrow(30, arrowLength, false)
         if(arrowHead)
         {
@@ -102,8 +103,8 @@ export default class Line extends Base {
           arrowUi.push(arrowHead)
         }
       }
-      if(this.annotation.tail && this.annotation.tail==="OpenArrow")
-      {
+
+      if (this.annotation.tail && this.annotation.tail === "OpenArrow") {
         let arrowTail=arrowBuild.getEndArrow(30, arrowLength, false)
         if(arrowTail)
         {
@@ -112,14 +113,12 @@ export default class Line extends Base {
         }
       }
       arrowUi.forEach(element => {
-        if(element)
-        {
-          element.setAttribute("stroke",annotation.borderColor || annotation.color || '#FF0000')
-          element.setAttribute("stroke-width",actualbdwidth)
-          element.setAttribute("fill","none")
-          if(annotation.transparency)
-          {
-            element.setAttribute("stroke-opacity",annotation.transparency)
+        if (element) {
+          element.setAttribute("stroke", (annotation.borderColor && annotation.borderColor.getColor()) || annotation.color || '#FF0000')
+          element.setAttribute("stroke-width", actualbdwidth)
+          element.setAttribute("fill", "none")
+          if(annotation.transparency) {
+            element.setAttribute("stroke-opacity", annotation.transparency)
           }
           this.svgElement.append(element)
         }
@@ -244,15 +243,15 @@ export default class Line extends Base {
     if (!annotation.linePoints && annotation.start && annotation.end) {
       annotation.linePoints = annotation.start + ',' + annotation.end
     }
-    let [startX, startY, endX, endY] = annotation.linePoints.split(',')
+    let [startX, startY, endX, endY] = annotation.linePoints
 
     const { width, height, rotation  } = viewport;
     let x1, y1, x2, y2;
     if (rotation === 0) {
       x1 = startX * s;
-      y1 = height - startY * s;
+      y1 = startY * s;
       x2 = endX * s;
-      y2 = height - endY * s;
+      y2 = endY * s;
     } else if (rotation === 90) {
       x1 = startY * s;
       y1 = startX * s;
@@ -292,9 +291,9 @@ export default class Line extends Base {
     let x1, y1, x2, y2;
     if (rotation === 0) {
       x1 = startX / s;
-      y1 = (height - startY) / s; 
+      y1 = startY / s;
       x2 = endX / s;
-      y2 = (height - endY) / s;
+      y2 = endY / s;
     } else if (rotation === 90) {
       x1 = startY / s;
       y1 = startX / s;
@@ -477,7 +476,7 @@ export default class Line extends Base {
       annotation: {
         operate: "del-annot",
         name: this.annotation.name,
-        page: this.page
+        pageIndex: this.page
       }
     })
   }
@@ -511,16 +510,29 @@ export default class Line extends Base {
     const annotation = this.annotation
     const { start, end } = this.getInitialPoint()
 
-    const linePoints = start.x + ',' + start.y + ',' + end.x + ',' + end.y
+    const linePoints = [start.x, start.y, end.x, end.y]
     annotation.linePoints = linePoints
+    const left = Math.min(start.x, end.x)
+    const top = Math.min(start.y, end.y)
+    const right = Math.max(start.x, end.x)
+    const bottom = Math.max(start.y, end.y)
+    const rect = {
+      left: left - 6,
+      top: top - 6,
+      right: right + 6,
+      bottom: bottom + 6
+    }
 
     this.eventBus.dispatch('annotationChange', {
       type: 'modify',
       annotation: {
         operate: "mod-annot",
         name: annotation.name,
-        page: this.page,
-        linePoints: linePoints,
+        pageIndex: this.page,
+        pagePtr: annotation.pagePtr,
+        annotPtr: annotation.annotPtr,
+        linePoints,
+        rect
       }
     })
   }
@@ -595,7 +607,7 @@ export default class Line extends Base {
           }
         }
       }
-      if(this.annotation.tail && this.annotation.tail==='OpenArrow')
+      if(this.annotation.tail && this.annotation.tail === 'OpenArrow')
       {
         let tail= this.svgElement.querySelector('[tail]')
         if(tail)

packages/core/src/annotation/link.js

@@ -631,7 +631,7 @@ export default class Link extends Base {
       annotation: {
         operate: "del-annot",
         name: this.annotation.name,
-        page: this.page
+        pageIndex: this.page
       }
     })
   }

packages/core/src/annotation/paint/shape.js

@@ -6,6 +6,7 @@ import {
   getSvgPathFromStroke
 } from '../utils';
 import ArrowHelper from '../arrow'
+import { hexToRgb } from "../../ui_utils";
 
 // 绘制 Line, Square, Circle, Ink
 export default class PaintShape {
@@ -122,43 +123,49 @@ export default class PaintShape {
     if (initEndPoint && initStartPoint.x !== initEndPoint.x && initStartPoint.y !== initEndPoint.y) {
       let start = getInitialPoint(initStartPoint, this.viewport, this.viewport.scale)
       let end = getInitialPoint(initEndPoint, this.viewport, this.viewport.scale)
-      
-      let linePoints = start.x + ',' + start.y + ',' + end.x + ',' + end.y
 
+      const left = Math.min(start.x, end.x)
+      const top = Math.min(start.y, end.y)
+      const right = Math.max(start.x, end.x)
+      const bottom = Math.max(start.y, end.y)
+      const rect = {
+        left,
+        top,
+        right,
+        bottom
+      }
+      let color = this.color
+      if (typeof color === 'string' && color.startsWith("#")) {
+        color = hexToRgb(color)
+      }
       const annotationData = {
         operate: "add-annot",
         type: this.tool === 'arrow' ? 'line' : this.tool,
-        page: this.page,
+        pageIndex: this.page,
         lineWidth: 2,
         transparency: 0.8,
-        borderColor: this.color,
-        linePoints,
+        borderColor: color,
+        rect,
         arrow: this.tool === 'arrow',
       }
 
-      if (this.tool === 'circle' || this.tool === 'square') {
-        const newStart = {
-          x: Math.min(start.x, end.x),
-          y: Math.min(start.y, end.y)
+      if (annotationData.type == 'line') {
+        const linePoints = [start.x, start.y, end.x, end.y]
+        annotationData.linePoints = linePoints
+        annotationData.rect = {
+          left: left - 6,
+          top: top - 6,
+          right: right + 6,
+          bottom: bottom + 6
         }
-        const newEnd = {
-          x: Math.max(start.x, end.x),
-          y: Math.max(start.y, end.y)
+        if (this.tool === 'arrow') {
+          annotationData.tail = 'OpenArrow'
         }
-        linePoints = newStart.x + ',' + newStart.y + ',' + newEnd.x + ',' + newEnd.y
-        annotationData.rect = linePoints
-        annotationData.linePoints = linePoints
       } else if (this.tool === 'ink') {
         const { path, rect } = this.formatPath()
 
         annotationData.rect = rect
         annotationData.inklist = path
-      } else if (this.tool === 'line' || this.tool === 'arrow') {
-        annotationData.rect = linePoints
-        if(this.tool==='arrow' && this.tail)
-        {
-          annotationData.tail=this.tail
-        }
       }
 
       this.eventBus.dispatch('annotationChange', {
@@ -208,11 +215,10 @@ export default class PaintShape {
         )
         if (this.tool === 'arrow') {
           let arrowBuild= new ArrowHelper(this.initStartPoint, this.initEndPoint)
-          let arrowLength=12*scale
-          let arrowUi= arrowBuild.getEndArrow(30,arrowLength,false)
-          if(arrowUi)
-          {
-            this.tail="OpenArrow"
+          let arrowLength = 12 * scale
+          let arrowUi = arrowBuild.getEndArrow(30,arrowLength,false)
+          if (arrowUi) {
+            this.tail = "OpenArrow"
             arrowUi.setAttribute('tail','')
             arrowUi.setAttribute("stroke",this.color)
             arrowUi.setAttribute("stroke-width",2 * scale)

packages/core/src/annotation/shape.js

@@ -1,7 +1,8 @@
 import Base from './base';
 import { MARGIN_DISTANCE } from '../../constants'
 import { getActualPoint, getClickPoint, createSvg } from './utils';
-import { onClickOutside } from '../ui_utils'
+import { hexToRgb, onClickOutside } from '../ui_utils'
+import Color from '../color';
 
 export default class Shape extends Base {
   
@@ -62,6 +63,12 @@ export default class Shape extends Base {
 
     const rect = this.calculate(start, end)
     const actualbdwidth = (this.annotation.lineWidth || this.annotation.width || 2) * this.scale
+
+    if (typeof annotation.borderColor === 'string' && annotation.borderColor.startsWith("#")) {
+      annotation.borderColor = hexToRgb(annotation.borderColor)
+    }
+    const { R, G, B } = annotation.borderColor
+    annotation.borderColor = new Color(R, G, B)
     
     const annotationContainer = document.createElement('div')
     annotationContainer.id = annotation.name
@@ -86,7 +93,7 @@ export default class Shape extends Base {
           y: actualbdwidth / 2,
           width: `${Math.abs(rect.width - actualbdwidth)}px`,
           height: `${Math.abs(rect.height - actualbdwidth)}px`,
-          stroke: annotation.borderColor || annotation.color,
+          stroke: (annotation.borderColor && annotation.borderColor.getColor()) || annotation.color,
           'stroke-width': actualbdwidth,
           'stroke-opacity': annotation.transparency,
           fill: 'none',
@@ -101,7 +108,7 @@ export default class Shape extends Base {
           cy: rect.height / 2,
           rx: (rect.width - actualbdwidth) / 2,
           ry: (rect.height - actualbdwidth) / 2,
-          stroke: annotation.borderColor || annotation.color,
+          stroke: (annotation.borderColor && annotation.borderColor.getColor()) || annotation.color,
           'stroke-width': actualbdwidth,
           'stroke-opacity': annotation.transparency,
           fill: 'none',
@@ -295,7 +302,7 @@ export default class Shape extends Base {
 
   getActualRect (viewport, s,) {
     const annotation = this.annotation
-    const [x1, y1, x2, y2] = annotation.rect.split(',')
+    const { left: x1, top: y1, right: x2, bottom: y2 } = annotation.rect
     
     const start = getActualPoint(
       {
@@ -330,7 +337,7 @@ export default class Shape extends Base {
 
   calculate (start, end) {
     const initRect = this.rectCalc({ start, end });
-    const actualbdwidth = (this.annotation.width || this.annotation.lineWidth || 2) * this.scale
+    const actualbdwidth = (this.annotation.width || this.annotation.borderWidth || 2) * this.scale
 
     return {
       top: initRect.top - actualbdwidth,
@@ -351,9 +358,9 @@ export default class Shape extends Base {
     let x1, y1, x2, y2;
     if (rotation === 0) {
       x1 = startX / s;
-      y1 = (height - startY) / s; 
+      y1 = startY / s; 
       x2 = endX / s;
-      y2 = (height - endY) / s;
+      y2 = endY / s;
     } else if (rotation === 90) {
       x1 = startY / s;
       y1 = startX / s;
@@ -448,15 +455,15 @@ export default class Shape extends Base {
     const { width, height } = this.viewport
     if (startState.operator === 'nw-resize') {
       let x1 = pageX - (startState.clickX - this.start.x);
-      let y1 = pageY - (startState.clickY - this.end.y);
+      let y1 = pageY - (startState.clickY - this.start.y);
       x1 = Math.min(end.x - 5, x1)
       x1 = Math.max(0, x1)
-      y1 = Math.min(start.y - 5, y1)
+      y1 = Math.min(end.y - 5, y1)
       y1 = Math.max(0, y1)
 
       this.update({
-        start: { x: x1, y: start.y },
-        end: { x: end.x, y: y1 },
+        start: { x: x1, y: y1 },
+        end,
       });
     } else if (startState.operator === 'w-resize') {
       let x1 = pageX - (startState.clickX - this.start.x);
@@ -469,34 +476,34 @@ export default class Shape extends Base {
       });
     } else if (startState.operator === 'sw-resize') {
       let x1 = pageX - (startState.clickX - this.start.x);
-      let y1 = pageY - (startState.clickY - this.start.y);
+      let y1 = pageY - (startState.clickY - this.end.y);
       x1 = Math.min(end.x - 5, x1)
       x1 = Math.max(0, x1)
       y1 = Math.min(height, y1)
-      y1 = Math.max(end.y + 5, y1)
+      y1 = Math.max(start.y + 5, y1)
 
       this.update({
-        start: { x: x1, y: y1 },
-        end,
+        start: { x: x1, y: start.y },
+        end: { x: end.x, y: y1 },
       });
     } else if (startState.operator === 's-resize') {
-      let y1 = pageY - (startState.clickY - this.start.y);
+      let y1 = pageY - (startState.clickY - this.end.y);
       y1 = Math.min(height, y1)
-      y1 = Math.max(end.y + 5, y1)
+      y1 = Math.max(start.y + 5, y1)
       this.update({
-        start: { x: start.x, y: y1 },
-        end,
+        start,
+        end: { x: end.x, y: y1 },
       });
     } else if (startState.operator === 'se-resize') {
       let x = pageX - (startState.clickX - this.end.x);
-      let y = pageY - (startState.clickY - this.start.y);
+      let y = pageY - (startState.clickY - this.end.y);
       x = Math.min(width, x)
       x = Math.max(start.x + 5, x)
       y = Math.min(height, y)
-      y = Math.max(end.y + 5, y)
+      y = Math.max(start.y + 5, y)
       this.update({
-        start: { x: start.x, y },
-        end: { x, y: end.y },
+        start,
+        end: { x, y },
       });
     } else if (startState.operator === 'e-resize') {
       let x = pageX - (startState.clickX - this.end.x);
@@ -508,22 +515,22 @@ export default class Shape extends Base {
       });
     } else if (startState.operator === 'ne-resize') {
       let x = pageX - (startState.clickX - this.end.x);
-      let y = pageY - (startState.clickY - this.end.y);
+      let y = pageY - (startState.clickY - this.start.y);
       x = Math.min(width, x)
       x = Math.max(start.x + 5, x)
-      y = Math.min(start.y - 5, y)
+      y = Math.min(end.y - 5, y)
       y = Math.max(0, y)
       this.update({
-        start,
-        end: { x, y },
+        start: { x: start.x, y },
+        end: { x, y: end.y },
       });
     } else if (startState.operator === 'n-resize') {
-      let y = pageY - (startState.clickY - this.end.y);
-      y = Math.min(start.y - 5, y)
+      let y = pageY - (startState.clickY - this.start.y);
+      y = Math.min(end.y - 5, y)
       y = Math.max(0, y)
       this.update({
-        start,
-        end: { x: end.x, y },
+        start: { x: start.x, y },
+        end,
       });
     } else if (startState.operator === 'move') {
       let x1 = pageX - (startState.clickX - this.start.x);
@@ -579,7 +586,7 @@ export default class Shape extends Base {
       annotation: {
         operate: "del-annot",
         name: this.annotation.name,
-        page: this.page
+        pageIndex: this.page
       }
     })
   }
@@ -606,18 +613,25 @@ export default class Shape extends Base {
     const annotation = this.annotation
     const { start, end } = this.getInitialPoint()
 
-    const linePoints = start.x + ',' + start.y + ',' + end.x + ',' + end.y
-    if (linePoints === annotation.linePoints) return
-    annotation.linePoints = linePoints
+    const rect = {
+      left: start.x,
+      top: start.y,
+      right: end.x,
+      bottom: end.y
+    }
+
+    if (rect === annotation.rect) return
+    annotation.rect = rect
 
     this.eventBus.dispatch('annotationChange', {
       type: 'modify',
       annotation: {
         operate: "mod-annot",
         name: annotation.name,
-        page: this.page,
-        linePoints: linePoints,
-        rect: linePoints
+        pageIndex: this.page,
+        pagePtr: annotation.pagePtr,
+        annotPtr: annotation.annotPtr,
+        rect
       }
     })
   }

packages/core/src/annotation/stamp.js

@@ -655,7 +655,7 @@ export default class Stamp extends Base {
       annotation: {
         operate: "del-annot",
         name: this.annotation.name,
-        page: this.page
+        pageIndex: this.page
       }
     })
   }

packages/core/src/annotation/text.js

@@ -78,7 +78,7 @@ export default class Text extends Base {
       annotation: {
         operate: "del-annot",
         name: this.annotation.name,
-        page: this.page
+        pageIndex: this.page
       }
     })
   }

packages/core/src/annotation/utils.js

@@ -73,7 +73,7 @@ export function getInitialPoint (point, viewport, s) {
   let x, y;
   if (rotation === 0) {
     x = point.x / s;
-    y = (height - point.y) / s; 
+    y = point.y / s; 
   } else if (rotation === 90) {
     x = point.y / s;
     y = point.x / s;

packages/core/src/index.js

@@ -203,7 +203,7 @@ class ComPDFKitViewer {
     this.eventBus.dispatch('annotationChanged', { annotations: this.annotations })
   }
 
-  handleAnnotations (annotation, init = false) {
+  async handleAnnotations (annotation, init = false) {
     this.annotations = this.annotations || {}
     annotation.date = toDateObject(annotation.date)
     if (init) {
@@ -212,11 +212,14 @@ class ComPDFKitViewer {
       if (Number(annotation.pageIndex) + 1 > this.pagesCount) return
       this.pushAnnotations(annotation)
       console.log(annotation)
-      this.messageHandler.sendWithPromise('CreateAnnotation', {
+      const pagePtr = this.pagesPtr[annotation.pageIndex].pagePtr
+      const annotPtr = await this.messageHandler.sendWithPromise('CreateAnnotation', {
         doc: this.doc,
-        pagePtr: this.pagesPtr[annotation.pageIndex].pagePtr,
+        pagePtr,
         annotation
       })
+      annotation.pagePtr = pagePtr
+      annotation.annotPtr = annotPtr
     }
   }
 
@@ -455,79 +458,77 @@ class ComPDFKitViewer {
       case 'text':
         return await this.messageHandler?.sendWithPromise('GetAnnotText', {
           annotPtr: annotation.annotPtr,
-          page: annotation.pagePtr
+          pagePtr: annotation.pagePtr
         })
       case 'link':
         return await this.messageHandler?.sendWithPromise('GetAnnotLink', {
           annotPtr: annotation.annotPtr,
-          page: annotation.pagePtr
+          pagePtr: annotation.pagePtr
         })
-        break
-      case 'freeText':
+      case 'freetext':
         return await this.messageHandler?.sendWithPromise('GetAnnotFreeText', {
           annotPtr: annotation.annotPtr,
-          page: annotation.pagePtr
+          pagePtr: annotation.pagePtr
         })
-        break
       case 'line':
         return await this.messageHandler?.sendWithPromise('GetAnnotLine', {
           annotPtr: annotation.annotPtr,
-          page: annotation.pagePtr
+          pagePtr: annotation.pagePtr
         })
       case 'square':
         return await this.messageHandler?.sendWithPromise('GetAnnotSquare', {
           annotPtr: annotation.annotPtr,
-          page: annotation.pagePtr
+          pagePtr: annotation.pagePtr
         })
       case 'circle':
         return await this.messageHandler?.sendWithPromise('GetAnnotCircle', {
           annotPtr: annotation.annotPtr,
-          page: annotation.pagePtr
+          pagePtr: annotation.pagePtr
         })
       case 'polygon':
         return await this.messageHandler?.sendWithPromise('GetAnnotPolygon', {
           annotPtr: annotation.annotPtr,
-          page: annotation.pagePtr
+          pagePtr: annotation.pagePtr
         })
       case 'polyline':
         return await this.messageHandler?.sendWithPromise('GetAnnotPolyline', {
           annotPtr: annotation.annotPtr,
-          page: annotation.pagePtr
+          pagePtr: annotation.pagePtr
         })
       case 'highlight':
         return await this.messageHandler?.sendWithPromise('GetAnnotHighlight', {
           annotPtr: annotation.annotPtr,
-          page: annotation.pagePtr
+          pagePtr: annotation.pagePtr
         })
       case 'underline':
         return await this.messageHandler?.sendWithPromise('GetAnnotUnderline', {
           annotPtr: annotation.annotPtr,
-          page: annotation.pagePtr
+          pagePtr: annotation.pagePtr
         })
       case 'squiggly':
         return await this.messageHandler?.sendWithPromise('GetAnnotSquiggly', {
           annotPtr: annotation.annotPtr,
-          page: annotation.pagePtr
+          pagePtr: annotation.pagePtr
         })
       case 'strikeout':
         return await this.messageHandler?.sendWithPromise('GetAnnotStrikeout', {
           annotPtr: annotation.annotPtr,
-          page: annotation.pagePtr
+          pagePtr: annotation.pagePtr
         })
       case 'stamp':
         return await this.messageHandler?.sendWithPromise('GetAnnotStamp', {
           annotPtr: annotation.annotPtr,
-          page: annotation.pagePtr
+          pagePtr: annotation.pagePtr
         })
       case 'ink':
         return await this.messageHandler?.sendWithPromise('GetAnnotInk', {
           annotPtr: annotation.annotPtr,
-          page: annotation.pagePtr
+          pagePtr: annotation.pagePtr
         })
       case 'widge':
         return await this.messageHandler?.sendWithPromise('GetAnnotWidge', {
           annotPtr: annotation.annotPtr,
-          page: annotation.pagePtr
+          pagePtr: annotation.pagePtr
         })
     }
   }
@@ -960,6 +961,9 @@ class ComPDFKitViewer {
           delete this.annotations[annotation.pageIndex]
         }
       } else {
+        this.messageHandler.sendWithPromise('EditAnnotation', {
+          annotation
+        })
         const rawAnnotation = annotations[index]
         annotations[index] = {
           ...rawAnnotation,

packages/core/src/markup/index.js

@@ -86,13 +86,13 @@ class MarkupAnnotation {
             textLayer,
             content: selection && selection.toString(),
           })
-
+          debugger
           if (newMarkup) {
             this.eventBus.dispatch('annotationChange', {
               type: 'add',
               annotation: newMarkup
             })
-            const pageView = this.pages[newMarkup.page]
+            const pageView = this.pages[newMarkup.pageIndex]
             if (pageView && pageView.compdfAnnotationLayer) {
               pageView.compdfAnnotationLayer.renderAnnotation(newMarkup)
             }
@@ -247,22 +247,22 @@ class MarkupAnnotation {
     const quadPointsY = []
     for (let i = 0; i < newPosition.length; i++) {
       const curPosition = newPosition[i]
-      quadPoints.push([{
+      quadPoints.push({
         PointX: curPosition.left,
         PointY: curPosition.top
-      }])
-      quadPoints.push([{
+      })
+      quadPoints.push({
         PointX: curPosition.right,
         PointY: curPosition.top
-      }])
-      quadPoints.push([{
+      })
+      quadPoints.push({
         PointX: curPosition.left,
         PointY: curPosition.bottom
-      }])
-      quadPoints.push([{
+      })
+      quadPoints.push({
         PointX: curPosition.right,
         PointY: curPosition.bottom
-      }])
+      })
 
       quadPointsX.push([...[curPosition.left, curPosition.right, curPosition.left, curPosition.right]])
       quadPointsY.push([...[curPosition.top, curPosition.top, curPosition.bottom, curPosition.bottom]])
@@ -277,16 +277,16 @@ class MarkupAnnotation {
     const annotationData = {
       operate: "add-annot",
       type: this.tool,
-      page: startPageNum - 1,
+      pageIndex: startPageNum - 1,
       transparency: 1,
       quadPoints,
       quadPointsX,
       quadPointsY,
       rect: {
-        Left: left,
-        Bottom: bottom,
-        Right: right,
-        Top: top,
+        left,
+        bottom,
+        right,
+        top,
       },
       color: this.color,
       content: content || undefined

packages/core/src/markup/text_annotation.js

@@ -1,7 +1,8 @@
 import BaseAnnotation from '../annotation/base'
-import { onClickOutside } from '../ui_utils'
+import { hexToRgb, onClickOutside } from '../ui_utils'
 import { createSvg } from '../annotation/utils'
 import { getActualPoint } from '../annotation/utils'
+import Color from '../color';
 
 class TextAnnotation extends BaseAnnotation {
   constructor ({
@@ -36,22 +37,30 @@ class TextAnnotation extends BaseAnnotation {
 
   render () {
     const annotation = this.annotation
+    const scale = this.scale
 
     const { start, end } = this.getActualRect(
       this.viewport,
-      this.scale
+      scale
     )
+
+    if (typeof annotation.color === 'string' && annotation.color.startsWith("#")) {
+      annotation.color = hexToRgb(annotation.color)
+    }
+    const { R, G, B } = annotation.color
+    annotation.color = new Color(R, G, B)
+
     const rect = this.calculate(start, end)
 
     const quadPoints = annotation.quadPoints
     if (!quadPoints) return
 
     let positionArray = []
-    for (let i = 0; (i + 4) < quadPoints.length; i+=4) {
-      const left = parseInt(quadPoints[0].PointX * scale, 10)
-      const top = parseInt(quadPoints[0].PointY * scale, 10)
-      const width = parseInt(quadPoints[1].PointX * scale - quadPoints[0].PointX * scale, 10)
-      const height = parseInt(quadPoints[2].PointY * scale - quadPoints[0].PointY * scale, 10)
+    for (let i = 0; (i + 3) < quadPoints.length; i+=4) {
+      const left = parseInt(quadPoints[i].PointX * scale, 10)
+      const top = parseInt(quadPoints[i].PointY * scale, 10)
+      const width = parseInt(quadPoints[i + 1].PointX * scale - quadPoints[i].PointX * scale, 10)
+      const height = parseInt(quadPoints[i + 2].PointY * scale - quadPoints[i].PointY * scale, 10)
       positionArray.push({
         left,
         top,
@@ -125,7 +134,7 @@ class TextAnnotation extends BaseAnnotation {
 
   getActualRect (viewport, s) {
     const annotation = this.annotation
-    const { Left: x1, Top: y1, Right: x2, Bottom: y2 } = annotation.rect
+    const { left: x1, top: y1, right: x2, bottom: y2 } = annotation.rect
 
     const start = getActualPoint(
       {
@@ -244,7 +253,7 @@ class TextAnnotation extends BaseAnnotation {
         left: currentPositionArray.left + 'px',
         width: currentPositionArray.width + 'px',
         height: currentPositionArray.height + 'px',
-        backgroundColor: annotation.color
+        backgroundColor: annotation.color.getColor()
       })
       markupContainer.append(container)
     }
@@ -271,7 +280,7 @@ class TextAnnotation extends BaseAnnotation {
         left: currentPositionArray.left + 'px',
         width: currentPositionArray.width + 'px',
         height: currentPositionArray.height + 'px',
-        borderBottom: '2px solid ' + annotation.color
+        borderBottom: '2px solid ' + annotation.color.getColor()
       })
       markupContainer.append(container)
     }
@@ -308,7 +317,7 @@ class TextAnnotation extends BaseAnnotation {
         height: '5px',
         left: '0px',
         bottom: '1px',
-        background: `radial-gradient(ellipse, transparent, transparent 8px, ${annotation.color} 9px, ${annotation.color} 10px, transparent 11px)`,
+        background: `radial-gradient(ellipse, transparent, transparent 8px, ${annotation.color.getColor()} 9px, ${annotation.color.getColor()} 10px, transparent 11px)`,
         backgroundSize: '22px 26px',
         backgroundRepeat: 'repeat-x'
       })
@@ -319,7 +328,7 @@ class TextAnnotation extends BaseAnnotation {
         height: '5px',
         left: '11px',
         bottom: '-2px',
-        background: `radial-gradient(ellipse, transparent, transparent 8px, ${annotation.color} 9px, ${annotation.color} 10px, transparent 11px)`,
+        background: `radial-gradient(ellipse, transparent, transparent 8px, ${annotation.color.getColor()} 9px, ${annotation.color.getColor()} 10px, transparent 11px)`,
         backgroundSize: '22px 26px',
         backgroundPosition: '0px -22px',
         backgroundRepeat: 'repeat-x'
@@ -361,7 +370,7 @@ class TextAnnotation extends BaseAnnotation {
         width: '100%',
         height: '2px',
         transform: 'translateY(-50%)',
-        backgroundColor: annotation.color
+        backgroundColor: annotation.color.getColor()
       })
       container.append(strikeout)
       markupContainer.append(container)

packages/core/src/ui_utils.js

@@ -1656,6 +1656,19 @@ const toDateObject = (input) => {
   return new Date(Date.UTC(year, month, day, hour, minute, second));
 }
 
+export function hexToRgb(hexColor) {
+  const hex = hexColor.slice(1); // 去除 "#" 符号
+  const bigint = parseInt(hex, 16);
+  const R = (bigint >> 16) & 255;
+  const G = (bigint >> 8) & 255;
+  const B = bigint & 255;
+  return {
+    R,
+    G,
+    B
+  }
+}
+
 
 export {
   apiPageLayoutToViewerModes,

packages/core/src/worker/compdfkit_worker.js

@@ -2,10 +2,11 @@ importScripts("/lib/ComPDFkit.js")
 
 import Color from '../color';
 import { parseAdobePDFTimestamp, roundToDecimalPlaces } from '../ui_utils';
-import { AnnotationType } from '../../constants'
+import { AnnotationType, LineTypeString } from '../../constants'
 
 let ComPDFKitJS = {}
 let DataArray = []
+let LineType = {}
 let BorderStyle = {}
 let PageSize = {}
 let Rect = {}
@@ -103,10 +104,10 @@ class CPDFWorker {
     })
 
     messageHandler.on('GetAnnotText', (data) => {
-      const { page, annotPtr } = data
+      const { pagePtr, annotPtr } = data
 
       Rect = {}
-      Module._GetAnnotRect(page, annotPtr)
+      Module._GetAnnotRect(pagePtr, annotPtr)
       const rect = {
         left: roundToDecimalPlaces(Rect.Left),
         top: roundToDecimalPlaces(Rect.Top),
@@ -139,10 +140,10 @@ class CPDFWorker {
     })
 
     messageHandler.on('GetAnnotLink', (data) => {
-      const { page, annotPtr } = data
+      const { pagePtr, annotPtr } = data
       
       Rect = {}
-      Module._GetAnnotRect(page, annotPtr)
+      Module._GetAnnotRect(pagePtr, annotPtr)
       const rect = {
         left: roundToDecimalPlaces(Rect.Left),
         top: roundToDecimalPlaces(Rect.Top),
@@ -174,17 +175,17 @@ class CPDFWorker {
     })
 
     messageHandler.on('GetAnnotFreeText', (data) => {
-      const { page, annotPtr } = data
+      const { pagePtr, annotPtr } = data
       
       Rect = {}
-      Module._GetAnnotRect(page, annotPtr)
+      Module._GetAnnotRect(pagePtr, annotPtr)
       const rect = {
         left: roundToDecimalPlaces(Rect.Left),
         top: roundToDecimalPlaces(Rect.Top),
         right: roundToDecimalPlaces(Rect.Right),
         bottom: roundToDecimalPlaces(Rect.Bottom)
       }
-
+      debugger
       const rawContent = Module._GetAnnotContent(annotPtr)
       const content = UTF8ToString(rawContent)
       const rawCreateDate = Module._GetAnnotCreationDate(annotPtr)
@@ -209,10 +210,10 @@ class CPDFWorker {
     })
 
     messageHandler.on('GetAnnotLine', (data) => {
-      const { page, annotPtr } = data
-      
+      const { pagePtr, annotPtr } = data
+
       Rect = {}
-      Module._GetAnnotRect(page, annotPtr)
+      Module._GetAnnotRect(pagePtr, annotPtr)
       const rect = {
         left: roundToDecimalPlaces(Rect.Left),
         top: roundToDecimalPlaces(Rect.Top),
@@ -223,31 +224,45 @@ class CPDFWorker {
       const rawContent = Module._GetAnnotContent(annotPtr)
       const content = UTF8ToString(rawContent)
       const rawCreateDate = Module._GetAnnotCreationDate(annotPtr)
-      const createDate = parseAdobePDFTimestamp(UTF8ToString(rawCreateDate))
+      const date = UTF8ToString(rawCreateDate)
+      const createDate = date && parseAdobePDFTimestamp(date)
 
-      FontDa = {}
-      Module._GetAnnotFont(annotPtr)
+      const borderWidth = Module._GetAnnotBorderWidth(annotPtr)
 
       RGBColor = {}
+      const borderColor = {}
       Module._GetAnnotRGBColor(annotPtr)
       for (key in RGBColor) {
-        RGBColor[key] = roundToDecimalPlaces(RGBColor[key] * 255)
+        borderColor[key] = roundToDecimalPlaces(RGBColor[key] * 255)
       }
 
+      const transparency = Module._GetAnnotTransparency(annotPtr)
+
+      LineType = {}
+      Module._GetLineType(annotPtr)
+
+      LinePoint = {}
+      Module._GetLinePoint(pagePtr, annotPtr)
+      const linePoints = [LinePoint.StartPointX, LinePoint.StartPointY, LinePoint.EndPointX, LinePoint.EndPointY]
+
       return {
         content,
         createDate,
         rect,
-        color: RGBColor,
-        font: FontDa.fontSize
+        borderColor,
+        borderWidth,
+        linePoints,
+        transparency,
+        tail: LineTypeString[LineType.Tail],
+        head: LineTypeString[LineType.Head]
       }
     })
 
     messageHandler.on('GetAnnotSquare', (data) => {
-      const { page, annotPtr } = data
+      const { pagePtr, annotPtr } = data
 
       Rect = {}
-      Module._GetAnnotRect(page, annotPtr)
+      Module._GetAnnotRect(pagePtr, annotPtr)
       const rect = {
         left: roundToDecimalPlaces(Rect.Left),
         top: roundToDecimalPlaces(Rect.Top),
@@ -259,37 +274,41 @@ class CPDFWorker {
       const content = UTF8ToString(rawContent)
       const rawCreateDate = Module._GetAnnotCreationDate(annotPtr)
       const createDate = parseAdobePDFTimestamp(UTF8ToString(rawCreateDate))
-      FontDa = {}
-      Module._GetAnnotFont(annotPtr)
 
       const borderWidth = Module._GetAnnotBorderWidth(annotPtr)
 
-      BorderStyle = {}
-      Module._GetAnnotBorderStyle(annotPtr)
+      RGBColor = {}
+      const fillColor = {}
+      Module._GetAnnotFilledRGBColor(annotPtr)
+      for (key in RGBColor) {
+        fillColor[key] = roundToDecimalPlaces(RGBColor[key] * 255)
+      }
 
       RGBColor = {}
+      const borderColor = {}
       Module._GetAnnotRGBColor(annotPtr)
       for (key in RGBColor) {
-        RGBColor[key] = roundToDecimalPlaces(RGBColor[key] * 255)
+        borderColor[key] = roundToDecimalPlaces(RGBColor[key] * 255)
       }
 
-      const color = RGBColor
+      const transparency = Module._GetAnnotTransparency(annotPtr)
+
       return {
         content,
         createDate,
         rect,
-        color,
-        font: FontDa.fontSize,
+        fillColor,
         borderWidth,
-        BorderStyle: BorderStyle
+        borderColor,
+        transparency
       }
     })
 
     messageHandler.on('GetAnnotCircle', (data) => {
-      const { page, annotPtr } = data
+      const { pagePtr, annotPtr } = data
       
       Rect = {}
-      Module._GetAnnotRect(page, annotPtr)
+      Module._GetAnnotRect(pagePtr, annotPtr)
       const rect = {
         left: roundToDecimalPlaces(Rect.Left),
         top: roundToDecimalPlaces(Rect.Top),
@@ -305,26 +324,40 @@ class CPDFWorker {
       FontDa = {}
       Module._GetAnnotFont(annotPtr)
 
+      const borderWidth = Module._GetAnnotBorderWidth(annotPtr)
+
       RGBColor = {}
+      const fillColor = {}
+      Module._GetAnnotFilledRGBColor(annotPtr)
+      for (key in RGBColor) {
+        fillColor[key] = roundToDecimalPlaces(RGBColor[key] * 255)
+      }
+
+      RGBColor = {}
+      const borderColor = {}
       Module._GetAnnotRGBColor(annotPtr)
       for (key in RGBColor) {
-        RGBColor[key] = roundToDecimalPlaces(RGBColor[key] * 255)
+        borderColor[key] = roundToDecimalPlaces(RGBColor[key] * 255)
       }
 
+      const transparency = Module._GetAnnotTransparency(annotPtr)
+
       return {
         content,
         createDate,
         rect,
-        color: RGBColor,
-        font: FontDa.fontSize
+        fillColor,
+        borderWidth,
+        borderColor,
+        transparency
       }
     })
     
     messageHandler.on('GetAnnotPolygon', (data) => {
-      const { page, annotPtr } = data
-      
+      const { pagePtr, annotPtr } = data
+
       Rect = {}
-      Module._GetAnnotRect(page, annotPtr)
+      Module._GetAnnotRect(pagePtr, annotPtr)
       const rect = {
         left: roundToDecimalPlaces(Rect.Left),
         top: roundToDecimalPlaces(Rect.Top),
@@ -356,10 +389,10 @@ class CPDFWorker {
     })
     
     messageHandler.on('GetAnnotPolyline', (data) => {
-      const { page, annotPtr } = data
+      const { pagePtr, annotPtr } = data
       
       Rect = {}
-      Module._GetAnnotRect(page, annotPtr)
+      Module._GetAnnotRect(pagePtr, annotPtr)
       const rect = {
         left: roundToDecimalPlaces(Rect.Left),
         top: roundToDecimalPlaces(Rect.Top),
@@ -391,10 +424,10 @@ class CPDFWorker {
     })
     
     messageHandler.on('GetAnnotHighlight', (data) => {
-      const { page, annotPtr } = data
+      const { pagePtr, annotPtr } = data
       
       Rect = {}
-      Module._GetAnnotRect(page, annotPtr)
+      Module._GetAnnotRect(pagePtr, annotPtr)
       const rect = {
         left: roundToDecimalPlaces(Rect.Left),
         top: roundToDecimalPlaces(Rect.Top),
@@ -407,9 +440,6 @@ class CPDFWorker {
       const rawCreateDate = Module._GetAnnotCreationDate(annotPtr)
       const createDate = parseAdobePDFTimestamp(UTF8ToString(rawCreateDate))
 
-      FontDa = {}
-      Module._GetAnnotFont(annotPtr)
-
       RGBColor = {}
       Module._GetAnnotRGBColor(annotPtr)
       for (key in RGBColor) {
@@ -417,23 +447,22 @@ class CPDFWorker {
       }
 
       InkPointArray = []
-      Module._GetQuadPoints(page, annotPtr)
+      Module._GetQuadPoints(pagePtr, annotPtr)
 
       return {
         content,
         createDate,
         rect,
         color: RGBColor,
-        font: FontDa.fontSize,
         quadPoints: InkPointArray
       }
     })
     
     messageHandler.on('GetAnnotUnderline', (data) => {
-      const { page, annotPtr } = data
+      const { pagePtr, annotPtr } = data
       
       Rect = {}
-      Module._GetAnnotRect(page, annotPtr)
+      Module._GetAnnotRect(pagePtr, annotPtr)
       const rect = {
         left: roundToDecimalPlaces(Rect.Left),
         top: roundToDecimalPlaces(Rect.Top),
@@ -446,28 +475,29 @@ class CPDFWorker {
       const rawCreateDate = Module._GetAnnotCreationDate(annotPtr)
       const createDate = parseAdobePDFTimestamp(UTF8ToString(rawCreateDate))
 
-      FontDa = {}
-      Module._GetAnnotFont(annotPtr)
       RGBColor = {}
       Module._GetAnnotRGBColor(annotPtr)
       for (key in RGBColor) {
         RGBColor[key] = roundToDecimalPlaces(RGBColor[key] * 255)
       }
 
+      InkPointArray = []
+      Module._GetQuadPoints(pagePtr, annotPtr)
+
       return {
         content,
         createDate,
         rect,
         color: RGBColor,
-        font: FontDa.fontSize
+        quadPoints: InkPointArray
       }
     })
     
     messageHandler.on('GetAnnotSquiggly', (data) => {
-      const { page, annotPtr } = data
+      const { pagePtr, annotPtr } = data
       
       Rect = {}
-      Module._GetAnnotRect(page, annotPtr)
+      Module._GetAnnotRect(pagePtr, annotPtr)
       const rect = {
         left: roundToDecimalPlaces(Rect.Left),
         top: roundToDecimalPlaces(Rect.Top),
@@ -480,29 +510,29 @@ class CPDFWorker {
       const rawCreateDate = Module._GetAnnotCreationDate(annotPtr)
       const createDate = parseAdobePDFTimestamp(UTF8ToString(rawCreateDate))
 
-      FontDa = {}
-      Module._GetAnnotFont(annotPtr)
-
       RGBColor = {}
       Module._GetAnnotRGBColor(annotPtr)
       for (key in RGBColor) {
         RGBColor[key] = roundToDecimalPlaces(RGBColor[key] * 255)
       }
 
+      InkPointArray = []
+      Module._GetQuadPoints(pagePtr, annotPtr)
+
       return {
         content,
         createDate,
         rect,
         color: RGBColor,
-        font: FontDa.fontSize
+        quadPoints: InkPointArray
       }
     })
     
     messageHandler.on('GetAnnotStrikeout', (data) => {
-      const { page, annotPtr } = data
+      const { pagePtr, annotPtr } = data
       
       Rect = {}
-      Module._GetAnnotRect(page, annotPtr)
+      Module._GetAnnotRect(pagePtr, annotPtr)
       const rect = {
         left: roundToDecimalPlaces(Rect.Left),
         top: roundToDecimalPlaces(Rect.Top),
@@ -515,29 +545,29 @@ class CPDFWorker {
       const rawCreateDate = Module._GetAnnotCreationDate(annotPtr)
       const createDate = parseAdobePDFTimestamp(UTF8ToString(rawCreateDate))
 
-      FontDa = {}
-      Module._GetAnnotFont(annotPtr)
-
       RGBColor = {}
       Module._GetAnnotRGBColor(annotPtr)
       for (key in RGBColor) {
         RGBColor[key] = roundToDecimalPlaces(RGBColor[key] * 255)
       }
 
+      InkPointArray = []
+      Module._GetQuadPoints(pagePtr, annotPtr)
+
       return {
         content,
         createDate,
         rect,
         color: RGBColor,
-        font: FontDa.fontSize
+        quadPoints: InkPointArray
       }
     })
     
     messageHandler.on('GetAnnotStamp', (data) => {
-      const { page, annotPtr } = data
-      
+      const { pagePtr, annotPtr } = data
+
       Rect = {}
-      Module._GetAnnotRect(page, annotPtr)
+      Module._GetAnnotRect(pagePtr, annotPtr)
       const rect = {
         left: roundToDecimalPlaces(Rect.Left),
         top: roundToDecimalPlaces(Rect.Top),
@@ -586,41 +616,29 @@ class CPDFWorker {
       return { imageArray }
     })
 
-    messageHandler.on('SetAnnotRect', (data) => {
-      const { ptr, annotPtr, rect } = data
-      const { left, right, bottom, top } = rect
-
-      const result = Module._SetAnnotRect(ptr, annotPtr, left, right, bottom, top)
-      return result
-    })
-
-    messageHandler.on('SetAnnotContent', (data) => {
-      const { annotPtr, content: rawContent } = data
-      
-      const content = stringToNewUTF8(rawContent)
-      const result = Module._SetAnnotContent(annotPtr, content)
-      return result
-    })
-
-    messageHandler.on('SetAnnotRGBColor', (data) => {
-      const { annotPtr, color } = data
-      const { R, G, B } = color
-
-      const result = Module._SetAnnotRGBColor(annotPtr, R, G, B)
-      return result
-    })
-
-    messageHandler.on('SetAnnotTransparency', (data) => {
-      const { annotPtr, transparency } = data
-
-      const result = Module._SetAnnotTransparency(annotPtr, transparency)
-      return result
+    messageHandler.on('EditAnnotation', (data) => {
+      const { annotation } = data
+      debugger
+      if (annotation.rect) {
+        setAnnotRect(annotation)
+      }
+      if (annotation.color) {
+        setAnnotRGBColor(annotation)
+      }
+      if (annotation.transparency) {
+        setAnnotTransparency(annotation)
+      }
+      if (annotation.content) {
+        setAnnotContent(annotation)
+      }
+      if (annotation.linePoints) {
+        setLinePoint(annotation)
+      }
     })
 
     messageHandler.on('CreateAnnotation', (data) => {
-      console.log('CreateAnnotation')
       const { doc, pagePtr, annotation } = data
-      createAnnotation(doc, pagePtr, annotation)
+      return createAnnotation(doc, pagePtr, annotation)
     })
 
     messageHandler.on('SaveDocumentByStream', (data) => {
@@ -671,21 +689,64 @@ function RenderPageBitmapWithMatrix(data) {
 
 function createAnnotation(doc, pagePtr, annotation) {
   const typeInt = AnnotationType[annotation.type.toUpperCase()]
-  console.log('CreateAnnotation')
+
+  const annotPtr = Module._CreateAnnot(doc, pagePtr, typeInt)
+
+  const { left, right, top, bottom } = annotation.rect
+  const createRectResult = Module._SetAnnotRect(pagePtr, annotPtr, left, right, bottom, top)
+  console.log(createRectResult)
+  const { borderColor, lineWidth } = annotation
+
   switch (typeInt) {
     case AnnotationType.HIGHLIGHT:
-      const annotPtr = Module._CreateAnnot(doc, pagePtr, typeInt)
-      const { left, right, top, bottom } = annotation.rect
-      const createRectReslut = Module._SetAnnotRect(pagePtr, annotPtr, left, right, bottom, top)
-      console.log(createRectReslut)
-
-      const createColorReslut = Module._SetAnnotRGBColor(annotPtr, 1, 0, 0)
+      const createColorResult = Module._SetAnnotRGBColor(annotPtr, 1, 0, 0)
+      console.log(createColorResult)
 
       const createContentReslut = Module._SetAnnotContent(annotPtr, stringToNewUTF8(annotation.content))
       console.log(createContentReslut)
-      const createQuadReslut = Module._SetQuadPoints(pagePtr, annotPtr, annotation.quadPoints, annotation.quadPoints.length)
-      console.log(createQuadReslut)
+      const { quadPointsX, quadPointsY } = annotation
+      const length = quadPointsX.length
+      let pointXBytes = length * 4
+      let pointXPtr = _malloc(pointXBytes)
+      for (var i = 0; i < length; i++) {
+        Module.HEAP32[pointXPtr / 4 + i] = 0
+      }
+
+      let pointYBytes = length * 4
+      let pointYPtr = _malloc(pointYBytes)
+      for (var i = 0; i < length; i++) {
+        Module.HEAP32[pointYPtr / 4 + i] = 0
+      }
+
+      const createQuadResult = Module._SetQuadPoints(pagePtr, annotPtr, pointXPtr, pointYPtr, length)
+      console.log(createQuadResult)
       break
+    case AnnotationType.TEXT:
+    case AnnotationType.LINK:
+    case AnnotationType.FREETEXT:
+    case AnnotationType.LINE:
+      const { tail, linePoints } = annotation
+      if (tail) {
+        Module._SetLineType(annotPtr, 0, 1)
+      }
+      const result = Module._SetLinePoint(pagePtr, annotPtr, linePoints[0], linePoints[1], linePoints[2], linePoints[3])
+      Module._SetAnnotRGBColor(annotPtr, borderColor.R / 255, borderColor.G / 255, borderColor.B / 255)
+      Module._SetAnnotBorderWidth(annotPtr, lineWidth)
+      return annotPtr
+    case AnnotationType.SQUARE:
+      Module._SetAnnotRGBColor(annotPtr, borderColor.R / 255, borderColor.G / 255, borderColor.B / 255)
+      Module._SetAnnotBorderWidth(annotPtr, lineWidth)
+      return annotPtr
+    case AnnotationType.CIRCLE:
+      Module._SetAnnotRGBColor(annotPtr, borderColor.R / 255, borderColor.G / 255, borderColor.B / 255)
+      Module._SetAnnotBorderWidth(annotPtr, lineWidth)
+      return annotPtr
+    case AnnotationType.HIGHLIGHT:
+    case AnnotationType.UNDERLINE:
+    case AnnotationType.SQUIGGLY:
+    case AnnotationType.STRIKEOUT:
+    case AnnotationType.STAMP:
+    case AnnotationType.INK:
   }
 }
 
@@ -701,3 +762,41 @@ function saveDocumentByStream(doc) {
   DataArray=[]
   return pdfData
 }
+
+function setAnnotRect(data) {
+  const { pagePtr, annotPtr, rect } = data
+  const { left, right, bottom, top } = rect
+
+  const result = Module._SetAnnotRect(pagePtr, annotPtr, left, right, bottom, top)
+  return result
+}
+
+function setAnnotContent(data) {
+  const { annotPtr, content: rawContent } = data
+      
+  const content = stringToNewUTF8(rawContent)
+  const result = Module._SetAnnotContent(annotPtr, content)
+  return result
+}
+
+function setAnnotRGBColor(data) {
+  const { annotPtr, color } = data
+  const { R, G, B } = color
+
+  const result = Module._SetAnnotRGBColor(annotPtr, R, G, B)
+  return result
+}
+
+function setAnnotTransparency(data) {
+  const { annotPtr, transparency } = data
+
+  const result = Module._SetAnnotTransparency(annotPtr, transparency)
+  return result
+}
+
+function setLinePoint(data) {
+  const { pagePtr, annotPtr, linePoints } = data
+
+  const result = Module._SetLinePoint(pagePtr, annotPtr, linePoints[0], linePoints[1], linePoints[2], linePoints[3])
+  return result
+}

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

@@ -8,7 +8,7 @@
             <span>{{ pageAnnotations.pageAnnotationsCount }}</span>
           </div>
           <template v-for="(item) in pageAnnotations.annotations">
-            <div v-if="!item.isDelete && item.type !== 'link'" class="annotation-item" @click="goToPage(item.page)">
+            <div v-if="!item.isDelete && item.type !== 'link'" class="annotation-item" @click="goToPage(item.pageIndex)">
               <div class="item-header">
                 <Highlight v-if="item.type === 'highlight'" />
                 <Squiggle v-else-if="item.type === 'squiggly'" />
@@ -22,7 +22,7 @@
                 <Text v-else-if="item.type === 'freetext'" />
                 <Note v-else-if="item.type === 'text'" />
                 <Stamp v-else-if="item.type === 'image' || item.type === 'stamp'" />
-                <span>{{ dayjs(item.date).format('DD/MM/YYYY HH:mm:ss') }}</span>
+                <span>{{ dayjs(item.createDate).format('DD/MM/YYYY HH:mm:ss') }}</span>
               </div>
               <div v-if="item.contents || item.content" class="item-content">{{ item.contents || item.content }}</div>
             </div>