zhui-plus 1.0.0 → 1.0.10

package/packages/components/fileViewer/src/liteofd/elements/SignatureElement.ts

@@ -0,0 +1,231 @@
+import { XmlData } from "../ofdData"
+import * as parser from "../parser"
+import { AttributeKey, OFD_KEY } from "../attrType"
+import { convertToBox, convertToDpi } from "../utils/utils"
+import { OfdDocument } from "../ofdDocument"
+import PromiseCapability from "../promiseCapability"
+import { OfdRender } from "../ofdRender"
+
+/**
+ * 签名组件
+ */
+export class SignatureElement {
+
+	private nodeData: XmlData | any// 最外层的svg的数据
+	private ofdPage: XmlData // 当前签名所对应的页面数据
+	private ofdDocument: OfdDocument // 能拿到图片资源的公共资源数据节点
+	private viewContainer: HTMLDivElement | SVGSVGElement | any // svg的包裹的，每个组件都有一个svg包裹，比如path带有一个，而text则是svg包裹text，然后text包裹tspan这样子
+	private viewContainerStyle = "position: absolute;overflow: visible; cursor: pointer;" // 外层的style
+	private boundaryBox: {
+		x: number,
+		y: number,
+		width: number,
+		height: number,
+	} | any
+	private signZIndex = 9998 // 最高的
+	private mediaNodeList: XmlData[] |any // 多媒体节点的数组
+	private sealObject: any // 签名数据
+
+	// 初始化传入xmldata构建一个path的数据
+	constructor(ofdDocument: OfdDocument, ofdPage: XmlData, nodeData: XmlData) {
+		this.ofdPage = ofdPage
+		this.ofdDocument = ofdDocument
+		this.nodeData = nodeData
+		this.sealObject = nodeData.sealObject
+
+		if (this.sealObject) {
+			this.initViewContainer()
+			this.addClickListener()
+		}
+	}
+
+	private initViewContainer() {
+		if (this.sealObject.type === "ofd") {
+			this.#addOFDSignature(this.nodeData.sealData)
+		} else if (this.sealObject.type === "png") {
+			this.#addImageSvgAsync(this.nodeData)
+		}
+	}
+
+	/**
+	 * 渲染签章
+	 * @param ofdDocument 对于ofd类型的签名，需要渲染ofd文件
+	 * @private
+	 */
+	#addOFDSignature(ofdDocument: OfdDocument){
+		console.log("render signature ", ofdDocument)
+		// 包含签名数据
+		this.viewContainer = document.createElement("div")
+		this.#addSvgIDAndZIndex()
+		this.#addBoundary(this.nodeData)
+		this.viewContainer.setAttribute("name", "seal_img_div")
+		let sesSignature = this.sealObject.SES_Signature
+		let signedInfo = this.sealObject
+		// this.viewContainer.setAttribute('data-ses-signature', `${JSON.stringify(sesSignature)}`)
+		// this.viewContainer.setAttribute('data-signed-info', `${JSON.stringify(signedInfo)}`)
+		this.viewContainer.setAttribute("style", this.viewContainerStyle)
+
+		// 渲染ofddocument
+		let sealRootContainer = document.createElement("div")
+		let sealRender = new OfdRender(ofdDocument)
+		sealRender.render(sealRootContainer, null)
+		this.viewContainer.appendChild(sealRootContainer)
+	}
+
+	// 添加boundary范围
+	#addBoundary(node: XmlData) {
+		// 每个对应的是一个数组
+		let stampAnnotList:any = parser.findValueByTagName(node, OFD_KEY.StampAnnot)
+		for (let i = 0; i < stampAnnotList.children.length; i++) {
+			let tempData = stampAnnotList.children[i]
+			let pageRefId = parser.findAttributeValueByKey(tempData, AttributeKey.PageRef)
+			if (pageRefId === this.ofdPage.id) {
+				// 查找到页面对应的签名引用
+				let boundaryStr = parser.findAttributeValueByKey(tempData, AttributeKey.Boundary)
+				if (boundaryStr) {
+					this.boundaryBox = convertToBox(boundaryStr)
+
+					let svgStyle = `left: ${this.boundaryBox.x}px;top: ${this.boundaryBox.y}px;
+	width: ${this.boundaryBox.width}px;height: ${this.boundaryBox.height}px;`
+					this.viewContainerStyle += svgStyle
+				}
+				let clip = parser.findAttributeValueByKey(tempData, AttributeKey.Clip)
+				if (clip) {
+					let clipBox = convertToBox(clip)
+					let clipStyle =	`clip: rect(${clipBox.y}px, ${clipBox.width + clipBox.x}px, ${clipBox.height + clipBox.y}px, ${clipBox.x}px);`
+					this.viewContainerStyle += clipStyle
+				}
+				return
+			}
+		}
+
+	}
+
+	#addImageHref(imgData: string, eleSvg: SVGImageElement) {
+		if (imgData) {
+			eleSvg.setAttribute("xlink:href", imgData)
+			eleSvg.setAttribute("href", imgData)
+		}
+	}
+
+	async #addImageSvgAsync(nodeData: XmlData){
+		// 包含签名数据
+		this.viewContainer = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+		this.#addSvgIDAndZIndex()
+		this.#addBoundary(this.nodeData)
+		this.viewContainer.setAttribute("name", "seal_img_div")
+		let sesSignature = this.sealObject.SES_Signature
+		let signedInfo = this.sealObject
+		// this.viewContainer.setAttribute('data-ses-signature', `${JSON.stringify(sesSignature)}`)
+		// this.viewContainer.setAttribute('data-signed-info', `${JSON.stringify(signedInfo)}`)
+		this.viewContainer.setAttribute("style", this.viewContainerStyle)
+
+		let imgData:any = nodeData.sealData
+		let img = document.createElementNS('http://www.w3.org/2000/svg', 'image')
+		img.setAttribute("href", imgData)
+		img.setAttribute("xlink:href", imgData)
+		img.setAttribute('preserveAspectRatio', `none`);
+		img.setAttribute("width", `${this.boundaryBox.width}px`)
+		img.setAttribute("height", `${this.boundaryBox.height}px`)
+		img.setAttribute("opacity", "1")
+
+		this.viewContainer.appendChild(img)
+	}
+
+	getContainerSvg(): HTMLDivElement | SVGSVGElement {
+		return this.viewContainer
+	}
+
+	#addSvgIDAndZIndex() {
+		this.viewContainerStyle += `z-index: ${this.signZIndex};`
+	}
+
+	/**
+	 * 加载图片数据
+	 * @param imgNode 图片的节点数据
+	 * @private
+	 */
+	#loadImageSourceData(imgNode: XmlData): PromiseCapability<string> | any {
+		let imgName = imgNode.value
+		let upperCaseImgName = imgName.toUpperCase() // 这里默认名字是唯一表示图片资源的
+		let loadedPromise = new PromiseCapability()
+		// 查看是否已经加载
+		if(this.ofdDocument.loadedMediaFile.has(upperCaseImgName)) {
+			let imgData = this.ofdDocument.loadedMediaFile.get(upperCaseImgName)
+			loadedPromise.resolve(imgData)
+		} else {
+			let keys = Object.keys(this.ofdDocument.files)
+			for (let i = 0; i < keys.length; i++) {
+				let upperCaseKey = keys[i].toUpperCase()
+				if (upperCaseKey.indexOf(upperCaseImgName) >= 0) {
+					let fileData = this.ofdDocument.files[keys[i]]
+					fileData.async("base64")
+						.then(bytes => {
+							const imgBase64 = 'data:image/png;base64,' + bytes;
+							this.ofdDocument.loadedMediaFile.set(upperCaseImgName, imgBase64)
+							loadedPromise.resolve(imgBase64)
+						})
+						.catch(err => {
+							loadedPromise.reject(err)
+						})
+					break;
+				}
+			}
+		}
+
+		return loadedPromise
+	}
+
+	/**
+	 * 加载图片数据
+	 * @param nodeData
+	 * @private
+	 */
+	#findImageMediaData(nodeData: XmlData): PromiseCapability<string> | null {
+		let imgResourceID = parser.findAttributeValueByKey(nodeData, AttributeKey.ResourceID)
+		if (imgResourceID) {
+			let mediaNodeRoot = this.mediaNodeList[0]
+			if (mediaNodeRoot) {
+				let firstMediaNode = mediaNodeRoot.children[0]
+				let isSingle = isNaN(Number(firstMediaNode.tagName))
+				let tempNodeList:any = []
+				if (isSingle) {
+					tempNodeList = [mediaNodeRoot]
+				} else {
+					tempNodeList = mediaNodeRoot.children
+				}
+
+				for (let i = 0; i < tempNodeList.length; i++) {
+					let mediaNode = tempNodeList[i]
+					let mediaId = parser.findAttributeValueByKey(mediaNode, AttributeKey.ID)
+					if (imgResourceID === mediaId) {
+						// 拿到图片数据
+						let mediaFileNode = parser.findValueByTagName(mediaNode, OFD_KEY.MediaFile)
+						if (mediaFileNode) {
+							let mediaFilePromise = this.#loadImageSourceData(mediaFileNode)
+							return mediaFilePromise
+						}
+					}
+				}
+			}
+		}
+		return null
+	}
+
+	private addClickListener() {
+		if (this.viewContainer) {
+			this.viewContainer.addEventListener('click', (event) => {
+				event.stopPropagation() // 阻止事件冒泡
+				const customEvent = new CustomEvent('signature-element-click', {
+					detail: {
+						nodeData: this.nodeData,
+						sealObject: this.sealObject
+					},
+					bubbles: true,
+					cancelable: true
+				})
+				this.viewContainer.dispatchEvent(customEvent)
+			})
+		}
+	}
+}

