@shijiu/jsview 1.9.719

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

@@ -0,0 +1,852 @@
+/* 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;