@shijiu/jsview-vue-samples 2.2.201 → 2.2.373

package/Input/App.vue

@@ -9,112 +9,199 @@
 import { InputType, EdgeDirection, useFocusHub } from "jsview";
 import InputPanel from "./InputPanel.vue";
 import { useRouter } from "vue-router";
-import { shallowRef } from "vue"
+import { shallowRef } from "vue";
 const router = useRouter();
-let focusNode = shallowRef(null)
-const name = "/input"
-const focusHub = useFocusHub()
+let focusNode = shallowRef(null);
+const name = "/input";
+const focusHub = useFocusHub();
 
 const _onKeyDown = (ev) => {
-    if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-        router?.go(-1); // 有router时，是从DemoHomepage进入，回退
-    }
-    return true;
-}
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router?.go(-1); // 有router时，是从DemoHomepage进入，回退
+  }
+  return true;
+};
+
+const focus_name_list = [
+  name + "/normal-left",
+  name + "/normal-right",
+  name + "/password",
+  name + "/number",
+];
+
 const _onFocus = () => {
-    focusHub.setFocus(name + "/normal");
-}
+  focusHub.setFocus(focus_name_list[0]);
+};
+const _panel0OnEdge = (edgeInfo) => {
+  // 自己为0
+  if (edgeInfo.direction == EdgeDirection.right) {
+    focusHub.setFocus(focus_name_list[1]);
+  }
+};
 const _panel1OnEdge = (edgeInfo) => {
-    if (edgeInfo.direction == EdgeDirection.right) {
-        focusHub.setFocus(name + "/password");
-    }
-}
+  // 自己为1
+  if (edgeInfo.direction == EdgeDirection.left) {
+    focusHub.setFocus(focus_name_list[0]);
+  } else if (edgeInfo.direction == EdgeDirection.right) {
+    focusHub.setFocus(focus_name_list[2]);
+  }
+};
 const _panel2OnEdge = (edgeInfo) => {
-    if (edgeInfo.direction == EdgeDirection.left) {
-        focusHub.setFocus(name + "/normal");
-    } else if (edgeInfo.direction == EdgeDirection.right) {
-        focusHub.setFocus(name + "/number");
-    }
-}
+  // 自己为2
+  if (edgeInfo.direction == EdgeDirection.left) {
+    focusHub.setFocus(focus_name_list[1]);
+  } else if (edgeInfo.direction == EdgeDirection.right) {
+    focusHub.setFocus(focus_name_list[3]);
+  }
+};
 const _panel3OnEdge = (edgeInfo) => {
-    if (edgeInfo.direction == EdgeDirection.left) {
-        focusHub.setFocus(name + "/password");
-    }
-}
-
-
+  // 自己为3
+  if (edgeInfo.direction == EdgeDirection.left) {
+    focusHub.setFocus(focus_name_list[2]);
+  }
+};
 </script>
 
 <template>
