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

@shijiu/jsview-vue 2.3.151-test.0 → 2.3.728-alpha.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 (432) 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/Color.ts CHANGED Viewed

@@ -1,43 +1,108 @@
+function packArgb(alpha: number, red: number, green: number, blue: number): number {
+  return (
+    ((alpha & 0xff) << 24) |
+    ((red & 0xff) << 16) |
+    ((green & 0xff) << 8) |
+    (blue & 0xff)
+  );
+}
+function clampChannel(value: number): number {
+  return Math.max(0, Math.min(255, Math.round(value)));
+}
+/** CSS rgba 的 alpha：0~1 按比例换算，>1 按 0~255 处理 */
+function parseAlpha(value: string): number {
+  const alpha = parseFloat(value.trim());
+  if (Number.isNaN(alpha)) {
+    return 0xff;
+  }
+  if (alpha <= 1) {
+    return clampChannel(alpha * 255);
+  }
+  return clampChannel(alpha);
+}
+function parseRgbFunction(cssColor: string): number | null {
+  const rgbaMatch = cssColor.match(
+    /^rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*([\d.]+)\s*\)$/i
+  );
+  if (rgbaMatch) {
+    return packArgb(
+      parseAlpha(rgbaMatch[4]),
+      clampChannel(Number(rgbaMatch[1])),
+      clampChannel(Number(rgbaMatch[2])),
+      clampChannel(Number(rgbaMatch[3]))
+    );
+  }
+  const rgbMatch = cssColor.match(/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);
+  if (rgbMatch) {
+    return packArgb(
+      0xff,
+      clampChannel(Number(rgbMatch[1])),
+      clampChannel(Number(rgbMatch[2])),
+      clampChannel(Number(rgbMatch[3]))
+    );
+  }
+  return null;
+}
+function parseHexColor(cssColor: string): number | null {
+  if (cssColor[0] !== "#") {
+    return null;
+  }
+  const numberStr = cssColor.slice(1);
+  if (numberStr.length === 3) {
+    try {
+      const colorNumber = parseInt(numberStr, 16);
+      const red = ((colorNumber >> 8) & 0xf) * 17;
+      const green = ((colorNumber >> 4) & 0xf) * 17;
+      const blue = (colorNumber & 0xf) * 17;
+      return packArgb(0xff, red, green, blue);
+    } catch (e) {}
+  } else if (numberStr.length === 6) {
+    try {
+      const colorNumber = parseInt(numberStr, 16);
+      const red = (colorNumber >> 16) & 0xff;
+      const green = (colorNumber >> 8) & 0xff;
+      const blue = colorNumber & 0xff;
+      return packArgb(0xff, red, green, blue);
+    } catch (e) {}
+  } else if (numberStr.length === 8) {
+    try {
+      const colorNumber = parseInt(numberStr, 16);
+      const red = (colorNumber >> 24) & 0xff;
+      const green = (colorNumber >> 16) & 0xff;
+      const blue = (colorNumber >> 8) & 0xff;
+      const alpha = colorNumber & 0xff;
+      return packArgb(alpha, red, green, blue);
+    } catch (e) {}
+  }
+  return null;
+}
 export const cssColor2Android = (cssColor: string): number => {
-  let validColor = false;
-  if (typeof cssColor == "string" && cssColor[0] == "#") {
-    const numberStr: string = cssColor.slice(1);
-    if (numberStr.length == 3) {
-      //rgb
-      try {
-        const colorNumber = parseInt(numberStr, 16);
-        validColor = true;
-        let red = ((colorNumber >> 8) & 0xF) * 17;
-        let green = ((colorNumber >> 4) & 0xF) * 17;
-        let blue = (colorNumber & 0xF) * 17;
-        return (0xff << 24) | (red << 16) | (green << 8) | blue;
-      } catch(e) {}
-    } else if (numberStr.length == 6) {
-      //rrggbb
-      try {
-        const colorNumber = parseInt(numberStr, 16);
-        validColor = true;
-        let red = (colorNumber >> 16) & 0xFF;
-        let green = (colorNumber >> 8) & 0xFF;
-        let blue = colorNumber & 0xFF;
-        return (0xff << 24) | (red << 16) | (green << 8) | blue;
-      } catch(e) {}
-    } else if (numberStr.length == 8) {
-      //rrggbbaa
-      try {
-        const colorNumber = parseInt(numberStr, 16);
-        validColor = true;
-        let red = (colorNumber >> 24) & 0xFF;
-        let green = (colorNumber >> 16) & 0xFF;
-        let blue = (colorNumber >> 8) & 0xFF;
-        let alpha = colorNumber & 0xFF;
-        // 将通道重新组合成ARGB颜色值
-        return (alpha << 24) | (red << 16) | (green << 8) | blue;
-      } catch (e) {}
-    }
-  }
-  if (!validColor) {
+  if (typeof cssColor !== "string") {
     console.error(new Error("invalid color " + cssColor));
+    return 0;
+  }
+  const input = cssColor.trim();
+  const rgbColor = parseRgbFunction(input);
+  if (rgbColor != null) {
+    return rgbColor;
+  }
+  const hexColor = parseHexColor(input);
+  if (hexColor != null) {
+    return hexColor;
   }
+  console.error(new Error("invalid color " + cssColor));
   return 0;
-}
+};

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