@shijiu/jsview-vue 2.2.373 → 2.3.0

package/utils/JsViewVueWidget/JsvFlexCell/JsvFullScrAdjust.vue

@@ -0,0 +1,151 @@
+<!--
+ * @file
+ *
+ * 【模块 export 内容】
+ *  JsvFullscreenAdjust: 将给定的宽高区域(一般为主屏幕),放到屏幕中心,保持横纵比
+ *      props说明:
+ *          childWidth: number 主屏幕的宽
+ *          childHeight: number 主屏幕的高
+ *          onSized: Function(width:number, height:number) 
+                  可以通过回调知道尺寸变化后的时机，回调参数(width, height)为flex后的尺寸
+ *          background: {string} (选填)背景图案 可选值: 绝对路径url|url(相对路径url)|#FFFFFF|rbga(255,0,0,1.0)
+ *
+ *      expose说明:
+ *          getWidth():  onSize生效时，获取元素的宽度
+ *          getHeight():  onSize生效时，获取元素的高度
+ *                   
+-->
+<script setup>
+import { shallowRef, watchEffect } from "vue";
+import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
+import JsvScreenFlex from "./JsvScreenFlex.vue";
+
+const rProps = defineProps({
+  childWidth: {
+    type: Number,
+    default: 0,
+  },
+  childHeight: {
+    type: Number,
+    default: 0,
+  },
+  askSize: {
+    type: Boolean,
+    default: false,
+  },
+  onSized: {
+    type: Function,
+    default: null,
+  },
+  background: {
+    type: String,
+    default: null,
+  },
+});
+
+// 此div的宽度是固定的全屏尺寸，在jsview体系下，全屏的宽度就是designMapWidth
+const cDivMaxWidth = Forge.sRenderBridge.GetScreenInfo().designedWidth;
+
+let rScreenFlexRef = shallowRef(null);
+let rChildWidth = shallowRef(0);
+let rChildHeight = shallowRef(0);
+let rScaleSet = shallowRef(null);
+
+let vGetScreenSize = false;
+let vScreenWidth = 0;
+let vScreenHeight = 0;
+
+watchEffect(() => {
+  if (vGetScreenSize) {
+    // 响应child的width, height的变化设置
+    _ResizeContainer(
+      vScreenWidth,
+      vScreenHeight,
+      rProps.childWidth,
+      rProps.childHeight
+    );
+  }
+});
+
+let cOnSizeFunc = (width, height) => {
+  if (rProps.onSized) {
+    rProps.onSized(width, height);
+  }
+
+  vScreenWidth = width;
+  vScreenHeight = height;
+  _ResizeContainer(
+    vScreenWidth,
+    vScreenHeight,
+    rProps.childWidth,
+    rProps.childHeight
+  );
+};
+
+function _ResizeContainer(screenWidth, screenHeight, childWidth, childHeight) {
+  if (childWidth == 0 || childHeight == 0) {
+    console.error(`Error: size is 0 set w=${childWidth} h=${childHeight}`);
+    return;
+  }
+
+  if (childWidth > cDivMaxWidth) {
+    console.error(
+      `Error: over max-width max-with=${cDivMaxWidth} set width=${childWidth}`
+    );
+    return;
+  }
+
+  rChildWidth.value = childWidth;
+  rChildHeight.value = childHeight;
+
+  let scale = 1.0;
+  let requireHeight = Math.floor((childWidth * screenHeight) / screenWidth);
+  if (requireHeight < childHeight) {
+    // height展示不下，以height为主，保留3位小数
+    scale = Math.floor((requireHeight / childHeight) * 1000) / 1000;
+  } else {
+    // height能展示下，以width为主, scale不变
+  }
+  rScaleSet.value = `scale3d(${scale}, ${scale}, 1)`;
+}
+
+defineExpose({
+  // TODO: PC模拟环境中目前没有浏览器的类似ResizeObserver接口
+  //       可以监听到left/ top变化，所以先关闭Left / Top的获取
+  // getLeft: () => {
+  //   return SizeX.value;
+  // },
+  // getTop: () => {
+  //   return SizeY.value;
+  // },
+
+  getWidth: () => {
+    return rScreenFlexRef.value?.getWidth();
+  },
+  getHeight: () => {
+    return rScreenFlexRef.value?.getHeight();
+  },
+});
+</script>
+
+<template>
+  <jsv-screen-flex
+    :style="{
+      flexDirection: 'row',
+      justifyContent: 'center',
+      alignItems: 'center',
+    }"
+    :onSized="cOnSizeFunc"
+    :background="rProps.background"
+  >
+    <div
+      :style="{
+        width: rProps.childWidth,
+        height: rProps.childHeight,
+        transform: rScaleSet,
+      }"
+    >
+      <slot />
+    </div>
+  </jsv-screen-flex>
+</template>