-    <jsv-focus-block ref="focusNode" autoFocus :onAction="{
-        onKeyDown: _onKeyDown,
-        onFocus: _onFocus,
-    }" :style="{
-        width: 1920,
-        height: 1080,
-        backgroundColor: '#007788',
-    }">
-        <div :style="{
-                top: 100,
-                left: 100,
-            }">
-            <div :style="{
-                    width: 300,
-                    height: 50,
-                    lineHeight: 50,
-                    textAlign: 'center',
-                    fontSize: 30,
-                }">
-                文字输入-左对齐
-            </div>
-            <div :style="{
-                    top: 100,
-                }">
-                <input-panel :name="name + '/normal'" :type="InputType.TEXT" textAlign="left" placeholder="请输入"
-                    :onEdge="_panel1OnEdge" />
-            </div>
-        </div>
+  <jsv-focus-block
+    ref="focusNode"
+    autoFocus
+    :onAction="{
+      onKeyDown: _onKeyDown,
+      onFocus: _onFocus,
+    }"
+    :style="{
+      width: 1920,
+      height: 1080,
+      backgroundColor: '#007788',
+    }"
+  >
+    <div
+      :style="{
+        top: 100,
+        left: 100,
+      }"
+    >
+      <div
+        :style="{
+          width: 300,
+          height: 50,
+          lineHeight: 50,
+          textAlign: 'center',
+          fontSize: 30,
+        }"
+      >
+        文字输入-左对齐
+      </div>
+      <div
+        :style="{
+          top: 100,
+        }"
+      >
+        <input-panel
+          :name="name + '/normal-left'"
+          :type="InputType.TEXT"
+          textAlign="left"
+          placeholder="请输入"
+          :onEdge="_panel0OnEdge"
+        />
+      </div>
+    </div>
+
+    <div
+      :style="{
+        top: 100,
+        left: 360,
+      }"
+    >
+      <div
+        :style="{
+          width: 300,
+          height: 50,
+          lineHeight: 50,
+          textAlign: 'center',
+          fontSize: 30,
+        }"
+      >
+        文字输入-右对齐
+      </div>
+      <div
+        :style="{
+          top: 100,
+        }"
+      >
+        <input-panel
+          :name="name + '/normal-right'"
+          :type="InputType.TEXT"
+          textAlign="right"
+          placeholder="请输入"
+          :onEdge="_panel1OnEdge"
+        />
+      </div>
+    </div>
 
-        <div :style="{
-                top: 100,
-                left: 500,
-            }">
-            <div :style="{
-                    width: 300,
-                    height: 50,
-                    lineHeight: 50,
-                    textAlign: 'center',
-                    fontSize: 30,
-                }">
-                密码输入-右对齐
-            </div>
-            <div :style="{
-                    top: 100,
-                }">
-                <input-panel :name="name + '/password'" :type="InputType.PASSWORD" textAlign="right" placeholder="请输入"
-                    :onEdge="_panel2OnEdge" />
-            </div>
-        </div>
+    <div
+      :style="{
+        top: 100,
+        left: 630,
+      }"
+    >
+      <div
+        :style="{
+          width: 300,
+          height: 50,
+          lineHeight: 50,
+          textAlign: 'center',
+          fontSize: 30,
+        }"
+      >
+        密码输入-右对齐
+      </div>
+      <div
+        :style="{
+          top: 100,
+        }"
+      >
+        <input-panel
+          :name="name + '/password'"
+          :type="InputType.PASSWORD"
+          textAlign="right"
+          placeholder="请输入"
+          :onEdge="_panel2OnEdge"
+        />
+      </div>
+    </div>
 
-        <div :style="{
-                top: 100,
-                left: 900,
-            }">
-            <div :style="{
-                    width: 300,
-                    height: 50,
-                    lineHeight: 50,
-                    textAlign: 'center',
-                    fontSize: 30,
-                }">
-                数字输入-右对齐
-            </div>
-            <div :style="{
-                    top: 100,
-                }">
-                <input-panel :name="name + '/number'" :type="InputType.NUMBER" textAlign="right" placeholder="请输入"
-                    :onEdge="_panel3OnEdge" />
-            </div>
-        </div>
-    </jsv-focus-block>
-</template>
+    <div
+      :style="{
+        top: 100,
+        left: 900,
+      }"
+    >
+      <div
+        :style="{
+          width: 300,
+          height: 50,
+          lineHeight: 50,
+          textAlign: 'center',
+          fontSize: 30,
+        }"
+      >
+        数字输入-右对齐
+      </div>
+      <div
+        :style="{
+          top: 100,
+        }"
+      >
+        <input-panel
+          :name="name + '/number'"
+          :type="InputType.NUMBER"
+          textAlign="right"
+          placeholder="请输入"
+          :onEdge="_panel3OnEdge"
+        />
+      </div>
+    </div>
+  </jsv-focus-block>
+</template>

package/Input/InputPanel.vue

@@ -8,100 +8,116 @@
 <script setup>
 import FullKeyboard from "./FullKeyboard.vue";
 import { EdgeDirection, JsvInput, useFocusHub } from "jsview";
