@shijiu/jsview-vue 2.2.373 → 2.3.0

package/utils/JsViewVueTools/JsvTextTools.ts

@@ -1,5 +1,6 @@
 import { Forge } from "@shijiu/jsview/dom/jsv-forge-define.mjs";
 
+// 按照Css的style设置名称对应
 declare interface FontStyleDefine {
   fontFamily: string,
   fontSize: number,
@@ -23,14 +24,8 @@ declare interface FontStyleDefine {
  * @return {int} 文字宽度
  **/
 const getTextWidth = (text: string, style: FontStyleDefine) => {
-  const textParams = {
-    str: text ? text : "",
-    font: style.fontFamily ? style.fontFamily : Forge.TextUtils.sDefaultFont,
-    size: style.fontSize ? style.fontSize : Forge.TextUtils.sDefaultFontSize,
-    italic: style.fontStyle === "italic" ? "italic" : "",
-    bold: style.fontWeight === "bold" ? "bold" : "",
-  };
-  return (window as any).PlatformUtils.GetTextWidth(textParams);
+  let forgeRef = Forge;
+  return Forge.TextUtils.GetTextWidth(text, style);
 };
 
 /*!
@@ -57,27 +52,8 @@ const getOneLineTextDrawWidth = (text: string, style: FontStyleDefine) => {
   if (text && typeof text != "string") {
     text = "" + text; // 规避text为非字符串导致接口调用错误的问题
   }
-  const info: Array<any> = (window as any).PlatformUtils.GetOneLineTextDrawWidth(
-    text ?? "",
-    style.fontFamily ?? Forge.TextUtils.sDefaultFont,
-    style.fontSize ?? Forge.TextUtils.sDefaultFontSize,
-    style.fontStyle === "italic" ? "italic" : "",
-    style.fontWeight === "bold" ? "bold" : "");
-  const result: {
-    totalWidth: number,
-    sliceInfo: Array<any>
-  } = {
-    totalWidth: info[0],
-    sliceInfo: [],
-  }
-  for (let i = 1; i < info.length; i += 3) {
-    result.sliceInfo.push({
-      start: info[i],
-      end: info[i + 1],
-      width: info[2 + 2],
-    })
-  }
-  return result;
+
+  return Forge.TextUtils.GetOneLineTextDrawWidth(text, style);
 }
 
 const isRtl = (str: string) => {
@@ -95,16 +71,28 @@ const isRtl = (str: string) => {
   return false;
 }
 
+declare interface CssFontStyle {
+  fontFamily: string,
+  fontSize: number,
+  fontStyle: string,
+  fontWeight: string
+}
 
-
-declare interface RectSize {
-  width: number,
-  height: number,
+declare interface CssTextLayoutStyle {
+  width?: number,
+  height?: number,
+  textAlign?: String,
+  lineHeight?: number,
+  whiteSpace?: String, // normal, nowrap (换行规则)
+  wordWrap?: String, // break-word, normal, (仅对英文有效, 只在whiteSpace规定为非换行时生效)
+  textOverflow?: String,
 }
 
-declare interface PostionDefine {
+declare interface CursorResult {
+  parseSuccess: boolean,
   x: number,
-  y: number
+  y: number,
+  cachedId: number, // 解析缓存的id，当设置不变的时候使用cache, 0为无效cache
 }
 
 /**
@@ -112,112 +100,57 @@ declare interface PostionDefine {
  *
  * @public
  * @func GetCursorPosition
- * @memberof Forge.TextUtils
- * @params {string} str	文字字符串
- * @params {Forge.RectArea} max_rect
- * @param {PackedFontParams} font_params	文本描述符(来源自 PackFontParams 函数)
- * @param {PackedTextAttrs} text_attr  (来源自 PackTextAttrs 函数)
- * @param {int} line_height
- * @param {int} pos_x   光标的偏移
- * @return {Object}	 光标的所在位置{x:0,y:0}
+ * @return {CursorResult}	 光标的所在位置{x:0,y:0}
  **/
-function GetCursorPosition(
-  str: string,
-  max_rect: RectSize,
-  font_params: PackedFontParams,
-  text_attr: PackedTextAttrs,
-  line_height: number,
-  cursor_offset: number
-): PostionDefine {
-  let api = (window as any).PlatformUtils?.GetCursorPosition.bind((window as any).PlatformUtils);
-
-  if (api) {
-    return api(str, max_rect, font_params, text_attr, line_height, cursor_offset);
-  } else {
-    return { x: 0, y: 0 }
-  }
-}
-
-class PackedFontParams {
-  public font?: string;  // font family name
-  public size?: number;  // font size
-  public bold?: string;  // ""/"bold"
-  public italic?: string; // ""/"italic"
-  public alignment?: string; // left / right /center
-  public textColour?: string;
-}
-
-/**k
-   * 创建文本描述符
-   *
-   * @public
-   * @func PackFontParam
-   * @param {string} font_family 			CSS字体名字，如“黑体 欧文”（支持多字体设置）
-   * @param {int} font_size
-   * @param {boolean} italic			是否为斜体
-   * @param {boolean} bold			是否加粗
-   * @param {string} alignment 		水平对齐方式，支持("left", "middle", "right", "justify")
-   * @param {string} text_color		文字颜色(format "#FFFFFF")
-   **/
-function PackFontParams(
-  font_family: string | null,
-  font_size: number,
-  bold: boolean,
-  italic: boolean,
-  alignment: string,
-  text_color: string | null): PackedFontParams {
-
-  let packed = new PackedFontParams();
-
-  if (!font_size) font_size = Forge.TextUtils.sDefaultFontSize;
-  if (!font_family) font_family = Forge.TextUtils.sDefaultFont;
-
-  packed.size = font_size;
-  packed.font = font_family!;
-  packed.italic = italic ? "italic" : "";
-  packed.bold = bold ? "bold" : "";
-
-  packed.alignment = (alignment && alignment.length > 0) ? alignment : "left";
-  packed.textColour = text_color ? text_color : Forge.TextUtils.sDefaultFontColor;
-
-  return packed;
+function getCursorPosition(
+  cursorOffset: number,
+  text: String,
+  fontStyle: CssFontStyle,
+  textLayoutStyle: CssTextLayoutStyle,
+  buildCache: boolean
+): CursorResult {
+  let result: CursorResult = Forge.TextUtils.GetCursorPosition(
+    0,
+    cursorOffset, text,
+    fontStyle, textLayoutStyle,
+    buildCache);
+  return result;
 }
 
-declare interface PackedTextAttrs {
-  text_overflow: string;
-  word_wrap: string;
+/**
+ * 获取光标的位置
+ *
+ * @public
+ * @func GetCursorPositionCached
+ * @return {CursorResult}	 光标的所在位置{x:0,y:0}
+ **/
+function getCursorPositionCached(
+  cachedId: number,
+  cursorOffset: number
+): CursorResult {
+  let result: CursorResult = Forge.TextUtils.GetCursorPosition(
+    cachedId,
+    cursorOffset,
+    null,
+    null,
+    null,
+    true);
+  return result;
 }
 
-/**
-   * 创建文本区域描述符
-   *
-   * @public
-   * @func PackTextAttrs
-   * @param {String} text_overflow 超过描画边界时的处理方式：<br>
-   *     							"none" 按照文字宽度描画<br>
-   *     							"clip" 超出本分不显示（默认）<br>
-   *     							"ellipsis" 如果超出，则末尾显示“...”
-   *     							其余字符 当文字超出时，用此字符替换“...”的位置
-   * @param {String} word_wrap  设置自然换行规则<br>
-   *     							"none":“不折行”<br>
-   *     							"normal"：折行时，尽量不切断单词（仅支持英文单词）<br>
-   *     							"break_word"：不去识别单词，到达边缘就折行（执行效率高）
-   * @return {PackedTextAttrs} 文本区域描述符
-   **/
-function PackTextAttrs(text_overflow: string, word_wrap: string): PackedTextAttrs {
-  if (!text_overflow) text_overflow = "none";
-  if (!word_wrap) word_wrap = "none";
-
-  return { text_overflow: text_overflow, word_wrap: word_wrap };
+function recycleCursorPositionCache(
+  cached_id: number
+) {
+  Forge.TextUtils.RemoveCursorTextCache(cached_id);
 }
 
 const TextTools = {
   getOneLineTextDrawWidth,
   getTextWidth,
   isRtl,
-  PackFontParams,
-  PackTextAttrs,
-  GetCursorPosition
+  getCursorPosition,
+  getCursorPositionCached,
+  recycleCursorPositionCache
 }
 
 export { getTextWidth, TextTools };

package/utils/JsViewVueTools/JsvTextureStore/CanvasTexture/Path.ts

@@ -1,5 +1,29 @@
 import * as Constants from "./CommandList"
 
+/**
+ * PathStrokeSetting
+ * 描边样式设定
+ * lineWidth: 描边线宽
+ * color: 描边颜色
+ * dash: 描边虚线样式，例如[10, 5]表示10px实线，5px虚线，交替出现
+ * phase: 描边虚线样式起始位置，例如0表示从虚线开始位置开始绘制
+ */
+interface PathStrokeSetting {
+    lineWidth: Number,
+    color: String,
+    dash?: Array<Number>,
+    phase?: Number
+}
+
+function pathStrokeSettingToJson(setting: PathStrokeSetting): Object {
+    return {
+        "lineWidth": setting.lineWidth,
+        "clr": setting.color,
+        "dash": setting.dash,
+        "phase": setting.phase
+    }
+}
+
 class DrawingPath {
     protected drawCommandsRefs: Array<Object> = [];
     protected finishedDraw: boolean = false; // 控制stroke和fill只能调用一次
@@ -16,6 +40,19 @@ class DrawingPath {
      * @param {String} color 颜色设定，例如rgba(red:0~255, green:0~255, blue:0~255, alpla:0~1.0), 或则 #AARRGGBB
      */
     public stroke(lineWidth: Number, color: String) {
+        this.strokeWithSetting({
+            lineWidth: lineWidth,
+            color: color,
+        });
+    }
+
+    /**
+     * strokeWithSetting
+     * 绘制边框，并设置描边样式
+     * 
+     * @param {PathStrokeSetting} setting 描边样式设定
+     */
+    public strokeWithSetting(setting: PathStrokeSetting) {
         if (this.finishedDraw) {
             console.error("Error: path can only draw once");
             return;
@@ -24,8 +61,7 @@ class DrawingPath {
         this.drawCommandsRefs.push({
             "cmd": Constants.CMD_PREPARE_PAINT,
             "type": "stroke",
-            "lineWidth": lineWidth,
-            "clr": color
+            ...pathStrokeSettingToJson(setting)
         });
         this.onFinishDraw(); // 调用继承类的完成处理执行绘制
         this.finishedDraw = true;

package/utils/JsViewVueTools/JsvTextureStore/JsvTextureStore.ts

@@ -38,7 +38,7 @@ let sTextureStoreApi = {
      * @param {String|null} baseName 可选, 访问名的前缀信息
      * @return {CanvasTexture}
      */
-    canvasTexture: (width: Number, height: Number, baseName: String | null): CanvasTexture => {
+    canvasTexture: (width: Number, height: Number, baseName: String | null = null): CanvasTexture => {
         return new CanvasTexture(width, height, baseName);
     },
 

package/utils/JsViewVueTools/TypeCheckAndSet.ts

@@ -0,0 +1,66 @@
+var number_convert_tmp = new Float32Array(1);
+
+/**
+ * 创建基于基地址的全地址模式
+ * 主要用于转化以下的URL类型
+ * 类型1: "url(/相对路径/项目资源/1.png)"
+ * 类型2: "/相对路径/项目资源/1.png"
+ * 类型3: jsview内定类型 "jsvtexturestore:xxxx"
+ * 类型4: 未知的内定类型 "data:xxxx"
+ * 
+ * 同时兼容送入http://完整路径/1.png，转换出来结果等同于没有对此url进行变化
+ * 
+ * @param {string} origin_url 
+ * @return {String}
+ */
+function parseUrl(origin_url: String): String {
+    let url_result = origin_url;
+
+    // url(/xxx/xxx) 格式
+    if (url_result.startsWith('url') === true) {
+        let startIdx = url_result.indexOf('(') + 1;
+        let endIdx = url_result.lastIndexOf(')');
+        url_result = url_result.substring(startIdx, endIdx).trim();
+        if (url_result === "undefined" || url_result === "null" || url_result.length === 0) {
+            // 空内容，不进行其他自动解析和填充
+            return url_result;
+        }
+    }
+
+    // data:xxxx, jsvtexturestore:xxxx 格式
+    if (url_result.startsWith('data:') === true || url_result.startsWith('jsvtexturestore:') === true) {
+        return url_result;
+    }
+
+    // 拆掉 url() 包装后的url相对路径转换
+    let base_url = (window.location as any).jsvGetLocation ?
+        (window.location as any).jsvGetLocation()    // native运行场景，启动链接为 mjs 非 index.html场景
+        : window.location.href;
+    let url_parse = new (window as any).JsvCoreApi.UrlBuilder(url_result, base_url);
+
+    return url_parse.href;
+}
+
+function numberCheckSet(number: number): number {
+    number_convert_tmp[0] = number; // 强制类型转换, 避免JSON化时类型出错，因为 '123' 123 都能通过Nan检测
+    if (!isNaN(number_convert_tmp[0])) {
+        return number_convert_tmp[0];
+    } else {
+        console.warn(`${number} is not type of number, default as 0`);
+        return 0;
+    }
+}
+
+function urlCheckSet(origin_url: String): String {
+    if (origin_url && origin_url.indexOf("http") === 0) {
+        // 包含http和https两种请求
+        return origin_url;
+    } else {
+        return parseUrl(origin_url);
+    }
+}
+
+export {
+    numberCheckSet,
+    urlCheckSet
+};

package/utils/JsViewVueTools/index.js

@@ -9,7 +9,7 @@ export * from "./JsvDynamicCssStyle";
 export * from "./JsvDynamicKeyFrames";
 export * from "./JsvRuntimeBridge";
 export * from "./NinePatchHelper";
-export * from "./TypeCheckAndSet";
+export * from "./TypeCheckAndSet.ts";
 export * from "./JsvRefTaker";
 export * from "./JsvStyleClass";
 export * from "./JsvStyleSheetsDeclarer";
@@ -19,7 +19,6 @@ export * from "./JsvImpactTracer";
 export * from "./JsvTextTools";
 export * from "./JsvPreDownloader"
 export { default as DefaultKeyCodeMap } from "./DefaultKeyMap";
-export * from "./JsvDemoTester"
 export * from "./JsvPerformance"
 export * from "./JsvTextureStore/JsvTextureStore"
 export * from "./JsvTextureDefines"

package/utils/JsViewVueWidget/Jsv3dDiv.vue

@@ -0,0 +1,85 @@
+<script lang="ts">
+/**
+ * @file
+ *
+ * 【模块 export 内容】
+ * JsvPosterDiv：Vue高阶组件，海报描画
+ *  props说明:
+ *      @prop {{x:number, y:number, z:number}}  position 坐标信息，优先级高于style中的left, top
+ *      @prop {Object}                          style    {Object}   包含
+ *                          left/top/width/height
+ *                          border-radius
+ *                          backgroundImage/backgroundColor
+ *                          的style设置
+ *      @prop {boolean}                         enableAA 默认开启的。anti-alias(局部)算法，此算法会引起边缘2~3像素虚化
+ */
+</script>
+
+<script setup lang="ts">
+import { watchEffect, withDefaults, defineProps, shallowRef } from "vue";
+
+interface PositionType {
+  x: number;
+  y: number;
+  z: number;
+}
+
+const rProps = withDefaults(
+  defineProps<{
+    style: Object | null;
+    position: any; // PositionType
+    enableAA: boolean;
+  }>(),
+  {
+    style: null,
+    position: null,
+    enableAA: true,
+  }
+);
+
+let rPositionX = shallowRef(0);
+let rPositionY = shallowRef(0);
+let rPositionZ = shallowRef(0);
+
+let rDivStyle = shallowRef({});
+let rEnableAA = shallowRef("0");
+
+watchEffect(() => {
+  if (rProps.style) {
+    let { left, top, ...others } = rProps.style as any;
+
+    rPositionX.value = left;
+    rPositionY.value = top;
+    rPositionZ.value = 0;
+
+    rDivStyle.value = others;
+  }
+  if (rProps.position) {
+    rPositionX.value = isNaN(rProps.position.x)
+      ? rPositionX.value
+      : rProps.position.x;
+    rPositionY.value = isNaN(rProps.position.y)
+      ? rPositionY.value
+      : rProps.position.y;
+    rPositionZ.value = isNaN(rProps.position.z)
+      ? rPositionZ.value
+      : rProps.position.z;
+  }
+  rEnableAA.value = rProps.enableAA ? "1" : "0";
+});
+</script>
+
+<template>
+  <div
+    :style="{
+      left: rPositionX,
+      top: rPositionY,
+      ...rDivStyle,
+    }"
+    :data-jsv-img-enable-aa="rEnableAA"
+    v-bind="$attrs"
+    :data-jsv-vw-set-z="rPositionZ"
+  >
+    <slot></slot>
+  </div>
+</template>

package/utils/JsViewVueWidget/Jsv3dStage.vue

@@ -0,0 +1,50 @@
+<script lang="ts">
+/**
+ * @file
+ *
+ * 【模块 export 内容】
+ * JsvPosterDiv：Vue高阶组件，海报描画
+ *  props说明:
+ *      @prop {Object}      style    包含
+                                      left/top/width/height
+                                      的style设置
+ *      @prop {number}     perspective 透视精神，默认1000，要求透视效果前后差距越大，此值约小，
+                                        推荐档位
+                                        透视效果非常明显的场景: 300
+                                        透视效果适中的场景: 1000~2000
+ */
+</script>
+
+<script setup lang="ts">
+import { withDefaults, defineProps } from "vue";
+
+const rProps = withDefaults(
+  defineProps<{
+    style: { top: number; left: number; width: number; height: number };
+    perspective: number;
+  }>(),
+  {
+    style: {
+      top: 0,
+      left: 0,
+      width: 0,
+      height: 0,
+    } as any,
+    perspective: 1000,
+  }
+);
+</script>
+
+<template>
+  <div
+    :style="{
+      left: rProps.style.left,
+      top: rProps.style.top,
+      width: rProps.style.width,
+      height: rProps.style.height,
+      perspective: rProps.perspective,
+    }"
+  >
+    <slot></slot>
+  </div>
+</template>

package/utils/JsViewVueWidget/JsvApic/JsvApic/index.js

@@ -7,11 +7,4 @@
  */
 //! 考虑到.vue文件除了export default的component外，还有可能export其他对象,因此使用import * as
 import * as JsvApic from "./JsvApic.vue";
-let _JsvApic;
-if (window.JsView) {
-  _JsvApic = JsvApic.default;
-} else {
-  const BrowserApic = await import("./BrowserApic.vue");
-  _JsvApic = BrowserApic.default;
-}
-export default _JsvApic;
+export default JsvApic.default;

package/utils/JsViewVueWidget/JsvApic/JsvApic2/index.js

@@ -7,11 +7,4 @@
  */
 //! 考虑到.vue文件除了export default的component外，还有可能export其他对象,因此使用import * as
 import * as JsvApic2 from "./JsvApic2.vue";
-let _JsvApic2;
-if (window.JsView) {
-  _JsvApic2 = JsvApic2.default;
-} else {
-  const BrowserApic2 = await import("./BrowserApic2.vue");
-  _JsvApic2 = BrowserApic2.default;
-}
-export default _JsvApic2;
+export default JsvApic2.default

package/utils/JsViewVueWidget/JsvFlexCell/JsvFlexDiv.vue

@@ -27,7 +27,7 @@
  *                  alignSelf: auto|flex-start|flex-end|center|stretch  默认auto, 覆盖container的alignItems设置
  *              特别注意: 这些属性会引起位置对齐问题, 所以会自动去掉: "overflow:hidden"
  *          askSize: boolean  设置会跟进flex的尺寸变化，设置后可通过getWidth/getHeight拿到尺寸，但会降低性能
- *          onSized: Function 比askSize更进一步，可以通过回调知道尺寸变化后的时机，回调参数(width, height)为flex后的尺寸
+ *          onSized: Function(width:number, height:number) 比askSize更进一步，可以通过回调知道尺寸变化后的时机，回调参数(width, height)为flex后的尺寸
  *
  *      expose说明:
  *          getWidth():  当askSize或者onSize生效时，获取元素的宽度