zhui-plus 1.0.0 → 1.0.10

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

@@ -0,0 +1,173 @@
+// OFD包含的属性的key值
+export const AttributeKey = {
+	FONT: "Font", // 字体
+	Boundary: "Boundary", // 组件范围
+	ID: "ID", // 组件的id
+	CTM: "CTM", // 变换矩阵
+	DeltaX: "DeltaX", // x的位置
+	DeltaY: "DeltaY", // y的位置
+	FontSize: "Size", // 字体大小
+	LineWidth: "LineWidth", // path的线条宽度
+	Stroke: "Stroke", // 线条
+	Fill: "Fill", // 填充
+	Value: "Value",
+	Alpha: "Alpha", // 颜色透明度
+	ColorSpace: "ColorSpace",
+	DrawParam: "DrawParam",
+	Cap: "Cap",
+	X: "X",
+	BaseLoc: "BaseLoc",
+	Y: "Y",
+	TemplateID: "TemplateID",
+	ZOrder: "ZOrder",
+	StartPoint: "StartPoint",
+	EndPoint: "EndPoint",
+	Position: "Position",
+	ResourceID: "ResourceID", // 引用资源ID
+	FontName: "FontName", // 字体名称
+	FamilyName: "FamilyName", // 字体名称
+	HScale: "HScale", // 字体的横向压缩
+	VScale: "VScale", // 字体的纵向压缩
+	WScale: "WScale", // 字体的宽度
+	Weight: "Weight", // 字体粗细
+	Bold: "Bold", // 字体粗细
+	Italic: "Italic", // 字体斜体
+	PageRef: "PageRef", // 签章的页面引用
+	Clip: "Clip", // 裁剪
+	Title: "Title", // 大纲的标题
+	PageNum: "PageNum", // 大纲的页面位置
+	Event: "Event", // 点击事件，比如大纲中的action的事件Click
+	PageID: "PageID", // 
+	Type: "Type", // 
+	Subtype: "Subtype", // 注释的子类型
+	DashPattern: "DashPattern", // 
+}
+
+// ofd的xml标签中的标签名tagName
+export const OFD_KEY = {
+	OFD: "ofd:OFD", // OFD.xml的根
+	Creator: "ofd:Creator", // 创建者
+	Title: "ofd:Title",
+	ModDate: "ofd:ModDate",
+	DocID: "ofd:DocID",
+	CreationDate: "ofd:CreationDate",
+	CreatorVersion: "ofd:CreatorVersion",
+	CustomData: "ofd:CustomData",
+	DocRoot: "ofd:DocRoot",
+	Pages: "ofd:Pages",
+	Page: "ofd:Page",
+	Outlines: "ofd:Outlines",
+	CommonData: "ofd:CommonData",
+	VPreferences: "ofd:VPreferences",
+	Actions: "ofd:Actions",
+	Annotations: "ofd:Annotations",
+	PublicRes: "ofd:PublicRes",
+	DocumentRes: "ofd:DocumentRes",
+	Content: "ofd:Content",
+	Area: "ofd:Area",
+	PhysicalBox: "ofd:PhysicalBox",
+	CropBox: "ofd:CropBox",
+	Layer: "ofd:Layer",
+	PathObject: "ofd:PathObject",
+	AbbreviatedData: "ofd:AbbreviatedData",
+	StrokeColor: "ofd:StrokeColor",
+	FillColor: "ofd:FillColor",
+	TextObject: "ofd:TextObject",
+	TextCode: "ofd:TextCode",
+	DrawParams: "ofd:DrawParams",
+	Template: "ofd:Template",
+	TemplatePage: "ofd:TemplatePage",
+	Segment: "ofd:Segment",
+	AxialShd: "ofd:AxialShd",
+	Color: "ofd:Color",
+	ImageObject: "ofd:ImageObject",
+	MultiMedia: "ofd:MultiMedia",
+	MediaFile: "ofd:MediaFile",
+	Font: "ofd:Font",
+	Fonts: "ofd:Fonts",
+	CustomDatas: "ofd:CustomDatas",
+	DocInfo: "ofd:DocInfo",
+	PageArea: "ofd:PageArea",
+	Signatures: "ofd:Signatures",
+	References: "ofd:References",
+	SignedInfo: "ofd:SignedInfo",
+	Annot: "ofd:Annot",
+	Clips: "ofd:Clips",
+	Clip: "ofd:Clip",
+	Signature: "ofd:Signature",
+	SignedValue: "ofd:SignedValue",
+	MaxSignId: "ofd:MaxSignId",
+	StampAnnot: "ofd:StampAnnot",
+	FontFile: "ofd:FontFile",
+	Path: "ofd:Path",
+	PageBlock: "ofd:PageBlock",
+	Reference: "ofd:Reference",
+	Action: "ofd:Action",
+	OutlineElem: "ofd:OutlineElem",
+	Goto: "ofd:Goto",
+	Dest: "ofd:Dest",
+	Bookmarks: "ofd:Bookmarks",
+	Bookmark: "ofd:Bookmark",
+	FileLoc: "ofd:FileLoc",
+	Parameters: "ofd:Parameters",
+	Parameter: "ofd:Parameter",
+	Appearance: "ofd:Appearance",
+}
+
+// 包含了子节点的tag的名称，用来xml进行解析时候只有一个子节点时候的解析成数组，是可能包含多个的才加入到这里面，比如TextObject可能再content中有多个，那么就加TextObject而不是Content
+export const MultiChildTagName = [
+	OFD_KEY.DocInfo,
+	OFD_KEY.CustomData,
+	OFD_KEY.Font,
+	OFD_KEY.CommonData,
+	OFD_KEY.PageArea,
+	OFD_KEY.Page,
+	OFD_KEY.MaxSignId,
+	OFD_KEY.Layer,
+	OFD_KEY.PathObject,
+	OFD_KEY.TextObject,
+	OFD_KEY.Signature,
+	OFD_KEY.Reference,
+	OFD_KEY.Annot,
+	OFD_KEY.AxialShd,
+	OFD_KEY.Action,
+	OFD_KEY.ImageObject,
+	OFD_KEY.StampAnnot,
+	OFD_KEY.Clip,
+	OFD_KEY.TemplatePage,
+	OFD_KEY.OutlineElem,
+	OFD_KEY.Parameter,
+	OFD_KEY.Annot,
+]
+
+export const OFD_ACTION = {
+	CLICK: "CLICK",
+}
+
+export const ANNOT_TYPE = {
+	Highlight: {
+		value: "Highlight",
+		subType: {
+			Underline: "Underline",
+			Highlight: "Highlight",
+		}
+	}, // 高亮注释
+	Path: {
+		value: "Path",
+		subType: {
+			Watercolor: "Watercolor", // 水印，需要在文本层上面
+			Fluorescent: "Fluorescent", // 荧光笔，在文本层上面 
+			Pen: "Pen", // 笔触，在文本层上面
+			Strikeout: "Strikeout", // 删除线，要在文本层的index上面
+			Squiggly: "Squiggly", // 下划线的弯弯曲曲类型，放在文本底部的，要在文本下面把
+		}
+	}, 
+	Stamp: {
+		value: "Stamp",
+		subType: {
+			Stamp: "Stamp", // 印章
+			SignatureInFile: "SignatureInFile", // 印章
+		}
+	}
+	
+}

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

