npm - @shijiu/jsview-vue - Versions diffs - 2.1.25 → 2.1.200 - Mend

@shijiu/jsview-vue 2.1.25 → 2.1.200

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 (80) hide show

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

@@ -0,0 +1,37 @@
+export const getHtmlStr = (libPath, latexStr, fontSize, width, height, color) => {
+  return (
+    `<html>
+      <head>
+        <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}$$\`;
+            document.body.appendChild(divElement);
+            MathJax.typesetPromise().then(() => {
+              // modify the DOM here
+              let formulaMetrics = MathJax.getMetricsFor(divElement, true);
+              let scale = ${width} / 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/Color.ts ADDED Viewed

@@ -0,0 +1,43 @@
+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) {
+    console.error(new Error("invalid color " + cssColor));
+  }
+  return 0;
+}

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

@@ -0,0 +1,159 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-11-15 16:08:58
+ * @Description: file content
+ -->
+<!--
+[界面概述]
+  思维导图控件
+[控件介绍]
+  JsvLatex:
+    props:
+      latexStr:         {string}      latex公式
+      fontSize:         {function}    字号
+      left:             {number}      left
+      top:              {number}      top
+      width:            {number}      width
+      height:           {number}      height
+      lineSpace:        {number}      行距
+      color:            {string}      文字颜色
+ -->
+<script setup>
+import { onBeforeUnmount, ref } 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 sPluginLoader from "./PluginLoader";
+const props = defineProps({
+  latexStr: {
+    type: String,
+    required: true,
+  },
+  width: {
+    type: Number,
+    required: true,
+  },
+  height: {
+    type: Number,
+    default: 0,
+  },
+  fontSize: {
+    type: Number,
+    default: 25,
+  },
+  lineSpace: {
+    type: Number,
+    default: 10,
+  },
+  color: {
+    type: String,
+    default: "#FFFFFF",
+  },
+  left: {
+    type: Number,
+    default: 0,
+  },
+  top: {
+    type: Number,
+    default: 0,
+  },
+});
+const show = ref(false);
+let innerViewId = -1;
+let clientWidth = props.width;
+let clientHeight = props.height;
+const getClientSize = () => {
+  return {
+    width: clientWidth,
+    height: clientHeight,
+  };
+};
+const showView = () => {
+  show.value = true;
+  /**
+   * setting格式
+   * {
+   *    libRootPath: string,
+   *    width: number,
+   *    textSize: number,
+   *    lineSpace: number,
+   *    latexStr: string,
+   *    color: string,
+   *    colorSpace?: string,
+   * }
+   */
+  const textureManager = ForgeHandles.TextureManager;
+  const pluginTexture = textureManager.GetPluginTexture(
+    "latexPlugin",
+    JSON.stringify({
+      libRootPath: JsvLatexBridgeProxy.GetLibPath(),
+      latexStr: props.latexStr,
+      width: props.width,
+      textSize: props.fontSize,
+      lineSpace: props.lineSpace,
+      color: cssColor2Android(props.color),
+    })
+  );
+  pluginTexture.RegisterLoadImageCallback(null, (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));
+    }
+  };
+  let layoutView = new Forge.LayoutView(
+    new Forge.TextureSetting(pluginTexture)
+  );
+  layoutView.EnableAutoSize();
+  innerViewId = Forge.sViewStore.add(new Forge.ViewInfo(layoutView));
+};
+const loadInfo = sPluginLoader.getLoadInfo();
+if (loadInfo.done) {
+  if (loadInfo.succeed) {
+    showView();
+  }
+} else {
+  //注册回调
+  sPluginLoader.registerOnDoneListener((status) => {
+    if (status != null) {
+      showView();
+    }
+  });
+}
+onBeforeUnmount(() => {
+  if (innerViewId !== -1) {
+    Forge.sViewStore.remove(innerViewId);
+    innerViewId = -1;
+  }
+});
+defineExpose({
+  getClientSize,
+});
+</script>
+<template>
+  <div
+    v-if="show"
+    :data-jsv-vw-innerview="innerViewId"
+    :style="{
+      left: left,
+      top: top,
+      width: width,
+      height: height,
+    }"
+  ></div>
+</template>

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

@@ -0,0 +1,16 @@
+/*
+ * @Author: ChenChanghua
+ * @Date: 2023-02-23 10:06:08
+ * @Description: file content
+ */
+export default class {
+  static GetLibPath() {
+    if (typeof window.jsvLatexBridge != "undefined"
+      && typeof window.jsvLatexBridge.GetLibPath != "undefined") {
+      return window.jsvLatexBridge.GetLibPath();
+    } else {
+      console.error("widnow.jsvLatexBridge doesn't exist.")
+      return null;
+    }
+  }
+}

package/utils/JsViewPlugin/JsvLatex/JsvLatexBrowser.vue ADDED Viewed

@@ -0,0 +1,59 @@
+<script setup>
+// import "./mathjax-tex-svg.js";
+import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
+import { ref, onMounted } from "vue";
+import { getHtmlStr } from "./BrowserDomBuilder.js";
+import libPath from "./mathjax-tex-svg.txt";
+const props = defineProps({
+  latexStr: {
+    type: String,
+    required: true,
+  },
+  width: {
+    type: Number,
+    required: true,
+  },
+  height: {
+    type: Number,
+    default: 0,
+  },
+  fontSize: {
+    type: Number,
+    default: 25,
+  },
+  lineSpace: {
+    type: Number,
+    default: 10,
+  },
+  color: {
+    type: String,
+    default: "#FFFFFF",
+  },
+  left: {
+    type: Number,
+    default: 0,
+  },
+  top: {
+    type: Number,
+    default: 0,
+  },
+});
+let layoutView = new Forge.IFrameView();
+layoutView.SetIframeSize(props.width, props.height);
+layoutView.SetInnerHtml(getHtmlStr(libPath, props.latexStr, props.fontSize, props.width, props.height, props.color));
+let innerViewId = Forge.sViewStore.add(new Forge.ViewInfo(layoutView));
+</script>
+<template>
+  <div
+    :data-jsv-vw-innerview="innerViewId"
+    :style="{
+      left: left,
+      top: top,
+      width: width,
+      height: height,
+    }"
+  ></div>
+</template>

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

@@ -0,0 +1,171 @@
+/*
+ * @Author: ChenChanghua
+ * @Date: 2023-02-27 20:04:28
+ * @Description: file content
+ */
+import PluginInfo from './version';
+import jsvLatexBridge from "./JsvLatexBridgeProxy"
+class PluginLoader {
+  constructor() {
+    this.onDoneListener = [];
+    this.pluginLoadListener = [];
+    this.pluginInfo = this.getPluginInfo();
+    this.loadDone = false;
+    this.loadSucceed = false;
+    /**
+     * 0：未加载；
+     * 1：开始加载；
+     * 2：加载旧插件；
+     * 3：加载新插件；
+     * 4：加载成功；
+     * 5：加载失败。
+     */
+    this.status = 0;
+  }
+  getPluginInfo() {
+    let info = PluginInfo;
+    /** 获取下载链接 */
+    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;
+      }
+    }
+    return info;
+  }
+  registerOnDoneListener(listener) {
+    if (listener) {
+      this.onDoneListener.push(listener);
+    }
+  }
+  getLoadInfo() {
+    return {
+      done: this.loadDone,
+      succeed: this.loadSucceed,
+    }
+  }
+  /**
+   * listener回调处理中参数信息的说明:
+   * 插件加载状态回调。
+   * 回调函数的参数定义如下：
+   * 1:无法正常加载插件。
+   * 2:正在加载旧插件，此时插件加载过程很短，可以不用出现用户提示界面。
+   * 3:正在加载新插件，此时插件需要经历下载、解压等过程，用时较长，可以考虑给用户相关提示。
+   * 4:插件加载完成。
+   * 5:已加载不同版本的插件，此版本无法加载。
+   *
+   * 备注：不管插件加载处于什么状态，都可以正常使用播放器组件，播放器对象在插件未加载完成的情况下，会把相关状态保存，等完成加载后再自动下发。
+   */
+  loadPlugin(listener) {
+    console.log("globalLoadJsvLatexPlugin");
+    let plugin_status = 0;
+    if (typeof window.jPluginManagerBridge === 'undefined' || !window.jPluginManagerBridge) {
+      plugin_status = 1;
+    } else if (this.status === 2) {
+      plugin_status = 2;
+    } else if (this.status === 3) {
+      plugin_status = 3;
+    } else if (this.status === 4) {
+      plugin_status = 4;
+    } else if (this.status === 5) {
+      plugin_status = 1;
+    }
+    if (plugin_status !== 0) {
+      if (typeof listener !== "undefined" && listener) {
+        setTimeout(() => { listener(plugin_status) }, 0);
+      }
+      return;
+    }
+    if (typeof listener !== "undefined" && listener) {
+      this.pluginLoadListener.push(listener);
+    }
+    if (this.status > 0) {
+      return;
+    }
+    this.status = 1;
+    window.jPluginManagerBridge.LoadPlugin(JSON.stringify(this.pluginInfo));
+  }
+  onStatusChange(status) {
+    console.log("JsvLatexPluginStatus: " + status);
+    let ret = JSON.parse(status);
+    let plugin_status = 2;
+    if (ret && ret.first_load) {
+      this.status = 3;
+      plugin_status = 3;
+    } else {
+      this.status = 2;
+    }
+    for (let i = 0; i < this.pluginLoadListener.length; i++) {
+      this.pluginLoadListener[i](plugin_status);
+    }
+  }
+  onLoadDone(result) {
+    console.log("JsvLatexPluginLoadResult: " + result);
+    this.loadDone = true;
+    let ret_obj = JSON.parse(result)
+    let plugin_status = 1;
+    if (ret_obj && (ret_obj.status === 4 || ret_obj.status === 1)) {
+      this.status = 4;
+      plugin_status = 4;
+    } else if (ret_obj && ret_obj.status === -12) {
+      this.status = 5;
+      plugin_status = 5;
+    } else {
+      this.status = 5;
+    }
+    if (this.status === 5) {
+      this.loadSucceed = false;
+      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.")
+      }
+    }
+    for (let i = 0; i < this.pluginLoadListener.length; i++) {
+      this.pluginLoadListener[i](plugin_status);
+    }
+    for (let listener of this.onDoneListener) {
+      listener(plugin_status);
+    }
+  }
+  registerGlobalListener() {
+    window.top.JsvLatexPluginStatus = this.onStatusChange.bind(this);
+    window.top.JsvLatexPluginLoadResult = this.onLoadDone.bind(this);
+  }
+}
+const sPluginLoader = new PluginLoader();
+sPluginLoader.registerGlobalListener();
+export default sPluginLoader;

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

@@ -0,0 +1,28 @@
+/*
+ * @Author: ChenChanghua
+ * @Date: 2023-02-28 10:18:42
+ * @Description: file content
+ */
+import sPluginLoader from "./PluginLoader.js";
+import JsvLatex from "./JsvLatex.vue"
+let globalLoadJsvLatexPlugin;
+let _JsvLatex;
+if (!window.JsView) {
+  const BrowserJsvLatex = await import("./JsvLatexBrowser.vue");
+  //browser
+  globalLoadJsvLatexPlugin = (listener) => {
+    setTimeout(listener, 0);
+  };
+  _JsvLatex = BrowserJsvLatex.default;
+} else {
+  //jsview
+  globalLoadJsvLatexPlugin = sPluginLoader.loadPlugin.bind(sPluginLoader);
+  _JsvLatex = JsvLatex;
+}
+export {
+  _JsvLatex as JsvLatex,
+  globalLoadJsvLatexPlugin,
+}