zhui-plus 1.0.0 → 1.0.10

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

@@ -0,0 +1,425 @@
+import {getSerifFonts, getStdFontMap, getSymbolsFonts} from "./font/standard_fonts.js"
+import {getMetrics} from "./font/metrics"
+import {FontFlags} from "./font/fonts_utils.js"
+import {IdentityToUnicodeMap, ToUnicodeMap} from "./font/to_unicode_map.js"
+import {defaultEncoding, differences, glyphsWidths, toUnicodeMap} from "./font/differences.js"
+import {TranslatedFont} from "./font/translatedFont.js"
+import {FontFaceObject, FontLoader} from "./font/font_loader.js"
+import {ChunkedStream} from "./font/chunked_stream.js"
+import {Font} from "./font/fonts.js"
+import {XmlData} from "./ofdData"
+import * as parser from "./parser"
+import {AttributeKey} from "./attrType"
+import {normalizeFontName} from "./utils/ofdUtils"
+
+// 全局变量，表示已经加载的字体
+export const loadedFonts = new Map()
+
+/**
+ * 判断是否为衬线字体
+ * @param baseFontName 字体名称
+ * @returns 是否为衬线字体
+ */
+const isSerifFont = (baseFontName: string) => {
+    // Simulating descriptor flags attribute
+    const fontNameWoStyle = baseFontName.split("-", 1)[0];
+    return (
+        fontNameWoStyle in getSerifFonts() || /serif/gi.test(fontNameWoStyle)
+    );
+}
+
+/**
+ * 获取字体度量
+ * @param name 字体名称
+ * @returns 字体度量
+ */
+const getBaseFontMetrics = (name: string) => {
+    let defaultWidth = 0;
+    let widths = Object.create({});
+    let monospace = false;
+    const stdFontMap = getStdFontMap();
+    let lookupName = stdFontMap[name] || name;
+    const Metrics = getMetrics();
+
+    if (!(lookupName in Metrics)) {
+        // Use default fonts for looking up font metrics if the passed
+        // font is not a base font
+        lookupName = isSerifFont(name) ? "Times-Roman" : "Helvetica";
+    }
+    const glyphWidths = Metrics[lookupName];
+
+    if (typeof glyphWidths === "number") {
+        defaultWidth = glyphWidths;
+        monospace = true;
+    } else {
+        widths = glyphWidths(); // expand lazy widths array
+    }
+
+    return {
+        defaultWidth,
+        monospace,
+        widths,
+    };
+}
+
+/**
+ * 获取字体类型
+ * @param fontData 字体数据
+ * @returns 字体类型，目前固定返回 "Type1"
+ */
+const getFontType = (fontData: any) => {
+    return "Type1"
+}
+
+/**
+ * 获取字体属性
+ * @param fontType 字体类型
+ * @param baseFontName 字体名称
+ * @param firstChar 第一个字符
+ * @param lastChar 最后一个字符
+ * @param loadedName 加载名称
+ */
+const getFontProperties = (fontType: string, baseFontName: string, firstChar: number, lastChar: number, loadedName: string) => {
+    const properties = {
+        baseEncodingName: null,
+        ascent: 690,
+        capHeight: 690,
+        descent: -209,
+        type: fontType,
+        name: baseFontName,
+        systemFontInfo: null,
+        isSimulatedFlags: true,
+        flags: 4, // 这里先默认填写这个
+        italicAngle: 0,
+        firstChar: firstChar,
+        lastChar: lastChar,
+        xHeight: 461,
+        isType3Font: false,
+        bbox: [-168, -341, 1000, 960],
+        hasEncoding: true,
+        length1: 1626,
+        length2: 14082,
+        length3: 532,
+        fontMatrix: [0.001, 0, 0.001, 0, 0],
+        hasIncludedToUnicodeMap: false,
+        isInternalFont: false,
+        loadedName: loadedName,
+        toUnicode: toUnicodeMap,
+        vmetrics: [],
+        defaultEncoding: [""],
+        differences: [null, ""],
+        widths: [null, 0],
+        defaultWidth: 0,
+        defaultVMetrics: null,
+        fontName: ""
+    }
+    return properties
+}
+
+/**
+ * 加载内置文件的字体
+ * @param fontName 字体名称
+ * @param fontBytes 字体文件
+ */
+const loadFontByArrayBuffer = async (fontName: string, fontBytes: any) => {
+    let fontType = getFontType(fontBytes)
+    let baseFontName = fontName
+
+    const metrics = getBaseFontMetrics(baseFontName)
+    const fontNameWoStyle = baseFontName.split("-", 1)[0]
+    const flags =
+        (isSerifFont(fontNameWoStyle) ? FontFlags.Serif : 0) |
+        (metrics.monospace ? FontFlags.FixedPitch : 0) |
+        (getSymbolsFonts()[fontNameWoStyle]
+            ? FontFlags.Symbolic
+            : FontFlags.Nonsymbolic);
+    const composite = fontType === "Type0"
+    const firstChar = 0,
+        lastChar = (composite ? 0xffff : 0xff);
+    const properties = getFontProperties(fontType, baseFontName, firstChar, lastChar, fontName)
+    properties.defaultEncoding = defaultEncoding
+    properties.differences = differences(); // 这个再ofd中要根据文件里面取读取，有的文件为空，有的文件为标准编码，有的文件中包含有differences需要读取之后取值，再文件的header里面
+    properties.widths = glyphsWidths
+    properties.defaultWidth = metrics.defaultWidth
+    properties.defaultVMetrics = null;
+
+    let fontStream = new ChunkedStream(fontBytes, fontBytes.length)
+    let font = new Font(baseFontName, fontStream, properties)
+    let fontFileData = font.data;
+
+    let options = {
+        "maxImageSize": -1,
+        "disableFontFace": false,
+        "ignoreErrors": true,
+        "isEvalSupported": true,
+        "isOffscreenCanvasSupported": true,
+        "canvasMaxAreaInBytes": -1,
+        "fontExtraProperties": false,
+        "useSystemFonts": true,
+        "cMapUrl": "../external/bcmaps/",
+        "standardFontDataUrl": "../external/standard_fonts/"
+    }
+    let obj = {
+        "Type": {"name": "Font"},
+        "Subtype": {"name": "Type1"},
+        "Encoding": {"num": 976, "gen": 0},
+        "FirstChar": 45,
+        "LastChar": 122,
+        "Widths": {"num": 993, "gen": 0},
+        "BaseFont": {"name": "TACTGM+NimbusRomNo9L-Medi"},
+        "FontDescriptor": {"num": 4, "gen": 0}
+    }
+    let dict = new Map(Object.entries(obj))
+    // 将加载的font对象转换为可以识别成FontFace的内容
+    let translatedFont = new TranslatedFont({
+        loadedName: font.loadedName,
+        font: font,
+        dict: dict,
+        evaluatorOptions: options,
+    });
+    const fontFaceObj = new FontFaceObject(translatedFont.font, {
+        isEvalSupported: true,
+        disableFontFace: false,
+        ignoreErrors: true,
+        inspectFont: null,
+    });
+    let fontLoader = new FontLoader({
+        loadedName: fontName
+    });
+    let loadRes = await fontLoader.bind(fontFaceObj)
+    // fontLoader
+    // 	.bind(fontFaceObj)
+    // 	.then(res => {
+    // 		console.log("load font res", res)
+    // 	})
+    // 	.catch((error) => {
+    // 		console.log("load font err", error)
+    // 	})
+    // 	.finally(() => {
+    // 		// 加载字体完成
+    // 		console.log("load font finish", fontName)
+    // 	});
+}
+
+
+/**
+ * 加载单个字体
+ * @param fontFile 字体文件
+ * @param fontData 字体数据
+ */
+export const loadSingleFont = async (fontFile: any, fontData: XmlData) => {
+    try {
+        let fontName = parser.findAttributeValueByKey(fontData, AttributeKey.FontName);
+        // 规整字体名称
+        fontName = normalizeFontName(fontName);
+
+        if (isDefaultFont(fontName)) {
+            await loadDefaultFont(fontName);
+        } else {
+            let fontBytes = await fontFile.async("uint8array");
+            await loadFontByArrayBuffer(fontName, fontBytes);
+            loadedFonts.set(fontName, true)
+        }
+    } catch (e) {
+        console.error("加载字体出错", e);
+    }
+}
+
+/**
+ * 加载本地的默认字体，比如simSun等，加载到一个全局变量的map中表示已经加载
+ */
+export const loadLocalDefaultFonts = async () => {
+    try {
+        loadedFonts.clear()
+        if (!loadedFonts.has("SimSun")) {
+            const fontPath = `./assets/fonts/simsun.ttf`;
+            await loadLocalDefaultFont("SimSun", fontPath)
+            loadedFonts.set("SimSun", true)
+        }
+        if (!loadedFonts.has("NSimSun")) {
+            const fontPath = `./assets/fonts/Nsimsun.ttf`;
+            await loadLocalDefaultFont("NSimSun", fontPath)
+            loadedFonts.set("NSimSun", true)
+        }
+        if (!loadedFonts.has("SimHei")) {
+            const fontPath = `/assets/fonts/simhei.ttf`;
+            await loadLocalDefaultFont("SimHei", fontPath)
+            loadedFonts.set("SimHei", true)
+        }
+        if (!loadedFonts.has("SimKai")) {
+            const fontPath = `/assets/fonts/simkai.ttf`;
+            await loadLocalDefaultFont("SimKai", fontPath)
+            loadedFonts.set("SimKai", true)
+        }
+        if (!loadedFonts.has("SimFang")) {
+            const fontPath = `/assets/fonts/SimFang.ttf`;
+            await loadLocalDefaultFont("SimFang", fontPath)
+            loadedFonts.set("SimFang", true)
+        }
+        if (!loadedFonts.has("Courier")) {
+            const fontPath = `/assets/fonts/Courier.otf`;
+            await loadLocalDefaultFont("Courier", fontPath)
+            loadedFonts.set("Courier", true)
+        }
+        if (!loadedFonts.has("Courier-Bold")) {
+            const fontPath = `/assets/fonts/Courier-Bold.otf`;
+            await loadLocalDefaultFont("Courier-Bold", fontPath)
+            loadedFonts.set("Courier-Bold", true)
+        }
+        if (!loadedFonts.has("Courier-BoldOblique")) {
+            const fontPath = `/assets/fonts/Courier-BoldOblique.otf`;
+            await loadLocalDefaultFont("Courier-BoldOblique", fontPath)
+            loadedFonts.set("Courier-BoldOblique", true)
+        }
+        if (!loadedFonts.has("FangSong_GB2312")) {
+            const fontPath = `/assets/fonts/FangSong_GB2312.otf`;
+            await loadLocalDefaultFont("FangSong_GB2312", fontPath)
+            loadedFonts.set("FangSong_GB2312", true)
+        }
+        if (!loadedFonts.has("Helvetica-Bold")) {
+            const fontPath = `/assets/fonts/Helvetica-Bold.otf`;
+            await loadLocalDefaultFont("Helvetica-Bold", fontPath)
+            loadedFonts.set("Helvetica-Bold", true)
+        }
+        if (!loadedFonts.has("Helvetica")) {
+            const fontPath = `/assets/fonts/Helvetica.otf`;
+            await loadLocalDefaultFont("Helvetica", fontPath)
+            loadedFonts.set("Helvetica", true)
+        }
+        if (!loadedFonts.has("Helvetica-Oblique")) {
+            const fontPath = `/assets/fonts/Helvetica-Oblique.otf`;
+            await loadLocalDefaultFont("Helvetica-Oblique", fontPath)
+            loadedFonts.set("Helvetica-Oblique", true)
+        }
+        if (!loadedFonts.has("Helvetica-BoldOblique")) {
+            const fontPath = `/assets/fonts/Helvetica-BoldOblique.ttf`;
+            await loadLocalDefaultFont("Helvetica-BoldOblique", fontPath)
+            loadedFonts.set("Helvetica-BoldOblique", true)
+        }
+        if (!loadedFonts.has("Times-Roman")) {
+            const fontPath = `/assets/fonts/Times-Roman.otf`;
+            await loadLocalDefaultFont("Times-Roman", fontPath)
+            loadedFonts.set("Times-Roman", true)
+        }
+        if (!loadedFonts.has("Times-Bold")) {
+            const fontPath = `/assets/fonts/Times-Bold.otf`;
+            await loadLocalDefaultFont("Times-Bold", fontPath)
+            loadedFonts.set("Times-Bold", true)
+        }
+        if (!loadedFonts.has("Times-Italic")) {
+            const fontPath = `/assets/fonts/Times-Italic.otf`;
+            await loadLocalDefaultFont("Times-Italic", fontPath)
+            loadedFonts.set("Times-Italic", true)
+        }
+        if (!loadedFonts.has("Times-BoldItalic")) {
+            const fontPath = `/assets/fonts/Times-BoldItalic.otf`;
+            await loadLocalDefaultFont("Times-BoldItalic", fontPath)
+            loadedFonts.set("Times-BoldItalic", true)
+        }
+        if (!loadedFonts.has("ZapfDingbats")) {
+            const fontPath = `/assets/fonts/ZapfDingbats.otf`;
+            await loadLocalDefaultFont("ZapfDingbats", fontPath)
+            loadedFonts.set("ZapfDingbats", true)
+        }
+        if (!loadedFonts.has("xbst")) {
+            const fontPath = `/assets/fonts/xbst.ttf`;
+            await loadLocalDefaultFont("xbst", fontPath)
+            loadedFonts.set("xbst", true)
+        }
+        if (!loadedFonts.has("ArialMT")) {
+            const fontPath = `/assets/fonts/ArialMT.ttf`;
+            await loadLocalDefaultFont("ArialMT", fontPath)
+            loadedFonts.set("ArialMT", true)
+        }
+    } catch (e) {
+        console.error("加载本地字体出错", e);
+    }
+}
+
+/**
+ * 默认字体，同PDF的14种内置默认字体
+ */
+const defaultFonts = [
+    'Times-Roman',
+    'Times-Bold',
+    'Times-Italic',
+    'Times-BoldItalic',
+    'Helvetica',
+    'Helvetica-Bold',
+    'Helvetica-Oblique',
+    'Helvetica-BoldOblique',
+    'Courier',
+    'Courier-Bold',
+    'Courier-Oblique',
+    'Courier-BoldOblique',
+    'Symbol',
+    'ZapfDingbats'
+];
+
+/**
+ * 判断是否为默认字体
+ * @param fontName 字体名称
+ * @returns 是否为默认字体
+ */
+export const isDefaultFont = (fontName: string): boolean => {
+    return defaultFonts.includes(fontName);
+}
+
+/**
+ * 加载默认字体
+ * @param fontName 字体名称
+ */
+export const loadDefaultFont = async (fontName: string) => {
+    if (!isDefaultFont(fontName)) {
+        return;
+    }
+    try {
+        // 修改字体文件路径
+        const fontPath = `/assets/fonts/${fontName}.otf`;
+        await loadOTFFont(fontName, fontPath)
+    } catch (error) {
+        console.error(`加载字体 ${fontName} 时出错:`, error);
+        throw error;
+    }
+}
+
+export const loadLocalDefaultFont = async (fontName: string, fontPath: string) => {
+    try {
+        await loadOTFFont(fontName, fontPath)
+    } catch (error) {
+        console.error(`加载字体 ${fontName} 时出错:`, error);
+    }
+}
+
+/**
+ * 加载 OTF 字体并添加到 @font-face
+ * @param {string} fontName 字体名称
+ * @param {string} fontPath 字体文件路径
+ * @returns {Promise<void>}
+ */
+export async function loadOTFFont(fontName: string, fontPath: string) {
+    try {
+        // 检查字体文件是否已加载
+        if (document.fonts.check(`1em ${fontName}`)) {
+            return;
+        }
+        // 加载字体文件
+        const response = await fetch(fontPath);
+        if (!response.ok) {
+            console.error(`无法加载字体文件: ${fontName}`)
+            return;
+        }
+
+        // 获取字体文件的 ArrayBuffer
+        const fontData = await response.arrayBuffer();
+        const font = new FontFace(fontName, fontData);
+        // 加载字体
+        let loadRes = await font.load();
+        // 将字体添加到 document.fonts
+        (document as any).fonts.add(font);
+    } catch (error) {
+        console.error(`加载字体 ${fontName} 时出错:`, error);
+        throw error;
+    }
+}
+

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

