zhui-plus 1.0.0 → 1.0.10

package/packages/components/fileViewer/src/liteofd/layer.ts

@@ -0,0 +1,12 @@
+
+// 层基础类
+import { XmlData } from "./ofdData"
+
+export default abstract class Layer {
+	/**
+	 * 渲染的层的layer数据
+	 * @param data 数据
+	 * @param parent 父组件
+	 */
+	abstract render(data: XmlData, parent: Element)
+}

package/packages/components/fileViewer/src/liteofd/liteOfd.ts

@@ -0,0 +1,185 @@
+import { OfdDocument } from "./ofdDocument"
+import { OfdRender } from "./ofdRender"
+import * as parser from "./parser"
+import { OfdWriter } from "./ofdWriter"
+import { XmlData } from "./ofdData"
+import * as ofdActions from "./ofdActions"
+import { loadLocalDefaultFonts } from "./ofdFont"
+
+/**
+ * LiteOfd 类是一个用于处理 OFD 文件的轻量级库。
+ * 它提供了渲染、导航、缩放、解析和保存 OFD 文档的功能。
+ */
+export default class LiteOfd {
+  private ofdDocument: OfdDocument
+  private ofdRender: OfdRender | null = null
+  private currentScale: number = 1
+  
+  constructor() {
+    this.ofdDocument = new OfdDocument()
+  }
+
+  /**
+   * 渲染 OFD 文档
+   * @param container 可选的自定义容器
+   * @param pageWrapStyle 可选的页面包装样式
+   * @returns 渲染后的 HTMLDivElement
+   */
+  render(container?: HTMLDivElement, pageWrapStyle?: string): HTMLDivElement {
+    this.ofdRender = new OfdRender(this.ofdDocument)
+    const containerDiv = container || document.createElement('div')
+    return this.ofdRender.renderOfdWithCustomDiv(containerDiv, pageWrapStyle)
+  }
+
+  /**
+   * 渲染对应页面
+   * @param pageIndex 页面位置 
+   */
+  renderPage(pageIndex: number, pageWrapStyle?: string){
+    this.ofdRender = new OfdRender(this.ofdDocument)
+    const containerDiv = document.createElement('div')
+    this.ofdRender.renderOfdWithPageIndexWithScale(pageIndex, containerDiv, pageWrapStyle, 2)
+    return containerDiv
+  }
+
+  /**
+   * 获取当前页码
+   */
+  get currentPage(): number {
+    return this.ofdRender?.currentPageIndex || 1
+  }
+
+  /**
+   * 获取总页数
+   */
+  get totalPages(): number {
+    return this.ofdDocument.pages?.length || 0
+  }
+
+  /**
+   * 跳转到指定页面
+   * @param pageIndex 目标页码
+   */
+  goToPage(pageIndex: number): void {
+    if (!this.ofdRender) return
+
+    let targetPage = Math.max(1, Math.min(pageIndex, this.totalPages))
+    this.ofdRender.currentPageIndex = targetPage
+
+    const pageId = `ofd-page-${targetPage}`
+    const pageElement = document.getElementById(pageId)
+    if (pageElement) {
+      pageElement.scrollIntoView({ behavior: 'smooth' })
+    }
+  }
+
+  /**
+   * 跳转到下一页
+   */
+  nextPage(): void {
+    this.goToPage(this.currentPage + 1)
+  }
+
+  /**
+   * 跳转到上一页
+   */
+  prevPage(): void {
+    this.goToPage(this.currentPage - 1)
+  }
+
+  /**
+   * 缩放文档
+   * @param scale 缩放比例（0.1 到 5 之间）
+   */
+  zoom(scale: number): void {
+    if (this.ofdRender) {
+      const newScale = Math.max(0.1, Math.min(scale, 5))
+      this.ofdRender.applyZoom(this.ofdRender.rootContainer, newScale)
+    }
+  }
+
+    /**
+   * 放大文档
+   * @param step 放大步长，默认为 0.1
+   */
+	zoomIn(step: number = 0.1): void {
+		this.zoom(this.currentScale + step)
+	  }
+	
+	  /**
+	   * 缩小文档
+	   * @param step 缩小步长，默认为 0.1
+	   */
+	  zoomOut(step: number = 0.1): void {
+		this.zoom(this.currentScale - step)
+	  }
+
+	    /**
+   * 重置缩放到默认比例
+   */
+  resetZoom(): void {
+	this.currentScale = 1
+    this.zoom(this.currentScale)
+  }
+
+  /**
+   * 解析 OFD 文件
+   * @param file OFD 文件（可以是文件路径、File 对象或 ArrayBuffer）
+   * @returns Promise<OfdDocument>
+   */
+  async parse(file: string | File | ArrayBuffer): Promise<OfdDocument> {
+    try {
+      // 添加本地的simSun等字体
+      await loadLocalDefaultFonts()
+      this.ofdDocument = await parser.parseOFDFile(file).promise
+      return this.ofdDocument
+    } catch (e) {
+      console.error("解析文件错误", e)
+      throw e
+    }
+  }
+
+  /**
+   * 保存 OFD 文档
+   * @param path 保存路径
+   */
+  save(path: string): void {
+    new OfdWriter(this.ofdDocument).saveTo(path)
+  }
+
+  /**
+   * 获取文档内容
+   * @param page 可选的页码，如果不指定则获取全部内容
+   * @returns 文档内容文本
+   */
+  getContent(page?: number): string {
+    return this.ofdDocument.getContentText(page || null)
+  }
+
+  /**
+   * 搜索文档内容
+   * @param keyword 搜索关键词
+   */
+  search(keyword: string): void {
+    // TODO: 实现搜索功能
+  }
+
+  /**
+   * 执行 OFD 文档中的动作
+   * @param action 动作数据
+   */
+  executeAction(action: XmlData): void {
+    ofdActions.executeAction(this, this.ofdDocument, action)
+  }
+
+  /**
+   * 获取OFD文档对象
+   * @returns OfdDocument 当前的OFD文档对象
+   */
+  getOfdDocument(): OfdDocument {
+    if (!this.ofdDocument) {
+      throw new Error('OFD文档尚未解析，请先调用parse方法');
+    }
+    return this.ofdDocument;
+  }
+}