package/packages/components/fileViewer/src/liteofd/elements/TextSvg.ts

@@ -0,0 +1,235 @@
+import { BaseSvg } from "./BaseSvg"
+import { XmlData } from "../ofdData"
+import * as parser from "../parser"
+import { AttributeKey, OFD_KEY } from "../attrType"
+import { convertToBox, convertToDpi } from "../utils/utils"
+import { createTextSpan, getCTM, getFontSize, parseColor } from "../utils/elementUtils"
+import { OfdDocument } from "../ofdDocument"
+import { CommonFont } from "../utils/commonFont"
+import { convertNonStandardFont, normalizeFontName } from "../utils/ofdUtils"
+
+/**
+ * 文本组件
+ */
+export class TextSvg extends BaseSvg {
+
+	private nodeData: XmlData // 最外层的svg的数据
+	private svgContainer: SVGElement | any // svg的包裹的，每个组件都有一个svg包裹，比如path带有一个，而text则是svg包裹text，然后text包裹tspan这样子
+	private svgContainerStyle = "position: absolute;overflow: visible;" // 外层svg的style
+	private boundaryBox: {
+		x: number,
+		y: number,
+		width: number,
+		height: number,
+	} | any
+	private textId = "" // 路径的id
+	private ofdDocument: OfdDocument
+	private textStyle: string = ""
+
+	// 初始化传入xmldata构建一个path的数据
+	constructor(ofdDocument: OfdDocument, nodeData: XmlData) {
+		super()
+		this.ofdDocument = ofdDocument
+		this.nodeData = nodeData
+		this.textId = parser.findAttributeValueByKey(nodeData, AttributeKey.ID)
+		this.#initSvgElement()
+	}
+
+	// 添加boundary范围
+	#addBoundary(node: XmlData) {
+		let boundaryStr = parser.findAttributeValueByKey(node, AttributeKey.Boundary)
+		if (boundaryStr) {
+			this.boundaryBox = convertToBox(boundaryStr)
+
+			let svgStyle = `left: ${this.boundaryBox.x}px;top: ${this.boundaryBox.y}px;
+	width: ${this.boundaryBox.width}px;height: ${this.boundaryBox.height}px;`
+			this.svgContainerStyle += svgStyle
+		}
+	}
+
+	// 添加字体
+	#addFont(node: XmlData, eleSvg: SVGTextElement){
+		// 查找textobject的字体的id
+		let fontID = parser.findAttributeValueByKey(node, AttributeKey.FONT)
+		if (fontID) {
+			// let ofdFontList = parser.findValueByTagName(this.ofdDocument.publicRes, OFD_KEY.Font)
+			let allFontList = parser.findAllNodesByTagName(this.ofdDocument.publicRes, OFD_KEY.Font)
+			// 根据字体id查找对应publicres的font数据
+			// let findedFont = parser.findNodeByAttributeKeyValue(fontID, AttributeKey.ID, ofdFontList!!)
+			// 从字体列表中查找字体
+			let findedFont = parser.findNodeByAttributeKeyValueInList(fontID, AttributeKey.ID, allFontList!!)
+			parser.findNodeByAttributeKeyValueWithTagName(fontID, AttributeKey.ID, this.ofdDocument.publicRes, OFD_KEY.Font)
+			if (findedFont) {
+				// 添加字体内容
+				let fontName = parser.findAttributeValueByKey(findedFont, AttributeKey.FontName)
+				let fontFamily = parser.findAttributeValueByKey(findedFont, AttributeKey.FamilyName)
+				if (fontName) {
+					let standardFont = CommonFont[fontName]
+					if (standardFont) {
+						this.textStyle += `font-family: ${standardFont};`
+					} else {
+						fontName = normalizeFontName(fontName)
+						fontName = convertNonStandardFont(fontName)
+						this.textStyle += `font-family: ${fontName};`
+					}
+				} else if (fontFamily) {
+					fontFamily = normalizeFontName(fontFamily)
+					fontFamily = convertNonStandardFont(fontFamily)
+					this.textStyle += `font-family: ${fontFamily};`
+				}
+
+				// 去掉publicres中关于字体的粗细的值的显示，只使用字体文件中的字体渲染
+				// 添加字体粗细
+				let fontWeight = parser.findAttributeValueByKey(findedFont, AttributeKey.Weight)
+				if (fontWeight) {
+					this.textStyle += `font-weight: ${fontWeight};`
+				}
+				let fontBold = parser.findAttributeValueByKey(findedFont, AttributeKey.Bold)
+				if (fontBold) {
+					this.textStyle += `font-weight: bold;`
+				}
+				// 添加字体斜体
+				let fontItalic = parser.findAttributeValueByKey(findedFont, AttributeKey.Italic)
+				if (fontItalic) {
+					this.textStyle += `font-style: italic;`
+				}
+			}
+		}
+	}
+
+	// 给pathsvg添加ctm矩阵
+	#addCTM(nodeData: XmlData, eleSvg: SVGTextElement) {
+		let tempCtm = getCTM(nodeData)
+		tempCtm && eleSvg.setAttribute("transform", tempCtm)
+	}
+
+
+	// 给pathsvg添加ctm矩阵
+	#addTextStyle(nodeData: XmlData) {
+		// 设置字体大小
+		let fontSize = getFontSize(nodeData)
+		this.textStyle = `font-size: ${fontSize}px;`
+		// 设置font-weight
+		let fontWeight = parser.findAttributeValueByKey(nodeData, AttributeKey.Weight)
+		if (fontWeight) {
+			this.textStyle += `font-weight: ${fontWeight};`
+		}
+		// 添加字体颜色
+		this.#addFillColor(nodeData)
+		// 添加stroke颜色
+		this.#addStrokeColor(nodeData)
+		// 添加斜体等
+		let fontItalic = parser.findAttributeValueByKey(nodeData, AttributeKey.Italic)
+		if (fontItalic && JSON.parse(fontItalic)) {
+			this.textStyle += `font-style: italic;`
+		}
+
+		// stroke宽度
+		let lineWidth = parser.findAttributeValueByKey(nodeData, AttributeKey.LineWidth)
+		if (lineWidth) {
+			let lineWidthValue = parseFloat(lineWidth)
+			this.textStyle += `stroke-width: ${convertToDpi(lineWidthValue)}px;`
+		} else {
+			this.textStyle += `stroke-width: 0;`
+		}
+	}
+
+	#addStrokeColor(nodeData: XmlData) {
+		let strokeColorObj = parser.findValueByTagName(nodeData, OFD_KEY.StrokeColor)
+		let strokeColorStr = strokeColorObj && parser.findAttributeValueByKey(strokeColorObj, AttributeKey.Value)
+		if (strokeColorStr) {
+			let strokeColor = parseColor(strokeColorStr)
+			this.textStyle += `stroke: ${strokeColor};`
+		}
+	}
+
+	#addFillColor(nodeData: XmlData) {
+		let fillColorObj = parser.findValueByTagName(nodeData, OFD_KEY.FillColor)
+		let fillColorStr = fillColorObj && parser.findAttributeValueByKey(fillColorObj, AttributeKey.Value)
+		if (fillColorStr) {
+			let fillColor = parseColor(fillColorStr)
+			this.textStyle += `fill: ${fillColor};`
+		}
+	}
+
+	// 给pathsvg添加ctm矩阵
+	#addTextTSpan(nodeData: XmlData, eleSvg: SVGTextElement) {
+		let textCode:any = parser.findValueByTagName(nodeData, OFD_KEY.TextCode)
+		createTextSpan(nodeData, textCode, eleSvg)
+	}
+
+	#addTextSvg(nodeData: XmlData) {
+		let eleSvg = document.createElementNS('http://www.w3.org/2000/svg', 'text')
+		// 添加矩阵变换
+		this.#addCTM(nodeData, eleSvg)
+		// 添加字体颜色和大小
+		this.#addTextStyle(nodeData)
+		// 添加drawparam
+		this.#addDrawParam(nodeData)
+		// 给字体添加字体
+		this.#addFont(nodeData, eleSvg)
+		// 添加字体内容
+		this.#addTextTSpan(nodeData, eleSvg)
+		eleSvg.setAttribute("style", this.textStyle)
+		return eleSvg
+	}
+
+	createContainerSvg(): SVGElement {
+		let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+		svg.setAttribute('version', '1.1')
+
+		this.#addSvgIDAndZIndex(this.nodeData, svg)
+		// 添加外层的boundary
+		this.#addBoundary(this.nodeData)
+		// svg下面添加path
+		let eleSvg = this.#addTextSvg(this.nodeData)
+		svg.appendChild(eleSvg)
+
+		return svg
+	}
+
+	getContainerSvg(): SVGElement {
+		return this.svgContainer
+	}
+
+	#initSvgElement() {
+		this.svgContainer = this.createContainerSvg()
+		this.svgContainer.setAttribute("style", this.svgContainerStyle)
+	}
+
+	#addSvgIDAndZIndex(nodeData: XmlData, svg: SVGSVGElement) {
+		let svgID = parser.findAttributeValueByKey(nodeData, AttributeKey.ID)
+		if (svgID) {
+			svg.setAttribute("SVG_ID", svgID)
+			this.svgContainerStyle += `z-index: ${svgID};`
+		}
+	}
+
+	// 字体文件中暂时去掉drawParam的渲染
+	#addDrawParam(nodeData: XmlData) {
+		let drawParamID = parser.findAttributeValueByKey(nodeData, AttributeKey.DrawParam)
+		if (drawParamID) {
+			let drawParamNode = parser.findNodeByAttributeKeyValue(drawParamID, AttributeKey.ID, this.ofdDocument.publicRes)
+			if (drawParamNode) {
+				// 填充颜色
+				this.#addFillColor(drawParamNode)
+				// 添加线宽度和线条颜色
+				this.#addStrokeColor(drawParamNode)
+				// 添加字体粗细
+				let fontWeight = parser.findAttributeValueByKey(drawParamNode, AttributeKey.Weight)
+				if (fontWeight) {
+					this.textStyle += `font-weight: ${fontWeight};`
+				}
+				let fontBold = parser.findAttributeValueByKey(drawParamNode, AttributeKey.Bold)
+				if (fontBold) {
+					this.textStyle += `font-weight: bold;`
+				}
+				// 添加字体斜体
+				let fontItalic = parser.findAttributeValueByKey(drawParamNode, AttributeKey.Italic)
+				if (fontItalic) {
+					this.textStyle += `font-style: italic;`
+				}
+			}
+		}
+	}
+}

