@shijiu/jsview 1.9.731 → 1.9.759

package/dom/jsview-dom/src/engine-js/browser/layout_view.js

@@ -1,3545 +0,0 @@
-/* eslint-disable no-unused-vars */
-import Forge from "../ForgeDefine";
-import { parseLatex, toHtml } from "./latex_parse";
-import Velocity from "./velocity";
-
-window.gRootView = null; // For record root view
-Forge.sRootView = null;
-
-/**
- * @file layout_view.js
- * @namespace Forge
- */
-class TextureSetting {
-  constructor(texture, mask, texture_before_image_load, has_alpha) {
-    this.Texture = texture;
-    this._IsTextureExternal = false;
-    if (mask instanceof Forge.ImageTexture) {
-      // 重新设置请求时间
-      if (mask && mask.RenderTexture && mask.RenderTexture.NeedCheckExpired) {
-        mask.RenderTexture.RequireTime = 0;
-      }
-      this.MaskSetting = new Forge.ViewTextureMask(mask);
-    } else {
-      this.MaskSetting = mask;
-    }
-    // 重新设置请求时间
-    if (
-      texture &&
-      texture.RenderTexture &&
-      texture.RenderTexture.NeedCheckExpired
-    ) {
-      texture.RenderTexture.RequireTime = 0;
-    }
-
-    this._IsMaskTextureExternal = false;
-    this.TextureBeforeImageLoad = texture_before_image_load;
-    this._IsPreloadImageTextureExternal = false;
-    if (typeof has_alpha === "undefined") has_alpha = true;
-    this.HasAlpha = has_alpha;
-  }
-
-  /**
-   * 标识这个Texture集合是否为外部Texture<br>
-   *     默认为内部Texture，内部Texture将在所附着的LayoutView从RootView移除时被强制释放<br>
-   *         文字的Texture应该用内部Texture，图形Texture一般用外部Texture
-   *
-   * @public
-   * @func SetExternal
-   * @memberof Forge.TextureSetting
-   * @instance
-   * @param {boolean} is_texture_external            主要Texture是否为外部Texture
-   * @param {boolean} is_mask_external               遮罩Texture是否为外部Texture
-   * @param {boolean} is_reload_image_external       次要Texture是否为外部Texture
-   * */
-  SetExternal(is_texture_external, is_mask_external, is_reload_image_external) {
-    this._IsTextureExternal = is_texture_external;
-    this._IsMaskTextureExternal = is_mask_external;
-    this._IsPreloadImageTextureExternal = is_reload_image_external;
-  }
-
-  ReleaseInternalTexture(renderer, container_view) {
-    if (!this._IsTextureExternal && this.Texture) {
-      this.Texture.UnloadTex();
-      this.Texture = null;
-    }
-    if (
-      !this._IsMaskTextureExternal &&
-      this.MaskSetting /* && this.MaskSetting instanceof Forge.ImageTexture */
-    ) {
-      this.MaskSetting.UnLoad();
-      this.MaskSetting = null;
-    }
-    if (!this._IsPreloadImageTextureExternal && this.TextureBeforeImageLoad) {
-      this.TextureBeforeImageLoad.UnloadTex();
-      this.TextureBeforeImageLoad = null;
-    }
-  }
-
-  DebugPrint() {
-    return ` _IsTextureExternal=${this._IsTextureExternal}`;
-  }
-}
-Forge.TextureSetting = TextureSetting;
-window.TextureSetting = Forge.TextureSetting; // export class;
-
-class ExternalTextureSetting extends Forge.TextureSetting {
-  constructor(texture, mask_texture, texture_before_image_load, has_alpha) {
-    super(texture, mask_texture, texture_before_image_load, has_alpha);
-    this.SetExternal(true, true, true);
-  }
-}
-Forge.ExternalTextureSetting = ExternalTextureSetting;
-window.ExternalTextureSetting = Forge.ExternalTextureSetting; // export class;
-
-class PackedLayout {
-  constructor(layout_view_base) {
-    const data_from = layout_view_base.RectInfo;
-    this.RectInfo = {
-      coordX: data_from.coordX,
-      coordY: data_from.coordY,
-      width: data_from.width,
-      height: data_from.height,
-    };
-
-    this.LayoutParams = JSON.parse(
-      JSON.stringify(layout_view_base.LayoutParams)
-    );
-  }
-
-  ApplyToView(target_view) {
-    const data_from = this.RectInfo;
-    target_view.RectInfo = {
-      coordX: data_from.coordX,
-      coordY: data_from.coordY,
-      width: data_from.width,
-      height: data_from.height,
-    };
-
-    target_view.LayoutParams = JSON.parse(JSON.stringify(this.LayoutParams));
-  }
-}
-Forge.PackedLayout = PackedLayout;
-
-class ViewMask {
-  constructor() {
-    this._MaskType = "COMMON";
-  }
-
-  Type() {
-    return this._MaskType;
-  }
-
-  UnLoad() {
-    // need to be overrided
-  }
-}
-Forge.ViewMask = ViewMask;
-
-class ViewTextureMask extends Forge.ViewMask {
-  constructor(image_texture) {
-    super();
-    this._MaskType = "TEXTURE";
-    this.ImageTexture = image_texture;
-  }
-
-  UnLoad() {
-    this.ImageTexture.UnloadTex();
-  }
-}
-Forge.ViewTextureMask = ViewTextureMask;
-class ViewRoundCornerMask extends Forge.ViewMask {
-  constructor(top_left, top_right, bottom_left, bottom_right) {
-    super();
-
-    this._MaskType = "CORNER";
-
-    this._TopLeft = top_left;
-    this._TopRight = !isNaN(top_right) ? top_right : top_left;
-    this._BottomLeft = !isNaN(bottom_left) ? bottom_left : top_left;
-    this._BottomRight = !isNaN(bottom_right) ? bottom_right : top_left;
-
-    this._CornersWidth = [0.0, 0.0, 0.0, 0.0];
-    this._CornersDisable = [
-      this._TopLeft === 0 ? 1.0 : 0.0,
-      this._TopRight === 0 ? 1.0 : 0.0,
-      this._BottomLeft === 0 ? 1.0 : 0.0,
-      this._BottomRight === 0 ? 1.0 : 0.0,
-    ];
-  }
-
-  UnLoad() {
-    // nothing to do
-  }
-}
-Forge.ViewRoundCornerMask = ViewRoundCornerMask;
-
-class DragSetting {
-  /**
-   * 拖拽参数设置
-   * @param {int}drag_direction 拖拽方向: 横向、纵向、自由拖拽、Disable
-   * @param {int}trigger_moved_distance onMoved事件触发的移动距离
-   * @param {boolean}  enable_js_fling 是否由js进行fling操作，true：js进行fling，false：系统执行fling
-   * @param {Forge.RectArea} slide_pile  滑桩   view 滑动时由滑桩控制其滑动区域
-   * @param {int}fling_page_width 滑动页的宽度，即开启整平滑动模式
-   * @param {int}fling_page_edge 触发整屏滑动页的边界，默认为1/4
-   */
-  constructor(
-    drag_direction,
-    trigger_moved_distance,
-    enable_js_fling,
-    slide_pile,
-    fling_page_width,
-    fling_page_edge
-  ) {
-    this.DragDirection = drag_direction || 0;
-    this.TriggerMovedDistance = trigger_moved_distance || 0;
-    this._EnableJsFling = enable_js_fling ? 1 : 0;
-    this.SlidePile = slide_pile || new Forge.RectArea(0, 0, 1280, 720);
-    this.PageWidth = fling_page_width > 0 ? fling_page_width : 0xffff;
-    this.EnableTabMode = fling_page_width > 0;
-    this.PageEdge = fling_page_edge || 1 / 4;
-  }
-}
-
-Forge.DragSetting = DragSetting;
-Forge.DragSetting.DIRECTION_DISABLE = 0x00; // 只接收长按/quick tap事件
-Forge.DragSetting.DIRECTION_VERTICAL = 0x01;
-Forge.DragSetting.DIRECTION_HORIZONTAL = 0x02;
-Forge.DragSetting.DIRECTION_AUTO =
-  Forge.DragSetting.DIRECTION_VERTICAL | Forge.DragSetting.DIRECTION_HORIZONTAL;
-
-Forge.DragInfo = class {
-  constructor() {
-    this.Settings = null;
-    this.Listener = null;
-    this.ListenerFlags = 0;
-    this.OverListener = null;
-    this.OverListenerFlags = 0;
-    this.Formula = null;
-    this.SyncString = null; // Deprecated;
-  }
-
-  SetListener(listener) {
-    this.Listener = listener;
-  }
-};
-Forge.DragInfo.INFLEXION = 0.35; // Tension lines cross at (INFLEXION, 1)//拐点
-
-Forge.DragInfo.DECELERATION_RATE = Math.log(0.78) / Math.log(0.9); // 减速率
-
-Forge.DragInfo.PHYSICAL_COEF = 51890.2; // 物理系数
-
-/**
-   * final float ppi = context.getResources().getDisplayMetrics().density * 160.0f;
-   PHYSICAL_COEF = SensorManager.GRAVITY_EARTH // g (m/s^2)
-   * 39.37f // inch/meter
-   * ppi
-   * 0.84f; // look and feel tuning
-   */
-Forge.DragInfo.SCROLL_FRICTION = 0.015 * 4; // 摩擦系数
-
-Forge.DragInfo.EVENT_TYPE = {
-  OnDown: 0,
-  OnTap: 1,
-  OnLongPress: 2,
-  OnDragStart: 3,
-  OnMoved: 4,
-  OnDragEnd: 5,
-  OnRelease: 6,
-  OnFling: 7,
-};
-
-let count = 0;
-class LayoutViewBase {
-  constructor(texture_setting, element_name) {
-    this.TextureSetting = texture_setting;
-    if (texture_setting) {
-      console.error(
-        "LayoutViewBase constructor texture_setting not undefined!"
-      );
-    }
-    this._dispatchLongPress = this._dispatchLongPress.bind(this);
-    this.Visibility = "VISIBLE";
-    this.LayoutParams = null; // TODO: 为了节省内存，将改成按需求生成
-    this.ParentView = null;
-    this.ChildViews = []; // TODO: 为了节省内存，将改成按需求生成
-    // Z-index
-    this.zIndex = 0;
-    this._Perspective = 0;
-    this._PerspectiveAnchor = [0.5, 0.5];
-    this._BackfaceVisibility = 1;
-    this._DebugCount = ++count;
-    this.childZIndexCount = 0; // 计数器，统计子界面中有多少个设置了index的界面，用于优化AddView时的z-index调整处理
-    this._IsChildOfRootView = false;
-    this._DetachFromSystemCallback = null;
-    this.Element = null;
-    this.InnerChildElement = null; // 例如video element
-    if (element_name === "root") { // react root element
-      this.Element = window.originDocument.getElementById(element_name);
-      if (!this.Element) { // vue root element
-        this.Element = window.originDocument.getElementById("app");
-      }
-    } else if (element_name === "svg" || element_name === "path") {
-      this.Element = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        element_name
-      );
-    } else if (element_name) {
-      this.Element = window.originDocument.createElement(element_name);
-      this.Element.style.position = "absolute";
-    }
-
-    this.TransitionStore = {}; // div的所有transition信息，多个Transition动画会同时作用？
-
-    this.TransformAnimationObj = null;
-    this._TextureAnimationObj = null;
-
-    // drag 2018/10/16(luocf), 2019/09/02(ludl)
-    this._DragInfo = null;
-    // drag 相关变量 2020/09/21
-    this.DragControl = null;
-    this._Velocity = { x: new Velocity(), y: new Velocity() };
-    this._TouchSlopSquare = 8 * 8;
-    this._InDragging = null;
-    this._InLongPress = null;
-    this._AlwaysInTapRegion = null;
-    this._LastFocusX = null;
-    this._LastFocusY = null;
-    this._DownFocusX = null;
-    this._DownFocusY = null;
-    this._LastTimeStamp = null;
-    this._ObjectFitTestCache = null;
-
-    this._ProxyView = null;
-
-    // 是否曾今挂载过rootView并拿掉了(LayoutView只能往rootView挂载一次)
-    this.Expired = false;
-  }
-
-  Init(texture_setting) {
-    this.ResetTexture(texture_setting);
-  }
-
-  SetElementProp(changed_props, owner_activity) {
-    if (changed_props) {
-      Object.keys(changed_props).forEach((name) => {
-        switch (name) {
-          case "jsv_enable_fade":
-            // 启动图片加载完成后的淡出处理，PC端无效
-            break;
-          case "jsv_poster_on_top":
-            // 启动海报层级提高优先级处理，PC端无效
-            break;
-          case "jsv_innerview": {
-            // 加入通过ViewStore传入的LayoutView对象
-            const view_info = Forge.sViewStore.get(changed_props[name]);
-            if (view_info) {
-              const proxy_view = view_info.view;
-              
-              // 使用本view的layout作为代理view的尺寸，并重置本view尺寸信息
-              // 以此来解决dom的transition变化时，设置时位置style信息的传递问题
-              if (this.LayoutParams == null) {
-                // 避免LayoutParams为null
-                this.ResetLayoutParams({ x: 0, y: 0, width: 0, height: 0 });
-              }
-              let proxy_view_lp = this.LayoutParams;
-              this.ResetLayoutParams({ x: 0, y: 0, width: 0, height: 0 });
-
-              if (proxy_view) {
-                if (this._ProxyView === null) {
-                  this._InsertProxyLayer(proxy_view, proxy_view_lp);
-                } else {
-                  if (proxy_view !== this._ProxyView) {
-                    console.error("Error: Can not reset proxy view");
-                  } else {
-                    // Do nothing
-                  }
-                }
-              }
-            }
-            break;
-          }
-          case "jsv_media_usetexture":
-            // Video view中使用texture展示，已经被外部处理，此处不需再处理
-            break;
-          case "jsv_text_definition":
-            // 设置本LayoutView以及所有子View中文字的清晰度，默认为1.0x，PC端无效
-            break;
-          default:
-            Forge.LogE(`Error: View Unknown prop name=${name}`);
-            break;
-        }
-      });
-    }
-  }
-
-  InsertView(child_view, child_view_in_list, layout_params, packed_layout) {
-    this._InsertView(child_view, child_view_in_list, layout_params, packed_layout);
-  }
-
-  AddView(child_view, layout_params, packed_layout) {
-    this._InsertView(child_view, null, layout_params, packed_layout);
-  }
-
-  MoveChildView(child_view_to_move, target_parent, child_view_in_list) {
-    if (this._ProxyView != null && child_view_to_move != this._ProxyView) {
-      // 所有的 MoveChildView 操作被ProxyView代理
-      this._ProxyView.MoveChildView(child_view_to_move, target_parent);
-      return;
-    }
-
-    // 从原节点拿掉
-    let found = false;
-    for (var i = 0; i < this.ChildViews.length; i++) {
-      if (this.ChildViews[i] == child_view_to_move) {
-        if (child_view_to_move.zIndex != 0)
-          this.childZIndexCount--;
-        this.ChildViews.splice(i, 1);
-        child_view_to_move.ParentView = null;
-        found = true;
-        break;
-      }
-    }
-    if (!found) {
-      Forge.LogE("MoveChildView(): view is not in child list" + " stack=");
-    }
-
-    // 移动到新节点中
-    target_parent._InsertView(child_view_to_move, child_view_in_list, child_view_to_move.LayoutParams);
-
-    // 执行HTML的element移动操作，移动后原父节点会自动删除
-    let behind_view = null;
-    if (child_view_in_list) {
-      behind_view = target_parent.ChildViews[target_parent.ChildViews.indexOf(child_view_in_list) + 1];
-    }
-    if (behind_view && target_parent.Element.contains(behind_view.Element)) {
-      target_parent.Element.insertBefore(child_view_to_move.Element, behind_view.Element);
-    } else {
-      target_parent.Element.appendChild(child_view_to_move.Element);
-    }
-  }
-
-  _InsertView(child_view, child_view_in_list, layout_params, packed_layout) {
-    if (layout_params) {
-      if (!(layout_params instanceof Forge.LayoutParamsBase)) {
-        child_view.LayoutParams = new Forge.LayoutParams(layout_params);
-      } else {
-        child_view.LayoutParams = layout_params.Clone();
-      }
-    } else {
-      if (!child_view.LayoutParams) {
-        child_view.LayoutParams = new Forge.LayoutParams({ x: 0, y: 0 });
-      }
-    }
-
-    if (child_view.LayoutParams !== null) {
-      if (child_view.LayoutParams.MarginLeft) {
-        child_view.Element.style.left = `${child_view.LayoutParams.MarginLeft}px`;
-      }
-      if (child_view.LayoutParams.MarginTop) {
-        child_view.Element.style.top = `${child_view.LayoutParams.MarginTop}px`;
-      }
-      if (child_view.LayoutParams.Width) {
-        child_view.Element.style.width = `${child_view.LayoutParams.Width}px`;
-      }
-
-      if (child_view.LayoutParams.Height) {
-        child_view.Element.style.height = `${child_view.LayoutParams.Height}px`;
-      } else {
-        child_view.Element.style.height = "";
-      }
-    }
-
-    child_view.ParentView = this;
-    if (child_view_in_list) {
-      // 插入模式(插到目标view之前)
-      let found_idx = this.ChildViews.indexOf(child_view_in_list);
-      if (found_idx < 0) {
-        found_idx = this.ChildViews.length; // 默认追加到最后
-      }
-      this.ChildViews.splice(found_idx, 0, child_view);
-    } else {
-      // 非插入形式
-      this.ChildViews.push(child_view);
-    }
-    this._ChildrenListDirty = true;
-
-    if (this._IsChildOfRootView) {
-      child_view._OnAttachToSystem();
-    }
-  }
-
-  SetZIndex(z_index) {
-    this.Element.style.zIndex = z_index;
-    this.zIndex = z_index;
-  }
-
-  /**
-   * Perspective距离<br>
-   *
-   * hide public
-   * @func SetPerspective
-   * @memberof Forge.LayoutViewBase
-   * @instance
-   * @param {int} distance 观察点距离view的值, 最大为2^16 - 1
-   * */
-  SetPerspective(distance, origin) {
-    this.Element.style.perspective = `${distance}px`;
-    this.Element.style.webkitPerspective = `${distance}px`;
-    this.Element.style.perspectiveOrigin = origin;
-    this.Element.style.webkitPerspectiveOrigin = origin;
-    this._Perspective = distance;
-    this._PerspectiveOrigin = origin;
-  }
-
-  /**
-   * 背面是否可见<br>
-   *
-   * hide public
-   * @func SetBackfaceVisibility
-   * @memberof Forge.LayoutViewBase
-   * @instance
-   * @param {boolean} visible 可见性
-   * */
-  SetBackfaceVisibility(visible) {
-    console.log("set back face", visible);
-    this.Element.style.backfaceVisibility = visible ? "visible" : "hidden";
-    this.Element.style.webkitBackfaceVisibility = visible
-      ? "visible"
-      : "hidden";
-    console.log(`back face style ${this.Element.style.backfaceVisibility}`);
-    this._BackfaceVisibility = visible ? 1 : 0;
-  }
-
-  SetTransformStyle(transform_style) {
-    this.Element.style.transformStyle = transform_style;
-    this.Element.style.webkitTransformStyle = transform_style;
-    this._TransformStyle = transform_style;
-  }
-
-  EnableDivTouch(ele, setting) {
-    if (ele.eventHandlers && ele.eventHandlers.onClick) {
-      this.Element.onclick = (ev) => {
-        ele.eventHandlers.onClick();
-        if (ev.preventDefault) {
-          ev.preventDefault();
-        }
-      };
-      this.Element.style.pointerEvents = "auto";
-    }
-  }
-
-  _DoDragPause(event) {
-    if (this._DragInfo.Settings.EnableTabMode) {
-      return;
-    }
-    if (this.DragControl) {
-      this.DragControl.pause((view_x, view_y) => {
-        if (this.Element.style.transform !== null) {
-          // 对view_x, view_y进行校对
-          let lp = this.GetLayoutParams();
-          lp = this._GetMovedLayoutParams(
-            view_x - lp.MarginLeft,
-            view_y - lp.MarginTop
-          );
-          this.ResetLayoutParams(lp);
-          this._DragImactSensorRecycle();
-          console.log(
-            `_DoDragPause lp.MarginLeft:${lp.MarginLeft}, lp.MarginTop:${lp.MarginTop}`
-          );
-          this.DragControl = null;
-          this.Element.style.transform = null;
-          // 补充event
-          event.viewX = view_x;
-          event.viewY = view_y;
-
-          this._DragInfo.Listener.OnFling(event);
-        }
-      });
-    }
-  }
-
-  TouchEventProcess(event) {
-    // 将event type转换为字符串
-    let event_used = false;
-    switch (event.type) {
-      case Forge.DragInfo.EVENT_TYPE.OnDown: {
-        console.log("TouchEventProcess OnDown in");
-        this._DoDragPause(event);
-        if (this._DragInfo.Listener && this._DragInfo.Listener.OnDown) {
-          event_used = this._DragInfo.Listener.OnDown(event);
-        }
-        break;
-      }
-      case Forge.DragInfo.EVENT_TYPE.OnTap:
-        if (this._DragInfo.Listener && this._DragInfo.Listener.OnTap) {
-          event_used = this._DragInfo.Listener.OnTap(event);
-        }
-        break;
-      case Forge.DragInfo.EVENT_TYPE.OnLongPress:
-        if (this._DragInfo.Listener && this._DragInfo.Listener.OnLongPress) {
-          event_used = this._DragInfo.Listener.OnLongPress(event);
-        }
-        break;
-      case Forge.DragInfo.EVENT_TYPE.OnDragStart:
-        this._DragMovedDistanceX = 0;
-        this._DragMovedDistanceY = 0;
-        if (this._DragInfo.Listener && this._DragInfo.Listener.OnDragStart) {
-          event_used = this._DragInfo.Listener.OnDragStart(event);
-        }
-        break;
-      case Forge.DragInfo.EVENT_TYPE.OnMoved:
-        if (this._DragInfo.Listener && this._DragInfo.Listener.OnMoved) {
-          event_used = this._DoDragMove(event, true);
-        }
-        break;
-      case Forge.DragInfo.EVENT_TYPE.OnDragEnd:
-        if (this._DragInfo.Listener && this._DragInfo.Listener.OnDragEnd) {
-          // 对应吸附性,进行动画调整
-          const enable_tab_mode = this._SlideIfEnableTabMod(event, -1);
-          if (enable_tab_mode) {
-            event_used = true;
-          } else {
-            event_used = this._DoDragEnd(event);
-          }
-        }
-        break;
-      case Forge.DragInfo.EVENT_TYPE.OnRelease:
-        if (this._DragInfo.Listener && this._DragInfo.Listener.OnRelease) {
-          event_used = this._DragInfo.Listener.OnRelease(event);
-        }
-        break;
-      case Forge.DragInfo.EVENT_TYPE.OnFling:
-        if (this._DragInfo.Listener && this._DragInfo.Listener.OnFling) {
-          const enable_tab_mode = this._SlideIfEnableTabMod(event, -1);
-          if (enable_tab_mode) {
-            event_used = true;
-          } else {
-            event_used = this._DoFling(event);
-          }
-        }
-        break;
-      default:
-        console.log(`TouchEventProcess:${event}`);
-        break;
-    }
-
-    return event_used;
-  }
-
-  /**
-   * 使Drag无效
-   * @constructor
-   */
-  DisableDrag() {
-    this._DragInfo = null;
-  }
-
-  /**
-   * 使能拖拽
-   * @param {Forge.DragSetting} setting 拖拽设置
-   * @param {Object} listener 拖拽事件 listener Event事件：
-   *                                                     OnDragEnd：{viewX:0,viewY:0},
-   *                                                     OnMoved：{deltaX:0,deltaY:0},
-   *                                                     Other:{x:0,y:0}//点击位置，相对于屏幕的绝对坐标
-   * @param {String} movement_formula  移动公式
-   * @constructor
-   */
-  EnableDrag(setting, listener, movement_formula) {
-    if (!(setting instanceof Forge.DragSetting)) {
-      Forge.ThrowError("EnableDrag The setting is not Forge.DragSetting");
-    }
-    if (listener === null) {
-      Forge.ThrowError("EnableDrag The listener is null");
-    }
-
-    const drag_info = new Forge.DragInfo();
-    drag_info.Settings = setting;
-    drag_info.SetListener(listener);
-    drag_info.Formula = movement_formula;
-    this._DragInfo = drag_info;
-    this.DragControl = null;
-
-    // 追加事件监听
-    this._AddEventListener();
-    Forge.sRenderBridge.RequestSwap();
-  }
-
-  RemoveView(child_view_to_remove) {
-    for (let i = 0; i < this.ChildViews.length; i++) {
-      if (this.ChildViews[i] === child_view_to_remove) {
-        if (child_view_to_remove.IsChildOfRootView()) {
-          child_view_to_remove._OnDetachFromSystem();
-        }
-        this.ChildViews.splice(i, 1);
-        child_view_to_remove.ParentView = null;
-        break;
-      }
-    }
-  }
-
-  _OnDetachFromSystem() {
-    this._IsChildOfRootView = false;
-    if (this._DetachFromSystemCallback) {
-      this._DetachFromSystemCallback.some((o, i, arr) => {
-        o();
-      });
-      this._DetachFromSystemCallback = null; // 执行完毕要清理
-    } else {
-      this.OnDettachFromSystem();
-    }
-    for (let i = 0; i < this.ChildViews.length; i++) {
-      const child_view = this.ChildViews[i];
-      child_view._OnDetachFromSystem();
-    }
-    this.ParentView.Element.removeChild(this.Element);
-
-    this._releaseViewResources();
-  }
-
-  RegisterDetachCallback(callback) {
-    if (callback) {
-      if (this._DetachFromSystemCallback == null) {
-        this._DetachFromSystemCallback = [];
-      }
-      this._DetachFromSystemCallback.push(callback);
-    }
-  }
-
-  UnregisterDetachCallback(callback) {
-    if (callback && this._DetachFromSystemCallback) {
-      let found = false;
-      let arr = this._DetachFromSystemCallback;
-      for (let i = 0; i < arr.length; i++) {
-        if (arr[i] === callback) {
-          arr.splice(i, 1);
-          found = true;
-          break;
-        }
-      }
-      if (!found) {
-        console.error("no found");
-      } else {
-        if (arr.length == 0) {
-          this._DetachFromSystemCallback = null; // 清理内存
-        }
-      }
-    } else {
-      console.error("Unregister nothing...");
-    }
-  }
-
-  /**
-   * 按需重载的回调函数
-   *
-   * @public
-   * @func OnDettachFromSystem
-   * @memberof Forge.LayoutViewBase
-   * @instance
-   * */
-  OnDettachFromSystem() {
-    // Override if needed
-  }
-
-  _releaseViewResources() {
-    if (!this.Expired) {
-      // Stop animation
-      this.StopAnimation();
-      this.StopTextureAnimation();
-      this.Expired = true;
-    }
-  }
-
-  ClearViews() {
-    const child_count = this.ChildViews.length;
-    if (child_count === 0) {
-      return;
-    }
-    for (let i = 0; i < child_count; i++) {
-      const child_view = this.ChildViews[i];
-      if (child_view && child_view.IsChildOfRootView()) {
-        child_view._OnDetachFromSystem();
-      }
-    }
-
-    this.ChildViews = [];
-  }
-
-  _ResetTextStyle(resource_info) {
-    this.Element.style.overflow = "hidden";
-
-    // Get all style from id
-    // display style
-    let ds_describe = Forge.sTextStyleCache.GetDsFromId(
-      resource_info.Set.IDS.DS
-    ).Describe;
-    // font style
-    let fs_describe = Forge.sTextStyleCache.GetFsFromId(
-      resource_info.Set.IDS.FS
-    ).Describe;
-    // color style
-    let cs_describe = Forge.sTextStyleCache.GetCsFromId(
-      resource_info.Set.IDS.CS
-    ).Describe;
-    // special style
-    let ss_describe = null;
-    if (resource_info.Set.IDS.SS !== "DISABLE") {
-      ss_describe = Forge.sTextStyleCache.GetSsFromId(
-        resource_info.Set.IDS.SS
-      ).Describe;
-    }
-
-    // font
-    this.Element.style.fontFamily = fs_describe.font;
-    this.Element.style.fontSize = `${resource_info.Set.FS}px`;
-    if (fs_describe.italic) {
-      this.Element.style.fontStyle = "italic";
-    }
-    if (fs_describe.bold) {
-      this.Element.style.fontWeight = "bold";
-    } else {
-      this.Element.style.fontWeight = "normal";
-    }
-    this.Element.style.textOverflow = ds_describe.text_overflow;
-    this.Element.style.wordBreak = "normal";
-
-    // word wrap
-    let word_wrap = ds_describe.word_wrap;
-    if (word_wrap === "none") {
-      this.Element.style.whiteSpace = "nowrap";
-    } else if (word_wrap) {
-      this.Element.style.wordWrap = word_wrap.replace("_", "-");
-    }
-
-    // align
-    this.Element.style.textAlign = ds_describe.alignment;
-    this.Element.style.verticalAlign = ds_describe.vertical_area_align; // 配合高阶控件区域居中设置
-
-    //direction
-    this.Element.style.direction = ds_describe.direction;
-
-    // color
-    let text_color = cs_describe.text_color;
-    if (text_color.startsWith("#") && text_color.length === 9) {
-      // #AARRGGBB -> #RRGGBB
-      text_color = "#" + text_color.substr(3, 6);
-    }
-    this.Element.style.color = text_color;
-    let bg_color = cs_describe.bg_color;
-    let opacity = false;
-    if (bg_color.startsWith("#") && bg_color.length === 9) {
-      // #AARRGGBB -> #RRGGBB
-      opacity = bg_color.startsWith("#00");
-      bg_color = "#" + bg_color.substr(3, 6);
-    }
-    if (!opacity) {
-      this.Element.style.backgroundColor = bg_color;
-    }
-
-    if (ss_describe) {
-      // Text shadow
-      if (ss_describe.shadow_blur > 0) {
-        this.Element.style.textShadow = `${ss_describe.shadow_offset_x}px ${ss_describe.shadow_offset_y}px ${ss_describe.shadow_blur}px ${ss_describe.shadow_color}`
-      }
-
-      // Text stroke
-      if (ss_describe.stroke_width > 0) {
-        this.Element.style.WebkitTextStroke = `${ss_describe.stroke_width}px ${ss_describe.stroke_color}`;
-      }
-    }
-
-    // 显示width x height
-    this.Element.style.width = `${resource_info.Set.W}px`;
-    this.Element.style.height = `${resource_info.Set.H}px`;
-
-    // line height
-    if (resource_info.Set.LH) {
-      this.Element.style.lineHeight = `${resource_info.Set.LH}px`;
-    }
-
-    if (resource_info.Set.EA) {
-      let emptyRect = resource_info.Set.EA;
-      let div = window.originDocument.createElement("div");
-      div.style.float = emptyRect.x > 0 ? "right" : "left";
-      div.style.width = emptyRect.w + "px";
-      // -1, 是因为网页端会多影响一行
-      div.style.height = emptyRect.h - 1 + "px";
-      div.style.backgroundColor = "rgba(0,0,0,0)";
-      div.style.position = "relative";
-      this.Element.appendChild(div);
-    }
-
-    if (resource_info.Set.LA) {
-      // latex文本
-      const node_info = parseLatex(resource_info.Set.ST);
-      toHtml(this.Element, node_info);
-    } else {
-      let textDiv = window.originDocument.createElement("span");
-      textDiv.textContent = resource_info.Set.ST;
-      this.Element.appendChild(textDiv);
-    }
-  }
-
-  _SetBorderRadius(mask_setting) {
-    const target_element = this.InnerChildElement
-      ? this.InnerChildElement
-      : this.Element;
-    target_element.style.borderRadius = `${mask_setting._TopLeft}px ${mask_setting._TopRight}px ${mask_setting._BottomRight}px ${mask_setting._BottomLeft}px`;
-  }
-
-  // 将本View的所有子节点都移动到Proxy层中
-  _InsertProxyLayer(proxy_view, layout_params) {
-    proxy_view.ParentView = this;
-
-    // ParentView绑定后, 执行Proxy View 往RootView上的绑定操作
-    if (this._IsChildOfRootView) {
-      // 步骤1: 当前view所有子 depth + 1(因为插入了新层次proxyView)
-      for (let children_view of this.ChildViews) {
-        children_view._AdvanceDepthForProxyLayer();
-      }
-
-      // 步骤2: proxy加入rootView树中
-      proxy_view._OnAttachToSystem();
-    }
-
-    // 将此View Child合并到proxyView的Child中
-    proxy_view.ChildViews = proxy_view.ChildViews.concat(this.ChildViews);
-    proxy_view._ChildrenListDirty = true;
-    for (let i = 0; i < proxy_view.ChildViews.length; i++) {
-      proxy_view.ChildViews[i].ParentView = proxy_view;
-      proxy_view._RequestLayoutForAddingView(proxy_view.ChildViews[i]);
-    }
-
-    // 应用Layout params
-    if (layout_params !== null) {
-      if (!(layout_params instanceof Forge.LayoutParamsBase)) {
-        proxy_view.LayoutParams = new Forge.LayoutParams(layout_params);
-      } else {
-        proxy_view.LayoutParams = layout_params.Clone();
-      }
-    } else {
-      if (proxy_view.LayoutParams === null) {
-        proxy_view.LayoutParams = new Forge.LayoutParams({ x: 0, y: 0 });
-      }
-    }
-    // 设置element 属性
-    proxy_view.ResetLayoutParams(proxy_view.LayoutParams);
-
-    // 重置原节点的ChildViews
-    this.ChildViews = [proxy_view];
-    this._ChildrenListDirty = true;
-    this._RequestLayoutForAddingView(proxy_view);
-
-    // 关联ProxyView
-    this._ProxyView = proxy_view;
-    // Poster on top关系不需要重建
-
-    // 将子view追加到父view上
-    if (this._IsChildOfRootView) {
-      proxy_view._OnAttachToSystem();
-    }
-  }
-
-  _RequestLayoutForAddingView(child_view) {
-    this._RequestLayout();
-  }
-
-  /**
-   * 设置新的Texture集合
-   *
-   * @public
-   * @func ResetTexture
-   * @memberof Forge.LayoutViewBase
-   * @instance
-   * @param {Forge.TextureSetting} texture_setting    新的Texture集合
-   * */
-  ResetTexture(texture_setting) {
-    this.TextureSetting = texture_setting;
-    if (texture_setting) {
-      if (texture_setting.Texture.Source) {
-        if (this.Element.tagName === "IMG") {
-          // 图片元素，设置url到src中
-          this.Element.src = texture_setting.Texture.Source;
-        } else {
-          this.Element.style.backgroundImage = `url(${texture_setting.Texture.Source})`;
-          this.Element.style.backgroundSize = "100% 100%";
-        }
-      } else if (texture_setting.Texture.Gradient) {
-          this.Element.style.backgroundImage = texture_setting.Texture.Gradient;
-      } else if (
-        texture_setting.Texture.RenderTexture &&
-        texture_setting.Texture.RenderTexture._SyncingResourceInfo
-      ) {
-        const render_texture = texture_setting.Texture.RenderTexture;
-        const resource_info = render_texture._SyncingResourceInfo;
-        if (resource_info.Nam === "TST") {
-          this._ResetTextStyle(resource_info);
-        } else if (resource_info.Nam === "CT") {
-          this.Element.style.backgroundColor = resource_info.Set.Clr;
-        } else if (resource_info.Nam === "VPLY") {
-          const video_el = resource_info.Set.Hdl;
-
-          // 在Forge html状态，video的显示尺寸由父元素决定
-          video_el.style.width = "100%";
-          video_el.style.height = "100%";
-          video_el.style.objectFit = "fill";
-
-          this.Element.appendChild(video_el);
-          this.InnerChildElement = video_el;
-        }
-      }
-
-      if (texture_setting.MaskSetting) {
-        if (texture_setting.MaskSetting._MaskType === "CORNER") {
-          this._SetBorderRadius(texture_setting.MaskSetting);
-        }
-      }
-    } else {
-      this.Element.style.backgroundColor = ""
-      this.Element.style.backgroundImage = "";
-      this.Element.style.borderRadius = "";
-    }
-  }
-
-  SetVisibility(new_visibility) {
-    if (typeof new_visibility === "string") {
-      this.Element.style.visibility = new_visibility.toLocaleLowerCase();
-    } else {
-      this.Element.style.visibility = "inherit";
-    }
-  }
-
-  _OnAttachToSystem() {
-    if (this.Element.id === "svg" || this.Element.id === "path") {
-      console.log("_OnAttachToSystem appendChild");
-    }
-
-    // 进行Element插入操作
-    let behind_view = this.ParentView.ChildViews[this.ParentView.ChildViews.indexOf(this) + 1];
-    if (behind_view && this.ParentView.Element.contains(behind_view.Element)) {
-      this.ParentView.Element.insertBefore(this.Element, behind_view.Element);
-    } else {
-      this.ParentView.Element.appendChild(this.Element);
-    }
-
-    this._IsChildOfRootView = true;
-    const child_view_list = this.ChildViews;
-    let child_view;
-    for (let i = 0; i < child_view_list.length; i++) {
-      child_view = child_view_list[i];
-      child_view._OnAttachToSystem();
-    }
-  }
-
-  IsChildOfRootView() {
-    return this._IsChildOfRootView;
-  }
-
-  StartAnimation(anim, anim_for_self, delay) {
-    if (
-      typeof this.TransformAnimationObj !== "undefined" &&
-      this.TransformAnimationObj
-    ) {
-      this.TransformAnimationObj.Cancel(anim);
-      this.TransformAnimationObj = null;
-      if (!window.jsvInAndroidWebView) {
-        this.Element.style.animation = null;
-      } else {
-        this.Element.style.webkitAnimation = null;
-      }
-    }
-
-    // 动画事件转发给proxyView，本体不做，用于解决inner-view的css-transition和css-animation不容易设置的问题
-    // 注意点:放在Animation cancel之后，以防本view有原始动画(不过理论上不会有)
-    if (this._ProxyView != null) {
-      this._ProxyView.StartAnimation(anim, anim_for_self, delay);
-      return;
-    }
-
-    this.TransformAnimationObj = anim;
-    if (!isNaN(delay) && delay > 0) {
-      anim.EnableDelay(delay);
-    }
-    anim.Start(this);
-  }
-
-  ApplyStyleTransition(new_map) {
-    this.TransitionStore = { ...this.TransitionStore, ...new_map };
-    let transitions = "";
-    Object.values(this.TransitionStore).forEach((value) => {
-      if (transitions) {
-        transitions += ",";
-      }
-      transitions += value;
-    });
-    if (!window.jsvInAndroidWebView) {
-      this.Element.style.transition = transitions;
-    } else {
-      this.Element.style.webkitTransition = transitions;
-    }
-  }
-
-  /**
-   * 停止这个LayoutView的动画变换，并重置曾经进行动画变换的矩阵
-   *
-   * @public
-   * @func StopAnimation
-   * @memberof Forge.LayoutViewBase
-   * @instance
-   * */
-  StopAnimation() {
-    if (
-      typeof this.TransformAnimationObj !== "undefined" &&
-      this.TransformAnimationObj
-    ) {
-      this.TransformAnimationObj.Cancel();
-      this.TransformAnimationObj = null;
-      // 状态将在Animation触发的DetachAnimation中恢复，不需要在此手动恢复
-    }
-
-    // 动画事件转发给proxyView，本体不做，用于解决inner-view的css-transition和css-animation不容易设置的问题
-    // 注意点:放在Animation cancel之后，以防本view有原始动画(不过理论上不会有)
-    if (this._ProxyView != null) {
-      this._ProxyView.StopAnimation();
-      return;
-    }
-  }
-
-  /**
-   * 对这个LayoutView开始进行Texture动画变换(相对于view自身)
-   *
-   * @public
-   * @func StartTextureAnimation
-   * @memberof Forge.LayoutViewBase
-   * @instance
-   * @param {Forge.AnimationBase} anim   动画设置，例如通过new Forge.TranslateAnimation()创建
-   * */
-  StartTextureAnimation(anim) {
-    if (
-      typeof this._TextureAnimationObj !== "undefined" &&
-      this._TextureAnimationObj
-    ) {
-      this._TextureAnimationObj.Cancel(anim);
-      this._TextureAnimationObj = null;
-    }
-    this._TextureAnimationObj = anim;
-    anim.AsTextureAnimation();
-    anim.Start(this);
-    this._RequestLayout();
-  }
-
-  _RequestLayout() { }
-
-  /**
-   * 停止这个LayoutView中的Texture的动画变换，并重置曾经进行动画变换的矩阵
-   *
-   * @public
-   * @func StopAnimation
-   * @memberof Forge.LayoutViewBase
-   * @instance
-   * */
-  StopTextureAnimation() {
-    if (
-      typeof this._TextureAnimationObj !== "undefined" &&
-      this._TextureAnimationObj
-    ) {
-      this._TextureAnimationObj.Cancel();
-      this._TextureAnimationObj = null;
-    }
-  }
-
-  /**
-   * 停止该LayoutView和其所有子LayoutView的动画，并重置曾经进行动画变换的矩阵
-   *
-   * @public
-   * @func StopAllAnimations
-   * @memberof Forge.LayoutViewBase
-   * @instance
-   * */
-  StopAllAnimations() {
-    this.StopAnimation();
-    this.StopTextureAnimation();
-    for (let i = 0; i < this.ChildViews.length; i++) {
-      this.ChildViews[i].StopAllAnimations();
-    }
-  }
-
-  /**
-   * 获得正在进行动的动画的句柄
-   *
-   * @public
-   * @func GetAnimation
-   * @memberof Forge.LayoutViewBase
-   * @instance
-   * @return {Forge.AnimationBase}
-   * */
-  GetAnimation() {
-    return this.TransformAnimationObj;
-  }
-
-  /**
-   * 移除动画设置。<br>
-   *     架构内部函数，应只能被Forge.AnimationBase调用
-   *
-   * @func DetachAnimation
-   * @memberof Forge.LayoutViewBase
-   * @instance
-   * @param {Forge.AnimationBase} anim 要移除的动画
-   * */
-  DetachAnimation(anim) {
-    if (this.TransformAnimationObj === anim) {
-      this.TransformAnimationObj = null;
-
-      if (!window.jsvInAndroidWebView) {
-        this.Element.style.animation = null;
-        this.Element.style.transition = null;
-      } else {
-        this.Element.style.webkitAnimation = null;
-        this.Element.style.webkitTransition = null;
-      }
-    }
-  }
-
-  ResetCssTransform(transform_string, transform_origin_string) {
-    if (
-      transform_string !== this._CssTransform ||
-      transform_origin_string !== this._CssTransformOrigin
-    ) {
-      // console.log("ResetCssTransform transform_string:", transform_string);
-      if (!window.jsvInAndroidWebView) {
-        this.Element.style.transform = transform_string;
-        this.Element.style.transformOrigin = transform_origin_string;
-      } else {
-        this.Element.style.webkitTransform = transform_string;
-        this.Element.style.webkitTransformOrigin = transform_origin_string;
-      }
-
-      this._CssTransform = transform_string;
-      this._CssTransformOrigin = transform_origin_string;
-    }
-  }
-
-  ResetTextureCssTransform(transform_string, transform_origin_string) {
-    this.ResetCssTransform(transform_string, transform_origin_string);
-  }
-
-  /** **************************************
-   * View getter
-   */
-  SetId(id) {
-    this.Id = id;
-  }
-
-  ResetLayoutParams(new_params) {
-    if (this._ProxyView != null) {
-      // 由ProxyView代理原view的尺寸变化设置, 解决transiton动画问题
-      this._ProxyView.ResetLayoutParams(new_params);
-      return;
-    }
-
-    if (new_params !== null) {
-      if (!(new_params instanceof Forge.LayoutParamsBase)) {
-        this.LayoutParams = new Forge.LayoutParams(new_params);
-      } else {
-        this.LayoutParams = new_params.Clone();
-      }
-      this.Element.style.left = `${this.LayoutParams.MarginLeft}px`;
-      this.Element.style.top = `${this.LayoutParams.MarginTop}px`;
-      if (this.LayoutParams.Width) {
-        this.Element.style.width = `${this.LayoutParams.Width}px`;
-      }
-      if (this.LayoutParams.Height) {
-        this.Element.style.height = `${this.LayoutParams.Height}px`;
-      }
-    } else {
-      Forge.ThrowError("ResetLayoutParams(): new params is null");
-    }
-  }
-
-  /**
-   * 获得关联的Forge.Renderer
-   *
-   * hide public
-   * @func GetRenderer
-   * @memberof Forge.LayoutViewBase
-   * @instance
-   * @return {Forge.Renderer}
-   * */
-  GetRenderer() {
-    return Forge.LayoutViewBase.sRenderer;
-  }
-
-  /**
-   * 获得当前布局配置的拷贝
-   *
-   * @public
-   * @func GetLayoutParams
-   * @memberof Forge.LayoutViewBase
-   * @instance
-   * @return {Forge.LayoutParams}
-   * */
-  GetLayoutParams() {
-    if (!this.LayoutParams) {
-      return new Forge.LayoutParams();
-    }
-    return this.LayoutParams.Clone();
-  }
-
-  /**
-   * 启用自适应高度
-   *
-   * @public
-   * @func EnableAutoHeight
-   * @memberof Forge.LayoutViewBase
-   * @instance
-   * */
-  EnableAutoHeight() {
-    this._AutoHeight = true;
-  }
-
-  // 功能: 标识本LayoutView要根据自身Texture加载完成后，根据Texture的尺寸重新Resize
-  // 当enable后，无论尺寸设成多少，同步给Native的界面尺寸都会固定为(1,1)，
-  // 以保证View会被渲染，从而防止Texture由于不在界面上不会加载的处理生效，同时小尺寸不会被注意
-  // JsView根据这个信息判断是否在屏幕内，而决定是否进行加载(屏幕外内容不加载以节省内存)
-  WaitTextureToResize(enable) {
-    // js模式下为控制显示和隐藏
-    // 这边控制显隐会导致用户端设置ninepatch为隐藏时，这边将其显示
-    // this.Element.style.visibility = enable ? "hidden" : "visible";
-  }
-
-  // 根据object fit，调整texture在view中的显示位置
-  // 当view的宽/高，单项为0时，可以进行内容的自适应扩展
-  ApplyObjectFit(
-    frame_width,
-    frame_height,
-    texture_width,
-    texture_height,
-    object_fit,
-    object_fit_define
-  ) {
-    if (this._ObjectFitTestCache === null) {
-      // 创建检测结果的缓存，用于加快检测速度
-      this._ObjectFitTestCache = {
-        frameWidth: NaN,
-        frameHeight: NaN,
-        textureWidth: NaN,
-        textureHeight: NaN,
-        objectFit: null,
-        clipLayout: null,
-      };
-    }
-
-    const test_cache = this._ObjectFitTestCache;
-
-    if (
-      test_cache.frameWidth === frame_width &&
-      test_cache.objectFit === object_fit &&
-      test_cache.frameHeight === frame_height &&
-      test_cache.textureWidth === texture_width &&
-      test_cache.textureHeight === texture_height
-    ) {
-      return test_cache.clipLayout;
-    }
-
-    const clip_layout = {
-      x: 0,
-      y: 0,
-      width: frame_width,
-      height: frame_height,
-      overflow: false,
-    };
-
-    // Flush cache, 放在判断处理调整viewSize之前进行cache
-    test_cache.frameWidth = frame_width;
-    test_cache.frameHeight = frame_height;
-    test_cache.textureWidth = texture_width;
-    test_cache.textureHeight = texture_height;
-    test_cache.objectFit = object_fit;
-    test_cache.clipLayout = clip_layout;
-
-    let expect_size = { width: 0, height: 0 };
-
-    let frame_ratio = frame_width / frame_height;
-    const texture_ratio = texture_width / texture_height;
-
-    if (!texture_ratio) {
-      console.warn("Warning:Texture size is 0!")
-      return clip_layout;
-    }
-
-    if (frame_width === 0 || frame_height === 0) {
-      if (frame_width === 0 && frame_height === 0) {
-        // frame没有size的场合
-        return clip_layout;
-      }
-
-      // 调整frame width 和 frame height，并计算新的frame ratio
-      if (frame_width === 0) {
-        frame_width = frame_height * texture_ratio;
-      } else {
-        // frame height === 0
-        frame_height = frame_width / texture_ratio;
-      }
-      frame_ratio = frame_width / frame_height;
-    }
-
-    let object_fit_str = "";
-
-    switch (object_fit) {
-      case object_fit_define.FILL:
-        expect_size.width = frame_width;
-        expect_size.height = frame_height;
-        object_fit_str = "fill";
-        break;
-      case object_fit_define.NONE:
-        expect_size.width = texture_width;
-        expect_size.height = texture_height;
-        object_fit_str = "none";
-        break;
-      case object_fit_define.COVER:
-        expect_size = this._StretchSize(
-          frame_width,
-          frame_height,
-          texture_ratio,
-          texture_ratio < frame_ratio
-        );
-        object_fit_str = "cover";
-        break;
-      case object_fit_define.SCALEDOWN: {
-        // 使用contain和none之间尺寸小的一个。
-        let refer_width = texture_ratio > frame_ratio; // use object-fit.contain
-        if (frame_width > texture_width && frame_height > texture_height) {
-          // use object-fit.none
-          refer_width = texture_ratio < frame_ratio; // use object-fit.contain
-        }
-        expect_size = this._StretchSize(
-          frame_width,
-          frame_height,
-          texture_ratio,
-          refer_width
-        );
-        object_fit_str = "scaledown";
-        break;
-      }
-      case object_fit_define.CONTAIN:
-        expect_size = this._StretchSize(
-          frame_width,
-          frame_height,
-          texture_ratio,
-          texture_ratio > frame_ratio
-        );
-        // console.warn("Element.JsvFitViewLayout() expect_size=" + JSON.stringify(expect_size));
-        object_fit_str = "contain";
-        break;
-      default:
-        throw new Error("Unexpected object-fit.");
-    }
-
-    // format expect size
-    expect_size.width = Math.floor(expect_size.width);
-    expect_size.height = Math.floor(expect_size.height);
-
-    // 计算可视区域
-    clip_layout.width = Math.min(expect_size.width, frame_width);
-    clip_layout.height = Math.min(expect_size.height, frame_height);
-    clip_layout.x = Math.floor((frame_width - clip_layout.width) / 2);
-    clip_layout.y = Math.floor((frame_height - clip_layout.height) / 2);
-    clip_layout.overflow =
-      expect_size.width > frame_width || expect_size.height > frame_height;
-
-    // element设置object fit
-    const target_ele = this.InnerChildElement
-      ? this.InnerChildElement
-      : this.Element;
-    target_ele.style.width = `${frame_width}px`;
-    target_ele.style.height = `${frame_height}px`;
-    target_ele.style.objectFit = object_fit_str;
-
-    return clip_layout;
-  }
-
-  _StretchSize(origin_width, origin_height, ratio, refer_width) {
-    const stretchSize = { width: 0, height: 0 };
-
-    if (refer_width) {
-      stretchSize.width = origin_width;
-      stretchSize.height = origin_width / ratio;
-    } else {
-      stretchSize.height = origin_height;
-      stretchSize.width = origin_height * ratio;
-    }
-
-    return stretchSize;
-  }
-
-  /**
-   * 注意：改坐标计算过程中，只通过LayoutParams进行计算，不计算变形矩阵
-   *
-   * @func GetPositionOffset
-   * @memberof Forge.LayoutViewBase
-   * @instance
-   * @param {Forge.LayoutViewBase} target_parent Offset测试目标父节点的LayoutView
-   * @return {Forge.Coordinate} 坐标值
-   * */
-  GetPositionOffset(target_parent) {
-    let test_view = this;
-    let x_offset = 0;
-    let y_offset = 0;
-    while (target_parent !== test_view) {
-      x_offset += test_view.LayoutParams
-        ? test_view.LayoutParams.MarginLeft
-        : 0;
-      y_offset += test_view.LayoutParams ? test_view.LayoutParams.MarginTop : 0;
-      test_view = test_view.ParentView;
-      if (!test_view)
-        Forge.ThrowError(
-          "ERROR: Target parent layoutview is not found in LayoutView tree"
-        );
-    }
-    return new Forge.Coordinate(x_offset, y_offset);
-  }
-
-  _dispatchLongPress() {
-    this._LongPressDelayRequestTaskId = 0;
-    this._InLongPress = true;
-    const target_event = {
-      type: Forge.DragInfo.EVENT_TYPE.OnLongPress,
-      x: this._CurrentDownEvent.designX,
-      y: this._CurrentDownEvent.designY,
-    };
-    this.TouchEventProcess(target_event);
-  }
-
-  _onMouseDown(designX, designY, timeStamp) {
-    // reset velocity
-    this._Velocity.x.reset();
-    this._Velocity.y.reset();
-    this._Velocity.x.updatePosition(designX);
-    this._Velocity.y.updatePosition(designY);
-    this._LastFocusX = designX;
-    this._DownFocusX = this._LastFocusX;
-    this._LastFocusY = designY;
-    this._DownFocusY = this._LastFocusY;
-    this._CurrentDownEvent = { designX, designY, timeStamp };
-    this._AlwaysInTapRegion = true;
-    
-    // 重置long press状态
-    this._InLongPress = false;
-    if (this._LongPressDelayRequestTaskId !== 0) {
-      clearTimeout(this._LongPressDelayRequestTaskId);
-      this._LongPressDelayRequestTaskId = 0;
-    }
-
-    this._LongPressDelayRequestTaskId = setTimeout(
-      this._dispatchLongPress,
-      600
-    );
-    const target_event = {
-      type: Forge.DragInfo.EVENT_TYPE.OnDown,
-      x: designX,
-      y: designY,
-      deltaX: 0,
-      deltaY: 0,
-    };
-    return target_event;
-  }
-
-  _onMouseMove(designX, designY, timeStamp) {
-    if (!this._CurrentDownEvent) {
-      return null;
-    }
-    this._Velocity.x.updatePosition(designX);
-    this._Velocity.y.updatePosition(designY);
-    const deltaX = parseInt(designX - this._LastFocusX, 10);
-    const deltaY = parseInt(designY - this._LastFocusY, 10);
-    const distanceX = parseInt(designX - this._DownFocusX, 10);
-    const distanceY = parseInt(designY - this._DownFocusY, 10);
-    let target_event = null;
-    if (this._AlwaysInTapRegion) {
-      const distance = distanceX * distanceX + distanceY * distanceY;
-      const slopSquare = this._TouchSlopSquare;
-      if (distance > slopSquare) {
-        target_event = {
-          type: Forge.DragInfo.EVENT_TYPE.OnDragStart,
-          x: designX,
-          y: designY,
-        };
-        this._LastFocusX = designX;
-        this._LastFocusY = designY;
-        this._LastTimeStamp = timeStamp;
-        this._AlwaysInTapRegion = false; // 状态从Tap恢复到DragStart
-        this._InLongPress = false; // 状态从LongPress恢复到DragStart
-        this._InDragging = true; // 进入DragMove状态
-        if (this._LongPressDelayRequestTaskId !== 0) {
-          clearTimeout(this._LongPressDelayRequestTaskId);
-          this._LongPressDelayRequestTaskId = 0;
-        }
-      }
-    } else if (
-      this._InDragging &&
-      (Math.abs(deltaX) >= 1 || Math.abs(deltaY) >= 1)
-    ) {
-      target_event = {
-        type: Forge.DragInfo.EVENT_TYPE.OnMoved,
-        x: designX,
-        y: designY,
-        deltaX: distanceX, // 匹配jsview touch 返回值
-        deltaY: distanceY,
-        _deltaX: deltaX, // 内部使用
-        _deltaY: deltaY,
-
-        timeStamp: parseInt((this._LastTimeStamp - timeStamp) / 1000, 10),
-      };
-      this._LastFocusX = designX;
-      this._LastFocusY = designY;
-      this._LastTimeStamp = timeStamp;
-    }
-    return target_event;
-  }
-
-  _onMouseUp(designX, designY, timeStamp) {
-    let target_event = null;
-    //console.log("_onMouseUp, ", this._CurrentDownEvent);
-    if (this._CurrentDownEvent) {
-      const designMap = window.Forge.DesignMap();
-      const screenBufferWidth = Math.floor(
-        designMap.displayScale * designMap.width
-      );
-      const screenBufferRatio = window.innerWidth / screenBufferWidth;
-      const designVelocityX =
-        this._Velocity.x.getVelocity() / screenBufferRatio;
-      const designVelocityY =
-        this._Velocity.y.getVelocity() / screenBufferRatio;
-      let distance_x = designX - this._CurrentDownEvent.designX;
-      let distance_y = designY - this._CurrentDownEvent.designY;
-      const deltaX = designX - this._LastFocusX;
-      const deltaY = designY - this._LastFocusY;
-      if (this._InLongPress) {
-        // 长按状态下不处理任何事件
-      } else if (this._AlwaysInTapRegion) {
-        target_event = {
-          type: Forge.DragInfo.EVENT_TYPE.OnTap,
-          x: designX,
-          y: designY,
-          velocityX: 0,
-          velocityY: 0,
-          deltaX: distance_x,
-          deltaY: distance_y,
-          _deltaX: deltaX,
-          _deltaY: deltaY,
-        };
-      } else {
-        // A fling must travel the minimum tap distance
-        // 一个fling最小的速度，单位：px/s  70
-        if (Math.abs(designVelocityY) > 70 || Math.abs(designVelocityX) > 70) {
-          distance_x = this._GetSplineFlingDistance(designVelocityX);
-          distance_y = this._GetSplineFlingDistance(designVelocityY);
-          target_event = {
-            type: Forge.DragInfo.EVENT_TYPE.OnFling,
-            x: designX,
-            y: designY,
-            velocityX: designVelocityX,
-            velocityY: designVelocityY,
-            deltaX: designVelocityX < 0 ? -distance_x : distance_x,
-            deltaY: designVelocityY < 0 ? -distance_y : distance_y,
-            _deltaX: deltaX,
-            _deltaY: deltaY,
-          };
-        } else {
-          target_event = {
-            type: Forge.DragInfo.EVENT_TYPE.OnDragEnd,
-            x: designX,
-            y: designY,
-            deltaX: distance_x,
-            deltaY: distance_y,
-            _deltaX: deltaX,
-            _deltaY: deltaY,
-          };
-        }
-        this.TouchEventProcess(target_event);
-        // Release
-        target_event = {
-          type: Forge.DragInfo.EVENT_TYPE.OnRelease,
-          x: designX,
-          y: designY,
-          deltaX: distance_x,
-          deltaY: distance_y,
-          _deltaX: deltaX,
-          _deltaY: deltaY,
-        };
-        this._CurrentDownEvent = null;
-      }
-
-      // 重置long press状态
-      this._InLongPress = false;
-      if (this._LongPressDelayRequestTaskId !== 0) {
-        clearTimeout(this._LongPressDelayRequestTaskId);
-        this._LongPressDelayRequestTaskId = 0;
-      }
-    }
-    return target_event;
-  }
-
-  _onTouchEvent(event) {
-    const designMap = window.Forge.DesignMap();
-    const screenBufferWidth = Math.floor(
-      designMap.displayScale * designMap.width
-    );
-    const screenBufferRatio = window.innerWidth / screenBufferWidth;
-    const designX = event.clientX / screenBufferRatio;
-    const designY = event.clientY / screenBufferRatio;
-
-    // 转换event
-    let target_event = null;
-    switch (event.type) {
-      case "touchstart":
-      case "mousedown": {
-        target_event = this._onMouseDown(designX, designY, event.timeStamp);
-        break;
-      }
-      case "touchmove":
-      case "mousemove": {
-        target_event = this._onMouseMove(designX, designY, event.timeStamp);
-        break;
-      }
-      case "touchend":
-      case "touchcancel":
-      case "mouseup": {
-        target_event = this._onMouseUp(designX, designY, event.timeStamp);
-        break;
-      }
-      default:
-        break;
-    }
-
-    if (target_event) {
-      return this.TouchEventProcess(target_event);
-    }
-    return false;
-  }
-
-  _AddEventListener() {
-    this.Element.style.pointerEvents = "auto";
-    this._ValidTouch = false;
-    const isTouch = "ontouchstart" in window;
-    // console.log(`isTouch:${isTouch}`);
-    if (isTouch) {
-      this.Element.addEventListener(
-        "touchstart",
-        (event) => {
-          console.log("touchstart", event);
-          this._ValidTouch = true;
-          if (event.touches && event.touches.length > 0) {
-            console.log(
-              `touchstart event.touches[0].clientX:${event.touches[0].clientX}, event.touches[0].clientY:${event.touches[0].clientY}`
-            );
-            const event_used = this._onTouchEvent({
-              type: event.type,
-              clientX: event.touches[0].clientX,
-              clientY: event.touches[0].clientY,
-              timeStamp: event.timeStamp,
-            });
-            if (event_used) {
-              event.stopPropagation();
-            }
-          }
-        },
-        true
-      );
-      this.Element.addEventListener(
-        "touchmove",
-        (event) => {
-          if (this._ValidTouch) {
-            console.log("touchmove", event);
-            if (event.touches && event.touches.length > 0) {
-              console.log(
-                `touchmove event.touches[0].clientX:${event.touches[0].clientX}, event.touches[0].clientY:${event.touches[0].clientY}`
-              );
-              const event_used = this._onTouchEvent({
-                type: event.type,
-                clientX: event.touches[0].clientX,
-                clientY: event.touches[0].clientY,
-                timeStamp: event.timeStamp,
-              });
-              if (event_used) {
-                event.stopPropagation();
-              }
-            }
-          }
-        },
-        true
-      );
-      this.Element.addEventListener(
-        "touchend",
-        (event) => {
-          console.log(
-            `touchend event.touches.length:${event.touches.length}, event.clientX:${event.clientX}, event.pageX:${event.pageX}`
-          );
-          this._ValidTouch = false;
-          if (event.changedTouches && event.changedTouches.length > 0) {
-            console.log(
-              `touchend event.changedTouches[0].clientX:${event.changedTouches[0].clientX}, event.changedTouches[0].pageX:${event.changedTouches[0].pageX}`
-            );
-            const event_used = this._onTouchEvent({
-              type: event.type,
-              clientX: event.changedTouches[0].clientX,
-              clientY: event.changedTouches[0].clientY,
-              timeStamp: event.timeStamp,
-            });
-            if (event_used) {
-              event.stopPropagation();
-            }
-          }
-        },
-        true
-      );
-      this.Element.addEventListener(
-        "touchcancel",
-        (event) => {
-          this._ValidTouch = false;
-          console.log("touchcancel", event);
-          if (event.changedTouches && event.changedTouches.length > 0) {
-            console.log(
-              `touchcancel event.clientX:${event.clientX}, event.clientY:${event.clientY}`
-            );
-            const event_used = this._onTouchEvent({
-              type: event.type,
-              clientX: event.touches[0].clientX,
-              clientY: event.touches[0].clientY,
-              timeStamp: event.timeStamp,
-            });
-            if (event_used) {
-              event.stopPropagation();
-            }
-          }
-        },
-        true
-      );
-    } else {
-      this.Element.addEventListener(
-        "mousedown",
-        (event) => {
-          console.log("mousedown", event);
-          this._ValidTouch = true;
-          const event_used = this._onTouchEvent(event);
-          if (event_used) {
-            event.stopPropagation();
-          }
-        },
-        true
-      );
-
-      this.Element.addEventListener(
-        "mousemove",
-        (event) => {
-          if (this._ValidTouch) {
-            const event_used = this._onTouchEvent(event);
-            if (event_used) {
-              event.stopPropagation();
-            }
-          }
-        },
-        true
-      );
-
-      this.Element.addEventListener(
-        "mouseup",
-        (event) => {
-          console.log("mouseup", event);
-          this._ValidTouch = false;
-          const event_used = this._onTouchEvent(event);
-          if (event_used) {
-            event.stopPropagation();
-          }
-        },
-        true
-      );
-    }
-  }
-
-  /*
-     _GetSplineFlingDuration(velocity) {
-     let l = this._GetSplineDeceleration(velocity);
-     let decelMinusOne = Forge.DragInfo.DECELERATION_RATE - 1.0;
-     return parseInt(1000.0 * Math.exp(l / decelMinusOne));
-     }
-     */
-  // 减速带
-  _GetSplineDeceleration(velocity) {
-    return Math.log(
-      (Forge.DragInfo.INFLEXION * Math.abs(velocity)) /
-      (Forge.DragInfo.SCROLL_FRICTION * Forge.DragInfo.PHYSICAL_COEF)
-    );
-  }
-
-  _GetSplineFlingDistance(velocity) {
-    const l = this._GetSplineDeceleration(velocity);
-    const decelMinusOne = Forge.DragInfo.DECELERATION_RATE - 1.0;
-    return (
-      Forge.DragInfo.SCROLL_FRICTION *
-      Forge.DragInfo.PHYSICAL_COEF *
-      Math.exp((Forge.DragInfo.DECELERATION_RATE / decelMinusOne) * l)
-    );
-  }
-
-  _DoDragMove(event, need_anim) {
-    let deltaX = event._deltaX;
-    let deltaY = event._deltaY;
-    this._DragMovedDistanceX += deltaX;
-    this._DragMovedDistanceY += deltaY;
-    if (!need_anim) {
-      // onFling时，dragmove不更新view坐标，故用deltaX，不使用内部的_deltaX。
-      deltaX = event.deltaX;
-      deltaY = event.deltaY;
-    }
-
-    const duration = event.timeStamp / 1000;
-    let transition = `left ${duration}s, top ${duration}s`;
-    if (
-      this._DragInfo.Settings.DragDirection ===
-      Forge.DragSetting.DIRECTION_VERTICAL
-    ) {
-      deltaX = 0;
-      transition = `top ${duration}s`;
-    } else if (
-      this._DragInfo.Settings.DragDirection ===
-      Forge.DragSetting.DIRECTION_HORIZONTAL
-    ) {
-      deltaY = 0;
-      transition = `left ${duration}s`;
-    } else if (
-      this._DragInfo.Settings.DragDirection ===
-      Forge.DragSetting.DIRECTION_DISABLE
-    ) {
-      deltaX = 0;
-      deltaY = 0;
-    }
-    let lp = this.GetLayoutParams();
-    // const viewX = lp.MarginLeft;
-    // const viewY = lp.MarginTop;
-    // 检测边界
-    lp = this._GetMovedLayoutParams(deltaX, deltaY);
-    if (need_anim) {
-      this.Element.style.transition = transition;
-      this.ResetLayoutParams(lp);
-    }
-    if (
-      Math.abs(this._DragMovedDistanceX) >=
-      this._DragInfo.Settings.TriggerMovedDistance ||
-      Math.abs(this._DragMovedDistanceY) >=
-      this._DragInfo.Settings.TriggerMovedDistance
-    ) {
-      if (this._DragInfo.Listener && this._DragInfo.Listener.OnMoved) {
-        // 补充event
-        event.viewX = lp.MarginLeft;
-        event.viewY = lp.MarginTop;
-        return this._DragInfo.Listener.OnMoved(event);
-      }
-    }
-    return false;
-  }
-
-  _GetMovedLayoutParams(deltaX, deltaY) {
-    const lp = this.GetLayoutParams();
-    let x = lp.MarginLeft + deltaX;
-    let y = lp.MarginTop + deltaY;
-
-    if (x > this._DragInfo.Settings.SlidePile.x) {
-      x = this._DragInfo.Settings.SlidePile.x;
-    } else if (
-      x + lp.Width <
-      this._DragInfo.Settings.SlidePile.x +
-      this._DragInfo.Settings.SlidePile.width
-    ) {
-      x =
-        this._DragInfo.Settings.SlidePile.x +
-        this._DragInfo.Settings.SlidePile.width -
-        lp.Width;
-    }
-    if (y > this._DragInfo.Settings.SlidePile.y) {
-      y = this._DragInfo.Settings.SlidePile.y;
-    } else if (
-      y + lp.Height <
-      this._DragInfo.Settings.SlidePile.y +
-      this._DragInfo.Settings.SlidePile.height
-    ) {
-      y =
-        this._DragInfo.Settings.SlidePile.y +
-        this._DragInfo.Settings.SlidePile.height -
-        lp.Height;
-    }
-    lp.SetPosition(x, y);
-
-    return lp;
-  }
-
-  _SlideIfEnableTabMod(event, direction) {
-    if (!this._DragInfo.Settings.EnableTabMode) {
-      return false;
-    }
-    const deltaX = event._deltaX;
-    const deltaY = event._deltaY;
-    let distance_x = event.deltaX;
-    let distance_y = event.deltaY;
-    let page_edge =
-      this._DragInfo.Settings.PageWidth * this._DragInfo.Settings.PageEdge;
-    const lp = this.GetLayoutParams();
-    const viewX = lp.MarginLeft + deltaX;
-    const viewY = lp.MarginTop + deltaY;
-    if (event.type === Forge.DragInfo.EVENT_TYPE.OnFling) {
-      page_edge = 0; // fling时，不进行edge判断
-    }
-
-    // 计算
-    switch (this._DragInfo.Settings.DragDirection) {
-      case Forge.DragSetting.DIRECTION_VERTICAL: {
-        // 当拖拽的距离大于等于limitrange时，进行同向动画，否则动画相反
-        distance_x = 0;
-        // 重置duration 与 距离
-        if (distance_y >= 0) {
-          const left_width =
-            this._DragInfo.Settings.PageWidth -
-            (Math.abs(viewY) % this._DragInfo.Settings.PageWidth);
-          if (left_width >= page_edge) {
-            distance_y = this._DragInfo.Settings.PageWidth - left_width;
-          } else {
-            distance_y = -left_width;
-          }
-        } else {
-          const left_width =
-            Math.abs(viewY) % this._DragInfo.Settings.PageWidth;
-          if (left_width >= page_edge) {
-            distance_y = -(this._DragInfo.Settings.PageWidth - left_width);
-          } else {
-            distance_y = left_width;
-          }
-        }
-        break;
-      }
-      case Forge.DragSetting.DIRECTION_HORIZONTAL: {
-        distance_y = 0;
-        if (distance_x >= 0) {
-          const left_width =
-            this._DragInfo.Settings.PageWidth -
-            (Math.abs(viewX) % this._DragInfo.Settings.PageWidth);
-          if (left_width >= page_edge) {
-            distance_x = this._DragInfo.Settings.PageWidth - left_width;
-          } else {
-            distance_x = -left_width;
-          }
-          console.log(
-            `right, left_width:${left_width}, distance_x:${distance_x}`
-          );
-        } else {
-          const left_width =
-            Math.abs(viewX) % this._DragInfo.Settings.PageWidth;
-          if (left_width >= page_edge) {
-            distance_x = -(this._DragInfo.Settings.PageWidth - left_width);
-          } else {
-            distance_x = left_width;
-          }
-          console.log(
-            `left, left_width:${left_width}, distance_x:${distance_x}`
-          );
-        }
-        break;
-      }
-      case Forge.DragSetting.DIRECTION_AUTO: {
-        console.log(
-          "slideIfEnableTabMode DragDirection error DRAG_DIRECTION_AUTO"
-        );
-        break;
-      }
-      default:
-        break;
-    }
-
-    if (distance_x === 0 && distance_y === 0) {
-      console.log("slideIfEnableTabMode distance_x === 0 && distance_y === 0");
-      return false;
-    }
-    const speed =
-      Math.sqrt(distance_x * distance_x + distance_y * distance_y) / 0.3; // 与jsview 效果匹配，300ms完成动画
-    event.deltaX = distance_x;
-    event.deltaY = distance_y;
-    this._DonFlingAnim(event, speed);
-    return true;
-  }
-
-  _DoDragEnd(event) {
-    let deltaX = event._deltaX;
-    let deltaY = event._deltaY;
-    if (
-      this._DragInfo.Settings.DragDirection ===
-      Forge.DragSetting.DIRECTION_VERTICAL
-    ) {
-      deltaX = 0;
-    } else if (
-      this._DragInfo.Settings.DragDirection ===
-      Forge.DragSetting.DIRECTION_HORIZONTAL
-    ) {
-      deltaY = 0;
-    } else if (
-      this._DragInfo.Settings.DragDirection ===
-      Forge.DragSetting.DIRECTION_DISABLE
-    ) {
-      deltaX = 0;
-      deltaY = 0;
-    }
-
-    console.log("_DoDragEnd event:", event, this.Element.style);
-    let lp = this.GetLayoutParams();
-    // 检测边界
-    lp = this._GetMovedLayoutParams(deltaX, deltaY);
-    this.ResetLayoutParams(lp);
-
-    // 补充event
-    event.viewX = lp.MarginLeft;
-    event.viewY = lp.MarginTop;
-
-    return this._DragInfo.Listener.OnDragEnd(event);
-  }
-
-  _DragImactSensorRecycle() {
-    console.log(
-      "_DragImactSensorRecycle this._DragImactSensor:",
-      this._DragImactSensor
-    );
-    if (this._DragImactSensor) {
-      this._DragImactSensor.Recycle();
-    }
-  }
-
-  _DonFlingAnim(event, speed) {
-    const distance_x = event.deltaX;
-    const distance_y = event.deltaY;
-    const lp = this.GetLayoutParams();
-    const view_origin_x = lp.MarginLeft;
-    const view_origin_y = lp.MarginTop;
-    const target_x = lp.MarginLeft + distance_x;
-    const target_y = lp.MarginTop + distance_y;
-    const adjust_lp = this._GetMovedLayoutParams(distance_x, distance_y);
-    if (
-      adjust_lp.MarginLeft === lp.MarginLeft &&
-      adjust_lp.MarginTop === lp.MarginTop
-    ) {
-      console.log(
-        "_DonFlingAnim adjust_lp.MarginLeft === lp.MarginLeft && adjust_lp.MarginTop === lp.MarginTop"
-      );
-      return;
-    }
-
-    this.DragControl = new Forge.DragTranslateControl();
-    this.DragControl._SetView(this);
-    this.DragControl.speed(speed);
-    console.log(`OnFling speed:${speed}`);
-    const setting = this._DragInfo.Settings;
-    this._DragImactSensorRecycle();
-
-    this.Element.style.transform = null;
-    this.DragControl.target(lp.MarginLeft, lp.MarginTop).jumpSilent();
-    // TODO 需确认，恢复view的坐标，进行动画,否则碰撞检测时，会使用坐标并将其于transform translate合计，导致碰撞错误
-    lp.SetPosition(0, 0);
-    this.ResetLayoutParams(lp);
-    let timeStamp = 0;
-
-    this.DragControl.target(target_x, target_y).start(
-      (view_x, view_y) => {
-        this.DragControl = null;
-        lp.SetPosition(view_x, view_y);
-        this.ResetLayoutParams(lp);
-        this.Element.style.transform = null;
-        this._DragImactSensorRecycle();
-
-        // 补充event
-        event.viewX = view_x;
-        event.viewY = view_y;
-        this._DragInfo.Listener.OnFling(event);
-        console.log(
-          `_DonFlingAnim  end view_x:${view_x}, view_y:${view_y}, distance_x:${distance_x}, distance_y:${distance_y}`
-        );
-      },
-      (progress) => {
-        const deltaX = distance_x * progress;
-        const deltaY = distance_y * progress;
-        console.log(
-          `_DonFlingAnim progress:${progress}, deltaX:${deltaX}, deltaY:${deltaY}`
-        );
-        if (
-          Math.abs(deltaX) > this._DragInfo.Settings.TriggerMovedDistance ||
-          Math.abs(deltaY) > this._DragInfo.Settings.TriggerMovedDistance
-        ) {
-          const target_event = {
-            deltaX: view_origin_x + deltaX,
-            deltaY: view_origin_y + deltaY,
-            _deltaX: deltaX,
-            _deltaY: deltaY,
-            timeStamp: parseInt((Date.now() - timeStamp) / 1000, 10),
-          };
-          this._DoDragMove(target_event, false);
-          timeStamp = Date.now();
-        }
-      }
-    );
-    const parent_view_position = this.GetPositionOffset(this.ParentView);
-    // 设置碰撞sensor
-    this._DragImactSensor = new Forge.DragImpactSensor(
-      [
-        {
-          x: setting.SlidePile.x + parent_view_position.x,
-          y: setting.SlidePile.y + parent_view_position.y,
-        },
-        {
-          x:
-            setting.SlidePile.x +
-            parent_view_position.x +
-            setting.SlidePile.width,
-          y: setting.SlidePile.y + parent_view_position.y,
-        },
-        {
-          x: setting.SlidePile.x + parent_view_position.x,
-          y:
-            setting.SlidePile.y +
-            parent_view_position.y +
-            setting.SlidePile.height,
-        },
-        {
-          x:
-            setting.SlidePile.x +
-            parent_view_position.x +
-            setting.SlidePile.width,
-          y:
-            setting.SlidePile.y +
-            parent_view_position.y +
-            setting.SlidePile.height,
-        },
-      ],
-      this.Element,
-      new Forge.sImpactSensorManager.Callback((element_position) => {
-        this._DoDragPause(event);
-        this._DragImactSensorRecycle();
-      }, null)
-    );
-  }
-
-  _DoFling(event) {
-    let distance_x = event.deltaX;
-    let distance_y = event.deltaY;
-    let need_fling = true;
-    let speed = 0;
-    switch (this._DragInfo.Settings.DragDirection) {
-      case Forge.DragSetting.DIRECTION_VERTICAL:
-        distance_x = 0;
-        if (distance_y === 0) {
-          need_fling = false;
-        }
-        speed = Math.abs(event.velocityY);
-        break;
-      case Forge.DragSetting.DIRECTION_HORIZONTAL:
-        distance_y = 0;
-        if (distance_x === 0) {
-          need_fling = false;
-        }
-        speed = Math.abs(event.velocityX);
-        break;
-      case Forge.DragSetting.DIRECTION_DISABLE:
-        need_fling = false;
-        break;
-      default:
-        speed = Math.sqrt(event.velocityX ** 2, event.velocityY ** 2);
-        break;
-    }
-
-    if (need_fling) {
-      event.deltaX = distance_x;
-      event.deltaY = distance_y;
-      this._DonFlingAnim(event, speed);
-    }
-    return true;
-  }
-
-  GetBoundingClientRect() {
-		return new Promise((resolve, reject) => {
-			if (this.Element) {
-        //浏览器上仅为实现相似效果, 而style.animation设置后同一时间片内TransformAnimationObj还未创建,因此通过setTimeout保证TransformAnimationObj存在
-        setTimeout(() => {
-          let view = this;
-          let animCount = 0;
-          while(view) {
-            if (view.TransformAnimationObj && view.TransformAnimationObj.repeatTimes > 0) {
-              animCount++;
-              view.TransformAnimationObj.AddAnimationListener(new Forge.AnimationListener(null, (normal_end) => {
-                animCount--;
-                if (animCount <= 0) {
-                  const {left, top, width, height} = this.Element.getBoundingClientRect();
-                  resolve({
-                    left,
-                    top,
-                    width,
-                    height,
-                  });
-                }
-              }));
-            }
-            view = view.ParentView;
-          }
-        }, 1);
-      } else {
-        reject(new Error("BrowserError: dom element is null."));
-      }
-		})
-	}
-}
-LayoutViewBase.DivId = 0;
-// Static variable
-Forge.LayoutViewBase = LayoutViewBase;
-
-class LayoutView extends Forge.LayoutViewBase {
-  /**
-   * 渲染树的每个节点。<br>
-   *     创建例子：<br>
-   *         1. 通过Forge.TextureManager创建Texture<br>
-   *         2. 将Texture装入Forge.TextureSetting集合, var ts = new Forge.TextureSetting(...);<br>
-   *         3. var v = new Forge.LayoutView(ts)<br>
-   *         4. 将view加入渲染树 parent_view.AddView(v, {x:0, y:0, width:100, height:100})<br>
-   *            width和height决定Texture的描画尺寸（拉伸）<br>
-   *
-   * @public
-   * @constructor Forge.LayoutView
-   * @extends Forge.LayoutViewBase
-   * @param {Forge.TextureSetting} texture_setting            用于描画的Texture合集
-   * */
-  constructor(texture_setting, element_name) {
-    if (texture_setting && !(texture_setting instanceof Forge.TextureSetting)) {
-      Forge.ThrowError("ERROR:LayoutView need TextureSetting as parameter");
-    }
-    element_name = element_name || "div";
-    super(texture_setting, element_name);
-  }
-}
-
-Forge.LayoutView = LayoutView;
-window.LayoutView = Forge.LayoutView; // export class
-class RootView extends Forge.LayoutView {
-  /**
-   * 根节点LayoutView
-   *
-   * @protected
-   * @constructor Forge.RootView
-   * @extends Forge.LayoutView
-   * */
-  constructor() {
-    super(undefined, "root");
-    this._ViewType = 1;
-    this._IsChildOfRootView = true;
-    window.gRootView = this;
-    Forge.sRootView = this;
-  }
-
-  /**
-   * 初始化RootView的尺寸（一般根据window.innerHeight和window.innerWidth)
-   *
-   * @public
-   * @func Init
-   * @memberof Forge.RootView
-   * @instance
-   * @param {Forge.Renderer} renderer
-   * @param {int} left
-   * @param {int} top
-   * @param {int} width
-   * @param {int} height
-   * */
-  Init(renderer, left, top, width, height) {
-    // Init static private value
-    this.InitLayoutViewStaticValues(renderer);
-
-    this.ResetLayoutParams({ x: 0, y: 0, width: 1280, height: 720 }); // TODO: 需要和ActivityManager设置进行对接
-  }
-
-  /**
-   * 初始化LayoutViewBase中的静态变量
-   *
-   * @protected
-   * @func InitLayoutViewStaticValues
-   * @memberof Forge.LayoutViewBase
-   * @instance
-   * @param {Forge.Renderer} renderer
-   * */
-  InitLayoutViewStaticValues(renderer) {
-    Forge.LayoutViewBase.sRenderer = renderer; // Set shared renderer of all LayoutView
-    Forge.LayoutViewBase.sInternalTextureManager = renderer.GetSharedTextureManager();
-    Forge.LayoutViewBase.sIdentityMat4 = new Forge.Mat4();
-    Forge.LayoutViewBase.sNullDirectParentMat4 = new Forge.Mat4();
-    Forge.LayoutViewBase.sBakeFlipYMat4 = new Forge.Mat4().rotatex(180);
-  }
-}
-Forge.RootView = RootView;
-window.RootView = Forge.RootView; // export class
-class CClipRectInfo {
-  constructor(x, y, w, h, enable) {
-    this.coordX = x;
-    this.coordY = y;
-    this.width = w;
-    this.height = h;
-    this.useScissors = enable;
-    this.maskStencil = null;
-  }
-
-  updateInfo(x, y, w, h, enable) {
-    this.coordX = x;
-    this.coordY = y;
-    this.width = w;
-    this.height = h;
-    this.useScissors = enable;
-  }
-
-  setMaskStencil(local_file_uri) {
-    this.maskStencil = local_file_uri;
-  }
-}
-
-class ClipView extends Forge.LayoutView {
-  /**
-   * 带裁剪功能的LayoutView
-   *
-   * @public
-   * @constructor Forge.ClipView
-   * @extends Forge.LayoutView
-   * @param {Forge.TextureSetting} texture_setting 背景Texture集合
-   * */
-  constructor(texture_setting) {
-    super(texture_setting, "div");
-    this._ClipRectInfo = null;
-    this.Id = "ClipView";
-    this.TextureSetting = null;
-  }
-
-  /**
-   * 重载LayoutView.SetId，为所设置的Id添加后缀_ClipView
-   *
-   * @public
-   * @func SetId
-   * @memberof Forge.ClipView
-   * @instance
-   * @param {string} id 原始id
-   * */
-  SetId(id) {
-    this.Id = `${id}_ClipView`;
-  }
-
-  /**
-   * 设置裁剪区域大小
-   *
-   * @public
-   * @func SetClipRect
-   * @memberof Forge.ClipView
-   * @instance
-   * @param {int} x           相对于自己的坐标
-   * @param {int} y           相对于自己的坐标
-   * @param {int} width       相对于自己的坐标
-   * @param {int} height      相对于自己的坐标
-   * @param {boolean} use_scissors    是否进行裁剪
-   * */
-  SetClipRect(x, y, width, height, use_scissors) {
-    // use_scissors = false; // Enabled only when debug
-    if (this._ClipRectInfo === null) {
-      this._ClipRectInfo = new CClipRectInfo(x, y, width, height, use_scissors);
-    } else {
-      this._ClipRectInfo.updateInfo(x, y, width, height, use_scissors);
-    }
-    const clip_left = x;
-    const clip_top = y;
-    const clip_right = this.LayoutParams.Width - clip_left - width;
-    const clip_bottom = this.LayoutParams.Height - clip_top - height;
-    if (use_scissors) {
-      this.Element.style.overflow = "hidden";
-      this.Element.style.clipPath = `inset(${clip_top}px ${clip_right}px ${clip_bottom}px ${clip_left}px)`;
-    } else {
-      this.Element.style.overflow = "visible";
-      this.Element.style.clipPath = "unset";
-    }
-  }
-}
-Forge.ClipView = ClipView;
-window.ClipView = Forge.ClipView; // export class
-
-class NinePatchView extends Forge.LayoutView {
-  /**
-   * 按照NinePatch方式进行渲染的专用LayoutView
-   *
-   * @public
-   * @constructor Forge.NinePatchView
-   * @extends Forge.LayoutView
-   * @param {Forge.TextureSetting} texture_setting 背景Texture集合
-   * */
-  constructor(texture_setting) {
-    super(texture_setting, "div");
-    this._HorizontalRepeats = [0, 0, 0, 0];
-    this._VerticalRepeats = [0, 0, 0, 0];
-    this._HorizontalPadding = [0, 0];
-    this._VerticalPadding = [0, 0];
-    this._ImageDspWidth = 0;
-    this._ImageDspHeight = 0;
-  }
-
-  /**
-   * 设置新的Texture集合
-   *
-   * @public
-   * @func ResetTexture
-   * @memberof Forge.LayoutViewBase
-   * @instance
-   * @param {Forge.TextureSetting} texture_setting    新的Texture集合
-   * */
-  ResetTexture(texture_setting) {
-    this.TextureSetting = texture_setting;
-    this._ApplyChanges();
-  }
-
-  /**
-   * 设置横向延展区域和纵向延展的区域。（即NinePatch规则中的上边线和左边线）
-   *
-   * @public
-   * @func SetRepeat
-   * @memberof Forge.NinePatchView
-   * @instance
-   * @param {Array} horizontal_repeat  横向延展区域设置数组（目前延展区域个数最大支持2个）<br>
-   *                                  数组元素内容，包含start和end该点：{start:xxx, width:xxx}
-   * @param {Array} vertical_repeat  纵向延展区域设置数组（目前延展区域个数最大支持2个）<br>
-   *                                  数组元素内容，包含start和end该点：{start:xxx, width:xxx}
-   * */
-  SetRepeat(horizontal_repeat, vertical_repeat) {
-    Forge.Assert(horizontal_repeat.length <= 2);
-    Forge.Assert(vertical_repeat.length <= 2);
-
-    for (let i = 0; i < 2; i++) {
-      if (i < horizontal_repeat.length) {
-        this._HorizontalRepeats[i * 2] = horizontal_repeat[i].start;
-        this._HorizontalRepeats[i * 2 + 1] = horizontal_repeat[i].width;
-      } else {
-        this._HorizontalRepeats[i * 2] = 0;
-        this._HorizontalRepeats[i * 2 + 1] = 0;
-      }
-
-      if (i < vertical_repeat.length) {
-        this._VerticalRepeats[i * 2] = vertical_repeat[i].start;
-        this._VerticalRepeats[i * 2 + 1] = vertical_repeat[i].width;
-      } else {
-        this._VerticalRepeats[i * 2] = 0;
-        this._VerticalRepeats[i * 2 + 1] = 0;
-      }
-    }
-
-    this._ApplyChanges();
-
-    return this; // 为了支持连续设定的用法
-  }
-
-  /**
-   * 设置横向填充区尺寸以及纵向填充区尺寸。（即NinePatch规则中的下边线和右边线）
-   *
-   * @public
-   * @func SetPadding
-   * @memberof Forge.NinePatchView
-   * @instance
-   * @param {Object} horizontal_padding  内容覆盖区域（横向），格式：{start:xxx, width:xxx}
-   * @param {Object} vertical_padding  内容覆盖区域（纵向向），格式：{start:xxx, width:xxx}
-   * */
-  SetPadding(horizontal_padding, vertical_padding) {
-    Forge.Assert(horizontal_padding !== null);
-    Forge.Assert(vertical_padding !== null);
-    this._VerticalPadding[0] = vertical_padding.start;
-    this._VerticalPadding[1] = vertical_padding.width;
-    this._HorizontalPadding[0] = horizontal_padding.start;
-    this._HorizontalPadding[1] = horizontal_padding.width;
-
-    this._ApplyChanges();
-
-    return this; // 为了支持连续设定的用法
-  }
-
-  /**
-   * 应对NinePatch图要缩放显示的场景，可以设置显示尺寸
-   *
-   * @public
-   * @func SetImageDspSize
-   * @memberof Forge.NinePatchView
-   * @instance
-   * @param {int} image_dsp_width  图片缩放后的显示宽度
-   * @param {int} image_dsp_height  图片缩放后的显示高度
-   * */
-  SetImageDspSize(image_dsp_width, image_dsp_height) {
-    this._ImageDspWidth = image_dsp_width;
-    this._ImageDspHeight = image_dsp_height;
-  }
-
-  _ApplyChanges() {
-    let texture_setting = this.TextureSetting;
-    if (texture_setting) {
-      if (texture_setting.MaskSetting) {
-        if (texture_setting.MaskSetting._MaskType === "CORNER") {
-          this._SetBorderRadius(texture_setting.MaskSetting);
-        }
-      }
-      if (texture_setting.Texture.Source) {
-        const texture_width = texture_setting.Texture.RenderTexture.Width;
-        const texture_height = texture_setting.Texture.RenderTexture.Height;
-        const scale_width = texture_width / this._ImageDspWidth;
-        const scale_height = texture_height / this._ImageDspHeight;
-
-        // image wide
-        const wide_left = this._HorizontalRepeats[0];
-        const wide_right = this._ImageDspWidth - this._HorizontalRepeats[1] - wide_left;
-        const wide_top = this._VerticalRepeats[0];
-        const wide_bottom = this._ImageDspHeight - this._VerticalRepeats[1] - wide_top;
-
-        // slice top right bottom left
-        let slice_left = Math.floor(this._HorizontalRepeats[0] * scale_width);
-        let slice_right =
-          texture_width - Math.floor(this._HorizontalRepeats[1] * scale_width) - slice_left;
-        let slice_top = Math.floor(this._VerticalRepeats[0] * scale_height);
-        let slice_bottom =
-          texture_height - Math.floor(this._VerticalRepeats[1] * scale_height) - slice_top;
-        
-        if (slice_left + slice_right >= texture_width) {
-          // 修正.9无中心repeat区域在PC repeat区域上不显示问题
-          slice_left -= 1;
-          slice_right -= 1;
-        }
-
-        if (slice_top + slice_bottom >= texture_height) {
-          // 修正.9无中心repeat区域在PC repeat区域上不显示问题
-          slice_top -= 1;
-          slice_bottom -= 1;
-        }
-
-        const slice_str = `${slice_top} ${slice_right} ${slice_bottom} ${slice_left}`;
-
-        // BorderImage
-        this.Element.style.borderImage = `url(${texture_setting.Texture.Source}) ${slice_str} fill`; // 图片边框向内偏移。
-
-        // outset
-        const outset_left = this._HorizontalPadding[0];
-        const outset_right =
-          this._ImageDspWidth - this._HorizontalPadding[1] - outset_left;
-        const outset_top = this._VerticalPadding[0];
-        const outset_bottom =
-          this._ImageDspHeight - this._VerticalPadding[1] - outset_top;
-        
-        this.Element.style.borderImageWidth = `${wide_top}px ${wide_right}px ${wide_bottom}px ${wide_left}px`; // 图片边框的宽度。
-        this.Element.style.borderImageOutset = `${outset_top}px ${outset_right}px ${outset_bottom}px ${outset_left}px`; // 边框图像区域超出边框的量。
-      }
-    } else {
-      // clear image set
-
-      // border radius
-      this.Element.style.borderRadius = "";
-
-      // Border image
-      this.Element.style.borderImage = "";
-    }
-  }
-}
-
-Forge.NinePatchView = NinePatchView;
-
-class JsvElementView extends Forge.LayoutView {
-  /**
-   * 根节点LayoutView
-   *
-   * @protected
-   * @constructor Forge.RootView
-   * @extends Forge.LayoutView
-   * */
-  constructor(name) {
-    let origin_name;
-    if (name.startsWith("jsve-")) {
-      // 新模式 jsve-XXXX 避免和vue的普通定义重名
-      origin_name = name.substr(5);
-    } else {
-      // 兼容老版本的 jsvXXX 模式
-      origin_name = name.substr(3);
-    }
-    super(undefined, origin_name);
-  }
-
-  setAttribute(name, value) {
-    this.Element.setAttribute(name, value);
-  }
-
-  removeAttribute(name) {
-    this.Element.removeAttribute(name);
-  }
-
-  getAttribute(name) {
-    return this.Element.getAttribute(name);
-  }
-
-  hasAttribute(name) {
-    return this.Element.hasAttribute(name);
-  }
-
-  get textContent() {
-    return this.Element.textContent;
-  }
-
-  set textContent(text) {
-    this.Element.textContent = text;
-  }
-}
-Forge.JsvElementView = JsvElementView;
-
-class VideoView extends Forge.LayoutView {
-  constructor(video_player_hdl, texture_setting) {
-    super(texture_setting);
-    this._ViewType = 8;
-    this.Element = video_player_hdl.Ele;
-    this.Id = "VideoView";
-  }
-
-  /**
-   * 重载LayoutView.SetId，为所设置的Id添加后缀_VideoView
-   *
-   * @public
-   * @func SetId
-   * @memberof Forge.VideoView
-   * @instance
-   * @param {string} id 原始id
-   * */
-  SetId(id) {
-    this.Id = `${id}_VideoView`;
-  }
-
-  ResetLayoutParams(new_params) {
-    if (new_params !== null) {
-      if (!(new_params instanceof Forge.LayoutParamsBase)) {
-        this.LayoutParams = new Forge.LayoutParams(new_params);
-      } else {
-        this.LayoutParams = new_params.Clone();
-      }
-      this.Element.style.left = `${this.LayoutParams.MarginLeft}px`;
-      this.Element.style.top = `${this.LayoutParams.MarginTop}px`;
-      if (this.LayoutParams.Width) {
-        this.Element.style.width = `${this.LayoutParams.Width}px`;
-      }
-      if (this.LayoutParams.Height) {
-        this.Element.style.height = `${this.LayoutParams.Height}px`;
-      }
-    } else {
-      Forge.ThrowError("ResetLayoutParams(): new params is null");
-    }
-  }
-
-  _OnDetachFromSystem() {
-    super._OnDetachFromSystem();
-    if (this._VideoPlayerHdl) {
-      this._VideoPlayerHdl.unload();
-      this._VideoPlayerHdl = null;
-    }
-  }
-}
-Forge.VideoView = VideoView;
-
-class EditControlView extends Forge.LayoutView {
-  /**
-   * 带输入框功能的LayoutView
-   *
-   * @constructor Forge.EditControlView
-   * @extends Forge.LayoutView
-   * @param {Forge.TextureSetting} texture_setting 背景Texture集合
-   * */
-  constructor() {
-    super(null, "input");
-    this._ViewType = 5;
-    this._InputType = Forge.TextInputType.TEXT;
-    this.Id = "EditControlView";
-  }
-
-  _OnAttachToSystem() {
-    super._OnAttachToSystem();
-    // 该input只作为文字录入的辅助作用，故移除屏幕外,
-    // 具体描画为高阶控件操控
-    this.Element.style.left = "-1920px";
-    this.Element.style.top = "-1080px";
-    this.Element.style.width = "1px";
-    this.Element.style.height = "1px";
-    /* //TODO for Test
-        this.Element.style.left="300px";
-        this.Element.style.top="100px";
-        this.Element.style.width="100px";
-        this.Element.style.height="50px"; */
-
-    // pointerEvents设置，input才能获得焦点
-    this.Element.style.pointerEvents = "auto";
-    this.Element.addEventListener("keydown", (event) => {
-      // add listener keydown for textarea
-      event = event || window.event;
-      let cur_offset = this.Element.selectionStart;
-      console.log(`keydown cur_offset:${cur_offset}`);
-      if (event.keyCode === 37) {
-        --cur_offset;
-        if (cur_offset < 0) {
-          cur_offset = 0;
-        }
-        if (cur_offset !== this.Element.selectionStart) {
-          this.OnTextChanged(this.Element.value, cur_offset, true);
-          if (event.stopPropagation) {
-            event.stopPropagation();
-          }
-        } else {
-          this.Element.blur();
-        }
-      } else if (event.keyCode === 39) {
-        ++cur_offset;
-        if (cur_offset > this.Element.value.length) {
-          cur_offset = this.Element.value.length;
-        }
-        if (cur_offset !== this.Element.selectionStart) {
-          this.OnTextChanged(this.Element.value, cur_offset, true);
-          if (event.stopPropagation) {
-            event.stopPropagation();
-          }
-        } else {
-          this.Element.blur();
-        }
-      } else if (event.keyCode === 38 || event.keyCode === 40) {
-        this.Element.blur();
-      }
-    });
-
-    // input onfocus焦点获得
-    this.Element.onfocus = (event) => {
-      console.log("onfocus in");
-      this.OnStatusChanged(1);
-    };
-    // input onfocus焦点丢失
-    this.Element.onblur = (event) => {
-      console.log("onblur in");
-      this.OnStatusChanged(0);
-    };
-    const ifDigital = (char) =>
-      "0".charCodeAt() <= char.charCodeAt() &&
-      char.charCodeAt() <= "9".charCodeAt();
-
-    // input 文字变化时
-    this.Element.oninput = (event) => {
-      console.log("oninput:", event);
-      if (event.target.value.length > 0 && event.target.selectionStart > 0) {
-        const start = event.target.selectionStart - 1;
-        const end = event.target.selectionStart;
-        const add_text = event.target.value.slice(start, end);
-        if (
-          !ifDigital(add_text) &&
-          this._InputType === Forge.TextInputType.NUMBER
-        ) {
-          event.target.value =
-            event.target.value.substr(0, start) +
-            event.target.value.substr(end);
-          event.target.selectionStart = start;
-        }
-      }
-
-      const text = event.target.value;
-      const select_start = event.target.selectionStart;
-      this.OnTextChanged(decodeURIComponent(text), select_start);
-    };
-  }
-
-  /**
-   * 重载LayoutView.SetId，为所设置的Id添加后缀_EditControlView
-   *
-   * @public
-   * @func SetId
-   * @memberof Forge.EditControlView
-   * @instance
-   * @param {string} id 原始id
-   * */
-  SetId(id) {
-    this.Id = `${id}_EditControlView`;
-  }
-
-  /**
-   * 显示输入法
-   *
-   * @public
-   * @func showIme
-   * @memberof Forge.EditControlView
-   * @instance
-   * @param {Forge.TextInputType} input_type
-   * @param {string} text    显示字符串
-   * @param {int} cursor_pos  光标所在位置
-   * @param {int} selectionEnd  字符串选择stop位置，默认为文字的末尾
-   * */
-  showIme(input_type, text, cursor_pos) {
-    if (!this.Element) {
-      console.log("showIme but ele is null!");
-      return;
-    }
-    if (input_type === Forge.TextInputType.NONE) {
-      console.log("showIme input_type error");
-      return;
-    }
-    if (typeof cursor_pos === "undefined" || cursor_pos === null) {
-      cursor_pos = text.length > 0 ? text.length : 0;
-    }
-    if (cursor_pos < 0) {
-      cursor_pos = 0;
-    } else if (cursor_pos > text.length) {
-      cursor_pos = text.length > 0 ? text.length : 0;
-    }
-    this._InputType = input_type;
-    /* switch (input_type) {
-            case Forge.TextInputType.PASSWORD:
-                this.Element.type = "password";
-                break;
-            case Forge.TextInputType.NUMBER:
-                this.Element.type = "number";
-                break;
-            case Forge.TextInputType.TEXT:
-            default:
-                this.Element.type = "text";
-                break;
-        } */
-    // 浏览器端不对type做限制，（因为number/password类型时selectionStart为null）
-    this.Element.type = "text";
-    this.Element.value = text;
-    this.Element.focus();
-    this.Element.selectionStart = cursor_pos;
-    this.Element.selectionEnd = cursor_pos;
-  }
-
-  /**
-   * 隐藏输入法
-   *
-   * @public
-   * @func hideIme
-   * @memberof Forge.EditControlView
-   * @instance
-   * */
-  hideIme() {
-    if (!this.Element) {
-      console.log("hideIme, but ele is null!");
-      return;
-    }
-    this.Element.blur();
-  }
-
-  /**
-   * 更新光标位置
-   *
-   * @public
-   * @func updateCursorOffset
-   * @memberof Forge.EditControlView
-   *
-   * @instance
-   * @param {String} text  显示字符串
-   * @param {int} cursor_pos  光标所在位置
-   * */
-  updateCursorOffset(text, cursor_offset) {
-    if (!this.Element) {
-      console.log("updateCursorOffset, but ele is null!");
-      return;
-    }
-    this.Element.selectionStart = cursor_offset;
-    this.Element.selectionEnd = cursor_offset;
-    this.Element.value = text;
-  }
-
-  /**
-   * 文字变更
-   * @param value
-   * @param {int} cursor_pos  光标所在位置
-   * @param {bool} moved  光标移动
-   * @constructor
-   */
-  OnTextChanged(value, cursor_pos, moved) {
-    // Override
-    console.log(`OnTextChanged value:${value}`);
-  }
-
-  /**
-   * 状态变更
-   * @param status    输入法状态 1:'show'/0:'hide'
-   * @constructor
-   */
-  OnStatusChanged(status) {
-    // Override
-  }
-
-  /**
-   * action 事件通知
-   * @param action
-   * @constructor
-   */
-  OnEditAction(action) {
-    // Override
-  }
-}
-
-class FilterView extends Forge.LayoutView {
-  constructor(texture_setting, type = 1) {
-    super(texture_setting);
-		this._ViewType = 10;
-		this._FilterType = type
-		this.Id = "FilterView";
-    this.Element.style.filter = "grayscale(100%)"
-  }
-  FilterSwitch(enable) {
-    if (this.Element) {
-      this.Element.style.filter = enable ? "grayscale(100%)" : "";
-    }
-  }
-  SetId(id) {
-		this.Id = id + "_FilterView";
-	}
-}
-Forge.FilterView = FilterView;
-
-Forge.TextInputType = {
-  NONE: 0,
-  TEXT: 1,
-  PASSWORD: 2,
-  TEXT_AREA: 3,
-  CONTENT_EDITABLE: 4,
-  SEARCH: 5,
-  URL: 6,
-  EMAIL: 7,
-  TELEPHONE: 8,
-  NUMBER: 9,
-};
-Forge.EditControlView = EditControlView;
-class JsvControl {
-  constructor(params_count) {
-    this._Current = new Array(params_count).fill(0);
-    this._Target = new Array(params_count).fill(0);
-    this._RepeatStart = new Array(params_count).fill(0);
-    this._JumpTarget = null;
-    this._Jumping = false;
-    this._ParameterCount = params_count;
-    this._StateIndex = 0; // 0: idle, 1:running
-    this._StateLocked = false;
-    this._StartSwitcher = false;
-    this._PausedCallback = null;
-    this._EndCallback = null;
-    this._NextEndCallback = null;
-    this._Token = 0;
-    this._Repeat = false;
-    this._OnRepeatCallback = null;
-    this._SpriteView = null;
-    this._AdvanceCallback = null;
-  }
-
-  setRepeat(enable, repeat_callback) {
-    this._Repeat = enable;
-    if (enable) {
-      this._OnRepeatCallback = repeat_callback;
-    } else {
-      this._OnRepeatCallback = null;
-    }
-    return this;
-  }
-
-  start(end_callback, advance_callback) {
-    // 取消旧的Callback
-    this._NextEndCallback = end_callback;
-    this._EndCallback = null;
-    this._AdvanceCallback = advance_callback;
-    this._StartSwitcher = true;
-    this._Jumping = false;
-    this._StateMachineNext();
-  }
-
-  pause(paused_callback) {
-    this._AdvanceCallback = null;
-
-    // 执行pause动作时，相当于取消start()动作，所以EndCallback同时也应该被取消
-    if (this._EndCallback !== null || this._NextEndCallback !== null) {
-      this._EndCallback = null;
-      this._NextEndCallback = null;
-    }
-
-    // 根据当前状态，已经处于Pause则直接回调，否则发送pause指令
-    if (this._StateIndex === 0) {
-      if (paused_callback) {
-        this._CallbackWithCatch(this._Current, paused_callback);
-      }
-    } else {
-      if (paused_callback) {
-        this._PausedCallback = paused_callback;
-      }
-      this._StateMachineNext();
-    }
-  }
-
-  jump() {
-    this._JumpTarget = [...this._Target];
-    this._Jumping = true;
-    this._StartSwitcher = true;
-    this._StateMachineNext();
-  }
-
-  jumpSilent() {
-    this._JumpTarget = [...this._Target];
-  }
-
-  startFpsTesting() {
-    Forge.sRenderBridge.SetStepFpsSwitch(true);
-  }
-
-  stopFpsTesting() {
-    Forge.sRenderBridge.SetStepFpsSwitch(false);
-  }
-
-  _WrapBuildAnimation(repeat_start_array, current_array, tos_array, act_jump) {
-    console.warn("Should Override");
-  }
-
-  _WrapCallback(currents, callback) {
-    console.warn("Should Override");
-  }
-
-  _CallbackWithCatch(currents, callback) {
-    try {
-      this._WrapCallback(currents, callback);
-    } catch (e) {
-      console.error("Error:in callback");
-      console.error(e);
-    }
-  }
-
-  _StateMachineNext() {
-    if (this._StateLocked) {
-      // 内部处理进行中，暂停状态切换
-      return;
-    }
-
-    if (this._StateIndex === 0) {
-      // Idle -> play, need switcher
-      if (this._StartSwitcher) {
-        this._StartSwitcher = false;
-        if (this._StartAnimation()) {
-          this._StateIndex = 1;
-        }
-      }
-    } else if (this._StateIndex === 1) {
-      // Play -> idle, no need switcher
-      this._StopAnimation();
-    }
-  }
-
-  _StartAnimation() {
-    // 当动画开始后才进行回调设置，防止Pause过程中直接调用了新设置进的回调
-    this._EndCallback = this._NextEndCallback;
-    this._NextEndCallback = null;
-
-    const froms = this._JumpTarget ? [...this._JumpTarget] : [...this._Current];
-    const tos = this._Target;
-    const repeat_starts = this._Repeat ? [...this._RepeatStart] : null;
-
-    // const token = this._Token++;
-
-    const anim = this._WrapBuildAnimation(
-      repeat_starts,
-      froms,
-      tos,
-      this._Jumping
-    );
-
-    // clear jump status
-    this._JumpTarget = null;
-    this._Jumping = false;
-
-    if (anim === null) {
-      return;
-    }
-
-    // 生成OnFinalProgress处理监听，memo在 _WrapBuildAnimation()处理后生成，因为build处理中可能改变tos
-    const memo_tos = [...tos];
-    const that = this;
-    const listener = new Forge.AnimationListener()
-      .OnFinalProgress((progress) => {
-        that._OnPaused(
-          repeat_starts !== null ? repeat_starts : froms,
-          memo_tos,
-          progress
-        );
-      })
-      .OnAdvance((progress) => {
-        if (this._AdvanceCallback) {
-          this._AdvanceCallback(progress);
-        }
-      });
-
-    if (this._OnRepeatCallback) {
-      listener.OnRepeat((times) => {
-        if (that._OnRepeatCallback) {
-          that._OnRepeatCallback(times);
-        }
-      });
-    }
-
-    anim.AddAnimationListener(listener);
-    anim.Enable(Forge.AnimationEnable.KeepTransform);
-    if (this._Repeat) {
-      anim.EnableInfinite();
-    }
-    this._SpriteView.StartAnimation(anim);
-
-    return true; // success
-  }
-
-  _StopAnimation() {
-    this._SpriteView.StopAnimation();
-  }
-
-  _OnPaused(froms, tos, progress) {
-    for (let i = 0; i < this._ParameterCount; i++) {
-      this._Current[i] = Math.floor((tos[i] - froms[i]) * progress + froms[i]);
-    }
-
-    this._StateLocked = true;
-    // 换出callbacks，回调时可能加入新的callbacks
-    const paused_callback = this._PausedCallback;
-    const ended_callback = this._EndCallback;
-    this._PausedCallback = null;
-
-    // 回调所有callback
-    if (paused_callback) {
-      // Paused callback
-      this._CallbackWithCatch(this._Current, paused_callback);
-    }
-    if (ended_callback && progress === 1) {
-      // Ended callback
-      this._EndCallback = null;
-      this._CallbackWithCatch(this._Current, ended_callback);
-    }
-
-    this._StateLocked = false;
-
-    this._StateIndex = 0; // mark idle
-    const that = this;
-    that._StateMachineNext(); // Trigger next start
-  }
-
-  _SetView(jsv_view) {
-    this._SpriteView = jsv_view;
-  }
-}
-class DragTranslateControl extends JsvControl {
-  constructor() {
-    super(2); // targetX, targetY, accelerate, init velocity
-    this._Mode = 0; // 0: 匀速控制模式, 1: 加减速控制模式
-    this._Speed = 0; // pixel per second
-    this._VerlocityAcc = 0; // 加速度值
-    this._VerlocityInit = 0; // 初始速度
-    this._AccAlongX = true; // true 延X轴加速， false 延Y轴加速
-    this._AnimationRef = null;
-    this._AllowFrameStep = false; // 是否可以使用FrameStep模式,该模式下为了保证动画的平滑性，动画总运行时间会超过设定时间
-  }
-
-  allowFrameStepMode(allow) {
-    this._AllowFrameStep = allow;
-    return this;
-  }
-
-  selectMode(mode) {
-    switch (mode) {
-      case "UniformMotion":
-        this._Mode = 0;
-        break;
-      case "AcceleratedMotion":
-        this._Mode = 1;
-        this.setRepeat(false); // 加速模式不支持repeat
-        break;
-      default:
-        console.error(`Unsupported input=${mode}`);
-    }
-
-    return this;
-  }
-
-  targetX(new_x) {
-    // Take effect in next Start
-    this._Target[0] = new_x;
-    return this;
-  }
-
-  targetY(new_y) {
-    // Take effect in next Start
-    this._Target[1] = new_y;
-    return this;
-  }
-
-  target(new_x, new_y) {
-    // Take effect in next Start
-    this._Target[0] = new_x;
-    this._Target[1] = new_y;
-    return this;
-  }
-
-  // start_x, start_y，必须要在当前位置到target的范围之外，范围之内目前不支持
-  enableRepeatFrom(start_x, start_y, repeat_callback) {
-    if (!this._ComfirmMode(0)) return;
-
-    this.setRepeat(true, repeat_callback);
-    this._RepeatStart[0] = start_x;
-    this._RepeatStart[1] = start_y;
-    return this;
-  }
-
-  speed(pixel_per_second) {
-    console.log(`speed, pixel_per_second:${pixel_per_second}`);
-    if (!this._ComfirmMode(0)) return;
-
-    // Take effect in next Start
-    this._Speed = pixel_per_second;
-    return this;
-  }
-
-  // Start后，从当前位置到目标位置后动画结束
-  accelerateX(acc_x, target_x) {
-    if (!this._ComfirmMode(1)) return;
-
-    this._Target[0] = target_x;
-    this._VerlocityAcc = acc_x;
-    this._VerlocityInit = 0;
-    this._AccAlongX = true;
-    return this;
-  }
-
-  accelerateY(acc_y, target_y) {
-    if (!this._ComfirmMode(1)) return;
-
-    this._Target[1] = target_y;
-    this._VerlocityAcc = acc_y;
-    this._VerlocityInit = 0;
-    this._AccAlongX = false;
-    return this;
-  }
-
-  decelerateX(acc_x, init_v_x) {
-    if (!this._ComfirmMode(1)) return;
-
-    this._VerlocityAcc = acc_x;
-    this._VerlocityInit = init_v_x;
-    this._AccAlongX = true;
-    return this;
-  }
-
-  decelerateY(acc_y, init_v_y) {
-    if (!this._ComfirmMode(1)) return;
-
-    this._VerlocityAcc = acc_y;
-    this._VerlocityInit = init_v_y;
-    this._AccAlongX = false;
-    return this;
-  }
-
-  // Start后，当减速到0时结束动画
-  decelerate(acc_x, acc_y, init_v_x, init_v_y) {
-    if (this._Mode !== 1) {
-      console.error("Error: mode error");
-      return;
-    }
-
-    this._VerlocityAcc[0] = acc_x;
-    this._VerlocityAcc[1] = acc_y;
-    this._VerlocityInit[0] = init_v_x;
-    this._VerlocityInit[1] = init_v_y;
-    return this;
-  }
-
-  _ComfirmMode(mode) {
-    if (this._Mode !== mode) {
-      console.error("Error: mode error");
-      return false;
-    }
-    return true;
-  }
-
-  // Override
-  _WrapBuildAnimation(repeat_start_array, current_array, tos_array, act_jump) {
-    if (act_jump) {
-      this._AnimationRef = this._UniformMove(
-        null,
-        current_array,
-        tos_array,
-        act_jump
-      );
-    } else {
-      if (this._Mode === 0) {
-        this._AnimationRef = this._UniformMove(
-          repeat_start_array,
-          current_array,
-          tos_array,
-          false
-        );
-      } else if (this._Mode === 1) {
-        this._AnimationRef = this._AccelerMove(current_array, tos_array);
-      }
-    }
-    return this._AnimationRef;
-  }
-
-  _UniformMove(repeat_start_array, current_array, tos_array, act_jump) {
-    let from_x = 0;
-    let from_y = 0;
-    let start_pos = 0.0;
-    let animate_time = 1;
-
-    const current_x = current_array[0];
-    const current_y = current_array[1];
-    const to_x = tos_array[0];
-    const to_y = tos_array[1];
-
-    if (repeat_start_array !== null) {
-      from_x = repeat_start_array[0];
-      from_y = repeat_start_array[1];
-      const distance = this._Distance(current_x, current_y, to_x, to_y);
-      const distance_total = this._Distance(from_x, from_y, to_x, to_y);
-      start_pos = (distance_total - distance) / distance_total;
-      if (!act_jump) {
-        animate_time = (distance_total * 1000) / this._Speed;
-      }
-    } else {
-      from_x = current_x;
-      from_y = current_y;
-      start_pos = 0.0;
-      if (!act_jump) {
-        animate_time =
-          (this._Distance(current_x, current_y, to_x, to_y) * 1000) /
-          this._Speed;
-      }
-    }
-
-    if (!act_jump && animate_time === 0) {
-      console.warn("Discard starting request for no distance");
-      // 但动画仍然会执行，为了能正常触发回调
-    }
-
-    let anim = null;
-    if (
-      (from_x === to_x || from_y === to_y) &&
-      !act_jump &&
-      this._AllowFrameStep &&
-      window.JsView
-    ) {
-      // 单轴动画时，使用Frame animation来提升平滑性
-      console.log("Using frame translate animation");
-      let position_from = 0;
-      let position_target = 0;
-      let affect_x = true;
-      if (from_x !== to_x) {
-        // X轴方向上的移动
-        position_from = from_x;
-        position_target = to_x;
-        affect_x = true;
-      } else {
-        // Y轴方向上的移动
-        position_from = from_y;
-        position_target = to_y;
-        affect_x = false;
-      }
-      anim = new Forge.TranslateFrameAnimation(
-        position_from,
-        position_target,
-        this._Speed,
-        affect_x
-      );
-    } else {
-      // 创建普通的平移动画
-      anim = new Forge.TranslateAnimation(
-        from_x,
-        to_x,
-        from_y,
-        to_y,
-        animate_time,
-        null
-      );
-    }
-
-    if (start_pos !== 0) {
-      if (start_pos < 0) {
-        console.warn("Warning: start position out of repeating range");
-      } else {
-        anim.SetStartPos(start_pos);
-      }
-    }
-    return anim;
-  }
-
-  _AccelerMove(current_array, tos_array) {
-    const current = this._AccAlongX ? current_array[0] : current_array[1];
-    const init_v = this._VerlocityInit;
-    const acc = this._VerlocityAcc;
-
-    let target;
-    let time;
-    let is_acc_up = true;
-
-    if (acc === 0) {
-      console.error("Error: no found acceleration");
-      return;
-    }
-
-    if (init_v === 0) {
-      // 加速度运动，终点为target x，y
-      target = this._AccAlongX ? tos_array[0] : tos_array[1];
-
-      // d = 0.5 * acc * time^2 ==> time = sqrt(d * 2 / acc)
-      time = Math.floor(
-        Math.sqrt((Math.abs(target - current) * 2) / acc) * 1000
-      );
-      is_acc_up = true;
-    } else {
-      // 减速运动
-      time = Math.floor((Math.abs(init_v) * 1000) / acc);
-      target = current + Math.floor(0.0005 * init_v * time);
-      is_acc_up = false;
-    }
-
-    if (time === 0) {
-      // no move，但动画仍然会执行，为了能正常触发回调
-      console.warn("no moved...");
-    }
-
-    // Update target memo
-    let target_x;
-    let target_y;
-    if (this._AccAlongX) {
-      target_x = target;
-      this._Target[0] = target_x;
-      target_y = this._Target[1];
-    } else {
-      target_x = this._Target[0];
-      target_y = target;
-      this._Target[1] = target_y;
-    }
-
-    return new Forge.TranslateAnimation(
-      current_array[0],
-      target_x,
-      current_array[1],
-      target_y,
-      time,
-      is_acc_up ? Forge.Easing.Circular.In : Forge.Easing.Circular.Out
-    );
-  }
-
-  _Distance(from_x, from_y, to_x, to_y) {
-    const dx = to_x - from_x;
-    const dy = to_y - from_y;
-    return Math.sqrt(dx * dx + dy * dy);
-  }
-
-  // Override
-  _WrapCallback(currents, callback) {
-    this._AnimationRef = null; // un-reference
-    if (callback) {
-      callback(currents[0], currents[1]);
-    }
-  }
-}
-
-Forge.DragTranslateControl = DragTranslateControl;