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

package/utils/JsViewVueWidget/JsvApic/JsvApic2/JsvApic2.vue

@@ -14,6 +14,9 @@
  *      prop说明:
  *          src {string} 对应img标签的src, 传url时需要注意使用url([链接])
  *          style {object} 对应img标签的style
+ *          onStart 开始播放回调
+ *          onEnd 结束播放回调
+ *          onLoad 加载完成回调
  *      通过ref=拿到句柄后，可调用的方法:
  *          stop(): 停止播放
  *          show(): 显示某一帧
@@ -29,9 +32,10 @@
  *              播放结束后的状态: ApicEndState.HIDE 隐藏
  *                             ApicEndState.LAST_FRAME 保持最后一帧
 -->
-<script>
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from "vue";
 import ForgeHandles from "../../../JsViewVueTools/ForgeHandles";
-// import { LoopType } from "../JsvCommonLoopToolBase";
+import { ApicEndState } from "../JsvCommonLoopToolBase";
 
 //为了打包后少加载一个文件这里单独定义
 const LoopType = {
@@ -42,99 +46,120 @@ const LoopType = {
   LOOP_SINGLE: 4,
 };
 
-export default {
-  props: {
-    src: String,
-    style: Object,
-    onStart: Function,
-    onEnd: Function,
-    onLoad: Function,
+const props = defineProps({
+  src: String,
+  style: Object,
+  onStart: {
+    type: Function,
   },
-  setup() {
-    return {
-      element: {},
-    };
+  onEnd: {
+    type: Function,
   },
-  data() {
-    return {
-      onStartId: -1,
-      onEndId: -1,
-    };
-  },
-  methods: {
-    show(frameIndex = 0) {
-      if (!isNaN(frameIndex)) {
-        this.play(LoopType.LOOP_SINGLE, [[0, frameIndex, 0]]);
-      }
-    },
-    play(loopType, loopInfo, endState) {
-      let params = {
-        LT: loopType,
-        ES: endState,
-      };
-      if (loopInfo instanceof Array) {
-        //[[循环次数1,循环开始帧1,循环结束帧1], [循环次数2,循环开始帧2,循环结束帧2], ...]
-        params.LI = loopInfo;
-      } else if (!isNaN(loopInfo)) {
-        params.LI = [[loopInfo, 0, 0]];
-      } else {
-        params.LI = [[0, 0, 0]];
-      }
-      if (this.$refs.element) {
-        let mainViewTexture = this.$refs.element.jsvGetProxyTexture(
-          ForgeHandles.TextureManager
-        );
+  onLoad: Function,
+});
 
-        mainViewTexture.DispatchCommand(
-          Forge.NativeConstant.APIC_PLAY,
-          JSON.stringify(params)
-        );
-        mainViewTexture.unregisterOnStart(this.onStartId);
-        if (this.onStart) {
-          this.onStartId = mainViewTexture.registerOnStart(this.onStart);
-        }
-        mainViewTexture.unregisterOnEnd(this.onEndId);
-        if (this.onEnd) {
-          this.onEndId = mainViewTexture.registerOnEnd(this.onEnd);
-        }
-      }
-    },
-    stop(frameCount = -1) {
-      if (this.$refs.element) {
-        let mainViewTexture = this.$refs.element.jsvGetProxyTexture(
-          ForgeHandles.TextureManager
-        );
-        mainViewTexture.DispatchCommand(Forge.NativeConstant.APIC_STOP, `{"TF":${frameCount}}`);
-      }
-    },
-  },
-  mounted() {
-    if (this.onLoad) {
-      if (this.$refs.element) {
-        let mainViewTexture = this.$refs.element.jsvGetProxyTexture(
-          ForgeHandles.TextureManager
-        );
-        mainViewTexture.RegisterLoadImageCallback(null, this.onLoad, null);
-      }
+const element = ref(null);
+const onStartId = ref(-1);
+const onEndId = ref(-1);
+
+const show = (frameIndex = 0) => {
+  if (element.value) {
+    let mainViewTexture = element.value.jsvGetProxyTexture(
+      ForgeHandles.TextureManager
+    );
+
+    mainViewTexture.DispatchCommand(
+      Forge.NativeConstant.APIC_SHOW_FRAME,
+      JSON.stringify({
+        index: frameIndex,
+      })
+    );
+  }
+};
+
+const play = (loopType, loopInfo, endState, onstart = null, onend = null) => {
+  let params = {
+    LT: loopType,
+    ES: endState,
+  };
+  if (loopInfo instanceof Array) {
+    //[[循环次数1,循环开始帧1,循环结束帧1], [循环次数2,循环开始帧2,循环结束帧2], ...]
+    params.LI = loopInfo;
+  } else if (!isNaN(loopInfo)) {
+    params.LI = [[loopInfo, 0, 0]];
+  } else {
+    params.LI = [[0, 0, 0]];
+  }
+  if (element.value) {
+    let mainViewTexture = element.value.jsvGetProxyTexture(
+      ForgeHandles.TextureManager
+    );
+
+    mainViewTexture.DispatchCommand(
+      Forge.NativeConstant.APIC_PLAY,
+      JSON.stringify(params)
+    );
+    mainViewTexture.unregisterOnStart(onStartId.value);
+    onStartId.value = -1;
+    let onStart = onstart || props.onStart;
+    if (onStart) {
+      onStartId.value = mainViewTexture.registerOnStart(onStart);
     }
-  },
-  beforeUnmount() {
-    this.stop(0);
-    if (this.$refs.element) {
-      let mainViewTexture = this.$refs.element.jsvGetProxyTexture(
+    mainViewTexture.unregisterOnEnd(onEndId.value);
+    onEndId.value = -1;
+    let onEnd = onend || props.onEnd;
+    if (onEnd) {
+      onEndId.value = mainViewTexture.registerOnEnd(onEnd);
+    }
+  }
+};
+
+const stop = (frameCount = -1) => {
+  if (element.value) {
+    let mainViewTexture = element.value.jsvGetProxyTexture(
+      ForgeHandles.TextureManager
+    );
+    mainViewTexture.DispatchCommand(
+      Forge.NativeConstant.APIC_STOP,
+      `{"TF":${frameCount}}`
+    );
+  }
+};
+
+onMounted(() => {
+  if (props.onLoad) {
+    if (element.value) {
+      let mainViewTexture = element.value.jsvGetProxyTexture(
         ForgeHandles.TextureManager
       );
+      mainViewTexture.RegisterLoadImageCallback(null, props.onLoad, null);
+    }
+  }
+});
 
-      if (this.onStart) {
-        mainViewTexture.unregisterOnStart(this.onStartId);
-      }
+onBeforeUnmount(() => {
+  stop(0);
+  if (element.value) {
+    let mainViewTexture = element.value.jsvGetProxyTexture(
+      ForgeHandles.TextureManager
+    );
 
-      if (this.onEnd) {
-        mainViewTexture.unregisterOnEnd(this.onEndId);
-      }
+    if (onStartId.value >= 0) {
+      mainViewTexture.unregisterOnStart(onStartId.value);
     }
-  },
-};
+
+    if (onEndId.value >= 0) {
+      mainViewTexture.unregisterOnEnd(onEndId.value);
+    }
+  }
+});
+
+// 暴露方法给外部使用
+defineExpose({
+  show,
+  play,
+  stop,
+});
 </script>
 
 <template>

package/utils/JsViewVueWidget/JsvDashPath.vue

@@ -0,0 +1,150 @@
+<!--
+ * @file
+ * 
+ * 【模块 export 内容】
+ * JsvDashPath：Vue组件，用于绘制虚线路径
+ *      layout {Object}: (必填)组件位置，格式为 {left: number, top: number}
+ *      points {Array}: (必填)点数组，每个点包含 x 和 y 坐标，坐标是相对于layout中指定的left和top
+ *                     格式为 [{x: number, y: number}, ...]
+ *      dash {Array}: 虚线配置数组，例如 [10, 5] 表示10px实线，5px空白，默认值 [10, 10]
+ *      phase {Number}: 虚线起始位置偏移，默认值 0
+ *      color {String}: 线条颜色，默认值 "#FFFFFF"
+ *      lineWidth {Number}: 线条宽度，默认值 2
+ * 
+ * 注意事项:
+ *      组件会根据传入的points自动计算所需画布大小
+ *      组件会在卸载时自动清理创建的纹理资源
+ -->
+
+<template>
+  <div
+    :style="{
+      left: layout.left,
+      top: layout.top,
+    }"
+  >
+    <div
+      :style="{
+        left: canvasInfo.minX,
+        top: canvasInfo.minY,
+        width: canvasInfo.width,
+        height: canvasInfo.height,
+        backgroundImage: `url(jsvtexturestore://${sourceId})`,
+      }"
+    />
+  </div>
+</template>
+
+<script setup>
+import { JsvTextureStoreApi } from "../JsViewVueTools";
+import { onBeforeUnmount, computed } from "vue";
+
+const props = defineProps({
+  // 组件位置 {left: number, top: number}
+  layout: {
+    type: Object,
+    required: true,
+  },
+  // 点数组，每个点包含 x 和 y 坐标, 坐标是相对与layout中指定的left和top
+  points: {
+    type: Array,
+    required: true,
+    validator: (value) => {
+      return value.every((point) => "x" in point && "y" in point);
+    },
+  },
+  // 虚线配置，例如 [10, 5] 表示10px实线，5px空白
+  dash: {
+    type: Array,
+    default: () => [10, 10],
+  },
+  // 虚线起始位置偏移
+  phase: {
+    type: Number,
+    default: 0,
+  },
+  // 线条颜色
+  color: {
+    type: String,
+    default: "#FFFFFF",
+  },
+  // 线条宽度
+  lineWidth: {
+    type: Number,
+    default: 2,
+  },
+});
+
+// 计算坐标系调整值和画布尺寸
+const canvasInfo = computed(() => {
+  const xValues = props.points.map((p) => p.x);
+  const yValues = props.points.map((p) => p.y);
+
+  // 找出最小坐标值
+  const minX = Math.min(...xValues);
+  const minY = Math.min(...yValues);
+
+  // 计算偏移量（考虑线宽）
+  const lineOffset = Math.ceil(props.lineWidth / 2);
+
+  // 计算画布尺寸（考虑线宽）
+  const width = Math.max(...xValues) - minX + props.lineWidth * 2;
+  const height = Math.max(...yValues) - minY + props.lineWidth * 2;
+
+  return {
+    minX,
+    minY,
+    lineOffset,
+    width,
+    height,
+  };
+});
+
+// 创建画布纹理
+let sourceId = "";
+const canvasRef = JsvTextureStoreApi.canvasTexture(
+  canvasInfo.value.width,
+  canvasInfo.value.height
+);
+
+// 绘制透明背景
+canvasRef.drawColor("rgba(0,0,0,0)");
+
+// 创建自定义路径
+const path = canvasRef.customPath();
+
+// 移动到第一个调整后的点
+if (props.points.length > 0) {
+  const firstPoint = props.points[0];
+  path.moveTo(
+    firstPoint.x - canvasInfo.value.minX + canvasInfo.value.lineOffset,
+    firstPoint.y - canvasInfo.value.minY + canvasInfo.value.lineOffset
+  );
+
+  // 连接后续的调整后的点
+  for (let i = 1; i < props.points.length; i++) {
+    const point = props.points[i];
+    path.lineTo(
+      point.x - canvasInfo.value.minX + canvasInfo.value.lineOffset,
+      point.y - canvasInfo.value.minY + canvasInfo.value.lineOffset
+    );
+  }
+  path.close();
+}
+
+// 使用虚线样式绘制路径
+path.strokeWithSetting({
+  lineWidth: props.lineWidth,
+  color: props.color,
+  dash: props.dash,
+  phase: props.phase,
+});
+
+// 提交纹理并获取sourceId
+sourceId = canvasRef.commit();
+
+// 组件卸载时清理纹理
+onBeforeUnmount(() => {
+  JsvTextureStoreApi.deleteTexture(sourceId);
+});
+</script>

package/utils/JsViewVueWidget/JsvDomRenderer/JsViewHtmlToVNodesOptions.ts

@@ -0,0 +1,212 @@
+import { h } from "vue";
+import { JsvLatex, processLatexStr } from "../../JsViewPlugin/JsvLatex";
+import { JsvFlexDiv } from "../JsvFlexCell";
+import type {
+  HtmlToVNodesOptions,
+  TagHookContext,
+  StyleHookContext,
+  TextHookContext,
+} from "./htmlToVNodes";
+
+const FALLBACK_TAG = "div";
+function sanitizeTableAttrs(attrs: Record<string, string>): Record<string, string> {
+  const next = { ...attrs };
+  delete next.style;
+  delete next.width;
+  return next;
+}
+
+function parseNumericOrRaw(value?: string): number | string | undefined {
+  const raw = value?.trim();
+  if (!raw) return undefined;
+  const n = Number(raw);
+  return Number.isFinite(n) ? n : raw;
+}
+
+function asVerticalFlexTag(extraStyle?: Record<string, unknown>) {
+  return {
+    component: JsvFlexDiv,
+    props: {
+      style: {
+        flexDirection: "column",
+        alignItems: "flex-start",
+        ...(extraStyle ?? {}),
+      },
+    },
+  };
+}
+
+function asHorizontalFlexTag(withDot = false) {
+  return {
+    component: JsvFlexDiv,
+    prependBullet: withDot,
+    props: {
+      style: {
+        flexDirection: "row",
+        alignItems: "flex-start",
+      },
+    },
+  };
+}
+
+function tableTagHandler(
+  ctx: TagHookContext,
+  columnWidthRef: { values: Array<number | string | undefined> }
+) {
+  const tag = ctx.tag.toLowerCase();
+  if (tag === "table" || tag === "tbody" || tag === "thead" || tag === "tfoot") {
+    if (tag === "table") {
+      columnWidthRef.values = [];
+    }
+    return {
+      component: JsvFlexDiv,
+      attrs: sanitizeTableAttrs(ctx.attrs),
+      props: {
+        style: {
+          flexDirection: "column",
+          alignItems: "stretch",
+        },
+      },
+    };
+  }
+  if (tag === "tr") {
+    return {
+      component: JsvFlexDiv,
+      attrs: sanitizeTableAttrs(ctx.attrs),
+      props: {
+        style: {
+          flexDirection: "row",
+          alignItems: "flex-start",
+        },
+      },
+    };
+  }
+  if (tag === "td" || tag === "th") {
+    const colIndex = ctx.parentTag === "tr" ? ctx.indexInParent : undefined;
+    const ownWidth = parseNumericOrRaw(ctx.attrs.width);
+    if (colIndex !== undefined && ownWidth !== undefined) {
+      columnWidthRef.values[colIndex] = ownWidth;
+    }
+    const width =
+      ownWidth ??
+      (colIndex !== undefined ? columnWidthRef.values[colIndex] : undefined);
+    return {
+      component: JsvFlexDiv,
+      attrs: sanitizeTableAttrs(ctx.attrs),
+      props: {
+        style: {
+          ...(width !== undefined ? { width } : {}),
+          flexDirection: "column",
+          alignItems: "flex-start",
+        },
+      },
+    };
+  }
+}
+
+const TAG_HOOK_HANDLERS: Record<
+  string,
+  (ctx: TagHookContext) => {
+    text?: string;
+    tag?: string;
+    component?: any;
+    props?: Record<string, unknown>;
+    prependBullet?: boolean;
+    attrs?: Record<string, string>;
+    childrenText?: string;
+    drop?: boolean;
+  }
+> = {
+  span: (ctx) => ({ text: ctx.childrenText }),
+  div: () => asVerticalFlexTag(),
+  p: () => asVerticalFlexTag(),
+  ul: () => asVerticalFlexTag(),
+  li: () => asHorizontalFlexTag(true),
+  button: () => asVerticalFlexTag(),
+  br: () => ({ tag: "br" }),
+  img: () => ({ tag: "img" }),
+  sup: (ctx) => ({ text: `^{${ctx.childrenText}}` }),
+  sub: (ctx) => ({ text: `_{${ctx.childrenText}}` }),
+  a: (ctx) => ({ text: ctx.childrenText }),
+  strong: (ctx) => ({ text: ctx.childrenText }),
+  ol: () => asVerticalFlexTag(),
+  em: (ctx) => ({ text: ctx.childrenText }),
+};
+
+function defaultUnsupportedStyle(property: string, value: string): boolean {
+  const p = property.trim().toLowerCase();
+  const v = value.trim().toLowerCase();
+
+  if (p === "display" && v === "flex") return true;
+  if (p === "justify-content") return true;
+  if (p === "align-items") return true;
+  if (p === "flex-wrap") return true;
+  if (p === "padding" || p.startsWith("padding-")) return true;
+  if (p === "transition" && v.includes("all")) return true;
+  if (p === "transform" && v.includes("scale(")) return true;
+  if (p === "font-weight" && /^[0-9]+$/.test(v)) return true;
+
+  return false;
+}
+
+export class JsViewHtmlToVNodesOptions implements HtmlToVNodesOptions {
+  private columnWidthRef: { values: Array<number | string | undefined> } = { values: [] };
+
+  latex: NonNullable<HtmlToVNodesOptions["latex"]> = {
+    enabled: true,
+    width: 1000,
+    fontSize: 16,
+    lineSpace: 2,
+    color: "#000000",
+  };
+
+  onTag = (ctx: TagHookContext) => {
+    const before = { tag: ctx.tag, attrs: ctx.attrs };
+    console.log("[JsViewHtmlToVNodesOptions][onTag][before]", before);
+
+    const tag = ctx.tag.toLowerCase();
+    if (["table", "thead", "tbody", "tfoot", "tr", "td", "th"].includes(tag)) {
+      const after = tableTagHandler(ctx, this.columnWidthRef);
+      console.log("[JsViewHtmlToVNodesOptions][onTag][after]", after);
+      return after;
+    }
+
+    const tagHandler = TAG_HOOK_HANDLERS[tag];
+    if (tagHandler) {
+      const after = tagHandler(ctx);
+      console.log("[JsViewHtmlToVNodesOptions][onTag][after]", after);
+      return after;
+    } else {
+      const after = { drop: true };
+      console.log("[JsViewHtmlToVNodesOptions][onTag][unsupported-tag][drop]", {
+        tag: ctx.tag,
+        ...after,
+      });
+      return after;
+    }
+
+  };
+
+  onStyle = (ctx: StyleHookContext) => {
+    const before = { property: ctx.property, value: ctx.value, tag: ctx.tag };
+    console.log("[JsViewHtmlToVNodesOptions][onStyle][before]", before);
+
+    if (defaultUnsupportedStyle(ctx.property, ctx.value)) {
+      const after = { drop: true };
+      console.log("[JsViewHtmlToVNodesOptions][onStyle][after]", after);
+      return after;
+    }
+
+  };
+
+  onText = (ctx: TextHookContext) => {
+    if (this.latex.enabled === false) {
+      return ctx.text;
+    }
+    return ctx.text
+      .replace(/&nbsp;/g, "\\ ")
+      .replace(/\u00A0/g, "\\ ")
+      .replace(/ /g, "\\ ");
+  };
+}
+