@@ -0,0 +1,203 @@
+/**
+ * 内容层的渲染
+ */
+import Layer from "./layer"
+import { OfdDocument } from "./ofdDocument"
+import { OFD_KEY } from "./attrType"
+import * as parser from "./parser"
+import { XmlData } from "./ofdData"
+import { PathSvg } from "./elements/PathSvg"
+import { TextSvg } from "./elements/TextSvg"
+import { ImageSvg } from "./elements/ImageSvg"
+
+export class ContentLayer extends Layer {
+	private ofdDocument: OfdDocument
+	private setDefaultZOrder = false // 是否使用默认的zorder的值设置zindex
+	private defaultZorderValue = -1 // 默认的zindex的值
+
+	constructor(ofdDocument: OfdDocument) {
+		super()
+		this.ofdDocument = ofdDocument
+		this.#initPageContainer()
+	}
+
+	renderWithZOrder(pageData: XmlData, pageContainer: Element, zOrder: number) {
+		try {
+			this.setDefaultZOrder = true
+			this.defaultZorderValue = zOrder
+			this.render(pageData, pageContainer)
+		} catch (e) {
+			console.log("render page content error", e, pageData)
+			return null
+		}
+	}
+
+	render(pageData: XmlData, pageContainer: Element) {
+		try {
+			let contentData = parser.findValueByTagName(pageData, OFD_KEY.Content)
+			if(contentData) {	
+				// 渲染内容层
+				this.#initPageContainer()
+				this.#renderPageContent(contentData, pageContainer)	
+			}
+		} catch (e) {
+			console.log("render page content error", e, pageData)
+			return null
+		}
+	}
+
+	// 初始化页面数据
+	#initPageContainer() {
+		// 目前的页面是pages的第一个开始
+
+	}
+
+	#renderSingleLayer(layerData: XmlData, pageContainer: Element) {
+		for (let i = 0; i < layerData.children.length; i++) {
+			let dataObj = layerData.children[i]
+			this.#renderLayerDataObject(dataObj, pageContainer)
+		}
+	}
+
+	#renderLayerDataObject(dataObj: XmlData, pageContainer: Element) {
+		switch (dataObj.tagName) {
+			case OFD_KEY.TextObject:
+				this.#renderTextObject(dataObj, pageContainer)
+				break
+			case OFD_KEY.PathObject:
+				this.#renderPathObject(dataObj, pageContainer)
+				break
+			case OFD_KEY.ImageObject:
+				this.#renderImageObject(dataObj, pageContainer)
+				break
+			case OFD_KEY.PageBlock:
+				this.#renderPageBlock(dataObj, pageContainer)
+				break
+		}
+	}
+
+	/**
+	 * 渲染页面块
+	 * @param dataObj 页面块的数据
+	 * @param pageContainer 页面容器
+	 * @private
+	 */
+	#renderPageBlock(dataObj: XmlData, pageContainer: Element) {
+		if (dataObj.children && dataObj.children.length > 0) {
+			for (let i = 0; i < dataObj.children.length; i++) {
+				const childObj = dataObj.children[i].children[0];
+				this.#renderLayerDataObject(childObj, pageContainer);
+			}
+		} else {
+			console.log('PageBlock没有子元素');
+		}
+	}
+
+	#renderLayer(layerData: XmlData, pageContainer: Element) {
+		let layers = layerData.children
+		for (let i = 0; i < layers.length; i++) {
+			this.#renderSingleLayer(layers[i], pageContainer)
+		}
+
+	}
+
+	/**
+	 * 渲染content的内容
+	 * TODO 渲染每个页面应该做成一个promise来控制，这样能够控制真正渲染的页面数，而不至于一次所有的都渲染了
+	 * @param contentData 页面的content的数据
+	 * @private
+	 */
+	#renderPageContent(contentData: XmlData, pageContainer: Element) {
+		let layers = contentData.children
+		for (let i = 0; i < layers.length; i++) {
+			let layer = layers[i]
+			this.#renderLayer(layer, pageContainer)
+		}
+	}
+
+	/**
+	 * 渲染文本
+	 * @param nodeObjs
+	 * @param pageContainer
+	 * @private
+	 */
+	#renderTextObject(nodeObjs: XmlData, pageContainer: Element) {
+		// 多个文本子节点
+		for (let i = 0; i < nodeObjs.children.length; i++) {
+			let nodeData = nodeObjs.children[i]
+			this.#renderSingleTextObject(nodeData, pageContainer)
+		}
+	}
+
+	#renderSingleTextObject(nodeData: XmlData, pageContainer: Element) {
+		// path的路径的绘制的对象
+		let svgEle = new TextSvg(this.ofdDocument, nodeData)
+		let nodeEle = svgEle.getContainerSvg()
+
+
+		// let nodeEle = renderText(nodeData, this.ofdDocument)
+		if (this.setDefaultZOrder) {
+			let newStyle = nodeEle.getAttribute("style") + `z-index: ${this.defaultZorderValue}`
+			nodeEle.setAttribute("style", newStyle)
+		}
+		pageContainer.appendChild(nodeEle)
+	}
+
+	/**
+	 * 判断是否多子节点，因为xml会使得下面的节点合并为一个，所以单个和多个不一样
+	 * @private
+	 */
+	#isMultiNode(nodeObjs: XmlData){
+		return nodeObjs.attrsMap.size > 0
+	}
+
+	/**
+	 * 渲染路径path
+	 * @param nodeObjs
+	 * @param pageContainer
+	 * @private
+	 */
+	#renderPathObject(nodeObjs: XmlData, pageContainer: Element) {
+		// 多个path
+		for (let i = 0; i < nodeObjs.children.length; i++) {
+			let nodeData = nodeObjs.children[i]
+			this.#renderSingplePathObject(nodeData, pageContainer)
+		}
+	}
+
+	#renderSingleImageObject(nodeData: XmlData, pageContainer: Element) {
+		// path的路径的绘制的对象
+		let pathSvgEle = new ImageSvg(this.ofdDocument, nodeData)
+		let nodeEle = pathSvgEle.getContainerSvg()
+		if (this.setDefaultZOrder) {
+			let newStyle = nodeEle.getAttribute("style") + `;z-index: ${this.defaultZorderValue}`
+			nodeEle.setAttribute("style", newStyle)
+		}
+		pageContainer.appendChild(nodeEle)
+	}
+
+	/**
+	 * 绘制图像
+	 * @param nodeObjs
+	 * @param pageContainer
+	 * @private
+	 */
+	#renderImageObject(nodeObjs: XmlData, pageContainer: Element) {
+		// 多个path
+		for (let i = 0; i < nodeObjs.children.length; i++) {
+			let nodeData = nodeObjs.children[i]
+			this.#renderSingleImageObject(nodeData, pageContainer)
+		}
+	}
+
+	#renderSingplePathObject(nodeData: XmlData, pageContainer: Element) {
+		// path的路径的绘制的对象
+		let pathSvgEle = new PathSvg(this.ofdDocument, nodeData)
+		let nodeEle = pathSvgEle.getContainerSvg()
+		if (this.setDefaultZOrder) {
+			let newStyle = nodeEle.getAttribute("style") + `;z-index: ${this.defaultZorderValue}`
+			nodeEle.setAttribute("style", newStyle)
+		}
+		pageContainer.appendChild(nodeEle)
+	}
+}

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