package/utils/JsViewVueWidget/JsvFlexCell/JsvScreenFlex.vue

@@ -16,8 +16,8 @@
  *                                 副轴方向多行内容总体的对齐方式，例如主轴为行时，项目在每行中竖直方向的对齐
  *              特别注意: 这些属性会引起位置对齐问题, 所以会自动去掉: "overflow:hidden"
  *          askSize: boolean  设置会跟进flex的尺寸变化，设置后可通过getWidth/getHeight拿到尺寸，但会降低性能
- *          onSized: Function 比askSize更进一步，可以通过回调知道尺寸变化后的时机，回调参数(width, height)为flex后的尺寸
- *          background: {string} (选填)背景图案 可选值: 绝对路径url|url(相对路径url)|#FFFFFF|rbga(255,0,0,1.0)
+ *          onSized: Function(width:number, height:number) 
+                比askSize更进一步，可以通过回调知道尺寸变化后的时机，回调参数(width, height)为flex后的尺寸*          background: {string} (选填)背景图案 可选值: 绝对路径url|url(相对路径url)|#FFFFFF|rbga(255,0,0,1.0)
  *
  *      expose说明:
  *          getWidth():  当askSize或者onSize生效时，获取元素的宽度
@@ -28,6 +28,7 @@
 import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
 import { shallowRef, watchEffect, onUnmounted } from "vue";
 import JsvFlexDiv from "./JsvFlexDiv.vue";
+import { urlCheckSet } from "../../JsViewVueTools/TypeCheckAndSet.ts";
 import { ForgeTextureApis } from "../../JsViewVueTools/TextureManagerTools.ts";
 import ForgeHandles from "../../JsViewVueTools/ForgeHandles";
 
@@ -52,7 +53,7 @@ const cDivWidth = Forge.sRenderBridge.GetScreenInfo().designedWidth;
 
 let rConfig = shallowRef({});
 
-let vTextreStringCache = null; // 用于判断是否需要texture更换的flag
+let vTextureStringCache = null; // 用于判断是否需要texture更换的flag
 let vStretchViewRef = null;
 
 // 创建AutoStretchView来自动识别JsView的视窗大小
