zhui-plus 1.0.0 → 1.0.10

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

@@ -0,0 +1,47 @@
+export default class PromiseCapability<T> {
+	/**
+	 * #settled：这是一个私有属性（由 # 前缀表示），包含一个布尔值。它开始时为 false，并在 Promise 被解决或拒绝时设置为 true。
+	 * @type {boolean}
+	 */
+	#settled = false;
+	promise: Promise<T>
+	resolve!: (data: T) => void
+	reject!: (reason: any) => void 
+
+	constructor() {
+		/**
+		 * 在构造函数内部，它使用 Promise 构造函数创建一个新的 Promise。
+		 * Promise 构造函数采用带有两个参数的执行器函数
+		 * 它还在执行器函数中定义了两个公共方法：this.resolve  this.reject
+		 *
+		 * @type {Promise<any>} The Promise object.
+		 */
+		this.promise = new Promise((resolve, reject) => {
+			/**
+			 * 此方法采用数据参数并调用提供给 Promise 构造函数的解析函数，从而使用提供的数据有效地实现 Promise。
+			 * @type {function} Fulfills the Promise.
+			 */
+			this.resolve = data => {
+				this.#settled = true;
+				resolve(data);
+			};
+
+			/**
+			 * 此方法接受一个原因参数（通常是一个错误）并调用提供给 Promise 构造函数的拒绝函数，从而有效地拒绝带有所提供原因的 Promise。
+			 * @type {function} Rejects the Promise.
+			 */
+			this.reject = reason => {
+				this.#settled = true;
+				reject(reason);
+			};
+		});
+	}
+
+	/**
+	 * 这个 getter 只是返回私有属性 #settled 的值，指示 Promise 是否已被解决或拒绝。
+	 * @type {boolean} If the Promise has been fulfilled/rejected.
+	 */
+	get settled() {
+		return this.#settled;
+	}
+}

package/packages/components/fileViewer/src/liteofd/utils/commonFont.ts

@@ -0,0 +1,15 @@
+// 常用字体中文转英文，对于本地渲染的字体有用
+export const CommonFont = {
+	"方正小标宋体": "FZXiaoBiaoSong-B05S",
+	"小标宋体": "SimSun",
+	"宋体": "SimSun",
+	"黑体": "SimHei",
+	"楷体": "KaiTi",
+	"新宋体": "NSimSun",
+	"仿宋": "FangSong",
+	"微软雅黑": "Microsoft Yahei",
+	"微软正黑体": "Microsoft JhengHei",
+	"华文黑体": "STHeiti",
+	"华文楷体": "STKaiti",
+}
+

package/packages/components/fileViewer/src/liteofd/utils/elementUtils.ts