@@ -0,0 +1,259 @@
+import { XmlData } from "./ofdData"
+import { OfdDocument } from "./ofdDocument"
+import { OfdPageContainer } from "./elements/ofdPageContainer"
+import { setPageScal } from "./utils/utils"
+import { AttributeKey } from "./attrType"
+import { getDefaultScale } from "./utils/elementUtils"
+
+/**
+ * OfdRender 类用于渲染 OFD 文档。
+ *
+ * @class OfdRender
+ * @property {OfdDocument} ofdDocument - OFD 文档对象
+ * @property {XmlData[]} pages - 文档的页面数据
+ * @property {HTMLDivElement | null} rootContainer - 整个渲染的根容器
+ */
+export class OfdRender {
+	ofdDocument: OfdDocument
+	pages: XmlData[]
+	scrollContainer: HTMLDivElement = document.createElement('div') // 滚动容器，用于监听滚动事件
+	rootContainer: HTMLDivElement = document.createElement('div') // 整个渲染的根页面，要放置到这个上面来
+	currentPageIndex: number = 1; // 当前页面索引
+
+	constructor(ofdDocument: OfdDocument) {
+		this.ofdDocument = ofdDocument
+		this.pages = this.ofdDocument.pages
+	}
+
+	/**
+	 * 使用自定义的div来渲染OFD文档
+	 * @param width 宽度
+	 * @param height 高度
+	 * @param pageWrapStyle 页面的样式
+	 * @returns
+	 */
+	renderOfdWithSize(width: string, height: string, pageWrapStyle: string | null = null): HTMLDivElement {
+		// 创建外层容器div
+		const containerDiv = document.createElement('div');
+		containerDiv.style.cssText = `height: ${height}; width: ${width};`;
+		// 设置默认scale
+		let scale = getDefaultScale(this.ofdDocument);
+		this.renderOfdWithScale(containerDiv, scale, pageWrapStyle);
+		return containerDiv
+	}
+
+	/**
+	 * 使用自定义的div来渲染OFD文档
+	 * @param customDiv 自定义的div
+	 * @param pageWrapStyle 页面的样式
+	 */
+	renderOfdWithCustomDiv(customDiv: HTMLDivElement, pageWrapStyle: string | null = null) {
+		// 获取默认缩放比例
+		let scale = getDefaultScale(this.ofdDocument);
+		this.renderOfdWithScale(customDiv, scale, pageWrapStyle)
+		return this.scrollContainer
+	}
+
+	renderOfdWithPageIndexWithScale(pageIndex: number, customDiv: HTMLDivElement, pageWrapStyle: string | null = null, scale: number) {
+		setPageScal(scale)
+		this.renderOfdWithPageIndex(pageIndex, customDiv, pageWrapStyle)
+	}
+
+	renderOfdWithPageIndex(pageIndex: number, customDiv: HTMLDivElement, pageWrapStyle: string | null = null) {
+		this.#renderPage(pageIndex, customDiv, pageWrapStyle)
+	}
+
+	changeScale(scale: number){
+		setPageScal(scale)
+	}
+
+	renderOfdWithScale(rootDiv: HTMLDivElement, scale: number, pageWrapStyle: string | null = null) {
+		setPageScal(scale)
+		// 新建一个根的div来包裹整个渲染的ofd文档的内容
+		this.ofdDocument.rootContainer = rootDiv
+		this.render(rootDiv, pageWrapStyle)
+	}
+
+	render(rootContainer: HTMLDivElement, wrapStyle: string | null) {
+		this.rootContainer = rootContainer
+		// 渲染页面
+		this.#renderPages(rootContainer, wrapStyle)
+		// 给scrollContainer添加滑动的css
+		// this.scrollContainer.style.cssText = `
+		// 	overflow-y: auto;
+		// 	overflow-x: hidden;
+		// 	height: 100%;
+		// 	width: 100%;
+		// 	scroll-behavior: smooth;
+		// `;
+		this.scrollContainer.appendChild(rootContainer)
+		// 只有当页面数量大于1时才添加滚动页面监听
+		if (this.pages.length > 1) {
+			// 渲染完之后给scrollContainer添加滚动事件
+			this.addScrollListener(this.scrollContainer);
+		}
+	}
+
+	/**
+	 * 渲染页面内容，这里是根据每个page数据来渲染，而每个page包含了content和模板等
+	 * @private
+	 */
+	#renderPages(rootContainer: HTMLDivElement, wrapStyle: string | null) {
+		try {
+			for (let i = 0; i < this.pages.length; i++) {
+				this.#renderPage(i, rootContainer, wrapStyle);
+			}
+		} catch (error) {
+			console.log("render error", error)
+		}
+	}
+
+	#renderPage(pageIndex: number, rootContainer: HTMLDivElement, wrapStyle: string | null = null) {
+		let pageData = this.pages[pageIndex]
+		let pageContainer = new OfdPageContainer(this.ofdDocument, pageData, rootContainer)
+		// 为每个页面容器添加一个独特的ID
+		const pageId = `ofd-page-${pageIndex + 1}`;
+		let pageView = pageContainer.getPageElement()
+		pageView.setAttribute(AttributeKey.ID, pageId);
+		if (wrapStyle) {
+			let tempStyle = pageView.getAttribute("style") || ""
+			tempStyle += wrapStyle
+			pageView.setAttribute("style", tempStyle)
+		}
+		rootContainer!.appendChild(pageView)
+	}
+
+	/**
+	 * 放大文档
+	 * 每次放大 10%
+	 */
+	zoomIn(): void {
+		if (this.rootContainer) {
+			const currentScale = parseFloat(this.rootContainer.dataset.scale || '1');
+			const newScale = currentScale * 1.1; // 每次放大 10%
+			this.applyZoom(this.rootContainer, newScale);
+		}
+	}
+
+	/**
+	 * 缩小文档
+	 * 每次缩小 10%，但不小于 0.1
+	 */
+	zoomOut(): void {
+		if (this.rootContainer) {
+			const currentScale = parseFloat(this.rootContainer.dataset.scale || '1');
+			const newScale = Math.max(currentScale * 0.9, 0.1); // 每次缩小 10%，但不小于 0.1
+			this.applyZoom(this.rootContainer, newScale);
+		}
+	}
+
+	/**
+	 * 应用指定的缩放比例
+	 * @param newScale 新的缩放比例
+	 */
+	public applyZoom(rootContainer: HTMLDivElement, newScale: number): void {
+		if (rootContainer) {
+			if (!rootContainer.dataset.originalWidth) {
+				rootContainer.dataset.originalWidth = rootContainer.offsetWidth.toString();
+			}
+			const originalWidth = parseFloat(rootContainer.dataset.originalWidth);
+
+			// 应用缩放
+			rootContainer.style.transform = `scale(${newScale})`;
+			rootContainer.style.transformOrigin = 'top left';
+			rootContainer.dataset.scale = newScale.toString();
+
+			// 调整内容大小，但保持原始尺寸
+			rootContainer.style.width = `${originalWidth}px`;
+			rootContainer.style.height = 'auto';
+
+			// 调整父容器和内容位置
+			this.adjustContainerAndPosition(rootContainer, originalWidth, newScale);
+		}
+	}
+
+	/**
+	 * 调整容器和内容的位置
+	 * @param originalWidth 原始宽度
+	 * @param scale 缩放比例
+	 */
+	private adjustContainerAndPosition(rootContainer: HTMLDivElement, originalWidth: number, scale: number): void {
+		if (rootContainer && rootContainer.parentElement) {
+			const parentElement = rootContainer.parentElement;
+			const scaledWidth = originalWidth * scale;
+			const scaledHeight = rootContainer.offsetHeight * scale;
+
+			// 设置父容器大小为缩放后的大小
+			parentElement.style.width = `${scaledWidth}px`;
+			parentElement.style.height = `${scaledHeight}px`;
+
+			// 计算并设置边距以居中内容
+			const marginLeft = Math.max((parentElement.offsetWidth - scaledWidth) / 2, 0);
+			const marginTop = Math.max((parentElement.offsetHeight - scaledHeight) / 2, 0);
+
+			rootContainer.style.marginLeft = `${marginLeft}px`;
+			rootContainer.style.marginTop = `${marginTop}px`;
+
+			// 确保父容器可以滚动
+			// parentElement.style.overflow = 'auto';
+		}
+	}
+
+	/**
+	 * 重置缩放到初始比例
+	 */
+	public resetZoom(): void {
+		this.rootContainer && this.applyZoom(this.rootContainer, 1);
+	}
+
+	/**
+	 * 获取滚动容器
+	 * @returns
+	 */
+	public getScrollContainer(): HTMLDivElement {
+		return this.scrollContainer
+	}
+
+	/**
+	 * 添加滚动页面监听
+	 * @param rootContainer
+	 */
+	private addScrollListener(rootContainer: HTMLDivElement): void {
+		rootContainer.setAttribute(AttributeKey.ID, "ofd-scroll-container");
+		const pages = rootContainer.querySelectorAll('[id^="ofd-page-"]');
+
+		let debounceTimer: number | any = null;
+		const debounceDelay = 200; // 200毫秒的防抖延迟
+
+		rootContainer.addEventListener('scroll', () => {
+			if (debounceTimer) {
+				clearTimeout(debounceTimer);
+			}
+
+			debounceTimer = setTimeout(() => {
+				const containerRect = rootContainer.getBoundingClientRect();
+				for (let index = 0; index < pages.length; index++) {
+					const page = pages[index] as HTMLElement;
+					const pageRect = page.getBoundingClientRect();
+					// 判断页面是否至少有1/5在视图中
+					const pageVisibleHeight = Math.min(pageRect.bottom, containerRect.bottom) - Math.max(pageRect.top, containerRect.top);
+					const pageOneFilthHeight = pageRect.height / 5;
+					if (pageVisibleHeight >= pageOneFilthHeight) {
+						let tempPageIndex = index + 1;
+						if (tempPageIndex !== this.currentPageIndex) {
+							this.currentPageIndex = tempPageIndex;
+							// 创建并分发自定义事件
+							const event = new CustomEvent('ofdPageChange', {
+								detail: { pageIndex: tempPageIndex, pageId: page.id }
+							});
+							window.dispatchEvent(event);
+						}
+						break; // 找到第一个满足条件的页面后退出循环
+					}
+				}
+			}, debounceDelay);
+		});
+	}
+}
+
+