-import { shallowRef} from "vue";
+import { shallowRef } from "vue";
 
 const blurColor = "#AAAAAA";
 const focusColor = "#FFFF00";
-let focusNode = shallowRef(null)
-let input=shallowRef(null)
-let showCursor = shallowRef(false)
-const focusHub = useFocusHub()
-let cursorColor = shallowRef(blurColor)
+let focusNode = shallowRef(null);
+let input = shallowRef(null);
+let showCursor = shallowRef(false);
+const focusHub = useFocusHub();
+let cursorColor = shallowRef(blurColor);
 const props = defineProps({
-    name: String,
-    type: Number,
-    textAlign: String,
-    placeHolder: String,
-    onEdge: Function,
-})
+  name: String,
+  type: Number,
+  textAlign: String,
+  placeHolder: String,
+  onEdge: Function,
+});
 const _onFocus = () => {
-    showCursor.value = true;
-    cursorColor.value = blurColor;
-    focusHub.setFocus(`${props.name}/keyboard`);
-}
+  showCursor.value = true;
+  cursorColor.value = blurColor;
+  focusHub.setFocus(`${props.name}/keyboard`);
+};
 const _onBlur = () => {
-    showCursor.value = false;
-    cursorColor.value = blurColor;
-}
+  showCursor.value = false;
+  cursorColor.value = blurColor;
+};
 const _keyboardOnClick = (item) => {
-    const char = item.content;
-    if (char === "删除") {
-        input.value?.delete();
-    } else if (char === "清空") {
-        input.value?.clear();
-    } else {
-        input.value?.add(char);
-    }
-}
+  const char = item.content;
+  if (char === "删除") {
+    input.value?.delete();
+  } else if (char === "清空") {
+    input.value?.clear();
+  } else {
+    input.value?.add(char);
+  }
+};
 const _keyboardOnEdge = (edgeInfo) => {
-    if (edgeInfo.direction === EdgeDirection.top) {
-        focusHub.setFocus(`${props.name}/etext`);
-        cursorColor.value = focusColor;
-    } else {
-        props.onEdge?.(edgeInfo);
-    }
-}
+  if (edgeInfo.direction === EdgeDirection.top) {
+    focusHub.setFocus(`${props.name}/etext`);
+    cursorColor.value = focusColor;
+  } else {
+    props.onEdge?.(edgeInfo);
+  }
+};
 const _onTextChange = (str) => {
-    console.log(props.name + " text change:", str);
-}
+  console.log(props.name + " text change:", str);
+};
 const _onTextOverflow = () => {
-    console.log(props.name + " text overflow.");
-}
+  console.log(props.name + " text overflow.");
+};
+const _onBackKey = (isUp) => {
+  return true; // 无论是key-down还是key-up都consume，防止软键盘有时候返回会吐出导致界面回退的问题
+};
 const _inputOnEdge = (edgeInfo) => {
-    if (edgeInfo.direction === EdgeDirection.bottom) {
-        focusHub.setFocus(`${props.name}/keyboard`);
-        cursorColor.value = blurColor;
-    } else {
-        props.onEdge?.(edgeInfo);
-    }
-    return true;
-}
+  if (edgeInfo.direction === EdgeDirection.bottom) {
+    focusHub.setFocus(`${props.name}/keyboard`);
+    cursorColor.value = blurColor;
+  } else {
+    props.onEdge?.(edgeInfo);
+  }
+  return true;
+};
 </script>
 
 <template>