@@ -0,0 +1,362 @@
+import * as parser from "../parser"
+import { AttributeKey, OFD_KEY } from "../attrType"
+import { convertToDpi, convertToDpiWithScale } from "./utils"
+import { XmlData } from "../ofdData"
+import { OfdDocument } from "../ofdDocument"
+
+const domParser = new DOMParser()
+
+
+function decodeHTML(html) {
+	const doc = domParser.parseFromString(html, "text/html");
+	return doc.documentElement.textContent;
+}
+
+/**
+ * 将textcode字符串转换为待坐标也就是deltax和deltau的值的数组
+ * @param textStr
+ * @param deltaXList
+ * @param deltaYList
+ * @param originX
+ * @param originY
+ */
+const extractTextToCharArray = (textStr: string, deltaXList: any[], deltaYList: any[], originX: any, originY: any) => {
+	let textCodePointList:any = []
+	let lastXDeltaIndex = 0
+	let lastYDeltaIndex = 0
+	let x = parseFloat(originX)
+	let y = parseFloat(originY)
+
+
+	for (let i = 0; i < textStr.length; i++) {
+		let tempDeltaX = 0
+		let tempDeltaY = 0
+		if (i > 0 && deltaXList.length > 0) {
+			let deltaX = deltaXList[i - 1];
+			if (deltaX || deltaX === 0) {
+				x += deltaX;
+				lastXDeltaIndex = i - 1;
+			} else {
+				deltaX = deltaXList[lastXDeltaIndex];
+				x += deltaX;
+			}
+
+			tempDeltaX = deltaX
+		}
+		if (i > 0 && deltaYList.length > 0) {
+			let deltaY = deltaYList[i - 1];
+			if (deltaY || deltaY === 0) {
+				y += deltaY;
+				lastYDeltaIndex = i - 1;
+			} else {
+				deltaY = deltaYList[lastYDeltaIndex];
+				y += 0;
+			}
+
+			tempDeltaY = deltaY
+		}
+		if (isNaN(x)) {
+			x = 0;
+		}
+		if (isNaN(y)) {
+			y = 0;
+		}
+		let text = textStr.substring(i, i + 1)
+
+		let textCodePoint:any = { 'x': convertToDpi(x), 'y': convertToDpi(y), 'text': text, deltaX: tempDeltaX, deltaY: tempDeltaY  }
+		textCodePointList.push(textCodePoint)
+	}
+	return textCodePointList
+}
+
+/**
+ * 将HTML实体转换为对应的字符
+ * @param text 包含HTML实体的文本
+ * @return 转换后的文本
+ */
+const decodeHtmlEntities = (text: string): string => {
+  const entities: { [key: string]: string } = {
+    '&lt;': '<',
+    '&gt;': '>',
+    '&amp;': '&',
+    '&quot;': '"',
+    '&apos;': "'",
+    '&#x20;': ' ',
+    '&#x0020;': ' '
+  };
+
+  return text.replace(/&[^;]+;/g, (entity) => {
+    return entities[entity] || entity;
+  });
+}
+
+
+/**
+ * 根据textcode来创建显示字符串的tspan
+ * @param nodeData 文本的textCode标签
+ * @param node 文本的textCode标签
+ * @param textNode 文本的textCode标签
+ */
+export const createTextSpan = (nodeData: XmlData, textCodeData: XmlData, textNode: Element) => {
+	// 根据scale计算tspan的位置
+	let hScale:any = parser.findAttributeValueByKey(nodeData, AttributeKey.HScale)
+	let vScale:any = parser.findAttributeValueByKey(nodeData, AttributeKey.VScale)
+	// TODO 对已经存在CTM的情况需要对CTM基础上进行缩放计算，现在是简单对这两种情况进行了区分也就是hscale和ctm进行了一个分解处理
+	if(vScale || hScale) {
+		textNode.setAttribute("transform", `scale(${hScale ? hScale : 1}, ${vScale ? vScale : 1})`)
+	}
+	let x = parser.findAttributeValueByKey(textCodeData, AttributeKey.X)
+	let y = parser.findAttributeValueByKey(textCodeData, AttributeKey.Y)
+
+	let textCode:any = parser.findValueByTagName(textCodeData, OFD_KEY.TextCode)
+	let textStr:any = textCode.value.toString()
+	textStr = decodeHtmlEntities(textStr)
+	// 根据node的deltax和deltay进行创建字符位置
+	let deltaX = getDeltaList(textCode, AttributeKey.DeltaX)
+	let deltaY = getDeltaList(textCode, AttributeKey.DeltaY)
+
+	// 将char分割，并且添加上x和y的值
+	let charList = extractTextToCharArray(textStr, deltaX, deltaY, x, y)
+	for (let i = 0; i < charList.length; i++) {
+		let charObj:any = charList[i]
+		let nodeEle = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
+		let x = charObj.x
+		if (hScale && hScale != 0) {
+			x = x / hScale
+		}
+		let y = charObj.y
+		if (vScale && vScale != 0) {
+			y = y / vScale
+		}
+		nodeEle.setAttribute("x", x);
+		nodeEle.setAttribute("y", y);
+		nodeEle.innerHTML = charObj.text
+
+		textNode.appendChild(nodeEle)
+	}
+}
+
+
+/**
+ * 获取字体的文字大小
+ * @param textObj
+ */
+export const getFontSize = (textObj: XmlData) => {
+	let originSize:any = parser.findAttributeValueByKey(textObj, AttributeKey.FontSize)
+	if (originSize) {
+		originSize = convertToDpi(originSize)
+		return originSize
+	} else {
+		return null
+	}
+}
+
+/**
+ * 获取ctm，进行转换
+ * @param obj
+ */
+export const getCTM = (obj: XmlData) => {
+	let ctmStr = parser.findAttributeValueByKey(obj, AttributeKey.CTM)
+	if (ctmStr) {
+		let ctms:any = ctmStr.split(' ');
+		return `matrix(${ ctms[0] } ${ ctms[1] } ${ ctms[2] } ${ ctms[3] } ${ convertToDpi(ctms[4]) } ${ convertToDpi(ctms[5]) })`
+	}
+
+	return null
+}
+
+export const getDeltaList = (obj: XmlData, key) => {
+	let deltaStr = parser.findAttributeValueByKey(obj, key)
+	if (deltaStr) {
+		return deltaFormatter(deltaStr)
+		// 判断数组是否是纯数组还是带有数字的那种数组
+	} else {
+		return []
+	}
+}
+
+/**
+ * 将textobject的字符的delta进行解析，比如如果是g数组那么解析成对应数字的数组，如果是单个字符那么需要解析称为多少个字符的位置数组每个位置一样
+ * @param delta
+ */
+export const deltaFormatter = function (delta) {
+	if (delta.indexOf("g") === -1) {
+		let floatList:any = [];
+		for (let f of delta.split(' ')) {
+			floatList.push(parseFloat(f));
+		}
+		return floatList;
+	} else {
+		const array = delta.split(' ');
+		let gFlag = false;
+		let gProcessing = false;
+		let gItemCount = 0;
+		let floatList:any = [];
+		for (const s of array) {
+			if ('g' === s) {
+				gFlag = true;
+			} else {
+				if (!s || s.trim().length == 0) {
+					continue;
+				}
+				if (gFlag) {
+					gItemCount = parseInt(s);
+					gProcessing = true;
+					gFlag = false;
+				} else if (gProcessing) {
+					for (let j = 0; j < gItemCount; j++) {
+						floatList.push(parseFloat(s));
+					}
+					gProcessing = false;
+				} else {
+					floatList.push(parseFloat(s));
+				}
+			}
+		}
+		return floatList;
+	}
+}
+
+/**
+ * 解析字符串为颜色，比如rgb格式
+ * @param color
+ */
+export const parseColor = function (color: string) {
+	if (color) {
+		if (color.indexOf('#') !== -1) {
+			color = color.replace(/#/g, '');
+			color = color.replace(/ /g, '');
+			color = '#' + color.toString();
+			return color;
+		}
+		let array = color.split(' ');
+		return `rgb(${array[0]}, ${array[1]}, ${array[2]})`
+	} else {
+		return `rgb(0, 0, 0)`
+	}
+}
+
+
+export const parseColorToHex = function (color: string, alpha: number | undefined) {
+	if (color) {
+		if(alpha || alpha === 0){
+			if (color.indexOf('#') !== -1) {
+				color = color.replace(/#/g, '');
+				color = color.replace(/ /g, '');
+				color = '#' + color.toString();
+				return color;
+			}
+			let array = color.split(' ');
+			let hexColor = rgbToHexWithAlpha(
+				parseInt(array[0]),
+				parseInt(array[1]),
+				parseInt(array[2]),
+				alpha
+			);
+			return hexColor
+		} else {
+			return (parseColor)
+		}
+	} else {
+		return `rgb(0, 0, 0)`
+	}
+}
+
+/**
+ * 将RGB颜色转换为带alpha的16进制颜色值
+ * @param r 红色分量 (0-255)
+ * @param g 绿色分量 (0-255)
+ * @param b 蓝色分量 (0-255)
+ * @param alpha 透明度 (0-255)
+ * @returns 带alpha的16进制颜色值
+ */
+export const rgbToHexWithAlpha = (r: number, g: number, b: number, alpha: number): string => {
+	// 确保输入值在有效范围内
+	r = Math.max(0, Math.min(255, r));
+	g = Math.max(0, Math.min(255, g));
+	b = Math.max(0, Math.min(255, b));
+	alpha = Math.max(0, Math.min(255, alpha));
+
+	// 转换为16进制并补零
+	const hexR = r.toString(16).padStart(2, '0');
+	const hexG = g.toString(16).padStart(2, '0');
+	const hexB = b.toString(16).padStart(2, '0');
+	const hexAlpha = alpha.toString(16).padStart(2, '0');
+
+	// 返回带alpha的16进制颜色值
+	return `#${hexR}${hexG}${hexB}${hexAlpha}`;
+}
+
+/**
+ * 根据节点的属性值来查找到对应的节点
+ */
+export const findValueByAttributeValue = (parent: XmlData, attrValue: any) => {
+	if (parent.attrsMap.size > 0) {
+		for (let pair of parent.attrsMap) {
+			const [key, value] = pair;
+			if (value === attrValue) {
+				return parent
+			}
+		}
+	}
+	if (parent.children && parent.children.length > 0) {
+		for (let i = 0; i < parent.children.length; i++) {
+			let child = parent.children[i]
+			let res = findValueByAttributeValue(child, attrValue)
+			if (res) {
+				return res
+			}
+		}
+	}
+}
+
+/**
+ * 获取内容页面最大和最小的id，用来进行zindex的设置
+ * @param node
+ * @param idObj
+ */
+export const getNodeAttributeMaxAndMinID = (node: XmlData, idObj: { max: number, min: number }) => {
+	let currentID = parser.findAttributeValueByKey(node, AttributeKey.ID)
+	if (currentID) {
+		let idValue = parseInt(currentID)
+		if (idValue > idObj.max) {
+			idObj.max = idValue
+		}
+		if (idObj.min > idValue){
+			idObj.min = idValue
+		}
+	}
+	if (node.children && node.children.length > 0) {
+		for (let i = 0; i < node.children.length; i++) {
+			let tempNode = node.children[i]
+			getNodeAttributeMaxAndMinID(tempNode,idObj)
+		}
+	}
+}
+
+// 去掉以/开头的路径
+export const getOFDFilePath = (path: string) => {
+	if (path.startsWith("/")) {
+		return path.substring(1, path.length)
+	}
+	return path
+}
+
+
+	/**
+	 * 获取默认的缩放比例
+	 * @returns {number} 默认的缩放比例
+	 */
+	export const getDefaultScale = (ofdDocument: OfdDocument): number => {
+		let screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+		let physicalBoxObj = parser.findValueByTagName(ofdDocument.documentData, OFD_KEY.PhysicalBox)
+		if(physicalBoxObj){
+			let physicalBox = physicalBoxObj.value.split(" ")
+			let ofdWidth = parseFloat(physicalBox[2])
+			// 计算缩放比例
+			let scale = (screenWidth - 100) / ofdWidth
+			return scale
+		}
+		// 如果物理盒不存在，则返回1
+		return 1
+	}

package/packages/components/fileViewer/src/liteofd/utils/jsonToXml.ts

@@ -0,0 +1,95 @@
+import { XmlData } from "../ofdData"
+
+const getAttrsMapJson = (attrsMap: Map<string, any>) => {
+	let jsonObj = {}
+	for (const [key, value] of attrsMap.entries()) {
+		let jsonKey = key.replace("@_", "")
+		jsonObj[jsonKey] = value
+	}
+	return jsonObj
+}
+
+const getAttrsString = (attrsMap: Map<string, any>) => {
+	let attrsStr = ""
+	for (const [key, value] of attrsMap.entries()) {
+		let jsonKey = key.replace("@_", "")
+		attrsStr += `${jsonKey}="${value}" `
+	}
+	return attrsStr
+}
+
+const isOFDTagName = (tagName: string) => {
+	return tagName.startsWith("ofd:")
+}
+
+const isNumber = () => {
+
+}
+
+/**
+ * 将xmldata对象转为xml字符串写入文件
+ * @param node
+ * @param parentNode
+ * @constructor
+ */
+export const XmlDataToXmlStr = (node: XmlData, parentNode: XmlData | null = null) => {
+	let tagName = node.tagName
+	if (!isNaN(Number(tagName))) {
+		tagName = parentNode  ? parentNode.tagName : ""
+	}
+	let value = node.value
+	let attrsStr = getAttrsString(node.attrsMap)
+
+	let xmlTagStart = `<${tagName} ${attrsStr}>`
+	let xmlContent = ``
+	let xmlStr = ""
+	let addCurrentNode = true
+	if (node.children && node.children.length > 0) {
+		// 根据children中第一个的tagName来判断是否是数组，如果是数组那么tagName就是数字不是ofd开头的了
+		let firstNode = node.children[0]
+		let nodeChildren = node.children;
+		// 这里表示第一个子节点没有tagName，然后就表示是数组
+		let firstNodeNumberTag = Number(firstNode.tagName)
+		if (!isNaN(firstNodeNumberTag)) {
+			addCurrentNode = false
+			tagName = node.tagName
+			// 表示这个node是一个数组，下面的节点都是数组的方式来进行组合
+			for (let i = 0; i < node.children.length; i++) {
+				let subNode = node.children[i]
+				xmlContent += XmlDataToXmlStr(subNode, node)
+			}
+		} else {
+			if (!tagName) {
+				addCurrentNode = false
+			}
+			// 包含了子的节点，这里因为xml解析的原因，需要把数组的子节点单独处理
+			for (let i = 0; i < nodeChildren.length; i++) {
+				let subNode = node.children[i]
+				let subStr = XmlDataToXmlStr(subNode, node)
+				xmlContent += subStr
+			}
+		}
+	} else {
+		if (value) {
+			xmlContent = value
+		}
+	}
+
+	if (tagName.startsWith("?xml")) {
+		xmlStr = xmlTagStart.replace(">", "?>")
+	} else {
+		// 如果当前没有tagName，并且有children，那么就直接添加字符串，不需要添加tagle
+		if (addCurrentNode) {
+			let xmlTagEnd = `</${tagName}>`
+			xmlStr = xmlTagStart + xmlContent + xmlTagEnd
+		} else {
+			xmlStr = xmlContent
+		}
+	}
+
+	if (!xmlContent) {
+		xmlStr = xmlStr.replace(`></${tagName}>`, `/>`)
+	}
+
+	return xmlStr
+}