package/packages/components/fileViewer/src/liteofd/ofdActions.ts

@@ -0,0 +1,29 @@
+import { AttributeKey, OFD_ACTION, OFD_KEY } from "./attrType";
+import LiteOfd from "./liteOfd";
+import { XmlData } from "./ofdData";
+import { OfdDocument } from "./ofdDocument";
+import * as parser from "./parser"
+
+
+
+export const executeAction = (liteOfd: LiteOfd, ofdDocument: OfdDocument, action: XmlData) => {
+    let actionEvent = parser.findAttributeValueByKey(action, AttributeKey.Event)
+    switch(actionEvent) {
+        case OFD_ACTION.CLICK:
+            executeClickAction(liteOfd, action)
+        break;
+    }
+}
+
+
+const executeClickAction = (liteOfd: LiteOfd | any, action: XmlData) => {
+    console.log("执行点击行动")
+    let actionDest = parser.findValueByTagName(action, OFD_KEY.Goto)
+    if(actionDest) {
+        console.log("执行跳转行动", actionDest)
+        let pageNum = parser.findAttributeValueByKey(action, AttributeKey.PageNum)
+        if(pageNum) {
+            liteOfd.scrollToPage(parseInt(pageNum))
+        }
+    }
+}

package/packages/components/fileViewer/src/liteofd/ofdCanvas.ts

@@ -0,0 +1,19 @@
+
+
+// 每个页面page是一个画布
+export const createOFDCanvas = () => {
+	let canvas = document.createElement("canvas");
+	canvas.getContext("2d")
+
+	return canvas
+}
+
+/**
+ * 绘制文本
+ * @param context canvas的上下文
+ * @param text 文本
+ * @param attrs 绘制的属性
+ */
+export const showText = (context: CanvasRenderingContext2D, text: string, attrs: any) => {
+
+}

package/packages/components/fileViewer/src/liteofd/ofdData.ts

@@ -0,0 +1,28 @@
+import { OfdDocument } from "./ofdDocument"
+
+type IXmlData = {
+	attrsMap: Map<string, any>, // 属性值
+	children: IXmlData[], // 子标签
+	value: string, // 标签中的值
+	tagName: string, // 一个标签的名称
+	fileName: string // xml文件的路径和名称
+	id: string // 节点的ID属性值
+	signList: IXmlData[] // 页面包含的签名的数组
+	sealObject: any // 签名的数据，印章数据，就是比如signedvalue.data中的数据
+	sealData: OfdDocument | string | null // 如果是ofd类型的签章，那么这个sealofdDocument就是签章的ofd数据，需要渲染这个；也可以是图片的base64数据
+	annots: XmlData | null // 注释数据列表，包含了ofd:Annotations
+}
+
+// 节点的数据
+export class XmlData implements IXmlData{
+	attrsMap: Map<string, any> = new Map()
+	children: XmlData[] = []
+	tagName: string = ""
+	value: string = ""
+	fileName = ""
+	id = ""
+	signList: XmlData[] = []
+	sealObject = null
+	sealData: OfdDocument | string | null = null
+	annots: XmlData | null= null
+}

