npm - @shijiu/jsview-vue - Versions diffs - 2.3.151-test.0 → 3.0.0 - Mend

@shijiu/jsview-vue 2.3.151-test.0 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (244) hide show

package/utils/JsViewPlugin/JsvLatex/BrowserDomBuilder.js CHANGED Viewed

@@ -1,47 +1,47 @@
-export const getHtmlStr = (libPath, latexStr, fontSize, width, height, color) => {
-  return (
-    `<html>
-      <head>
-        <style>
-          mjx-container[display="true"] {
-            margin: 0 0 !important;
-          }
-          body {
-            margin: 0 !important;
-          }
-        </style>
-        <script type="text/javascript">
-          MathJax = {
-            tex: {
-              inlineMath: [['$', '$'], ['\\\\(', '\\\\)']]
-            },
-            svg: {
-              fontCache: 'global'
-            }
-          };
-          function bodyOnLoad() {
-            let divElement = document.createElement("div");
-            divElement.style.display = "inline-block";
-            divElement.style.fontSize = "${fontSize}px";
-            divElement.style.color = "${color}";
-            divElement.innerHTML = String.raw\`${latexStr}\`;
-            //divElement.style.width = ${width} + "px";
-            document.body.appendChild(divElement);
+// export const getHtmlStr = (libPath, latexStr, fontSize, width, height, color) => {
+//   return (
+//     `<html>
+//       <head>
+//         <style>
+//           mjx-container[display="true"] {
+//             margin: 0 0 !important;
+//           }
+//           body {
+//             margin: 0 !important;
+//           }
+//         </style>
+//         <script type="text/javascript">
+//           MathJax = {
+//             tex: {
+//               inlineMath: [['$', '$'], ['\\\\(', '\\\\)']]
+//             },
+//             svg: {
+//               fontCache: 'global'
+//             }
+//           };
+//           function bodyOnLoad() {
+//             let divElement = document.createElement("div");
+//             divElement.style.display = "inline-block";
+//             divElement.style.fontSize = "${fontSize}px";
+//             divElement.style.color = "${color}";
+//             divElement.innerHTML = String.raw\`${latexStr}\`;
+//             //divElement.style.width = ${width} + "px";
+//             document.body.appendChild(divElement);
-            MathJax.typesetPromise().then(() => {
-              // modify the DOM here
-              let formulaMetrics = MathJax.getMetricsFor(divElement, true);
-              let w = Math.min(${width}, divElement.clientWidth);
-              let scale = w / divElement.clientWidth;
-              divElement.style.fontSize = Math.floor(scale * ${fontSize}) + "px";
-              MathJax.typeset();
-            }).catch((err) => console.error(err.message));
-          }
-        </script>
-        <script type="text/javascript" src="${libPath}"></script>
-      </head>
-      <body onload="bodyOnLoad()">
-      </body>
-    </html>`
-  )
-}
+//             MathJax.typesetPromise().then(() => {
+//               // modify the DOM here
+//               let formulaMetrics = MathJax.getMetricsFor(divElement, true);
+//               let w = Math.min(${width}, divElement.clientWidth);
+//               let scale = w / divElement.clientWidth;
+//               divElement.style.fontSize = Math.floor(scale * ${fontSize}) + "px";
+//               MathJax.typeset();
+//             }).catch((err) => console.error(err.message));
+//           }
+//         </script>
+//         <script type="text/javascript" src="${libPath}"></script>
+//       </head>
+//       <body onload="bodyOnLoad()">
+//       </body>
+//     </html>`
+//   )
+// }

package/utils/JsViewPlugin/JsvLatex/BrowserJsvLatex.vue CHANGED Viewed

@@ -1,8 +1,8 @@
 <script setup>
 // import "./mathjax-tex-svg.js";
-import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
+// import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
 import { ref, shallowRef, onBeforeUnmount } from "vue";
-import { getHtmlStr } from "./BrowserDomBuilder.js";
+// import { getHtmlStr } from "./BrowserDomBuilder.js";
 const props = defineProps({
   latexStr: {
@@ -39,52 +39,52 @@ 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);
+// 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",
-    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());
+// 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",
+//     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));
+// innerViewId.value = Forge.sViewStore.add(new Forge.ViewInfo(layoutView));
 onBeforeUnmount(() => {
-  if (innerViewId.value != -1) {
-    Forge.sViewStore.remove(innerViewId.value);
-    innerViewId.value = -1;
-    console.log("success remove innerview");
-  }
-  resizeObserver.unobserve(layoutView.GetIFrame())
+  // if (innerViewId.value != -1) {
+  //   Forge.sViewStore.remove(innerViewId.value);
+  //   innerViewId.value = -1;
+  //   console.log("success remove innerview");
+  // }
+  // resizeObserver.unobserve(layoutView.GetIFrame())
 });
 </script>
 <template>
-  <div
+  <!-- <div
     :style="{
       left: left,
       top: top,
@@ -93,5 +93,18 @@ onBeforeUnmount(() => {
     }"
   >
     <div :data-jsv-vw-innerview="innerViewId"></div>
+  </div> -->
+  <div :style="{
+    left: left,
+    top: top,
+    width: width,
+    height: 100,
+    fontSize: 15,
+    color: '#ffffff',
+    textAlign: 'center',
+    backgroundColor: '#aa4444',
+    overflow: 'hidden',
+  }">
+    {{"浏览器端不支持latex公式: \n" + latexStr}}
   </div>
 </template>

package/utils/JsViewPlugin/JsvLatex/GetVersion.js ADDED Viewed

@@ -0,0 +1,65 @@
+import { PluginInfo, PluginInfo64 } from './version.mjs'
+function reconfigPluginInfo() {
+    if(typeof window.jJsvRuntimeBridge!=='undefined' && window.jJsvRuntimeBridge && typeof window.jJsvRuntimeBridge.getPluginBaseUrl !== "undefined"){
+        let plugin_base = window.jJsvRuntimeBridge.getPluginBaseUrl();
+        let folder_name = "com.qcode.jsvlatex";
+        if(plugin_base){
+            let plugin_base_array = plugin_base.split("|split|");
+            let suffix = "";
+            let plugin_base_url = plugin_base_array[0];
+            if(plugin_base_array.length > 1){
+                suffix = plugin_base_array[1];
+            }
+            if(window.JsvCoreApi.ProcessType === "a64"){
+                PluginInfo64.downloadUrl = (plugin_base_url[plugin_base_url.length-1]==="/"?plugin_base_url:(plugin_base_url+"/"))+folder_name+"/JsvLatex-"+PluginInfo64.versionCodeMax+".dat"+suffix+"?md5="+PluginInfo64.md5;
+            }else{
+                PluginInfo.downloadUrl = (plugin_base_url[plugin_base_url.length-1]==="/"?plugin_base_url:(plugin_base_url+"/"))+folder_name+"/JsvLatex-"+PluginInfo.versionCodeMax+".dat"+suffix+"?md5="+PluginInfo.md5;
+            }
+        }
+    }
+    if(typeof window.jJsvRuntimeBridge!=='undefined' && window.jJsvRuntimeBridge && typeof window.jJsvRuntimeBridge.getBackupPluginBaseUrl !== "undefined"){
+        let folder_name = "com.qcode.jsvlatex";
+        let back_plugin_base = window.jJsvRuntimeBridge.getBackupPluginBaseUrl();
+        console.log("BackupPluginBaseUrl is "+back_plugin_base);
+        if(back_plugin_base != null && back_plugin_base != ""){
+            let back_plugin_base_array = JSON.parse(back_plugin_base);
+            if(back_plugin_base_array.length > 0){
+                if(window.JsvCoreApi.ProcessType === "a64"){
+                    PluginInfo64.backupDownloadUrl = [];
+                }else{
+                    PluginInfo.backupDownloadUrl = [];
+                }
+                for(let i=0; i<back_plugin_base_array.length; i++){
+                    let temp_array = back_plugin_base_array[i].split("|split|");
+                    let temp_suffix = "";
+                    let plugin_base_url = temp_array[0];
+                    if(temp_array.length > 1){
+                        temp_suffix = temp_array[1];
+                    }
+                    if(window.JsvCoreApi.ProcessType === "a64"){
+                        PluginInfo64.backupDownloadUrl.push((plugin_base_url[plugin_base_url.length-1]==="/"?plugin_base_url:(plugin_base_url+"/"))+folder_name+"/JsvLatex-"+PluginInfo64.versionCodeMax+".dat"+temp_suffix+"?md5="+PluginInfo64.md5);
+                    }else{
+                        PluginInfo.backupDownloadUrl.push((plugin_base_url[plugin_base_url.length-1]==="/"?plugin_base_url:(plugin_base_url+"/"))+folder_name+"/JsvLatex-"+PluginInfo.versionCodeMax+".dat"+temp_suffix+"?md5="+PluginInfo.md5);
+                    }
+                }
+            }
+        }
+    }
+}
+reconfigPluginInfo();
+function getPluginInfo(){
+    if(window.JsvCoreApi.ProcessType === "a64"){
+        return PluginInfo64;
+    }
+    return PluginInfo;
+}
+export {
+    getPluginInfo
+}

package/utils/JsViewPlugin/JsvLatex/JsvLatex.vue CHANGED Viewed

@@ -20,16 +20,18 @@
  *       height:           {number}      height
  *       lineSpace:        {number}      行距
  *       color:            {string}      文字颜色
+ *       instantLoad:      {boolean}    是否立即加载
  *   [注意事项]
  *     1. 盒子端的字符串是直接作为数学公式解析的, 所以需要将\n替换为\\, 需要前端自己处理, 这里提供了一个辅助方法processLatexStr来处理简单的情况
 -->
 <script setup>
-import { onBeforeUnmount, ref } from "vue";
+import { onBeforeUnmount, ref, watch } from "vue";
 import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
 import ForgeHandles from "../../JsViewVueTools/ForgeHandles";
 import JsvLatexBridgeProxy from "./JsvLatexBridgeProxy";
 import { cssColor2Android } from "./Color";
 import { GetPluginLoader } from "./PluginLoader";
+import { JsvFlexDiv } from "../../JsViewVueWidget";
 let sPluginLoader = GetPluginLoader();
@@ -52,7 +54,7 @@ const props = defineProps({
   },
   lineSpace: {
     type: Number,
-    default: 10,
+    default: 2,
   },
   color: {
     type: String,
@@ -66,12 +68,18 @@ const props = defineProps({
     type: Number,
     default: 0,
   },
+  instantLoad: {
+    type: Boolean,
+    default: false,
+  },
 });
 const show = ref(false);
 let innerViewId = -1;
 let clientWidth = ref(props.width);
 let clientHeight = ref(props.height);
+let drawingLatex = props.latexStr;
+let pluginTexture = null;
 const getClientSize = () => {
   return {
@@ -94,25 +102,24 @@ const showView = () => {
    * }
    */
   const textureManager = ForgeHandles.TextureManager;
-  const pluginTexture = textureManager.GetPluginTexture(
-    "latexPlugin",
+  pluginTexture = textureManager.GetPluginTexture(
+    "JsvLatex",
     JSON.stringify({
       libRootPath: JsvLatexBridgeProxy.GetLibPath(),
-      latexStr: props.latexStr,
+      latexStr: drawingLatex,
       width: props.width,
       textSize: props.fontSize,
       lineSpace: props.lineSpace,
       color: cssColor2Android(props.color),
-    })
+    }),
+    props.instantLoad
   );
   pluginTexture.RegisterLoadImageCallback(null, (data) => {
-    console.log("testtest texture load callback", data);
     tryUpdateClientSize(data.width, data.height);
   });
   const tryUpdateClientSize = (textureW, textureH) => {
-    console.log("testtet latex texture size", textureW, textureH);
     if (textureW <= 0 || textureH <= 0) {
       console.warn("JsvLatex get empth texture", textureW, textureH);
       return;
@@ -129,6 +136,7 @@ const showView = () => {
 };
 const loadInfo = sPluginLoader.getLoadInfo();
 if (loadInfo.done) {
   if (loadInfo.succeed) {
     showView();
@@ -148,20 +156,54 @@ onBeforeUnmount(() => {
   }
 });
+function updateLatexStr(latexStr) {
+  drawingLatex = latexStr;
+  if (show.value) {
+    if (pluginTexture) {
+      pluginTexture.UpdateValue(
+        JSON.stringify({
+          libRootPath: JsvLatexBridgeProxy.GetLibPath(),
+          latexStr: drawingLatex,
+          width: props.width,
+          textSize: props.fontSize,
+          lineSpace: props.lineSpace,
+          color: cssColor2Android(props.color),
+        })
+      );
+    } else {
+      console.warn("JsvLatex pluginTexture is null");
+    }
+  }
+}
+watch(
+  () => props.latexStr,
+  (newVal) => {
+    updateLatexStr(newVal);
+  }
+);
 defineExpose({
   getClientSize,
+  updateLatexStr,
 });
+const onSized = (width, height) => {
+  clientWidth.value = width;
+  clientHeight.value = height;
+};
 </script>
 <template>
-  <div
+  <jsv-flex-div
     :style="{
       left: left,
       top: top,
-      width: clientWidth,
-      height: clientHeight,
+      // width: clientWidth,
+      // height: clientHeight,
     }"
+    :onSized="onSized"
   >
     <div v-if="show" :data-jsv-vw-innerview="innerViewId"></div>
-  </div>
+  </jsv-flex-div>
 </template>

package/utils/JsViewPlugin/JsvLatex/JsvLatexBridgeProxy.js CHANGED Viewed

@@ -13,4 +13,14 @@ export default class {
       return null;
     }
   }
+  static LoadDexWithOuter() {
+    if (typeof window.jsvLatexBridge != "undefined"
+      && typeof window.jsvLatexBridge.LoadDexWithOuter != "undefined") {
+      return window.jsvLatexBridge.LoadDexWithOuter();
+    } else {
+      console.error("widnow.jsvLatexBridge doesn't exist.")
+      return false;
+    }
+  }
 }

package/utils/JsViewPlugin/JsvLatex/JsvLatexProxy.vue CHANGED Viewed

@@ -1,7 +1,9 @@
 <script setup>
-import { defineAsyncComponent } from "vue";
+import { defineAsyncComponent, ref } from "vue";
 import JsvLatex from "./JsvLatex.vue";
+const innerRef = ref(null);
 const AsyncComp = defineAsyncComponent(() => {
   return new Promise((resolve, reject) => {
     if (!window.JsView) {
@@ -13,8 +15,19 @@ const AsyncComp = defineAsyncComponent(() => {
     }
   });
 });
+// 转发 JsvLatex.vue 的 expose 方法，供父组件通过 ref 调用
+defineExpose({
+  getClientSize() {
+    return innerRef.value?.getClientSize?.();
+  },
+  updateLatexStr(latexStr) {
+    console.log("myt updateLatexStr")
+    innerRef.value?.updateLatexStr?.(latexStr);
+  },
+});
 </script>
 <template>
-  <AsyncComp v-bind="$attrs" />
+  <AsyncComp ref="innerRef" v-bind="$attrs" />
 </template>

package/utils/JsViewPlugin/JsvLatex/PluginLoader.js CHANGED Viewed

@@ -3,8 +3,14 @@
  * @Date: 2023-02-27 20:04:28
  * @Description: file content
  */
-import PluginInfo from './version';
-import jsvLatexBridge from "./JsvLatexBridgeProxy"
+//现在没有64的版本，现在先只import进来触发download url的更新
+import { getPluginInfo } from "./GetVersion";
+import { PluginInfo } from "./version.mjs";
+import jsvLatexBridge from "./JsvLatexBridgeProxy";
+//调用一下，没有实际意义，只是为了避免编译时被shaking掉
+getPluginInfo();
 class PluginLoader {
   constructor() {
@@ -13,7 +19,7 @@ class PluginLoader {
     this.pluginInfo = this.getPluginInfo();
     this.loadDone = false;
     this.loadSucceed = false;
-    /**
+    /**
      * 0：未加载；
      * 1：开始加载；
      * 2：加载旧插件；
@@ -27,10 +33,22 @@ class PluginLoader {
   getPluginInfo() {
     let info = PluginInfo;
     /** 获取下载链接 */
-    if (typeof window.jJsvRuntimeBridge !== 'undefined' && window.jJsvRuntimeBridge && typeof window.jJsvRuntimeBridge.getPluginBaseUrl !== "undefined") {
+    if (
+      typeof window.jJsvRuntimeBridge !== "undefined" &&
+      window.jJsvRuntimeBridge &&
+      typeof window.jJsvRuntimeBridge.getPluginBaseUrl !== "undefined"
+    ) {
       let plugin_base_url = window.jJsvRuntimeBridge.getPluginBaseUrl();
       if (plugin_base_url) {
-        info.downloadUrl = (plugin_base_url[plugin_base_url.length - 1] === "/" ? plugin_base_url : (plugin_base_url + "/")) + info.packageName + "/JsvLatex-" + info.versionCodeMax + ".dat?md5=" + info.md5;
+        info.downloadUrl =
+          (plugin_base_url[plugin_base_url.length - 1] === "/"
+            ? plugin_base_url
+            : plugin_base_url + "/") +
+          info.packageName +
+          "/JsvLatex-" +
+          info.versionCodeMax +
+          ".dat?md5=" +
+          info.md5;
       }
     }
     return info;
@@ -46,7 +64,7 @@ class PluginLoader {
     return {
       done: this.loadDone,
       succeed: this.loadSucceed,
-    }
+    };
   }
   /**
@@ -58,13 +76,16 @@ class PluginLoader {
    * 3:正在加载新插件，此时插件需要经历下载、解压等过程，用时较长，可以考虑给用户相关提示。
    * 4:插件加载完成。
    * 5:已加载不同版本的插件，此版本无法加载。
-   *
+   *
    * 备注：不管插件加载处于什么状态，都可以正常使用播放器组件，播放器对象在插件未加载完成的情况下，会把相关状态保存，等完成加载后再自动下发。
    */
   loadPlugin(listener) {
     console.log("globalLoadJsvLatexPlugin");
     let plugin_status = 0;
-    if (typeof window.jPluginManagerBridge === 'undefined' || !window.jPluginManagerBridge) {
+    if (
+      typeof window.jPluginManagerBridge === "undefined" ||
+      !window.jPluginManagerBridge
+    ) {
       plugin_status = 1;
     } else if (this.status === 2) {
       plugin_status = 2;
@@ -78,7 +99,9 @@ class PluginLoader {
     if (plugin_status !== 0) {
       if (typeof listener !== "undefined" && listener) {
-        setTimeout(() => { listener(plugin_status) }, 0);
+        setTimeout(() => {
+          listener(plugin_status);
+        }, 0);
       }
       return;
     }
@@ -112,12 +135,10 @@ class PluginLoader {
     }
   }
   onLoadDone(result) {
     console.log("JsvLatexPluginLoadResult: " + result);
     this.loadDone = true;
-    let ret_obj = JSON.parse(result)
+    let ret_obj = JSON.parse(result);
     let plugin_status = 1;
     if (ret_obj && (ret_obj.status === 4 || ret_obj.status === 1)) {
       this.status = 4;
@@ -131,33 +152,46 @@ class PluginLoader {
     if (this.status === 5) {
       this.loadSucceed = false;
-      console.log("*************************JsvLatex plugin load failed, error code is " + ret_obj.status + "*************************");
+      console.log(
+        "*************************JsvLatex plugin load failed, error code is " +
+          ret_obj.status +
+          "*************************"
+      );
     } else {
       this.loadSucceed = true;
     }
     //往forge设置latex库的path
     if (window.JsView) {
-      const libPath = jsvLatexBridge.GetLibPath();
-      console.log("JsvLatex libPath", libPath);
-      if (libPath) {
-        window.JsView.loadRenderPlugin?.(
-          "latexPlugin",
-          "com.qcode.latexlib.Main",
-          libPath,
-        );
-      } else {
-        console.error("JsvLatexPlugin error: get libPath failed.")
-      }
+      //先调用outer
+      jsvLatexBridge.LoadDexWithOuter().then(() => {
+        console.log("JsvLatex outter succeed");
+        for (let listener of this.onDoneListener) {
+          listener(plugin_status);
+        }
+      }, (error) => {
+        console.log("JsvLatex outter failed", error)
+        //触发Inner plugin的加载
+        const libPath = jsvLatexBridge.GetLibPath();
+        if (libPath) {
+          window.JsView.loadRenderPlugin?.(
+            "JsvLatex",
+            "com.qcode.latexlib.Main",
+            libPath
+          );
+        } else {
+          console.error("JsvLatexPlugin error: get libPath failed.");
+        }
+        for (let listener of this.onDoneListener) {
+          listener(plugin_status);
+        }
+      });
     }
     for (let i = 0; i < this.pluginLoadListener.length; i++) {
       this.pluginLoadListener[i](plugin_status);
     }
-    for (let listener of this.onDoneListener) {
-      listener(plugin_status);
-    }
   }
   registerGlobalListener() {
@@ -176,6 +210,4 @@ function GetPluginLoader() {
   return sPluginLoader;
 }
-export {
-  GetPluginLoader
-}
+export { GetPluginLoader };