-    <jsv-focus-block :name="props.name" ref="focusNode" :onAction="{
-            onFocus: _onFocus,
-            onBlur: _onBlur,
-        }">
-        <div :style="{
-                left: 50,
-                top: 50,
-                width: 150,
-                height: 40,
-                backgroundColor: '#33334f',
-            }" />
-        <jsv-input :name="`${props.name}/etext`" 
-                    ref="input" 
-                   :type="props.type" 
-                   :left="50" 
-                   :top="50" 
-                   :height="40"
-                   :width="150" 
-                   :placeholder="props.placeHolder" 
-                   :cursorShow="showCursor" 
-                   :fontStyle="{
-                    fontSize: 28,
-                    color: '#ffff00',
-                    textAlign: props.textAlign,
-                }" 
-                :onEdge="_inputOnEdge" 
-                :cursorWidth="2" 
-                :onTextChange="_onTextChange"
-                :onTextOverflow="_onTextOverflow" 
-                :cursorColor="cursorColor" />
+  <jsv-focus-block
+    :name="props.name"
+    ref="focusNode"
+    :onAction="{
+      onFocus: _onFocus,
+      onBlur: _onBlur,
+    }"
+  >
+    <div
+      :style="{
+        left: 50,
+        top: 50,
+        width: 150,
+        height: 40,
+        backgroundColor: '#33334f',
+      }"
+    />
+    <jsv-input
+      :name="`${props.name}/etext`"
+      ref="input"
+      :type="props.type"
+      :left="50"
+      :top="50"
+      :height="40"
+      :width="150"
+      :placeholder="props.placeHolder"
+      :cursorShow="showCursor"
+      :fontStyle="{
+        fontSize: 28,
+        color: '#ffff00',
+        textAlign: props.textAlign,
+      }"
+      :onEdge="_inputOnEdge"
+      :cursorWidth="2"
+      :onTextChange="_onTextChange"
+      :onTextOverflow="_onTextOverflow"
+      :cursorColor="cursorColor"
+      :onBackKey="_onBackKey"
+    />
 
-        <div :style="{ top: 100 }">
-            <full-keyboard :name="`${props.name}/keyboard`" :onClick="_keyboardOnClick" :onEdge="_keyboardOnEdge" />
-        </div>
-    </jsv-focus-block>
-</template>
+    <div :style="{ top: 100 }">
+      <full-keyboard
+        :name="`${props.name}/keyboard`"
+        :onClick="_keyboardOnClick"
+        :onEdge="_keyboardOnEdge"
+      />
+    </div>
+  </jsv-focus-block>
+</template>

package/LatexFormula/App.vue

@@ -1,13 +1,16 @@
 <script setup>
-import { ref, onMounted } from "vue";
-import { JsvLatex, globalLoadJsvLatexPlugin } from "jsview";
+import { ref, computed } from "vue";
+import { JsvLatex, globalLoadJsvLatexPlugin, processLatexStr } from "jsview";
 
 globalLoadJsvLatexPlugin((status) => {
   console.log("load JsvLatex plugin status", status);
 });
 
-const latexStr = `\\begin{array}{l}
-  测试文字 \\forall\\varepsilon\\in\\mathbb{R}_+^*\\ \\exists\\eta>0\\ |x-x_0|\\leq\\eta\\Longrightarrow|f(x)-f(x_0)|\\leq\\varepsilon测试文字\\\\
+const stringList = [
+  {
+    width: 800,
+    str: `\\begin{array}{l}
+  \\textbf{测试}文字 \\forall\\varepsilon\\in\\mathbb{R}_+^*\\ \\exists\\eta>0\\ |x-x_0|\\leq\\eta\\Longrightarrow|f(x)-f(x_0)|\\leq\\varepsilon测试文字\\\\
   测试文字\\det
   \\begin{bmatrix}
       a_{11}&a_{12}&\\cdots&a_{1n}\\\\
@@ -32,25 +35,109 @@ const latexStr = `\\begin{array}{l}
       &= \\int_a^b \\sqrt{u'(t)^2\\,\\vec{r}_u\\cdot\\vec{r}_u + 2u'(t)v'(t)\\, \\vec{r}_u\\cdot
           \\vec{r}_v+ v'(t)^2\\,\\vec{r}_v\\cdot\\vec{r}_v}\\,\\,\\, dt. 
   \\end{array}\\\\
-\\end{array}`;
+\\end{array}`,
+  },
+  {
+    width: 1100,
+    str: `要解这个方程 \\(x^2 + 2x + 1 = 9\\)，我们首先将方程移项，得到：
 