package/packages/components/fileViewer/src/liteofd/ofdDocument.ts

@@ -0,0 +1,109 @@
+import * as parser from "./parser"
+import { AttributeKey, OFD_KEY } from "./attrType"
+import { XmlData } from "./ofdData"
+
+/**
+ * ofd的文档数据，解析之后的
+ */
+export class OfdDocument {
+
+	files: any // ofd解析出来的所有文件，也就是zip解压缩之后的原始文件，包含了文件路径
+	data: any = null // 解析的ofd的数据，xmldata
+	pages: XmlData[] = []// ofd的页面数据
+	ofdXml: XmlData = new XmlData() // OFD.xml文件
+	documentData: XmlData = new XmlData() // document.xml文件
+	publicRes: XmlData = new XmlData() // publicres.xml文件
+	documentRes: XmlData = new XmlData() // documentRes.xml文件
+	rootContainer: Element = document.createElement("div") // 根的容器
+	loadedMediaFile: Map<string, any> // 已经加载了的资源图片/包括图片等
+	mediaFileList: any // 多媒体文件列表
+	signatures: XmlData = new XmlData() // 签名数据，这个是signatures.xml文件的数据
+	signatureList: XmlData[] = [] // 签名数据列表，包含了signatures.xml里面所有签名组成的xmldata的数组
+	outlines: XmlData = new XmlData() // 大纲数据列表，包含了ofd:Outlines里面所有大纲数据
+	annots: XmlData = new XmlData() // 注释数据列表，包含了ofd:Annotations
+
+	constructor() {
+		this.loadedMediaFile = new Map()
+	}
+
+	/**
+	 * 获取内容中最大的id和最小的id
+	 */
+	getMaxAndMinContentIDByPage(pageIndex: number){
+		let min = -1
+		let max = 9999
+		if (this.pages && this.pages.length > pageIndex) {
+			let currentPage = this.pages[pageIndex]
+			this.#getNodeAttributeMaxID(currentPage, max, min)
+			console.log("find id max and min", max, min)
+		}
+
+		return {min, max}
+	}
+
+	#getNodeAttributeMaxID(node: XmlData, maxID: number, min: number){
+		let currentID = parser.findAttributeValueByKey(node, AttributeKey.ID)
+		if (currentID) {
+			let idValue = parseInt(currentID)
+			if (idValue > maxID) {
+				maxID = idValue
+			}
+			if (min > idValue){
+				min = idValue
+			}
+		}
+		if (node.children && node.children.length > 0) {
+			for (let i = 0; i < node.children.length; i++) {
+				let tempNode = node.children[i]
+				this.#getNodeAttributeMaxID(tempNode, maxID, min)
+			}
+		}
+	}
+
+	#getNodeAttributeMinID(node: XmlData){
+
+	}
+
+	getMinContentID(){
+
+	}
+
+	/**
+	 * 获取内容文本
+	 * @param page 页码，如果为null，则获取全部文本
+	 * @returns 
+	 */
+	getContentText(page: number | null) {
+		if(page == null){
+			// 获取全部文本
+			return this.getAllContentText()
+		} else {
+			// 获取指定页面全部文本
+			return this.getContentTextByPageByIndex(page)
+		}
+	}
+
+	private getAllContentText(){
+		let content = ""
+		this.pages.forEach(page => {
+			content += this.getContentTextByPageByData(page)
+		})
+		return content
+	}
+
+	private getContentTextByPageByIndex(pageIndex: number){
+		let page = this.pages[pageIndex - 1]
+		return this.getContentTextByPageByData(page)
+	}
+
+	private getContentTextByPageByData(page: XmlData){
+		let content = ""
+		let textCodeList = parser.findAllNodesByTagName(page, OFD_KEY.TextCode)
+		console.log("textCodeList", textCodeList)
+		textCodeList.forEach(textCode => {
+			content += textCode.value
+		})
+
+		return content
+	}
+}