package/packages/components/fileViewer/src/liteofd/elements/ofdAnnotationElement.ts

@@ -0,0 +1,133 @@
+import { XmlData } from "../ofdData"
+import * as parser from "../parser"
+import { ANNOT_TYPE, AttributeKey, OFD_KEY } from "../attrType"
+import { convertToBox, convertToDpi } from "../utils/utils"
+import { OfdDocument } from "../ofdDocument"
+import { AnnotationPathSvg } from "./AnnotationPathSvg"
+import { ImageSvg } from "./ImageSvg"
+
+/**
+ * 注释组件
+ */
+export class OfdAnnotationElement {
+
+
+	private annotData: XmlData // 注释的数据
+	private ofdPage: XmlData // 当前签名所对应的页面数据
+	private ofdDocument: OfdDocument // 能拿到图片资源的公共资源数据节点
+	private viewContainer: HTMLDivElement | SVGSVGElement // svg的包裹的，每个组件都有一个svg包裹，比如path带有一个，而text则是svg包裹text，然后text包裹tspan这样子
+	private viewContainerStyle = "position: absolute;overflow: visible; cursor: pointer;" // 外层的style
+	private viewZIndex = 9999 // 最高的
+	private annotNodeList: XmlData[] = [] // 注释的列表
+
+
+	/**
+	 * 初始化注释组件
+	 * @param ofdDocument 
+	 * @param ofdPage 当前页面数据
+	 * @param viewContainer 页面容器
+	 */
+	constructor(ofdDocument: OfdDocument, ofdPage: XmlData, viewContainer: HTMLDivElement) {
+		this.ofdPage = ofdPage
+		this.ofdDocument = ofdDocument
+		this.annotData = ofdPage.annots!!
+		this.viewContainer = viewContainer
+
+		if (this.annotData) {
+			this.initViewContainer()
+			this.addClickListener()
+		}
+	}
+
+	private initViewContainer() {
+		let annotNode = parser.findValueByTagName(this.annotData, OFD_KEY.Annot)
+		if(annotNode?.children && annotNode.children.length > 0){
+			this.annotNodeList = annotNode.children
+		}
+	}
+
+
+	private addClickListener() {
+		
+	}
+
+	render() {
+		if(this.annotNodeList.length > 0){
+			// 开始渲染注释
+			this.annotNodeList.forEach((annotNode, index) => {
+				console.log(`正在渲染第 ${index + 1} 个注释`, annotNode);
+				this.renderSingleAnnotation(annotNode);
+			});
+		}
+	}
+
+	/**
+	 * 渲染单个注释
+	 * @param annotNode 注释节点
+	 */
+	renderSingleAnnotation(annotNode: XmlData) {
+		let annotType = parser.findAttributeValueByKey(annotNode, AttributeKey.Type)
+		switch (annotType) {
+			case ANNOT_TYPE.Path.value:
+				this.renderPathAnnot(annotNode);
+				break;
+				case ANNOT_TYPE.Highlight.value:
+					this.renderHightLightAnnot(annotNode);
+					break;
+			case ANNOT_TYPE.Stamp.value:
+				this.renderStampAnnot(annotNode);
+				break;
+			default:
+				console.log(`未知的注释类型: ${annotType}`);
+		}
+	}
+
+	/**
+	 * 渲染印章注释
+	 * @param annotNode 注释节点
+	 */
+	renderStampAnnot(annotNode: XmlData) {
+		let stampType = parser.findAttributeValueByKey(annotNode, AttributeKey.Subtype)
+		console.log("stamp subtype", stampType)
+		switch (stampType) {
+			case ANNOT_TYPE.Stamp.subType.Stamp:
+				this.renderStamp(annotNode);
+				break;
+			case ANNOT_TYPE.Stamp.subType.SignatureInFile:
+				this.renderSignatureInFile(annotNode);
+				break;
+		}
+	}
+
+	renderSignatureInFile(annotNode: XmlData) {
+
+	}
+
+
+	renderStamp(annotNode: XmlData) {
+		console.log("render stamp", annotNode)
+		let imgAppearance = parser.findValueByTagName(annotNode, OFD_KEY.Appearance)
+		let imageObj = parser.findValueByTagName(annotNode, OFD_KEY.ImageObject)
+		if(imageObj && imgAppearance){
+			let boundary = parser.findAttributeValueByKey(imgAppearance, AttributeKey.Boundary)
+			if(boundary){
+				parser.setAttributeToNode(imageObj, AttributeKey.Boundary, boundary)
+			}
+
+			let imgSvg = new ImageSvg(this.ofdDocument, imageObj)
+			this.viewContainer.appendChild(imgSvg.getContainerSvg())
+		}
+	}
+
+	private renderPathAnnot(annotNode: XmlData) {
+		// 实现路径注释的渲染逻辑
+		let pathSvg = new AnnotationPathSvg(this.ofdDocument, annotNode)
+		this.viewContainer.appendChild(pathSvg.getContainerSvg())
+	}
+
+	private renderHightLightAnnot(annotNode: XmlData) {
+		// 实现高亮注释的渲染逻辑
+		let pathSvg = new AnnotationPathSvg(this.ofdDocument, annotNode)
+		this.viewContainer.appendChild(pathSvg.getContainerSvg())
+	}
+}