@shijiu/jsview-vue 2.3.0 → 2.3.728-alpha.0

package/utils/JsViewPlugin/JsvLatex/JsvLatex.vue

@@ -20,19 +20,23 @@
  *       height:           {number}      height
  *       lineSpace:        {number}      行距
  *       color:            {string}      文字颜色
+ *       instantLoad:      {boolean}    是否立即加载
  *   [注意事项]
  *     1. 盒子端的字符串是直接作为数学公式解析的, 所以需要将\n替换为\\, 需要前端自己处理, 这里提供了一个辅助方法processLatexStr来处理简单的情况
+ *     2. _这样的特殊字符如果需要显示, 需要用\text{_}包裹
 -->
 <script setup>
-import { onBeforeUnmount, ref } from "vue";
+import { onBeforeUnmount, ref, watch, defineEmits } 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();
 
+const emit = defineEmits(["update"]);
 const props = defineProps({
   latexStr: {
     type: String,
@@ -52,7 +56,7 @@ const props = defineProps({
   },
   lineSpace: {
     type: Number,
-    default: 10,
+    default: 2,
   },
   color: {
     type: String,
@@ -66,12 +70,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 {
@@ -79,6 +89,8 @@ const getClientSize = () => {
     height: clientHeight.value,
   };
 };
+let loadCbkToken = -1;
+let updateCbkToken = -1;
 const showView = () => {
   show.value = true;
   /**
@@ -94,25 +106,29 @@ 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);
+  loadCbkToken = pluginTexture.RegisterLoadImageCallback(null, (data) => {
+    tryUpdateClientSize(data.width, data.height);
+  });
+
+  updateCbkToken = pluginTexture.RegisterUpdateImageCallback(null, (data) => {
     tryUpdateClientSize(data.width, data.height);
+    emit("update", 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 +145,7 @@ const showView = () => {
 };
 
 const loadInfo = sPluginLoader.getLoadInfo();
+
 if (loadInfo.done) {
   if (loadInfo.succeed) {
     showView();
@@ -146,22 +163,59 @@ onBeforeUnmount(() => {
     Forge.sViewStore.remove(innerViewId);
     innerViewId = -1;
   }
+
+  if (pluginTexture) {
+    pluginTexture.UnregisterLoadImageCallback(loadCbkToken);
+    loadCbkToken = -1;
+    pluginTexture.UnregisterUpdateImageCallback(updateCbkToken);
+    updateCbkToken = -1;
+  }
 });
 
+let updateToken = -1;
+function updateLatexStr(latexStr) {
+  drawingLatex = latexStr;
+  if (show.value) {
+    if (pluginTexture) {
+      updateToken = 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
-    :style="{
-      left: left,
-      top: top,
-      width: clientWidth,
-      height: clientHeight,
-    }"
+  <jsv-flex-div
+    :style="{ left: left, top: top }"
+    :onSized="onSized"
   >
     <div v-if="show" :data-jsv-vw-innerview="innerViewId"></div>
-  </div>
+  </jsv-flex-div>
 </template>

package/utils/JsViewPlugin/JsvLatex/JsvLatexBridgeProxy.js

@@ -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

@@ -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,18 @@ const AsyncComp = defineAsyncComponent(() => {
     }
   });
 });
+
+// 转发 JsvLatex.vue 的 expose 方法，供父组件通过 ref 调用
+defineExpose({
+  getClientSize() {
+    return innerRef.value?.getClientSize?.();
+  },
+  updateLatexStr(latexStr) {
+    innerRef.value?.updateLatexStr?.(latexStr);
+  },
+});
 </script>
 
 <template>
-  <AsyncComp v-bind="$attrs" />
+  <AsyncComp ref="innerRef" v-bind="$attrs" />
 </template>

package/utils/JsViewPlugin/JsvLatex/PluginLoader.js

@@ -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 };

package/utils/JsViewPlugin/JsvLatex/version.mjs

@@ -3,22 +3,35 @@
  * @Date: 2023-02-22 18:22:26
  * @Description: file content
  */
-let PluginInfo = {
-  // downloadUrl: "http://192.168.2.1:8097/pluginpackapp.zip", //插件下载地址
+export const PluginInfo = {
+  // downloadUrl: "http://192.168.0.31:8089/JsvLatex.zip", //插件下载地址
   packageName: "com.qcode.jsvlatex",
+  backupDownloadUrl:[],
   name: "数学公式插件",
-  version: "1.0.4",  //插件需要的版本号
-  versionCodeMin: 4,
-  versionCodeMax: 4,
+  version: "1.0.19", //插件需要的版本号
+  versionCodeMin: 19,
+  versionCodeMax: 19,
   bridgeName: "jsvLatexBridge", //插件bridge注册到jsview的名称
-  className: "com.qcode.jsvlatex.JsvLatex",  //插件初始化类名称
-  initMethod: "createInstance",   //插件初始化方法
-  listener: "top.JsvLatexPluginLoadResult",  //插件加载结果回调
+  className: "com.qcode.jsvlatex.JsvLatex", //插件初始化类名称
+  initMethod: "createInstance", //插件初始化方法
+  listener: "top.JsvLatexPluginLoadResult", //插件加载结果回调
   listener2: "top.JsvLatexPluginStatus",
   // debug:true,
-  // md5: "f8a12f63d450df862abc6dbf273e258d"
+  md5: "7e95cf0cb5b97f1978d60cf00ca6770b",
+};
+export const PluginInfo64 = {
+  // downloadUrl: "http://192.168.0.128:8089/JsvLatex.zip", //插件下载地址
+  packageName: "com.qcode.jsvlatex",
+  backupDownloadUrl:[],
+  name: "数学公式插件",
+  version: "1.0.19", //插件需要的版本号
+  versionCodeMin: 19,
+  versionCodeMax: 19,
+  bridgeName: "jsvLatexBridge", //插件bridge注册到jsview的名称
+  className: "com.qcode.jsvlatex.JsvLatex", //插件初始化类名称
+  initMethod: "createInstance", //插件初始化方法
+  listener: "top.JsvLatexPluginLoadResult", //插件加载结果回调
+  listener2: "top.JsvLatexPluginStatus",
+  // debug:true,
+  md5: "7e95cf0cb5b97f1978d60cf00ca6770b",
 };
-
-// 不要用export default，update-env脚本不能解析
-// 导出字段要含有 pluginVersionInfo 信息，作为npm时版本参考
-export default PluginInfo;

package/utils/JsViewPlugin/JsvPlayer/GetVersion.js

@@ -3,8 +3,9 @@ import PluginInfo from './version.mjs'
 function reconfigPluginInfo() {
     if(typeof window.jJsvRuntimeBridge!=='undefined' && window.jJsvRuntimeBridge && typeof window.jJsvRuntimeBridge.getPluginBaseUrl !== "undefined"){
         let plugin_base_url = window.jJsvRuntimeBridge.getPluginBaseUrl();
+        let folder_name = "com.qcode.jsvplayer";
         if(plugin_base_url){
-            PluginInfo.downloadUrl = (plugin_base_url[plugin_base_url.length-1]==="/"?plugin_base_url:(plugin_base_url+"/"))+PluginInfo.packageName+"/JsvPlayer-"+PluginInfo.versionCodeMax+".dat?md5="+PluginInfo.md5;
+            PluginInfo.downloadUrl = (plugin_base_url[plugin_base_url.length-1]==="/"?plugin_base_url:(plugin_base_url+"/"))+folder_name+"/JsvPlayer-"+PluginInfo.versionCodeMax+".dat?md5="+PluginInfo.md5;
         }
     }
 }