@shijiu/jsview 1.9.731 → 1.9.759

package/dom/jsview-dom/src/dom-wrapper/node/DivElement.js

@@ -1,498 +0,0 @@
-/* eslint-disable no-unused-vars */
-/* eslint-disable no-extra-boolean-cast */
-import Forge from "../../engine-js/ForgeDefine";
-import Element from "./Element";
-import ForgeExtension from "../ForgeExtension";
-import StyleDeclaration from "../style/StyleDeclaration";
-import sTextStylePackMap from "../style/TextStylePackMap";
-import StyleValue from "../style/StyleValue";
-class DivElement extends Element {
-    constructor() {
-        super();
-
-        this.jsvContentView = null;
-        this.jsvRefedImgTex = null;
-        this.jsvTextLatexEnable = false;
-        this.jsvEmoji = false;
-        this.jsvTextAlignMinWidth = NaN;
-        this.jsvEmptyRect = null;
-    }
-
-    jsvGetTagName() {
-        return Element.TAG.DIV;
-    }
-
-    get textContent() {
-        return this.jsvStore.textContent;
-    }
-
-    set textContent(text) {
-        // console.log("Element.set textContent() ========================= parent=" + this.parentNode, " text=" + text);
-        if (!text && !this.jsvStore.textContent) {
-            // vue 中无文字节点也会触发textContext，在此避免多余处理
-            return;
-        }
-
-        this.jsvStore.textContent = text;
-        this.jsvStore.clientWidth = NaN;
-
-        if (!this.jsvContentView) {
-            this.jsvContentView = new Forge.LayoutView();
-            this.jsvMainView.AddView(this.jsvContentView);
-        }
-        if (!!this.parentElement) {
-            this.jsvFlushViewForeground();
-        }
-    }
-
-    // 重载clientWidth，用于触发获取文字宽度这个比较花费性能的API
-    // 达到按需调用的目的
-    get clientWidth() {
-        const width = this.style.width;
-        if (!!width || width === 0) {
-            return width;
-        }
-
-        if (!!this.jsvStore.textContent) {
-            if (!isNaN(this.jsvStore.clientWidth)) {
-                return this.jsvStore.clientWidth;
-            }
-
-            const textParams = {
-                str: this.jsvStore.textContent,
-                font: this.style.fontFamily,
-                size: this.style.fontSize,
-                italic: this.style.fontStyle,
-                bold: this.style.fontWeight,
-            };
-
-            this.jsvStore.clientWidth = ForgeExtension.GetTextWidth(textParams);
-            // console.warn("DivElement.clientWidth() clientWidth=" + this.jsvStore.clientWidth);
-            return this.jsvStore.clientWidth;
-        }
-
-        return super.clientWidth;
-    }
-
-    jsvOnLoadForgeView() {
-        if (!!this.style.borderImage) {
-            this.jsvMaskView = new Forge.NinePatchView();
-        }
-
-        super.jsvOnLoadForgeView();
-    }
-
-    jsvCallbackOnUnloadForgeView() {
-        return this.jsvOnUnloadForgeView.bind(this);
-    }
-
-    jsvOnUnloadForgeView() {
-        ForgeExtension.UnrefImgTexSize(this.jsvRefedImgTex);
-        this.jsvRefedImgTex = null;
-    }
-
-    jsvOnStyleChanged(styleTypes) {
-        // console.log("DivElement.jsvOnStyleChanged() styleTypes=", styleTypes);
-        super.jsvOnStyleChanged(styleTypes);
-
-        this.jsvStore.textStylePack = null; // 当Style更新时，用于描画文字的stylePack属性需要重做
-
-        let flushedInForeground = !!styleTypes[StyleDeclaration.TYPE.FOREGROUND];
-        if (styleTypes[StyleDeclaration.TYPE.LAYOUT_SIZE]) {
-            if (!flushedInForeground) {
-                this.jsvFlushViewForeground();
-            }
-        }
-        if (styleTypes[StyleDeclaration.TYPE.FOREGROUND]) {
-            this.jsvFlushViewForeground();
-        }
-        if (styleTypes[StyleDeclaration.TYPE.BORDER]) {
-            this.jsvFlushViewBorder();
-        }
-    }
-
-    jsvFlushViewForeground() {
-        // console.log("DivElement.jsvFlushViewForeground() this=", this);
-        if (!this.jsvContentView) {
-            return;
-        }
-
-        this.jsvContentView.ClearViews();
-        if (!!this.jsvStore.textContent) {
-            let auto_height = typeof this.style.height == 'undefined' || this.style.height == 0;
-            let text_load_callback = auto_height ? (texture_info, params) => {
-                this.jsvStore.clientHeight = texture_info.height
-            } : null;
-
-            let text_view = this.jsvBuildTextView(text_load_callback);
-
-            // 自动适配高度
-            if (auto_height) {
-                text_view.EnableAutoHeight();
-            }
-
-            this.jsvContentView.AddView(text_view);
-        }
-    }
-
-    jsvBuildTextView(text_load_callback) {
-        // 若文字Style未变化，仅文字内容发生变化，则可以沿用上一次的style pack
-        let style_pack = this.jsvStore.textStylePack;
-
-        // 尝试使用 JsvStyleClass 来直接构建 TextStylePack
-        if (style_pack === null) {
-            style_pack = this._jsvGetClassNameCache();
-        }
-
-        if (style_pack === null) {
-            // (慢速)解析 style 属性来创建 style_pack
-
-            // 补填文字JsView附加属性
-            if (!this.style.jsvCustomStyles.textLineAlign) {
-                // 若设置了line height，则进行行内居中
-                // TODO: lineHeight后续调整后不会跟随，因为不好识别设置的的这个textLineAlign是来自JsvStyleClass还是lineHeight
-                // TODO: 若后续需要识别，或许需要新加一个叫textAutoLineAlign来专门识别来自lineHeight的？
-                this.style.jsvCustomStyles.textLineAlign = (!!this.style.lineHeight ? 'middle' : 'top');
-            }
-            if (!this.style.jsvCustomStyles.textVerticalAlign) {
-                this.style.jsvCustomStyles.textVerticalAlign = "top";
-            }
-            let pack_data = DivElement._jsvStyleToPackData(
-                this.style
-            );
-
-            let map_token = JSON.stringify(pack_data);
-            let cached_pack = sTextStylePackMap.getTempPack(map_token);
-            if (!cached_pack) {
-                // 创建cache pack
-                cached_pack = Forge.sTextStyleCache.StyleToPack(pack_data);
-
-                // 记录临时缓存
-                sTextStylePackMap.putTempPack(map_token, cached_pack);
-            }
-
-            style_pack = cached_pack;
-        }
-
-        // 缓存style pack
-        this.jsvStore.textStylePack = style_pack;
-
-        // Line height:
-        // 优先使用设置的lineHeight，
-        // 其次使用FontSize计算一个，
-        // FontSize和LineHeight都未设置场景，使用14px作为lineHeight
-        // ParseInt(lineHeight)的作用: lineHeight经常被写成字符串"??px"
-        let line_height = (!!this.style.lineHeight ? parseInt(this.style.lineHeight) : (!!this.style.fontSize ? this.style.fontSize * 1.3 : 14));
-
-        // Text Area
-        let text_width = this.style.width;
-        let text_auto_width = false;
-        if (typeof text_width == "undefined") {
-            text_width = this.clientWidth; // 触发通过native接口量取文字程度处理
-            text_auto_width = true;
-        }
-
-        if (this.jsvTextAlignMinWidth) {
-            if (text_width < this.jsvTextAlignMinWidth) {
-                text_width = this.jsvTextAlignMinWidth;
-            }
-        }
-
-        if (text_width > 3000) {
-            // 文字过长，大于GL描画最大宽度，将分段排列
-            if (!text_auto_width) {
-                console.error(`text too long. str=${this.jsvStore.textContent}`);
-                return null;
-            } else {
-                console.log(`text too long, start to break down. width(${text_width})`)
-            }
-
-            let text_view = new Forge.LayoutView();
-
-            // 未考虑DesigneMapWidth 和 text scale的情况下先初略计算
-            let max_text_len = Math.floor(2048 / this.style.fontSize);
-            let left_text_len = this.jsvStore.textContent.length;
-            let text_read_idx = 0;
-            let view_left = 0;
-
-            let textParams = {
-                str: null,
-                font: this.style.fontFamily,
-                size: this.style.fontSize,
-                italic: this.style.fontStyle,
-                bold: this.style.fontWeight,
-            };
-
-            while (left_text_len > 0) {
-                // 使用 style_pack 创建 TextView
-                let sub_len = max_text_len < left_text_len ? max_text_len : left_text_len;
-                let sub_text = this.jsvStore.textContent.substr(text_read_idx, sub_len);
-                text_read_idx += sub_len;
-
-                // 计算区域宽度
-                textParams.str = sub_text;
-                let client_width = ForgeExtension.GetTextWidth(textParams);
-
-                let sub_text_view = Forge.sTextUtils.BuildTextView(
-                    ForgeExtension.TextureManager,
-                    sub_text,
-                    style_pack,
-                    text_read_idx === 0 ? text_load_callback : null, // 仅首个请求发送text callback来计算height
-                    { width: client_width, height: this.style.height },
-                    this.style.fontSize,
-                    line_height,
-                    true,
-                    this.jsvTextLatexEnable,
-                    this.jsvEmoji, this.jsvEmptyRect);
-                
-                text_view.AddView(sub_text_view, { x: view_left, y:0, width: client_width, height: this.style.height});
-                view_left += client_width; // 下一个view相对横移clientWidth
-
-                left_text_len -= sub_len;
-            }
-
-            return text_view;
-        } else {
-            // 使用 style_pack 创建 TextView
-            let text_view = Forge.sTextUtils.BuildTextView(
-                ForgeExtension.TextureManager,
-                this.jsvStore.textContent,
-                style_pack,
-                text_load_callback,
-                { width: text_width, height: this.style.height },
-                this.style.fontSize,
-                line_height,
-                true,
-                this.jsvTextLatexEnable,
-                this.jsvEmoji, this.jsvEmptyRect);
-
-            return text_view;
-        }
-    }
-
-    _jsvGetClassNameCache() {
-        // 返回由JsvStyleClass为关键字进行缓存的文字属性设置
-        // 条件:
-        // 1. 文字的主要属性全由 JsvStyleClass 提供，无直接通过style进行单独的设置项
-        // 2. JsvStyleClass 中确实有文字主要属性设置项
-
-        if (this.style.jsvNamedClassArray === null) {
-            // 无Class，不能使用Cache
-            return null;
-        }
-
-        // 检查是否有独立的文字主要属性
-        if (StyleDeclaration.JsvContainsTextMajor(this.style.jsvLockedProps)) {
-            return null;
-        }
-
-        let map_token = "";
-        for (let single_class of this.style.jsvNamedClassArray) {
-            // 检测普通JsvStyleClass也含有文字属性(attach.hasTextMajorStyle仍然为0的项目)
-            // PS: JsvTextStyleClass已经在StyleDeclaration.jsvApplyClasses中进行识别处理
-            let attach = single_class.getAttach();
-            if (attach.hasTextMajorStyle === 0) {
-                // 对普通JsvStyleClass进行检测文字属性
-                if (StyleDeclaration.JsvContainsTextMajor(single_class.getStyles())) {
-                    // 含有
-                    attach.hasTextMajorStyle = 2;
-                } else {
-                    // 不含
-                    attach.hasTextMajorStyle = 1;
-                }
-            }
-
-            if (attach.hasTextMajorStyle === 2) {
-                // 所有含有文字主要属性的Class
-                map_token += single_class.getName();
-            }
-        }
-
-        if (map_token.length > 0) {
-            let cached_pack = sTextStylePackMap.getPersistPack(map_token);
-            if (!cached_pack) {
-                // 创建 Forge.TextStylePack
-                let pack_data = DivElement._jsvStyleToPackData(
-                    this.style
-                );
-
-                cached_pack = Forge.sTextStyleCache.StyleToPack(pack_data);
-
-                // 记录Persist Pack Map
-                sTextStylePackMap.putPersistPack(map_token, cached_pack);
-            }
-
-            return cached_pack;
-        } else {
-            // 不能使用 ClassName 做出的Cache
-            return null;
-        }
-    }
-
-    static _jsvStyleToPackData(obj_style) {
-        // 将 element.style 转化成 TextStyleCache.StyleToPack 所需要的 style
-        let style_pack_data = {
-            textColor: obj_style.color ? obj_style.color : "#000000", // 默认黑色
-            font: obj_style.fontFamily,
-            italic: obj_style.fontStyle === 'italic',
-            bold: obj_style.fontWeight === 'bold',
-            hAlign: (!!obj_style.textAlign ? obj_style.textAlign : "start"),
-            vAlign: (!!obj_style.jsvCustomStyles.textLineAlign ? obj_style.jsvCustomStyles.textLineAlign : "middle"),
-            vAreaAlign: (!!obj_style.jsvCustomStyles.textVerticalAlign ? obj_style.jsvCustomStyles.textVerticalAlign : "top"),
-            textOverflow: (!!obj_style.textOverflow ? obj_style.textOverflow : "clip"),
-            wordWrap: (obj_style.wordWrap === 'break-word' ? 'break_word' : "normal"),
-            direction: (obj_style.direction === 'rtl' ? 'rtl' : 'ltr'),
-        };
-
-        if (obj_style.whiteSpace === 'nowrap') {
-            style_pack_data.wordWrap = "none"; // 强制不换行
-        }
-
-        // console.log("DivElement._jsvStyleToPackData() textContent=" + this.jsvStore.textContent + " style=", textStyle);
-        // Shadow解析
-        let text_shadow = (!!obj_style.textShadow ? obj_style.textShadow.split(" ") : undefined);
-        if (!!text_shadow) {
-            style_pack_data.shadow = {
-                shadowOffsetX: parseInt(text_shadow[0]),
-                shadowOffsetY: parseInt(text_shadow[1]),
-                shadowBlur: parseFloat(text_shadow[2]),
-                shadowColor: text_shadow[3],
-            };
-        }
-
-        // Stroke解析
-        let text_stroke = (obj_style.WebkitTextStroke ? obj_style.WebkitTextStroke.split(" ") : undefined);
-        if (text_stroke) {
-            style_pack_data.stroke = {
-                strokeWidth: parseInt(text_stroke[0]),
-                strokeColor: text_stroke[1]
-            }
-        }
-
-        return style_pack_data;
-    }
-
-    jsvFlushViewBorder() {
-        // console.warn("DivElement.jsvFlushViewBorder() borderImage=", this.style.borderImage);
-        if (!this.jsvMaskView) {
-            return;
-        }
-        if (!!this.style.clipPath) {
-            console.error("BorderImage is conflicting with ClipPath.");
-            return;
-        }
-
-        if (!!this.style.borderImage) {
-            if (!(this.jsvMaskView instanceof Forge.NinePatchView)) {
-                console.error("Error: style.borderImage NOT support dynamic adding");
-                return;
-            }
-
-            let imageWidth = StyleValue.ConvertPx(this.getAttribute("jsv-borderimage-width"));
-            let imageHeight = StyleValue.ConvertPx(this.getAttribute("jsv-borderimage-height"));
-            ForgeExtension.UnrefImgTexSize(this.jsvRefedImgTex);
-            if (!this.jsvRefedImgTex
-                || this.jsvRefedImgTex.Source !== this.style.borderImage.source.href) {
-                let size = (!!imageWidth && !!imageHeight) ? { width: imageWidth, height: imageHeight } : null;
-                if (this.style.borderImage.source.href) {
-                    this.jsvRefedImgTex = ForgeExtension.TextureManager.GetImage2(
-                        this.style.borderImage.source.href,
-                        false, size, Forge.ColorSpace.RGBA_8888);
-                } else {
-                    // 无效href, 不显示view
-                    this.jsvMaskView.ResetTexture(null);
-                    return;
-                }
-            }
-
-            if (!!imageWidth && !!imageHeight) {
-                console.log("Custom cache image size with: " + imageWidth + "/" + imageHeight);
-                ForgeExtension.SetImgTexSize(this.jsvRefedImgTex, {
-                    width: imageWidth,
-                    height: imageHeight,
-                })
-            }
-
-            const textureSetting = new Forge.ExternalTextureSetting(this.jsvRefedImgTex);
-            this.jsvMaskView.ResetTexture(textureSetting);
-            this.jsvMaskView.WaitTextureToResize(true);
-
-            // 添加引用，防止其他view延迟使用
-            ForgeExtension.RefImgTexSize(this.jsvRefedImgTex, function (imageSize) {
-                if (!this.jsvMaskView) {
-                    console.log("Found border view gone");
-                    return;
-                }
-
-                // 获取slice和width
-                let border_image_wide = this.style.borderImageWidth;
-                let border_image_slice = this.style.borderImage.slice;
-
-                // 对原图进行缩放处理(原图和显示图的比例在width和slice比例中体现)
-                let dsp_image_width = Math.floor(imageSize.width * border_image_wide.top / border_image_slice.top);
-                let dsp_image_height = Math.floor(imageSize.height * border_image_wide.left / border_image_slice.left);
-                this.jsvMaskView.SetImageDspSize(dsp_image_width, dsp_image_height);
-
-                let outset = (!!this.style.borderImageOutset
-                    ? this.style.borderImageOutset
-                    : StyleValue.ConvertRect());
-                // NinePatchView的Padding的意思和html不同，这里的padding指的是内容填充区域在图片中的位置
-                this.jsvMaskView.SetPadding({
-                    start: outset.left,
-                    width: Math.max(0, dsp_image_width - outset.left - outset.right),
-                }, {
-                    start: outset.top,
-                    width: Math.max(0, dsp_image_height - outset.top - outset.bottom),
-                });
-
-                // NinePatchView的repeat指的是拉伸区域, repeat区域最小尺度为1
-                this.jsvMaskView.SetRepeat([{
-                    start: border_image_wide.left,
-                    width: Math.max(0, dsp_image_width - border_image_wide.left * 2),
-                }], [{
-                    start: border_image_wide.top,
-                    width: Math.max(0, dsp_image_height - border_image_wide.top * 2),
-                }]);
-                // console.warn("DivElement.jsvFlushViewBorder(). style=", this.style);
-
-                this.jsvMaskView.WaitTextureToResize(false);
-            }.bind(this));
-        }
-    }
-
-    setAttribute(name, value) {
-        // 拦截文字处理信息
-        if (this.jsvTakeTextAttribute(name, value)) {
-            return;
-        }
-
-        super.setAttribute(name, value);
-    }
-
-    jsvTakeTextAttribute(name, value) {
-        if (name === "jsv_text_vertical_align") {
-            this.style.jsvCustomStyles.textVerticalAlign = value;
-            return true;
-        } else if (name === "jsv_text_line_align") {
-            this.style.jsvCustomStyles.textLineAlign = value;
-            return true;
-        } else if (name === "jsv_text_latex_enable") {
-            // 启动Latex文字显示模式
-            this.jsvTextLatexEnable = value === "true";
-            return true;
-        } else if (name === "jsv_text_align_minwidth") {
-            // 启用文字对齐的最小距离，用于不定长文字进行居中显示场景
-            this.jsvTextAlignMinWidth = parseInt(value);
-            return true;
-        } else if (name === "jsv_text_emoji") {
-            this.jsvEmoji = value === "true" || value === true;
-            return true;
-        } else if (name === "jsv_text_empty_rect") {
-            this.jsvEmptyRect = JSON.parse(value);
-        }
-
-        return false;
-    }
-}
-
-export default DivElement;