@shijiu/jsview-vue 2.2.201 → 2.2.426-test.0

package/utils/JsViewPlugin/JsvLatex/BrowserJsvLatex.vue

@@ -1,7 +1,7 @@
 <script setup>
 // import "./mathjax-tex-svg.js";
 import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
-import { shallowRef, onBeforeUnmount } from "vue";
+import { ref, shallowRef, onBeforeUnmount } from "vue";
 import { getHtmlStr } from "./BrowserDomBuilder.js";
 
 const props = defineProps({
@@ -39,20 +39,39 @@ const props = defineProps({
   },
 });
 
+function precessString(original) {
+  return (
+    "\\[\\begin{array}{l}" +
+    original.replaceAll(/\\[\(\)\[\]]/g, "") +
+    "\\end{array}\\]"
+  );
+}
 let innerViewId = shallowRef(-1);
+const clientWidth = ref(props.width);
+const clientHeight = ref(props.height);
 
 let layoutView = new Forge.IFrameView();
 layoutView.SetIframeSize(props.width, props.height);
 layoutView.SetInnerHtml(
   getHtmlStr(
     "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewTestResource/DocResource/mathjax-tex-svg.txt",
-    props.latexStr,
+    precessString(props.latexStr),
     props.fontSize,
     props.width,
     props.height,
     props.color
   )
 );
+const resizeObserver = new ResizeObserver(entries => {
+  if (entries.length > 0) {
+    const e = entries[0];
+    if (clientHeight.value == 0) {
+      clientHeight.value = e.contentRect.height
+    }
+  }
+});
+resizeObserver.observe(layoutView.GetIFrame());
+
 innerViewId.value = Forge.sViewStore.add(new Forge.ViewInfo(layoutView));
 
 onBeforeUnmount(() => {
@@ -61,16 +80,18 @@ onBeforeUnmount(() => {
     innerViewId.value = -1;
     console.log("success remove innerview");
   }
+  resizeObserver.unobserve(layoutView.GetIFrame())
 });
 </script>
 <template>
   <div
-    :data-jsv-vw-innerview="innerViewId"
     :style="{
       left: left,
       top: top,
-      width: width,
-      height: height,
+      width: clientWidth,
+      height: clientHeight,
     }"
-  ></div>
+  >
+    <div :data-jsv-vw-innerview="innerViewId"></div>
+  </div>
 </template>

package/utils/JsViewPlugin/JsvLatex/JsvLatex.vue

@@ -5,21 +5,24 @@
  -->
 
 <!-- 
-[界面概述]
-  思维导图控件
- 
-[控件介绍]
-  JsvLatex:
-    props:
-      latexStr:         {string}      latex公式
-      fontSize:         {function}    字号
-      left:             {number}      left
-      top:              {number}      top
-      width:            {number}      width
-      height:           {number}      height
-      lineSpace:        {number}      行距
-      color:            {string}      文字颜色
- -->
+ * @file 
+ *
+ * [界面概述]
+ *   思维导图控件
+ * [控件介绍]
+ *   JsvLatex:
+ *     props:
+ *       latexStr:         {string}      latex公式
+ *       fontSize:         {function}    字号
+ *       left:             {number}      left
+ *       top:              {number}      top
+ *       width:            {number}      width
+ *       height:           {number}      height
+ *       lineSpace:        {number}      行距
+ *       color:            {string}      文字颜色
+ *   [注意事项]
+ *     1. 盒子端的字符串是直接作为数学公式解析的, 所以需要将\n替换为\\, 需要前端自己处理, 这里提供了一个辅助方法processLatexStr来处理简单的情况
+-->
 <script setup>
 import { onBeforeUnmount, ref } from "vue";
 import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
@@ -67,13 +70,13 @@ const props = defineProps({
 
 const show = ref(false);
 let innerViewId = -1;
-let clientWidth = props.width;
-let clientHeight = props.height;
+let clientWidth = ref(props.width);
+let clientHeight = ref(props.height);
 
 const getClientSize = () => {
   return {
-    width: clientWidth,
-    height: clientHeight,
+    width: clientWidth.value,
+    height: clientHeight.value,
   };
 };
 const showView = () => {
@@ -104,15 +107,18 @@ const showView = () => {
   );
 
   pluginTexture.RegisterLoadImageCallback(null, (data) => {
+    console.log("testtest texture load callback", data);
     tryUpdateClientSize(data.width, data.height);
   });
 
   const tryUpdateClientSize = (textureW, textureH) => {
-    if (props.width != 0 && props.height == 0) {
-      clientHeight = Math.round(props.width * (textureH / textureW));
-    } else if (props.height != 0 && props.width == 0) {
-      clientWidth = Math.round(props.height * (textureW / textureH));
+    console.log("testtet latex texture size", textureW, textureH);
+    if (textureW <= 0 || textureH <= 0) {
+      console.warn("JsvLatex get empth texture", textureW, textureH);
+      return;
     }
+    clientWidth.value = Math.min(textureW, props.width);
+    clientHeight.value = Math.round(clientWidth.value * (textureH / textureW));
   };
 
   let layoutView = new Forge.LayoutView(
@@ -149,13 +155,13 @@ defineExpose({
 
 <template>
   <div
-    v-if="show"
-    :data-jsv-vw-innerview="innerViewId"
     :style="{
       left: left,
       top: top,
-      width: width,
-      height: height,
+      width: clientWidth,
+      height: clientHeight,
     }"
-  ></div>
+  >
+    <div v-if="show" :data-jsv-vw-innerview="innerViewId"></div>
+  </div>
 </template>

package/utils/JsViewPlugin/JsvLatex/index.js

@@ -17,7 +17,29 @@ const globalLoadJsvLatexPlugin = (listener) => {
   }
 }
 
+function processLatexStr(origin) {
+  //只将数学环境外的换行替换为\\
+  if (typeof origin !== "string") {
+    return null;
+  }
+  const index1 = origin.indexOf("\\begin");
+  const index2 = origin.indexOf("}", origin.lastIndexOf("\\end"));
+  if (index1 >= 0) {
+    const head = origin.substring(0, index1);
+    const middle = origin.substring(index1, index2 + 1);
+    const tail = origin.substring(index2 + 1);
+    return (
+      head.replaceAll(/(?<!\\\\)[\n]+/g, "\\\\") +
+      middle +
+      tail.replaceAll(/(?<!\\\\)[\n]+/g, "\\\\")
+    );
+  } else {
+    return origin.replaceAll(/(?<!\\\\)[\n]+/g, "\\\\");
+  }
+}
+
 export {
   JsvLatex,
+  processLatexStr,
   globalLoadJsvLatexPlugin,
 }

package/utils/JsViewVueTools/FeatureActive.ts

@@ -0,0 +1,84 @@
+import { Forge } from "@shijiu/jsview/dom/jsv-forge-define.mjs";
+
+// 记录已激活内容，减少激活的重复调用，提高执行性能
+let sActivedMap = new Map();
+let sDisabledMap = new Map();
+
+// Component名称列表, 注意大小写
+namespace FeatureNames {
+    // 'TouchReceiver': 触屏支持
+    export const TouchReceiver: String = "TouchReceiver";
+
+    // 'FreeMoveDiv': 游戏类平滑动画组件
+    export const FreeMoveDiv: String = "FreeMoveDiv";
+
+    // 'CustomFragShader': 内容3D化效果组件
+    export const CustomFragShader: String = "CustomFragShader";
+
+    // 'Capture2Texture': div拷屏
+    export const Capture2Texture: String = "Capture2Texture";
+}
+
+// 激活内核中的模块
+// 特别注意:
+// 此接口调用时，请联系我们确认所在渠道此功能被搭载并已经获取了授权后再调用
+// 
+// 场景1: 强制激活未授权的组件
+// 如果激活未授权的组件，屏幕会有未授权的组件列表水印出现
+// 并且如果所在渠道的内核不带此功能的话，会引起崩溃一系列问题
+//
+// 场景2: 未激活组件，而实际使用
+// 组件使用时会自动调用 JsvUseFeature 来确认是否激活
+// 若未激活则，会有console.error提示，并且内核中此功能也不会工作(此处也规避了内核可能未搭载组件而崩溃的问题)
+function JsvActiveFeature(comp_name: String) {
+    if (sActivedMap.has(comp_name)) {
+        // 已经激活过
+        return;
+    }
+
+    if (sDisabledMap.has(comp_name)) {
+        console.error(`Error: feature ${comp_name} is disabled`);
+        return;
+    }
+
+    sActivedMap.set(comp_name, comp_name); // 记录已激活内容
+
+    console.log(`feature ${comp_name} enable`);
+    Forge.sRenderBridge.ActiveComponent(comp_name);
+}
+
+// 模块内部调用，确保要使用功能时，功能已经授权并激活
+function JsvUseFeature(from: String, comp_name: String) {
+    if (sActivedMap.has(comp_name)) {
+        return;
+    }
+
+    console.error(`Error: ${comp_name}(from ${from}) is not activated, need JsvActiveFeature(JsvFeatureNames.${comp_name}) in boot`);
+}
+
+// 备用接口: 防止未授权组件被错误激活引起的崩溃和水印显示
+function JsvShutdownFeatures(comp_name_list: Array<String>) {
+    if (sActivedMap.size > 0) {
+        console.log(`Error: JsvShutdownFeatures should call before any JsvActiveFeature()`);
+        return;
+    }
+
+    let merged_comps: Array<String> = [];
+    for (let i = 0; i < comp_name_list.length; i++) {
+        let comp_name: String = comp_name_list[i];
+
+        // 记录变更信息，一旦记入disable列表，则不可被active，且原active会失效
+        sDisabledMap.set(comp_name, comp_name);
+        merged_comps.push(comp_name_list[i]);
+        console.log(`feature ${comp_name} disable`);
+    }
+    Forge.sRenderBridge.ShutdownComponents(JSON.stringify(merged_comps));
+}
+
+export {
+    FeatureNames,
+    FeatureNames as JsvFeatureNames,
+    JsvActiveFeature,
+    JsvUseFeature,
+    JsvShutdownFeatures
+}

package/utils/JsViewVueTools/ForgeHandles.ts

@@ -1,14 +1,18 @@
-let handles = {
+let handles: {
+    TextureManager: any,
+    RootView: any,
+    RootActivity: any
+} = {
     TextureManager: null,
     RootView: null,
     RootActivity: null
 }
 
 const jsvCode = (window as any).JsvCode;
-jsvCode.ForgeHandles.listenToReady(()=>{
+jsvCode.ForgeHandles.listenToReady(() => {
     handles.TextureManager = jsvCode.ForgeHandles.TextureManager;
     handles.RootView = jsvCode.ForgeHandles.RootView;
-    handles.RootActivity = jsvCode.ForgeHandles.RootActivity;    
+    handles.RootActivity = jsvCode.ForgeHandles.RootActivity;
 })
 
 export default handles;

package/utils/JsViewVueTools/JsvDynamicCssStyle.js

@@ -3,6 +3,8 @@
  */
 
 /*!
+ * @file
+ *
  * 【模块 export 内容】
  * CssStyleSheet：面向对象类，CSS rule的操作器，用于添加和删除CssStyle，服务于JsvStyleClass
  *      接口：

package/utils/JsViewVueTools/JsvDynamicKeyFrames.ts

@@ -3,6 +3,8 @@
  */
 
 /*!
+ * @file
+ *
  * 【模块 export 内容】
  * getKeyFramesGroup: 函数，获取KeyFrame操作类 KeyFrameStyleSheet
  * KeyFrameStyleSheet：面向对象类，KeyFrames CSS rule的操作类，用于添加和删除KeyFrame

package/utils/JsViewVueTools/JsvHashHistory.js

@@ -1,12 +1,9 @@
-import { createMemoryHistory, createWebHashHistory }  from "vue-router";
+import { createMemoryHistory, /*createWebHashHistory*/ } from "vue-router";
+// import { urlCheckSet } from "./TypeCheckAndSet.ts";
 
 class JsvHashHistory {
   constructor(base) {
-    if(window.jsvIsBrowserDebug) {
-      this.#history = createWebHashHistory(base)
-    } else {
-      this.#history = this.#createMockHashHistory(base);
-    }
+    this.#history = this.#createMockHashHistory(base);
   }
 
   get location() {
@@ -32,7 +29,7 @@ class JsvHashHistory {
   replace(to, data) {
     this.#history.replace(to, data);
     this.#updateLocation(this.#history.location);
-  } 
+  }
 
   push(to, data) {
     this.#history.push(to, data);
@@ -53,16 +50,16 @@ class JsvHashHistory {
     // base = location.host ? base || location.pathname + location.search : '';
     base = (location.host || location.protocol === 'file:') ? base || location.pathname + location.search : '';
     if (!base.includes('#'))
-        base += '#';
+      base += '#';
     if (!base.endsWith('#/') && !base.endsWith('#')) {
-        console.warn(`A hash base must end with a "#":\n"${base}" should be "${base.replace(/#.*$/, '#')}".`);
+      console.warn(`A hash base must end with a "#":\n"${base}" should be "${base.replace(/#.*$/, '#')}".`);
     }
 
     this.baseURL = window.location.origin + base;
 
     const history = createMemoryHistory(base)
     const initHash = this.#getInitHash();
-    if(initHash) {
+    if (initHash) {
       // 已设置hash，替换到hash页面
       const replaceTo = {
         path: initHash.substring(1), // 去除#
@@ -70,9 +67,9 @@ class JsvHashHistory {
       }
 
       const queryIdx = initHash.indexOf('?');
-      if(queryIdx >= 0) {
+      if (queryIdx >= 0) {
         replaceTo.path = replaceTo.path.substring(0, queryIdx - 1),
-        replaceTo.query = this.#convertUrlParams(initHash.substring(queryIdx));
+          replaceTo.query = this.#convertUrlParams(initHash.substring(queryIdx));
       }
       history.replace(replaceTo);
     } else {
@@ -87,35 +84,35 @@ class JsvHashHistory {
     let initHash;
 
     // 抓取history hash在启动过程中的变更, 用于warmUp/warmLoad不一致的情况。
-    if (window.JsView.takeNativeHashChange) {
-      initHash = window.JsView.takeNativeHashChange({
-        //this.push(new_hash.substring(1)); // 去除#
-      });
-      if (initHash != null) {
-        // 将新hash融入window.location中
-        console.log("History: found init hash change to:" + initHash);
-      } else {
-        initHash = window.location.hash;
-      }
+    initHash = window.JsvCoreApi.takeNativeHashChange((new_hash) => {
+      // TODO:暂不实现
+      //this.push(new_hash.substring(1)); // 去除#
+    });
+    if (initHash != null) {
+      // 将新hash融入window.location中
+      console.log("History: found init hash change to:" + initHash);
+    } else {
+      initHash = window.location.hash;
     }
 
     return initHash;
   }
 
   #updateLocation(location) {
-    if(!window.jsvIsBrowserDebug) {
-      const url = new window.JsView.Dom.UrlRef(
-        location ? this.baseURL + location : this.baseURL,
-        true
-      )
+    const url = new URL(location ? this.baseURL + location : this.baseURL);
+    if (window.location.applyUrlInfo) {
+      // 对于window.location为独立定义的场景
       window.location.applyUrlInfo(url);
+    } else {
+      // 更新系统的location显示和history状态
+      window.history.pushState(null, '', url.href);
     }
   }
 
   #convertUrlParams(value) {
     // 去除问号
     const questionMarkIdx = value.indexOf('?');
-    if(questionMarkIdx >= 0) {
+    if (questionMarkIdx >= 0) {
       value = value.substr(questionMarkIdx + 1);
     }
 
@@ -124,7 +121,7 @@ class JsvHashHistory {
     var result = {};
 
     // 遍历参数并解析键值对
-    for(const param of paramArray) {
+    for (const param of paramArray) {
       const [key, value] = param.split('=');
 
       // 如果键已存在，则将值转换为数组

package/utils/JsViewVueTools/JsvImpactTracer.js

@@ -10,6 +10,8 @@
  */
 
 /*!
+ * @file
+ *
  * 【模块 export 内容】
  * createImpactTracer: 函数，创建碰撞跟踪对象
  * createImpactCallback: 函数，创建碰撞发生后的回调函数

package/utils/JsViewVueTools/JsvPreDownloader.ts

@@ -1,5 +1,6 @@
 /*! 
- *  JsvPreDownloader 通用下载器，可以在不同的环境中进行资源下载操作。
+ * @file JsvPreDownloader 通用下载器，可以在不同的环境中进行资源下载操作。
+ *
  *       JsvPreDownloader.download:实例方法，根据传入参数来下载资源。支持单个url或者url列表，返回Promise对象。
  *        参数:
  *        url {string | Array}:  (必填)图片url

package/utils/JsViewVueTools/JsvRefTaker.js

@@ -1,7 +1,6 @@
 
 /*!
- *******************
- * JsvRefTaker模块
+ * @file JsvRefTaker模块
  * 
  * 用于解决 script setup 写法，不容易通过 this.$ref.xxxx 拿到子模块的句柄，
  * 但使用ref(null)的方式构筑的深度reactive对象又会严重影响element的内部处理性能的问题