@@ -0,0 +1,122 @@
+import { XmlData } from "../ofdData"
+import * as parser from "../parser"
+import { ANNOT_TYPE, AttributeKey, OFD_KEY } from "../attrType"
+import { convertToBox } from "../utils/utils"
+import { OfdDocument } from "../ofdDocument"
+import { PathSvg } from "./PathSvg"
+
+/**
+ * 注释的路径
+ */
+export class AnnotationPathSvg {
+
+	private nodeData: XmlData // 最外层的svg的数据
+	private pathContainer: HTMLDivElement // svg的包裹的，每个组件都有一个svg包裹，比如path带有一个，而text则是svg包裹text，然后text包裹tspan这样子
+	private pathContainerStyle = "position: absolute;overflow: visible;" // 外层svg的style
+	private pathId = "" // 路径的id
+	private ofdDocument: OfdDocument
+	private appearanceData: XmlData | undefined // 渲染的内容的节点数据
+	private parameterData: XmlData | undefined // 路径的参数
+	private boundaryBox: {
+		x: number,
+		y: number,
+		width: number,
+		height: number,
+	} =  { x: 0, y: 0, width: 0, height: 0 }
+	private zIndex = 1 // 根据不同的子类型需要设置不同的zIndex
+
+	// 初始化传入xmldata构建一个path的数据
+	constructor(ofdDocument: OfdDocument, nodeData: XmlData) {
+		this.ofdDocument = ofdDocument
+		this.nodeData = nodeData
+		this.pathId = parser.findAttributeValueByKey(nodeData, AttributeKey.ID)
+		this.appearanceData = parser.findValueByTagName(nodeData, OFD_KEY.Appearance)
+		this.parameterData = parser.findValueByTagName(nodeData, OFD_KEY.Parameters)
+
+		this.pathContainer = this.createContainerSvg()
+		this.pathContainer.setAttribute("style", this.pathContainerStyle)
+	}
+
+
+	#setZIndexBySubtype(){
+		let subType = parser.findAttributeValueByKey(this.nodeData, AttributeKey.Subtype)
+		  switch (subType) {
+			case ANNOT_TYPE.Path.subType.Watercolor:
+			case ANNOT_TYPE.Path.subType.Fluorescent:
+			case ANNOT_TYPE.Path.subType.Pen:
+			this.zIndex = 9999; // 在文本层上面
+			break;
+			case ANNOT_TYPE.Path.subType.Strikeout:
+			this.zIndex = 1; // 在文本层的index上面
+			break;
+			case ANNOT_TYPE.Path.subType.Squiggly:
+			this.zIndex = 1; // 在文本下面
+			break;
+			default:
+			this.zIndex = 1; // 默认值
+		}
+	}
+
+	/**
+	 * 创建包含路径的SVG容器元素
+	 *
+	 * 该方法执行以下操作:
+	 * 1. 创建一个新的SVG元素
+	 * 2. 设置SVG版本
+	 * 3. 添加SVG的ID和z-index
+	 * 4. 添加外层边界
+	 * 5. 创建并添加路径元素
+	 * 6. 将定义(如渐变)添加到路径元素中
+	 *
+	 * @returns 创建并配置好的SVG容器元素
+	 */
+	createContainerSvg(): HTMLDivElement {
+		let pathContainer = document.createElement("div")
+
+		// 根据subtype设置zindex类型
+		this.#setZIndexBySubtype()
+
+		this.#addSvgIDAndZIndex(this.nodeData, pathContainer)
+		this.appearanceData && this.#addBoundary(this.appearanceData)
+		// 添加外层的boundary
+		if(this.appearanceData){
+			let pathObjectData = parser.findValueByTagName(this.appearanceData, OFD_KEY.PathObject)
+			console.log("pathObjectData list render", pathObjectData)
+			if(pathObjectData && pathObjectData.children.length > 0){
+				pathObjectData.children.forEach(child => {
+					let childPath = new PathSvg(this.ofdDocument, child, false)
+					let childSvg = childPath.getContainerSvg()
+					pathContainer.appendChild(childSvg)
+				})
+			}
+		}
+	
+		return pathContainer
+	}
+
+	getContainerSvg(): HTMLDivElement {
+		return this.pathContainer
+	}
+
+
+	#addSvgIDAndZIndex(nodeData: XmlData, container: HTMLDivElement) {
+		let svgID = parser.findAttributeValueByKey(nodeData, AttributeKey.ID)
+		if (svgID) {
+			container.setAttribute("SVG_ID", svgID)
+			this.pathContainerStyle += `z-index: ${this.zIndex};`
+		}
+
+	}
+		
+	// 添加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.pathContainerStyle += svgStyle
+			}
+		}
+}

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

@@ -0,0 +1,6 @@
+
+export abstract class BaseSvg {
+	abstract createContainerSvg(): SVGElement // 外层包裹的svg
+	abstract getContainerSvg(): SVGElement // 外层包裹的svg
+
+}