-onMounted(() => {});
+\\[x^2 + 2x + 1 - 9 = 0\\]
+
+简化后得到：
+
+\\[x^2 + 2x - 8 = 0\\]
+
+在这个方程中，\\(a = 1\\), \\(b = 2\\), \\(c = -8\\)。代入求根公式：
+
+\\[x = \\frac{-2 \\pm \\sqrt{2^2 - 4 \\cdot 1 \\cdot (-8)}}{2 \\cdot 1}\\]
+
+\\[x = \\frac{-2 \\pm \\sqrt{4 + 32}}{2}\\]
+
+\\[x = \\frac{-2 \\pm \\sqrt{36}}{2}\\]
+
+\\[x = \\frac{-2 \\pm 6}{2}\\]
+这给出了两个解：
+
+\\[x_1 = \\frac{-2 + 6}{2} = 2\\]
+
+\\[x_2 = \\frac{-2 - 6}{2} = -4\\]
+
+所以，方程 \\(x^2 + 2x + 1 = 9\\) 的解是 \\(x = 2\\) 和 \\(x = -4\\)。`,
+  },
+  {
+    width: 1100,
+    str: `当然可以，这里有一个涉及正弦和余弦的三角函数问题：
+
+在一个直角三角形中，一个角的正弦值是 \\(\\frac{3}{5}\\)，余弦值是 \\(\\frac{4}{5}\\)。请计算这个角的正切值和余切值。
+
+提示：正切值 \\(\\tan(\\theta)\\) 可以通过正弦和余弦的比值来计算，即 \\(\\tan(\\theta) = \\frac{\\sin(\\theta)}{\\cos(\\theta)}\\)。余切值 \\(\\cot(\\theta)\\) 是正切值的倒数，即 \\(\\cot(\\theta) = \\frac{1}{\\tan(\\theta)}\\)。
+
+请计算这个角的正切值和余切值。
+\\[ \\tan(\\theta) = 0.75 \\]
+\\[ \\cot(\\theta) = 1.33333333 \\]
+
+这个角的正切值是 \\(0.75\\)，余切值是 \\(1.33333333\\)。`,
+  },
+];
+const dataIndex = ref(0);
+const width = computed(() => {
+  return stringList[dataIndex.value].width;
+});
+
+const latexStr = computed(() => {
+  const s = stringList[dataIndex.value].str;
+  // return s.replaceAll(/(?<!\\\\)[\n]+/g, "\\\\");
+  return processLatexStr(s);
+});
+
+const onKeyDown = (ev) => {
+  switch (ev.keyCode) {
+    case 37:
+      dataIndex.value =
+        dataIndex.value > 0 ? dataIndex.value - 1 : stringList.length - 1;
+      return true;
+    case 39:
+      dataIndex.value =
+        dataIndex.value < stringList.length - 1 ? dataIndex.value + 1 : 0;
+      return true;
+    default:
+      return false;
+  }
+};
 </script>
 <template>
-  <div
+  <jsv-focus-block
+    autoFocus
+    :onAction="{
+      onKeyDown,
+    }"
     :style="{
       width: 1280,
       height: 720,
       backgroundColor: '#007788',
     }"
-  ></div>
+  ></jsv-focus-block>
   <jsv-latex
+    :key="dataIndex"
     :latexStr="latexStr"
-    :left="50"
-    :width="800"
+    :top="20"
+    :left="20"
+    :width="width"
     :fontSize="25"
     color="#FFFFFF"
   ></jsv-latex>
+  <div
+    :style="{
+      width: 300,
+      height: 100,
+      left: 900,
+      top: 650,
+      color: '#ffffff',
+      fontSize: 30,
+    }"
+  >
+    按左右键切换内容
+  </div>
 </template>
 
 <style scoped>

package/MetroWidgetDemos/itemSizeUpdate/backward/Item.vue

@@ -33,7 +33,7 @@ const duration = 200;
 let timeoutHandler = -1;
 
 const animInfo = {
-  anchor: 0,
+  anchor: props.query.index == 28 ? undefined : 0,
   duration: duration,
   onEnd: () => {
     console.log("resize end", props.query.index);