@@ -74,29 +75,23 @@ watchEffect(() => {
   rConfig.value.askSize = rProps.askSize;
   rConfig.value.onSized = rProps.onSized;
 
-  if (rProps.background != vTextreStringCache) {
+  if (rProps.background != vTextureStringCache) {
     // 构建背景Texture
-    vTextreStringCache = rProps.background;
+    vTextureStringCache = rProps.background;
 
     let texture_setting = null;
 
-    if (vTextreStringCache != null) {
+    if (vTextureStringCache != null) {
       const texture_manager = ForgeHandles.TextureManager;
       if (
-        vTextreStringCache.trim().startsWith("#") ||
-        vTextreStringCache.trim().startsWith("rgba")
+        vTextureStringCache.trim().startsWith("#") ||
+        vTextureStringCache.trim().startsWith("rgba")
       ) {
         texture_setting = new Forge.TextureSetting(
-          ForgeTextureApis.GetColorTexture(texture_manager, vTextreStringCache)
+          ForgeTextureApis.GetColorTexture(texture_manager, vTextureStringCache)
         );
       } else {
-        const base_url = vTextreStringCache;
-        let image_url = base_url;
-        if (base_url && base_url.indexOf("http") === 0) {
-          image_url = base_url;
-        } else if (window.JsView?.Dom.UrlRef) {
-          image_url = new window.JsView.Dom.UrlRef(base_url).href;
-        }
+        let image_url = urlCheckSet(vTextureStringCache);
         texture_setting = new Forge.ExternalTextureSetting(
           ForgeTextureApis.GetImage(texture_manager, image_url)
         );

package/utils/JsViewVueWidget/JsvFlexCell/index.js

@@ -1,3 +1,4 @@
 
 export { default as JsvFlexDiv } from "./JsvFlexDiv.vue";
 export { default as JsvScreenFlex } from "./JsvScreenFlex.vue";
+export { default as JsvFullScrAdjust } from "./JsvFullScrAdjust.vue";

package/utils/JsViewVueWidget/JsvFragShaderView/JsvFragShaderView.vue

@@ -44,6 +44,7 @@
 <script setup>
 import { onMounted, onUnmounted, shallowRef } from "vue";
 import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
+import { urlCheckSet } from "../../JsViewVueTools/TypeCheckAndSet.ts";
 import ForgeHandles from "../../JsViewVueTools/ForgeHandles";
 import {
   FeatureNames,
@@ -87,6 +88,8 @@ const rProps = defineProps({
 // 激活引擎中的功能支持
 JsvUseFeature("JsvFragShaderView", FeatureNames.CustomFragShader);
 
+console.log("LudlDebug using JsvFragShaderView...");
+
 let rAnimRunning = shallowRef(false); // 动画是否在执行，画面只在动画进行时进行显示
 let vPreloadHandler = null;
 let vPreloadDone = false;
@@ -115,7 +118,7 @@ if (rProps.textures) {
     if (typeof item.resource == "string") {
       let image_url = item.resource;
       if (item.resource && item.resource.trim().indexOf("url(") === 0) {
-        image_url = new window.JsView.Dom.UrlRef(image_url).href;
+        image_url = urlCheckSet(image_url);
       }
       const texture = texture_manager.GetImage2(
         image_url,

package/utils/JsViewVueWidget/JsvFragShaderView/index.js

@@ -6,13 +6,6 @@
  * @Description: file content
  */
 //! 考虑到.vue文件除了export default的component外，还有可能export其他对象,因此使用import * as
-import * as JsvFragShaderView from "./JsvFragShaderView.vue";
 
-let _JsvFragShaderView;
-if (window.JsView) {
-  _JsvFragShaderView = JsvFragShaderView.default;
-} else {
-  const BrowserJsvFragShaderView = await import("./BrowserJsvFragShaderView.vue");
-  _JsvFragShaderView = BrowserJsvFragShaderView.default;
-}
-export default _JsvFragShaderView;
+export { default } from "./JsvFragShaderView.vue"
+

package/utils/JsViewVueWidget/JsvFreeMoveActor/SetState.ts

@@ -24,6 +24,14 @@ class StatePackBuilder {
     return CmdPackBuilder.InitStateCmdPack(StateCmdBuilder.RemoveByGroup(group));
   }
 
+  /*
+   * removeConditionByGroup
+   * 清理指定名字的condition
+   */
+  removeConditionByName(specName: String) {
+    return CmdPackBuilder.InitStateCmdPack(StateCmdBuilder.RemoveByName(specName));
+  }
+
   /**
    * activeCondition
    * 重新激活对应gid或者specName的condition

package/utils/JsViewVueWidget/JsvInput/EditViewOperator.ts

@@ -24,7 +24,7 @@ export class EditViewOperator {
     private _EditViewHandle: any = null;
     private _CursorHandle: CursorOperater | null = null;
     private _EditViewId: number = -1;
-    private _CursorResumeTimeoutToken: number = -1;
+    private _CursorResumeTimeoutToken: any = -1;
 
     private _InputType: number = 0;
     private _FontStyle: FontStyleDefine | null = null
@@ -41,6 +41,8 @@ export class EditViewOperator {
 
     private _EditVisibleArea?: EditVisibleArea;
 
+    private _TextChangedCount: number = 0; // 记录文字变化的次数，可用于确认文字是否变化，当style变化或者文字内容变化时+1
+
     // Callback
     private _OnTextChangedCallback: TextChangedFunc;
     private _OnCursorMoved: CursorMovedFunc;
@@ -68,7 +70,9 @@ export class EditViewOperator {
                     this._EditViewHandle.showIme(
                         this._InputType,
                         this._CurrentFullText,
-                        this._CurrentCursorOffset
+                        this._CurrentCursorOffset,
+                        Math.ceil(-this._TextLeft),
+                        0
                     );
                 }
             }
@@ -88,7 +92,9 @@ export class EditViewOperator {
         this._EditViewHandle.showIme(
             this._InputType,
             this._CurrentFullText,
-            this._CurrentCursorOffset
+            this._CurrentCursorOffset,
+            Math.ceil(-this._TextLeft),
+            0
         );
     }
 
@@ -96,8 +102,12 @@ export class EditViewOperator {
         box_width: number, box_height: number,
         cursor_width: number,
         font_style: FontStyleDefine,
-        input_type: number, max_input_lenth: number,
-        text_read_only: boolean) {
+        input_type: number,
+        max_input_lenth: number,
+        text_read_only: boolean,
+        editorTextColor: string,
+        editorBackground: string
+    ) {
 
         // format fontStyle
         this._FontStyle = {
@@ -118,13 +128,23 @@ export class EditViewOperator {
             font_style,
             font_style.textAlign === "right"
         );
+
+        this._EditViewHandle.setEditorStyle(
+            this._FontStyle.fontSize,
+            this._FontStyle.textAlign,
+            editorTextColor,
+            editorBackground
+        )
     }
 
     generateView(): number {
         // 构建EditControlView来处理输入
         this._EditViewHandle = new Forge.EditControlView();
-        this._EditViewHandle.OnTextChanged = this._OnTextChanged.bind(this);
-        this._EditViewHandle.OnStatusChanged = this._OnStatusChanged.bind(this);
+        this._EditViewHandle.addImeEventListener({
+            OnTextChanged: this._OnTextChanged.bind(this),
+            OnStatusChanged: this._OnStatusChanged.bind(this),
+            OnEditAction: null
+        });
 
         this._EditViewId = Forge.sViewStore.add(
             new Forge.ViewInfo(this._EditViewHandle)
@@ -163,7 +183,8 @@ export class EditViewOperator {
                     this._CurrentDspWith,
                     this._CurrentDspWith,
                     new_cursor_index,
-                    true
+                    true,
+                    this._TextChangedCount
                 );
                 this._UpdateDispay(new_text_left, new_cursor_index)
             }
@@ -181,6 +202,8 @@ export class EditViewOperator {
     }
 
     onUnmounted() {
+        this._EditViewHandle?.releaseResource();
+        this._EditVisibleArea!.releaseResource();
         if (this._EditViewId != -1) {
             Forge.sViewStore.remove(this._EditViewId);
             this._EditViewId = -1;
@@ -208,13 +231,20 @@ export class EditViewOperator {
     }
 
     // EditControlView当输入变化时的回调
-    private _OnTextChanged(text: string, cursor_index: number) {
+    private _OnTextChanged(text: string, cursor_index: number, scroll_left?: number) {
+        let p = {
+            text,
+            cursor_index,
+            scroll_left
+        }
         if (typeof text != 'string' || text.length >= this._MaxInputLenth) {
             // 非法输入或者输入限制，超输入限制，文字内容不改变
             if (this._EditViewHandle && this._IsFocus) {
                 this._EditViewHandle.updateCursorOffset(
                     this._CurrentDspText,
-                    this._CurrentCursorOffset
+                    this._CurrentCursorOffset,
+                    Math.ceil(-this._TextLeft),
+                    0
                 );
             }
             return;
@@ -231,7 +261,9 @@ export class EditViewOperator {
                 // 输入内容非法，不更换内容
                 this._EditViewHandle!.updateCursorOffset(
                     this._CurrentDspText,
-                    this._CurrentCursorOffset
+                    this._CurrentCursorOffset,
+                    Math.ceil(-this._TextLeft),
+                    0
                 );
                 return;
             }
@@ -251,6 +283,7 @@ export class EditViewOperator {
                 this._CurrentDspText = text;
             }
             this._CurrentDspWith = getTextDisplayWidth(this._CurrentDspText, this._FontStyle!);
+            this._TextChangedCount++; // 记录文字信息发生了变化
         } else {
             // 仅由EditView发出来的光标移动事件
         }
@@ -262,7 +295,8 @@ export class EditViewOperator {
             origin_dsp_width,
             this._CurrentDspWith,
             cursor_index,
-            false
+            false,
+            this._TextChangedCount
         );
 
         this._UpdateDispay(new_text_left, cursor_index);
@@ -272,8 +306,7 @@ export class EditViewOperator {
         }
     }
 
-    private _OnStatusChanged() {
-        // console.log("OnStatusChanged status", status);
+    private _OnStatusChanged(visible: boolean) {
     }
 
     public addText(text: string) {
@@ -317,4 +350,4 @@ export class EditViewOperator {
         // 全部内容替换
         this._OnTextChanged(text, text?.length);
     }
-}
+}

package/utils/JsViewVueWidget/JsvInput/EditVisibleArea.ts

@@ -1,4 +1,4 @@
-import { calculateCursorPosition } from "./SystemTextTools";
+import { calculateCursorPosition, calculateCursorPositionCached, recycleCursorMeasureCache } from "./SystemTextTools";
 import { FontStyleDefine, MAX_WIDTH } from "./SharedDefine";
 
 export class EditVisibleArea {
@@ -13,6 +13,10 @@ export class EditVisibleArea {
     private _TextVisibleEndPos: number = 0; // 显示区域的末尾是整段文字第几个像素上
     private _VisibleAreaCurPos: number = 0; // 光标在整段文字的第几个像素上
 
+    // 管理Cursor measure的cache
+    private _CursorMeasureCachedId: number = 0;
+    private _CursorMeasuredToken: number = 0;
+
     constructor(area_width: number, area_height: number,
         cursor_width: number,
         font_style: FontStyleDefine,
@@ -33,10 +37,17 @@ export class EditVisibleArea {
         return this._VisibleAreaCurPos;
     }
 
+    releaseResource() {
+        if (this._CursorMeasureCachedId > 0) {
+            recycleCursorMeasureCache(this._CursorMeasureCachedId);
+            this._CursorMeasureCachedId = 0;
+        }
+    }
+
     calculateSlide(
         pre_str: string, target_str: string,
         pre_str_dsp_width: number, target_str_dsp_width: number, // 使用外部缓存，减少本地计算
-        cur_index: number, moved: boolean): number {
+        cur_index: number, moved: boolean, text_info_token: number): number {
         if (target_str.length === 0) {
             // 当字符内容清空的场景
             this._VisibleAreaCurPos = 0;
@@ -45,14 +56,36 @@ export class EditVisibleArea {
         }
 
         let new_left = this._TextLeft;
-        const current_cursor_position = calculateCursorPosition(
-            target_str,
-            cur_index,
-            target_str_dsp_width,
-            this._AreaHeight,
-            this._AreaHeight,
-            this._FontStyle
-        );
+        let current_cursor_position = 0;
+        if (cur_index == target_str.length) {
+            // calculateCursorPosition 无法计算最后一个字的位置，所以在此支持返回文字的边缘
+            current_cursor_position = target_str_dsp_width;
+        } else {
+            // 使用 calculateCursorPosition 获得光标显示位置
+            if (this._CursorMeasuredToken == text_info_token && this._CursorMeasureCachedId > 0) {
+                current_cursor_position = calculateCursorPositionCached(
+                    cur_index,
+                    this._CursorMeasureCachedId
+                )
+            } else {
+                if (this._CursorMeasureCachedId > 0) {
+                    recycleCursorMeasureCache(this._CursorMeasureCachedId);
+                    this._CursorMeasureCachedId = 0;
+                }
+
+                let measure_result = calculateCursorPosition(
+                    target_str,
+                    cur_index,
+                    target_str_dsp_width,
+                    this._AreaHeight,
+                    this._AreaHeight,
+                    this._FontStyle
+                );
+                current_cursor_position = measure_result.x;
+                this._CursorMeasureCachedId = measure_result.cachedId; // 注意cached资源需要手动释放
+                this._CursorMeasuredToken = text_info_token; // 记录此token的数据已经有measure cache
+            }
+        }
         let option_mode = "op_vis_normal"; // 可视区域内移动
         // 计算模式
         if (pre_str.length > target_str.length) {

package/utils/JsViewVueWidget/JsvInput/JsvInput.vue

@@ -10,6 +10,7 @@
  *         type Input.type.TEXT         若为number类型，则输入时，非number无法输入
  *         placeholder {string}         文字颜色值为灰色,默认值为"请输入文字"
  *         placeholderColor {string}    默认文字颜色,默认值为灰色
+ *         editorBackground {string}    当ime出现时，输入框呈现的强调颜色,注意:不能为半透明色
  *         maxLength {number}           最大字符长度, 默认100，支持单行最大宽度为1920*2，
  *                                      fontsize为30，则字数大约为1920*2/30 = 100个左右
  *         readonly {bool}              属性规定输入字段是只读的, 默认false
@@ -89,6 +90,10 @@ const rProps = defineProps({
     type: String,
     default: "#CDCCD6",
   },
+  editorBackground: {
+    type: String,
+    default: "#5d5c76",
+  },
   maxLength: {
     type: Number,
     default: 100,
@@ -155,12 +160,6 @@ function _OnTextChanged(input_final_text, dsp_text) {
 }
 
 function _OnCursorPositionChanged(text_left, cursor_left) {
-  console.log(
-    "_OnCursorPositionChanged text_left=" +
-      text_left +
-      " cursor_left=" +
-      cursor_left
-  );
   rTextPosLeft.value = text_left;
   rCursorLeft.value = cursor_left + text_left;
 }
@@ -172,6 +171,7 @@ let cEditViewOperator = new EditViewOperator(
   rProps.onTextOverflow
 );
 let vEditViewInnerId = cEditViewOperator.generateView(); // 建立Forge.EditView
+
 cEditViewOperator.updateInputConfig(
   rProps.width,
   rProps.height,
@@ -179,7 +179,9 @@ cEditViewOperator.updateInputConfig(
   rProps.fontStyle,
   rProps.type,
   rProps.maxLength,
-  rProps.readonly
+  rProps.readonly,
+  rProps.fontStyle.color,
+  rProps.editorBackground
 );
 
 function _FocusBlockOnFocus() {
@@ -252,7 +254,7 @@ function _FocusBlockOnKeyDown(keyEvent) {
 }
 
 function _FocusBlockOnKeyUp(ev) {
-  if (keyEvent.keyCode == 10000) {
+  if (ev.keyCode == 10000) {
     return !!rProps.onBackKey?.(true);
   }
 
@@ -354,6 +356,17 @@ defineExpose({
       :color="rCursorColorInner"
       :width="rProps.cursorWidth"
     />
-    <div :data-jsv-vw-innerview="vEditViewInnerId" />
+    <div
+      :style="{
+        width: rProps.width,
+        height: rProps.height,
+      }"
+      :data-jsv-vw-innerview="vEditViewInnerId"
+    />
   </jsv-focus-block>
 </template>
+<style scoped>
+.testColor {
+  background-color: #5d5c76;
+}
+</style>

package/utils/JsViewVueWidget/JsvInput/SystemTextTools.ts

@@ -1,5 +1,6 @@
-import { TextTools, getTextWidth } from "../../JsViewVueTools/JsvTextTools"
-import { MAX_WIDTH } from "./SharedDefine";
+import {
+    TextTools
+} from "../../JsViewVueTools/JsvTextTools"
 
 declare interface FontStyleDefine {
     fontSize: number,
@@ -9,6 +10,11 @@ declare interface FontStyleDefine {
     fontWeight: string
 }
 
+export interface CursorResult {
+    x: number,
+    cachedId: number
+}
+
 // 获取单行输入框光标所在位置
 export function calculateCursorPosition(
     display_text: string,
@@ -16,32 +22,40 @@ export function calculateCursorPosition(
     rect_width: number,
     rect_height: number,
     line_height: number,
-    font_style: FontStyleDefine) {
-
-    const target_str = display_text;
-    const font_params = _getPackedFontParams(font_style);
-    const max_width = MAX_WIDTH; // 最大宽度为1920*2， 根据texture的最大宽度设定
-    const text_attr = TextTools.PackTextAttrs("none", "none");
-    const cur_pos = TextTools.GetCursorPosition(
-        target_str,
-        { width: rect_width, height: rect_height },
-        font_params,
-        text_attr,
-        line_height,
-        cursor_offset
-    );
-    return cur_pos.x;
+    font_style: FontStyleDefine): CursorResult {
+
+    let css_font_style = {
+        fontFamily: font_style.fontFamily,
+        fontSize: font_style.fontSize,
+        fontStyle: font_style.fontStyle,
+        fontWeight: font_style.fontWeight
+    };
+
+    let css_textlayout_style = {
+        width: rect_width,
+        height: rect_height,
+        lineHeight: line_height,
+    };
+
+    let cursor_info = TextTools.getCursorPosition(cursor_offset, display_text, css_font_style, css_textlayout_style, true);
+
+    return {
+        x: cursor_info.x,
+        cachedId: cursor_info.cachedId
+    }
 }
 
-export function getTextDisplayWidth(text: string, font_style: FontStyleDefine) {
-    return getTextWidth(text, font_style);
+export function calculateCursorPositionCached(
+    cursor_offset: number,
+    cached_id: number): number {
+    let cursor_info = TextTools.getCursorPositionCached(cached_id, cursor_offset);
+    return cursor_info.x;
+}
+
+export function recycleCursorMeasureCache(cached_id: any) {
+    TextTools.recycleCursorPositionCache(cached_id);
 }
 
-function _getPackedFontParams(font_style: FontStyleDefine): any {
-    const size = font_style.fontSize ? font_style.fontSize : 12;
-    const font = font_style.fontFamily;
-    const alignment = font_style.textAlign;
-    const italic = font_style.fontStyle === "italic";
-    const bold = font_style.fontWeight === "bold";
-    return TextTools.PackFontParams(font!, size, bold, italic, alignment!, null)
-}
+export function getTextDisplayWidth(text: string, font_style: FontStyleDefine) {
+    return TextTools.getTextWidth(text, font_style);
+}