@shijiu/jsview 1.9.730 → 1.9.747

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

@@ -1,852 +0,0 @@
-/* eslint-disable no-unused-vars */
-/* eslint-disable no-extra-boolean-cast */
-/* eslint-disable */
-import Log from "../utils/Log";
-import Forge from "../../engine-js/ForgeDefine";
-import Node from "./Node";
-import FocusEvent from "../event/FocusEvent";
-import AnimationEvent from "../event/AnimationEvent";
-import StyleDeclaration from "../style/StyleDeclaration";
-import {JsvLazySyncCache, gSyncTimesCounter} from "../utils/JsvLazySyncCache";
-import ForgeExtension from "../ForgeExtension";
-import EventHandler from "../utils/EventHandler";
-
-class Element extends Node {
-    constructor(tag) {
-        // console.log("Element.constructor()");
-        super(Node.ELEMENT_NODE);
-        this.parentElement = null;
-        this.tagName = this.jsvGetTagName();
-
-        if(this.tagName === Element.TAG.STYLE) {
-            this.style = null;
-            this.jsvMainView = null;
-            this.jsvMaskView = null;
-        } else {
-            this.style = new StyleDeclaration();
-            this.jsvMainView = new Forge.LayoutView();
-            this.jsvMaskView = null;
-        }
-
-        this.jsvAnimation = null;
-
-        this.jsvStore = {
-            transition: null,
-            transitionTmp: null,
-            textContent: null,
-            textStylePack: null, // 文字StylePackCache缓存，若仅文字内容变化，则可以使用缓存
-            clientWidth: NaN,
-            clientHeight: NaN,
-            textureWidth: NaN,
-            textureHeight: NaN,
-            scopedAttributes: [],
-        };
-        this.jsvAttrChangedLazySync = null; // 记录需要延后同步的本地变化过的Attribute
-
-        this.instantSwapCallback = null;
-        this.eventHandlers = null;
-
-        this.jsvInheritClassDepth = null;
-        this.jsvHasInheritClassChildren = false;
-    }
-
-    appendChild(node) {
-        if (node.parentNode != null) {
-            this._moveChildNode(node, null);
-        } else {
-            // console.warn("Element.appendChild() this=", this, " child=", node);
-            super.appendChild(node);
-            this.jsvInsertChild(node, null);
-        }
-    }
-
-    removeChild(node) {
-        // console.warn("Element.removeChild() this=", this, " child=", node);
-        this.jsvRemoveChild(node);
-        super.removeChild(node);
-    }
-
-    insertBefore(node, beforeNode) {
-        if (node.parentNode != null) {
-            this._moveChildNode(node, beforeNode);
-        } else {
-            super.insertBefore(node, beforeNode);
-            this.jsvInsertChild(node, beforeNode);
-        }
-    }
-
-    _moveChildNode(node, beforeNode) {
-        // 支持keep alive的element move操作
-        let origin_parent = node.parentNode;
-        origin_parent.moveChild(node, this, beforeNode);
-
-        // forge move child
-        // beforeNode = this.jsvBackwardFindForgeView(beforeNode);
-        if (node.jsvMaskView) {
-            let parent_view = origin_parent.jsvMaskView ? origin_parent.jsvMaskView : origin_parent.jsvMainView
-            parent_view.MoveChildView(
-                node.jsvMaskView,
-                this.jsvMaskView ? this.jsvMaskView : this.jsvMainView,
-                beforeNode ? beforeNode.jsvMaskView : null
-            );
-            console.log("moving child");
-        } else {
-            // 非div的node执行move动作
-            console.log("moving not forge child");
-        }
-    }
-
-    get childElementCount() {
-        return this.childNodes.length;
-    }
-
-    get firstElementChild() {
-        const childCount = this.childNodes.length;
-        return (childCount > 0 ? this.childNodes[0] : null);
-    }
-    get lastElementChild() {
-        const childCount = this.childNodes.length;
-        return (childCount > 0 ? this.childNodes[childCount - 1] : null);
-    }
-
-    set className(value) {
-        // console.log("Element.set className() value=" + value);
-        this.setAttribute("class", value)
-    }
-
-    setAttribute(name, value) {
-        // console.log("Element.setAttribute() tag=" + this.tagName + ", name=" + name + ", value=" + value);
-        if(!name) {
-            return; 
-        }
-
-        if (name === "style") {
-            console.warn("directly style setting be ignored");
-            return;
-        }
-
-        this[name] = value;
-        // vue scoped时会设置此属性，利用Css的.class[prop]的性质设置<style scoped>
-        if (name.startsWith("data-v-")) {
-            this._jsvAppendScopedAttribute(name, 0);
-        } else if (name === "class") { // classNames设定
-            this._jsvSetClassNames(value, 0);
-        } else if (name === "jsv-inherit-class") { // 设置了这个属性后，自身的class会失效
-            this._jsvSetInheritClassDepth(parseInt(value));
-        } else if(name.startsWith(Element.ATTRIBUTE.JSVPREFIX)) {
-            name = name.replace(/-/g, '_'); // 兼容旧的ForgeJs
-            this.jsvSetAttrLazySync(name, Element.ATTRTYPE.JSV);
-        } else if (!window.JsView && name === "id") {
-            // 在PC上devtools中追加跟踪元素位置的便利性
-            if (this.jsvMainView.Element) {
-                this.jsvMainView.Element.id = value;
-            }
-        }
-    }
-
-    jsvSetAttrLazySync(name, attrib_type) {
-        if (!this.jsvAttrChangedLazySync) {
-            this.jsvAttrChangedLazySync = new JsvLazySyncCache("lazy-attr");
-            if (this.parentElement) {
-                // 晚于 jsvOnLoadForgeView, 要进行callback设置
-                this._jsvSetAttrLazySyncCallback();
-            }
-        }
-        this.jsvAttrChangedLazySync.setCacheProperty(name, attrib_type);
-    }
-
-    removeAttribute(name) {
-        // console.log("Element.removeAttribute() name=" + name);
-        this[name] = undefined;
-        if(name.startsWith(Element.ATTRIBUTE.JSVPREFIX)) {
-            this.jsvSetAttrLazySync(name, Element.ATTRTYPE.JSV);
-        }
-    }
-
-    getAttribute(name) {
-        // console.log("Element.getAttribute() name=" + name);
-        return this[name];
-    }
-
-    hasAttribute(name) {
-        console.log("Element.hasAttribute() name=" + name);
-        return !!this[name];
-    }
-
-    getBoundingClientRect() {
-        if (this.jsvMainView != null) {
-            return this.jsvMainView.GetBoundingClientRect();
-        } else {
-            return Promise.reject(new Error("getBoundingClientRect while jsvMainView is null."));
-        }
-    }
-
-
-    get clientWidth() {
-        return (isNaN(this.jsvStore.clientWidth) ? this.style.width : this.jsvStore.clientWidth);
-    }
-
-    get clientHeight() {
-        return (isNaN(this.jsvStore.clientHeight) ? this.style.height : this.jsvStore.clientHeight);
-    }
-
-    focus() {
-        console.log("Element.focus()");
-        if(!!document.activeElement) {
-            document.activeElement.onfocus();
-        }
-
-        let oldActiveElement = document.activeElement;
-        document.activeElement = this;
-
-        if (!!oldActiveElement) {
-            let blurEvent = new FocusEvent(FocusEvent.Type.BLUR);
-            blurEvent.target = oldActiveElement;
-            document.dispatchEvent(blurEvent);
-        }
-        let focusEvent = new FocusEvent(FocusEvent.Type.FOCUS);
-        document.dispatchEvent(focusEvent);
-    }
-
-    jsvInsertChild(node, beforeNode) {
-        // console.warn("Element.jsvInsertChild() this=", this, " child=", node);
-        node.parentElement = this;
-
-        if(node.nodeType === Node.ELEMENT_NODE
-        && node.tagName !== Element.TAG.STYLE) {
-            if (document.jsvIsReady === false) {
-                console.warn("Element.appendChild() Failed to append child to Forge. jsvIsReady=" + document.jsvIsReady);
-                return;
-            }
-
-            node.jsvOnLoadForgeView();
-            // 如果设置了layout，会触发jsvFlushViewLayout()
-            node.style.jsvSetChangedListener(node.jsvOnStyleChanged.bind(node));
-
-            beforeNode = this.jsvBackwardFindForgeView(beforeNode);
-            let layoutParams = node.jsvMaskView.GetLayoutParams();
-            this.jsvMainView.InsertView(node.jsvMaskView, 
-                (beforeNode ? beforeNode.jsvMaskView : null), 
-                layoutParams);
-            // console.log("Element.appendChild() node.layoutParams=", layoutParams);
-
-            if (node.jsvInheritClassDepth > 0
-            || node.jsvHasInheritClassChildren) {
-                this.jsvHasInheritClassChildren = true;
-            }
-        } else if (node.nodeType === Node.TEXT_NODE) {
-            this.textContent = node.textContent;
-        }
-    }
-
-    jsvGetProxyView(get_mask_view) {
-        if (get_mask_view) {
-            return this.jsvMaskView;
-        } else {
-            return this.jsvMainView;
-        }
-    }
-
-    jsvRemoveChild(node) {
-        node.parentElement = null;
-
-        node.jsvAttrChangedLazySync = null;
-        node.style?.jsvSetChangedListener(null);
-        node.style?.jsvDestory();
-
-        node.jsvAnimation?.Cancel();
-        node.jsvAnimation = null;
-        if(node instanceof Element) {
-            this.jsvMainView.RemoveView(node.jsvMaskView);
-        }
-    }
-
-    jsvOnLoadForgeView() {
-        if (!!this.style.clipPath
-        || !!this.style.overflow
-        || !!this.style.objectFit) {
-            if(!!this.jsvMaskView) {
-                throw Error("Jsview: jsvMaskView is conflicting.");
-            }
-            this.jsvMaskView = new Forge.ClipView();
-        } else if (!this.jsvMaskView) {
-            this.jsvMaskView = this.jsvMainView;
-        }
-
-        if(this.jsvMaskView !== this.jsvMainView) {
-            this.jsvMaskView.AddView(this.jsvMainView);
-        }
-
-        // 注册Element离开tree不再显示时(时机同LayoutView从RootView Tree拿掉)的回调
-        let unload_view_callback = this.jsvCallbackOnUnloadForgeView();
-        if (unload_view_callback) {
-            this.jsvMainView.RegisterDetachCallback(unload_view_callback);
-        }
-
-        this._jsvSetAttrLazySyncCallback();
-    }
-
-    _jsvSetAttrLazySyncCallback() {
-        if (this.jsvAttrChangedLazySync) {
-            let _this = this;
-            this.jsvAttrChangedLazySync.setOnSyncCallback((caches) => {
-                let jsv_attr = null;
-                let css_attr = null;
-                for (let key in caches) {
-                    if (_this.hasOwnProperty(key)) {
-                        switch(caches[key]) {
-                            case Element.ATTRTYPE.JSV: {
-                                if (jsv_attr == null) {
-                                    jsv_attr = {};
-                                }
-                                jsv_attr[key] = _this[key];
-                                break;
-                            }
-                            case Element.ATTRTYPE.CSS: {
-                                if (css_attr == null) {
-                                    css_attr = {};
-                                }
-                                css_attr[key] = _this[key];
-                                break;
-                            }
-                        }
-                    }
-                }
-
-                if (jsv_attr) {
-                    // 有jsv同步内容
-                    jsv_attr = _this.jsvSetElementPropOnMask(jsv_attr); // 先作用于本element的根view
-                    // 剩余内容再作用到基础view上
-                    _this.jsvSetElementProp(jsv_attr);    
-                }
-
-                if (css_attr) {
-                    // 有css同步内容
-                    _this.jsvOnAttrLazySync(css_attr);
-                }
-            });    
-        }
-    }
-
-    jsvOnAttrLazySync(caches) {
-        // nothing for element
-    }
-
-    jsvSetElementProp(caches) {
-        if (this.jsvMainView) {
-            this.jsvMainView.SetElementProp(caches, ForgeExtension.RootActivity);
-        }
-    }
-
-    jsvSetElementPropOnMask(caches) {
-        // jsv_poster_on_top 必须设置给本element的主view上
-        if (caches.hasOwnProperty('jsv_poster_on_top')) {
-            let { jsv_poster_on_top, ...others } = caches;
-            this.jsvMaskView.SetElementProp({ jsv_poster_on_top }, ForgeExtension.RootActivity);
-            return others;
-        }
-        return caches;
-    }
-
-    // 若Element关系自身从系统中拿掉的时机，则Override并返回callback函数
-    jsvCallbackOnUnloadForgeView() {
-        return null;
-    }
-
-    jsvOnStyleChanged(styleTypes) {
-        // Log.D("Element.jsvOnStyleChanged() styleTypes=", styleTypes);
-        let flushedInLayoutSize = !!styleTypes[StyleDeclaration.TYPE.LAYOUT_SIZE];
-        let flushTransitioned = false;
-        if (styleTypes[StyleDeclaration.TYPE.LAYOUT_POS]) {
-            if(!flushedInLayoutSize) {
-                this.jsvFlushViewLayout();
-                // Layout刷新中带有Transform和transition的刷新
-                flushTransitioned = true;
-            }
-        }
-        if (styleTypes[StyleDeclaration.TYPE.LAYOUT_SIZE]) {
-            this.jsvFlushViewLayout();
-            // Layout刷新中带有Transform和transition的刷新
-            flushTransitioned = true;
-        }
-
-        if (styleTypes[StyleDeclaration.TYPE.TRANSFORM] && !flushTransitioned) {
-            // 单独刷新CSS Transform
-            this.jsvMaskView.ResetCssTransform(this.style.transform, this.style.transformOrigin);
-            // Transform变化触发Transition刷新
-            this.jsvFlushViewTransition();
-            flushTransitioned = true;
-        }
-
-        if (styleTypes[StyleDeclaration.TYPE.BACKGROUND]) {
-            this.jsvFlushViewBackground();
-        }
-
-        if (styleTypes[StyleDeclaration.TYPE.ANIMATION]) {
-            this.jsvFlushViewAnimation();
-        }
-
-        if (styleTypes[StyleDeclaration.TYPE.TRANSITION] && !flushTransitioned) {
-            // 更新transition设置，触发transition动作
-            this.jsvFlushViewTransition();
-        }
-
-        //更新事件
-        this.jsvFlushEventHandlers();
-    }
-
-    jsvFlushEventHandlers() {
-        if (this.eventHandlers === null) {
-            this.eventHandlers = EventHandler.getHandlers(this);
-            if (this.eventHandlers && this.eventHandlers.onClick) {
-                if (this.jsvMainView) {
-                    this.jsvMainView.EnableDivTouch(this, null);
-                }
-            }
-        }
-    }
-
-    jsvApplyObjectFit(origin_layout) {
-        return null; // 支持ObjectFit属性的元素会重载此方法(例如img/video)
-    }
-
-    jsvFlushViewLayout() {
-        if (!!this.style.clipPath
-        || !!this.style.overflow
-        || !!this.style.objectFit) {
-            if(!this.jsvMaskView) {
-                console.error("Element.jsvFlushViewLayout() InvalidOpt: clippath=", this.style.clipPath);
-                return;
-            }
-        }
-
-        const origin_layout =  {
-            x: isNaN(this.style.left) ? 0 : this.style.left, // x, y不设置时为undefined
-            y: isNaN(this.style.top) ? 0 : this.style.top,
-            width: isNaN(this.style.width) ? 0 : this.style.width,
-            height: isNaN(this.style.height) ? 0 : this.style.height,
-        };
-
-        let clip_for_object_fit = null;
-        if (!!this.style.objectFit) {
-            clip_for_object_fit = this.jsvApplyObjectFit(origin_layout);
-            if (this.style.objectFit === StyleDeclaration.ObjectFit.FILL) {
-                // Fill的场景，不需要进行clip
-                clip_for_object_fit = null;
-            }
-        }
-
-        // 更新CSS Transform变化
-        this.jsvMaskView.ResetCssTransform(this.style.transform, this.style.transformOrigin);
-
-        // 更新perspective(启动3D 透视功能)
-        if (this.style.perspective && this.style.perspective > 0) {
-            let origin = this.style.perspectiveOrigin ? this.style.perspectiveOrigin : null;
-            this.jsvMainView.SetPerspective(this.style.perspective, origin);
-        }
-
-        // 设置3D的背面不可见功能
-        if (this.style.backfaceVisibility) {
-            this.jsvMainView.SetBackfaceVisibility(this.style.backfaceVisibility == "visible" ? true : false)
-        }
-
-        // 设置3D的tranformStyle设定
-        if (this.style.transformStyle) {
-            this.jsvMainView.SetTransformStyle(this.style.transformStyle);
-        }
-
-        // 将根据内容调整好的client height和client width设置给mask和main
-        this.jsvMaskView.ResetLayoutParams({
-            x: origin_layout.x, y: origin_layout.y,
-            width: this.clientWidth,
-            height: this.clientHeight
-        });
-        if (this.jsvMaskView !== this.jsvMainView) {
-            const subLayout = {x: 0, y: 0,
-                width: this.jsvMaskView.LayoutParams.Width,
-                height: this.jsvMaskView.LayoutParams.Height};
-            this.jsvMainView.ResetLayoutParams(subLayout);
-        }
-        // this.jsvMaskView.SetVisibility(this.style.visibility);
-        // 兼容display, TODO：Flex feature需要重新设计
-        let visible_set = this.style.visibility;
-        if (this.style.display == "NONE") {
-            visible_set = "HIDDEN";
-        }
-        this.jsvMaskView.SetVisibility(visible_set);
-
-        let clipRect = null;
-        if (clip_for_object_fit !== null && window.JsView /* PC/WebView场景，通过元素自身的ObjectFit来实现效果 */) {
-            // 优先使用object fit的配置，去除OpenGL描画缩小的texture时边缘乱码问题
-            // TODO: 当这个view有子view的场景，可能会有BUG
-            clipRect = {
-                x: clip_for_object_fit.x,
-                y: clip_for_object_fit.y,
-                width: clip_for_object_fit.width,
-                height: clip_for_object_fit.height};
-        } else if (!!this.style.clipPath) {
-            clipRect = {
-                x:      this.style.clipPath.left,
-                y:      this.style.clipPath.top,
-                width:  this.jsvMaskView.LayoutParams.Width - this.style.clipPath.left - this.style.clipPath.right,
-                height: this.jsvMaskView.LayoutParams.Height - this.style.clipPath.top - this.style.clipPath.bottom,
-            };
-        } else if (this.style.overflow === StyleDeclaration.Overflow.HIDDEN
-                && this.jsvStore.textContent === null/* 有文字时，自带显示区域限制，不需要再次进行Clip区域控制 */) {
-            clipRect = { x:0, y:0, width:this.style.width, height:this.style.height };
-        }
-
-        if(!!clipRect) {
-            this.jsvMaskView.SetClipRect(clipRect.x, clipRect.y, clipRect.width, clipRect.height, true);
-        } else if (this.jsvMaskView instanceof Forge.ClipView) {
-            // 恢复MaskView(ClipView)的裁剪区域
-            this.jsvMaskView.SetClipRect(0, 0, 0, 0, false)
-        }
-        if (typeof this.style.zIndex !== 'undefined' && this.style.zIndex !== null) {
-            // ZIndex设置
-
-            // 测试打印，当调查zIndex不生效时打开打印，
-            // 在JsView状态下，有共通的父节点的情况下，zIndex才会有作用
-            // let pid_link = "";
-            // let walker = this;
-            // while(walker.parentElement) {
-            //     pid_link += "=" + walker.parentElement._Count;
-            //     walker = walker.parentElement;
-            // }
-            // console.log("Change ZIndex to " + this.style.zIndex + " of parent chain[" + pid_link + "]");
-
-            this.jsvMaskView.SetZIndex(this.style.zIndex);
-        }
-
-        this.jsvFlushViewTransition();
-    }
-
-    jsvFlushViewBackground() {
-        if(!!this.style.backgroundImage) {
-            // console.log("Element.jsvFlushViewBackground() image=" + this.style.backgroundImage);
-            this.jsvStore.textureWidth = NaN;
-            this.jsvStore.textureHeight = NaN;
-            ForgeExtension.SetBackgroundImage(this.jsvMainView,
-                                              this.style.backgroundImage,
-                                              this.style.borderRadius);
-        } else if(!!this.style.backgroundColor) {
-            // console.log("Element.jsvFlushViewBackground() color=" + this.style.backgroundColor);
-            this.jsvStore.textureWidth = NaN;
-            this.jsvStore.textureHeight = NaN;
-            ForgeExtension.SetBackgroundColor(this.jsvMainView,
-                                              this.style.backgroundColor,
-                                              this.style.borderRadius);
-        } else {
-            // 无效href, 不显示view
-            this.jsvMainView.ResetTexture(null);
-        }
-    }
-
-    jsvFlushViewAnimation() {
-        if(!!this.jsvAnimation) {
-            this.jsvAnimation.Cancel();
-        }
-
-        if(!this.style.animation) {
-            return;
-        }
-        // console.warn("Element.jsvFlushViewAnimation() anim=", this.style.animation);
-        let keyframes = document.jsvGetKeyFrames(this.style.animation.name, this.jsvStore.scopedAttributes);
-        // console.warn("Element.jsvFlushViewAnimation() keyFrames=" + keyframes);
-
-        this.jsvAnimation = new Forge.CssKeyframeAnimation(keyframes,
-                                                   this.style.animation.duration,
-                                                   this.style.animation.timingFunction,
-                                                   !!this.style.width ? this.style.width : this.clientWidth,
-                                                   this.style.height);
-        this.jsvAnimation.EnableDelay(this.style.animation.delay)
-                         .SetRepeat(this.style.animation.iterationCount);
-        if (this.style.animationFillMode === 'forwards') {
-            this.jsvAnimation.Enable(Forge.AnimationEnable.KeepTransform);
-        }
-        var _this = this;
-        let animListener = new Forge.AnimationListener();
-        animListener.OnEnd((is_end)=>{
-                _this.jsvAnimation = null; // 清理动画引用
-                if (is_end) {
-                    if (_this.eventHandlers && _this.eventHandlers.onAnimationEnd) {
-                        let event;
-                        event = new AnimationEvent("animationend");
-                        event.target = _this;
-                        _this.eventHandlers.onAnimationEnd(event);
-                    }
-                    // Instant swap
-                    if (_this.instantSwapCallback == null) {
-                        _this.instantSwapCallback  = Forge.sRenderBridge.InstantPerformSwap.bind(Forge.sRenderBridge);
-                    }
-                    Promise.resolve().then(_this.instantSwapCallback);
-                } else {
-                    // be animation cancel
-                }
-            });
-        this.jsvAnimation.Enable(Forge.AnimationEnable.ReleaseAfterEndCallback);
-        this.jsvAnimation.SetAnimationListener(animListener);
-        this.jsvMaskView.StartAnimation(this.jsvAnimation);
-    }
-
-    jsvFlushViewTransition() {
-        if (this.style.animation) {
-            // 当animation存在时，不处理transition，两个动作认为是冲突的
-            return;
-        }
-
-        if (this.jsvStore.transitionTmp != null
-                && this.jsvStore.transitionTmp.syncTimes != gSyncTimesCounter.cnt
-                && this.jsvStore.transitionTmp.syncTimes != -1) {
-            // Sync Count发生变化，说明style已经生效
-            // 将 transitionTmp 交换到 transition中
-            // 执行交换，而不是不新建对象，以提高执行效率
-            // PS: 首次的交换结果是 transitionTmp 重新变回null
-            let swap = this.jsvStore.transition;
-            this.jsvStore.transition = this.jsvStore.transitionTmp;
-            this.jsvStore.transitionTmp = swap;
-
-            // 无效化syncTimes，避免状态不变时，执行错误的交换
-            if (this.jsvStore.transitionTmp != null) {
-                this.jsvStore.transitionTmp.syncTimes = -1;
-            }
-        }
-
-        if (this.style.transition) {
-            if (this.jsvStore.transition) {
-                let has_animation = this._JsvBuildTransition();
-                if (!has_animation) {
-                    // Style没有变更，直接返回(不需要保存值)
-                    return;
-                }
-            } else {
-                // 本标签的带着transition设定的首次Layout，不做transition，但需要保存style数值
-            }
-        } else {
-            // 没有transition的场景，取消掉已经启动的动画
-            if(!!this.jsvAnimation) {
-                this.jsvAnimation.Cancel();
-                this.jsvAnimation = null;
-            }
-        }
-
-        // 保存本次的值
-        let transition_ref = this.jsvStore.transitionTmp;
-        if (!transition_ref) {
-            // 写全所有属性，减少hidden class的开销
-            transition_ref = {
-                left: 0, top: 0, width: 0, height: 0,
-                opacity: 1, transform: null,
-                syncTimes: -1,
-            };
-        }
-        transition_ref.left = this.style.left;
-        transition_ref.top = this.style.top;
-        transition_ref.width = this.style.width;
-        transition_ref.height = this.style.height;
-        transition_ref.opacity = this.style.opacity;
-        transition_ref.transform = this.style.transform;
-        transition_ref.syncTimes = gSyncTimesCounter.cnt;
-        this.jsvStore.transitionTmp = transition_ref;
-    }
-
-    _JsvBuildTransition() {
-        let transition = [];
-        for (let name in this.style.transition) {
-            let transFrom = this.jsvStore.transition[name];
-            let transTo = this.style[name];
-            if (transFrom === transTo) { // 上一次没有值或值没有变化，不需要动画
-                continue;
-            }
-            // console.log("Element.jsvFlushViewTransition() name=" + name + " from=" + transFrom + " to=" + transTo);
-            let singleTransition = this.style.transition[name];
-            let item = {
-                name: name,
-                dur: Math.round(singleTransition.duration),
-                tf: null,
-                dly: Math.round(singleTransition.delay),
-                from: transFrom ? transFrom : "", // 容错处理，避免传undefined出现字段丢失
-                to: transTo,
-            };
-
-            if (name === "transform") {
-                item["origin"] = this.style["transformOrigin"]?this.style["transformOrigin"]:"center center";
-            }
-
-            if(!!singleTransition.timingFunction) {
-                item.tf = singleTransition.timingFunction.Package();
-            }
-            transition.push(item);
-
-        }
-        if(transition.length <= 0) {
-            // 没有任何值改变的场合
-            return false;
-        }
-
-        var _this = this;
-        let animListener = new Forge.AnimationListener();
-        animListener.OnEnd((is_end)=>{
-            _this.jsvAnimation = null;
-            if (is_end) {
-                if (_this.eventHandlers && _this.eventHandlers.onTransitionEnd) {
-                    let event = new AnimationEvent("transitionend");
-                    event.target = _this;
-                    _this.eventHandlers.onTransitionEnd(event);
-                }
-                  
-                // Instant swap
-                if (_this.instantSwapCallback == null) {
-                    _this.instantSwapCallback  = Forge.sRenderBridge.InstantPerformSwap.bind(Forge.sRenderBridge);
-                }
-                Promise.resolve().then(_this.instantSwapCallback);
-            } else {
-                // be animation cancel
-            }
-        });
-        this.jsvAnimation = new Forge.CssTransitionAnimation(transition);
-        this.jsvAnimation.SetAnimationListener(animListener);
-        this.jsvMaskView.StartAnimation(this.jsvAnimation);
-
-        return true;
-    }
-
-    jsvBackwardFindForgeView(node) {
-        let sibling = node;
-        while(sibling && !(sibling instanceof Element)) {
-            sibling = sibling.nextSibling;
-        }
-
-        return sibling;
-    }
-
-    static applyObjectFitCommon(element_obj, origin_layout, target_fit_view) {
-        if (target_fit_view  // target fit view有可能当前节点还没生成(例如MediaView)
-            && !isNaN(element_obj.jsvStore.textureWidth)
-            && !isNaN(element_obj.jsvStore.textureHeight)) {
-
-            const object_fit = element_obj.style.objectFit;
-            const clip_layout = target_fit_view.ApplyObjectFit(
-                origin_layout.width, origin_layout.height,
-                element_obj.jsvStore.textureWidth, element_obj.jsvStore.textureHeight,
-                object_fit, StyleDeclaration.ObjectFit);
-
-            // 更新clientWidth/clientHeight
-            if (origin_layout.width === 0 || origin_layout.height === 0) {
-                if (!(origin_layout.width === 0 && origin_layout.height === 0)) {
-                    // 内容将view撑大的场合
-                    element_obj.jsvStore.clientWidth = Math.max(origin_layout.width, clip_layout.width);
-                    element_obj.jsvStore.clientHeight = Math.max(origin_layout.height, clip_layout.height);
-                } else {
-                    // view尺寸设定为0x0，不需要调整尺寸进行渲染
-                }
-            }
-
-            return clip_layout;
-        }
-
-        return null;
-    }
-
-    _jsvAppendScopedAttribute(scopedAttribute, depth) {
-        // console.info("Element._jsvAppendScopedAttribute() scopedAttribute=" + scopedAttribute + " depth=" + depth);
-        if (depth == 0
-        || this.jsvInheritClassDepth == depth) { // 设置自身的Scoped属性
-            this.jsvStore.scopedAttributes.push(scopedAttribute);
-            this.jsvStore.clientWidth = NaN;
-            this.jsvStore.clientHeight = NaN;
-            this.style.jsvAppendClassAttribute(scopedAttribute);
-        }
-
-        if(this.jsvHasInheritClassChildren) { // 递归设置子节点的Scoped属性
-            depth = (this.jsvInheritClassDepth == depth ? 1 : depth + 1);
-            for(const child of this.childNodes) {
-                if (child.jsvInheritClassDepth <= 0
-                && child.jsvHasInheritClassChildren == false) {
-                    continue;
-                }
-                if (!(child instanceof Element)) {
-                    continue;
-                }
-
-                if (child.jsvStore.scopedAttributes.includes(scopedAttribute)) {
-                    continue;
-                }
-                child._jsvAppendScopedAttribute(scopedAttribute, depth) ;
-            }
-        }
-    }
-
-    _jsvSetClassNames(classNames, depth) {
-        // console.info("Element._jsvSetClassNames() classNames=" + classNames + " depth=" + depth);
-        if (depth == 0
-        || this.jsvInheritClassDepth == depth) { // 设置自身的ClassName
-            this.style.jsvApplyClasses(classNames, this.jsvInheritClassDepth == depth);
-        }
-
-        if(this.jsvHasInheritClassChildren) { // 递归设置子节点的ClassName
-            depth = (this.jsvInheritClassDepth == depth ? 1 : depth + 1);
-            for(const child of this.childNodes) {
-                if (child.jsvInheritClassDepth <= 0
-                && child.jsvHasInheritClassChildren == false) {
-                    continue;
-                }
-                if (!(child instanceof Element)) {
-                    continue;
-                }
-
-                child._jsvSetClassNames(classNames, depth) ;
-            }
-        }
-    }
-
-    _jsvSetInheritClassDepth(depth) {
-        if (depth <= 0) {
-            return;
-        }
-
-        this.jsvInheritClassDepth = depth; 
-
-        let ancestor = this;
-        for (let idx = 0; idx < depth; idx++) {
-            ancestor = ancestor.parentNode;
-            if (!ancestor) {
-                break;
-            }
-        }
-
-        if (ancestor) {
-            for (const scopedAttribute of ancestor.jsvStore.scopedAttributes) {
-                this._jsvAppendScopedAttribute(scopedAttribute, depth);
-            }
-
-            this._jsvSetClassNames(ancestor["class"], depth)
-        }
-    }
-
-}
-
-Element.TAG = {
-    DIV      : 'DIV',
-    IMAGE    : 'IMAGE',
-    LINK     : 'LINK',
-    STYLE    : 'STYLE',
-    AUDIO    : 'AUDIO',
-    VIDEO    : 'VIDEO',
-    ANCHOR   : 'A',
-    SVG      : 'SVG',
-    FDIV     : 'FDIV',
-    AUDIOTRACK: 'AUDIOTRACK',
-};
-
-Element.ATTRIBUTE = {
-    SRC: 'src',
-    JSVPREFIX: 'jsv',
-};
-
-Element.ATTRTYPE = {
-    JSV: Symbol('jsv'),
-    CSS: Symbol('css'),
-};
-
-export default Element;