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

package/utils/JsViewVueWidget/JsvDomRenderer/JsvDomRenderer.ts

@@ -0,0 +1,146 @@
+/*
+ * @file
+ *
+ * 【界面概述】
+ * JsvDomRenderer 用于接收一段 HTML 字符串并直接渲染为 JsView 可显示的内容区域。
+ * 适合题目正文、解析文本、图文混排等场景。
+ *
+ * 【组件介绍】
+ * JsvDomRenderer:
+ *   props:
+ *     html {string} (必选)
+ *       - 要渲染的 HTML 文本。
+ *       - 示例: "<p>如图，抛物线 y=-x<sup>2</sup>+bx+c</p>"
+ *
+ *     config {object} (可选)
+ *       - 组件配置对象，当前仅支持如下字段:
+ *         latexEnabled {boolean}
+ *           - 是否启用 latex 渲染。
+ *           - true: 公式/文本按 JsvLatex 渲染
+ *           - false: 公式/文本按普通 div 渲染
+ *       - 示例: { latexEnabled: true }
+ *
+ *     style {object} (可选)
+ *       - 渲染容器样式，会作用在组件根容器上。
+ *       - 常用字段:
+ *         width {number|string} 容器宽度
+ *         height {number|string} 容器高度
+ *         backgroundColor {string} 背景色
+ *         fontSize {number|string} 字体大小
+ *         color {string} 字体颜色
+ *       - 示例:
+ *         {
+ *           width: 1280,
+ *           height: 2000,
+ *           backgroundColor: "#FFFFFF",
+ *           fontSize: 18,
+ *           color: "#000000"
+ *         }
+ */
+import { defineComponent, h, type PropType } from "vue";
+import { JsvFlexDiv } from "../JsvFlexCell";
+import { htmlToVNodes } from "./htmlToVNodes";
+import type { HtmlToVNodesOptions } from "./htmlToVNodes";
+import { JsViewHtmlToVNodesOptions } from "./JsViewHtmlToVNodesOptions";
+
+function normalizeLatexWidthFromStyle(
+  value: unknown
+): NonNullable<HtmlToVNodesOptions["latex"]>["width"] | undefined {
+  if (typeof value === "number" && Number.isFinite(value)) {
+    return value;
+  }
+  if (typeof value === "string") {
+    const parsed = Number(value.replace(/px$/i, "").trim());
+    if (Number.isFinite(parsed)) {
+      return parsed;
+    }
+  }
+  return undefined;
+}
+
+function normalizeLatexFontSizeFromStyle(
+  value: unknown
+): NonNullable<HtmlToVNodesOptions["latex"]>["fontSize"] | undefined {
+  if (typeof value === "number" && Number.isFinite(value)) {
+    return value;
+  }
+  if (typeof value === "string") {
+    const parsed = Number(value.replace(/px$/i, "").trim());
+    if (Number.isFinite(parsed)) {
+      return parsed;
+    }
+  }
+  return undefined;
+}
+
+export default defineComponent({
+  name: "JsvDomRenderer",
+  props: {
+    html: {
+      type: String,
+      required: true,
+    },
+    config: {
+      type: Object as PropType<
+        Partial<NonNullable<HtmlToVNodesOptions["latex"]>> & { latexEnabled?: boolean }
+      >,
+      default: undefined,
+    },
+    style: {
+      type: Object as PropType<Record<string, unknown>>,
+      default: undefined,
+    },
+  },
+  setup(props) {
+    // JsView 下用 JsvFlexDiv 做纵向布局，避免文本节点和图片出现重叠。
+    const render = () => {
+      const setupStartAt = Date.now();
+      console.log("[JsvDomRenderer][setup][start]");
+      const jsViewHtmlOptions = new JsViewHtmlToVNodesOptions();
+      const styleWidth = normalizeLatexWidthFromStyle(props.style?.width);
+      const styleFontSize = normalizeLatexFontSizeFromStyle(props.style?.fontSize);
+      const styleColor = typeof props.style?.color === "string" ? props.style.color : undefined;
+      if (props.config) {
+        const { latexEnabled, ...restConfig } = props.config;
+        jsViewHtmlOptions.latex = {
+          ...jsViewHtmlOptions.latex,
+          ...restConfig,
+          ...(latexEnabled !== undefined ? { enabled: latexEnabled } : {}),
+          ...(restConfig.width === undefined && styleWidth !== undefined ? { width: styleWidth } : {}),
+          ...(restConfig.fontSize === undefined && styleFontSize !== undefined
+            ? { fontSize: styleFontSize }
+            : {}),
+          ...(restConfig.color === undefined && styleColor !== undefined ? { color: styleColor } : {}),
+        };
+      } else if (styleWidth !== undefined || styleFontSize !== undefined || styleColor !== undefined) {
+        jsViewHtmlOptions.latex = {
+          ...jsViewHtmlOptions.latex,
+          ...(styleWidth !== undefined ? { width: styleWidth } : {}),
+          ...(styleFontSize !== undefined ? { fontSize: styleFontSize } : {}),
+          ...(styleColor !== undefined ? { color: styleColor } : {}),
+        };
+      }
+      const rawNodes = htmlToVNodes(props.html, jsViewHtmlOptions);
+      const normalizedNodes = rawNodes.map((node, idx) =>
+        typeof node === "string" ? h("div", { key: `txt-${idx}` }, node) : node
+      );
+      console.log("[JsvDomRenderer][setup][end][elapsedMs]", Date.now() - setupStartAt);
+      return h(
+        JsvFlexDiv,
+        {
+          class: "dom-json-renderer",
+          style: {
+            flexDirection: "column",
+            alignItems: "flex-start",
+            ...(props.style ?? {}),
+          },
+        },
+        {
+          default: () => normalizedNodes,
+        }
+      );
+    };
+
+    return render;
+  },
+});